Mercurial > hg > webaudioevaluationtool
annotate test_create/style.css @ 505:cf55f9ee9446 Dev_main
Test create drag and drop active. Auto-builds on page HTML from specification.
author | Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk> |
---|---|
date | Thu, 11 Feb 2016 12:06:54 +0000 |
parents | f8920367ec32 |
children | 1dbc6d3e6fb5 |
rev | line source |
---|---|
n@501 | 1 div#blanket { |
n@501 | 2 z-index: 2; |
n@501 | 3 background-color: rgba(0,0,0,0.5); |
n@501 | 4 width: 100%; |
n@501 | 5 height: 100%; |
n@505 | 6 position: fixed; |
n@501 | 7 left: 0px; |
n@501 | 8 top: 0px; |
n@501 | 9 } |
n@501 | 10 |
n@501 | 11 div#popupHolder { |
n@501 | 12 z-index: 3; |
n@501 | 13 background-color: rgba(255,255,255,1); |
n@501 | 14 width: 730px; |
n@501 | 15 height: 480px; |
n@505 | 16 position: fixed; |
n@501 | 17 border-radius: 10px; |
n@501 | 18 box-shadow: 0px 0px 50px #000; |
n@501 | 19 padding: 10px; |
n@501 | 20 } |
n@501 | 21 |
n@501 | 22 div#popup-title-holder { |
n@501 | 23 width: 100%; |
n@501 | 24 height: 50px; |
n@501 | 25 font-size: 2em; |
n@501 | 26 } |
n@501 | 27 |
n@501 | 28 button#popup-proceed { |
n@501 | 29 width: 60px; |
n@501 | 30 height: 27px; |
n@501 | 31 padding: 5px; |
n@501 | 32 position: absolute; |
n@501 | 33 right: 10px; |
n@501 | 34 bottom: 10px; |
n@501 | 35 } |
n@501 | 36 |
n@504 | 37 div.drag-area { |
n@504 | 38 border: 3px black dashed; |
n@504 | 39 } |
n@504 | 40 div.drag-over { |
n@504 | 41 background-color: aquamarine; |
n@504 | 42 } |
n@504 | 43 div.drag-dropped { |
n@504 | 44 background-color: aqua; |
n@504 | 45 } |
n@504 | 46 div.drag-error { |
n@504 | 47 background-color: coral |
n@504 | 48 } |
n@504 | 49 |
n@504 | 50 div#project-drop { |
n@504 | 51 width: 99%; |
n@504 | 52 height: 50px; |
n@504 | 53 margin: 10px 0px; |
n@504 | 54 } |
n@504 | 55 |
n@501 | 56 div.popup-checkbox { |
n@501 | 57 padding: 5px; |
n@501 | 58 } |
n@501 | 59 |
n@501 | 60 div.popup-checkbox input { |
n@501 | 61 margin: 0px 5px; |
n@501 | 62 } |
n@501 | 63 |
n@501 | 64 div.disabled{ |
n@501 | 65 color: rgb(100,100,100); |
n@501 | 66 } |
n@501 | 67 |
n@501 | 68 div.node { |
n@501 | 69 float: left; |
n@501 | 70 padding: 10px; |
n@501 | 71 border: black 2px solid; |
n@501 | 72 border-radius: 10px; |
n@505 | 73 margin: 10px; |
n@501 | 74 min-width: 92%; |
n@501 | 75 } |
n@501 | 76 div.node-title { |
n@501 | 77 float: left; |
n@501 | 78 width: 100%; |
n@501 | 79 font-size: 2em; |
n@501 | 80 margin: 5px 0px; |
n@501 | 81 } |
n@501 | 82 div.node-attributes { |
n@501 | 83 width: auto; |
n@501 | 84 float: left; |
n@501 | 85 padding: 10px; |
n@501 | 86 border: black 2px dashed; |
n@501 | 87 } |
n@501 | 88 div.attribute { |
n@501 | 89 float: left; |
n@501 | 90 margin-right: 10px; |
n@501 | 91 } |
n@501 | 92 div.node-children { |
n@501 | 93 float: left; |
n@501 | 94 } |
n@501 | 95 div.node-buttons { |
n@501 | 96 float: left; |
n@501 | 97 } |
n@501 | 98 div.attribute input { |
n@501 | 99 max-width: 100px; |
n@501 | 100 margin-right: 10px; |
n@501 | 101 } |
n@501 | 102 div.attribute input[type=number] { |
n@501 | 103 width: 80px; |
n@501 | 104 } |