WebSVN - LCARS - Diff - Rev 109 and 116 - /trunk/styles/lcars22.css


<?php
\header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');
 
/* Resource expires in HTTP/1.1 caches 24h after last retrieval */
\header('Cache-Control: max-age=0, s-maxage=86400, must-revalidate, proxy-revalidate');

/* Resource expires in HTTP/1.0 caches 24h after last retrieval */
\header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT');
 
\header('Content-Type: text/css; charset=UTF-8');
?>@charset "UTF-8";

<?php
  if (!isset($_GET['ani']) || $_GET['ani'] !== '0')
  {
?>
@import url("/styles/lcars-ani.css");
<?php
  }
?>

body {
  margin-top: 12em;
  margin-left: 22em;
  margin-right: 0.2em;
  margin-bottom: 0.2em;
}

/* HTML5 elements */

nav
{
  display: block;
}

/* Bow (main) and elbo (multi-view) */

#LCARS {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  padding: 0.2em;
  background-color: #000;
  z-index: 1701;
}

#bow {
  position: absolute;
  left: 0.2em;
  top: 0.2em;
  right: 0.2em;
  height: 2.4em;
  padding-bottom: 0.2em;
  background-color: #000;
}

#bow-top {
  /* NOTE: position: absolute is needed for animation */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-width: 15.4em;
  height: 2em;
  background-color: #999;
  border-top-left-radius: 2.4em;
  border-top-right-radius: 1.2em;
  border-bottom-right-radius: 1.2em;
  line-height: 0.9;
}

.empty #bow-top {
  border-top-left-radius: 1.2em;
  border-bottom-left-radius: 1.2em;
  min-width: 10em;
}


#bow-top .text {
  position: absolute;
  margin: 0;
  left: 4.33em;
  top: 0;
  right: 0.75em;
  height: 1em;
  text-align: right;
  color: #fc0;
  font-size: 2.4em;
  padding-right: 0.1em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.empty #bow-top .text {
  left: 0.93em;
}



#bow-top .text span {
  padding-right: 0.1em;
  background-color: #000;
  padding-left: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.empty #footer-container {
  position: fixed;
  left: 0.2em;
  bottom: 0;
  right: 0.2em;
  min-height: 2.4em;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  background-color: #000;
}


.empty #footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2em;
  min-width: 10em;
  margin-bottom: 0.2em;
  background-color: #999;
  border-radius: 1.2em;
  line-height: 0.9;
}

.empty #footer .text {
  position: absolute;
  margin: 0;
  left: 0.93em;
  top: 0;
  right: 0.75em;
  height: 1em;
  background-color: transparent;
  color: #fc0;
  font-size: 2.4em;
  padding-right: 0.1em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.empty #footer .text span {
  padding-right: 0.1em;
  background-color: #000;
  padding-left: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.empty .separator-left {
  position: absolute;
  left: 2em;
  height: 2em;
  width: 0.25em;
  background-color: #000;
}

.empty .separator-right {
  position: absolute;
  right: 2em;
  height: 2em;
  width: 0.25em;
  background-color: #000;
}

.bow {
  background-color: #999;
}

#bow-top-left {
  position: absolute;
  top: 2em;
  left: 0;
  right: 0;
  height: 4.4em;
  width: 9.2em;
  background-color: #999;
  overflow: hidden;
}

.empty #bow-top-left {
  display: none;
}

#bow-top-left .concave {
  position: absolute;
  top: 0;
  left: 8em;
  height: 4.4em;
  width: 1.2em;
  background-color: #000;
  border-top-left-radius: 1.2em;
}

.empty #bow-top-left-concave {
  display: none;
}

.menu-container {
  position: fixed;
  left: 0.2em;
  top: 6.8em;
  width: 8em;
  bottom: 2.8em;
  background-color: #999;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

.menu
{
  height: 20em;
  background-color: #000;
}

.menu ul {
  margin: 0 0.2em 0 0;
  padding: 0;
}

.menu li {
  margin: 0;
}

#bow #bottom
{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 20.8em;
  height: 2.4em;
  background-color: #000;
  z-index: 1701;
}

#bow-bottom {
  position: absolute;
  bottom: 0.2em;
  left: 0.2em;
  width: 20.6em;
  height: 2.4em;
  border-bottom-left-radius: 2.4em;
  border-bottom-right-radius: 2em;
  background-color: #999;
}

.empty #bow-bottom {
  display: none;
}

