WebSVN - LCARS - Blame - Rev 120 - /branches/live/styles/lcars22.css

Rev	Author	Line No.	Line
50	PointedEar	1	<?php
119	PointedEar	2	namespace de\pointedears\css\least;
		3
58	PointedEar	4	\header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');
50	PointedEar	5
116	PointedEar	6	/* Resource expires in HTTP/1.1 caches 24h after last retrieval */
117	PointedEar	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');
58	PointedEar	11
50	PointedEar	12	\header('Content-Type: text/css; charset=UTF-8');
119	PointedEar	13
		14	require_once 'css/least/Mixins.php';
79	PointedEar	15	?>@charset "UTF-8";
37	PointedEar	16
58	PointedEar	17	<?php
		18	if (!isset($_GET['ani']) \|\| $_GET['ani'] !== '0')
		19	{
		20	?>
79	PointedEar	21	@import url("/styles/lcars-ani.css");
58	PointedEar	22	<?php
		23	}
		24	?>
119	PointedEar	25	/* FIXME: Does not work */
		26	/* @import url("/styles/lcars-responsive.css"); */
50	PointedEar	27
37	PointedEar	28	body {
		29	margin-top: 12em;
119	PointedEar	30	margin-left: 16.8em;
37	PointedEar	31	margin-right: 0.2em;
		32	margin-bottom: 0.2em;
		33	}
		34
116	PointedEar	35	/* HTML5 elements */
		36
		37	nav
		38	{
		39	display: block;
		40	}
		41
37	PointedEar	42	/* Bow (main) and elbo (multi-view) */
		43
		44	#LCARS {
		45	position: fixed;
		46	left: 0;
		47	top: 0;
		48	right: 0;
		49	padding: 0.2em;
		50	background-color: #000;
		51	z-index: 1701;
		52	}
		53
		54	#bow {
		55	position: absolute;
		56	left: 0.2em;
		57	top: 0.2em;
		58	right: 0.2em;
		59	height: 2.4em;
		60	padding-bottom: 0.2em;
		61	background-color: #000;
		62	}
		63
		64	#bow-top {
		65	/* NOTE: position: absolute is needed for animation */
		66	position: absolute;
		67	top: 0;
		68	left: 0;
		69	right: 0;
		70	min-width: 15.4em;
		71	height: 2em;
		72	background-color: #999;
		73	border-top-left-radius: 2.4em;
		74	border-top-right-radius: 1.2em;
		75	border-bottom-right-radius: 1.2em;
		76	line-height: 0.9;
		77	}
		78
		79	.empty #bow-top {
		80	border-top-left-radius: 1.2em;
		81	border-bottom-left-radius: 1.2em;
38	PointedEar	82	min-width: 10em;
37	PointedEar	83	}
		84
		85
		86	#bow-top .text {
		87	position: absolute;
		88	margin: 0;
		89	left: 4.33em;
		90	top: 0;
40	PointedEar	91	right: 0.75em;
37	PointedEar	92	height: 1em;
		93	text-align: right;
		94	color: #fc0;
		95	font-size: 2.4em;
		96	padding-right: 0.1em;
		97	overflow: hidden;
		98	text-overflow: ellipsis;
		99	}
		100
38	PointedEar	101	.empty #bow-top .text {
		102	left: 0.93em;
		103	}
		104
37	PointedEar	105
		106
		107	#bow-top .text span {
		108	padding-right: 0.1em;
		109	background-color: #000;
		110	padding-left: 0.1em;
		111	text-transform: uppercase;
		112	white-space: nowrap;
		113	}
		114
38	PointedEar	115	.empty #footer-container {
		116	position: fixed;
		117	left: 0.2em;
		118	bottom: 0;
		119	right: 0.2em;
		120	min-height: 2.4em;
		121	padding-top: 0.2em;
		122	padding-bottom: 0.2em;
		123	background-color: #000;
		124	}
		125
40	PointedEar	126
38	PointedEar	127	.empty #footer {
		128	position: absolute;
		129	bottom: 0;
		130	left: 0;
		131	right: 0;
		132	height: 2em;
