WebSVN - LCARS - Blame - Rev 122 - /trunk/styles/lcars-ani.css

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

Subversion Repositories LCARS

(root)/trunk/styles/lcars-ani.css @ 228 - Rev 122