WebSVN - LCARS - Blame - Rev 116 - /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 */
		5	\header('Cache-Control: max-age=0, 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;
		411	text-overflow: ellipsis;
72	PointedEar	412	}
		413
74	PointedEar	414	.multi-display .upper .content .title span
37	PointedEar	415	{
74	PointedEar	416	white-space: nowrap;
		417	}
		418
90	PointedEar	419	.multi-display .upper .content .analysis {
		420	position: absolute;
		421	top: 2.4em;
		422	bottom: 0;
		423	right: 11em;
		424	left: 0;
		425	overflow: hidden;
		426	text-overflow: ellipsis;
		427	text-align: left;
		428	}
		429
92	PointedEar	430	.multi-display .upper .content .commands
74	PointedEar	431	{
		432	position: absolute;
92	PointedEar	433	margin: 0;
		434	padding: 0;
		435	top: 2.4em;
94	PointedEar	436	right: 0;
92	PointedEar	437	height: 3.8em;
		438	width: 10.2em;
		439	list-style: none;
		440	}
		441
		442	.multi-display .upper .content .commands li
		443	{
		444	position: absolute;
		445	margin: 0;
		446	width: 5em;
74	PointedEar	447	height: 1.8em;
92	PointedEar	448	}
		449
		450	.multi-display .upper .content .commands .button
		451	{
		452	position: absolute;
		453	top: 0;
		454	left: 0;
		455	margin: 0;
		456	height: 1.8em;
		457	border-radius: 0.9em;
74	PointedEar	458	text-transform: none;
		459	}
		460
92	PointedEar	461	.multi-display .upper .content .commands .button .text {
101	PointedEar	462	right: 1em;
74	PointedEar	463	}
		464
		465	.multi-display .upper .content #cmd1
		466	{
92	PointedEar	467	top: 0;
74	PointedEar	468	right: 5.2em;
		469	}
		470
		471	.multi-display .upper .content #cmd2
		472	{
92	PointedEar	473	top: 0;
74	PointedEar	474	right: 0;
		475	}
		476
		477	.multi-display .upper .content #cmd3
		478	{
92	PointedEar	479	top: 2em;
		480	right: 0;
74	PointedEar	481	}
		482
		483	.multi-display .upper .content #cmd4
		484	{
92	PointedEar	485	top: 2em;
		486	right: 5.2em;
74	PointedEar	487	}
		488
		489	.multi-display .upper .elbo-button
		490	{
		491	position: absolute;
		492	top: 0;
		493	left: 0;
		494	width: 5em;
		495	height: 4em;
37	PointedEar	496	background-color: #c9c !important;
72	PointedEar	497	color: #000 !important;
83	PointedEar	498	cursor: default;
37	PointedEar	499	}
		500
74	PointedEar	501	.multi-display .upper .elbo-button .text
72	PointedEar	502	{
		503	position: absolute;
		504	bottom: 0;
		505	right: 0.2em;
102	PointedEar	506	max-width: 4em;
72	PointedEar	507	max-height: 3.6em;
		508	text-align: right;
		509	overflow: hidden;
		510	}
		511
37	PointedEar	512	.multi-display .upper .elbo
		513	{
		514	position: absolute;
		515	left: 0;
74	PointedEar	516	top: 4.2em;
37	PointedEar	517	width: 6em;
		518	height: 3.2em;
		519	border-bottom-left-radius: 2em;
		520	background-color: #9cf;
72	PointedEar	521	color: #000;
37	PointedEar	522	}
		523
72	PointedEar	524	.multi-display .upper .elbo .text
		525	{
		526	position: absolute;
		527	top: 0;
		528	right: 1.2em;
102	PointedEar	529	max-width: 4em;
72	PointedEar	530	max-height: 2.2em;
		531	text-align: right;
		532	overflow: hidden;
83	PointedEar	533	cursor: default;
72	PointedEar	534	}
		535
101	PointedEar	536	.elbo [title],
		537	.button [title]
		538	{
		539	border-bottom: none;
		540	}
		541
37	PointedEar	542	.multi-display .upper .elbo .concave
		543	{
		544	position: absolute;
		545	left: 5em;
		546	top: 0;
103	PointedEar	547	width: 1.1em;
37	PointedEar	548	height: 2.2em;
		549	border-bottom-left-radius: 1em;
		550	background-color: black;
		551	}
		552
80	PointedEar	553	.multi-display .border
		554	{
		555	height: 1em;
		556	}
		557
37	PointedEar	558	.multi-display .upper .border
		559	{
94	PointedEar	560	position: absolute;
		561	top: 6.4em;
		562	left: 6em;
37	PointedEar	563	right: 0.2em;
79	PointedEar	564	}
		565
		566	.multi-display .border div
		567	{
		568	position: absolute;
		569	top: 0;
		570	height: 1em;
		571	}
		572
		573	.multi-display .upper .border div
		574	{
37	PointedEar	575	background-color: #9cf;
80	PointedEar	576	}
79	PointedEar	577
		578	.multi-display .upper .border .left
		579	{
		580	left: 0;
		581	right: 5.2em;
		582	height: 1em;
37	PointedEar	583	}
		584
79	PointedEar	585	.multi-display .upper .border .right
		586	{
		587	width: 5em;
		588	right: 0;
		589	}
		590
