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

Subversion Repositories LCARS

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