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@2224
|
6 width: 100%;
|
nicholas@2224
|
7 height: 50px;
|
nicholas@2224
|
8 margin-bottom: 10px;
|
nicholas@2224
|
9 font-size: 2em;
|
nicholas@2224
|
10 }
|
nicholas@2224
|
11
|
nicholas@2224
|
12 div.indicator-box {
|
nicholas@2224
|
13 position: absolute;
|
nicholas@2224
|
14 left: 150px;
|
nicholas@2224
|
15 top: 10px;
|
nicholas@2224
|
16 width: 300px;
|
nicholas@2224
|
17 height: 60px;
|
nicholas@2224
|
18 padding: 20px;
|
nicholas@2224
|
19 border-radius: 10px;
|
nicholas@2224
|
20 background-color: rgb(100,200,200);
|
nicholas@2224
|
21 }
|
nicholas@2224
|
22
|
nicholas@2224
|
23 div.comment-div {
|
nicholas@2224
|
24 border:1px solid #444444;
|
nicholas@2224
|
25 max-width: 600px;
|
nicholas@2224
|
26 min-width: 400px;
|
nicholas@2224
|
27 float: left;
|
nicholas@2224
|
28 margin: 5px 10px 5px 5px;
|
nicholas@2224
|
29 height: 90px;
|
nicholas@2224
|
30 border-radius: 10px;
|
nicholas@2224
|
31 }
|
nicholas@2224
|
32
|
nicholas@2224
|
33 div.comment-div span {
|
nicholas@2224
|
34 margin-left: 15px;
|
nicholas@2224
|
35 }
|
nicholas@2224
|
36
|
nicholas@2224
|
37 div.popupHolder {
|
nicholas@2224
|
38 width: 500px;
|
nicholas@2224
|
39 min-height: 250px;
|
nicholas@2224
|
40 max-height: 400px;
|
nicholas@2224
|
41 background-color: #fff;
|
nicholas@2224
|
42 border-radius: 10px;
|
nicholas@2224
|
43 box-shadow: 0px 0px 50px #000;
|
nicholas@2297
|
44 z-index: 10;
|
giuliomoro@2339
|
45 position: fixed;
|
nicholas@2224
|
46 }
|
nicholas@2224
|
47
|
nicholas@2224
|
48 div#popupContent {
|
nicholas@2224
|
49 margin-top: 20px;
|
nicholas@2224
|
50 margin-bottom: 35px;
|
giuliomoro@2339
|
51 overflow: auto;
|
nicholas@2224
|
52 }
|
nicholas@2224
|
53
|
nicholas@2285
|
54 div#popupTitleHolder {
|
nicholas@2224
|
55 width: inherit;
|
nicholas@2224
|
56 min-height: 25px;
|
nicholas@2224
|
57 max-height: 250px;
|
nicholas@2224
|
58 overflow: auto;
|
nicholas@2224
|
59 margin-bottom: 5px;
|
giuliomoro@2339
|
60 padding: 8px;
|
nicholas@2344
|
61 text-align: center;
|
giuliomoro@2339
|
62 }
|
giuliomoro@2339
|
63
|
giuliomoro@2339
|
64 #popupTitle {
|
giuliomoro@2339
|
65 white-space: pre-line;
|
nicholas@2224
|
66 }
|
nicholas@2224
|
67
|
nicholas@2224
|
68 div#popupResponse {
|
nicholas@2224
|
69 width: inherit;
|
nicholas@2224
|
70 min-height: 50px;
|
nicholas@2224
|
71 max-height: 320px;
|
nicholas@2224
|
72 overflow: auto;
|
nicholas@2224
|
73 position: relative;
|
nicholas@2224
|
74 }
|
nicholas@2224
|
75
|
nicholas@2224
|
76 button.popupButton {
|
nicholas@2224
|
77 /* Button for popup window
|
nicholas@2224
|
78 */
|
nicholas@2224
|
79 width: 50px;
|
nicholas@2224
|
80 height: 25px;
|
nicholas@2224
|
81 position: absolute;
|
nicholas@2224
|
82 border-radius: 5px;
|
nicholas@2224
|
83 border: #444;
|
nicholas@2224
|
84 border-width: 1px;
|
nicholas@2224
|
85 border-style: solid;
|
nicholas@2224
|
86 background-color: #fff;
|
nicholas@2224
|
87 }
|
nicholas@2224
|
88
|
nicholas@2224
|
89 div.popup-option-checbox {
|
nicholas@2224
|
90 /* Popup window checkbox */
|
nicholas@2224
|
91 padding: 5px;
|
nicholas@2224
|
92 width: fit-content;
|
nicholas@2224
|
93 width: -moz-fit-content;
|
nicholas@2224
|
94 width: -webkit-fit-content;
|
nicholas@2224
|
95 }
|
nicholas@2224
|
96
|
nicholas@2224
|
97 div.popup-option-checbox input{
|
nicholas@2224
|
98 /* Popup window checkbox */
|
nicholas@2224
|
99 margin-right: 15px;
|
nicholas@2224
|
100 }
|
nicholas@2224
|
101
|
nicholas@2224
|
102 button#popup-proceed {
|
nicholas@2224
|
103 bottom: 10px;
|
nicholas@2224
|
104 right: 10px;
|
nicholas@2224
|
105 }
|
nicholas@2224
|
106
|
nicholas@2224
|
107 button#popup-previous {
|
nicholas@2224
|
108 bottom: 10px;
|
nicholas@2224
|
109 left: 10px;
|
nicholas@2224
|
110 }
|
nicholas@2224
|
111
|
nicholas@2224
|
112 div.testHalt {
|
nicholas@2224
|
113 /* Specify any colouring during the test halt for pre/post questions */
|
nicholas@2224
|
114 background-color: rgba(0,0,0,0.5);
|
nicholas@2224
|
115 /* Don't mess with this bit */
|
nicholas@2297
|
116 z-index: 9;
|
nicholas@2224
|
117 width: 100%;
|
nicholas@2224
|
118 height: 100%;
|
nicholas@2297
|
119 position: fixed;
|
nicholas@2224
|
120 left: 0px;
|
nicholas@2224
|
121 top: 0px;
|
nicholas@2224
|
122 }
|
nicholas@2224
|
123
|
nicholas@2224
|
124 button.outside-reference {
|
nicholas@2224
|
125 width:120px;
|
nicholas@2224
|
126 height:20px;
|
nicholas@2224
|
127 margin-bottom:5px;
|
nicholas@2224
|
128 position: absolute;
|
nicholas@2224
|
129 }
|
nicholas@2224
|
130
|
nicholas@2224
|
131 textarea.trackComment {
|
nicholas@2224
|
132 max-width: 594px;
|
nicholas@2224
|
133 min-width: 350px;
|
nicholas@2224
|
134 max-height: 60px;
|
nicholas@2224
|
135 resize: none;
|
nicholas@2224
|
136 }
|
nicholas@2224
|
137
|
nicholas@2224
|
138 div.playhead {
|
nicholas@2224
|
139 width: 500px;
|
nicholas@2224
|
140 height: 50px;
|
nicholas@2224
|
141 background-color: #eee;
|
nicholas@2224
|
142 border-radius: 10px;
|
nicholas@2224
|
143 padding: 10px;
|
nicholas@2224
|
144 }
|
nicholas@2224
|
145
|
nicholas@2224
|
146 div.playhead-scrub-track {
|
nicholas@2224
|
147 width: 100%;
|
nicholas@2224
|
148 height: 10px;
|
nicholas@2224
|
149 border-style: solid;
|
nicholas@2224
|
150 border-width: 1px;
|
nicholas@2224
|
151 }
|
nicholas@2224
|
152
|
nicholas@2224
|
153 div#playhead-scrubber {
|
nicholas@2224
|
154 width: 10px;
|
nicholas@2224
|
155 height: 10px;
|
nicholas@2224
|
156 position: relative;
|
nicholas@2224
|
157 background-color: #000;
|
nicholas@2224
|
158 }
|
nicholas@2224
|
159
|
nicholas@2224
|
160 div#master-volume-holder {
|
nicholas@2224
|
161 width: 250px;
|
nicholas@2224
|
162 float: left;
|
nicholas@2224
|
163 border: black 1px solid;
|
nicholas@2224
|
164 border-radius: 5px;
|
nicholas@2224
|
165 padding: 5px;
|
nicholas@2224
|
166 }
|
nicholas@2224
|
167
|
nicholas@2224
|
168 input#master-volume-control {
|
nicholas@2224
|
169 width: 200px;
|
nicholas@2224
|
170 height: 25px;
|
nicholas@2224
|
171 float: left;
|
nicholas@2224
|
172 margin: 0px;
|
nicholas@2224
|
173 padding: 0px;
|
nicholas@2224
|
174 }
|
nicholas@2224
|
175
|
nicholas@2224
|
176 span#master-volume-feedback {
|
nicholas@2224
|
177 width: 45px;
|
nicholas@2224
|
178 height: 25px;
|
nicholas@2224
|
179 margin-left: 5px;
|
nicholas@2224
|
180 float: left;
|
nicholas@2224
|
181 }
|
nicholas@2224
|
182
|
nicholas@2224
|
183 div.error-colour {
|
nicholas@2224
|
184 background-color: #FF8F8F;
|
nicholas@2224
|
185 }
|
nicholas@2224
|
186 button.error-colour {
|
nicholas@2224
|
187 background-color: #FF8F8F;
|
nicholas@2224
|
188 color: black;
|
nicholas@2224
|
189 }
|
nicholas@2224
|
190
|
nicholas@2224
|
191 div.calibration-holder {
|
nicholas@2224
|
192 text-align: center;
|
nicholas@2224
|
193 align-content: center;
|
nicholas@2224
|
194 height: auto;
|
nicholas@2224
|
195 }
|
nicholas@2224
|
196
|
nicholas@2224
|
197 div.calibration-slider {
|
nicholas@2224
|
198 width: 50px;
|
nicholas@2224
|
199 margin: 2px;
|
nicholas@2224
|
200 text-align: center;
|
nicholas@2224
|
201 align-content: center;
|
nicholas@2224
|
202 float: left;
|
nicholas@2224
|
203 }
|
nicholas@2224
|
204
|
nicholas@2224
|
205 div.calibration-slider input[type=range][orient=vertical]
|
nicholas@2224
|
206 {
|
nicholas@2224
|
207 writing-mode: bt-lr; /* IE */
|
nicholas@2224
|
208 -webkit-appearance: slider-vertical; /* WebKit */
|
nicholas@2224
|
209 width: 8px;
|
nicholas@2224
|
210 padding: 0 5px;
|
nicholas@2224
|
211 height: 290px;
|
giuliomoro@2339
|
212 }
|
giuliomoro@2340
|
213
|
giuliomoro@2340
|
214 ::-webkit-scrollbar {
|
giuliomoro@2340
|
215 -webkit-appearance: none;
|
giuliomoro@2340
|
216 width: 7px;
|
giuliomoro@2340
|
217 }
|
giuliomoro@2340
|
218
|
giuliomoro@2340
|
219 ::-webkit-scrollbar-thumb {
|
giuliomoro@2340
|
220 border-radius: 4px;
|
giuliomoro@2340
|
221 background-color: rgba(0,0,0,.5);
|
giuliomoro@2340
|
222 -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
|
giuliomoro@2340
|
223 }
|