WebSVN - LCARS - Blame - Rev 74 - /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');
		11	?>
37	PointedEar	12	@CHARSET "UTF-8";
		13
58	PointedEar	14	<?php
		15	if (!isset($_GET['ani']) \|\| $_GET['ani'] !== '0')
		16	{
		17	?>
		18	@import url("/styles/lcars-ani.css");
		19	<?php
		20	}
		21	?>
50	PointedEar	22
37	PointedEar	23	body {
		24	margin-top: 12em;
		25	margin-left: 22em;
		26	margin-right: 0.2em;
		27	margin-bottom: 0.2em;
		28	}
		29
		30	/* Bow (main) and elbo (multi-view) */
		31
		32	#LCARS {
		33	position: fixed;
		34	left: 0;
		35	top: 0;
		36	right: 0;
		37	padding: 0.2em;
		38	background-color: #000;
		39	z-index: 1701;
		40	}
		41
		42	#bow {
		43	position: absolute;
		44	left: 0.2em;
		45	top: 0.2em;
		46	right: 0.2em;
		47	height: 2.4em;
		48	padding-bottom: 0.2em;
		49	background-color: #000;
		50	}
		51
		52	#bow-top {
		53	/* NOTE: position: absolute is needed for animation */
		54	position: absolute;
		55	top: 0;
		56	left: 0;
		57	right: 0;
		58	min-width: 15.4em;
		59	height: 2em;
		60	background-color: #999;
		61	border-top-left-radius: 2.4em;
		62	border-top-right-radius: 1.2em;
		63	border-bottom-right-radius: 1.2em;
		64	line-height: 0.9;
		65	}
		66
		67	.empty #bow-top {
		68	border-top-left-radius: 1.2em;
		69	border-bottom-left-radius: 1.2em;
38	PointedEar	70	min-width: 10em;
37	PointedEar	71	}
		72
		73
		74	#bow-top .text {
		75	position: absolute;
		76	margin: 0;
		77	left: 4.33em;
		78	top: 0;
40	PointedEar	79	right: 0.75em;
37	PointedEar	80	height: 1em;
		81	text-align: right;
		82	color: #fc0;
		83	font-size: 2.4em;
		84	padding-right: 0.1em;
		85	overflow: hidden;
		86	text-overflow: ellipsis;
		87	}
		88
38	PointedEar	89	.empty #bow-top .text {
		90	left: 0.93em;
		91	}
		92
37	PointedEar	93
		94
		95	#bow-top .text span {
		96	padding-right: 0.1em;
		97	background-color: #000;
		98	padding-left: 0.1em;
		99	text-transform: uppercase;
		100	white-space: nowrap;
		101	}
		102
38	PointedEar	103	.empty #footer-container {
		104	position: fixed;
		105	left: 0.2em;
		106	bottom: 0;
		107	right: 0.2em;
		108	min-height: 2.4em;
		109	padding-top: 0.2em;
		110	padding-bottom: 0.2em;
		111	background-color: #000;
		112	}
		113
40	PointedEar	114
38	PointedEar	115	.empty #footer {
		116	position: absolute;
		117	bottom: 0;
		118	left: 0;
		119	right: 0;
		120	height: 2em;
40	PointedEar	121	min-width: 10em;
38	PointedEar	122	margin-bottom: 0.2em;
		123	background-color: #999;
		124	border-radius: 1.2em;
40	PointedEar	125	line-height: 0.9;
38	PointedEar	126	}
		127
		128	.empty #footer .text {
		129	position: absolute;
40	PointedEar	130	margin: 0;
		131	left: 0.93em;
		132	top: 0;
		133	right: 0.75em;
		134	height: 1em;
		135	background-color: transparent;
38	PointedEar	136	color: #fc0;
40	PointedEar	137	font-size: 2.4em;
38	PointedEar	138	padding-right: 0.1em;
		139	overflow: hidden;
		140	text-overflow: ellipsis;
		141	}
		142
		143	.empty #footer .text span {
		144	padding-right: 0.1em;
40	PointedEar	145	background-color: #000;
38	PointedEar	146	padding-left: 0.1em;
		147	text-transform: uppercase;
		148	white-space: nowrap;
		149	}
		150
37	PointedEar	151	.empty .separator-left {
		152	position: absolute;
		153	left: 2em;
		154	height: 2em;
		155	width: 0.25em;
		156	background-color: #000;
		157	}
		158
		159	.empty .separator-right {
		160	position: absolute;
		161	right: 2em;
		162	height: 2em;
		163	width: 0.25em;
		164	background-color: #000;
		165	}
		166
58	PointedEar	167	.bow {
		168	background-color: #999;
		169	}
		170
37	PointedEar	171	#bow-top-left {
		172	position: absolute;
		173	top: 2em;
		174	left: 0;
		175	right: 0;
		176	height: 3.2em;
		177	width: 9.2em;
		178	background-color: #999;
		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;
		189	height: 3.2em;
		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;
		202	top: 5.6em;
		203	width: 8em;
		204	bottom: 2.8em;
		205	background-color: #999;