40	PointedEar	133	min-width: 10em;
38	PointedEar	134	margin-bottom: 0.2em;
		135	background-color: #999;
		136	border-radius: 1.2em;
40	PointedEar	137	line-height: 0.9;
38	PointedEar	138	}
		139
		140	.empty #footer .text {
		141	position: absolute;
40	PointedEar	142	margin: 0;
		143	left: 0.93em;
		144	top: 0;
		145	right: 0.75em;
		146	height: 1em;
		147	background-color: transparent;
38	PointedEar	148	color: #fc0;
40	PointedEar	149	font-size: 2.4em;
38	PointedEar	150	padding-right: 0.1em;
		151	overflow: hidden;
		152	text-overflow: ellipsis;
		153	}
		154
		155	.empty #footer .text span {
		156	padding-right: 0.1em;
40	PointedEar	157	background-color: #000;
38	PointedEar	158	padding-left: 0.1em;
		159	text-transform: uppercase;
		160	white-space: nowrap;
		161	}
		162
37	PointedEar	163	.empty .separator-left {
		164	position: absolute;
		165	left: 2em;
		166	height: 2em;
		167	width: 0.25em;
		168	background-color: #000;
		169	}
		170
		171	.empty .separator-right {
		172	position: absolute;
		173	right: 2em;
		174	height: 2em;
		175	width: 0.25em;
		176	background-color: #000;
		177	}
		178
58	PointedEar	179	.bow {
		180	background-color: #999;
		181	}
		182
37	PointedEar	183	#bow-top-left {
		184	position: absolute;
		185	top: 2em;
		186	left: 0;
		187	right: 0;
109	PointedEar	188	height: 4.4em;
37	PointedEar	189	width: 9.2em;
		190	background-color: #999;
109	PointedEar	191	overflow: hidden;
37	PointedEar	192	}
		193
		194	.empty #bow-top-left {
		195	display: none;
		196	}
		197
		198	#bow-top-left .concave {
		199	position: absolute;
		200	top: 0;
		201	left: 8em;
109	PointedEar	202	height: 4.4em;
37	PointedEar	203	width: 1.2em;
		204	background-color: #000;
		205	border-top-left-radius: 1.2em;
		206	}
		207
		208	.empty #bow-top-left-concave {
		209	display: none;
		210	}
		211
50	PointedEar	212	.menu-container {
43	PointedEar	213	position: fixed;
		214	left: 0.2em;
109	PointedEar	215	top: 6.8em;
43	PointedEar	216	width: 8em;
		217	bottom: 2.8em;
		218	background-color: #999;
37	PointedEar	219	overflow: auto;
109	PointedEar	220	overflow-x: hidden;
		221	overflow-y: auto;
37	PointedEar	222	}
		223
50	PointedEar	224	.menu
43	PointedEar	225	{
109	PointedEar	226	height: 20em;
43	PointedEar	227	background-color: #000;
		228	}
		229
		230	.menu ul {
103	PointedEar	231	margin: 0 0.2em 0 0;
37	PointedEar	232	padding: 0;
		233	}
		234
43	PointedEar	235	.menu li {
37	PointedEar	236	margin: 0;
		237	}
		238
		239	#bow #bottom
		240	{
		241	position: fixed;
		242	left: 0;
		243	bottom: 0;
119	PointedEar	244	width: 10.4em;
37	PointedEar	245	height: 2.4em;
		246	background-color: #000;
		247	z-index: 1701;
		248	}
		249
		250	#bow-bottom {
		251	position: absolute;
		252	bottom: 0.2em;
		253	left: 0.2em;
119	PointedEar	254	width: 8em;
		255	height: 2.6em;
		256	border-bottom-left-radius: 0em;
		257	border-bottom-right-radius: 0em;
37	PointedEar	258	background-color: #999;
		259	}
		260
		261	.empty #bow-bottom {
		262	display: none;
		263	}
		264
		265	#bow-bottom .concave {
		266	position: absolute;
		267	margin-left: 0.2em;
		268	margin-bottom: 0.2em;
		269	bottom: 0.3em;
		270	left: 7.8em;
		271	height: 2.1em;
