WebSVN - LCARS - Diff - Rev 122 and 123 - /trunk/styles/lcars-ani.css


<?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 */
\header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate');

/* 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');

require_once 'css/least/Mixins.php';
?>@charset "UTF-8";

/* 0.0 to 1.0 s */
<?php
  Mixins::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; */
}

/* 0.0 to 0.6 s */
<?php
  Mixins::keyframes('empty-content',
    'from {
       opacity: 0;
     }
     
     /* 0.6 s */
     99% {
       opacity: 0;
     }');
?>

.empty.fade-in #content {
  <?php
    Mixins::animation('-name', 'empty-content');
    Mixins::animation('-duration', '0.6s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

/*
time in s      |0.0                |0.5      |0.75     |1.0                |1.5
                                   :   |0.625   :      :       |1.25
                                   :   :  |0.63 |0.875
bow-top        |------------------>|   :  :  :  :  :  :  :
bow-top-left   |                   :-->|  :  :  :  :  :  :
bow-top-text   |------------------>|   :  :  :  :  :  :  :
menu-container |                   :   :->|  :  :  :  :  :
footer         |------------------>|   :  :  :  :  :  :  :
menu           |                   :   :->|  :  :  :  :  :
footer-text    |------------------>|      :  :  :  :  :  :
bow-bottom     |                          :> |  :  :  :  :
elbo-bg        |                           :>|  :  :  :
elbo           |                                :->|  :
elbo-border    |                                         :->|
content        |                                      :->|

1: bow-top-left

*/

/* 0.0 to 0.5 s */
<?php
  Mixins::keyframes('bow-top',
    'from {
       left: 90%;
       border-top-left-radius: 0;    
       border-bottom-left-radius: 0;    
       border-top-right-radius: 1.2em;
       border-bottom-right-radius: 1.2em;
     }');
?>
       
.fade-in #bow-top {
  <?php
    Mixins::animation('-name', 'bow-top');
    Mixins::animation('-duration', '0.5s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

/* 0.0 to 0.5 s */
<?php
  Mixins::keyframes('bow-top-text',
    'from {
       opacity: 0;
     }
   
     /* shortly before 1.0 s */
     99% {
       opacity: 0;
     }');
?>

.fade-in #bow-top .text {
  <?php
    Mixins::animation('-name', 'bow-top-text');
    Mixins::animation('-duration', '0.5s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

/* 0.0 to 0.5 s */
<?php
  Mixins::keyframes('footer',
    'from {
       left: 90%;
       border-top-left-radius: 0;    
       border-bottom-left-radius: 0;    
     }');
?>

.empty.fade-in #footer {
  <?php
    Mixins::animation('-name', 'footer');
    Mixins::animation('-duration', '0.5s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

/* 0.0 to 0.5 s */
<?php
  Mixins::keyframes('footer-text',
  'from {
     opacity: 0;
   }
 
   /* shortly before 0.5 s */
   99% {
     opacity: 0;
   }');
?>

.empty.fade-in #footer .text {
  <?php
    Mixins::animation('-name', 'footer-text');
    Mixins::animation('-duration', '0.5s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

/* 0.0 to 0.625s */
<?php
  Mixins::keyframes('bow-top-left',
    'from {
       height: 0;
     }

     /* at 0.5s */
     80% {
       height: 0;
     }');
?>
     
.fade-in #bow-top-left {
  <?php
    Mixins::animation('-name', 'bow-top-left');
    Mixins::animation('-duration', '0.625s');  
    Mixins::animation('-timing-function', 'linear');
  ?>  
}

/* 0.0 to 0.63s */
<?php
  Mixins::keyframes('menu-container', <<<CSS
    from {
      opacity: 0;
    }
   
    /* at ca. 0.61875s */
    98% {
      opacity: 0;
    }    
CSS
   );
?>

.fade-in .menu-container {
  <?php
    Mixins::animation('-name', 'menu-container');
    Mixins::animation('-duration', '0.63s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

/* 0.0 to 0.63s */
<?php
  Mixins::keyframes('menu', <<<CSS
    from {
      opacity: 0;
    }
     
    /* at ca. 0.61875 s */
    98% {
      opacity: 0;
    }
CSS
   );
?>

.fade-in .menu
{
  <?php
    Mixins::animation('-name', 'menu');
    Mixins::animation('-duration', '0.63s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

/* 0.0 to 0.75s */
<?php
  Mixins::keyframes('bow-bottom', <<<CSS
    from {
      bottom: 2.6em;
      height: 0em;
      opacity: 0;
    }

    /* 0.64125 s */
    83%, 97% {
      bottom: 2.6em;
      width: 0em;
      height: 0em;
      opacity: 1;
    }
CSS
   );
?>

.fade-in #bow-bottom {
  <?php
    Mixins::animation('-name', 'bow-bottom');
    Mixins::animation('-duration', '0.75s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

/* 0.0 to 0.875s */
<?php
  Mixins::keyframes('elbo-bg', <<<CSS
    from {
      opacity: 0;
    }

    99% {
      opacity: 0;
    }
CSS
   );
?>

.fade-in .multi-display .upper .elbo-button,
.fade-in .multi-display .lower .bg
{
  <?php
    Mixins::animation('-name', 'elbo-bg');
    Mixins::animation('-duration', '0.75s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

/* 0.0 to 0.875 */
<?php
  Mixins::keyframes('elbo', <<<CSS
    from {
      opacity: 0;
    }

    99% {
      opacity: 0;
    }
CSS
   );
?>

.fade-in .multi-display .elbo {
  <?php
    Mixins::animation('-name', 'elbo');
    Mixins::animation('-duration', '0.875s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

/* 0.0 to 1s */
<?php
  Mixins::keyframes('elbo-border', <<<CSS
    from {
      opacity: 0;
    }

    /* 0.99 s */
    99% {
      opacity: 0;
    }
CSS
   );
?>

.fade-in .multi-display .border
{
  <?php
    Mixins::animation('-name', 'elbo-border');
    Mixins::animation('-duration', '1s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}

/* 0.0 to 1.125s */
<?php
  Mixins::keyframes('content', <<<CSS
    from {
      opacity: 0;
    }
   
    99% {
      opacity: 0;
    }
CSS
   );
?>

.fade-in .multi-display .upper .content,
.fade-in #connectors,
.fade-in #content
{
  <?php
    Mixins::animation('-name', 'content');
    Mixins::animation('-duration', '1.125s');
    Mixins::animation('-timing-function', 'linear');
  ?>
}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Rev 122	Rev 123
1	<?php	1	<?php
2	namespace de\pointedears\css\least;	2	namespace de\pointedears\css\least;
3		3
4	\header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');	4	\header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');
5		5
6	/* Resource expires in HTTP/1.1 caches 24h after last retrieval */	6	/* Resource expires in HTTP/1.1 caches 24h after last retrieval */
7	\header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate');	7	\header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate');
8		8
9	/* Resource expires in HTTP/1.0 caches 24h after last retrieval */	9	/* Resource expires in HTTP/1.0 caches 24h after last retrieval */
10	\header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT');	10	\header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT');
11		11
12	\header('Content-Type: text/css; charset=UTF-8');	12	\header('Content-Type: text/css; charset=UTF-8');
13		13
14	require_once 'css/least/Mixins.php';	14	require_once 'css/least/Mixins.php';
15	?>@charset "UTF-8";	15	?>@charset "UTF-8";
16		16
17	/* 0.0 to 1.0 s */	17	/* 0.0 to 1.0 s */
18	<?php	18	<?php
19	Mixins::keyframes('fade-in',	19	Mixins::keyframes('fade-in',
20	'from {	20	'from {
21	opacity: 0;	21	opacity: 0;
22	}	22	}
23		23
24	/* at 0.25 s */	24	/* at 0.25 s */
25	25% {	25	25% {
26	opacity: 0;	26	opacity: 0;
27	}	27	}
28		28
29	to {	29	to {
30	opacity: 1;	30	opacity: 1;
31	}');	31	}');
32	?>	32	?>
33		33
34	body.fade-in {	34	body.fade-in {
35	/* TODO: Step-by-step display instead */	35	/* TODO: Step-by-step display instead */
36	/-webkit-animation-name: fade-in;/	36	/-webkit-animation-name: fade-in;/
37	/* -webkit-animation-iteration-count: infinite; */	37	/* -webkit-animation-iteration-count: infinite; */
38	}	38	}
39		39
40	/* 0.0 to 0.6 s */	40	/* 0.0 to 0.6 s */
41	<?php	41	<?php
42	Mixins::keyframes('empty-content',	42	Mixins::keyframes('empty-content',
43	'from {	43	'from {
44	opacity: 0;	44	opacity: 0;
45	}	45	}
46		46
47	/* 0.6 s */	47	/* 0.6 s */
48	99% {	48	99% {
49	opacity: 0;	49	opacity: 0;
50	}');	50	}');
51	?>	51	?>
52		52
53	.empty.fade-in #content {	53	.empty.fade-in #content {
54	<?php	54	<?php
55	Mixins::animation('-name', 'empty-content');	55	Mixins::animation('-name', 'empty-content');
56	Mixins::animation('-duration', '0.6s');	56	Mixins::animation('-duration', '0.6s');
57	Mixins::animation('-timing-function', 'linear');	57	Mixins::animation('-timing-function', 'linear');
58	?>	58	?>
59	}	59	}
60		60
61	/*	61	/*
62	time in s \|0.0 \|0.5 \|0.75 \|1.0 \|1.5	62	time in s \|0.0 \|0.5 \|0.75 \|1.0 \|1.5
63	: \|0.625 : : \|1.25	63	: \|0.625 : : \|1.25
64	: : \|0.63 \|0.875	64	: : \|0.63 \|0.875
65	bow-top \|------------------>\| : : : : : : :	65	bow-top \|------------------>\| : : : : : : :
66	bow-top-left \| :-->\| : : : : : :	66	bow-top-left \| :-->\| : : : : : :
67	bow-top-text \|------------------>\| : : : : : : :	67	bow-top-text \|------------------>\| : : : : : : :
68	menu-container \| : :->\| : : : : :	68	menu-container \| : :->\| : : : : :
69	footer \|------------------>\| : : : : : : :	69	footer \|------------------>\| : : : : : : :
70	menu \| : :->\| : : : : :	70	menu \| : :->\| : : : : :
71	footer-text \|------------------>\| : : : : : :	71	footer-text \|------------------>\| : : : : : :
72	bow-bottom \| :> \| : : : :	72	bow-bottom \| :> \| : : : :
73	elbo-bg \| :>\| : : :	73	elbo-bg \| :>\| : : :
74	elbo \| :->\| :	74	elbo \| :->\| :
75	elbo-border \| :->\|	75	elbo-border \| :->\|
76	content \| :->\|	76	content \| :->\|
77		77
78	1: bow-top-left	78	1: bow-top-left
79		79
80	*/	80	*/
81		81
82	/* 0.0 to 0.5 s */	82	/* 0.0 to 0.5 s */
83	<?php	83	<?php
84	Mixins::keyframes('bow-top',	84	Mixins::keyframes('bow-top',
85	'from {	85	'from {
86	left: 90%;	86	left: 90%;
87	border-top-left-radius: 0;	87	border-top-left-radius: 0;
88	border-bottom-left-radius: 0;	88	border-bottom-left-radius: 0;
89	border-top-right-radius: 1.2em;	89	border-top-right-radius: 1.2em;
90	border-bottom-right-radius: 1.2em;	90	border-bottom-right-radius: 1.2em;
91	}');	91	}');
92	?>	92	?>
93		93
94	.fade-in #bow-top {	94	.fade-in #bow-top {
95	<?php	95	<?php
96	Mixins::animation('-name', 'bow-top');	96	Mixins::animation('-name', 'bow-top');
97	Mixins::animation('-duration', '0.5s');	97	Mixins::animation('-duration', '0.5s');
98	Mixins::animation('-timing-function', 'linear');	98	Mixins::animation('-timing-function', 'linear');
99	?>	99	?>
100	}	100	}
101		101
102	/* 0.0 to 0.5 s */	102	/* 0.0 to 0.5 s */
103	<?php	103	<?php
104	Mixins::keyframes('bow-top-text',	104	Mixins::keyframes('bow-top-text',
105	'from {	105	'from {
106	opacity: 0;	106	opacity: 0;
107	}	107	}
108		108
109	/* shortly before 1.0 s */	109	/* shortly before 1.0 s */
110	99% {	110	99% {
111	opacity: 0;	111	opacity: 0;
112	}');	112	}');
113	?>	113	?>
114		114
115	.fade-in #bow-top .text {	115	.fade-in #bow-top .text {
116	<?php	116	<?php
117	Mixins::animation('-name', 'bow-top-text');	117	Mixins::animation('-name', 'bow-top-text');
118	Mixins::animation('-duration', '0.5s');	118	Mixins::animation('-duration', '0.5s');
119	Mixins::animation('-timing-function', 'linear');	119	Mixins::animation('-timing-function', 'linear');
120	?>	120	?>
121	}	121	}
122		122
123	/* 0.0 to 0.5 s */	123	/* 0.0 to 0.5 s */
124	<?php	124	<?php
125	Mixins::keyframes('footer',	125	Mixins::keyframes('footer',
126	'from {	126	'from {
127	left: 90%;	127	left: 90%;
128	border-top-left-radius: 0;	128	border-top-left-radius: 0;
129	border-bottom-left-radius: 0;	129	border-bottom-left-radius: 0;
130	}');	130	}');
131	?>	131	?>
132		132
133	.empty.fade-in #footer {	133	.empty.fade-in #footer {
134	<?php	134	<?php
135	Mixins::animation('-name', 'footer');	135	Mixins::animation('-name', 'footer');
136	Mixins::animation('-duration', '0.5s');	136	Mixins::animation('-duration', '0.5s');
137	Mixins::animation('-timing-function', 'linear');	137	Mixins::animation('-timing-function', 'linear');
138	?>	138	?>
139	}	139	}
140		140
141	/* 0.0 to 0.5 s */	141	/* 0.0 to 0.5 s */
142	<?php	142	<?php
143	Mixins::keyframes('footer-text',	143	Mixins::keyframes('footer-text',
144	'from {	144	'from {
145	opacity: 0;	145	opacity: 0;
146	}	146	}
147		147
148	/* shortly before 0.5 s */	148	/* shortly before 0.5 s */
149	99% {	149	99% {
150	opacity: 0;	150	opacity: 0;
151	}');	151	}');
152	?>	152	?>
153		153
154	.empty.fade-in #footer .text {	154	.empty.fade-in #footer .text {
155	<?php	155	<?php
156	Mixins::animation('-name', 'footer-text');	156	Mixins::animation('-name', 'footer-text');
157	Mixins::animation('-duration', '0.5s');	157	Mixins::animation('-duration', '0.5s');
158	Mixins::animation('-timing-function', 'linear');	158	Mixins::animation('-timing-function', 'linear');
159	?>	159	?>
160	}	160	}
161		161
162	/* 0.0 to 0.625s */	162	/* 0.0 to 0.625s */
163	<?php	163	<?php
164	Mixins::keyframes('bow-top-left',	164	Mixins::keyframes('bow-top-left',
165	'from {	165	'from {
166	height: 0;	166	height: 0;
167	}	167	}
168		168
169	/* at 0.5s */	169	/* at 0.5s */
170	80% {	170	80% {
171	height: 0;	171	height: 0;
172	}');	172	}');
173	?>	173	?>
174		174
175	.fade-in #bow-top-left {	175	.fade-in #bow-top-left {
176	<?php	176	<?php
177	Mixins::animation('-name', 'bow-top-left');	177	Mixins::animation('-name', 'bow-top-left');
178	Mixins::animation('-duration', '0.625s');	178	Mixins::animation('-duration', '0.625s');
179	Mixins::animation('-timing-function', 'linear');	179	Mixins::animation('-timing-function', 'linear');
180	?>	180	?>
181	}	181	}
182		182
183	/* 0.0 to 0.63s */	183	/* 0.0 to 0.63s */
184	<?php	184	<?php
185	Mixins::keyframes('menu-container', <<<CSS	185	Mixins::keyframes('menu-container', <<<CSS
186	from {	186	from {
187	opacity: 0;	187	opacity: 0;
188	}	188	}
189		189
190	/* at ca. 0.61875s */	190	/* at ca. 0.61875s */
191	98% {	191	98% {
192	opacity: 0;	192	opacity: 0;
193	}	193	}
194	CSS	194	CSS
195	);	195	);
196	?>	196	?>
197		197
198	.fade-in .menu-container {	198	.fade-in .menu-container {
199	<?php	199	<?php
200	Mixins::animation('-name', 'menu-container');	200	Mixins::animation('-name', 'menu-container');
201	Mixins::animation('-duration', '0.63s');	201	Mixins::animation('-duration', '0.63s');
202	Mixins::animation('-timing-function', 'linear');	202	Mixins::animation('-timing-function', 'linear');
203	?>	203	?>
204	}	204	}
205		205
206	/* 0.0 to 0.63s */	206	/* 0.0 to 0.63s */
207	<?php	207	<?php
208	Mixins::keyframes('menu', <<<CSS	208	Mixins::keyframes('menu', <<<CSS
209	from {	209	from {
210	opacity: 0;	210	opacity: 0;
211	}	211	}
212		212
213	/* at ca. 0.61875 s */	213	/* at ca. 0.61875 s */
214	98% {	214	98% {
215	opacity: 0;	215	opacity: 0;
216	}	216	}
217	CSS	217	CSS
218	);	218	);
219	?>	219	?>
220		220
221	.fade-in .menu	221	.fade-in .menu
222	{	222	{
223	<?php	223	<?php
224	Mixins::animation('-name', 'menu');	224	Mixins::animation('-name', 'menu');
225	Mixins::animation('-duration', '0.63s');	225	Mixins::animation('-duration', '0.63s');
226	Mixins::animation('-timing-function', 'linear');	226	Mixins::animation('-timing-function', 'linear');
227	?>	227	?>
228	}	228	}
229		229
230	/* 0.0 to 0.75s */	230	/* 0.0 to 0.75s */
231	<?php	231	<?php
232	Mixins::keyframes('bow-bottom', <<<CSS	232	Mixins::keyframes('bow-bottom', <<<CSS
233	from {	233	from {
234	bottom: 2.6em;	234	bottom: 2.6em;
235	height: 0em;	235	height: 0em;
236	opacity: 0;	236	opacity: 0;
237	}	237	}
238		238
239	/* 0.64125 s */	239	/* 0.64125 s */
240	83%, 97% {	240	83%, 97% {
241	bottom: 2.6em;	241	bottom: 2.6em;
242	width: 0em;	242	width: 0em;
243	height: 0em;	243	height: 0em;
244	opacity: 1;	244	opacity: 1;
245	}	245	}
246	CSS	246	CSS
247	);	247	);
248	?>	248	?>
249		249
250	.fade-in #bow-bottom {	250	.fade-in #bow-bottom {
251	<?php	251	<?php
252	Mixins::animation('-name', 'bow-bottom');	252	Mixins::animation('-name', 'bow-bottom');
253	Mixins::animation('-duration', '0.75s');	253	Mixins::animation('-duration', '0.75s');
254	Mixins::animation('-timing-function', 'linear');	254	Mixins::animation('-timing-function', 'linear');
255	?>	255	?>
256	}	256	}
257		257
258	/* 0.0 to 0.875s */	258	/* 0.0 to 0.875s */
259	<?php	259	<?php
260	Mixins::keyframes('elbo-bg', <<<CSS	260	Mixins::keyframes('elbo-bg', <<<CSS
261	from {	261	from {
262	opacity: 0;	262	opacity: 0;
263	}	263	}
264		264
265	99% {	265	99% {
266	opacity: 0;	266	opacity: 0;
267	}	267	}
268	CSS	268	CSS
269	);	269	);
270	?>	270	?>
271		271
272	.fade-in .multi-display .upper .elbo-button,	272	.fade-in .multi-display .upper .elbo-button,
273	.fade-in .multi-display .lower .bg	273	.fade-in .multi-display .lower .bg
274	{	274	{
275	<?php	275	<?php
276	Mixins::animation('-name', 'elbo-bg');	276	Mixins::animation('-name', 'elbo-bg');
277	Mixins::animation('-duration', '0.75s');	277	Mixins::animation('-duration', '0.75s');
278	Mixins::animation('-timing-function', 'linear');	278	Mixins::animation('-timing-function', 'linear');
279	?>	279	?>
280	}	280	}
281		281
282	/* 0.0 to 0.875 */	282	/* 0.0 to 0.875 */
283	<?php	283	<?php
284	Mixins::keyframes('elbo', <<<CSS	284	Mixins::keyframes('elbo', <<<CSS
285	from {	285	from {
286	opacity: 0;	286	opacity: 0;
287	}	287	}
288		288
289	99% {	289	99% {
290	opacity: 0;	290	opacity: 0;
291	}	291	}
292	CSS	292	CSS
293	);	293	);
294	?>	294	?>
295		295
296	.fade-in .multi-display .elbo {	296	.fade-in .multi-display .elbo {
297	<?php	297	<?php
298	Mixins::animation('-name', 'elbo');	298	Mixins::animation('-name', 'elbo');
299	Mixins::animation('-duration', '0.875s');	299	Mixins::animation('-duration', '0.875s');
300	Mixins::animation('-timing-function', 'linear');	300	Mixins::animation('-timing-function', 'linear');
301	?>	301	?>
302	}	302	}
303		303
304	/* 0.0 to 1s */	304	/* 0.0 to 1s */
305	<?php	305	<?php
306	Mixins::keyframes('elbo-border', <<<CSS	306	Mixins::keyframes('elbo-border', <<<CSS
307	from {	307	from {
308	opacity: 0;	308	opacity: 0;
309	}	309	}
310		310
311	/* 0.99 s */	311	/* 0.99 s */
312	99% {	312	99% {
313	opacity: 0;	313	opacity: 0;
314	}	314	}
315	CSS	315	CSS
316	);	316	);
317	?>	317	?>
318		318
319	.fade-in .multi-display .border	319	.fade-in .multi-display .border
320	{	320	{
321	<?php	321	<?php
322	Mixins::animation('-name', 'elbo-border');	322	Mixins::animation('-name', 'elbo-border');
323	Mixins::animation('-duration', '1s');	323	Mixins::animation('-duration', '1s');
324	Mixins::animation('-timing-function', 'linear');	324	Mixins::animation('-timing-function', 'linear');
325	?>	325	?>
326	}	326	}
327		327
328	/* 0.0 to 1.125s */	328	/* 0.0 to 1.125s */
329	<?php	329	<?php
330	Mixins::keyframes('content', <<<CSS	330	Mixins::keyframes('content', <<<CSS
331	from {	331	from {
332	opacity: 0;	332	opacity: 0;
333	}	333	}
334		334
335	99% {	335	99% {
336	opacity: 0;	336	opacity: 0;
337	}	337	}
338	CSS	338	CSS
339	);	339	);
340	?>	340	?>
341		341
342	.fade-in .multi-display .upper .content,	342	.fade-in .multi-display .upper .content,
343	.fade-in #connectors,	343	.fade-in #connectors,
344	.fade-in #content	344	.fade-in #content
345	{	345	{
346	<?php	346	<?php
347	Mixins::animation('-name', 'content');	347	Mixins::animation('-name', 'content');
348	Mixins::animation('-duration', '1.125s');	348	Mixins::animation('-duration', '1.125s');
349	Mixins::animation('-timing-function', 'linear');	349	Mixins::animation('-timing-function', 'linear');
350	?>	350	?>
351	}	351	}
352		-
353	<?php	-
354	Mixins::keyframes('analysis', <<<CSS	-
355	from, 74% {	-
356	opacity: 0;	-
357	}	-
358		-
359	75%, to {	-
360	opacity: 1;	-
361	color: #fc6;	-
362	}	-
363	CSS	-
364	);	-
365	?>	-
366		-
367	<?php	-
368	Mixins::keyframes('analysis-scan', <<<CSS	-
369	from, 25% {	-
370	color: #fc6;	-
371	}	-
372		-
373	26%, to {	-
374	color: #fff;	-
375	}	-
376	CSS	-
377	);	-
378		-
379	/* FIXME: :hover hides first row */	-
380	?>	-
381	/*	-
382	.multi-display .upper .content .analysis tr {	-
383	<?php	-
384	Mixins::animation('-play-state', 'running');	-
385	?>	-
386	}	-
387		-
388	.multi-display .upper .content .analysis:hover tr {	-
389	<?php	-
390	Mixins::animation('-play-state', 'paused');	-
391	?>	-
392	}	-
393	*/	-
394	/* Blink rate 1 Hz should be safe for people with photosensitive epilepsy */	-
395	.multi-display .upper .content .analysis tr:nth-child(1) th,	-
396	.multi-display .upper .content .analysis tr:nth-child(1) td	-
397	{	-
398	<?php	-
399	Mixins::animation('', 'analysis 1.5s linear 0s, analysis-scan 4s linear 2.0s infinite');	-
400	?>	-
401	}	-
402		-
403	.multi-display .upper .content .analysis tr:nth-child(2) th,	-
404	.multi-display .upper .content .analysis tr:nth-child(2) td	-
405	{	-
406	<?php	-
407	Mixins::animation('', 'analysis 1.5s linear 0.25s, analysis-scan 4s linear 3.0s infinite');	-
408	?>	-
409	}	-
410		-
411	.multi-display .upper .content .analysis tr:nth-child(3) th,	-
412	.multi-display .upper .content .analysis tr:nth-child(3) td	-
413	{	-
414	<?php	-
415	Mixins::animation('', 'analysis 1.5s linear 0.5s, analysis-scan 4s linear 4.0s infinite');	-
416	?>	-
417	}	-
418		352

Subversion Repositories LCARS

(root)/trunk/styles/lcars-ani.css @ 220 - Rev 122 → 123