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

Subversion Repositories LCARS

(root)/branches/live/styles/lcars22.css @ 271 - Rev 102