119	PointedEar	272	width: 2.2em;
37	PointedEar	273	border-bottom-left-radius: 1.2em;
		274	border-bottom-right-radius: 1em;
		275	background-color: #000;
		276	}
		277
38	PointedEar	278	#bow-bottom .spacer {
37	PointedEar	279	position: absolute;
38	PointedEar	280	left: 10.2em;
94	PointedEar	281	bottom: 0;
38	PointedEar	282	width: 0.2em;
		283	height: 0.5em;
		284	background-color: black;
37	PointedEar	285	}
		286
38	PointedEar	287	.empty #bow-bottom-left-concave {
		288	display: none;
37	PointedEar	289	}
		290
		291	/* Controls */
		292
		293	.button:visited,
		294	.button
		295	{
		296	position: relative;
		297	display: inline-block;
		298	margin-right: 0.2em;
		299	margin-bottom: 0.2em;
		300	width: 5em;
		301	height: 2em;
		302	background-color: #7d7d7d; /* c9c */
		303	color: #000 !important;
		304	text-decoration: none !important;
		305	text-transform: uppercase;
		306	overflow: hidden;
83	PointedEar	307	cursor: pointer !important;
37	PointedEar	308	}
		309
		310	.button .text {
		311	position: absolute;
		312	bottom: 0;
		313	right: 0.5em;
83	PointedEar	314	cursor: pointer !important;
37	PointedEar	315	}
		316
		317	.button.command {
		318	border-radius: 1.2em;
		319	}
		320
		321	.button.command .text {
		322	position: absolute;
		323	bottom: 0;
		324	right: 1em;
		325	}
		326
		327	.button:hover,
		328	.button:focus,
		329	.button.selected:hover,
		330	.button.selected:focus,
		331	.group .button:hover,
		332	.group .button:focus,
		333	.group .button:visited:hover,
		334	.group .button:visited:focus
		335	{
		336	background-color: #f90 !important;
		337	color: #000 !important;
		338	}
		339
		340	.button:active,
		341	.button.selected:active,
		342	.group .button:active,
		343	.group .button:visited:active
		344	{
		345	background-color: #fff !important;
		346	color: #000 !important;
		347	}
		348
43	PointedEar	349	.menu .button {
37	PointedEar	350	display: block;
		351	width: 8em;
		352	height: 1em;
		353	line-height: 1;
		354	background-color: #9cf;
		355	color: #000 !important;
50	PointedEar	356	text-overflow: ellipsis;
		357	white-space: nowrap;
37	PointedEar	358	}
		359
58	PointedEar	360	#connectors {
		361	position: fixed;
		362	left: 8.4em;
		363	top: 5.6em;
		364	}
		365
119	PointedEar	366	#connectors div {
		367	position: absolute;
		368	}
		369
		370	#connectors .top {
		371	top: 0;
		372	height: 1em;
		373	}
		374
		375	#connectors .mid {
		376	top: 13.6em;
		377	height: 0.8em;
		378	}
		379
		380	#connectors .left {
		381	left: 0;
		382	width: 2em;
		383	}
		384
		385	#connectors .right {
		386	left: 2.2em;
		387	width: 0em;
		388	}
		389
37	PointedEar	390	.multi-display
		391	{
		392	position: fixed;
74	PointedEar	393	top: 2.6em;
119	PointedEar	394	left: 10.6em;
94	PointedEar	395	right: 0;
37	PointedEar	396	}
		397
		398	.multi-display .button
		399	{
		400	width: 5em !important;
		401	}
		402
		403	.multi-display .upper
		404	{
		405	position: absolute;
		406	top: 0;
		407	left: 0;
		408	right: 0;
94	PointedEar	409	height: 7.5em;
37	PointedEar	410	padding-right: 0.2em;
		411	background-color: black;
		412	}
		413
