nicholas@2224
|
1 /* structure.css
|
nicholas@2224
|
2 * Define the structure for classes and objects in HTML
|
nicholas@2224
|
3 */
|
nicholas@2224
|
4
|
nicholas@2224
|
5 div.title {
|
nicholas@2538
|
6 width: 100%;
|
nicholas@2538
|
7 height: 50px;
|
nicholas@2538
|
8 margin-bottom: 10px;
|
nicholas@2538
|
9 font-size: 2em;
|
nicholas@2224
|
10 }
|
nicholas@2842
|
11 div#footer {
|
nicholas@2842
|
12 position: fixed;
|
nicholas@2842
|
13 bottom: 0px;
|
nicholas@2842
|
14 width: 100%;
|
nicholas@2842
|
15 text-align: center;
|
nicholas@2842
|
16 }
|
nicholas@2224
|
17 div.indicator-box {
|
nicholas@2538
|
18 position: absolute;
|
nicholas@2538
|
19 left: 150px;
|
nicholas@2538
|
20 top: 10px;
|
nicholas@2538
|
21 width: 300px;
|
nicholas@2538
|
22 height: 60px;
|
nicholas@2538
|
23 padding: 20px;
|
nicholas@2538
|
24 border-radius: 10px;
|
nicholas@2538
|
25 background-color: rgb(100, 200, 200);
|
nicholas@2224
|
26 }
|
nicholas@2224
|
27 div.comment-div {
|
nicholas@2538
|
28 border: 1px solid #444444;
|
nicholas@2538
|
29 max-width: 600px;
|
nicholas@2538
|
30 min-width: 400px;
|
nicholas@2538
|
31 float: left;
|
nicholas@2538
|
32 margin: 5px 10px 5px 5px;
|
nicholas@2538
|
33 height: 90px;
|
nicholas@2224
|
34 border-radius: 10px;
|
nicholas@2224
|
35 }
|
nicholas@2224
|
36 div.comment-div span {
|
nicholas@2538
|
37 margin-left: 15px;
|
nicholas@2224
|
38 }
|
nicholas@2224
|
39 div.popupHolder {
|
nicholas@2538
|
40 width: 500px;
|
nicholas@2538
|
41 min-height: 250px;
|
nicholas@2538
|
42 max-height: 400px;
|
nicholas@2538
|
43 background-color: #fff;
|
nicholas@2538
|
44 border-radius: 10px;
|
nicholas@2538
|
45 box-shadow: 0px 0px 50px #000;
|
nicholas@2538
|
46 z-index: 10;
|
nicholas@2538
|
47 position: fixed;
|
nicholas@2224
|
48 }
|
nicholas@2224
|
49 div#popupContent {
|
nicholas@2224
|
50 margin-top: 20px;
|
nicholas@2224
|
51 margin-bottom: 35px;
|
giuliomoro@2339
|
52 overflow: auto;
|
nicholas@2224
|
53 }
|
nicholas@2491
|
54 div#popupContent iframe {
|
nicholas@2491
|
55 width: 100%;
|
nicholas@2491
|
56 border: 0px none;
|
nicholas@2491
|
57 height: 290px;
|
nicholas@2491
|
58 }
|
nicholas@2285
|
59 div#popupTitleHolder {
|
nicholas@2224
|
60 width: inherit;
|
nicholas@2224
|
61 min-height: 25px;
|
nicholas@2224
|
62 max-height: 250px;
|
nicholas@2224
|
63 overflow: auto;
|
nicholas@2224
|
64 margin-bottom: 5px;
|
giuliomoro@2339
|
65 padding: 8px;
|
nicholas@2344
|
66 text-align: center;
|
giuliomoro@2339
|
67 }
|
nicholas@2224
|
68 div#popupResponse {
|
nicholas@2224
|
69 width: inherit;
|
nicholas@2224
|
70 min-height: 50px;
|
nicholas@2738
|
71 max-height: 270px;
|
nicholas@2224
|
72 overflow: auto;
|
nicholas@2224
|
73 position: relative;
|
nicholas@2738
|
74 margin-bottom: 10px;
|
nicholas@2224
|
75 }
|
nicholas@2224
|
76 button.popupButton {
|
nicholas@2538
|
77 /* Button for popup window
|
nicholas@2224
|
78 */
|
nicholas@2538
|
79 width: 50px;
|
nicholas@2538
|
80 height: 25px;
|
nicholas@2538
|
81 position: absolute;
|
nicholas@2538
|
82 border-radius: 5px;
|
nicholas@2538
|
83 border: #444;
|
nicholas@2538
|
84 border-width: 1px;
|
nicholas@2538
|
85 border-style: solid;
|
nicholas@2538
|
86 background-color: #fff;
|
nicholas@2224
|
87 }
|
n@2926
|
88 div.popup-option-checkbox {
|
nicholas@2224
|
89 /* Popup window checkbox */
|
nicholas@2224
|
90 padding: 5px;
|
nicholas@2224
|
91 width: fit-content;
|
nicholas@2224
|
92 width: -moz-fit-content;
|
nicholas@2224
|
93 width: -webkit-fit-content;
|
nicholas@2224
|
94 }
|
n@2926
|
95 div.popup-option-checkbox input {
|
nicholas@2224
|
96 /* Popup window checkbox */
|
nicholas@2224
|
97 margin-right: 15px;
|
nicholas@2224
|
98 }
|
nicholas@2346
|
99 table.popup-option-list {
|
nicholas@2346
|
100 margin: auto;
|
nicholas@2346
|
101 }
|
nicholas@2346
|
102 table.popup-option-list tr {
|
nicholas@2346
|
103 padding: 5px;
|
nicholas@2346
|
104 }
|
nicholas@2346
|
105 table.popup-option-list tr td {
|
nicholas@2346
|
106 padding: 5px;
|
nicholas@2346
|
107 }
|
n@2583
|
108 div.survey-slider-text-holder {
|
n@2583
|
109 display: flex;
|
n@2583
|
110 flex-direction: row;
|
n@2583
|
111 justify-content: space-between;
|
n@2583
|
112 padding: 0px 15px;
|
n@2583
|
113 }
|
nicholas@2224
|
114 button#popup-proceed {
|
nicholas@2224
|
115 bottom: 10px;
|
nicholas@2224
|
116 right: 10px;
|
nicholas@2224
|
117 }
|
nicholas@2224
|
118 button#popup-previous {
|
nicholas@2224
|
119 bottom: 10px;
|
nicholas@2224
|
120 left: 10px;
|
nicholas@2224
|
121 }
|
nicholas@2224
|
122 div.testHalt {
|
nicholas@2538
|
123 /* Specify any colouring during the test halt for pre/post questions */
|
nicholas@2538
|
124 background-color: rgba(0, 0, 0, 0.5);
|
nicholas@2538
|
125 /* Don't mess with this bit */
|
nicholas@2538
|
126 z-index: 9;
|
nicholas@2538
|
127 width: 100%;
|
nicholas@2538
|
128 height: 100%;
|
nicholas@2538
|
129 position: fixed;
|
nicholas@2538
|
130 left: 0px;
|
nicholas@2538
|
131 top: 0px;
|
nicholas@2224
|
132 }
|
nicholas@2360
|
133 div#lightbox-root {
|
nicholas@2360
|
134 visibility: hidden;
|
nicholas@2360
|
135 z-index: 20;
|
nicholas@2360
|
136 top: 25px;
|
nicholas@2360
|
137 min-height: 50px;
|
nicholas@2360
|
138 max-height: 250px;
|
nicholas@2360
|
139 }
|
nicholas@2360
|
140 div.lightbox-error {
|
nicholas@2360
|
141 margin: 25px;
|
nicholas@2360
|
142 margin-bottom: 50px;
|
nicholas@2360
|
143 padding: 5px;
|
nicholas@2360
|
144 border-radius: 5px;
|
nicholas@2538
|
145 background-color: rgb(255, 220, 220);
|
nicholas@2538
|
146 border: 2px rgb(200, 0, 0) solid;
|
nicholas@2360
|
147 }
|
nicholas@2360
|
148 div.lightbox-warning {
|
nicholas@2360
|
149 margin: 25px;
|
nicholas@2360
|
150 margin-bottom: 50px;
|
nicholas@2360
|
151 padding: 5px;
|
nicholas@2360
|
152 border-radius: 5px;
|
nicholas@2538
|
153 background-color: rgb(255, 255, 220);
|
nicholas@2538
|
154 border: 2px rgb(255, 250, 0) solid;
|
nicholas@2360
|
155 }
|
nicholas@2360
|
156 div.lightbox-message {
|
nicholas@2360
|
157 margin: 25px;
|
nicholas@2360
|
158 margin-bottom: 50px;
|
nicholas@2360
|
159 padding: 5px;
|
nicholas@2360
|
160 border-radius: 5px;
|
nicholas@2538
|
161 background-color: rgb(200, 220, 255);
|
nicholas@2538
|
162 border: 2px rgb(50, 100, 250) solid;
|
nicholas@2360
|
163 }
|
nicholas@2360
|
164 div#lightbox-blanker {
|
nicholas@2360
|
165 visibility: hidden;
|
nicholas@2360
|
166 z-index: 19;
|
nicholas@2360
|
167 }
|
nicholas@2224
|
168 button.outside-reference {
|
nicholas@2538
|
169 width: 120px;
|
nicholas@2538
|
170 height: 20px;
|
nicholas@2538
|
171 margin-bottom: 5px;
|
nicholas@2538
|
172 position: absolute;
|
nicholas@2224
|
173 }
|
nicholas@2224
|
174 textarea.trackComment {
|
nicholas@2538
|
175 max-width: 594px;
|
nicholas@2538
|
176 min-width: 350px;
|
nicholas@2538
|
177 max-height: 60px;
|
nicholas@2224
|
178 resize: none;
|
nicholas@2224
|
179 }
|
nicholas@2224
|
180 div.playhead {
|
nicholas@2538
|
181 width: 500px;
|
nicholas@2538
|
182 height: 50px;
|
nicholas@2538
|
183 background-color: #eee;
|
nicholas@2538
|
184 border-radius: 10px;
|
nicholas@2538
|
185 padding: 10px;
|
nicholas@2224
|
186 }
|
nicholas@2224
|
187 div.playhead-scrub-track {
|
nicholas@2538
|
188 width: 100%;
|
nicholas@2538
|
189 height: 10px;
|
nicholas@2538
|
190 border-style: solid;
|
nicholas@2538
|
191 border-width: 1px;
|
nicholas@2224
|
192 }
|
nicholas@2224
|
193 div#playhead-scrubber {
|
nicholas@2538
|
194 width: 10px;
|
nicholas@2538
|
195 height: 10px;
|
nicholas@2538
|
196 position: relative;
|
nicholas@2538
|
197 background-color: #000;
|
nicholas@2224
|
198 }
|
nicholas@2352
|
199 div.master-volume-holder-inline {
|
nicholas@2352
|
200 width: 100%;
|
nicholas@2352
|
201 padding: 5px;
|
nicholas@2352
|
202 }
|
nicholas@2352
|
203 div.master-volume-holder-float {
|
nicholas@2352
|
204 position: absolute;
|
nicholas@2352
|
205 top: 20px;
|
nicholas@2352
|
206 left: 50px;
|
nicholas@2773
|
207 width: 250px;
|
nicholas@2352
|
208 padding: 5px;
|
nicholas@2352
|
209 }
|
nicholas@2352
|
210 div#master-volume-root {
|
nicholas@2538
|
211 margin: auto;
|
nicholas@2224
|
212 border: black 1px solid;
|
nicholas@2224
|
213 border-radius: 5px;
|
nicholas@2352
|
214 width: 250px;
|
nicholas@2352
|
215 height: 40px;
|
nicholas@2224
|
216 }
|
nicholas@2224
|
217 input#master-volume-control {
|
nicholas@2669
|
218 width: 190px;
|
nicholas@2224
|
219 height: 25px;
|
nicholas@2224
|
220 float: left;
|
nicholas@2224
|
221 margin: 0px;
|
nicholas@2224
|
222 padding: 0px;
|
nicholas@2224
|
223 }
|
nicholas@2224
|
224 span#master-volume-feedback {
|
nicholas@2224
|
225 height: 25px;
|
nicholas@2669
|
226 margin: 0px 5px;
|
nicholas@2669
|
227 float: right;
|
nicholas@2224
|
228 }
|
nicholas@2224
|
229 div.error-colour {
|
nicholas@2224
|
230 background-color: #FF8F8F;
|
nicholas@2224
|
231 }
|
nicholas@2224
|
232 button.error-colour {
|
nicholas@2224
|
233 background-color: #FF8F8F;
|
nicholas@2224
|
234 color: black;
|
nicholas@2224
|
235 }
|
nicholas@2224
|
236 div.calibration-holder {
|
nicholas@2224
|
237 text-align: center;
|
nicholas@2224
|
238 align-content: center;
|
nicholas@2224
|
239 height: auto;
|
nicholas@2224
|
240 }
|
nicholas@2224
|
241 div.calibration-slider {
|
nicholas@2224
|
242 width: 50px;
|
nicholas@2224
|
243 margin: 2px;
|
nicholas@2224
|
244 text-align: center;
|
nicholas@2224
|
245 align-content: center;
|
nicholas@2224
|
246 float: left;
|
nicholas@2224
|
247 }
|
nicholas@2538
|
248 div.calibration-slider input[type=range][orient=vertical] {
|
nicholas@2538
|
249 writing-mode: bt-lr;
|
nicholas@2538
|
250 /* IE */
|
nicholas@2538
|
251 -webkit-appearance: slider-vertical;
|
nicholas@2538
|
252 /* WebKit */
|
nicholas@2224
|
253 width: 8px;
|
nicholas@2224
|
254 padding: 0 5px;
|
nicholas@2224
|
255 height: 290px;
|
giuliomoro@2339
|
256 }
|
n@2580
|
257
|
n@2580
|
258 /* Comment Boxes */
|
n@2580
|
259
|
n@2580
|
260 div.comment-slider-text-holder {
|
n@2580
|
261 display: flex;
|
n@2580
|
262 flex-direction: row;
|
n@2580
|
263 justify-content: space-between;
|
n@2580
|
264 }
|
n@2580
|
265 div.comment-slider-text-holder span {
|
n@2580
|
266 margin: 0px 5px;
|
n@2580
|
267 }
|
nicholas@2711
|
268 div.comment-checkbox-inputs-holder {
|
nicholas@2711
|
269 display: flex;
|
nicholas@2711
|
270 flex-direction: row;
|
nicholas@2711
|
271 justify-content: space-around;
|
nicholas@2711
|
272 margin: 10px 5px;
|
nicholas@2711
|
273 }
|
nicholas@2711
|
274 div.comment-checkbox-inputs-flex {
|
nicholas@2711
|
275 display: flex;
|
nicholas@2711
|
276 flex-direction: column;
|
nicholas@2711
|
277 justify-content: space-between;
|
nicholas@2711
|
278 align-items: center;
|
nicholas@2726
|
279 }
|
nicholas@2726
|
280 div.comment-box-playing {
|
nicholas@2726
|
281 background-color: #FFDDDD;
|
nicholas@2726
|
282 }
|
nicholas@2779
|
283 div#imageController {
|
nicholas@2779
|
284 align-content: center;
|
nicholas@2779
|
285 text-align: center;
|
nicholas@2779
|
286 height: 250px;
|
nicholas@2779
|
287 }
|
nicholas@2779
|
288 div#imageController img {
|
nicholas@2779
|
289 max-height: 250px;
|
nicholas@2779
|
290 }
|