Rev 92 | Rev 101 | Go to most recent revision | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed
Rev 92 | Rev 94 | ||
---|---|---|---|
1 | <?php |
1 | <?php |
2 | \header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT'); |
2 | \header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT'); |
3 | 3 | ||
4 | /* Do not let resource be cached in HTTP/1.1 caches */
|
4 | /* Do not let resource be cached in HTTP/1.1 caches */
|
5 | \header('Cache-Control: max-age=0, s-maxage=0, must-revalidate, proxy-revalidate'); |
5 | \header('Cache-Control: max-age=0, s-maxage=0, must-revalidate, proxy-revalidate'); |
6 | 6 | ||
7 | /* Do not let resource be cached in HTTP/1.0 caches */
|
7 | /* Do not let resource be cached in HTTP/1.0 caches */
|
8 | \header('Expires: ' . gmdate('D, d M Y H:i:s', time()) . ' GMT'); |
8 | \header('Expires: ' . gmdate('D, d M Y H:i:s', time()) . ' GMT'); |
9 | 9 | ||
10 | \header('Content-Type: text/css; charset=UTF-8'); |
10 | \header('Content-Type: text/css; charset=UTF-8'); |
11 | ?>@charset "UTF-8"; |
11 | ?>@charset "UTF-8"; |
12 | 12 | ||
13 | <?php |
13 | <?php |
14 | if (!isset($_GET['ani']) || $_GET['ani'] !== '0') |
14 | if (!isset($_GET['ani']) || $_GET['ani'] !== '0') |
15 | {
|
15 | {
|
16 | ?>
|
16 | ?>
|
17 | @import url("/styles/lcars-ani.css");
|
17 | @import url("/styles/lcars-ani.css");
|
18 | <?php |
18 | <?php |
19 | }
|
19 | }
|
20 | ?>
|
20 | ?>
|
21 | 21 | ||
22 | body {
|
22 | body {
|
23 | margin-top: 12em; |
23 | margin-top: 12em; |
24 | margin-left: 22em; |
24 | margin-left: 22em; |
25 | margin-right: 0.2em; |
25 | margin-right: 0.2em; |
26 | margin-bottom: 0.2em; |
26 | margin-bottom: 0.2em; |
27 | }
|
27 | }
|
28 | 28 | ||
29 | /* Bow (main) and elbo (multi-view) */
|
29 | /* Bow (main) and elbo (multi-view) */
|
30 | 30 | ||
31 | #LCARS { |
31 | #LCARS { |
32 | position: fixed; |
32 | position: fixed; |
33 | left: 0; |
33 | left: 0; |
34 | top: 0; |
34 | top: 0; |
35 | right: 0; |
35 | right: 0; |
36 | padding: 0.2em; |
36 | padding: 0.2em; |
37 | background-color: #000; |
37 | background-color: #000; |
38 | z-index: 1701; |
38 | z-index: 1701; |
39 | }
|
39 | }
|
40 | 40 | ||
41 | #bow { |
41 | #bow { |
42 | position: absolute; |
42 | position: absolute; |
43 | left: 0.2em; |
43 | left: 0.2em; |
44 | top: 0.2em; |
44 | top: 0.2em; |
45 | right: 0.2em; |
45 | right: 0.2em; |
46 | height: 2.4em; |
46 | height: 2.4em; |
47 | padding-bottom: 0.2em; |
47 | padding-bottom: 0.2em; |
48 | background-color: #000; |
48 | background-color: #000; |
49 | }
|
49 | }
|
50 | 50 | ||
51 | #bow-top { |
51 | #bow-top { |
52 | /* NOTE: position: absolute is needed for animation */
|
52 | /* NOTE: position: absolute is needed for animation */
|
53 | position: absolute; |
53 | position: absolute; |
54 | top: 0; |
54 | top: 0; |
55 | left: 0; |
55 | left: 0; |
56 | right: 0; |
56 | right: 0; |
57 | min-width: 15.4em; |
57 | min-width: 15.4em; |
58 | height: 2em; |
58 | height: 2em; |
59 | background-color: #999; |
59 | background-color: #999; |
60 | border-top-left-radius: 2.4em; |
60 | border-top-left-radius: 2.4em; |
61 | border-top-right-radius: 1.2em; |
61 | border-top-right-radius: 1.2em; |
62 | border-bottom-right-radius: 1.2em; |
62 | border-bottom-right-radius: 1.2em; |
63 | line-height: 0.9; |
63 | line-height: 0.9; |
64 | }
|
64 | }
|
65 | 65 | ||
66 | .empty #bow-top { |
66 | .empty #bow-top { |
67 | border-top-left-radius: 1.2em; |
67 | border-top-left-radius: 1.2em; |
68 | border-bottom-left-radius: 1.2em; |
68 | border-bottom-left-radius: 1.2em; |
69 | min-width: 10em; |
69 | min-width: 10em; |
70 | }
|
70 | }
|
71 | 71 | ||
72 | 72 | ||
73 | #bow-top .text { |
73 | #bow-top .text { |
74 | position: absolute; |
74 | position: absolute; |
75 | margin: 0; |
75 | margin: 0; |
76 | left: 4.33em; |
76 | left: 4.33em; |
77 | top: 0; |
77 | top: 0; |
78 | right: 0.75em; |
78 | right: 0.75em; |
79 | height: 1em; |
79 | height: 1em; |
80 | text-align: right; |
80 | text-align: right; |
81 | color: #fc0; |
81 | color: #fc0; |
82 | font-size: 2.4em; |
82 | font-size: 2.4em; |
83 | padding-right: 0.1em; |
83 | padding-right: 0.1em; |
84 | overflow: hidden; |
84 | overflow: hidden; |
85 | text-overflow: ellipsis; |
85 | text-overflow: ellipsis; |
86 | }
|
86 | }
|
87 | 87 | ||
88 | .empty #bow-top .text { |
88 | .empty #bow-top .text { |
89 | left: 0.93em; |
89 | left: 0.93em; |
90 | }
|
90 | }
|
91 | 91 | ||
92 | 92 | ||
93 | 93 | ||
94 | #bow-top .text span { |
94 | #bow-top .text span { |
95 | padding-right: 0.1em; |
95 | padding-right: 0.1em; |
96 | background-color: #000; |
96 | background-color: #000; |
97 | padding-left: 0.1em; |
97 | padding-left: 0.1em; |
98 | text-transform: uppercase; |
98 | text-transform: uppercase; |
99 | white-space: nowrap; |
99 | white-space: nowrap; |
100 | }
|
100 | }
|
101 | 101 | ||
102 | .empty #footer-container { |
102 | .empty #footer-container { |
103 | position: fixed; |
103 | position: fixed; |
104 | left: 0.2em; |
104 | left: 0.2em; |
105 | bottom: 0; |
105 | bottom: 0; |
106 | right: 0.2em; |
106 | right: 0.2em; |
107 | min-height: 2.4em; |
107 | min-height: 2.4em; |
108 | padding-top: 0.2em; |
108 | padding-top: 0.2em; |
109 | padding-bottom: 0.2em; |
109 | padding-bottom: 0.2em; |
110 | background-color: #000; |
110 | background-color: #000; |
111 | }
|
111 | }
|
112 | 112 | ||
113 | 113 | ||
114 | .empty #footer { |
114 | .empty #footer { |
115 | position: absolute; |
115 | position: absolute; |
116 | bottom: 0; |
116 | bottom: 0; |
117 | left: 0; |
117 | left: 0; |
118 | right: 0; |
118 | right: 0; |
119 | height: 2em; |
119 | height: 2em; |
120 | min-width: 10em; |
120 | min-width: 10em; |
121 | margin-bottom: 0.2em; |
121 | margin-bottom: 0.2em; |
122 | background-color: #999; |
122 | background-color: #999; |
123 | border-radius: 1.2em; |
123 | border-radius: 1.2em; |
124 | line-height: 0.9; |
124 | line-height: 0.9; |
125 | }
|
125 | }
|
126 | 126 | ||
127 | .empty #footer .text { |
127 | .empty #footer .text { |
128 | position: absolute; |
128 | position: absolute; |
129 | margin: 0; |
129 | margin: 0; |
130 | left: 0.93em; |
130 | left: 0.93em; |
131 | top: 0; |
131 | top: 0; |
132 | right: 0.75em; |
132 | right: 0.75em; |
133 | height: 1em; |
133 | height: 1em; |
134 | background-color: transparent; |
134 | background-color: transparent; |
135 | color: #fc0; |
135 | color: #fc0; |
136 | font-size: 2.4em; |
136 | font-size: 2.4em; |
137 | padding-right: 0.1em; |
137 | padding-right: 0.1em; |
138 | overflow: hidden; |
138 | overflow: hidden; |
139 | text-overflow: ellipsis; |
139 | text-overflow: ellipsis; |
140 | }
|
140 | }
|
141 | 141 | ||
142 | .empty #footer .text span { |
142 | .empty #footer .text span { |
143 | padding-right: 0.1em; |
143 | padding-right: 0.1em; |
144 | background-color: #000; |
144 | background-color: #000; |
145 | padding-left: 0.1em; |
145 | padding-left: 0.1em; |
146 | text-transform: uppercase; |
146 | text-transform: uppercase; |
147 | white-space: nowrap; |
147 | white-space: nowrap; |
148 | }
|
148 | }
|
149 | 149 | ||
150 | .empty .separator-left { |
150 | .empty .separator-left { |
151 | position: absolute; |
151 | position: absolute; |
152 | left: 2em; |
152 | left: 2em; |
153 | height: 2em; |
153 | height: 2em; |
154 | width: 0.25em; |
154 | width: 0.25em; |
155 | background-color: #000; |
155 | background-color: #000; |
156 | }
|
156 | }
|
157 | 157 | ||
158 | .empty .separator-right { |
158 | .empty .separator-right { |
159 | position: absolute; |
159 | position: absolute; |
160 | right: 2em; |
160 | right: 2em; |
161 | height: 2em; |
161 | height: 2em; |
162 | width: 0.25em; |
162 | width: 0.25em; |
163 | background-color: #000; |
163 | background-color: #000; |
164 | }
|
164 | }
|
165 | 165 | ||
166 | .bow { |
166 | .bow { |
167 | background-color: #999; |
167 | background-color: #999; |
168 | }
|
168 | }
|
169 | 169 | ||
170 | #bow-top-left { |
170 | #bow-top-left { |
171 | position: absolute; |
171 | position: absolute; |
172 | top: 2em; |
172 | top: 2em; |
173 | left: 0; |
173 | left: 0; |
174 | right: 0; |
174 | right: 0; |
175 | height: 3.2em; |
175 | height: 3.2em; |
176 | width: 9.2em; |
176 | width: 9.2em; |
177 | background-color: #999; |
177 | background-color: #999; |
178 | }
|
178 | }
|
179 | 179 | ||
180 | .empty #bow-top-left { |
180 | .empty #bow-top-left { |
181 | display: none; |
181 | display: none; |
182 | }
|
182 | }
|
183 | 183 | ||
184 | #bow-top-left .concave { |
184 | #bow-top-left .concave { |
185 | position: absolute; |
185 | position: absolute; |
186 | top: 0; |
186 | top: 0; |
187 | left: 8em; |
187 | left: 8em; |
188 | height: 3.2em; |
188 | height: 3.2em; |
189 | width: 1.2em; |
189 | width: 1.2em; |
190 | background-color: #000; |
190 | background-color: #000; |
191 | border-top-left-radius: 1.2em; |
191 | border-top-left-radius: 1.2em; |
192 | }
|
192 | }
|
193 | 193 | ||
194 | .empty #bow-top-left-concave { |
194 | .empty #bow-top-left-concave { |
195 | display: none; |
195 | display: none; |
196 | }
|
196 | }
|
197 | 197 | ||
198 | .menu-container { |
198 | .menu-container { |
199 | position: fixed; |
199 | position: fixed; |
200 | left: 0.2em; |
200 | left: 0.2em; |
201 | top: 5.6em; |
201 | top: 5.6em; |
202 | width: 8em; |
202 | width: 8em; |
203 | bottom: 2.8em; |
203 | bottom: 2.8em; |
204 | background-color: #999; |
204 | background-color: #999; |
205 | overflow: auto; |
205 | overflow: auto; |
206 | }
|
206 | }
|
207 | 207 | ||
208 | .menu
|
208 | .menu
|
209 | {
|
209 | {
|
210 | height: 21.2em; |
210 | height: 21.2em; |
211 | background-color: #000; |
211 | background-color: #000; |
212 | }
|
212 | }
|
213 | 213 | ||
214 | .menu ul { |
214 | .menu ul { |
215 | margin: 0 0.2em 0.2em 0; |
215 | margin: 0 0.2em 0.2em 0; |
216 | padding: 0; |
216 | padding: 0; |
217 | }
|
217 | }
|
218 | 218 | ||
219 | .menu li { |
219 | .menu li { |
220 | margin: 0; |
220 | margin: 0; |
221 | }
|
221 | }
|
222 | 222 | ||
223 | #bow #bottom |
223 | #bow #bottom |
224 | {
|
224 | {
|
225 | position: fixed; |
225 | position: fixed; |
226 | left: 0; |
226 | left: 0; |
227 | bottom: 0; |
227 | bottom: 0; |
228 | width: 20.8em; |
228 | width: 20.8em; |
229 | height: 2.4em; |
229 | height: 2.4em; |
230 | background-color: #000; |
230 | background-color: #000; |
231 | z-index: 1701; |
231 | z-index: 1701; |
232 | }
|
232 | }
|
233 | 233 | ||
234 | #bow-bottom { |
234 | #bow-bottom { |
235 | position: absolute; |
235 | position: absolute; |
236 | bottom: 0.2em; |
236 | bottom: 0.2em; |
237 | left: 0.2em; |
237 | left: 0.2em; |
238 | width: 20.6em; |
238 | width: 20.6em; |
239 | height: 2.4em; |
239 | height: 2.4em; |
240 | border-bottom-left-radius: 2.4em; |
240 | border-bottom-left-radius: 2.4em; |
241 | border-bottom-right-radius: 2em; |
241 | border-bottom-right-radius: 2em; |
242 | background-color: #999; |
242 | background-color: #999; |
243 | }
|
243 | }
|
244 | 244 | ||
245 | .empty #bow-bottom { |
245 | .empty #bow-bottom { |
246 | display: none; |
246 | display: none; |
247 | }
|
247 | }
|
248 | 248 | ||
249 | #bow-bottom .concave { |
249 | #bow-bottom .concave { |
250 | position: absolute; |
250 | position: absolute; |
251 | margin-left: 0.2em; |
251 | margin-left: 0.2em; |
252 | margin-bottom: 0.2em; |
252 | margin-bottom: 0.2em; |
253 | bottom: 0.3em; |
253 | bottom: 0.3em; |
254 | left: 7.8em; |
254 | left: 7.8em; |
255 | height: 2.1em; |
255 | height: 2.1em; |
256 | width: 7.6em; |
256 | width: 7.6em; |
257 | border-bottom-left-radius: 1.2em; |
257 | border-bottom-left-radius: 1.2em; |
258 | border-bottom-right-radius: 1em; |
258 | border-bottom-right-radius: 1em; |
259 | background-color: #000; |
259 | background-color: #000; |
260 | }
|
260 | }
|
261 | 261 | ||
262 | #bow-bottom .spacer { |
262 | #bow-bottom .spacer { |
263 | position: absolute; |
263 | position: absolute; |
264 | left: 10.2em; |
264 | left: 10.2em; |
265 | bottom: 0em; |
265 | bottom: 0; |
266 | width: 0.2em; |
266 | width: 0.2em; |
267 | height: 0.5em; |
267 | height: 0.5em; |
268 | background-color: black; |
268 | background-color: black; |
269 | }
|
269 | }
|
270 | 270 | ||
271 | .empty #bow-bottom-left-concave { |
271 | .empty #bow-bottom-left-concave { |
272 | display: none; |
272 | display: none; |
273 | }
|
273 | }
|
274 | 274 | ||
275 | /* Controls */
|
275 | /* Controls */
|
276 | 276 | ||
277 | .button:visited:hover, |
277 | .button:visited:hover, |
278 | .button:visited, |
278 | .button:visited, |
279 | .button:hover, |
279 | .button:hover, |
280 | .button
|
280 | .button
|
281 | {
|
281 | {
|
282 | position: relative; |
282 | position: relative; |
283 | display: inline-block; |
283 | display: inline-block; |
284 | margin-right: 0.2em; |
284 | margin-right: 0.2em; |
285 | margin-bottom: 0.2em; |
285 | margin-bottom: 0.2em; |
286 | width: 5em; |
286 | width: 5em; |
287 | height: 2em; |
287 | height: 2em; |
288 | background-color: #7d7d7d; /* c9c */ |
288 | background-color: #7d7d7d; /* c9c */ |
289 | color: #000 !important; |
289 | color: #000 !important; |
290 | text-decoration: none !important; |
290 | text-decoration: none !important; |
291 | text-transform: uppercase; |
291 | text-transform: uppercase; |
292 | overflow: hidden; |
292 | overflow: hidden; |
293 | cursor: pointer !important; |
293 | cursor: pointer !important; |
294 | }
|
294 | }
|
295 | 295 | ||
296 | .button .text { |
296 | .button .text { |
297 | position: absolute; |
297 | position: absolute; |
298 | bottom: 0; |
298 | bottom: 0; |
299 | right: 0.5em; |
299 | right: 0.5em; |
300 | cursor: pointer !important; |
300 | cursor: pointer !important; |
301 | }
|
301 | }
|
302 | 302 | ||
303 | .button.command { |
303 | .button.command { |
304 | border-radius: 1.2em; |
304 | border-radius: 1.2em; |
305 | }
|
305 | }
|
306 | 306 | ||
307 | .button.command .text { |
307 | .button.command .text { |
308 | position: absolute; |
308 | position: absolute; |
309 | bottom: 0; |
309 | bottom: 0; |
310 | right: 1em; |
310 | right: 1em; |
311 | }
|
311 | }
|
312 | 312 | ||
313 | .button:hover, |
313 | .button:hover, |
314 | .button:focus, |
314 | .button:focus, |
315 | .button.selected:hover, |
315 | .button.selected:hover, |
316 | .button.selected:focus, |
316 | .button.selected:focus, |
317 | .group .button:hover, |
317 | .group .button:hover, |
318 | .group .button:focus, |
318 | .group .button:focus, |
319 | .group .button:visited:hover, |
319 | .group .button:visited:hover, |
320 | .group .button:visited:focus |
320 | .group .button:visited:focus |
321 | {
|
321 | {
|
322 | background-color: #f90 !important; |
322 | background-color: #f90 !important; |
323 | color: #000 !important; |
323 | color: #000 !important; |
324 | }
|
324 | }
|
325 | 325 | ||
326 | .button:active, |
326 | .button:active, |
327 | .button.selected:active, |
327 | .button.selected:active, |
328 | .group .button:active, |
328 | .group .button:active, |
329 | .group .button:visited:active |
329 | .group .button:visited:active |
330 | {
|
330 | {
|
331 | background-color: #fff !important; |
331 | background-color: #fff !important; |
332 | color: #000 !important; |
332 | color: #000 !important; |
333 | }
|
333 | }
|
334 | 334 | ||
335 | .menu .button { |
335 | .menu .button { |
336 | display: block; |
336 | display: block; |
337 | width: 8em; |
337 | width: 8em; |
338 | height: 1em; |
338 | height: 1em; |
339 | line-height: 1; |
339 | line-height: 1; |
340 | background-color: #9cf; |
340 | background-color: #9cf; |
341 | color: #000 !important; |
341 | color: #000 !important; |
342 | text-overflow: ellipsis; |
342 | text-overflow: ellipsis; |
343 | white-space: nowrap; |
343 | white-space: nowrap; |
344 | }
|
344 | }
|
345 | 345 | ||
346 | #connectors { |
346 | #connectors { |
347 | position: fixed; |
347 | position: fixed; |
348 | left: 8.4em; |
348 | left: 8.4em; |
349 | top: 5.6em; |
349 | top: 5.6em; |
350 | }
|
350 | }
|
351 | 351 | ||
352 | .multi-display
|
352 | .multi-display
|
353 | {
|
353 | {
|
354 | position: fixed; |
354 | position: fixed; |
355 | top: 2.6em; |
355 | top: 2.6em; |
356 | left: 15.8em; |
356 | left: 15.8em; |
357 | right: 0em; |
357 | right: 0; |
358 | }
|
358 | }
|
359 | 359 | ||
360 | .multi-display .button |
360 | .multi-display .button |
361 | {
|
361 | {
|
362 | width: 5em !important; |
362 | width: 5em !important; |
363 | }
|
363 | }
|
364 | 364 | ||
365 | .multi-display .upper |
365 | .multi-display .upper |
366 | {
|
366 | {
|
367 | position: absolute; |
367 | position: absolute; |
368 | top: 0; |
368 | top: 0; |
369 | left: 0; |
369 | left: 0; |
370 | right: 0; |
370 | right: 0; |
371 | height: 7.4em; |
371 | height: 7.5em; |
372 | padding-bottom: 0.2em; |
- | |
373 | padding-right: 0.2em; |
372 | padding-right: 0.2em; |
374 | background-color: black; |
373 | background-color: black; |
375 | }
|
374 | }
|
376 | 375 | ||
377 | .multi-display .upper .content |
376 | .multi-display .upper .content |
378 | {
|
377 | {
|
379 | position: absolute; |
378 | position: absolute; |
380 | top: 0; |
379 | top: 0; |
381 | left: 6em; |
380 | left: 6em; |
382 | bottom: 1.4em; |
381 | bottom: 1.3em; |
383 | right: 0.2em; |
382 | right: 0.2em; |
384 | background-color: black; |
383 | background-color: black; |
385 | color: white; |
384 | color: white; |
386 | text-align: right; |
385 | text-align: right; |
387 | overflow: hidden; |
386 | overflow: hidden; |
388 | text-overflow: ellipsis; |
387 | text-overflow: ellipsis; |
389 | }
|
388 | }
|
390 | 389 | ||
391 | .multi-display .upper .content .title |
390 | .multi-display .upper .content .title |
392 | {
|
391 | {
|
393 | position: absolute; |
392 | position: absolute; |
394 | top: 0; |
393 | top: 0; |
395 | left: 0em; |
394 | left: 0; |
396 | height: 1em; |
395 | height: 1em; |
397 | right: 0em; |
396 | right: 0; |
398 | background-color: black; |
397 | background-color: black; |
399 | color: white; |
398 | color: white; |
400 | font-size: 2.4em; |
399 | font-size: 2.4em; |
401 | text-transform: uppercase; |
400 | text-transform: uppercase; |
402 | text-align: right; |
401 | text-align: right; |
403 | overflow: hidden; |
402 | overflow: hidden; |
404 | text-overflow: ellipsis; |
403 | text-overflow: ellipsis; |
405 | }
|
404 | }
|
406 | 405 | ||
407 | .multi-display .upper .content .title span |
406 | .multi-display .upper .content .title span |
408 | {
|
407 | {
|
409 | white-space: nowrap; |
408 | white-space: nowrap; |
410 | }
|
409 | }
|
411 | 410 | ||
412 | .multi-display .upper .content .analysis { |
411 | .multi-display .upper .content .analysis { |
413 | position: absolute; |
412 | position: absolute; |
414 | top: 2.4em; |
413 | top: 2.4em; |
415 | bottom: 0; |
414 | bottom: 0; |
416 | right: 11em; |
415 | right: 11em; |
417 | left: 0; |
416 | left: 0; |
418 | overflow: hidden; |
417 | overflow: hidden; |
419 | text-overflow: ellipsis; |
418 | text-overflow: ellipsis; |
420 | text-align: left; |
419 | text-align: left; |
421 | }
|
420 | }
|
422 | 421 | ||
423 | .multi-display .upper .content .commands |
422 | .multi-display .upper .content .commands |
424 | {
|
423 | {
|
425 | position: absolute; |
424 | position: absolute; |
426 | margin: 0; |
425 | margin: 0; |
427 | padding: 0; |
426 | padding: 0; |
428 | top: 2.4em; |
427 | top: 2.4em; |
429 | right: 0em; |
428 | right: 0; |
430 | height: 3.8em; |
429 | height: 3.8em; |
431 | width: 10.2em; |
430 | width: 10.2em; |
432 | list-style: none; |
431 | list-style: none; |
433 | }
|
432 | }
|
434 | 433 | ||
435 | .multi-display .upper .content .commands li |
434 | .multi-display .upper .content .commands li |
436 | {
|
435 | {
|
437 | position: absolute; |
436 | position: absolute; |
438 | margin: 0; |
437 | margin: 0; |
439 | width: 5em; |
438 | width: 5em; |
440 | height: 1.8em; |
439 | height: 1.8em; |
441 | }
|
440 | }
|
442 | 441 | ||
443 | .multi-display .upper .content .commands .button |
442 | .multi-display .upper .content .commands .button |
444 | {
|
443 | {
|
445 | position: absolute; |
444 | position: absolute; |
446 | top: 0; |
445 | top: 0; |
447 | left: 0; |
446 | left: 0; |
448 | margin: 0; |
447 | margin: 0; |
449 | height: 1.8em; |
448 | height: 1.8em; |
450 | border-radius: 0.9em; |
449 | border-radius: 0.9em; |
451 | text-transform: none; |
450 | text-transform: none; |
452 | }
|
451 | }
|
453 | 452 | ||
454 | .multi-display .upper .content .commands .button .text { |
453 | .multi-display .upper .content .commands .button .text { |
455 | right: 0.75em; |
454 | right: 0.75em; |
456 | }
|
455 | }
|
457 | 456 | ||
458 | .multi-display .upper .content #cmd1 |
457 | .multi-display .upper .content #cmd1 |
459 | {
|
458 | {
|
460 | top: 0; |
459 | top: 0; |
461 | right: 5.2em; |
460 | right: 5.2em; |
462 | }
|
461 | }
|
463 | 462 | ||
464 | .multi-display .upper .content #cmd2 |
463 | .multi-display .upper .content #cmd2 |
465 | {
|
464 | {
|
466 | top: 0; |
465 | top: 0; |
467 | right: 0; |
466 | right: 0; |
468 | }
|
467 | }
|
469 | 468 | ||
470 | .multi-display .upper .content #cmd3 |
469 | .multi-display .upper .content #cmd3 |
471 | {
|
470 | {
|
472 | top: 2em; |
471 | top: 2em; |
473 | right: 0; |
472 | right: 0; |
474 | }
|
473 | }
|
475 | 474 | ||
476 | .multi-display .upper .content #cmd4 |
475 | .multi-display .upper .content #cmd4 |
477 | {
|
476 | {
|
478 | top: 2em; |
477 | top: 2em; |
479 | right: 5.2em; |
478 | right: 5.2em; |
480 | }
|
479 | }
|
481 | 480 | ||
482 | .multi-display .upper .elbo-button |
481 | .multi-display .upper .elbo-button |
483 | {
|
482 | {
|
484 | position: absolute; |
483 | position: absolute; |
485 | top: 0; |
484 | top: 0; |
486 | left: 0; |
485 | left: 0; |
487 | width: 5em; |
486 | width: 5em; |
488 | height: 4em; |
487 | height: 4em; |
489 | background-color: #c9c !important; |
488 | background-color: #c9c !important; |
490 | color: #000 !important; |
489 | color: #000 !important; |
491 | cursor: default; |
490 | cursor: default; |
492 | }
|
491 | }
|
493 | 492 | ||
494 | .multi-display .upper .elbo-button .text |
493 | .multi-display .upper .elbo-button .text |
495 | {
|
494 | {
|
496 | position: absolute; |
495 | position: absolute; |
497 | bottom: 0; |
496 | bottom: 0; |
498 | right: 0.2em; |
497 | right: 0.2em; |
499 | max-width: 4.6em; |
498 | max-width: 4.6em; |
500 | max-height: 3.6em; |
499 | max-height: 3.6em; |
501 | text-align: right; |
500 | text-align: right; |
502 | overflow: hidden; |
501 | overflow: hidden; |
503 | }
|
502 | }
|
504 | 503 | ||
505 | .multi-display .upper .elbo |
504 | .multi-display .upper .elbo |
506 | {
|
505 | {
|
507 | position: absolute; |
506 | position: absolute; |
508 | left: 0; |
507 | left: 0; |
509 | top: 4.2em; |
508 | top: 4.2em; |
510 | width: 6em; |
509 | width: 6em; |
511 | height: 3.2em; |
510 | height: 3.2em; |
512 | border-bottom-left-radius: 2em; |
511 | border-bottom-left-radius: 2em; |
513 | background-color: #9cf; |
512 | background-color: #9cf; |
514 | color: #000; |
513 | color: #000; |
515 | }
|
514 | }
|
516 | 515 | ||
517 | .multi-display .upper .elbo .text |
516 | .multi-display .upper .elbo .text |
518 | {
|
517 | {
|
519 | position: absolute; |
518 | position: absolute; |
520 | top: 0; |
519 | top: 0; |
521 | right: 1.2em; |
520 | right: 1.2em; |
522 | max-width: 3.5em; |
521 | max-width: 3.5em; |
523 | max-height: 2.2em; |
522 | max-height: 2.2em; |
524 | text-align: right; |
523 | text-align: right; |
525 | overflow: hidden; |
524 | overflow: hidden; |
526 | cursor: default; |
525 | cursor: default; |
527 | }
|
526 | }
|
528 | 527 | ||
529 | .multi-display .upper .elbo .concave |
528 | .multi-display .upper .elbo .concave |
530 | {
|
529 | {
|
531 | position: absolute; |
530 | position: absolute; |
532 | left: 5em; |
531 | left: 5em; |
533 | top: 0; |
532 | top: 0; |
534 | width: 1em; |
533 | width: 1em; |
535 | height: 2.2em; |
534 | height: 2.2em; |
536 | border-bottom-left-radius: 1em; |
535 | border-bottom-left-radius: 1em; |
537 | background-color: black; |
536 | background-color: black; |
538 | }
|
537 | }
|
539 | 538 | ||
540 | .multi-display .border |
539 | .multi-display .border |
541 | {
|
540 | {
|
542 | overflow: hidden; |
- | |
543 | height: 1em; |
541 | height: 1em; |
544 | }
|
542 | }
|
545 | 543 | ||
546 | .multi-display .upper .border |
544 | .multi-display .upper .border |
547 | {
|
545 | {
|
548 | position: fixed; |
546 | position: absolute; |
549 | top: 9em; |
547 | top: 6.4em; |
550 | left: 21.8em; |
548 | left: 6em; |
551 | right: 0.2em; |
549 | right: 0.2em; |
552 | }
|
550 | }
|
553 | 551 | ||
554 | .multi-display .border div |
552 | .multi-display .border div |
555 | {
|
553 | {
|
556 | position: absolute; |
554 | position: absolute; |
557 | top: 0; |
555 | top: 0; |
558 | height: 1em; |
556 | height: 1em; |
559 | }
|
557 | }
|
560 | 558 | ||
561 | .multi-display .upper .border div |
559 | .multi-display .upper .border div |
562 | {
|
560 | {
|
563 | background-color: #9cf; |
561 | background-color: #9cf; |
564 | }
|
562 | }
|
565 | 563 | ||
566 | .multi-display .upper .border .left |
564 | .multi-display .upper .border .left |
567 | {
|
565 | {
|
568 | left: 0; |
566 | left: 0; |
569 | right: 5.2em; |
567 | right: 5.2em; |
570 | height: 1em; |
568 | height: 1em; |
571 | }
|
569 | }
|
572 | 570 | ||
573 | .multi-display .upper .border .right |
571 | .multi-display .upper .border .right |
574 | {
|
572 | {
|
575 | width: 5em; |
573 | width: 5em; |
576 | right: 0; |
574 | right: 0; |
577 | }
|
575 | }
|
578 | 576 | ||
579 | .multi-display .lower |
577 | .multi-display .lower |
580 | {
|
578 | {
|
581 | position: absolute; |
579 | position: absolute; |
582 | top: 7.5em; |
580 | top: 7.5em; |
583 | left: 0; |
581 | left: 0; |
584 | padding-top: 0.1em; |
582 | height: 0.1em; |
- | 583 | right: 0; |
|
585 | background-color: black; |
584 | background-color: black; |
586 | }
|
585 | }
|
587 | 586 | ||
588 | .multi-display .lower .elbo |
587 | .multi-display .lower .elbo |
589 | {
|
588 | {
|
590 | position: relative; |
589 | position: absolute; |
- | 590 | top: 0.1em; |
|
- | 591 | left: 0; |
|
591 | width: 6em; |
592 | width: 6em; |
592 | height: 3em; |
593 | height: 3em; |
593 | border-top-left-radius: 2em; |
594 | border-top-left-radius: 2em; |
594 | background-color: #fc6; |
595 | background-color: #fc6; |
595 | }
|
596 | }
|
596 | 597 | ||
597 | .multi-display .lower .elbo .concave |
598 | .multi-display .lower .elbo .concave |
598 | {
|
599 | {
|
599 | position: absolute; |
600 | position: absolute; |
600 | left: 5em; |
601 | left: 5em; |
601 | top: 1em; |
602 | top: 1em; |
602 | width: 1em; |
603 | width: 1em; |
603 | height: 2em; |
604 | height: 2em; |
604 | background-color: black; |
605 | background-color: black; |
605 | border-top-left-radius: 1em; |
606 | border-top-left-radius: 1em; |
606 | }
|
607 | }
|
607 | 608 | ||
608 | .multi-display .lower .bg |
609 | .multi-display .lower .bg |
609 | {
|
610 | {
|
610 | position: fixed; |
611 | position: fixed; |
611 | top: 13.4em; |
612 | top: 13.4em; |
612 | bottom: 2.8em; |
613 | bottom: 2.8em; |
613 | width: 5em; |
614 | width: 5em; |
614 | background-color: #fc6; |
615 | background-color: #fc6; |
615 | }
|
616 | }
|
616 | 617 | ||
617 | .multi-display .lower .border-container |
618 | .multi-display .lower .border-container |
618 | {
|
619 | {
|
619 | position: fixed; |
620 | position: absolute; |
620 | top: 10.2em; |
621 | top: 0.1em; |
621 | left: 21.8em; |
622 | left: 6em; |
622 | right: 0em; |
623 | right: 0; |
623 | height: 1.2em; |
624 | height: 1.2em; |
624 | background-color: black; |
625 | background-color: black; |
625 | }
|
626 | }
|
626 | 627 | ||
627 | .multi-display .lower .border |
628 | .multi-display .lower .border |
628 | {
|
629 | {
|
629 | position: absolute; |
630 | position: absolute; |
630 | left: 0; |
631 | left: 0; |
631 | right: 0.2em; |
632 | right: 0.2em; |
632 | }
|
633 | }
|
633 | 634 | ||
634 | .multi-display .lower .border div |
635 | .multi-display .lower .border div |
635 | {
|
636 | {
|
636 | background-color: #fc6; |
637 | background-color: #fc6; |
637 | }
|
638 | }
|
638 | 639 | ||
639 | .multi-display .lower .border .left |
640 | .multi-display .lower .border .left |
640 | {
|
641 | {
|
641 | left: 0; |
642 | left: 0; |
642 | right: 5.2em; |
643 | right: 5.2em; |
643 | }
|
644 | }
|
644 | 645 | ||
645 | .multi-display .lower .border .right |
646 | .multi-display .lower .border .right |
646 | {
|
647 | {
|
647 | width: 5em; |
648 | width: 5em; |
648 | right: 0; |
649 | right: 0; |
649 | }
|
650 | }
|
650 | 651 | ||
651 | .menu .button.secondary, |
652 | .menu .button.secondary, |
652 | .multi-display .lower .elbo.secondary, |
653 | .multi-display .lower .elbo.secondary, |
653 | .multi-display .lower .bg.secondary, |
654 | .multi-display .lower .bg.secondary, |
654 | .multi-display .lower .border.secondary |
655 | .multi-display .lower .border.secondary |
655 | {
|
656 | {
|
656 | background-color: #f96; |
657 | background-color: #f96; |
657 | }
|
658 | }
|
658 | 659 | ||
659 | .menu .button.ancillary, |
660 | .menu .button.ancillary, |
660 | .multi-display .lower .elbo.ancillary, |
661 | .multi-display .lower .elbo.ancillary, |
661 | .multi-display .lower .bg.ancillary, |
662 | .multi-display .lower .bg.ancillary, |
662 | .multi-display .lower .border.ancillary |
663 | .multi-display .lower .border.ancillary |
663 | {
|
664 | {
|
664 | background-color: #c9c; |
665 | background-color: #c9c; |
665 | }
|
666 | }
|
666 | 667 | ||
667 | .menu .button.database, |
668 | .menu .button.database, |
668 | .multi-display .lower .elbo.database, |
669 | .multi-display .lower .elbo.database, |
669 | .multi-display .lower .bg.database, |
670 | .multi-display .lower .bg.database, |
670 | .multi-display .lower .border.database |
671 | .multi-display .lower .border.database |
671 | {
|
672 | {
|
672 | background-color: #c66; |
673 | background-color: #c66; |
673 | }
|
674 | }
|
674 | 675 | ||
675 | .menu .button .text { |
676 | .menu .button .text { |
676 | position: static; |
677 | position: static; |
677 | margin: 0 0.25em; |
678 | margin: 0 0.25em; |
678 | }
|
679 | }
|
679 | 680 | ||
680 | .button.selected { |
681 | .button.selected { |
681 | background-color: #fc6 !important; |
682 | background-color: #fc6 !important; |
682 | color: #000 !important; |
683 | color: #000 !important; |
683 | }
|
684 | }
|
684 | 685 | ||
685 | .group { |
686 | .group { |
686 | margin: 0 auto; |
687 | margin: 0 auto; |
687 | position: relative; |
688 | position: relative; |
688 | width: 7.7em; |
689 | width: 7.7em; |
689 | }
|
690 | }
|
690 | 691 | ||
691 | .group .separator { |
692 | .group .separator { |
692 | float: left; |
693 | float: left; |
693 | position: absolute; |
694 | position: absolute; |
694 | top: 0; |
695 | top: 0; |
695 | left: 0; |
696 | left: 0; |
696 | width: 1.5em; |
697 | width: 1.5em; |
697 | height: 100%; |
698 | height: 100%; |
698 | background-color: #c66; |
699 | background-color: #c66; |
699 | color: #000; |
700 | color: #000; |
700 | }
|
701 | }
|
701 | 702 | ||
702 | .group .separator:after { |
703 | .group .separator:after { |
703 | position: absolute; |
704 | position: absolute; |
704 | width: 0.8em; |
705 | width: 0.8em; |
705 | height: 0.5em; |
706 | height: 0.5em; |
706 | bottom: 0.25em; |
707 | bottom: 0.25em; |
707 | left: 0.25em; |
708 | left: 0.25em; |
708 | background-color: #000; |
709 | background-color: #000; |
709 | content: "\a0"; |
710 | content: "\a0"; |
710 | }
|
711 | }
|
711 | 712 | ||
712 | .group ul { |
713 | .group ul { |
713 | margin-left: 1.7em; |
714 | margin-left: 1.7em; |
714 | }
|
715 | }
|
715 | 716 | ||
716 | .group li { |
717 | .group li { |
717 | margin-bottom: 0; |
718 | margin-bottom: 0; |
718 | }
|
719 | }
|
719 | 720 | ||
720 | .group .button:visited, |
721 | .group .button:visited, |
721 | .group .button |
722 | .group .button |
722 | {
|
723 | {
|
723 | display: block; |
724 | display: block; |
724 | position: relative; |
725 | position: relative; |
725 | width: 6em; |
726 | width: 6em; |
726 | background-color: #99f !important; |
727 | background-color: #99f !important; |
727 | }
|
728 | }
|
728 | 729 | ||
729 | .group li:last-child .button |
730 | .group li:last-child .button |
730 | {
|
731 | {
|
731 | margin-bottom: 0; |
732 | margin-bottom: 0; |
732 | }
|
733 | }
|
733 | 734 | ||
734 | .button.right { |
735 | .button.right { |
735 | border-top-right-radius: 1em; |
736 | border-top-right-radius: 1em; |
736 | border-bottom-right-radius: 1em; |
737 | border-bottom-right-radius: 1em; |
737 | }
|
738 | }
|
738 | 739 | ||
739 | .button.right .text { |
740 | .button.right .text { |
740 | right: 1em; |
741 | right: 1em; |
741 | }
|
742 | }
|
742 | 743 | ||
743 | .button.left { |
744 | .button.left { |
744 | border-top-left-radius: 1em; |
745 | border-top-left-radius: 1em; |
745 | border-bottom-left-radius: 1em; |
746 | border-bottom-left-radius: 1em; |
746 | }
|
747 | }
|
747 | 748 | ||
748 | .group .button .key { |
749 | .group .button .key { |
749 | display: inline-block; |
750 | display: inline-block; |
750 | position: absolute; |
751 | position: absolute; |
751 | left: 0.2em; |
752 | left: 0.2em; |
752 | top: 0; |
753 | top: 0; |
753 | bottom: 0; |
754 | bottom: 0; |
754 | padding: 0 0.1em; |
755 | padding: 0 0.1em; |
755 | background-color: #000; |
756 | background-color: #000; |
756 | color: #f90; |
757 | color: #f90; |
757 | font-size: 2.4em; |
758 | font-size: 2.4em; |
758 | text-transform: uppercase; |
759 | text-transform: uppercase; |
759 | line-height: 0.9; |
760 | line-height: 0.9; |
760 | }
|
761 | }
|