Rev 90 | Rev 94 | Go to most recent revision | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed
Rev 90 | Rev 92 | ||
---|---|---|---|
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: 0em; |
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: 0em; |
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.4em; |
372 | padding-bottom: 0.2em; |
372 | padding-bottom: 0.2em; |
373 | padding-right: 0.2em; |
373 | padding-right: 0.2em; |
374 | background-color: black; |
374 | background-color: black; |
375 | }
|
375 | }
|
376 | 376 | ||
377 | .multi-display .upper .content |
377 | .multi-display .upper .content |
378 | {
|
378 | {
|
379 | position: absolute; |
379 | position: absolute; |
380 | top: 0; |
380 | top: 0; |
381 | left: 6em; |
381 | left: 6em; |
382 | bottom: 1.4em; |
382 | bottom: 1.4em; |
383 | right: 0.2em; |
383 | right: 0.2em; |
384 | background-color: black; |
384 | background-color: black; |
385 | color: white; |
385 | color: white; |
386 | text-align: right; |
386 | text-align: right; |
387 | overflow: hidden; |
387 | overflow: hidden; |
388 | text-overflow: ellipsis; |
388 | text-overflow: ellipsis; |
389 | }
|
389 | }
|
390 | 390 | ||
391 | .multi-display .upper .content .title |
391 | .multi-display .upper .content .title |
392 | {
|
392 | {
|
393 | position: absolute; |
393 | position: absolute; |
394 | top: 0; |
394 | top: 0; |
395 | left: 0em; |
395 | left: 0em; |
396 | height: 1em; |
396 | height: 1em; |
397 | right: 0em; |
397 | right: 0em; |
398 | background-color: black; |
398 | background-color: black; |
399 | color: white; |
399 | color: white; |
400 | font-size: 2.4em; |
400 | font-size: 2.4em; |
401 | text-transform: uppercase; |
401 | text-transform: uppercase; |
402 | text-align: right; |
402 | text-align: right; |
403 | overflow: hidden; |
403 | overflow: hidden; |
404 | text-overflow: ellipsis; |
404 | text-overflow: ellipsis; |
405 | }
|
405 | }
|
406 | 406 | ||
407 | .multi-display .upper .content .title span |
407 | .multi-display .upper .content .title span |
408 | {
|
408 | {
|
409 | white-space: nowrap; |
409 | white-space: nowrap; |
410 | }
|
410 | }
|
411 | 411 | ||
412 | .multi-display .upper .content .analysis { |
412 | .multi-display .upper .content .analysis { |
413 | position: absolute; |
413 | position: absolute; |
414 | top: 2.4em; |
414 | top: 2.4em; |
415 | bottom: 0; |
415 | bottom: 0; |
416 | right: 11em; |
416 | right: 11em; |
417 | left: 0; |
417 | left: 0; |
418 | overflow: hidden; |
418 | overflow: hidden; |
419 | text-overflow: ellipsis; |
419 | text-overflow: ellipsis; |
420 | text-align: left; |
420 | text-align: left; |
421 | }
|
421 | }
|
422 | 422 | ||
423 | .multi-display .upper .content .button |
423 | .multi-display .upper .content .commands |
424 | {
|
424 | {
|
425 | position: absolute; |
425 | position: absolute; |
426 | margin-right: 0; |
426 | margin: 0; |
- | 427 | padding: 0; |
|
- | 428 | top: 2.4em; |
|
- | 429 | right: 0em; |
|
- | 430 | height: 3.8em; |
|
- | 431 | width: 10.2em; |
|
- | 432 | list-style: none; |
|
- | 433 | }
|
|
- | 434 | ||
- | 435 | .multi-display .upper .content .commands li |
|
- | 436 | {
|
|
- | 437 | position: absolute; |
|
- | 438 | margin: 0; |
|
- | 439 | width: 5em; |
|
- | 440 | height: 1.8em; |
|
- | 441 | }
|
|
- | 442 | ||
- | 443 | .multi-display .upper .content .commands .button |
|
- | 444 | {
|
|
- | 445 | position: absolute; |
|
- | 446 | top: 0; |
|
- | 447 | left: 0; |
|
- | 448 | margin: 0; |
|
427 | height: 1.8em; |
449 | height: 1.8em; |
- | 450 | border-radius: 0.9em; |
|
428 | text-transform: none; |
451 | text-transform: none; |
429 | }
|
452 | }
|
430 | 453 | ||
431 | .multi-display .upper .content .button .text { |
454 | .multi-display .upper .content .commands .button .text { |
432 | right: 0.75em; |
455 | right: 0.75em; |
433 | }
|
456 | }
|
434 | 457 | ||
435 | .multi-display .upper .content #cmd1 |
458 | .multi-display .upper .content #cmd1 |
436 | {
|
459 | {
|
437 | top: 2.4em; |
460 | top: 0; |
438 | right: 5.2em; |
461 | right: 5.2em; |
439 | }
|
462 | }
|
440 | 463 | ||
441 | .multi-display .upper .content #cmd2 |
464 | .multi-display .upper .content #cmd2 |
442 | {
|
465 | {
|
443 | top: 2.4em; |
466 | top: 0; |
444 | right: 0; |
467 | right: 0; |
445 | }
|
468 | }
|
446 | 469 | ||
447 | .multi-display .upper .content #cmd3 |
470 | .multi-display .upper .content #cmd3 |
448 | {
|
471 | {
|
449 | top: 4.4em; |
472 | top: 2em; |
450 | right: 5.2em; |
473 | right: 0; |
451 | }
|
474 | }
|
452 | 475 | ||
453 | .multi-display .upper .content #cmd4 |
476 | .multi-display .upper .content #cmd4 |
454 | {
|
477 | {
|
455 | top: 4.4em; |
478 | top: 2em; |
456 | right: 0; |
479 | right: 5.2em; |
457 | }
|
480 | }
|
458 | 481 | ||
459 | .multi-display .upper .elbo-button |
482 | .multi-display .upper .elbo-button |
460 | {
|
483 | {
|
461 | position: absolute; |
484 | position: absolute; |
462 | top: 0; |
485 | top: 0; |
463 | left: 0; |
486 | left: 0; |
464 | width: 5em; |
487 | width: 5em; |
465 | height: 4em; |
488 | height: 4em; |
466 | background-color: #c9c !important; |
489 | background-color: #c9c !important; |
467 | color: #000 !important; |
490 | color: #000 !important; |
468 | cursor: default; |
491 | cursor: default; |
469 | }
|
492 | }
|
470 | 493 | ||
471 | .multi-display .upper .elbo-button .text |
494 | .multi-display .upper .elbo-button .text |
472 | {
|
495 | {
|
473 | position: absolute; |
496 | position: absolute; |
474 | bottom: 0; |
497 | bottom: 0; |
475 | right: 0.2em; |
498 | right: 0.2em; |
476 | max-width: 4.6em; |
499 | max-width: 4.6em; |
477 | max-height: 3.6em; |
500 | max-height: 3.6em; |
478 | text-align: right; |
501 | text-align: right; |
479 | overflow: hidden; |
502 | overflow: hidden; |
480 | }
|
503 | }
|
481 | 504 | ||
482 | .multi-display .upper .elbo |
505 | .multi-display .upper .elbo |
483 | {
|
506 | {
|
484 | position: absolute; |
507 | position: absolute; |
485 | left: 0; |
508 | left: 0; |
486 | top: 4.2em; |
509 | top: 4.2em; |
487 | width: 6em; |
510 | width: 6em; |
488 | height: 3.2em; |
511 | height: 3.2em; |
489 | border-bottom-left-radius: 2em; |
512 | border-bottom-left-radius: 2em; |
490 | background-color: #9cf; |
513 | background-color: #9cf; |
491 | color: #000; |
514 | color: #000; |
492 | }
|
515 | }
|
493 | 516 | ||
494 | .multi-display .upper .elbo .text |
517 | .multi-display .upper .elbo .text |
495 | {
|
518 | {
|
496 | position: absolute; |
519 | position: absolute; |
497 | top: 0; |
520 | top: 0; |
498 | right: 1.2em; |
521 | right: 1.2em; |
499 | max-width: 3.5em; |
522 | max-width: 3.5em; |
500 | max-height: 2.2em; |
523 | max-height: 2.2em; |
501 | text-align: right; |
524 | text-align: right; |
502 | overflow: hidden; |
525 | overflow: hidden; |
503 | cursor: default; |
526 | cursor: default; |
504 | }
|
527 | }
|
505 | 528 | ||
506 | .multi-display .upper .elbo .concave |
529 | .multi-display .upper .elbo .concave |
507 | {
|
530 | {
|
508 | position: absolute; |
531 | position: absolute; |
509 | left: 5em; |
532 | left: 5em; |
510 | top: 0; |
533 | top: 0; |
511 | width: 1em; |
534 | width: 1em; |
512 | height: 2.2em; |
535 | height: 2.2em; |
513 | border-bottom-left-radius: 1em; |
536 | border-bottom-left-radius: 1em; |
514 | background-color: black; |
537 | background-color: black; |
515 | }
|
538 | }
|
516 | 539 | ||
517 | .multi-display .border |
540 | .multi-display .border |
518 | {
|
541 | {
|
519 | overflow: hidden; |
542 | overflow: hidden; |
520 | height: 1em; |
543 | height: 1em; |
521 | }
|
544 | }
|
522 | 545 | ||
523 | .multi-display .upper .border |
546 | .multi-display .upper .border |
524 | {
|
547 | {
|
525 | position: fixed; |
548 | position: fixed; |
526 | top: 9em; |
549 | top: 9em; |
527 | left: 21.8em; |
550 | left: 21.8em; |
528 | right: 0.2em; |
551 | right: 0.2em; |
529 | }
|
552 | }
|
530 | 553 | ||
531 | .multi-display .border div |
554 | .multi-display .border div |
532 | {
|
555 | {
|
533 | position: absolute; |
556 | position: absolute; |
534 | top: 0; |
557 | top: 0; |
535 | height: 1em; |
558 | height: 1em; |
536 | }
|
559 | }
|
537 | 560 | ||
538 | .multi-display .upper .border div |
561 | .multi-display .upper .border div |
539 | {
|
562 | {
|
540 | background-color: #9cf; |
563 | background-color: #9cf; |
541 | }
|
564 | }
|
542 | 565 | ||
543 | .multi-display .upper .border .left |
566 | .multi-display .upper .border .left |
544 | {
|
567 | {
|
545 | left: 0; |
568 | left: 0; |
546 | right: 5.2em; |
569 | right: 5.2em; |
547 | height: 1em; |
570 | height: 1em; |
548 | }
|
571 | }
|
549 | 572 | ||
550 | .multi-display .upper .border .right |
573 | .multi-display .upper .border .right |
551 | {
|
574 | {
|
552 | width: 5em; |
575 | width: 5em; |
553 | right: 0; |
576 | right: 0; |
554 | }
|
577 | }
|
555 | 578 | ||
556 | .multi-display .lower |
579 | .multi-display .lower |
557 | {
|
580 | {
|
558 | position: absolute; |
581 | position: absolute; |
559 | top: 7.5em; |
582 | top: 7.5em; |
560 | left: 0; |
583 | left: 0; |
561 | padding-top: 0.1em; |
584 | padding-top: 0.1em; |
562 | background-color: black; |
585 | background-color: black; |
563 | }
|
586 | }
|
564 | 587 | ||
565 | .multi-display .lower .elbo |
588 | .multi-display .lower .elbo |
566 | {
|
589 | {
|
567 | position: relative; |
590 | position: relative; |
568 | width: 6em; |
591 | width: 6em; |
569 | height: 3em; |
592 | height: 3em; |
570 | border-top-left-radius: 2em; |
593 | border-top-left-radius: 2em; |
571 | background-color: #fc6; |
594 | background-color: #fc6; |
572 | }
|
595 | }
|
573 | 596 | ||
574 | .multi-display .lower .elbo .concave |
597 | .multi-display .lower .elbo .concave |
575 | {
|
598 | {
|
576 | position: absolute; |
599 | position: absolute; |
577 | left: 5em; |
600 | left: 5em; |
578 | top: 1em; |
601 | top: 1em; |
579 | width: 1em; |
602 | width: 1em; |
580 | height: 2em; |
603 | height: 2em; |
581 | background-color: black; |
604 | background-color: black; |
582 | border-top-left-radius: 1em; |
605 | border-top-left-radius: 1em; |
583 | }
|
606 | }
|
584 | 607 | ||
585 | .multi-display .lower .bg |
608 | .multi-display .lower .bg |
586 | {
|
609 | {
|
587 | position: fixed; |
610 | position: fixed; |
588 | top: 13.4em; |
611 | top: 13.4em; |
589 | bottom: 2.8em; |
612 | bottom: 2.8em; |
590 | width: 5em; |
613 | width: 5em; |
591 | background-color: #fc6; |
614 | background-color: #fc6; |
592 | }
|
615 | }
|
593 | 616 | ||
594 | .multi-display .lower .border-container |
617 | .multi-display .lower .border-container |
595 | {
|
618 | {
|
596 | position: fixed; |
619 | position: fixed; |
597 | top: 10.2em; |
620 | top: 10.2em; |
598 | left: 21.8em; |
621 | left: 21.8em; |
599 | right: 0em; |
622 | right: 0em; |
600 | height: 1.2em; |
623 | height: 1.2em; |
601 | background-color: black; |
624 | background-color: black; |
602 | }
|
625 | }
|
603 | 626 | ||
604 | .multi-display .lower .border |
627 | .multi-display .lower .border |
605 | {
|
628 | {
|
606 | position: absolute; |
629 | position: absolute; |
607 | left: 0; |
630 | left: 0; |
608 | right: 0.2em; |
631 | right: 0.2em; |
609 | }
|
632 | }
|
610 | 633 | ||
611 | .multi-display .lower .border div |
634 | .multi-display .lower .border div |
612 | {
|
635 | {
|
613 | background-color: #fc6; |
636 | background-color: #fc6; |
614 | }
|
637 | }
|
615 | 638 | ||
616 | .multi-display .lower .border .left |
639 | .multi-display .lower .border .left |
617 | {
|
640 | {
|
618 | left: 0; |
641 | left: 0; |
619 | right: 5.2em; |
642 | right: 5.2em; |
620 | }
|
643 | }
|
621 | 644 | ||
622 | .multi-display .lower .border .right |
645 | .multi-display .lower .border .right |
623 | {
|
646 | {
|
624 | width: 5em; |
647 | width: 5em; |
625 | right: 0; |
648 | right: 0; |
626 | }
|
649 | }
|
627 | 650 | ||
628 | .menu .button.secondary, |
651 | .menu .button.secondary, |
629 | .multi-display .lower .elbo.secondary, |
652 | .multi-display .lower .elbo.secondary, |
630 | .multi-display .lower .bg.secondary, |
653 | .multi-display .lower .bg.secondary, |
631 | .multi-display .lower .border.secondary |
654 | .multi-display .lower .border.secondary |
632 | {
|
655 | {
|
633 | background-color: #f96; |
656 | background-color: #f96; |
634 | }
|
657 | }
|
635 | 658 | ||
636 | .menu .button.ancillary, |
659 | .menu .button.ancillary, |
637 | .multi-display .lower .elbo.ancillary, |
660 | .multi-display .lower .elbo.ancillary, |
638 | .multi-display .lower .bg.ancillary, |
661 | .multi-display .lower .bg.ancillary, |
639 | .multi-display .lower .border.ancillary |
662 | .multi-display .lower .border.ancillary |
640 | {
|
663 | {
|
641 | background-color: #c9c; |
664 | background-color: #c9c; |
642 | }
|
665 | }
|
643 | 666 | ||
644 | .menu .button.database, |
667 | .menu .button.database, |
645 | .multi-display .lower .elbo.database, |
668 | .multi-display .lower .elbo.database, |
646 | .multi-display .lower .bg.database, |
669 | .multi-display .lower .bg.database, |
647 | .multi-display .lower .border.database |
670 | .multi-display .lower .border.database |
648 | {
|
671 | {
|
649 | background-color: #c66; |
672 | background-color: #c66; |
650 | }
|
673 | }
|
651 | 674 | ||
652 | .menu .button .text { |
675 | .menu .button .text { |
653 | position: static; |
676 | position: static; |
654 | margin: 0 0.25em; |
677 | margin: 0 0.25em; |
655 | }
|
678 | }
|
656 | 679 | ||
657 | .button.selected { |
680 | .button.selected { |
658 | background-color: #fc6 !important; |
681 | background-color: #fc6 !important; |
659 | color: #000 !important; |
682 | color: #000 !important; |
660 | }
|
683 | }
|
661 | 684 | ||
662 | .group { |
685 | .group { |
663 | margin: 0 auto; |
686 | margin: 0 auto; |
664 | position: relative; |
687 | position: relative; |
665 | width: 7.7em; |
688 | width: 7.7em; |
666 | }
|
689 | }
|
667 | 690 | ||
668 | .group .separator { |
691 | .group .separator { |
669 | float: left; |
692 | float: left; |
670 | position: absolute; |
693 | position: absolute; |
671 | top: 0; |
694 | top: 0; |
672 | left: 0; |
695 | left: 0; |
673 | width: 1.5em; |
696 | width: 1.5em; |
674 | height: 100%; |
697 | height: 100%; |
675 | background-color: #c66; |
698 | background-color: #c66; |
676 | color: #000; |
699 | color: #000; |
677 | }
|
700 | }
|
678 | 701 | ||
679 | .group .separator:after { |
702 | .group .separator:after { |
680 | position: absolute; |
703 | position: absolute; |
681 | width: 0.8em; |
704 | width: 0.8em; |
682 | height: 0.5em; |
705 | height: 0.5em; |
683 | bottom: 0.25em; |
706 | bottom: 0.25em; |
684 | left: 0.25em; |
707 | left: 0.25em; |
685 | background-color: #000; |
708 | background-color: #000; |
686 | content: "\a0"; |
709 | content: "\a0"; |
687 | }
|
710 | }
|
688 | 711 | ||
689 | .group ul { |
712 | .group ul { |
690 | margin-left: 1.7em; |
713 | margin-left: 1.7em; |
691 | }
|
714 | }
|
692 | 715 | ||
693 | .group li { |
716 | .group li { |
694 | margin-bottom: 0; |
717 | margin-bottom: 0; |
695 | }
|
718 | }
|
696 | 719 | ||
697 | .group .button:visited, |
720 | .group .button:visited, |
698 | .group .button |
721 | .group .button |
699 | {
|
722 | {
|
700 | display: block; |
723 | display: block; |
701 | position: relative; |
724 | position: relative; |
702 | width: 6em; |
725 | width: 6em; |
703 | background-color: #99f !important; |
726 | background-color: #99f !important; |
704 | }
|
727 | }
|
705 | 728 | ||
706 | .group li:last-child .button |
729 | .group li:last-child .button |
707 | {
|
730 | {
|
708 | margin-bottom: 0; |
731 | margin-bottom: 0; |
709 | }
|
732 | }
|
710 | 733 | ||
711 | .button.right { |
734 | .button.right { |
712 | border-top-right-radius: 1em; |
735 | border-top-right-radius: 1em; |
713 | border-bottom-right-radius: 1em; |
736 | border-bottom-right-radius: 1em; |
714 | }
|
737 | }
|
715 | 738 | ||
716 | .button.right .text { |
739 | .button.right .text { |
717 | right: 1em; |
740 | right: 1em; |
718 | }
|
741 | }
|
719 | 742 | ||
720 | .button.left { |
743 | .button.left { |
721 | border-top-left-radius: 1em; |
744 | border-top-left-radius: 1em; |
722 | border-bottom-left-radius: 1em; |
745 | border-bottom-left-radius: 1em; |
723 | }
|
746 | }
|
724 | 747 | ||
725 | .group .button .key { |
748 | .group .button .key { |
726 | display: inline-block; |
749 | display: inline-block; |
727 | position: absolute; |
750 | position: absolute; |
728 | left: 0.2em; |
751 | left: 0.2em; |
729 | top: 0; |
752 | top: 0; |
730 | bottom: 0; |
753 | bottom: 0; |
731 | padding: 0 0.1em; |
754 | padding: 0 0.1em; |
732 | background-color: #000; |
755 | background-color: #000; |
733 | color: #f90; |
756 | color: #f90; |
734 | font-size: 2.4em; |
757 | font-size: 2.4em; |
735 | text-transform: uppercase; |
758 | text-transform: uppercase; |
736 | line-height: 0.9; |
759 | line-height: 0.9; |
737 | }
|
760 | }
|