74	PointedEar	414	.multi-display .upper .content
72	PointedEar	415	{
		416	position: absolute;
		417	top: 0;
74	PointedEar	418	left: 6em;
94	PointedEar	419	bottom: 1.3em;
72	PointedEar	420	right: 0.2em;
		421	background-color: black;
		422	color: white;
74	PointedEar	423	text-align: right;
		424	overflow: hidden;
		425	text-overflow: ellipsis;
		426	}
		427
		428	.multi-display .upper .content .title
		429	{
		430	position: absolute;
		431	top: 0;
94	PointedEar	432	left: 0;
74	PointedEar	433	height: 1em;
94	PointedEar	434	right: 0;
74	PointedEar	435	background-color: black;
		436	color: white;
72	PointedEar	437	font-size: 2.4em;
		438	text-transform: uppercase;
		439	text-align: right;
74	PointedEar	440	overflow: hidden;
72	PointedEar	441	}
		442
74	PointedEar	443	.multi-display .upper .content .title span
37	PointedEar	444	{
74	PointedEar	445	white-space: nowrap;
		446	}
		447
90	PointedEar	448	.multi-display .upper .content .analysis {
		449	position: absolute;
		450	top: 2.4em;
		451	bottom: 0;
		452	right: 11em;
		453	left: 0;
		454	overflow: hidden;
		455	text-align: left;
118	PointedEar	456	cursor: default;
90	PointedEar	457	}
		458
118	PointedEar	459	.multi-display .upper .content .analysis table {
		460	border-collapse: collapse;
		461	line-height: 1.2;
119	PointedEar	462	max-width: 100%;
118	PointedEar	463	}
		464
		465	.multi-display .upper .content .analysis th {
120	PointedEar	466	padding: 0 0.4em 0 0.1em;
118	PointedEar	467	font-weight: normal;
		468	text-align: left;
		469	text-transform: uppercase;
		470	white-space: nowrap;
		471	vertical-align: baseline;
		472	}
		473
		474	.multi-display .upper .content .analysis td {
120	PointedEar	475	padding: 0 0.1em 0 0.1em;
118	PointedEar	476	text-overflow: ellipsis;
		477	white-space: nowrap;
		478	vertical-align: baseline;
		479	text-overflow: ellipsis;
		480	}
		481
		482	.multi-display .upper .content .analysis tr:hover th,
		483	.multi-display .upper .content .analysis tr:hover td
		484	{
		485	color: #f90;
		486	}
		487
		488	.multi-display .upper .content .analysis td sup {
		489	line-height: 1;
		490	font-weight: 500;
		491	}
		492
92	PointedEar	493	.multi-display .upper .content .commands
74	PointedEar	494	{
		495	position: absolute;
92	PointedEar	496	margin: 0;
		497	padding: 0;
		498	top: 2.4em;
94	PointedEar	499	right: 0;
92	PointedEar	500	height: 3.8em;
		501	width: 10.2em;
		502	list-style: none;
		503	}
		504
		505	.multi-display .upper .content .commands li
		506	{
		507	position: absolute;
		508	margin: 0;
		509	width: 5em;
74	PointedEar	510	height: 1.8em;
92	PointedEar	511	}
		512
		513	.multi-display .upper .content .commands .button
		514	{
		515	position: absolute;
		516	top: 0;
		517	left: 0;
		518	margin: 0;
		519	height: 1.8em;
		520	border-radius: 0.9em;
74	PointedEar	521	text-transform: none;
		522	}
		523
