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