Compare Revisions
Last modification
- Rev 119 2013-02-18 16:59:42
- Author: PointedEars
- Log message:
Use basic Responsive Web Design
/trunk/styles/lcars-responsive.css |
File deleted |
|
Property changes: |
Deleted: svn:mime-type |
## -1 +0,0 ## |
-text/plain |
\ No newline at end of property |
Index: lcars22.css |
=================================================================== |
--- lcars22.css (revision 119) |
+++ lcars22.css (revision 118) |
@@ -1,6 +1,4 @@ |
<?php |
-namespace de\pointedears\css\least; |
- |
\header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT'); |
/* Resource expires in HTTP/1.1 caches 24h after last retrieval */ |
@@ -10,8 +8,6 @@ |
\header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT'); |
|
\header('Content-Type: text/css; charset=UTF-8'); |
- |
-require_once 'css/least/Mixins.php'; |
?>@charset "UTF-8"; |
|
<?php |
@@ -22,12 +18,10 @@ |
<?php |
} |
?> |
-/* FIXME: Does not work */ |
-/* @import url("/styles/lcars-responsive.css"); */ |
|
body { |
margin-top: 12em; |
- margin-left: 16.8em; |
+ margin-left: 22em; |
margin-right: 0.2em; |
margin-bottom: 0.2em; |
} |
@@ -241,7 +235,7 @@ |
position: fixed; |
left: 0; |
bottom: 0; |
- width: 10.4em; |
+ width: 20.8em; |
height: 2.4em; |
background-color: #000; |
z-index: 1701; |
@@ -251,10 +245,10 @@ |
position: absolute; |
bottom: 0.2em; |
left: 0.2em; |
- width: 8em; |
- height: 2.6em; |
- border-bottom-left-radius: 0em; |
- border-bottom-right-radius: 0em; |
+ width: 20.6em; |
+ height: 2.4em; |
+ border-bottom-left-radius: 2.4em; |
+ border-bottom-right-radius: 2em; |
background-color: #999; |
} |
|
@@ -269,7 +263,7 @@ |
bottom: 0.3em; |
left: 7.8em; |
height: 2.1em; |
- width: 2.2em; |
+ width: 7.6em; |
border-bottom-left-radius: 1.2em; |
border-bottom-right-radius: 1em; |
background-color: #000; |
@@ -363,35 +357,11 @@ |
top: 5.6em; |
} |
|
-#connectors div { |
- position: absolute; |
-} |
- |
-#connectors .top { |
- top: 0; |
- height: 1em; |
-} |
- |
-#connectors .mid { |
- top: 13.6em; |
- height: 0.8em; |
-} |
- |
-#connectors .left { |
- left: 0; |
- width: 2em; |
-} |
- |
-#connectors .right { |
- left: 2.2em; |
- width: 0em; |
-} |
- |
.multi-display |
{ |
position: fixed; |
top: 2.6em; |
- left: 10.6em; |
+ left: 15.8em; |
right: 0; |
} |
|
@@ -459,7 +429,6 @@ |
.multi-display .upper .content .analysis table { |
border-collapse: collapse; |
line-height: 1.2; |
- max-width: 100%; |
} |
|
.multi-display .upper .content .analysis th { |
@@ -687,7 +656,7 @@ |
{ |
position: fixed; |
top: 13.4em; |
- bottom: 0.2em; |
+ bottom: 2.8em; |
width: 5em; |
background-color: #fc6; |
} |
@@ -835,117 +804,4 @@ |
font-size: 2.4em; |
text-transform: uppercase; |
line-height: 0.9; |
-} |
- |
-/* Responsive Web Design (TODO: Move to imported stylesheet; but see above) */ |
- |
-body { |
- <?php |
- Mixins::transition('', 'margin-left 0.5s 0.5s ease'); |
- ?> |
-} |
- |
-#bow #bottom |
-{ |
- <?php |
- Mixins::transition('', 'width 0.5s 0.5s ease'); |
- ?> |
-} |
- |
-#bow-bottom { |
- <?php |
- Mixins::transition('-property', 'border-bottom-left-radius, border-bottom-right-radius, height, width'); |
- Mixins::transition('-delay', '0.5s'); |
- Mixins::transition('-duration', '0.5s'); |
- Mixins::transition('-timing-function', 'ease'); |
- ?> |
-} |
- |
-#bow-bottom .concave { |
- <?php |
- Mixins::transition('', 'width 0.5s 0.5s ease'); |
- ?> |
-} |
- |
-#connectors .right { |
- <?php |
- Mixins::transition('', 'width 0.5s 0.5s ease'); |
- ?> |
-} |
- |
-.multi-display |
-{ |
- <?php |
- Mixins::transition('', 'left 0.5s 0.5s ease'); |
- ?> |
-} |
- |
-.multi-display .lower .bg |
-{ |
- <?php |
- /* Wait 1s for bow to become shallower */ |
- Mixins::transition('', 'bottom 2.5s 0.5s ease'); |
- ?> |
-} |
- |
-@media all and (min-width: 1024px) { |
- body { |
- margin-left: 22em; |
- <?php |
- Mixins::transition('', 'margin-left 0.5s 0.5s ease'); |
- ?> |
- } |
- |
- #bow #bottom |
- { |
- width: 20.8em; |
- <?php |
- /* Wait 0.5s for multi-display to be reduced in height */ |
- Mixins::transition('', 'width 1.0s 0.5s ease'); |
- ?> |
- } |
- |
- #bow-bottom { |
- border-bottom-left-radius: 2.4em; |
- border-bottom-right-radius: 2em; |
- height: 2.4em; |
- width: 20.6em; |
- <?php |
- Mixins::transition('-property', 'border-bottom-left-radius, border-bottom-right-radius, height, width'); |
- Mixins::transition('-delay', '1.0s'); |
- Mixins::transition('-duration', '0.5s'); |
- Mixins::transition('-timing-function', 'ease'); |
- ?> |
- } |
- |
- #bow-bottom .concave { |
- width: 7.6em; |
- <?php |
- Mixins::transition('', 'width 1.0s 0.5s ease'); |
- ?> |
- } |
- |
- #connectors .right { |
- width: 5em; |
- <?php |
- /* Wait 1.0s for multi-display to be moved to right */ |
- Mixins::transition('', 'width 1.0s 0.5s ease'); |
- ?> |
- } |
- |
- .multi-display |
- { |
- left: 15.8em; |
- <?php |
- Mixins::transition('', 'left 0.5s 0.5s ease'); |
- ?> |
- } |
- |
- .multi-display .lower .bg |
- { |
- bottom: 2.8em; |
- <?php |
- Mixins::transition('', 'bottom 0.5s 0.5s ease'); |
- ?> |
- } |
-} |
+} |
\ No newline at end of file |
/trunk/styles/lcars-ani.css |
232,17 → 232,27 |
Mixins::keyframes('bow-bottom', <<<CSS |
from { |
bottom: 2.6em; |
width: 20.6em; |
height: 0em; |
border-bottom-right-radius: 0em; |
opacity: 0; |
} |
|
/* 0.64125 s */ |
83%, 97% { |
83% { |
bottom: 2.6em; |
width: 0em; |
height: 0em; |
border-bottom-right-radius: 0em; |
opacity: 1; |
} |
|
98% { |
bottom: 0.2em; |
width: 20.6em; |
height: 2.4em; |
border-bottom-right-radius: 2em; |
} |
CSS |
); |
?> |