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