92	PointedEar	524	.multi-display .upper .content .commands .button .text {
101	PointedEar	525	right: 1em;
74	PointedEar	526	}
		527
		528	.multi-display .upper .content #cmd1
		529	{
92	PointedEar	530	top: 0;
74	PointedEar	531	right: 5.2em;
		532	}
		533
		534	.multi-display .upper .content #cmd2
		535	{
92	PointedEar	536	top: 0;
74	PointedEar	537	right: 0;
		538	}
		539
		540	.multi-display .upper .content #cmd3
		541	{
92	PointedEar	542	top: 2em;
		543	right: 0;
74	PointedEar	544	}
		545
		546	.multi-display .upper .content #cmd4
		547	{
92	PointedEar	548	top: 2em;
		549	right: 5.2em;
74	PointedEar	550	}
		551
		552	.multi-display .upper .elbo-button
		553	{
		554	position: absolute;
		555	top: 0;
		556	left: 0;
		557	width: 5em;
		558	height: 4em;
37	PointedEar	559	background-color: #c9c !important;
72	PointedEar	560	color: #000 !important;
83	PointedEar	561	cursor: default;
37	PointedEar	562	}
		563
74	PointedEar	564	.multi-display .upper .elbo-button .text
72	PointedEar	565	{
		566	position: absolute;
		567	bottom: 0;
		568	right: 0.2em;
102	PointedEar	569	max-width: 4em;
72	PointedEar	570	max-height: 3.6em;
		571	text-align: right;
		572	overflow: hidden;
		573	}
		574
37	PointedEar	575	.multi-display .upper .elbo
		576	{
		577	position: absolute;
		578	left: 0;
74	PointedEar	579	top: 4.2em;
37	PointedEar	580	width: 6em;
		581	height: 3.2em;
		582	border-bottom-left-radius: 2em;
		583	background-color: #9cf;
72	PointedEar	584	color: #000;
37	PointedEar	585	}
		586
72	PointedEar	587	.multi-display .upper .elbo .text
		588	{
		589	position: absolute;
		590	top: 0;
		591	right: 1.2em;
102	PointedEar	592	max-width: 4em;
72	PointedEar	593	max-height: 2.2em;
		594	text-align: right;
		595	overflow: hidden;
83	PointedEar	596	cursor: default;
72	PointedEar	597	}
		598
101	PointedEar	599	.elbo [title],
		600	.button [title]
		601	{
		602	border-bottom: none;
		603	}
		604
37	PointedEar	605	.multi-display .upper .elbo .concave
		606	{
		607	position: absolute;
		608	left: 5em;
		609	top: 0;
103	PointedEar	610	width: 1.1em;
37	PointedEar	611	height: 2.2em;
		612	border-bottom-left-radius: 1em;
		613	background-color: black;
		614	}
		615
80	PointedEar	616	.multi-display .border
		617	{
		618	height: 1em;
		619	}
		620
37	PointedEar	621	.multi-display .upper .border
		622	{
94	PointedEar	623	position: absolute;
		624	top: 6.4em;
		625	left: 6em;
37	PointedEar	626	right: 0.2em;
79	PointedEar	627	}
		628
		629	.multi-display .border div
		630	{
		631	position: absolute;
		632	top: 0;
		633	height: 1em;
		634	}
		635
		636	.multi-display .upper .border div
		637	{
37	PointedEar	638	background-color: #9cf;
80	PointedEar	639	}
79	PointedEar	640
		641	.multi-display .upper .border .left
		642	{
		643	left: 0;
		644	right: 5.2em;
		645	height: 1em;
37	PointedEar	646	}
		647
79	PointedEar	648	.multi-display .upper .border .right
		649	{
		650	width: 5em;
		651	right: 0;
		652	}
		653
