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 |