Compare Revisions
Last modification
- Rev 50 2013-01-18 00:35:35
- Author: PointedEars
- Log message:
* styles/
- Moved LCARS animations to separate resource
- Use LEAST mixins via PHP
| /trunk/styles/lcars-ani.css |
| File deleted |
| \ No newline at end of file
|
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: lcars22.css |
| =================================================================== |
| --- lcars22.css (revision 50) |
| +++ lcars22.css (revision 43) |
| @@ -1,18 +1,5 @@ |
| -<?php |
| -// \header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT'); |
| -// |
| -// /* Cached resource expires in HTTP/1.1 caches 24h after last retrieval */ |
| -// \header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate'); |
| -// |
| -// /* Cached resource expires in HTTP/1.0 caches 24h after last retrieval */ |
| -// \header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT'); |
| - |
| -\header('Content-Type: text/css; charset=UTF-8'); |
| -?> |
| @CHARSET "UTF-8"; |
| -@import url("/styles/lcars-ani.css"); |
| - |
| /* Basic fonts */ |
| |
| @font-face { |
| @@ -68,6 +55,28 @@ |
| overflow: auto; |
| } |
| |
| +/* 0.0 to 1.0 s */ |
| +@-webkit-keyframes fade-in { |
| + from { |
| + opacity: 0; |
| + } |
| + |
| + /* at 0.25 s */ |
| + 25% { |
| + opacity: 0; |
| + } |
| + |
| + to { |
| + opacity: 1; |
| + } |
| +} |
| + |
| +body.fade-in { |
| + /* TODO: Step-by-step display instead */ |
| + /*-webkit-animation-name: fade-in;*/ |
| + /* -webkit-animation-iteration-count: infinite; */ |
| +} |
| + |
| body.empty { |
| margin-top: 3em; |
| margin-left: 0.2em; |
| @@ -83,6 +92,24 @@ |
| margin-right: 1em; |
| } |
| |
| +/* 0.0 to 0.6 s */ |
| +@-webkit-keyframes content { |
| + from { |
| + opacity: 0; |
| + } |
| + |
| + /* 0.6 s */ |
| + 99% { |
| + opacity: 0; |
| + } |
| +} |
| + |
| +.empty.fade-in #content { |
| + -webkit-animation-name: content; |
| + -webkit-animation-duration: 0.6s; |
| + -webkit-animation-timing-function: linear; |
| +} |
| + |
| a { |
| text-decoration: none; |
| } |
| @@ -206,7 +233,21 @@ |
| min-width: 10em; |
| } |
| |
| +/* 0.0 to 0.5 s */ |
| +@-webkit-keyframes bow-top { |
| + from { |
| + left: 90%; |
| + border-top-left-radius: 0; |
| + border-bottom-left-radius: 0; |
| + } |
| +} |
| |
| +.fade-in #bow-top { |
| + -webkit-animation-name: bow-top; |
| + -webkit-animation-duration: 0.5s; |
| + -webkit-animation-timing-function: linear; |
| +} |
| + |
| #bow-top .text { |
| position: absolute; |
| margin: 0; |
| @@ -226,8 +267,24 @@ |
| left: 0.93em; |
| } |
| |
| +/* 0.0 to 0.5 s */ |
| +@-webkit-keyframes bow-top-text { |
| + from { |
| + opacity: 0; |
| + } |
| |
| + /* shortly before 1.0 s */ |
| + 99% { |
| + opacity: 0; |
| + } |
| +} |
| |
| +.fade-in #bow-top .text { |
| + -webkit-animation-name: bow-top-text; |
| + -webkit-animation-duration: 0.5s; |
| + -webkit-animation-timing-function: linear; |
| +} |
| + |
| #bow-top .text span { |
| padding-right: 0.1em; |
| background-color: #000; |
| @@ -247,7 +304,21 @@ |
| background-color: #000; |
| } |
| |
| +/* 0.0 to 0.5 s */ |
| +@-webkit-keyframes footer { |
| + from { |
| + left: 90%; |
| + border-top-left-radius: 0; |
| + border-bottom-left-radius: 0; |
| + } |
| +} |
| |
| +.empty.fade-in #footer { |
| + -webkit-animation-name: footer; |
| + -webkit-animation-duration: 0.5s; |
| + -webkit-animation-timing-function: linear; |
| +} |
| + |
| .empty #footer { |
| position: absolute; |
| bottom: 0; |
| @@ -276,6 +347,24 @@ |
| text-overflow: ellipsis; |
| } |
| |
| +/* 0.0 to 0.5 s */ |
| +@-webkit-keyframes footer-text { |
| + from { |
| + opacity: 0; |
| + } |
| + |
| + /* shortly before 0.5 s */ |
| + 99% { |
| + opacity: 0; |
| + } |
| +} |
| + |
| +.empty.fade-in #footer .text { |
| + -webkit-animation-name: footer-text; |
| + -webkit-animation-duration: 0.5s; |
| + -webkit-animation-timing-function: linear; |
| +} |
| + |
| .empty #footer .text span { |
| padding-right: 0.1em; |
| background-color: #000; |
| @@ -310,6 +399,24 @@ |
| background-color: #999; |
| } |
| |
| +/* 0.0 to 0.625 s */ |
| +@-webkit-keyframes bow-top-left { |
| + from { |
| + height: 0; |
| + } |
| + |
| + /* at 0.5 s */ |
| + 80% { |
| + height: 0; |
| + } |
| +} |
| + |
| +.fade-in #bow-top-left { |
| + -webkit-animation-name: bow-top-left; |
| + -webkit-animation-duration: 0.625s; |
| + -webkit-animation-timing-function: linear; |
| +} |
| + |
| .empty #bow-top-left { |
| display: none; |
| } |
| @@ -328,7 +435,7 @@ |
| display: none; |
| } |
| |
| -.menu-container { |
| +#LCARS .menu-container { |
| position: fixed; |
| left: 0.2em; |
| top: 5.6em; |
| @@ -338,12 +445,35 @@ |
| overflow: auto; |
| } |
| |
| -.menu |
| +#LCARS .menu |
| { |
| height: 17.6em; |
| background-color: #000; |
| } |
| |
| +/* 0.0 to 1.125 s */ |
| +@-webkit-keyframes bow-menu { |
| + from { |
| + opacity: 0; |
| + } |
| + |
| + /* at ca. 0.61875 s */ |
| + 55% { |
| + opacity: 0; |
| + } |
| + |
| + 56% { |
| + opacity: 1; |
| + } |
| +} |
| + |
| +.fade-in #LCARS .menu |
| +{ |
| + -webkit-animation-name: bow-menu; |
| + -webkit-animation-duration: 1.125s; |
| + -webkit-animation-timing-function: linear; |
| +} |
| + |
| .menu ul { |
| margin: 0 0.2em 0.2em 0; |
| padding: 0; |
| @@ -420,6 +550,10 @@ |
| height: 2em; |
| background-color: #7d7d7d; /* c9c */ |
| color: #000 !important; |
| + font-family: "LCARS", |
| + Haettenschweiler, "Downloadable Haettenschweiler", |
| + "Zurich XCn BT", "Downloadable Zurich XCn BT", |
| + impact, Verdana, Geneva, Arial, Helvetica, sans-serif; |
| text-decoration: none !important; |
| text-transform: uppercase; |
| overflow: hidden; |
| @@ -471,8 +605,6 @@ |
| line-height: 1; |
| background-color: #9cf; |
| color: #000 !important; |
| - text-overflow: ellipsis; |
| - white-space: nowrap; |
| } |
| |
| .multi-display |