#bow-bottom .concave {
  position: absolute;
  margin-left: 0.2em;
  margin-bottom: 0.2em;
  bottom: 0.3em;
  left: 7.8em;
  height: 2.1em;
  width: 7.6em;
  border-bottom-left-radius: 1.2em;
  border-bottom-right-radius: 1em;
  background-color: #000;
}

#bow-bottom .spacer {
  position: absolute;
  left: 10.2em;
  bottom: 0;
  width: 0.2em;
  height: 0.5em;
  background-color: black;
}

.empty #bow-bottom-left-concave {
  display: none;
}

/* Controls */

.button:visited,
.button
{
  position: relative;
  display: inline-block;
  margin-right: 0.2em;
  margin-bottom: 0.2em;
  width: 5em;
  height: 2em;
  background-color: #7d7d7d; /* c9c */
  color: #000 !important;
  text-decoration: none !important;
  text-transform: uppercase;
  overflow: hidden;
  cursor: pointer !important;
}

.button .text {
  position: absolute;
  bottom: 0;
  right: 0.5em;
  cursor: pointer !important;
}

.button.command {
  border-radius: 1.2em;
}

.button.command .text {
  position: absolute;
  bottom: 0;
  right: 1em;
}

.button:hover,
.button:focus,
.button.selected:hover,
.button.selected:focus,
.group .button:hover,
.group .button:focus,
.group .button:visited:hover,
.group .button:visited:focus
{
  background-color: #f90 !important;
  color: #000 !important;
}

.button:active,
.button.selected:active,
.group .button:active,
.group .button:visited:active
{
  background-color: #fff !important;
  color: #000 !important;
}

.menu .button {
  display: block;
  width: 8em;
  height: 1em;
  line-height: 1;
  background-color: #9cf;
  color: #000 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#connectors {
  position: fixed;
  left: 8.4em;
  top: 5.6em;
}

.multi-display
{
  position: fixed;
  top: 2.6em;
  left: 15.8em;
  right: 0;
}

.multi-display .button
{
  width: 5em !important;
}

.multi-display .upper
{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;  
  height: 7.5em;  
  padding-right: 0.2em;
  background-color: black;
}

.multi-display .upper .content
{
  position: absolute;
  top: 0;
  left: 6em;
  bottom: 1.3em;
  right: 0.2em;
  background-color: black;
  color: white;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
}

.multi-display .upper .content .title
{
  position: absolute;
  top: 0;
  left: 0;
  height: 1em;
  right: 0;
  background-color: black;
  color: white;
  font-size: 2.4em;
  text-transform: uppercase;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
}

.multi-display .upper .content .title span
{
  white-space: nowrap;
}

