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

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

Subversion Repositories LCARS

(root)/trunk/styles/lcars22.css - Rev 118