WebSVN - LCARS - Blame - Rev 72 - /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;
		355	top: 2.8em;
		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
72	PointedEar	377	.multi-display .upper .title
		378	{
		379	position: absolute;
		380	top: 0;
		381	left: 2.5em;
		382	bottom: 1em;
		383	right: 0.2em;
		384	background-color: black;
		385	color: white;
		386	font-size: 2.4em;
		387	text-transform: uppercase;
		388	text-align: right;
		389	}
		390
37	PointedEar	391	.multi-display .upper .button
		392	{
72	PointedEar	393	position: relative;
37	PointedEar	394	height: 3.8em;
		395	background-color: #c9c !important;
72	PointedEar	396	color: #000 !important;
37	PointedEar	397	}
		398
72	PointedEar	399	.multi-display .upper .button .text
		400	{
		401	position: absolute;
		402	bottom: 0;
		403	right: 0.2em;
		404	max-width: 4.6em;
		405	max-height: 3.6em;
		406	text-align: right;
		407	overflow: hidden;
		408	}
		409
37	PointedEar	410	.multi-display .upper .elbo
		411	{
		412	position: absolute;
		413	left: 0;
		414	top: 4em;
		415	width: 6em;
		416	height: 3.2em;
		417	border-bottom-left-radius: 2em;
		418	background-color: #9cf;
72	PointedEar	419	color: #000;
37	PointedEar	420	}
		421
72	PointedEar	422	.multi-display .upper .elbo .text
		423	{
		424	position: absolute;
		425	top: 0;
		426	right: 1.2em;
		427	max-width: 3.5em;
		428	max-height: 2.2em;
		429	text-align: right;
		430	overflow: hidden;
		431	}
		432
37	PointedEar	433	.multi-display .upper .elbo .concave
		434	{
		435	position: absolute;
		436	left: 5em;
		437	top: 0;
		438	width: 1em;
		439	height: 2.2em;
		440	border-bottom-left-radius: 1em;
		441	background-color: black;
		442	}
		443
		444	.multi-display .upper .border
		445	{
		446	position: fixed;
		447	top: 9em;
		448	left: 21.8em;
		449	right: 0.2em;
		450	height: 1em;
		451	background-color: #9cf;
		452	}
		453
		454	.multi-display .lower
		455	{
		456	position: absolute;
		457	top: 7.3em;
		458	left: 0;
		459	padding-top: 0.1em;
		460	background-color: black;
		461	}
		462
		463	.multi-display .lower .elbo
		464	{
		465	position: relative;
		466	width: 6em;
		467	height: 3em;
		468	border-top-left-radius: 2em;
		469	background-color: #fc6;
		470	}
		471
		472	.multi-display .lower .elbo .concave
		473	{
		474	position: absolute;
		475	left: 5em;
		476	top: 1em;
		477	width: 1em;
		478	height: 2em;
		479	background-color: black;
		480	border-top-left-radius: 1em;
		481	}
		482
		483	.multi-display .lower .bg
		484	{
		485	position: fixed;
		486	top: 13.4em;
		487	bottom: 2.8em;
		488	width: 5em;
		489	background-color: #fc6;
		490	}
		491
		492	.multi-display .lower .border-container
		493	{
		494	position: fixed;
		495	top: 10.2em;
		496	left: 21.8em;
		497	right: 0em;
		498	height: 1.2em;
		499	background-color: black;
		500	}
		501
		502	.multi-display .lower .border
		503	{
		504	position: absolute;
		505	top: 0;
		506	left: 0;
		507	right: 0.2em;
		508	height: 1em;
		509	background-color: #fc6;
		510	}
		511
43	PointedEar	512	.menu .button.secondary,
		513	.multi-display .lower .elbo.secondary,
		514	.multi-display .lower .bg.secondary,
		515	.multi-display .lower .border.secondary
		516	{
		517	background-color: #f96;
		518	}
		519
		520	.menu .button.ancillary,
		521	.multi-display .lower .elbo.ancillary,
		522	.multi-display .lower .bg.ancillary,
		523	.multi-display .lower .border.ancillary
		524	{
		525	background-color: #c9c;
		526	}
		527
		528	.menu .button.database,
		529	.multi-display .lower .elbo.database,
		530	.multi-display .lower .bg.database,
		531	.multi-display .lower .border.database
		532	{
37	PointedEar	533	background-color: #c66;
		534	}
		535
43	PointedEar	536	.menu .button .text {
37	PointedEar	537	position: static;
		538	margin: 0 0.25em;
		539	}
		540
		541	.button.selected {
		542	background-color: #fc6 !important;
		543	color: #000 !important;
		544	}
		545
		546	.group {
		547	margin: 0 auto;
		548	position: relative;
38	PointedEar	549	width: 7.7em;
37	PointedEar	550	}
		551
		552	.group .separator {
		553	float: left;
		554	position: absolute;
38	PointedEar	555	top: 0;
		556	left: 0;
		557	width: 1.5em;
37	PointedEar	558	height: 100%;
		559	background-color: #c66;
		560	color: #000;
		561	}
		562
		563	.group .separator:after {
		564	position: absolute;
38	PointedEar	565	width: 0.8em;
		566	height: 0.5em;
		567	bottom: 0.25em;
		568	left: 0.25em;
37	PointedEar	569	background-color: #000;
		570	content: "\a0";
		571	}
		572
		573	.group ul {
38	PointedEar	574	margin-left: 1.7em;
37	PointedEar	575	}
		576
		577	.group li {
38	PointedEar	578	margin-bottom: 0;
37	PointedEar	579	}
		580
		581	.group .button:visited,
		582	.group .button
		583	{
38	PointedEar	584	display: block;
37	PointedEar	585	position: relative;
38	PointedEar	586	width: 6em;
37	PointedEar	587	background-color: #99f !important;
		588	}
		589
38	PointedEar	590	.group li:last-child .button
		591	{
		592	margin-bottom: 0;
37	PointedEar	593	}
		594
38	PointedEar	595	.button.right {
		596	border-top-right-radius: 1em;
		597	border-bottom-right-radius: 1em;
37	PointedEar	598	}
		599
38	PointedEar	600	.button.right .text {
		601	right: 1em;
		602	}
		603
		604	.button.left {
		605	border-top-left-radius: 1em;
		606	border-bottom-left-radius: 1em;
		607	}
		608
37	PointedEar	609	.group .button .key {
		610	display: inline-block;
		611	position: absolute;
38	PointedEar	612	left: 0.2em;
37	PointedEar	613	top: 0;
		614	bottom: 0;
38	PointedEar	615	padding: 0 0.1em;
37	PointedEar	616	background-color: #000;
		617	color: #f90;
38	PointedEar	618	font-size: 2.4em;
37	PointedEar	619	text-transform: uppercase;
38	PointedEar	620	line-height: 0.9;
		621	}

Subversion Repositories LCARS

(root)/branches/live/styles/lcars22.css @ 263 - Rev 72