.multi-display .upper .content .analysis {
  position: absolute;
  top: 2.4em;
  bottom: 0;
  right: 11em;
  left: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.multi-display .upper .content .commands
{
  position: absolute;
  margin: 0;
  padding: 0;
  top: 2.4em;
  right: 0;
  height: 3.8em;
  width: 10.2em;
  list-style: none;
}

.multi-display .upper .content .commands li
{
  position: absolute;
  margin: 0;
  width: 5em;
  height: 1.8em;
}

.multi-display .upper .content .commands .button
{
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  height: 1.8em;
  border-radius: 0.9em;
  text-transform: none;
}

.multi-display .upper .content .commands .button .text {
  right: 1em;
}

.multi-display .upper .content #cmd1
{
  top: 0;
  right: 5.2em;
}

.multi-display .upper .content #cmd2
{
  top: 0;
  right: 0;
}

.multi-display .upper .content #cmd3
{
  top: 2em;
  right: 0;
}

.multi-display .upper .content #cmd4
{
  top: 2em;
  right: 5.2em;
}

.multi-display .upper .elbo-button
{
  position: absolute;
  top: 0;
  left: 0;
  width: 5em;
  height: 4em;
  background-color: #c9c !important;
  color: #000 !important;
  cursor: default;
}

.multi-display .upper .elbo-button .text
{
  position: absolute;
  bottom: 0;
  right: 0.2em;
  max-width: 4em;
  max-height: 3.6em;
  text-align: right;
  overflow: hidden;
}

.multi-display .upper .elbo
{
  position: absolute;
  left: 0;
  top: 4.2em;
  width: 6em;
  height: 3.2em;
  border-bottom-left-radius: 2em;
  background-color: #9cf;
  color: #000;
}

.multi-display .upper .elbo .text
{
  position: absolute;
  top: 0;
  right: 1.2em;
  max-width: 4em;
  max-height: 2.2em;
  text-align: right;
  overflow: hidden;
  cursor: default;
}

.elbo [title],
.button [title]
{
  border-bottom: none;
}

.multi-display .upper .elbo .concave
{
  position: absolute;
  left: 5em;
  top: 0;
  width: 1.1em;
  height: 2.2em;
  border-bottom-left-radius: 1em;
  background-color: black;
}

.multi-display .border
{
  height: 1em;
}

.multi-display .upper .border
{
  position: absolute;
  top: 6.4em;
  left: 6em;
  right: 0.2em;
}

.multi-display .border div
{
  position: absolute;
  top: 0;
  height: 1em;
}

.multi-display .upper .border div
{
  background-color: #9cf;
}

.multi-display .upper .border .left
{
  left: 0;
  right: 5.2em;
  height: 1em;
}
 
.multi-display .upper .border .right
{
  width: 5em;
  right: 0;
}
 
.multi-display .lower
{
  position: absolute;
  top: 7.5em;
  left: 0;
  height: 0.1em;
  right: 0;
  background-color: black;
}

.multi-display .lower .elbo
{
  position: absolute;
  top: 0.1em;
  left: 0;
  width: 6em;
  height: 3em;
  border-top-left-radius: 2em;
  background-color: #fc6;
}

.multi-display .lower .elbo .concave
{
  position: absolute;
  left: 5em;
  top: 1em;
  width: 1.1em;
  height: 2.1em;
  background-color: black;
  border-top-left-radius: 1em;
}

.multi-display .lower .bg
{
  position: fixed;
  top: 13.4em;
  bottom: 2.8em;
  width: 5em;
  background-color: #fc6;
}

.multi-display .lower .border-container
{
  position: absolute;
  top: 0.1em;
  left: 6em;
  right: 0;
  height: 1.2em;
  background-color: black;
}

.multi-display .lower .border
{
  position: absolute;
  left: 0;
  right: 0.2em;
}

.multi-display .lower .border div
{
  background-color: #fc6;
}

.multi-display .lower .border .left
{
  left: 0;
  right: 5.2em;
}

.multi-display .lower .border .right
{
  width: 5em;
  right: 0;
}

.menu .button.secondary,
.multi-display .lower .elbo.secondary,
.multi-display .lower .bg.secondary,
.multi-display .lower .border.secondary
{
  background-color: #f96;
}

.menu .button.ancillary,
.multi-display .lower .elbo.ancillary,
.multi-display .lower .bg.ancillary,
.multi-display .lower .border.ancillary
{
  background-color: #c9c;
}

.menu .button.database,
.multi-display .lower .elbo.database,
.multi-display .lower .bg.database,
.multi-display .lower .border.database
{
  background-color: #c66;
}

.menu .button .text {
  position: static;
  margin: 0 0.25em;
}

.button.selected {
  background-color: #fc6 !important;
  color: #000 !important;  
}

.group {
  margin: 0 auto;
  position: relative;
  width: 7.7em;
}

.group .separator {
  float: left;
  position: absolute;
  top: 0;
  left: 0;
  width: 1.5em;
  height: 100%;
  background-color: #c66;
  color: #000;
}

.group .separator:after {
  position: absolute;
  width: 0.8em;
  height: 0.5em;
  bottom: 0.25em;
  left: 0.25em;
  background-color: #000;
  content: "\a0";
}

.group ul {
  margin-left: 1.7em;
}

.group li {
  margin-bottom: 0;
}

.group .button:visited,
.group .button
{
  display: block;
  position: relative;
  width: 6em;
  background-color: #99f !important;
}

.group li:last-child .button
{
  margin-bottom: 0;
}

.button.right {
  border-top-right-radius: 1em;
  border-bottom-right-radius: 1em;
}

.button.right .text {
  right: 1em;
}

.button.left {
  border-top-left-radius: 1em;
  border-bottom-left-radius: 1em;
}

.group .button .key {
  display: inline-block;
  position: absolute;
  left: 0.2em;
  top: 0;
  bottom: 0;
  padding: 0 0.1em;
  background-color: #000;
  color: #f90;
  font-size: 2.4em;
  text-transform: uppercase;
  line-height: 0.9;
}

Rev 109	Rev 116
1	<?php	1	<?php
2	\header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');	2	\header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');
3		3
4	/* Do not let resource be cached in HTTP/1.1 caches */	4	/* Resource expires in HTTP/1.1 caches 24h after last retrieval */
5	\header('Cache-Control: max-age=0, s-maxage=0, must-revalidate, proxy-revalidate');	5	\header('Cache-Control: max-age=0, s-maxage=86400, must-revalidate, proxy-revalidate');
6		6
7	/* Do not let resource be cached in HTTP/1.0 caches */	7	/* Resource expires in HTTP/1.0 caches 24h after last retrieval */
8	\header('Expires: ' . gmdate('D, d M Y H:i:s', time()) . ' GMT');	8	\header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT');
9		9
10	\header('Content-Type: text/css; charset=UTF-8');	10	\header('Content-Type: text/css; charset=UTF-8');
11	?>@charset "UTF-8";	11	?>@charset "UTF-8";
12		12
13	<?php	13	<?php
14	if (!isset($_GET['ani']) \|\| $_GET['ani'] !== '0')	14	if (!isset($_GET['ani']) \|\| $_GET['ani'] !== '0')
15	{	15	{
16	?>	16	?>
17	@import url("/styles/lcars-ani.css");	17	@import url("/styles/lcars-ani.css");
18	<?php	18	<?php
19	}	19	}
20	?>	20	?>
21		21
22	body {	22	body {
23	margin-top: 12em;	23	margin-top: 12em;
24	margin-left: 22em;	24	margin-left: 22em;
25	margin-right: 0.2em;	25	margin-right: 0.2em;
26	margin-bottom: 0.2em;	26	margin-bottom: 0.2em;
27	}	27	}
-		28
-		29	/* HTML5 elements */
-		30
-		31	nav
-		32	{
-		33	display: block;
-		34	}
28		35
29	/* Bow (main) and elbo (multi-view) */	36	/* Bow (main) and elbo (multi-view) */
30		37
31	#LCARS {	38	#LCARS {
32	position: fixed;	39	position: fixed;
33	left: 0;	40	left: 0;
34	top: 0;	41	top: 0;
35	right: 0;	42	right: 0;
36	padding: 0.2em;	43	padding: 0.2em;
37	background-color: #000;	44	background-color: #000;
38	z-index: 1701;	45	z-index: 1701;
39	}	46	}
40		47
41	#bow {	48	#bow {
42	position: absolute;	49	position: absolute;
43	left: 0.2em;	50	left: 0.2em;
44	top: 0.2em;	51	top: 0.2em;
45	right: 0.2em;	52	right: 0.2em;
46	height: 2.4em;	53	height: 2.4em;
47	padding-bottom: 0.2em;	54	padding-bottom: 0.2em;
48	background-color: #000;	55	background-color: #000;
49	}	56	}
50		57
51	#bow-top {	58	#bow-top {
52	/* NOTE: position: absolute is needed for animation */	59	/* NOTE: position: absolute is needed for animation */
53	position: absolute;	60	position: absolute;
54	top: 0;	61	top: 0;
55	left: 0;	62	left: 0;
56	right: 0;	63	right: 0;
57	min-width: 15.4em;	64	min-width: 15.4em;
58	height: 2em;	65	height: 2em;
59	background-color: #999;	66	background-color: #999;
60	border-top-left-radius: 2.4em;	67	border-top-left-radius: 2.4em;
61	border-top-right-radius: 1.2em;	68	border-top-right-radius: 1.2em;
62	border-bottom-right-radius: 1.2em;	69	border-bottom-right-radius: 1.2em;
63	line-height: 0.9;	70	line-height: 0.9;
64	}	71	}
65		72
66	.empty #bow-top {	73	.empty #bow-top {
67	border-top-left-radius: 1.2em;	74	border-top-left-radius: 1.2em;
68	border-bottom-left-radius: 1.2em;	75	border-bottom-left-radius: 1.2em;
69	min-width: 10em;	76	min-width: 10em;
70	}	77	}
71		78
72		79
73	#bow-top .text {	80	#bow-top .text {
74	position: absolute;	81	position: absolute;
75	margin: 0;	82	margin: 0;
76	left: 4.33em;	83	left: 4.33em;
77	top: 0;	84	top: 0;
78	right: 0.75em;	85	right: 0.75em;
79	height: 1em;	86	height: 1em;
80	text-align: right;	87	text-align: right;
81	color: #fc0;	88	color: #fc0;
82	font-size: 2.4em;	89	font-size: 2.4em;
83	padding-right: 0.1em;	90	padding-right: 0.1em;
84	overflow: hidden;	91	overflow: hidden;
85	text-overflow: ellipsis;	92	text-overflow: ellipsis;
86	}	93	}
87		94
88	.empty #bow-top .text {	95	.empty #bow-top .text {
89	left: 0.93em;	96	left: 0.93em;
90	}	97	}
91		98
92		99
93		100
94	#bow-top .text span {	101	#bow-top .text span {
95	padding-right: 0.1em;	102	padding-right: 0.1em;
96	background-color: #000;	103	background-color: #000;
97	padding-left: 0.1em;	104	padding-left: 0.1em;
98	text-transform: uppercase;	105	text-transform: uppercase;
99	white-space: nowrap;	106	white-space: nowrap;
100	}	107	}
101		108
102	.empty #footer-container {	109	.empty #footer-container {
103	position: fixed;	110	position: fixed;
104	left: 0.2em;	111	left: 0.2em;
105	bottom: 0;	112	bottom: 0;
106	right: 0.2em;	113	right: 0.2em;
107	min-height: 2.4em;	114	min-height: 2.4em;
108	padding-top: 0.2em;	115	padding-top: 0.2em;
109	padding-bottom: 0.2em;	116	padding-bottom: 0.2em;
110	background-color: #000;	117	background-color: #000;
111	}	118	}
112		119
113		120
114	.empty #footer {	121	.empty #footer {
115	position: absolute;	122	position: absolute;
116	bottom: 0;	123	bottom: 0;
117	left: 0;	124	left: 0;
118	right: 0;	125	right: 0;
119	height: 2em;	126	height: 2em;
120	min-width: 10em;	127	min-width: 10em;
121	margin-bottom: 0.2em;	128	margin-bottom: 0.2em;
122	background-color: #999;	129	background-color: #999;
123	border-radius: 1.2em;	130	border-radius: 1.2em;
124	line-height: 0.9;	131	line-height: 0.9;
125	}	132	}
126		133
127	.empty #footer .text {	134	.empty #footer .text {
128	position: absolute;	135	position: absolute;
129	margin: 0;	136	margin: 0;
130	left: 0.93em;	137	left: 0.93em;
131	top: 0;	138	top: 0;
132	right: 0.75em;	139	right: 0.75em;
133	height: 1em;	140	height: 1em;
134	background-color: transparent;	141	background-color: transparent;
135	color: #fc0;	142	color: #fc0;
136	font-size: 2.4em;	143	font-size: 2.4em;
137	padding-right: 0.1em;	144	padding-right: 0.1em;
138	overflow: hidden;	145	overflow: hidden;
139	text-overflow: ellipsis;	146	text-overflow: ellipsis;
140	}	147	}
141		148
142	.empty #footer .text span {	149	.empty #footer .text span {
143	padding-right: 0.1em;	150	padding-right: 0.1em;
144	background-color: #000;	151	background-color: #000;
145	padding-left: 0.1em;	152	padding-left: 0.1em;
146	text-transform: uppercase;	153	text-transform: uppercase;
147	white-space: nowrap;	154	white-space: nowrap;
148	}	155	}
149		156
150	.empty .separator-left {	157	.empty .separator-left {
151	position: absolute;	158	position: absolute;
152	left: 2em;	159	left: 2em;
153	height: 2em;	160	height: 2em;
154	width: 0.25em;	161	width: 0.25em;
155	background-color: #000;	162	background-color: #000;
156	}	163	}
157		164
158	.empty .separator-right {	165	.empty .separator-right {
159	position: absolute;	166	position: absolute;
160	right: 2em;	167	right: 2em;
161	height: 2em;	168	height: 2em;
162	width: 0.25em;	169	width: 0.25em;
163	background-color: #000;	170	background-color: #000;
164	}	171	}
165		172
166	.bow {	173	.bow {
167	background-color: #999;	174	background-color: #999;
168	}	175	}
169		176
170	#bow-top-left {	177	#bow-top-left {
171	position: absolute;	178	position: absolute;
172	top: 2em;	179	top: 2em;
173	left: 0;	180	left: 0;
174	right: 0;	181	right: 0;
175	height: 4.4em;	182	height: 4.4em;
176	width: 9.2em;	183	width: 9.2em;
177	background-color: #999;	184	background-color: #999;
178	overflow: hidden;	185	overflow: hidden;
179	}	186	}
180		187
181	.empty #bow-top-left {	188	.empty #bow-top-left {
182	display: none;	189	display: none;
183	}	190	}
184		191
185	#bow-top-left .concave {	192	#bow-top-left .concave {
186	position: absolute;	193	position: absolute;
187	top: 0;	194	top: 0;
188	left: 8em;	195	left: 8em;
189	height: 4.4em;	196	height: 4.4em;
190	width: 1.2em;	197	width: 1.2em;
191	background-color: #000;	198	background-color: #000;
192	border-top-left-radius: 1.2em;	199	border-top-left-radius: 1.2em;
193	}	200	}
194		201
195	.empty #bow-top-left-concave {	202	.empty #bow-top-left-concave {
196	display: none;	203	display: none;
197	}	204	}
198		205
199	.menu-container {	206	.menu-container {
200	position: fixed;	207	position: fixed;
201	left: 0.2em;	208	left: 0.2em;
202	top: 6.8em;	209	top: 6.8em;
203	width: 8em;	210	width: 8em;
204	bottom: 2.8em;	211	bottom: 2.8em;
205	background-color: #999;	212	background-color: #999;
206	overflow: auto;	213	overflow: auto;
207	overflow-x: hidden;	214	overflow-x: hidden;
208	overflow-y: auto;	215	overflow-y: auto;
209	}	216	}
210		217
211	.menu	218	.menu
212	{	219	{
213	height: 20em;	220	height: 20em;
214	background-color: #000;	221	background-color: #000;
215	}	222	}
216		223
217	.menu ul {	224	.menu ul {
218	margin: 0 0.2em 0 0;	225	margin: 0 0.2em 0 0;
219	padding: 0;	226	padding: 0;
220	}	227	}
221		228
222	.menu li {	229	.menu li {
223	margin: 0;	230	margin: 0;
224	}	231	}
225		232
226	#bow #bottom	233	#bow #bottom
227	{	234	{
228	position: fixed;	235	position: fixed;
229	left: 0;	236	left: 0;
230	bottom: 0;	237	bottom: 0;
231	width: 20.8em;	238	width: 20.8em;
232	height: 2.4em;	239	height: 2.4em;
233	background-color: #000;	240	background-color: #000;
234	z-index: 1701;	241	z-index: 1701;
235	}	242	}
236		243
237	#bow-bottom {	244	#bow-bottom {
238	position: absolute;	245	position: absolute;
239	bottom: 0.2em;	246	bottom: 0.2em;
240	left: 0.2em;	247	left: 0.2em;
241	width: 20.6em;	248	width: 20.6em;
242	height: 2.4em;	249	height: 2.4em;
243	border-bottom-left-radius: 2.4em;	250	border-bottom-left-radius: 2.4em;
244	border-bottom-right-radius: 2em;	251	border-bottom-right-radius: 2em;
245	background-color: #999;	252	background-color: #999;
246	}	253	}
247		254
248	.empty #bow-bottom {	255	.empty #bow-bottom {
249	display: none;	256	display: none;
250	}	257	}
251		258
252	#bow-bottom .concave {	259	#bow-bottom .concave {
253	position: absolute;	260	position: absolute;
254	margin-left: 0.2em;	261	margin-left: 0.2em;
255	margin-bottom: 0.2em;	262	margin-bottom: 0.2em;
256	bottom: 0.3em;	263	bottom: 0.3em;
257	left: 7.8em;	264	left: 7.8em;
258	height: 2.1em;	265	height: 2.1em;
259	width: 7.6em;	266	width: 7.6em;
260	border-bottom-left-radius: 1.2em;	267	border-bottom-left-radius: 1.2em;
261	border-bottom-right-radius: 1em;	268	border-bottom-right-radius: 1em;
262	background-color: #000;	269	background-color: #000;
263	}	270	}
264		271
265	#bow-bottom .spacer {	272	#bow-bottom .spacer {
266	position: absolute;	273	position: absolute;
267	left: 10.2em;	274	left: 10.2em;
268	bottom: 0;	275	bottom: 0;
269	width: 0.2em;	276	width: 0.2em;
270	height: 0.5em;	277	height: 0.5em;
271	background-color: black;	278	background-color: black;
272	}	279	}
273		280
274	.empty #bow-bottom-left-concave {	281	.empty #bow-bottom-left-concave {
275	display: none;	282	display: none;
276	}	283	}
277		284
278	/* Controls */	285	/* Controls */
279		286
280	.button:visited,	287	.button:visited,
281	.button	288	.button
282	{	289	{
283	position: relative;	290	position: relative;
284	display: inline-block;	291	display: inline-block;
285	margin-right: 0.2em;	292	margin-right: 0.2em;
286	margin-bottom: 0.2em;	293	margin-bottom: 0.2em;
287	width: 5em;	294	width: 5em;
288	height: 2em;	295	height: 2em;
289	background-color: #7d7d7d; /* c9c */	296	background-color: #7d7d7d; /* c9c */
290	color: #000 !important;	297	color: #000 !important;
291	text-decoration: none !important;	298	text-decoration: none !important;
292	text-transform: uppercase;	299	text-transform: uppercase;
293	overflow: hidden;	300	overflow: hidden;
294	cursor: pointer !important;	301	cursor: pointer !important;
295	}	302	}
296		303
297	.button .text {	304	.button .text {
298	position: absolute;	305	position: absolute;
299	bottom: 0;	306	bottom: 0;
300	right: 0.5em;	307	right: 0.5em;
301	cursor: pointer !important;	308	cursor: pointer !important;
302	}	309	}
303		310
304	.button.command {	311	.button.command {
305	border-radius: 1.2em;	312	border-radius: 1.2em;
306	}	313	}
307		314
308	.button.command .text {	315	.button.command .text {
309	position: absolute;	316	position: absolute;
310	bottom: 0;	317	bottom: 0;
311	right: 1em;	318	right: 1em;
312	}	319	}
313		320
314	.button:hover,	321	.button:hover,
315	.button:focus,	322	.button:focus,
316	.button.selected:hover,	323	.button.selected:hover,
317	.button.selected:focus,	324	.button.selected:focus,
318	.group .button:hover,	325	.group .button:hover,
319	.group .button:focus,	326	.group .button:focus,
320	.group .button:visited:hover,	327	.group .button:visited:hover,
321	.group .button:visited:focus	328	.group .button:visited:focus
322	{	329	{
323	background-color: #f90 !important;	330	background-color: #f90 !important;
324	color: #000 !important;	331	color: #000 !important;
325	}	332	}
326		333
327	.button:active,	334	.button:active,
328	.button.selected:active,	335	.button.selected:active,
329	.group .button:active,	336	.group .button:active,
330	.group .button:visited:active	337	.group .button:visited:active
331	{	338	{
332	background-color: #fff !important;	339	background-color: #fff !important;
333	color: #000 !important;	340	color: #000 !important;
334	}	341	}
335		342
336	.menu .button {	343	.menu .button {
337	display: block;	344	display: block;
338	width: 8em;	345	width: 8em;
339	height: 1em;	346	height: 1em;
340	line-height: 1;	347	line-height: 1;
341	background-color: #9cf;	348	background-color: #9cf;
342	color: #000 !important;	349	color: #000 !important;
343	text-overflow: ellipsis;	350	text-overflow: ellipsis;
344	white-space: nowrap;	351	white-space: nowrap;
345	}	352	}
346		353
347	#connectors {	354	#connectors {
348	position: fixed;	355	position: fixed;
349	left: 8.4em;	356	left: 8.4em;
350	top: 5.6em;	357	top: 5.6em;
351	}	358	}
352		359
353	.multi-display	360	.multi-display
354	{	361	{
355	position: fixed;	362	position: fixed;
356	top: 2.6em;	363	top: 2.6em;
357	left: 15.8em;	364	left: 15.8em;
358	right: 0;	365	right: 0;
359	}	366	}
360		367
361	.multi-display .button	368	.multi-display .button
362	{	369	{
363	width: 5em !important;	370	width: 5em !important;
364	}	371	}
365		372
366	.multi-display .upper	373	.multi-display .upper
367	{	374	{
368	position: absolute;	375	position: absolute;
369	top: 0;	376	top: 0;
370	left: 0;	377	left: 0;
371	right: 0;	378	right: 0;
372	height: 7.5em;	379	height: 7.5em;
373	padding-right: 0.2em;	380	padding-right: 0.2em;
374	background-color: black;	381	background-color: black;
375	}	382	}
376		383
377	.multi-display .upper .content	384	.multi-display .upper .content
378	{	385	{
379	position: absolute;	386	position: absolute;
380	top: 0;	387	top: 0;
381	left: 6em;	388	left: 6em;
382	bottom: 1.3em;	389	bottom: 1.3em;
383	right: 0.2em;	390	right: 0.2em;
384	background-color: black;	391	background-color: black;
385	color: white;	392	color: white;
386	text-align: right;	393	text-align: right;
387	overflow: hidden;	394	overflow: hidden;
388	text-overflow: ellipsis;	395	text-overflow: ellipsis;
389	}	396	}
390		397
391	.multi-display .upper .content .title	398	.multi-display .upper .content .title
392	{	399	{
393	position: absolute;	400	position: absolute;
394	top: 0;	401	top: 0;
395	left: 0;	402	left: 0;
396	height: 1em;	403	height: 1em;
397	right: 0;	404	right: 0;
398	background-color: black;	405	background-color: black;
399	color: white;	406	color: white;
400	font-size: 2.4em;	407	font-size: 2.4em;
401	text-transform: uppercase;	408	text-transform: uppercase;
402	text-align: right;	409	text-align: right;
403	overflow: hidden;	410	overflow: hidden;
404	text-overflow: ellipsis;	411	text-overflow: ellipsis;
405	}	412	}
406		413
407	.multi-display .upper .content .title span	414	.multi-display .upper .content .title span
408	{	415	{
409	white-space: nowrap;	416	white-space: nowrap;
410	}	417	}
411		418
412	.multi-display .upper .content .analysis {	419	.multi-display .upper .content .analysis {
413	position: absolute;	420	position: absolute;
414	top: 2.4em;	421	top: 2.4em;
415	bottom: 0;	422	bottom: 0;
416	right: 11em;	423	right: 11em;
417	left: 0;	424	left: 0;
418	overflow: hidden;	425	overflow: hidden;
419	text-overflow: ellipsis;	426	text-overflow: ellipsis;
420	text-align: left;	427	text-align: left;
421	}	428	}
422		429
423	.multi-display .upper .content .commands	430	.multi-display .upper .content .commands
424	{	431	{
425	position: absolute;	432	position: absolute;
426	margin: 0;	433	margin: 0;
427	padding: 0;	434	padding: 0;
428	top: 2.4em;	435	top: 2.4em;
429	right: 0;	436	right: 0;
430	height: 3.8em;	437	height: 3.8em;
431	width: 10.2em;	438	width: 10.2em;
432	list-style: none;	439	list-style: none;
433	}	440	}
434		441
435	.multi-display .upper .content .commands li	442	.multi-display .upper .content .commands li
436	{	443	{
437	position: absolute;	444	position: absolute;
438	margin: 0;	445	margin: 0;
439	width: 5em;	446	width: 5em;
440	height: 1.8em;	447	height: 1.8em;
441	}	448	}
442		449
443	.multi-display .upper .content .commands .button	450	.multi-display .upper .content .commands .button
444	{	451	{
445	position: absolute;	452	position: absolute;
446	top: 0;	453	top: 0;
447	left: 0;	454	left: 0;
448	margin: 0;	455	margin: 0;
449	height: 1.8em;	456	height: 1.8em;
450	border-radius: 0.9em;	457	border-radius: 0.9em;
451	text-transform: none;	458	text-transform: none;
452	}	459	}
453		460
454	.multi-display .upper .content .commands .button .text {	461	.multi-display .upper .content .commands .button .text {
455	right: 1em;	462	right: 1em;
456	}	463	}
457		464
458	.multi-display .upper .content #cmd1	465	.multi-display .upper .content #cmd1
459	{	466	{
460	top: 0;	467	top: 0;
461	right: 5.2em;	468	right: 5.2em;
462	}	469	}
463		470
464	.multi-display .upper .content #cmd2	471	.multi-display .upper .content #cmd2
465	{	472	{
466	top: 0;	473	top: 0;
467	right: 0;	474	right: 0;
468	}	475	}
469		476
470	.multi-display .upper .content #cmd3	477	.multi-display .upper .content #cmd3
471	{	478	{
472	top: 2em;	479	top: 2em;
473	right: 0;	480	right: 0;
474	}	481	}
475		482
476	.multi-display .upper .content #cmd4	483	.multi-display .upper .content #cmd4
477	{	484	{
478	top: 2em;	485	top: 2em;
479	right: 5.2em;	486	right: 5.2em;
480	}	487	}
481		488
482	.multi-display .upper .elbo-button	489	.multi-display .upper .elbo-button
483	{	490	{
484	position: absolute;	491	position: absolute;
485	top: 0;	492	top: 0;
486	left: 0;	493	left: 0;
487	width: 5em;	494	width: 5em;
488	height: 4em;	495	height: 4em;
489	background-color: #c9c !important;	496	background-color: #c9c !important;
490	color: #000 !important;	497	color: #000 !important;
491	cursor: default;	498	cursor: default;
492	}	499	}
493		500

Subversion Repositories LCARS

(root)/trunk/styles/lcars22.css @ 228 - Rev 109 → 116