WebSVN - LCARS - Diff - Rev 169 and 175 - /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=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';
use de\pointedears\css\least\Mixins;
?>@charset "UTF-8";

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

<?php
  /* Non-optional content-specific animations */
  Mixins::keyframes('analysis', <<<CSS
    from, 74% {
      opacity: 0;
    }

    75%, to {
      opacity: 1;
      color: #fc6;
    }
CSS
   );
?>

<?php
  Mixins::keyframes('analysis-scan', <<<CSS
    from, 25% {
      color: #fc6;
    }
   
    26%, to {
      color: #fff;
    }
CSS
   );
   
   /* FIXME: :hover hides first row */
/*
.multi-display .upper .content .analysis:hover tr {
  <?php
    Mixins::animation('-play-state', 'paused');
  ?>
}
*/
?>
 
.multi-display .upper .content .analysis tr:hover
{
        color: #f90 !important;
}
 
/* Blink rate 1 Hz should be safe for people with photosensitive epilepsy */
.multi-display .upper .content .analysis tr:nth-child(1)
{
  <?php
    Mixins::animation('', 'analysis 1.5s linear 0s, analysis-scan 4s linear 2.0s infinite');
  ?>  
}

.multi-display .upper .content .analysis tr:nth-child(2)
{
  <?php
    Mixins::animation('', 'analysis 1.5s linear 0.25s, analysis-scan 4s linear 3.0s infinite');
  ?>  
}

.multi-display .upper .content .analysis tr:nth-child(3)
{
  <?php
    Mixins::animation('', 'analysis 1.5s linear 0.5s, analysis-scan 4s linear 4.0s infinite');
  ?>  
}

<?php
  Mixins::keyframes('analysis-offline', <<<CSS
    from, 33% {
      color: #300;
    }
   
    34%, to {
      color: #f00;
    }
CSS
   );
?>

.offline {
  <?php
    Mixins::animation('', 'analysis-offline 3s linear 2.0s infinite');
  ?>
}

 
 
 
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: 23.6em;
  background-color: #000;
}

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

.menu ul:first-child {
  padding-top: 1em;
}

.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.4em;
  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 bow {
  width: 8em;
}

.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 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;
}

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<?php require_once 'lcars-responsive.css'; ?>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 


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

Subversion Repositories LCARS

(root)/trunk/styles/lcars22.css - Rev 169 → 175