LCARSes-matrixFAQsJSXOpenCV2-CookbookPHPXESWebE

Català-Valencià - Catalan中文 - Chinese (Simplified)中文 - Chinese (Traditional)Česky - CzechDansk - DanishNederlands - DutchEnglish - EnglishSuomi - FinnishFrançais - FrenchDeutsch - Germanעברית - Hebrewहिंदी - HindiMagyar - HungarianBahasa Indonesia - IndonesianItaliano - Italian日本語 - Japanese한국어 - KoreanМакедонски - Macedonianमराठी - MarathiNorsk - NorwegianPolski - PolishPortuguês - PortuguesePortuguês - Portuguese (Brazil)Русский - RussianSlovenčina - SlovakSlovenščina - SlovenianEspañol - SpanishSvenska - SwedishTürkçe - TurkishУкраїнська - UkrainianOëzbekcha - Uzbek

Compare Revisions

• This comparison shows the changes necessary to convert path

  → /trunk/styles/ @ 176

  → /trunk/styles/ @ 177

  ↔ Reverse comparison

• Compare Path:	Rev

  With Path:	Rev

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

Ignore whitespace Rev 176 → Rev 177

/trunk/styles/lcars-responsive.css
201,186 → 201,7
/* Desktops with small viewport (VGA resolution and less, or toolbars) */
@media all and (max-width: 584px) {
/* 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;
}
<?php require 'lcars-responsive-small.css'; ?>
}
/* Mobile devices: HTC Sensation & friends */
393,184 → 214,5
max-width: 540px;
}
*/
/* 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;
}
<?php require 'lcars-responsive-small.css'; ?>
}

/trunk/styles/lcars-responsive-small.css
0,0 → 1,183
<?php
/* Responsive Web Design for small viewports; see lcars-responsive.css */
use de\pointedears\css\least\Mixins;
?>/* 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;
}
Property changes:
Added: svn:mime-type
## -0,0 +1 ##
+text/plain
\ No newline at end of property