37	PointedEar	654	.multi-display .lower
		655	{
		656	position: absolute;
74	PointedEar	657	top: 7.5em;
37	PointedEar	658	left: 0;
94	PointedEar	659	height: 0.1em;
		660	right: 0;
37	PointedEar	661	background-color: black;
		662	}
		663
		664	.multi-display .lower .elbo
		665	{
94	PointedEar	666	position: absolute;
		667	top: 0.1em;
		668	left: 0;
37	PointedEar	669	width: 6em;
		670	height: 3em;
		671	border-top-left-radius: 2em;
		672	background-color: #fc6;
		673	}
		674
		675	.multi-display .lower .elbo .concave
		676	{
		677	position: absolute;
		678	left: 5em;
		679	top: 1em;
103	PointedEar	680	width: 1.1em;
		681	height: 2.1em;
37	PointedEar	682	background-color: black;
		683	border-top-left-radius: 1em;
		684	}
		685
		686	.multi-display .lower .bg
		687	{
		688	position: fixed;
		689	top: 13.4em;
119	PointedEar	690	bottom: 0.2em;
37	PointedEar	691	width: 5em;
		692	background-color: #fc6;
		693	}
		694
		695	.multi-display .lower .border-container
		696	{
94	PointedEar	697	position: absolute;
		698	top: 0.1em;
		699	left: 6em;
		700	right: 0;
37	PointedEar	701	height: 1.2em;
		702	background-color: black;
		703	}
		704
		705	.multi-display .lower .border
		706	{
80	PointedEar	707	position: absolute;
37	PointedEar	708	left: 0;
		709	right: 0.2em;
79	PointedEar	710	}
		711
		712	.multi-display .lower .border div
		713	{
37	PointedEar	714	background-color: #fc6;
		715	}
		716
79	PointedEar	717	.multi-display .lower .border .left
		718	{
		719	left: 0;
80	PointedEar	720	right: 5.2em;
79	PointedEar	721	}
		722
		723	.multi-display .lower .border .right
		724	{
		725	width: 5em;
80	PointedEar	726	right: 0;
79	PointedEar	727	}
		728
43	PointedEar	729	.menu .button.secondary,
		730	.multi-display .lower .elbo.secondary,
		731	.multi-display .lower .bg.secondary,
		732	.multi-display .lower .border.secondary
		733	{
		734	background-color: #f96;
		735	}
		736
		737	.menu .button.ancillary,
		738	.multi-display .lower .elbo.ancillary,
		739	.multi-display .lower .bg.ancillary,
		740	.multi-display .lower .border.ancillary
		741	{
		742	background-color: #c9c;
		743	}
		744
		745	.menu .button.database,
		746	.multi-display .lower .elbo.database,
		747	.multi-display .lower .bg.database,
		748	.multi-display .lower .border.database
		749	{
37	PointedEar	750	background-color: #c66;
		751	}
		752
43	PointedEar	753	.menu .button .text {
37	PointedEar	754	position: static;
		755	margin: 0 0.25em;
		756	}
		757
		758	.button.selected {
		759	background-color: #fc6 !important;
		760	color: #000 !important;
		761	}
		762
		763	.group {
		764	margin: 0 auto;
		765	position: relative;
38	PointedEar	766	width: 7.7em;
37	PointedEar	767	}
		768
		769	.group .separator {
		770	float: left;
		771	position: absolute;
38	PointedEar	772	top: 0;
		773	left: 0;
		774	width: 1.5em;
37	PointedEar	775	height: 100%;
		776	background-color: #c66;
		777	color: #000;
		778	}
		779
		780	.group .separator:after {
		781	position: absolute;
38	PointedEar	782	width: 0.8em;
		783	height: 0.5em;
		784	bottom: 0.25em;
		785	left: 0.25em;
37	PointedEar	786	background-color: #000;
		787	content: "\a0";
		788	}
		789
		790	.group ul {
38	PointedEar	791	margin-left: 1.7em;
37	PointedEar	792	}
		793
		794	.group li {
38	PointedEar	795	margin-bottom: 0;
37	PointedEar	796	}
		797
		798	.group .button:visited,
		799	.group .button
		800	{
38	PointedEar	801	display: block;
37	PointedEar	802	position: relative;
38	PointedEar	803	width: 6em;
37	PointedEar	804	background-color: #99f !important;
		805	}
		806
38	PointedEar	807	.group li:last-child .button
		808	{
		809	margin-bottom: 0;
37	PointedEar	810	}
		811
38	PointedEar	812	.button.right {
		813	border-top-right-radius: 1em;
		814	border-bottom-right-radius: 1em;
37	PointedEar	815	}
		816
38	PointedEar	817	.button.right .text {
		818	right: 1em;
		819	}
		820
		821	.button.left {
		822	border-top-left-radius: 1em;
		823	border-bottom-left-radius: 1em;
		824	}
		825
