WebSVN - LCARS - Diff - Rev 118 and 119 - /trunk/styles/lcars22.css


<?php
namespace de\pointedears\css\least;

\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=86400, 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');

require_once 'css/least/Mixins.php';
?>@charset "UTF-8";

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

body {
  margin-top: 12em;
  margin-left: 16.8em;
  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: 10.4em;
  height: 2.4em;
  background-color: #000;
  z-index: 1701;
}

#bow-bottom {
  position: absolute;
  bottom: 0.2em;
  left: 0.2em;
  width: 8em;
  height: 2.6em;
  border-bottom-left-radius: 0em;
  border-bottom-right-radius: 0em;
  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: 2.2em;
  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;
}

#connectors div {
  position: absolute;
}

#connectors .top {
  top: 0;
  height: 1em;
}

#connectors .mid {
  top: 13.6em;
  height: 0.8em;
}

#connectors .left {
  left: 0;
  width: 2em;
}

#connectors .right {
  left: 2.2em;
  width: 0em;
}

.multi-display
{
  position: fixed;
  top: 2.6em;
  left: 10.6em;
  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;
}

.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-align: left;
  cursor: default;
}

.multi-display .upper .content .analysis table {
  border-collapse: collapse;
  line-height: 1.2;
  max-width: 100%;
}
 
.multi-display .upper .content .analysis th {
  padding: 0 0.1em;
  font-weight: normal;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: baseline;
}

.multi-display .upper .content .analysis td {
  padding: 0 0.1em;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: baseline;
  text-overflow: ellipsis;
}

.multi-display .upper .content .analysis tr:hover th,
.multi-display .upper .content .analysis tr:hover td
{
  color: #f90;
}

.multi-display .upper .content .analysis td sup {
  line-height: 1;
  font-weight: 500;
}

.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: 0.2em;
  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;
 
}

/* Responsive Web Design (TODO: Move to imported stylesheet; but see above) */

body {
  <?php
    Mixins::transition('', 'margin-left 0.5s 0.5s ease');
  ?>
}

#bow #bottom
{
  <?php
    Mixins::transition('', 'width 0.5s 0.5s ease');
  ?>
}

#bow-bottom {
  <?php
    Mixins::transition('-property', 'border-bottom-left-radius, border-bottom-right-radius, height, width');
    Mixins::transition('-delay', '0.5s');
    Mixins::transition('-duration', '0.5s');
    Mixins::transition('-timing-function', 'ease');
  ?>
}

#bow-bottom .concave {
  <?php
    Mixins::transition('', 'width 0.5s 0.5s ease');
  ?>
}

#connectors .right {
  <?php
    Mixins::transition('', 'width 0.5s 0.5s ease');
  ?>
}

.multi-display
{
  <?php
    Mixins::transition('', 'left 0.5s 0.5s ease');
  ?>
}

.multi-display .lower .bg
{
  <?php
    /* Wait 1s for bow to become shallower */
    Mixins::transition('', 'bottom 2.5s 0.5s ease');
  ?>
}

@media all and (min-width: 1024px) {
  body {
    margin-left: 22em;
  <?php
    Mixins::transition('', 'margin-left 0.5s 0.5s ease');
  ?>
  }

  #bow #bottom
  {
    width: 20.8em;
  <?php
    /* Wait 0.5s for multi-display to be reduced in height */
    Mixins::transition('', 'width 1.0s 0.5s ease');
  ?>
  }
   
  #bow-bottom {
    border-bottom-left-radius: 2.4em;
    border-bottom-right-radius: 2em;
    height: 2.4em;
    width: 20.6em;
  <?php
    Mixins::transition('-property', 'border-bottom-left-radius, border-bottom-right-radius, height, width');
    Mixins::transition('-delay', '1.0s');
    Mixins::transition('-duration', '0.5s');
    Mixins::transition('-timing-function', 'ease');
  ?>
  }
 
  #bow-bottom .concave {
    width: 7.6em;
  <?php
    Mixins::transition('', 'width 1.0s 0.5s ease');
  ?>
  }

  #connectors .right {
    width: 5em;
    <?php
      /* Wait 1.0s for multi-display to be moved to right */
      Mixins::transition('', 'width 1.0s 0.5s ease');
    ?>
  }
 
  .multi-display
  {
    left: 15.8em;
  <?php
    Mixins::transition('', 'left 0.5s 0.5s ease');
  ?>
  }
 
  .multi-display .lower .bg
  {
    bottom: 2.8em;
    <?php
      Mixins::transition('', 'bottom 0.5s 0.5s ease');
    ?>
  }  
}
 

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

Subversion Repositories LCARS

(root)/trunk/styles/lcars22.css - Rev 118 → 119