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

Subversion Repositories LCARS

(root)/branches/live/styles/lcars22.css @ 250 - Rev 109