37	PointedEar	826	.group .button .key {
		827	display: inline-block;
		828	position: absolute;
38	PointedEar	829	left: 0.2em;
37	PointedEar	830	top: 0;
		831	bottom: 0;
38	PointedEar	832	padding: 0 0.1em;
37	PointedEar	833	background-color: #000;
		834	color: #f90;
38	PointedEar	835	font-size: 2.4em;
37	PointedEar	836	text-transform: uppercase;
38	PointedEar	837	line-height: 0.9;
119	PointedEar	838	}
		839
		840	/* Responsive Web Design (TODO: Move to imported stylesheet; but see above) */
		841
		842	body {
		843	<?php
		844	Mixins::transition('', 'margin-left 0.5s 0.5s ease');
		845	?>
		846	}
		847
		848	#bow #bottom
		849	{
		850	<?php
		851	Mixins::transition('', 'width 0.5s 0.5s ease');
		852	?>
		853	}
		854
		855	#bow-bottom {
		856	<?php
		857	Mixins::transition('-property', 'border-bottom-left-radius, border-bottom-right-radius, height, width');
		858	Mixins::transition('-delay', '0.5s');
		859	Mixins::transition('-duration', '0.5s');
		860	Mixins::transition('-timing-function', 'ease');
		861	?>
		862	}
		863
		864	#bow-bottom .concave {
		865	<?php
		866	Mixins::transition('', 'width 0.5s 0.5s ease');
		867	?>
		868	}
		869
		870	#connectors .right {
		871	<?php
		872	Mixins::transition('', 'width 0.5s 0.5s ease');
		873	?>
		874	}
		875
		876	.multi-display
		877	{
		878	<?php
		879	Mixins::transition('', 'left 0.5s 0.5s ease');
		880	?>
		881	}
		882
		883	.multi-display .lower .bg
		884	{
		885	<?php
		886	/* Wait 1s for bow to become shallower */
		887	Mixins::transition('', 'bottom 2.5s 0.5s ease');
		888	?>
		889	}
		890
		891	@media all and (min-width: 1024px) {
		892	body {
		893	margin-left: 22em;
		894	<?php
		895	Mixins::transition('', 'margin-left 0.5s 0.5s ease');
		896	?>
		897	}
		898
		899	#bow #bottom
		900	{
		901	width: 20.8em;
		902	<?php
		903	/* Wait 0.5s for multi-display to be reduced in height */
		904	Mixins::transition('', 'width 1.0s 0.5s ease');
		905	?>
		906	}
		907
		908	#bow-bottom {
		909	border-bottom-left-radius: 2.4em;
		910	border-bottom-right-radius: 2em;
		911	height: 2.4em;
		912	width: 20.6em;
		913	<?php
		914	Mixins::transition('-property', 'border-bottom-left-radius, border-bottom-right-radius, height, width');
		915	Mixins::transition('-delay', '1.0s');
		916	Mixins::transition('-duration', '0.5s');
		917	Mixins::transition('-timing-function', 'ease');
		918	?>
		919	}
		920
		921	#bow-bottom .concave {
		922	width: 7.6em;
		923	<?php
		924	Mixins::transition('', 'width 1.0s 0.5s ease');
		925	?>
		926	}
		927
		928	#connectors .right {
		929	width: 5em;
		930	<?php
		931	/* Wait 1.0s for multi-display to be moved to right */
		932	Mixins::transition('', 'width 1.0s 0.5s ease');
		933	?>
		934	}
		935
		936	.multi-display
		937	{
		938	left: 15.8em;
		939	<?php
		940	Mixins::transition('', 'left 0.5s 0.5s ease');
		941	?>
		942	}
		943
		944	.multi-display .lower .bg
		945	{
		946	bottom: 2.8em;
		947	<?php
		948	Mixins::transition('', 'bottom 0.5s 0.5s ease');
		949	?>
		950	}
		951	}

Subversion Repositories LCARS

(root)/branches/live/styles/lcars22.css @ 286 - Rev 120