Rev 80 | Rev 87 | Go to most recent revision | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed
Rev 80 | Rev 83 | ||
---|---|---|---|
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; |
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 | }
|
301 | }
|
301 | 302 | ||
302 | .button.command { |
303 | .button.command { |
303 | border-radius: 1.2em; |
304 | border-radius: 1.2em; |
304 | }
|
305 | }
|
305 | 306 | ||
306 | .button.command .text { |
307 | .button.command .text { |
307 | position: absolute; |
308 | position: absolute; |
308 | bottom: 0; |
309 | bottom: 0; |
309 | right: 1em; |
310 | right: 1em; |
310 | }
|
311 | }
|
311 | 312 | ||
312 | .button:hover, |
313 | .button:hover, |
313 | .button:focus, |
314 | .button:focus, |
314 | .button.selected:hover, |
315 | .button.selected:hover, |
315 | .button.selected:focus, |
316 | .button.selected:focus, |
316 | .group .button:hover, |
317 | .group .button:hover, |
317 | .group .button:focus, |
318 | .group .button:focus, |
318 | .group .button:visited:hover, |
319 | .group .button:visited:hover, |
319 | .group .button:visited:focus |
320 | .group .button:visited:focus |
320 | {
|
321 | {
|
321 | background-color: #f90 !important; |
322 | background-color: #f90 !important; |
322 | color: #000 !important; |
323 | color: #000 !important; |
323 | }
|
324 | }
|
324 | 325 | ||
325 | .button:active, |
326 | .button:active, |
326 | .button.selected:active, |
327 | .button.selected:active, |
327 | .group .button:active, |
328 | .group .button:active, |
328 | .group .button:visited:active |
329 | .group .button:visited:active |
329 | {
|
330 | {
|
330 | background-color: #fff !important; |
331 | background-color: #fff !important; |
331 | color: #000 !important; |
332 | color: #000 !important; |
332 | }
|
333 | }
|
333 | 334 | ||
334 | .menu .button { |
335 | .menu .button { |
335 | display: block; |
336 | display: block; |
336 | width: 8em; |
337 | width: 8em; |
337 | height: 1em; |
338 | height: 1em; |
338 | line-height: 1; |
339 | line-height: 1; |
339 | background-color: #9cf; |
340 | background-color: #9cf; |
340 | color: #000 !important; |
341 | color: #000 !important; |
341 | text-overflow: ellipsis; |
342 | text-overflow: ellipsis; |
342 | white-space: nowrap; |
343 | white-space: nowrap; |
343 | }
|
344 | }
|
344 | 345 | ||
345 | #connectors { |
346 | #connectors { |
346 | position: fixed; |
347 | position: fixed; |
347 | left: 8.4em; |
348 | left: 8.4em; |
348 | top: 5.6em; |
349 | top: 5.6em; |
349 | }
|
350 | }
|
350 | 351 | ||
351 | .multi-display
|
352 | .multi-display
|
352 | {
|
353 | {
|
353 | position: fixed; |
354 | position: fixed; |
354 | top: 2.6em; |
355 | top: 2.6em; |
355 | left: 15.8em; |
356 | left: 15.8em; |
356 | right: 0em; |
357 | right: 0em; |
357 | }
|
358 | }
|
358 | 359 | ||
359 | .multi-display .button |
360 | .multi-display .button |
360 | {
|
361 | {
|
361 | width: 5em !important; |
362 | width: 5em !important; |
362 | }
|
363 | }
|
363 | 364 | ||
364 | .multi-display .upper |
365 | .multi-display .upper |
365 | {
|
366 | {
|
366 | position: absolute; |
367 | position: absolute; |
367 | top: 0; |
368 | top: 0; |
368 | left: 0; |
369 | left: 0; |
369 | right: 0; |
370 | right: 0; |
370 | height: 7.4em; |
371 | height: 7.4em; |
371 | padding-bottom: 0.2em; |
372 | padding-bottom: 0.2em; |
372 | padding-right: 0.2em; |
373 | padding-right: 0.2em; |
373 | background-color: black; |
374 | background-color: black; |
374 | }
|
375 | }
|
375 | 376 | ||
376 | .multi-display .upper .content |
377 | .multi-display .upper .content |
377 | {
|
378 | {
|
378 | position: absolute; |
379 | position: absolute; |
379 | top: 0; |
380 | top: 0; |
380 | left: 6em; |
381 | left: 6em; |
381 | bottom: 1.2em; |
382 | bottom: 1.2em; |
382 | right: 0.2em; |
383 | right: 0.2em; |
383 | background-color: black; |
384 | background-color: black; |
384 | color: white; |
385 | color: white; |
385 | text-align: right; |
386 | text-align: right; |
386 | overflow: hidden; |
387 | overflow: hidden; |
387 | text-overflow: ellipsis; |
388 | text-overflow: ellipsis; |
388 | }
|
389 | }
|
389 | 390 | ||
390 | .multi-display .upper .content .title |
391 | .multi-display .upper .content .title |
391 | {
|
392 | {
|
392 | position: absolute; |
393 | position: absolute; |
393 | top: 0; |
394 | top: 0; |
394 | left: 0em; |
395 | left: 0em; |
395 | height: 1em; |
396 | height: 1em; |
396 | right: 0em; |
397 | right: 0em; |
397 | background-color: black; |
398 | background-color: black; |
398 | color: white; |
399 | color: white; |
399 | font-size: 2.4em; |
400 | font-size: 2.4em; |
400 | text-transform: uppercase; |
401 | text-transform: uppercase; |
401 | text-align: right; |
402 | text-align: right; |
402 | overflow: hidden; |
403 | overflow: hidden; |
403 | text-overflow: ellipsis; |
404 | text-overflow: ellipsis; |
404 | }
|
405 | }
|
405 | 406 | ||
406 | .multi-display .upper .content .title span |
407 | .multi-display .upper .content .title span |
407 | {
|
408 | {
|
408 | white-space: nowrap; |
409 | white-space: nowrap; |
409 | }
|
410 | }
|
410 | 411 | ||
411 | .multi-display .upper .content .button |
412 | .multi-display .upper .content .button |
412 | {
|
413 | {
|
413 | position: absolute; |
414 | position: absolute; |
414 | margin-right: 0; |
415 | margin-right: 0; |
415 | height: 1.8em; |
416 | height: 1.8em; |
416 | text-transform: none; |
417 | text-transform: none; |
417 | }
|
418 | }
|
418 | 419 | ||
419 | .multi-display .upper .content .button .text { |
420 | .multi-display .upper .content .button .text { |
420 | right: 0.75em; |
421 | right: 0.75em; |
421 | }
|
422 | }
|
422 | 423 | ||
423 | .multi-display .upper .content #cmd1 |
424 | .multi-display .upper .content #cmd1 |
424 | {
|
425 | {
|
425 | top: 2.4em; |
426 | top: 2.4em; |
426 | right: 5.2em; |
427 | right: 5.2em; |
427 | }
|
428 | }
|
428 | 429 | ||
429 | .multi-display .upper .content #cmd2 |
430 | .multi-display .upper .content #cmd2 |
430 | {
|
431 | {
|
431 | top: 2.4em; |
432 | top: 2.4em; |
432 | right: 0; |
433 | right: 0; |
433 | }
|
434 | }
|
434 | 435 | ||
435 | .multi-display .upper .content #cmd3 |
436 | .multi-display .upper .content #cmd3 |
436 | {
|
437 | {
|
437 | top: 4.4em; |
438 | top: 4.4em; |
438 | right: 5.2em; |
439 | right: 5.2em; |
439 | }
|
440 | }
|
440 | 441 | ||
441 | .multi-display .upper .content #cmd4 |
442 | .multi-display .upper .content #cmd4 |
442 | {
|
443 | {
|
443 | top: 4.4em; |
444 | top: 4.4em; |
444 | right: 0; |
445 | right: 0; |
445 | }
|
446 | }
|
446 | 447 | ||
447 | .multi-display .upper .elbo-button |
448 | .multi-display .upper .elbo-button |
448 | {
|
449 | {
|
449 | position: absolute; |
450 | position: absolute; |
450 | top: 0; |
451 | top: 0; |
451 | left: 0; |
452 | left: 0; |
452 | width: 5em; |
453 | width: 5em; |
453 | height: 4em; |
454 | height: 4em; |
454 | background-color: #c9c !important; |
455 | background-color: #c9c !important; |
455 | color: #000 !important; |
456 | color: #000 !important; |
- | 457 | cursor: default; |
|
456 | }
|
458 | }
|
457 | 459 | ||
458 | .multi-display .upper .elbo-button .text |
460 | .multi-display .upper .elbo-button .text |
459 | {
|
461 | {
|
460 | position: absolute; |
462 | position: absolute; |
461 | bottom: 0; |
463 | bottom: 0; |
462 | right: 0.2em; |
464 | right: 0.2em; |
463 | max-width: 4.6em; |
465 | max-width: 4.6em; |
464 | max-height: 3.6em; |
466 | max-height: 3.6em; |
465 | text-align: right; |
467 | text-align: right; |
466 | overflow: hidden; |
468 | overflow: hidden; |
467 | }
|
469 | }
|
468 | 470 | ||
469 | .multi-display .upper .elbo |
471 | .multi-display .upper .elbo |
470 | {
|
472 | {
|
471 | position: absolute; |
473 | position: absolute; |
472 | left: 0; |
474 | left: 0; |
473 | top: 4.2em; |
475 | top: 4.2em; |
474 | width: 6em; |
476 | width: 6em; |
475 | height: 3.2em; |
477 | height: 3.2em; |
476 | border-bottom-left-radius: 2em; |
478 | border-bottom-left-radius: 2em; |
477 | background-color: #9cf; |
479 | background-color: #9cf; |
478 | color: #000; |
480 | color: #000; |
479 | }
|
481 | }
|
480 | 482 | ||
481 | .multi-display .upper .elbo .text |
483 | .multi-display .upper .elbo .text |
482 | {
|
484 | {
|
483 | position: absolute; |
485 | position: absolute; |
484 | top: 0; |
486 | top: 0; |
485 | right: 1.2em; |
487 | right: 1.2em; |
486 | max-width: 3.5em; |
488 | max-width: 3.5em; |
487 | max-height: 2.2em; |
489 | max-height: 2.2em; |
488 | text-align: right; |
490 | text-align: right; |
489 | overflow: hidden; |
491 | overflow: hidden; |
- | 492 | cursor: default; |
|
490 | }
|
493 | }
|
491 | 494 | ||
492 | .multi-display .upper .elbo .concave |
495 | .multi-display .upper .elbo .concave |
493 | {
|
496 | {
|
494 | position: absolute; |
497 | position: absolute; |
495 | left: 5em; |
498 | left: 5em; |
496 | top: 0; |
499 | top: 0; |
497 | width: 1em; |
500 | width: 1em; |
498 | height: 2.2em; |
501 | height: 2.2em; |
499 | border-bottom-left-radius: 1em; |
502 | border-bottom-left-radius: 1em; |
500 | background-color: black; |
503 | background-color: black; |
501 | }
|
504 | }
|
502 | 505 | ||
503 | .multi-display .border |
506 | .multi-display .border |
504 | {
|
507 | {
|
505 | overflow: hidden; |
508 | overflow: hidden; |
506 | height: 1em; |
509 | height: 1em; |
507 | }
|
510 | }
|
508 | 511 | ||
509 | .multi-display .upper .border |
512 | .multi-display .upper .border |
510 | {
|
513 | {
|
511 | position: fixed; |
514 | position: fixed; |
512 | top: 9em; |
515 | top: 9em; |
513 | left: 21.8em; |
516 | left: 21.8em; |
514 | right: 0.2em; |
517 | right: 0.2em; |
515 | }
|
518 | }
|
516 | 519 | ||
517 | .multi-display .border div |
520 | .multi-display .border div |
518 | {
|
521 | {
|
519 | position: absolute; |
522 | position: absolute; |
520 | top: 0; |
523 | top: 0; |
521 | height: 1em; |
524 | height: 1em; |
522 | }
|
525 | }
|
523 | 526 | ||
524 | .multi-display .upper .border div |
527 | .multi-display .upper .border div |
525 | {
|
528 | {
|
526 | background-color: #9cf; |
529 | background-color: #9cf; |
527 | }
|
530 | }
|
528 | 531 | ||
529 | .multi-display .upper .border .left |
532 | .multi-display .upper .border .left |
530 | {
|
533 | {
|
531 | left: 0; |
534 | left: 0; |
532 | right: 5.2em; |
535 | right: 5.2em; |
533 | height: 1em; |
536 | height: 1em; |
534 | }
|
537 | }
|
535 | 538 | ||
536 | .multi-display .upper .border .right |
539 | .multi-display .upper .border .right |
537 | {
|
540 | {
|
538 | width: 5em; |
541 | width: 5em; |
539 | right: 0; |
542 | right: 0; |
540 | }
|
543 | }
|
541 | 544 | ||
542 | .multi-display .lower |
545 | .multi-display .lower |
543 | {
|
546 | {
|
544 | position: absolute; |
547 | position: absolute; |
545 | top: 7.5em; |
548 | top: 7.5em; |
546 | left: 0; |
549 | left: 0; |
547 | padding-top: 0.1em; |
550 | padding-top: 0.1em; |
548 | background-color: black; |
551 | background-color: black; |
549 | }
|
552 | }
|
550 | 553 | ||
551 | .multi-display .lower .elbo |
554 | .multi-display .lower .elbo |
552 | {
|
555 | {
|
553 | position: relative; |
556 | position: relative; |
554 | width: 6em; |
557 | width: 6em; |
555 | height: 3em; |
558 | height: 3em; |
556 | border-top-left-radius: 2em; |
559 | border-top-left-radius: 2em; |
557 | background-color: #fc6; |
560 | background-color: #fc6; |
558 | }
|
561 | }
|
559 | 562 | ||
560 | .multi-display .lower .elbo .concave |
563 | .multi-display .lower .elbo .concave |
561 | {
|
564 | {
|
562 | position: absolute; |
565 | position: absolute; |
563 | left: 5em; |
566 | left: 5em; |
564 | top: 1em; |
567 | top: 1em; |
565 | width: 1em; |
568 | width: 1em; |
566 | height: 2em; |
569 | height: 2em; |
567 | background-color: black; |
570 | background-color: black; |
568 | border-top-left-radius: 1em; |
571 | border-top-left-radius: 1em; |
569 | }
|
572 | }
|
570 | 573 | ||
571 | .multi-display .lower .bg |
574 | .multi-display .lower .bg |
572 | {
|
575 | {
|
573 | position: fixed; |
576 | position: fixed; |
574 | top: 13.4em; |
577 | top: 13.4em; |
575 | bottom: 2.8em; |
578 | bottom: 2.8em; |
576 | width: 5em; |
579 | width: 5em; |
577 | background-color: #fc6; |
580 | background-color: #fc6; |
578 | }
|
581 | }
|
579 | 582 | ||
580 | .multi-display .lower .border-container |
583 | .multi-display .lower .border-container |
581 | {
|
584 | {
|
582 | position: fixed; |
585 | position: fixed; |
583 | top: 10.2em; |
586 | top: 10.2em; |
584 | left: 21.8em; |
587 | left: 21.8em; |
585 | right: 0em; |
588 | right: 0em; |
586 | height: 1.2em; |
589 | height: 1.2em; |
587 | background-color: black; |
590 | background-color: black; |
588 | }
|
591 | }
|
589 | 592 | ||
590 | .multi-display .lower .border |
593 | .multi-display .lower .border |
591 | {
|
594 | {
|
592 | position: absolute; |
595 | position: absolute; |
593 | left: 0; |
596 | left: 0; |
594 | right: 0.2em; |
597 | right: 0.2em; |
595 | }
|
598 | }
|
596 | 599 | ||
597 | .multi-display .lower .border div |
600 | .multi-display .lower .border div |
598 | {
|
601 | {
|
599 | background-color: #fc6; |
602 | background-color: #fc6; |
600 | }
|
603 | }
|
601 | 604 | ||
602 | .multi-display .lower .border .left |
605 | .multi-display .lower .border .left |
603 | {
|
606 | {
|
604 | left: 0; |
607 | left: 0; |
605 | right: 5.2em; |
608 | right: 5.2em; |
606 | }
|
609 | }
|
607 | 610 | ||
608 | .multi-display .lower .border .right |
611 | .multi-display .lower .border .right |
609 | {
|
612 | {
|
610 | width: 5em; |
613 | width: 5em; |
611 | right: 0; |
614 | right: 0; |
612 | }
|
615 | }
|
613 | 616 | ||
614 | .menu .button.secondary, |
617 | .menu .button.secondary, |
615 | .multi-display .lower .elbo.secondary, |
618 | .multi-display .lower .elbo.secondary, |
616 | .multi-display .lower .bg.secondary, |
619 | .multi-display .lower .bg.secondary, |
617 | .multi-display .lower .border.secondary |
620 | .multi-display .lower .border.secondary |
618 | {
|
621 | {
|
619 | background-color: #f96; |
622 | background-color: #f96; |
620 | }
|
623 | }
|
621 | 624 | ||
622 | .menu .button.ancillary, |
625 | .menu .button.ancillary, |
623 | .multi-display .lower .elbo.ancillary, |
626 | .multi-display .lower .elbo.ancillary, |
624 | .multi-display .lower .bg.ancillary, |
627 | .multi-display .lower .bg.ancillary, |
625 | .multi-display .lower .border.ancillary |
628 | .multi-display .lower .border.ancillary |
626 | {
|
629 | {
|
627 | background-color: #c9c; |
630 | background-color: #c9c; |
628 | }
|
631 | }
|
629 | 632 | ||
630 | .menu .button.database, |
633 | .menu .button.database, |
631 | .multi-display .lower .elbo.database, |
634 | .multi-display .lower .elbo.database, |
632 | .multi-display .lower .bg.database, |
635 | .multi-display .lower .bg.database, |
633 | .multi-display .lower .border.database |
636 | .multi-display .lower .border.database |
634 | {
|
637 | {
|
635 | background-color: #c66; |
638 | background-color: #c66; |
636 | }
|
639 | }
|
637 | 640 | ||
638 | .menu .button .text { |
641 | .menu .button .text { |
639 | position: static; |
642 | position: static; |
640 | margin: 0 0.25em; |
643 | margin: 0 0.25em; |
641 | }
|
644 | }
|
642 | 645 | ||
643 | .button.selected { |
646 | .button.selected { |
644 | background-color: #fc6 !important; |
647 | background-color: #fc6 !important; |
645 | color: #000 !important; |
648 | color: #000 !important; |
646 | }
|
649 | }
|
647 | 650 | ||
648 | .group { |
651 | .group { |
649 | margin: 0 auto; |
652 | margin: 0 auto; |
650 | position: relative; |
653 | position: relative; |
651 | width: 7.7em; |
654 | width: 7.7em; |
652 | }
|
655 | }
|
653 | 656 | ||
654 | .group .separator { |
657 | .group .separator { |
655 | float: left; |
658 | float: left; |
656 | position: absolute; |
659 | position: absolute; |
657 | top: 0; |
660 | top: 0; |
658 | left: 0; |
661 | left: 0; |
659 | width: 1.5em; |
662 | width: 1.5em; |
660 | height: 100%; |
663 | height: 100%; |
661 | background-color: #c66; |
664 | background-color: #c66; |
662 | color: #000; |
665 | color: #000; |
663 | }
|
666 | }
|
664 | 667 | ||
665 | .group .separator:after { |
668 | .group .separator:after { |
666 | position: absolute; |
669 | position: absolute; |
667 | width: 0.8em; |
670 | width: 0.8em; |
668 | height: 0.5em; |
671 | height: 0.5em; |
669 | bottom: 0.25em; |
672 | bottom: 0.25em; |
670 | left: 0.25em; |
673 | left: 0.25em; |
671 | background-color: #000; |
674 | background-color: #000; |
672 | content: "\a0"; |
675 | content: "\a0"; |
673 | }
|
676 | }
|
674 | 677 | ||
675 | .group ul { |
678 | .group ul { |
676 | margin-left: 1.7em; |
679 | margin-left: 1.7em; |
677 | }
|
680 | }
|
678 | 681 | ||
679 | .group li { |
682 | .group li { |
680 | margin-bottom: 0; |
683 | margin-bottom: 0; |
681 | }
|
684 | }
|
682 | 685 | ||
683 | .group .button:visited, |
686 | .group .button:visited, |
684 | .group .button |
687 | .group .button |
685 | {
|
688 | {
|
686 | display: block; |
689 | display: block; |
687 | position: relative; |
690 | position: relative; |
688 | width: 6em; |
691 | width: 6em; |
689 | background-color: #99f !important; |
692 | background-color: #99f !important; |
690 | }
|
693 | }
|
691 | 694 | ||
692 | .group li:last-child .button |
695 | .group li:last-child .button |
693 | {
|
696 | {
|
694 | margin-bottom: 0; |
697 | margin-bottom: 0; |
695 | }
|
698 | }
|
696 | 699 | ||
697 | .button.right { |
700 | .button.right { |
698 | border-top-right-radius: 1em; |
701 | border-top-right-radius: 1em; |
699 | border-bottom-right-radius: 1em; |
702 | border-bottom-right-radius: 1em; |
700 | }
|
703 | }
|
701 | 704 | ||
702 | .button.right .text { |
705 | .button.right .text { |
703 | right: 1em; |
706 | right: 1em; |
704 | }
|
707 | }
|
705 | 708 | ||
706 | .button.left { |
709 | .button.left { |
707 | border-top-left-radius: 1em; |
710 | border-top-left-radius: 1em; |
708 | border-bottom-left-radius: 1em; |
711 | border-bottom-left-radius: 1em; |
709 | }
|
712 | }
|
710 | 713 | ||
711 | .group .button .key { |
714 | .group .button .key { |
712 | display: inline-block; |
715 | display: inline-block; |
713 | position: absolute; |
716 | position: absolute; |
714 | left: 0.2em; |
717 | left: 0.2em; |
715 | top: 0; |
718 | top: 0; |
716 | bottom: 0; |
719 | bottom: 0; |
717 | padding: 0 0.1em; |
720 | padding: 0 0.1em; |
718 | background-color: #000; |
721 | background-color: #000; |
719 | color: #f90; |
722 | color: #f90; |
720 | font-size: 2.4em; |
723 | font-size: 2.4em; |
721 | text-transform: uppercase; |
724 | text-transform: uppercase; |
722 | line-height: 0.9; |
725 | line-height: 0.9; |
723 | }
|
726 | }
|