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