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

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

Subversion Repositories LCARS

(root)/trunk/styles/lcars22.css @ 127 - Rev 169