37	PointedEar	206	overflow: auto;
		207	}
		208
50	PointedEar	209	.menu
43	PointedEar	210	{
71	PointedEar	211	height: 21.2em;
43	PointedEar	212	background-color: #000;
		213	}
		214
		215	.menu ul {
38	PointedEar	216	margin: 0 0.2em 0.2em 0;
37	PointedEar	217	padding: 0;
		218	}
		219
43	PointedEar	220	.menu li {
37	PointedEar	221	margin: 0;
		222	}
		223
		224	#bow #bottom
		225	{
		226	position: fixed;
		227	left: 0;
		228	bottom: 0;
		229	width: 20.8em;
		230	height: 2.4em;
		231	background-color: #000;
		232	z-index: 1701;
		233	}
		234
		235	#bow-bottom {
		236	position: absolute;
		237	bottom: 0.2em;
		238	left: 0.2em;
		239	width: 20.6em;
		240	height: 2.4em;
		241	border-bottom-left-radius: 2.4em;
		242	border-bottom-right-radius: 2em;
		243	background-color: #999;
		244	}
		245
		246	.empty #bow-bottom {
		247	display: none;
		248	}
		249
		250	#bow-bottom .concave {
		251	position: absolute;
		252	margin-left: 0.2em;
		253	margin-bottom: 0.2em;
		254	bottom: 0.3em;
		255	left: 7.8em;
		256	height: 2.1em;
		257	width: 7.6em;
		258	border-bottom-left-radius: 1.2em;
		259	border-bottom-right-radius: 1em;
		260	background-color: #000;
		261	}
		262
38	PointedEar	263	#bow-bottom .spacer {
37	PointedEar	264	position: absolute;
38	PointedEar	265	left: 10.2em;
		266	bottom: 0em;
		267	width: 0.2em;
		268	height: 0.5em;
		269	background-color: black;
37	PointedEar	270	}
		271
38	PointedEar	272	.empty #bow-bottom-left-concave {
		273	display: none;
