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