Rev 43 | Rev 71 | Go to most recent revision | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed
| Rev 43 | Rev 50 | ||
|---|---|---|---|
| Line -... | Line 1... | ||
| - | 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; |
| Line 53... | Line 66... | ||
| 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 | }
|
| Line 90... | Line 81... | ||
| 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, |
| Line 231... | Line 204... | ||
| 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; |
| Line 265... | Line 224... | ||
| 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; |
| Line 302... | Line 245... | ||
| 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; |
| Line 345... | Line 274... | ||
| 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; |
| Line 397... | Line 308... | ||
| 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 { |
| Line 433... | Line 326... | ||
| 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 | ||
| Line 548... | Line 418... | ||
| 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 | }
|
| Line 603... | Line 469... | ||
| 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; |