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

Subversion Repositories LCARS

(root)/trunk/styles/lcars22.css @ 191 - Rev 148