WebSVN - LCARS - Blame - Rev 144 - /trunk/styles/lcars22.css

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

Subversion Repositories LCARS

(root)/trunk/styles/lcars22.css @ 94 - Rev 144