WebSVN - LCARS - Diff - Rev 175 and 176 - /trunk/styles/lcars-responsive.css


/* Responsive Web Design  */

<?php use de\pointedears\css\least\Mixins; ?>

/* Desktops with medium-size browser viewport (SVGA resolution) */

body {
  <?php
    Mixins::transition('',
        'margin-top   0.25s 0.75s linear,'
      . ' margin-left 0.25s 0.5s linear');
  ?>
}

.multi-display
{
  <?php
    Mixins::transition('',
        'top    0.25s 0.75s linear,'
      . ' left  0.25s 0.5s linear');
  ?>
}

.menu .bow
{
  <?php
    Mixins::transition('',
        'width            0.5s 1s    linear,'
      . 'background-color 0s   0.75s linear'
    );
  ?>
}

.multi-display .lower .bg
{
  <?php
    /* Wait 1s for bow to become shallower */
    Mixins::transition('',
        'top    0.25s 0.75s linear,'
      . 'bottom 2.5s 0.5s ease');
  ?>
}
 
#bow-top {
  <?php
    Mixins::transition('',
        'left                        0.5s 1.0s linear,'
      . ' min-width                  0s   1.5s linear,'
      . ' border-top-left-radius     0.5s 1.0s linear,'
      . ' border-top-right-radius    0.5s 1.0s linear,'
      . ' border-bottom-right-radius 0.5s 1.0s linear,'
      . ' opacity                    0s   1.0s linear');
  ?>
}

#bow-top .text {
  <?php
    Mixins::transition('-property', 'opacity');
    Mixins::transition('-delay', '1.5s');
    Mixins::transition('-timing-function', 'linear');
  ?>
}

#bow-top-left {
  <?php
    Mixins::transition('-property', 'height');
    Mixins::transition('-duration', '0.125s');
    Mixins::transition('-delay', '1.5s');
    Mixins::transition('-timing-function', 'linear');
  ?>
}

.menu-container
{
  <?php
    Mixins::transition('',
        'top      0.5s 1s linear,'
      . ' width   0.5s 1s linear,'
      . ' bottom  0.5s 1s linear,'
      . ' z-index 0s   1s linear');
  ?>
}  

.menu {
  <?php
    Mixins::transition('', 'height 0.5s 1s linear');
  ?>
}

.menu ul:first-child {
  <?php
    Mixins::transition('', 'padding-top 0.5s 1s linear');
  ?>
}

.menu .button
{
  <?php
    Mixins::transition('', 'width 0.5s 1s linear');
  ?>
}  

#bow #bottom {
  <?php
    Mixins::transition('', 'visibility 0s 1.625s linear');
  ?>
}

#bow-bottom {
  <?php
    Mixins::transition('',
        'border-bottom-left-radius   0.5s    0.5s   ease,'
      . ' border-bottom-right-radius 0.5s    0.5s   ease,'
      . ' width                      0.5s    0.5s   ease,'
      . ' bottom                     0.0225s 1.625s linear,'
      . ' height                     0.0225s 1.625s linear');
  ?>
}

#bow-bottom .concave {
  <?php
    Mixins::transition('', 'width 0.5s 0.5s ease');
  ?>
}

#connectors {
  <?php
    Mixins::transition('', 'opacity 0s 1.6475s linear');
  ?>
}  

#connectors .right {
  <?php
    Mixins::transition('', 'width 0.5s 0.5s ease');
  ?>
}

/* Desktops with large viewport (XGA resolution and more, or no toolbars) */
@media all and (min-width: 1024px) and (min-height: 364px) {
  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;
    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,'
      . 'top  0.5s 0.5s linear');
  ?>
  }
 
  .multi-display .lower .bg
  {
    bottom: 2.8em;
    <?php
      Mixins::transition('', 'bottom 0.5s 0.5s ease');
    ?>
  }  
}

