Mercurial > hg > webaudioevaluationtool
annotate core.css @ 1205:0e49d874ba97
Interfaces report error if audio cannot be loaded/decoded/played
author | Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk> |
---|---|
date | Mon, 22 Feb 2016 15:48:28 +0000 |
parents | a4ad9e55b5b8 |
children | 124e6c702845 |
rev | line source |
---|---|
n@920 | 1 /* structure.css |
n@920 | 2 * Define the structure for classes and objects in HTML |
n@920 | 3 */ |
n@920 | 4 |
n@920 | 5 div.title { |
n@920 | 6 width: 100%; |
n@920 | 7 height: 50px; |
n@920 | 8 margin-bottom: 10px; |
n@920 | 9 font-size: 2em; |
n@920 | 10 } |
n@920 | 11 |
n@920 | 12 div.indicator-box { |
n@920 | 13 position: absolute; |
n@920 | 14 left: 150px; |
n@920 | 15 top: 10px; |
n@920 | 16 width: 300px; |
n@920 | 17 height: 60px; |
n@920 | 18 padding: 20px; |
n@920 | 19 border-radius: 10px; |
n@920 | 20 background-color: rgb(100,200,200); |
n@920 | 21 } |
n@920 | 22 |
n@920 | 23 div.comment-div { |
n@1178 | 24 border:1px solid #444444; |
n@855 | 25 max-width: 600px; |
n@854 | 26 min-width: 400px; |
n@920 | 27 float: left; |
n@1178 | 28 margin: 5px 10px 5px 5px; |
n@1026 | 29 height: 90px; |
n@1178 | 30 border-radius: 10px; |
n@920 | 31 } |
n@920 | 32 |
n@920 | 33 div.comment-div span { |
n@920 | 34 margin-left: 15px; |
n@920 | 35 } |
n@920 | 36 |
n@920 | 37 div.popupHolder { |
n@920 | 38 width: 500px; |
n@856 | 39 min-height: 250px; |
n@856 | 40 max-height: 400px; |
n@920 | 41 background-color: #fff; |
n@920 | 42 border-radius: 10px; |
n@920 | 43 box-shadow: 0px 0px 50px #000; |
n@920 | 44 z-index: 2; |
n@1179 | 45 position: absolute; |
n@1179 | 46 } |
n@1179 | 47 |
n@1179 | 48 div#popupContent { |
n@1179 | 49 margin-top: 20px; |
n@1179 | 50 margin-bottom: 5px; |
n@1179 | 51 } |
n@1179 | 52 |
n@1179 | 53 div#popupTitle { |
n@1179 | 54 width: inherit; |
n@1179 | 55 min-height: 25px; |
n@1179 | 56 max-height: 250px; |
n@1179 | 57 overflow: auto; |
n@1179 | 58 margin-bottom: 5px; |
n@1179 | 59 } |
n@1179 | 60 |
n@1179 | 61 div#popupResponse { |
n@1179 | 62 width: inherit; |
n@1179 | 63 min-height: 50px; |
n@1179 | 64 max-height: 320px; |
n@1179 | 65 overflow: auto; |
n@1182 | 66 position: relative; |
n@920 | 67 } |
n@920 | 68 |
n@920 | 69 button.popupButton { |
n@920 | 70 /* Button for popup window |
n@920 | 71 */ |
n@920 | 72 width: 50px; |
n@920 | 73 height: 25px; |
n@1171 | 74 position: absolute; |
n@920 | 75 border-radius: 5px; |
n@920 | 76 border: #444; |
n@920 | 77 border-width: 1px; |
n@920 | 78 border-style: solid; |
n@920 | 79 background-color: #fff; |
n@920 | 80 } |
n@920 | 81 |
n@1171 | 82 button#popup-proceed { |
n@1171 | 83 bottom: 10px; |
n@1171 | 84 right: 10px; |
n@1171 | 85 } |
n@1171 | 86 |
n@1171 | 87 button#popup-previous { |
n@1171 | 88 bottom: 10px; |
n@1171 | 89 left: 10px; |
n@1171 | 90 } |
n@1171 | 91 |
n@749 | 92 div.testHalt { |
n@749 | 93 /* Specify any colouring during the test halt for pre/post questions */ |
n@749 | 94 background-color: rgba(0,0,0,0.5); |
n@749 | 95 /* Don't mess with this bit */ |
n@749 | 96 z-index: 2; |
n@749 | 97 width: 100%; |
n@749 | 98 height: 100%; |
n@749 | 99 position: absolute; |
n@749 | 100 left: 0px; |
n@749 | 101 top: 0px; |
n@749 | 102 } |
n@749 | 103 |
n@920 | 104 textarea.trackComment { |
n@855 | 105 max-width: 594px; |
n@854 | 106 min-width: 350px; |
n@855 | 107 max-height: 60px; |
n@1178 | 108 resize: none; |
n@920 | 109 } |
n@894 | 110 |
n@894 | 111 div.playhead { |
n@894 | 112 width: 500px; |
n@894 | 113 height: 50px; |
n@894 | 114 background-color: #eee; |
n@894 | 115 border-radius: 10px; |
n@894 | 116 padding: 10px; |
n@894 | 117 } |
n@894 | 118 |
n@894 | 119 div.playhead-scrub-track { |
n@894 | 120 width: 100%; |
n@894 | 121 height: 10px; |
n@894 | 122 border-style: solid; |
n@894 | 123 border-width: 1px; |
n@894 | 124 } |
n@894 | 125 |
n@894 | 126 div#playhead-scrubber { |
n@894 | 127 width: 10px; |
n@894 | 128 height: 10px; |
n@894 | 129 position: relative; |
n@894 | 130 background-color: #000; |
n@894 | 131 } |
n@1154 | 132 |
n@1154 | 133 div#master-volume-holder { |
n@1154 | 134 width: 250px; |
n@1154 | 135 float: left; |
n@1155 | 136 border: black 1px solid; |
n@1155 | 137 border-radius: 5px; |
n@1155 | 138 padding: 5px; |
n@1154 | 139 } |
n@1154 | 140 |
n@1154 | 141 input#master-volume-control { |
n@1154 | 142 width: 200px; |
n@1154 | 143 height: 25px; |
n@1154 | 144 float: left; |
n@1154 | 145 margin: 0px; |
n@1154 | 146 padding: 0px; |
n@1154 | 147 } |
n@1154 | 148 |
n@1154 | 149 span#master-volume-feedback { |
n@1154 | 150 width: 45px; |
n@1154 | 151 height: 25px; |
n@1154 | 152 margin-left: 5px; |
n@1154 | 153 float: left; |
n@1205 | 154 } |
n@1205 | 155 |
n@1205 | 156 div.error-colour { |
n@1205 | 157 background-color: #FF8F8F; |
n@1205 | 158 } |
n@1205 | 159 button.error-colour { |
n@1205 | 160 background-color: #FF8F8F; |
n@1205 | 161 color: black; |
n@1154 | 162 } |