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

Subversion Repositories LCARS

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