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