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

Subversion Repositories LCARS

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