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

Subversion Repositories LCARS

(root)/trunk/styles/lcars22.css @ 114 - Rev 139