37	PointedEar	274	}
		275
		276	/* Controls */
		277
		278	.button:visited:hover,
		279	.button:visited,
		280	.button:hover,
		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;
		294	cursor: pointer;
		295	}
		296
		297	.button .text {
		298	position: absolute;
		299	bottom: 0;
		300	right: 0.5em;
		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;
		357	right: 0em;
		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;
		371	height: 7.2em;
		372	padding-bottom: 0.2em;
		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;
		382	bottom: 1.2em;
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;
		395	left: 0em;
		396	height: 1em;
		397	right: 0em;
		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
		412	.multi-display .upper .content .button
		413	{
		414	position: absolute;
		415	margin-right: 0;
		416	height: 1.8em;
		417	text-transform: none;
		418	}
		419
		420	.multi-display .upper .content .button .text {
		421	right: 0.75em;
		422	}
		423
		424	.multi-display .upper .content #cmd1
		425	{
		426	top: 2.4em;
		427	right: 5.2em;
		428	}
		429
		430	.multi-display .upper .content #cmd2
		431	{
		432	top: 2.4em;
		433	right: 0;
		434	}
		435
		436	.multi-display .upper .content #cmd3
		437	{
		438	top: 4.4em;
		439	right: 5.2em;
		440	}
		441
		442	.multi-display .upper .content #cmd4
		443	{
		444	top: 4.4em;
		445	right: 0;
		446	}
		447
		448	.multi-display .upper .elbo-button
		449	{
		450	position: absolute;
		451	top: 0;
		452	left: 0;
		453	width: 5em;
		454	height: 4em;
37	PointedEar	455	background-color: #c9c !important;
72	PointedEar	456	color: #000 !important;
37	PointedEar	457	}
		458
74	PointedEar	459	.multi-display .upper .elbo-button .text
72	PointedEar	460	{
		461	position: absolute;
		462	bottom: 0;
		463	right: 0.2em;
		464	max-width: 4.6em;
		465	max-height: 3.6em;
		466	text-align: right;
		467	overflow: hidden;
		468	}
		469
37	PointedEar	470	.multi-display .upper .elbo
		471	{
		472	position: absolute;
		473	left: 0;
74	PointedEar	474	top: 4.2em;
37	PointedEar	475	width: 6em;
		476	height: 3.2em;
		477	border-bottom-left-radius: 2em;
		478	background-color: #9cf;
72	PointedEar	479	color: #000;
37	PointedEar	480	}
		481
72	PointedEar	482	.multi-display .upper .elbo .text
		483	{
		484	position: absolute;
		485	top: 0;
		486	right: 1.2em;
		487	max-width: 3.5em;
		488	max-height: 2.2em;
		489	text-align: right;
		490	overflow: hidden;
		491	}
		492
37	PointedEar	493	.multi-display .upper .elbo .concave
		494	{
		495	position: absolute;
		496	left: 5em;
		497	top: 0;
		498	width: 1em;
		499	height: 2.2em;
		500	border-bottom-left-radius: 1em;
		501	background-color: black;
		502	}
		503
		504	.multi-display .upper .border
		505	{
		506	position: fixed;
		507	top: 9em;
		508	left: 21.8em;
		509	right: 0.2em;
		510	height: 1em;
		511	background-color: #9cf;
		512	}
		513
		514	.multi-display .lower
		515	{
		516	position: absolute;
74	PointedEar	517	top: 7.5em;
37	PointedEar	518	left: 0;
		519	padding-top: 0.1em;
		520	background-color: black;
		521	}
		522
		523	.multi-display .lower .elbo
		524	{
		525	position: relative;
		526	width: 6em;
		527	height: 3em;
		528	border-top-left-radius: 2em;
		529	background-color: #fc6;
		530	}
		531
		532	.multi-display .lower .elbo .concave
		533	{
		534	position: absolute;
		535	left: 5em;
		536	top: 1em;
		537	width: 1em;
		538	height: 2em;
		539	background-color: black;
		540	border-top-left-radius: 1em;
		541	}
		542
		543	.multi-display .lower .bg
		544	{
		545	position: fixed;
		546	top: 13.4em;
		547	bottom: 2.8em;
		548	width: 5em;
		549	background-color: #fc6;
		550	}
		551
		552	.multi-display .lower .border-container
		553	{
		554	position: fixed;
		555	top: 10.2em;
		556	left: 21.8em;
		557	right: 0em;
		558	height: 1.2em;
		559	background-color: black;
		560	}
		561
		562	.multi-display .lower .border
		563	{
		564	position: absolute;
		565	top: 0;
		566	left: 0;
		567	right: 0.2em;
		568	height: 1em;
		569	background-color: #fc6;
		570	}
		571
43	PointedEar	572	.menu .button.secondary,
		573	.multi-display .lower .elbo.secondary,
		574	.multi-display .lower .bg.secondary,
		575	.multi-display .lower .border.secondary
		576	{
		577	background-color: #f96;
		578	}
		579
		580	.menu .button.ancillary,
		581	.multi-display .lower .elbo.ancillary,
		582	.multi-display .lower .bg.ancillary,
		583	.multi-display .lower .border.ancillary
		584	{
		585	background-color: #c9c;
		586	}
		587
		588	.menu .button.database,
		589	.multi-display .lower .elbo.database,
		590	.multi-display .lower .bg.database,
		591	.multi-display .lower .border.database
		592	{
37	PointedEar	593	background-color: #c66;
		594	}
		595
43	PointedEar	596	.menu .button .text {
37	PointedEar	597	position: static;
		598	margin: 0 0.25em;
		599	}
		600
		601	.button.selected {
		602	background-color: #fc6 !important;
		603	color: #000 !important;
		604	}
		605
		606	.group {
		607	margin: 0 auto;
		608	position: relative;
38	PointedEar	609	width: 7.7em;
37	PointedEar	610	}
		611
		612	.group .separator {
		613	float: left;
		614	position: absolute;
38	PointedEar	615	top: 0;
		616	left: 0;
		617	width: 1.5em;
37	PointedEar	618	height: 100%;
		619	background-color: #c66;
		620	color: #000;
		621	}
		622
		623	.group .separator:after {
		624	position: absolute;
38	PointedEar	625	width: 0.8em;
		626	height: 0.5em;
		627	bottom: 0.25em;
		628	left: 0.25em;
37	PointedEar	629	background-color: #000;
		630	content: "\a0";
		631	}
		632
		633	.group ul {
38	PointedEar	634	margin-left: 1.7em;
37	PointedEar	635	}
		636
		637	.group li {
38	PointedEar	638	margin-bottom: 0;
37	PointedEar	639	}
		640
		641	.group .button:visited,
		642	.group .button
		643	{
38	PointedEar	644	display: block;
37	PointedEar	645	position: relative;
38	PointedEar	646	width: 6em;
37	PointedEar	647	background-color: #99f !important;
		648	}
		649
38	PointedEar	650	.group li:last-child .button
		651	{
		652	margin-bottom: 0;
37	PointedEar	653	}
		654
38	PointedEar	655	.button.right {
		656	border-top-right-radius: 1em;
		657	border-bottom-right-radius: 1em;
37	PointedEar	658	}
		659
38	PointedEar	660	.button.right .text {
		661	right: 1em;
		662	}
		663
		664	.button.left {
		665	border-top-left-radius: 1em;
		666	border-bottom-left-radius: 1em;
		667	}
		668
37	PointedEar	669	.group .button .key {
		670	display: inline-block;
		671	position: absolute;
38	PointedEar	672	left: 0.2em;
37	PointedEar	673	top: 0;
		674	bottom: 0;
38	PointedEar	675	padding: 0 0.1em;
37	PointedEar	676	background-color: #000;
		677	color: #f90;
38	PointedEar	678	font-size: 2.4em;
37	PointedEar	679	text-transform: uppercase;
38	PointedEar	680	line-height: 0.9;
		681	}

Subversion Repositories LCARS

(root)/branches/live/styles/lcars22.css @ 296 - Rev 74