37	PointedEar	591	.multi-display .lower
		592	{
		593	position: absolute;
74	PointedEar	594	top: 7.5em;
37	PointedEar	595	left: 0;
94	PointedEar	596	height: 0.1em;
		597	right: 0;
37	PointedEar	598	background-color: black;
		599	}
		600
		601	.multi-display .lower .elbo
		602	{
94	PointedEar	603	position: absolute;
		604	top: 0.1em;
		605	left: 0;
37	PointedEar	606	width: 6em;
		607	height: 3em;
		608	border-top-left-radius: 2em;
		609	background-color: #fc6;
		610	}
		611
		612	.multi-display .lower .elbo .concave
		613	{
		614	position: absolute;
		615	left: 5em;
		616	top: 1em;
103	PointedEar	617	width: 1.1em;
		618	height: 2.1em;
37	PointedEar	619	background-color: black;
		620	border-top-left-radius: 1em;
		621	}
		622
		623	.multi-display .lower .bg
		624	{
		625	position: fixed;
		626	top: 13.4em;
		627	bottom: 2.8em;
		628	width: 5em;
		629	background-color: #fc6;
		630	}
		631
		632	.multi-display .lower .border-container
		633	{
94	PointedEar	634	position: absolute;
		635	top: 0.1em;
		636	left: 6em;
		637	right: 0;
37	PointedEar	638	height: 1.2em;
		639	background-color: black;
		640	}
		641
		642	.multi-display .lower .border
		643	{
80	PointedEar	644	position: absolute;
37	PointedEar	645	left: 0;
		646	right: 0.2em;
79	PointedEar	647	}
		648
		649	.multi-display .lower .border div
		650	{
37	PointedEar	651	background-color: #fc6;
		652	}
		653
79	PointedEar	654	.multi-display .lower .border .left
		655	{
		656	left: 0;
80	PointedEar	657	right: 5.2em;
79	PointedEar	658	}
		659
		660	.multi-display .lower .border .right
		661	{
		662	width: 5em;
80	PointedEar	663	right: 0;
79	PointedEar	664	}
		665
43	PointedEar	666	.menu .button.secondary,
		667	.multi-display .lower .elbo.secondary,
		668	.multi-display .lower .bg.secondary,
		669	.multi-display .lower .border.secondary
		670	{
		671	background-color: #f96;
		672	}
		673
		674	.menu .button.ancillary,
		675	.multi-display .lower .elbo.ancillary,
		676	.multi-display .lower .bg.ancillary,
		677	.multi-display .lower .border.ancillary
		678	{
		679	background-color: #c9c;
		680	}
		681
		682	.menu .button.database,
		683	.multi-display .lower .elbo.database,
		684	.multi-display .lower .bg.database,
		685	.multi-display .lower .border.database
		686	{
37	PointedEar	687	background-color: #c66;
		688	}
		689
43	PointedEar	690	.menu .button .text {
37	PointedEar	691	position: static;
		692	margin: 0 0.25em;
		693	}
		694
		695	.button.selected {
		696	background-color: #fc6 !important;
		697	color: #000 !important;
		698	}
		699
		700	.group {
		701	margin: 0 auto;
		702	position: relative;
38	PointedEar	703	width: 7.7em;
37	PointedEar	704	}
		705
		706	.group .separator {
		707	float: left;
		708	position: absolute;
38	PointedEar	709	top: 0;
		710	left: 0;
		711	width: 1.5em;
37	PointedEar	712	height: 100%;
		713	background-color: #c66;
		714	color: #000;
		715	}
		716
		717	.group .separator:after {
		718	position: absolute;
38	PointedEar	719	width: 0.8em;
		720	height: 0.5em;
		721	bottom: 0.25em;
		722	left: 0.25em;
37	PointedEar	723	background-color: #000;
		724	content: "\a0";
		725	}
		726
		727	.group ul {
38	PointedEar	728	margin-left: 1.7em;
37	PointedEar	729	}
		730
		731	.group li {
38	PointedEar	732	margin-bottom: 0;
37	PointedEar	733	}
		734
		735	.group .button:visited,
		736	.group .button
		737	{
38	PointedEar	738	display: block;
37	PointedEar	739	position: relative;
38	PointedEar	740	width: 6em;
37	PointedEar	741	background-color: #99f !important;
		742	}
		743
38	PointedEar	744	.group li:last-child .button
		745	{
		746	margin-bottom: 0;
37	PointedEar	747	}
		748
38	PointedEar	749	.button.right {
		750	border-top-right-radius: 1em;
		751	border-bottom-right-radius: 1em;
37	PointedEar	752	}
		753
38	PointedEar	754	.button.right .text {
		755	right: 1em;
		756	}
		757
		758	.button.left {
		759	border-top-left-radius: 1em;
		760	border-bottom-left-radius: 1em;
		761	}
		762
37	PointedEar	763	.group .button .key {
		764	display: inline-block;
		765	position: absolute;
38	PointedEar	766	left: 0.2em;
37	PointedEar	767	top: 0;
		768	bottom: 0;
38	PointedEar	769	padding: 0 0.1em;
37	PointedEar	770	background-color: #000;
		771	color: #f90;
38	PointedEar	772	font-size: 2.4em;
37	PointedEar	773	text-transform: uppercase;
38	PointedEar	774	line-height: 0.9;
		775	}

Subversion Repositories LCARS

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