/* 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;
  }
}

/* Mobile devices: HTC Sensation & friends */
@media screen and (max-device-width: 540px) {
/*
  html,
  #LCARS,
  .multi-display
  {
    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;
  }
}

Rev 175	Rev 176
1	/* Responsive Web Design */	1	/* Responsive Web Design */
2		2
3	<?php use de\pointedears\css\least\Mixins; ?>	3	<?php use de\pointedears\css\least\Mixins; ?>
4		4
5	/* Desktops with medium-size browser viewport (SVGA resolution) */	5	/* Desktops with medium-size browser viewport (SVGA resolution) */
6		6
7	body {	7	body {
8	<?php	8	<?php
9	Mixins::transition('',	9	Mixins::transition('',
10	'margin-top 0.25s 0.75s linear,'	10	'margin-top 0.25s 0.75s linear,'
11	. ' margin-left 0.25s 0.5s linear');	11	. ' margin-left 0.25s 0.5s linear');
12	?>	12	?>
13	}	13	}
14		14
15	.multi-display	15	.multi-display
16	{	16	{
17	<?php	17	<?php
18	Mixins::transition('',	18	Mixins::transition('',
19	'top 0.25s 0.75s linear,'	19	'top 0.25s 0.75s linear,'
20	. ' left 0.25s 0.5s linear');	20	. ' left 0.25s 0.5s linear');
21	?>	21	?>
22	}	22	}
23		23
24	.menu .bow	24	.menu .bow
25	{	25	{
26	<?php	26	<?php
27	Mixins::transition('',	27	Mixins::transition('',
28	'width 0.5s 1s linear,'	28	'width 0.5s 1s linear,'
29	. 'background-color 0s 0.75s linear'	29	. 'background-color 0s 0.75s linear'
30	);	30	);
31	?>	31	?>
32	}	32	}
33		33
34	.multi-display .lower .bg	34	.multi-display .lower .bg
35	{	35	{
36	<?php	36	<?php
37	/* Wait 1s for bow to become shallower */	37	/* Wait 1s for bow to become shallower */
38	Mixins::transition('',	38	Mixins::transition('',
39	'top 0.25s 0.75s linear,'	39	'top 0.25s 0.75s linear,'
40	. 'bottom 2.5s 0.5s ease');	40	. 'bottom 2.5s 0.5s ease');
41	?>	41	?>
42	}	42	}
43		43
44	#bow-top {	44	#bow-top {
45	<?php	45	<?php
46	Mixins::transition('',	46	Mixins::transition('',
47	'left 0.5s 1.0s linear,'	47	'left 0.5s 1.0s linear,'
48	. ' min-width 0s 1.5s linear,'	48	. ' min-width 0s 1.5s linear,'
49	. ' border-top-left-radius 0.5s 1.0s linear,'	49	. ' border-top-left-radius 0.5s 1.0s linear,'
50	. ' border-top-right-radius 0.5s 1.0s linear,'	50	. ' border-top-right-radius 0.5s 1.0s linear,'
51	. ' border-bottom-right-radius 0.5s 1.0s linear,'	51	. ' border-bottom-right-radius 0.5s 1.0s linear,'
52	. ' opacity 0s 1.0s linear');	52	. ' opacity 0s 1.0s linear');
53	?>	53	?>
54	}	54	}
55		55
56	#bow-top .text {	56	#bow-top .text {
57	<?php	57	<?php
58	Mixins::transition('-property', 'opacity');	58	Mixins::transition('-property', 'opacity');
59	Mixins::transition('-delay', '1.5s');	59	Mixins::transition('-delay', '1.5s');
60	Mixins::transition('-timing-function', 'linear');	60	Mixins::transition('-timing-function', 'linear');
61	?>	61	?>
62	}	62	}
63		63
64	#bow-top-left {	64	#bow-top-left {
65	<?php	65	<?php
66	Mixins::transition('-property', 'height');	66	Mixins::transition('-property', 'height');
67	Mixins::transition('-duration', '0.125s');	67	Mixins::transition('-duration', '0.125s');
68	Mixins::transition('-delay', '1.5s');	68	Mixins::transition('-delay', '1.5s');
69	Mixins::transition('-timing-function', 'linear');	69	Mixins::transition('-timing-function', 'linear');
70	?>	70	?>
71	}	71	}
72		72
73	.menu-container	73	.menu-container
74	{	74	{
75	<?php	75	<?php
76	Mixins::transition('',	76	Mixins::transition('',
77	'top 0.5s 1s linear,'	77	'top 0.5s 1s linear,'
78	. ' width 0.5s 1s linear,'	78	. ' width 0.5s 1s linear,'
79	. ' bottom 0.5s 1s linear,'	79	. ' bottom 0.5s 1s linear,'
80	. ' z-index 0s 1s linear');	80	. ' z-index 0s 1s linear');
81	?>	81	?>
82	}	82	}
83		83
84	.menu {	84	.menu {
85	<?php	85	<?php
86	Mixins::transition('', 'height 0.5s 1s linear');	86	Mixins::transition('', 'height 0.5s 1s linear');
87	?>	87	?>
88	}	88	}
89		89
90	.menu ul:first-child {	90	.menu ul:first-child {
91	<?php	91	<?php
92	Mixins::transition('', 'padding-top 0.5s 1s linear');	92	Mixins::transition('', 'padding-top 0.5s 1s linear');
93	?>	93	?>
94	}	94	}
95		95
96	.menu .button	96	.menu .button
97	{	97	{
98	<?php	98	<?php
99	Mixins::transition('', 'width 0.5s 1s linear');	99	Mixins::transition('', 'width 0.5s 1s linear');
100	?>	100	?>
101	}	101	}
102		102
103	#bow #bottom {	103	#bow #bottom {
104	<?php	104	<?php
105	Mixins::transition('', 'visibility 0s 1.625s linear');	105	Mixins::transition('', 'visibility 0s 1.625s linear');
106	?>	106	?>
107	}	107	}
108		108
109	#bow-bottom {	109	#bow-bottom {
110	<?php	110	<?php
111	Mixins::transition('',	111	Mixins::transition('',
112	'border-bottom-left-radius 0.5s 0.5s ease,'	112	'border-bottom-left-radius 0.5s 0.5s ease,'
113	. ' border-bottom-right-radius 0.5s 0.5s ease,'	113	. ' border-bottom-right-radius 0.5s 0.5s ease,'
114	. ' width 0.5s 0.5s ease,'	114	. ' width 0.5s 0.5s ease,'
115	. ' bottom 0.0225s 1.625s linear,'	115	. ' bottom 0.0225s 1.625s linear,'
116	. ' height 0.0225s 1.625s linear');	116	. ' height 0.0225s 1.625s linear');
117	?>	117	?>
118	}	118	}
119		119
120	#bow-bottom .concave {	120	#bow-bottom .concave {
121	<?php	121	<?php
122	Mixins::transition('', 'width 0.5s 0.5s ease');	122	Mixins::transition('', 'width 0.5s 0.5s ease');
123	?>	123	?>
124	}	124	}
125		125
126	#connectors {	126	#connectors {
127	<?php	127	<?php
128	Mixins::transition('', 'opacity 0s 1.6475s linear');	128	Mixins::transition('', 'opacity 0s 1.6475s linear');
129	?>	129	?>
130	}	130	}
131		131
132	#connectors .right {	132	#connectors .right {
133	<?php	133	<?php
134	Mixins::transition('', 'width 0.5s 0.5s ease');	134	Mixins::transition('', 'width 0.5s 0.5s ease');
135	?>	135	?>
136	}	136	}
137		137
138	/* Desktops with large viewport (XGA resolution and more, or no toolbars) */	138	/* Desktops with large viewport (XGA resolution and more, or no toolbars) */
139	@media all and (min-width: 1024px) and (min-height: 364px) {	139	@media all and (min-width: 1024px) and (min-height: 364px) {
140	body {	140	body {
141	margin-left: 22em;	141	margin-left: 22em;
142	<?php	142	<?php
143	Mixins::transition('', 'margin-left 0.5s 0.5s ease');	143	Mixins::transition('', 'margin-left 0.5s 0.5s ease');
144	?>	144	?>
145	}	145	}
146		146
147	#bow #bottom	147	#bow #bottom
148	{	148	{
149	width: 20.8em;	149	width: 20.8em;
150	<?php	150	<?php
151	/* Wait 0.5s for multi-display to be reduced in height */	151	/* Wait 0.5s for multi-display to be reduced in height */
152	Mixins::transition('', 'width 1.0s 0.5s ease');	152	Mixins::transition('', 'width 1.0s 0.5s ease');
153	?>	153	?>
154	}	154	}
155		155
156	#bow-bottom {	156	#bow-bottom {
157	border-bottom-left-radius: 2.4em;	157	border-bottom-left-radius: 2.4em;
158	border-bottom-right-radius: 2em;	158	border-bottom-right-radius: 2em;
159	width: 20.6em;	159	width: 20.6em;
160	<?php	160	<?php
161	Mixins::transition('-property', 'border-bottom-left-radius, border-bottom-right-radius, height, width');	161	Mixins::transition('-property', 'border-bottom-left-radius, border-bottom-right-radius, height, width');
162	Mixins::transition('-delay', '1.0s');	162	Mixins::transition('-delay', '1.0s');
163	Mixins::transition('-duration', '0.5s');	163	Mixins::transition('-duration', '0.5s');
164	Mixins::transition('-timing-function', 'ease');	164	Mixins::transition('-timing-function', 'ease');
165	?>	165	?>
166	}	166	}
167		167
168	#bow-bottom .concave {	168	#bow-bottom .concave {
169	width: 7.6em;	169	width: 7.6em;
170	<?php	170	<?php
171	Mixins::transition('', 'width 1.0s 0.5s ease');	171	Mixins::transition('', 'width 1.0s 0.5s ease');
172	?>	172	?>
173	}	173	}
174		174
175	#connectors .right {	175	#connectors .right {
176	width: 5em;	176	width: 5em;
177	<?php	177	<?php
178	/* Wait 1.0s for multi-display to be moved to right */	178	/* Wait 1.0s for multi-display to be moved to right */
179	Mixins::transition('', 'width 1.0s 0.5s ease');	179	Mixins::transition('', 'width 1.0s 0.5s ease');
180	?>	180	?>
181	}	181	}
182		182
183	.multi-display	183	.multi-display
184	{	184	{
185	left: 15.8em;	185	left: 15.8em;
186	<?php	186	<?php
187	Mixins::transition('',	187	Mixins::transition('',
188	'left 0.5s 0.5s ease,'	188	'left 0.5s 0.5s ease,'
189	. 'top 0.5s 0.5s linear');	189	. 'top 0.5s 0.5s linear');
190	?>	190	?>
191	}	191	}
192		192
193	.multi-display .lower .bg	193	.multi-display .lower .bg
194	{	194	{
195	bottom: 2.8em;	195	bottom: 2.8em;
196	<?php	196	<?php
197	Mixins::transition('', 'bottom 0.5s 0.5s ease');	197	Mixins::transition('', 'bottom 0.5s 0.5s ease');
198	?>	198	?>
199	}	199	}
200	}	200	}
201		201
202	/* Desktops with small viewport (VGA resolution and less, or toolbars) */	202	/* Desktops with small viewport (VGA resolution and less, or toolbars) */
203	@media all and (max-width: 640px) {	203	@media all and (max-width: 584px) {
204	/* 0.5 to 0.5225s */	204	/* 0.5 to 0.5225s */
205	#connectors {	205	#connectors {
206	opacity: 0;	206	opacity: 0;
207	<?php	207	<?php
208	Mixins::transition('', 'opacity 0s 0.5s linear');	208	Mixins::transition('', 'opacity 0s 0.5s linear');
209	?>	209	?>
210	}	210	}
211		211
212	#bow-bottom {	212	#bow-bottom {
213	bottom: 2.6em;	213	bottom: 2.6em;
214	height: 0em;	214	height: 0em;
215	opacity: 0;	215	opacity: 0;
216	<?php	216	<?php
217	Mixins::transition('',	217	Mixins::transition('',
218	'bottom 0.0225s 0.5s linear,'	218	'bottom 0.0225s 0.5s linear,'
219	. ' height 0.0225s 0.5s linear,'	219	. ' height 0.0225s 0.5s linear,'
220	. ' opacity 0s 0.5225s linear');	220	. ' opacity 0s 0.5225s linear');
221	?>	221	?>
222	}	222	}
223		223
224	#bow #bottom {	224	#bow #bottom {
225	visibility: hidden;	225	visibility: hidden;
226	<?php	226	<?php
227	Mixins::transition('',	227	Mixins::transition('',
228	'visibility 0s 0.5225s linear');	228	'visibility 0s 0.5225s linear');
229	?>	229	?>
230	}	230	}
231		231
232	.menu-container	232	.menu-container
233	{	233	{
234	top: 11em;	234	top: 11em;
235	width: 5em;	235	width: 5em;
236	bottom: 0;	236	bottom: 0;
237	z-index: 1;	237	z-index: 1;
238	background-color: #fc6;	238	background-color: #fc6;
239	<?php	239	<?php
240	Mixins::transition('',	240	Mixins::transition('',
241	'top 0.5s 0.5s linear,'	241	'top 0.5s 0.5s linear,'
242	. ' width 0.5s 0.5s linear,'	242	. ' width 0.5s 0.5s linear,'
243	. ' bottom 0.5s 0.5s linear,'	243	. ' bottom 0.5s 0.5s linear,'
244	. ' background-color 0s 1s linear'	244	. ' background-color 0s 1s linear'
245	);	245	);
246	?>	246	?>
247	}	247	}
248		248
249	.menu {	249	.menu {
250	height: 21.8em;	250	height: 21.8em;
251	<?php	251	<?php
252	Mixins::transition('', 'height 0.5s 0.5s linear');	252	Mixins::transition('', 'height 0.5s 0.5s linear');
253	?>	253	?>
254	}	254	}
255		255
256	.menu ul:first-child {	256	.menu ul:first-child {
257	padding-top: 0;	257	padding-top: 0;
258	<?php	258	<?php
259	Mixins::transition('', 'padding-top 0.5s 0.5s linear');	259	Mixins::transition('', 'padding-top 0.5s 0.5s linear');
260	?>	260	?>
261	}	261	}
262		262
263	.menu .button	263	.menu .button
264	{	264	{
265	width: 5em;	265	width: 5em;
266	<?php	266	<?php
267	Mixins::transition('', 'width 0.5s 0.5s linear');	267	Mixins::transition('', 'width 0.5s 0.5s linear');
268	?>	268	?>
269	}	269	}
270		270
271	/* 0.5225s to 0.6475s */	271	/* 0.5225s to 0.6475s */
272	#bow-top-left {	272	#bow-top-left {
273	height: 0;	273	height: 0;
274	<?php	274	<?php
275	Mixins::transition('', 'height 0.125s 0.5225s linear');	275	Mixins::transition('', 'height 0.125s 0.5225s linear');
276	?>	276	?>
277	}	277	}
278		278
279	/* at 0.6475s */	279	/* at 0.6475s */
280	#bow-top .text {	280	#bow-top .text {
281	opacity: 0;	281	opacity: 0;
282	<?php	282	<?php
283	Mixins::transition('-property', 'opacity');	283	Mixins::transition('-property', 'opacity');
284	Mixins::transition('-delay', '0.6475s');	284	Mixins::transition('-delay', '0.6475s');
285	Mixins::transition('-timing-function', 'linear');	285	Mixins::transition('-timing-function', 'linear');
286	?>	286	?>
287	}	287	}
288		288
289	.empty #bow-top .text {	289	.empty #bow-top .text {
290	opacity: 1;	290	opacity: 1;
291	}	291	}
292		292
293	/* 0.6475s to 1.1475s */	293	/* 0.6475s to 1.1475s */
294	#bow-top {	294	#bow-top {
295	left: 100%;	295	left: 100%;
296	min-width: auto;	296	min-width: auto;
297	border-top-left-radius: 0;	297	border-top-left-radius: 0;
298	border-bottom-left-radius: 0;	298	border-bottom-left-radius: 0;
299	border-top-right-radius: 1.2em;	299	border-top-right-radius: 1.2em;
300	border-bottom-right-radius: 1.2em;	300	border-bottom-right-radius: 1.2em;
301	opacity: 0;	301	opacity: 0;
302	<?php	302	<?php
303	Mixins::transition('',	303	Mixins::transition('',
304	'left 0.5s 0.6475s linear,'	304	'left 0.5s 0.6475s linear,'
305	. ' min-width 0s 0.6475s linear,'	305	. ' min-width 0s 0.6475s linear,'
306	. ' border-top-left-radius 0.5s 0.6475s linear,'	306	. ' border-top-left-radius 0.5s 0.6475s linear,'
307	. ' border-top-right-radius 0.5s 0.6475s linear,'	307	. ' border-top-right-radius 0.5s 0.6475s linear,'
308	. ' border-bottom-right-radius 0.5s 0.6475s linear,'	308	. ' border-bottom-right-radius 0.5s 0.6475s linear,'
309	. ' opacity 0s 1.1475s linear');	309	. ' opacity 0s 1.1475s linear');
310	?>	310	?>
311	}	311	}
312		312
313	.empty #bow-top {	313	.empty #bow-top {
314	left: 0%;	314	left: 0%;
315	min-width: 10em;	315	min-width: 10em;
316	border-top-left-radius: 1.2em;	316	border-top-left-radius: 1.2em;
317	border-bottom-left-radius: 1.2em;	317	border-bottom-left-radius: 1.2em;
318	border-top-right-radius: 1.2em;	318	border-top-right-radius: 1.2em;
319	border-bottom-right-radius: 1.2em;	319	border-bottom-right-radius: 1.2em;
320	opacity: 1;	320	opacity: 1;
321	}	321	}
322		322
323	.multi-display	323	.multi-display
324	{	324	{
325	top: 0.2em;	325	top: 0.2em;
326	left: 0.2em;	326	left: 0.2em;
327	<?php	327	<?php
328	Mixins::transition('',	328	Mixins::transition('',
329	'top 0.25s 1.1475s linear,'	329	'top 0.25s 1.1475s linear,'
330	. ' left 0.25s 1.3975s linear');	330	. ' left 0.25s 1.3975s linear');
331	?>	331	?>
332	}	332	}
333		333
334	.menu .bow	334	.menu .bow
335	{	335	{
336	background-color: #fc6;	336	background-color: #fc6;
337	<?php	337	<?php
338	Mixins::transition('',	338	Mixins::transition('',
339	'width 0.5s 0.5s linear,'	339	'width 0.5s 0.5s linear,'
340	. 'background-color 0s 1.6475s linear'	340	. 'background-color 0s 1.6475s linear'
341	);	341	);
342	?>	342	?>
343	}	343	}
344		344
345	.multi-display .lower .bg	345	.multi-display .lower .bg
346	{	346	{
347	top: 11em;	347	top: 11em;
348	<?php	348	<?php
349	Mixins::transition('', 'top 0.25s 1.1475s linear');	349	Mixins::transition('', 'top 0.25s 1.1475s linear');
350	?>	350	?>
351	}	351	}
352		352
353	body {	353	body {
354	margin-top: 9.6em;	354	margin-top: 9.6em;
355	margin-left: 6.4em;	355	margin-left: 6.4em;
356	<?php	356	<?php
357	Mixins::transition('',	357	Mixins::transition('',
358	'margin-top 0.25s 1.1475s linear,'	358	'margin-top 0.25s 1.1475s linear,'
359	. ' margin-left 0.25s 1.3975s linear');	359	. ' margin-left 0.25s 1.3975s linear');
360	?>	360	?>
361	}	361	}
362		362
363	.multi-display .upper .content #cmd2,	363	.multi-display .upper .content #cmd2,
364	.multi-display .upper .content #cmd3	364	.multi-display .upper .content #cmd3
365	{	365	{
366	display: none;	366	display: none;
367	}	367	}
368		368
369	.multi-display .upper .content #cmd1,	369	.multi-display .upper .content #cmd1,
370	.multi-display .upper .content #cmd4	370	.multi-display .upper .content #cmd4
371	{	371	{
372	right: 0;	372	right: 0;
373	}	373	}
374		374
375	.multi-display .upper .content .analysis	375	.multi-display .upper .content .analysis
376	{	376	{
377	right: 5.2em;	377	right: 5.2em;
378	}	378	}
379		379
380	.multi-display .upper .content .commands	380	.multi-display .upper .content .commands
381	{	381	{
382	width: 5.2em;	382	width: 5.2em;
383	}	383	}
384	}	384	}
385		385
386	/* Mobile devices: HTC Sensation & friends */	386	/* Mobile devices: HTC Sensation & friends */
387	@media screen and (max-device-width: 540px) {	387	@media screen and (max-device-width: 540px) {
388	/*	388	/*
389	html,	389	html,
390	#LCARS,	390	#LCARS,
391	.multi-display	391	.multi-display
392	{	392	{
393	max-width: 540px;	393	max-width: 540px;
394	}	394	}
395	*/	395	*/
396	/* 0.5 to 0.5225s */	396	/* 0.5 to 0.5225s */
397	#connectors {	397	#connectors {
398	opacity: 0;	398	opacity: 0;
399	<?php	399	<?php
400	Mixins::transition('', 'opacity 0s 0.5s linear');	400	Mixins::transition('', 'opacity 0s 0.5s linear');
401	?>	401	?>
402	}	402	}
403		403
404	#bow-bottom {	404	#bow-bottom {
405	bottom: 2.6em;	405	bottom: 2.6em;
406	height: 0em;	406	height: 0em;
407	opacity: 0;	407	opacity: 0;
408	<?php	408	<?php
409	Mixins::transition('',	409	Mixins::transition('',
410	'bottom 0.0225s 0.5s linear,'	410	'bottom 0.0225s 0.5s linear,'
411	. ' height 0.0225s 0.5s linear,'	411	. ' height 0.0225s 0.5s linear,'
412	. ' opacity 0s 0.5225s linear');	412	. ' opacity 0s 0.5225s linear');
413	?>	413	?>
414	}	414	}
415		415
416	#bow #bottom {	416	#bow #bottom {
417	visibility: hidden;	417	visibility: hidden;
418	<?php	418	<?php
419	Mixins::transition('',	419	Mixins::transition('',
420	'visibility 0s 0.5225s linear');	420	'visibility 0s 0.5225s linear');
421	?>	421	?>
422	}	422	}
423		423
424	.menu-container	424	.menu-container
425	{	425	{
426	top: 11em;	426	top: 11em;
427	width: 5em;	427	width: 5em;
428	bottom: 0;	428	bottom: 0;
429	z-index: 1;	429	z-index: 1;
430	background-color: #fc6;	430	background-color: #fc6;
431	<?php	431	<?php
432	Mixins::transition('',	432	Mixins::transition('',
433	'top 0.5s 0.5s linear,'	433	'top 0.5s 0.5s linear,'
434	. ' width 0.5s 0.5s linear,'	434	. ' width 0.5s 0.5s linear,'
435	. ' bottom 0.5s 0.5s linear,'	435	. ' bottom 0.5s 0.5s linear,'
436	. ' background-color 0s 1s linear'	436	. ' background-color 0s 1s linear'
437	);	437	);
438	?>	438	?>
439	}	439	}
440		440
441	.menu {	441	.menu {
442	height: 21.8em;	442	height: 21.8em;
443	<?php	443	<?php
444	Mixins::transition('', 'height 0.5s 0.5s linear');	444	Mixins::transition('', 'height 0.5s 0.5s linear');
445	?>	445	?>
446	}	446	}
447		447
448	.menu ul:first-child {	448	.menu ul:first-child {
449	padding-top: 0;	449	padding-top: 0;
450	<?php	450	<?php
451	Mixins::transition('', 'padding-top 0.5s 0.5s linear');	451	Mixins::transition('', 'padding-top 0.5s 0.5s linear');
452	?>	452	?>
453	}	453	}
454		454
455	.menu .button	455	.menu .button
456	{	456	{
457	width: 5em;	457	width: 5em;
458	<?php	458	<?php
459	Mixins::transition('', 'width 0.5s 0.5s linear');	459	Mixins::transition('', 'width 0.5s 0.5s linear');
460	?>	460	?>
461	}	461	}
462		462
463	/* 0.5225s to 0.6475s */	463	/* 0.5225s to 0.6475s */
464	#bow-top-left {	464	#bow-top-left {
465	height: 0;	465	height: 0;
466	<?php	466	<?php
467	Mixins::transition('', 'height 0.125s 0.5225s linear');	467	Mixins::transition('', 'height 0.125s 0.5225s linear');
468	?>	468	?>
469	}	469	}
470		470
471	/* at 0.6475s */	471	/* at 0.6475s */
472	#bow-top .text {	472	#bow-top .text {
473	opacity: 0;	473	opacity: 0;
474	<?php	474	<?php
475	Mixins::transition('-property', 'opacity');	475	Mixins::transition('-property', 'opacity');
476	Mixins::transition('-delay', '0.6475s');	476	Mixins::transition('-delay', '0.6475s');
477	Mixins::transition('-timing-function', 'linear');	477	Mixins::transition('-timing-function', 'linear');
478	?>	478	?>
479	}	479	}
480		480
481	.empty #bow-top .text {	481	.empty #bow-top .text {
482	opacity: 1;	482	opacity: 1;
483	}	483	}
484		484
485	/* 0.6475s to 1.1475s */	485	/* 0.6475s to 1.1475s */
486	#bow-top {	486	#bow-top {
487	left: 100%;	487	left: 100%;
488	min-width: auto;	488	min-width: auto;
489	border-top-left-radius: 0;	489	border-top-left-radius: 0;
490	border-bottom-left-radius: 0;	490	border-bottom-left-radius: 0;
491	border-top-right-radius: 1.2em;	491	border-top-right-radius: 1.2em;
492	border-bottom-right-radius: 1.2em;	492	border-bottom-right-radius: 1.2em;
493	opacity: 0;	493	opacity: 0;
494	<?php	494	<?php
495	Mixins::transition('',	495	Mixins::transition('',
496	'left 0.5s 0.6475s linear,'	496	'left 0.5s 0.6475s linear,'
497	. ' min-width 0s 0.6475s linear,'	497	. ' min-width 0s 0.6475s linear,'
498	. ' border-top-left-radius 0.5s 0.6475s linear,'	498	. ' border-top-left-radius 0.5s 0.6475s linear,'
499	. ' border-top-right-radius 0.5s 0.6475s linear,'	499	. ' border-top-right-radius 0.5s 0.6475s linear,'
500	. ' border-bottom-right-radius 0.5s 0.6475s linear,'	500	. ' border-bottom-right-radius 0.5s 0.6475s linear,'

Subversion Repositories LCARS

(root)/trunk/styles/lcars-responsive.css - Rev 175 → 176