Compare Revisions
Last modification
- Rev 177 2013-06-06 00:25:51
- Author: PointedEars
- Log message:
* styles/lcars-responsive.css: Use PHP include to avoid duplication of code for small viewports
/trunk/styles/lcars-responsive-small.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: styles/lcars-responsive.css |
=================================================================== |
--- styles/lcars-responsive.css (revision 177) |
+++ styles/lcars-responsive.css (revision 176) |
@@ -201,7 +201,186 @@ |
/* Desktops with small viewport (VGA resolution and less, or toolbars) */ |
@media all and (max-width: 584px) { |
- <?php require 'lcars-responsive-small.css'; ?> |
+ /* 0.5 to 0.5225s */ |
+ #connectors { |
+ opacity: 0; |
+ <?php |
+ Mixins::transition('', 'opacity 0s 0.5s linear'); |
+ ?> |
+ } |
+ |
+ #bow-bottom { |
+ bottom: 2.6em; |
+ height: 0em; |
+ opacity: 0; |
+ <?php |
+ Mixins::transition('', |
+ 'bottom 0.0225s 0.5s linear,' |
+ . ' height 0.0225s 0.5s linear,' |
+ . ' opacity 0s 0.5225s linear'); |
+ ?> |
+ } |
+ |
+ #bow #bottom { |
+ visibility: hidden; |
+ <?php |
+ Mixins::transition('', |
+ 'visibility 0s 0.5225s linear'); |
+ ?> |
+ } |
+ |
+ .menu-container |
+ { |
+ top: 11em; |
+ width: 5em; |
+ bottom: 0; |
+ z-index: 1; |
+ background-color: #fc6; |
+ <?php |
+ Mixins::transition('', |
+ 'top 0.5s 0.5s linear,' |
+ . ' width 0.5s 0.5s linear,' |
+ . ' bottom 0.5s 0.5s linear,' |
+ . ' background-color 0s 1s linear' |
+ ); |
+ ?> |
+ } |
+ |
+ .menu { |
+ height: 21.8em; |
+ <?php |
+ Mixins::transition('', 'height 0.5s 0.5s linear'); |
+ ?> |
+ } |
+ |
+ .menu ul:first-child { |
+ padding-top: 0; |
+ <?php |
+ Mixins::transition('', 'padding-top 0.5s 0.5s linear'); |
+ ?> |
+ } |
+ |
+ .menu .button |
+ { |
+ width: 5em; |
+ <?php |
+ Mixins::transition('', 'width 0.5s 0.5s linear'); |
+ ?> |
+ } |
+ |
+ /* 0.5225s to 0.6475s */ |
+ #bow-top-left { |
+ height: 0; |
+ <?php |
+ Mixins::transition('', 'height 0.125s 0.5225s linear'); |
+ ?> |
+ } |
+ |
+ /* at 0.6475s */ |
+ #bow-top .text { |
+ opacity: 0; |
+ <?php |
+ Mixins::transition('-property', 'opacity'); |
+ Mixins::transition('-delay', '0.6475s'); |
+ Mixins::transition('-timing-function', 'linear'); |
+ ?> |
+ } |
+ |
+ .empty #bow-top .text { |
+ opacity: 1; |
+ } |
+ |
+ /* 0.6475s to 1.1475s */ |
+ #bow-top { |
+ left: 100%; |
+ min-width: auto; |
+ border-top-left-radius: 0; |
+ border-bottom-left-radius: 0; |
+ border-top-right-radius: 1.2em; |
+ border-bottom-right-radius: 1.2em; |
+ opacity: 0; |
+ <?php |
+ Mixins::transition('', |
+ 'left 0.5s 0.6475s linear,' |
+ . ' min-width 0s 0.6475s linear,' |
+ . ' border-top-left-radius 0.5s 0.6475s linear,' |
+ . ' border-top-right-radius 0.5s 0.6475s linear,' |
+ . ' border-bottom-right-radius 0.5s 0.6475s linear,' |
+ . ' opacity 0s 1.1475s linear'); |
+ ?> |
+ } |
+ |
+ .empty #bow-top { |
+ left: 0%; |
+ min-width: 10em; |
+ border-top-left-radius: 1.2em; |
+ border-bottom-left-radius: 1.2em; |
+ border-top-right-radius: 1.2em; |
+ border-bottom-right-radius: 1.2em; |
+ opacity: 1; |
+ } |
+ |
+ .multi-display |
+ { |
+ top: 0.2em; |
+ left: 0.2em; |
+ <?php |
+ Mixins::transition('', |
+ 'top 0.25s 1.1475s linear,' |
+ . ' left 0.25s 1.3975s linear'); |
+ ?> |
+ } |
+ |
+ .menu .bow |
+ { |
+ background-color: #fc6; |
+ <?php |
+ Mixins::transition('', |
+ 'width 0.5s 0.5s linear,' |
+ . 'background-color 0s 1.6475s linear' |
+ ); |
+ ?> |
+ } |
+ |
+ .multi-display .lower .bg |
+ { |
+ top: 11em; |
+ <?php |
+ Mixins::transition('', 'top 0.25s 1.1475s linear'); |
+ ?> |
+ } |
+ |
+ body { |
+ margin-top: 9.6em; |
+ margin-left: 6.4em; |
+ <?php |
+ Mixins::transition('', |
+ 'margin-top 0.25s 1.1475s linear,' |
+ . ' margin-left 0.25s 1.3975s linear'); |
+ ?> |
+ } |
+ |
+ .multi-display .upper .content #cmd2, |
+ .multi-display .upper .content #cmd3 |
+ { |
+ display: none; |
+ } |
+ |
+ .multi-display .upper .content #cmd1, |
+ .multi-display .upper .content #cmd4 |
+ { |
+ right: 0; |
+ } |
+ |
+ .multi-display .upper .content .analysis |
+ { |
+ right: 5.2em; |
+ } |
+ |
+ .multi-display .upper .content .commands |
+ { |
+ width: 5.2em; |
+ } |
} |
|
/* Mobile devices: HTC Sensation & friends */ |
@@ -214,5 +393,184 @@ |
max-width: 540px; |
} |
*/ |
- <?php require 'lcars-responsive-small.css'; ?> |
+ /* 0.5 to 0.5225s */ |
+ #connectors { |
+ opacity: 0; |
+ <?php |
+ Mixins::transition('', 'opacity 0s 0.5s linear'); |
+ ?> |
+ } |
+ |
+ #bow-bottom { |
+ bottom: 2.6em; |
+ height: 0em; |
+ opacity: 0; |
+ <?php |
+ Mixins::transition('', |
+ 'bottom 0.0225s 0.5s linear,' |
+ . ' height 0.0225s 0.5s linear,' |
+ . ' opacity 0s 0.5225s linear'); |
+ ?> |
+ } |
+ |
+ #bow #bottom { |
+ visibility: hidden; |
+ <?php |
+ Mixins::transition('', |
+ 'visibility 0s 0.5225s linear'); |
+ ?> |
+ } |
+ |
+ .menu-container |
+ { |
+ top: 11em; |
+ width: 5em; |
+ bottom: 0; |
+ z-index: 1; |
+ background-color: #fc6; |
+ <?php |
+ Mixins::transition('', |
+ 'top 0.5s 0.5s linear,' |
+ . ' width 0.5s 0.5s linear,' |
+ . ' bottom 0.5s 0.5s linear,' |
+ . ' background-color 0s 1s linear' |
+ ); |
+ ?> |
+ } |
+ |
+ .menu { |
+ height: 21.8em; |
+ <?php |
+ Mixins::transition('', 'height 0.5s 0.5s linear'); |
+ ?> |
+ } |
+ |
+ .menu ul:first-child { |
+ padding-top: 0; |
+ <?php |
+ Mixins::transition('', 'padding-top 0.5s 0.5s linear'); |
+ ?> |
+ } |
+ |
+ .menu .button |
+ { |
+ width: 5em; |
+ <?php |
+ Mixins::transition('', 'width 0.5s 0.5s linear'); |
+ ?> |
+ } |
+ |
+ /* 0.5225s to 0.6475s */ |
+ #bow-top-left { |
+ height: 0; |
+ <?php |
+ Mixins::transition('', 'height 0.125s 0.5225s linear'); |
+ ?> |
+ } |
+ |
+ /* at 0.6475s */ |
+ #bow-top .text { |
+ opacity: 0; |
+ <?php |
+ Mixins::transition('-property', 'opacity'); |
+ Mixins::transition('-delay', '0.6475s'); |
+ Mixins::transition('-timing-function', 'linear'); |
+ ?> |
+ } |
+ |
+ .empty #bow-top .text { |
+ opacity: 1; |
+ } |
+ |
+ /* 0.6475s to 1.1475s */ |
+ #bow-top { |
+ left: 100%; |
+ min-width: auto; |
+ border-top-left-radius: 0; |
+ border-bottom-left-radius: 0; |
+ border-top-right-radius: 1.2em; |
+ border-bottom-right-radius: 1.2em; |
+ opacity: 0; |
+ <?php |
+ Mixins::transition('', |
+ 'left 0.5s 0.6475s linear,' |
+ . ' min-width 0s 0.6475s linear,' |
+ . ' border-top-left-radius 0.5s 0.6475s linear,' |
+ . ' border-top-right-radius 0.5s 0.6475s linear,' |
+ . ' border-bottom-right-radius 0.5s 0.6475s linear,' |
+ . ' opacity 0s 1.1475s linear'); |
+ ?> |
+ } |
+ |
+ .empty #bow-top { |
+ left: 0%; |
+ min-width: 10em; |
+ border-top-left-radius: 1.2em; |
+ border-bottom-left-radius: 1.2em; |
+ border-top-right-radius: 1.2em; |
+ border-bottom-right-radius: 1.2em; |
+ opacity: 1; |
+ } |
+ |
+ .multi-display |
+ { |
+ top: 0.2em; |
+ left: 0.2em; |
+ <?php |
+ Mixins::transition('', |
+ 'top 0.25s 1.1475s linear,' |
+ . ' left 0.25s 1.3975s linear'); |
+ ?> |
+ } |
+ |
+ .menu .bow |
+ { |
+ background-color: #fc6; |
+ <?php |
+ Mixins::transition('', |
+ 'width 0.5s 0.5s linear,' |
+ . 'background-color 0s 1.6475s linear' |
+ ); |
+ ?> |
+ } |
+ |
+ .multi-display .lower .bg |
+ { |
+ top: 11em; |
+ <?php |
+ Mixins::transition('', 'top 0.25s 1.1475s linear'); |
+ ?> |
+ } |
+ |
+ body { |
+ margin-top: 9.6em; |
+ margin-left: 6.4em; |
+ <?php |
+ Mixins::transition('', |
+ 'margin-top 0.25s 1.1475s linear,' |
+ . ' margin-left 0.25s 1.3975s linear'); |
+ ?> |
+ } |
+ |
+ .multi-display .upper .content #cmd2, |
+ .multi-display .upper .content #cmd3 |
+ { |
+ display: none; |
+ } |
+ |
+ .multi-display .upper .content #cmd1, |
+ .multi-display .upper .content #cmd4 |
+ { |
+ right: 0; |
+ } |
+ |
+ .multi-display .upper .content .analysis |
+ { |
+ right: 5.2em; |
+ } |
+ |
+ .multi-display .upper .content .commands |
+ { |
+ width: 5.2em; |
+ } |
} |
\ No newline at end of file |