WebSVN - LCARS - Diff - Rev 220 and 236 - /branches/live/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 !important;
  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: 24em;
  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 */

input,
select
{
  margin: 0 0.2em 0.2em 0;
  font-size: 1em;
}

input
{
  min-width: 4.875em;
  border: 1px solid #7d7d7d;
  padding: 0 0.125em;
  background-color: #000;
  color: #fff;
}

input:focus
{
  border-color: #f90;
}

select
{
  min-width: 5em;
  background-color: #7d7d7d;
  color: #000 !important;
  border: none;
}

select:focus
{
  background-color: #f90;
  color: #000;
}

option {
  background-color: #000;
  color: #fff;
}

option:checked {
  color: #fc6;
}

.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;
  /* overflow: hidden; */
  cursor: pointer !important;
}

.button .text {
  position: absolute;
  bottom: 0;
  right: 0.5em;
  max-width: 3.5em;
  overflow: hidden;
  cursor: pointer !important;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

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

#content.fixed {
  position: fixed;
  margin-right: 0.2em;
  top: 12em;
  right: 0;
  bottom: 0.2em;
  left: 16.8em;
  overflow: hidden;
}

.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;
  background-color: #000;
  color: #fc0;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: baseline;
}

.multi-display .upper .content .analysis th:nth-child(3) {
  padding-left: 0.7em;
}

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

.multi-display .commands .button .text
{
  text-transform: none !important;
}

.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: 4.2em;
  max-height: 3.6em;
  text-align: right;
  overflow: hidden;
  word-wrap: break-word;
}

.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: 4.2em;
  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-family: "LCARS",
    Haettenschweiler, "Downloadable Haettenschweiler",
    "Zurich XCn BT", "Downloadable Zurich XCn BT",
    impact, Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 2.4em;
  text-transform: uppercase !important;
  line-height: 0.9;
}

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

Rev 220	Rev 236
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	body {	109	body {
110	margin-top: 12em;	110	margin-top: 12em;
111	margin-left: 16.8em;	111	margin-left: 16.8em;
112	margin-right: 0.2em;	112	margin-right: 0.2em;
113	margin-bottom: 0.2em;	113	margin-bottom: 0.2em;
114	}	114	}
115		115
116	/* HTML5 elements */	116	/* HTML5 elements */
117		117
118	nav	118	nav
119	{	119	{
120	display: block;	120	display: block;
121	}	121	}
122		122
123	/* Bow (main) and elbo (multi-view) */	123	/* Bow (main) and elbo (multi-view) */
124		124
125	#LCARS {	125	#LCARS {
126	position: fixed;	126	position: fixed;
127	left: 0;	127	left: 0;
128	top: 0;	128	top: 0;
129	right: 0;	129	right: 0;
130	padding: 0.2em;	130	padding: 0.2em;
131	background-color: #000;	131	background-color: #000;
132	z-index: 1701;	132	z-index: 1701;
133	}	133	}
134		134
135	#bow {	135	#bow {
136	position: absolute;	136	position: absolute;
137	left: 0.2em;	137	left: 0.2em;
138	top: 0.2em;	138	top: 0.2em;
139	right: 0.2em;	139	right: 0.2em;
140	height: 2.4em;	140	height: 2.4em;
141	padding-bottom: 0.2em;	141	padding-bottom: 0.2em;
142	background-color: #000;	142	background-color: #000;
143	}	143	}
144		144
145	#bow-top {	145	#bow-top {
146	/* NOTE: position: absolute is needed for animation */	146	/* NOTE: position: absolute is needed for animation */
147	position: absolute;	147	position: absolute;
148	top: 0;	148	top: 0;
149	left: 0;	149	left: 0;
150	right: 0;	150	right: 0;
151	min-width: 15.4em;	151	min-width: 15.4em;
152	height: 2em;	152	height: 2em;
153	background-color: #999;	153	background-color: #999;
154	border-top-left-radius: 2.4em;	154	border-top-left-radius: 2.4em;
155	border-top-right-radius: 1.2em;	155	border-top-right-radius: 1.2em;
156	border-bottom-right-radius: 1.2em;	156	border-bottom-right-radius: 1.2em;
157	line-height: 0.9;	157	line-height: 0.9;
158	}	158	}
159		159
160	.empty #bow-top {	160	.empty #bow-top {
161	border-top-left-radius: 1.2em;	161	border-top-left-radius: 1.2em;
162	border-bottom-left-radius: 1.2em;	162	border-bottom-left-radius: 1.2em;
163	min-width: 10em;	163	min-width: 10em;
164	}	164	}
165		165
166		166
167	#bow-top .text {	167	#bow-top .text {
168	position: absolute;	168	position: absolute;
169	margin: 0;	169	margin: 0;
170	left: 4.33em;	170	left: 4.33em;
171	top: 0;	171	top: 0;
172	right: 0.75em;	172	right: 0.75em;
173	height: 1em;	173	height: 1em;
174	text-align: right;	174	text-align: right;
175	color: #fc0;	175	color: #fc0;
176	font-size: 2.4em;	176	font-size: 2.4em;
177	padding-right: 0.1em;	177	padding-right: 0.1em;
178	overflow: hidden;	178	overflow: hidden;
179	text-overflow: ellipsis;	179	text-overflow: ellipsis;
180	}	180	}
181		181
182	.empty #bow-top .text {	182	.empty #bow-top .text {
183	left: 0.93em;	183	left: 0.93em;
184	}	184	}
185		185
186		186
187		187
188	#bow-top .text span {	188	#bow-top .text span {
189	padding-right: 0.1em;	189	padding-right: 0.1em;
190	background-color: #000;	190	background-color: #000;
191	padding-left: 0.1em;	191	padding-left: 0.1em;
192	text-transform: uppercase;	192	text-transform: uppercase !important;
193	white-space: nowrap;	193	white-space: nowrap;
194	}	194	}
195		195
196	.empty #footer-container {	196	.empty #footer-container {
197	position: fixed;	197	position: fixed;
198	left: 0.2em;	198	left: 0.2em;
199	bottom: 0;	199	bottom: 0;
200	right: 0.2em;	200	right: 0.2em;
201	min-height: 2.4em;	201	min-height: 2.4em;
202	padding-top: 0.2em;	202	padding-top: 0.2em;
203	padding-bottom: 0.2em;	203	padding-bottom: 0.2em;
204	background-color: #000;	204	background-color: #000;
205	}	205	}
206		206
207		207
208	.empty #footer {	208	.empty #footer {
209	position: absolute;	209	position: absolute;
210	bottom: 0;	210	bottom: 0;
211	left: 0;	211	left: 0;
212	right: 0;	212	right: 0;
213	height: 2em;	213	height: 2em;
214	min-width: 10em;	214	min-width: 10em;
215	margin-bottom: 0.2em;	215	margin-bottom: 0.2em;
216	background-color: #999;	216	background-color: #999;
217	border-radius: 1.2em;	217	border-radius: 1.2em;
218	line-height: 0.9;	218	line-height: 0.9;
219	}	219	}
220		220
221	.empty #footer .text {	221	.empty #footer .text {
222	position: absolute;	222	position: absolute;
223	margin: 0;	223	margin: 0;
224	left: 0.93em;	224	left: 0.93em;
225	top: 0;	225	top: 0;
226	right: 0.75em;	226	right: 0.75em;
227	height: 1em;	227	height: 1em;
228	background-color: transparent;	228	background-color: transparent;
229	color: #fc0;	229	color: #fc0;
230	font-size: 2.4em;	230	font-size: 2.4em;
231	padding-right: 0.1em;	231	padding-right: 0.1em;
232	overflow: hidden;	232	overflow: hidden;
233	text-overflow: ellipsis;	233	text-overflow: ellipsis;
234	}	234	}
235		235
236	.empty #footer .text span {	236	.empty #footer .text span {
237	padding-right: 0.1em;	237	padding-right: 0.1em;
238	background-color: #000;	238	background-color: #000;
239	padding-left: 0.1em;	239	padding-left: 0.1em;
240	text-transform: uppercase;	240	text-transform: uppercase;
241	white-space: nowrap;	241	white-space: nowrap;
242	}	242	}
243		243
244	.empty .separator-left {	244	.empty .separator-left {
245	position: absolute;	245	position: absolute;
246	left: 2em;	246	left: 2em;
247	height: 2em;	247	height: 2em;
248	width: 0.25em;	248	width: 0.25em;
249	background-color: #000;	249	background-color: #000;
250	}	250	}
251		251
252	.empty .separator-right {	252	.empty .separator-right {
253	position: absolute;	253	position: absolute;
254	right: 2em;	254	right: 2em;
255	height: 2em;	255	height: 2em;
256	width: 0.25em;	256	width: 0.25em;
257	background-color: #000;	257	background-color: #000;
258	}	258	}
259		259
260	.bow {	260	.bow {
261	background-color: #999;	261	background-color: #999;
262	}	262	}
263		263
264	#bow-top-left {	264	#bow-top-left {
265	position: absolute;	265	position: absolute;
266	top: 2em;	266	top: 2em;
267	left: 0;	267	left: 0;
268	right: 0;	268	right: 0;
269	height: 4.4em;	269	height: 4.4em;
270	width: 9.2em;	270	width: 9.2em;
271	background-color: #999;	271	background-color: #999;
272	overflow: hidden;	272	overflow: hidden;
273	}	273	}
274		274
275	.empty #bow-top-left {	275	.empty #bow-top-left {
276	display: none;	276	display: none;
277	}	277	}
278		278
279	#bow-top-left .concave {	279	#bow-top-left .concave {
280	position: absolute;	280	position: absolute;
281	top: 0;	281	top: 0;
282	left: 8em;	282	left: 8em;
283	height: 4.4em;	283	height: 4.4em;
284	width: 1.2em;	284	width: 1.2em;
285	background-color: #000;	285	background-color: #000;
286	border-top-left-radius: 1.2em;	286	border-top-left-radius: 1.2em;
287	}	287	}
288		288
289	.empty #bow-top-left-concave {	289	.empty #bow-top-left-concave {
290	display: none;	290	display: none;
291	}	291	}
292		292
293	.menu-container {	293	.menu-container {
294	position: fixed;	294	position: fixed;
295	left: 0.2em;	295	left: 0.2em;
296	top: 6.8em;	296	top: 6.8em;
297	width: 8em;	297	width: 8em;
298	bottom: 2.8em;	298	bottom: 2.8em;
299	background-color: #999;	299	background-color: #999;
300	overflow: auto;	300	overflow: auto;
301	overflow-x: hidden;	301	overflow-x: hidden;
302	overflow-y: auto;	302	overflow-y: auto;
303	}	303	}
304		304
305	.menu	305	.menu
306	{	306	{
307	height: 24em;	307	height: 24em;
308	background-color: #000;	308	background-color: #000;
309	}	309	}
310		310
311	.menu ul {	311	.menu ul {
312	margin: 0 0.2em 0 0;	312	margin: 0 0.2em 0 0;
313	padding: 0;	313	padding: 0;
314	}	314	}
315		315
316	.menu ul:first-child {	316	.menu ul:first-child {
317	padding-top: 1em;	317	padding-top: 1em;
318	}	318	}
319		319
320	.menu li {	320	.menu li {
321	margin: 0;	321	margin: 0;
322	}	322	}
323		323
324	#bow #bottom	324	#bow #bottom
325	{	325	{
326	position: fixed;	326	position: fixed;
327	left: 0;	327	left: 0;
328	bottom: 0;	328	bottom: 0;
329	width: 10.4em;	329	width: 10.4em;
330	height: 2.4em;	330	height: 2.4em;
331	background-color: #000;	331	background-color: #000;
332	z-index: 1701;	332	z-index: 1701;
333	}	333	}
334		334
335	#bow-bottom {	335	#bow-bottom {
336	position: absolute;	336	position: absolute;
337	bottom: 0.2em;	337	bottom: 0.2em;
338	left: 0.2em;	338	left: 0.2em;
339	width: 8em;	339	width: 8em;
340	height: 2.4em;	340	height: 2.4em;
341	border-bottom-left-radius: 0em;	341	border-bottom-left-radius: 0em;
342	border-bottom-right-radius: 0em;	342	border-bottom-right-radius: 0em;
343	background-color: #999;	343	background-color: #999;
344	}	344	}
345		345
346	.empty #bow-bottom {	346	.empty #bow-bottom {
347	display: none;	347	display: none;
348	}	348	}
349		349
350	#bow-bottom .concave {	350	#bow-bottom .concave {
351	position: absolute;	351	position: absolute;
352	margin-left: 0.2em;	352	margin-left: 0.2em;
353	margin-bottom: 0.2em;	353	margin-bottom: 0.2em;
354	bottom: 0.3em;	354	bottom: 0.3em;
355	left: 7.8em;	355	left: 7.8em;
356	height: 2.1em;	356	height: 2.1em;
357	width: 2.2em;	357	width: 2.2em;
358	border-bottom-left-radius: 1.2em;	358	border-bottom-left-radius: 1.2em;
359	border-bottom-right-radius: 1em;	359	border-bottom-right-radius: 1em;
360	background-color: #000;	360	background-color: #000;
361	}	361	}
362		362
363	#bow-bottom .spacer {	363	#bow-bottom .spacer {
364	position: absolute;	364	position: absolute;
365	left: 10.2em;	365	left: 10.2em;
366	bottom: 0;	366	bottom: 0;
367	width: 0.2em;	367	width: 0.2em;
368	height: 0.5em;	368	height: 0.5em;
369	background-color: black;	369	background-color: black;
370	}	370	}
371		371
372	.empty #bow-bottom-left-concave {	372	.empty #bow-bottom-left-concave {
373	display: none;	373	display: none;
374	}	374	}
375		375
376	/* Controls */	376	/* Controls */
377		377
378	input,	378	input,
379	select	379	select
380	{	380	{
381	margin: 0 0.2em 0.2em 0;	381	margin: 0 0.2em 0.2em 0;
382	font-size: 1em;	382	font-size: 1em;
383	}	383	}
384		384
385	input	385	input
386	{	386	{
387	min-width: 4.875em;	387	min-width: 4.875em;
388	border: 1px solid #7d7d7d;	388	border: 1px solid #7d7d7d;
389	padding: 0 0.125em;	389	padding: 0 0.125em;
390	background-color: #000;	390	background-color: #000;
391	color: #fff;	391	color: #fff;
392	}	392	}
393		393
394	input:focus	394	input:focus
395	{	395	{
396	border-color: #f90;	396	border-color: #f90;
397	}	397	}
398		398
399	select	399	select
400	{	400	{
401	min-width: 5em;	401	min-width: 5em;
402	background-color: #7d7d7d;	402	background-color: #7d7d7d;
403	color: #000 !important;	403	color: #000 !important;
404	border: none;	404	border: none;
405	}	405	}
406		406
407	select:focus	407	select:focus
408	{	408	{
409	background-color: #f90;	409	background-color: #f90;
410	color: #000;	410	color: #000;
411	}	411	}
412		412
413	option {	413	option {
414	background-color: #000;	414	background-color: #000;
415	color: #fff;	415	color: #fff;
416	}	416	}
417		417
418	option:checked {	418	option:checked {
419	color: #fc6;	419	color: #fc6;
420	}	420	}
421		421
422	.button:visited,	422	.button:visited,
423	.button	423	.button
424	{	424	{
425	position: relative;	425	position: relative;
426	display: inline-block;	426	display: inline-block;
427	margin-right: 0.2em;	427	margin-right: 0.2em;
428	margin-bottom: 0.2em;	428	margin-bottom: 0.2em;
429	width: 5em;	429	width: 5em;
430	height: 2em;	430	height: 2em;
431	background-color: #7d7d7d; /* c9c */	431	background-color: #7d7d7d; /* c9c */
432	color: #000 !important;	432	color: #000 !important;
433	text-decoration: none !important;	433	text-decoration: none !important;
434	/* overflow: hidden; */	434	/* overflow: hidden; */
435	cursor: pointer !important;	435	cursor: pointer !important;
436	}	436	}
437		437
438	.button .text {	438	.button .text {
439	position: absolute;	439	position: absolute;
440	bottom: 0;	440	bottom: 0;
441	right: 0.5em;	441	right: 0.5em;
442	max-width: 3.5em;	442	max-width: 3.5em;
443	overflow: hidden;	443	overflow: hidden;
444	cursor: pointer !important;	444	cursor: pointer !important;
445	text-overflow: ellipsis;	445	text-overflow: ellipsis;
446	text-transform: uppercase;	446	text-transform: uppercase;
447	white-space: nowrap;	447	white-space: nowrap;
448	}	448	}
449		449
450	.button.command {	450	.button.command {
451	border-radius: 1.2em;	451	border-radius: 1.2em;
452	}	452	}
453		453
454	.button.command .text {	454	.button.command .text {
455	position: absolute;	455	position: absolute;
456	bottom: 0;	456	bottom: 0;
457	right: 1em;	457	right: 1em;
458	}	458	}
459		459
460	.button:hover,	460	.button:hover,
461	.button:focus,	461	.button:focus,
462	.button.selected:hover,	462	.button.selected:hover,
463	.button.selected:focus,	463	.button.selected:focus,
464	.group .button:hover,	464	.group .button:hover,
465	.group .button:focus,	465	.group .button:focus,
466	.group .button:visited:hover,	466	.group .button:visited:hover,
467	.group .button:visited:focus	467	.group .button:visited:focus
468	{	468	{
469	background-color: #f90 !important;	469	background-color: #f90 !important;
470	color: #000 !important;	470	color: #000 !important;
471	}	471	}
472		472
473	.button:active,	473	.button:active,
474	.button.selected:active,	474	.button.selected:active,
475	.group .button:active,	475	.group .button:active,
476	.group .button:visited:active	476	.group .button:visited:active
477	{	477	{
478	background-color: #fff !important;	478	background-color: #fff !important;
479	color: #000 !important;	479	color: #000 !important;
480	}	480	}
481		481
482	.menu bow {	482	.menu bow {
483	width: 8em;	483	width: 8em;
484	}	484	}
485		485
486	.menu .button {	486	.menu .button {
487	display: block;	487	display: block;
488	width: 8em;	488	width: 8em;
489	height: 1em;	489	height: 1em;
490	line-height: 1;	490	line-height: 1;
491	background-color: #9cf;	491	background-color: #9cf;
492	color: #000 !important;	492	color: #000 !important;
493	text-overflow: ellipsis;	493	text-overflow: ellipsis;
494	white-space: nowrap;	494	white-space: nowrap;
495	}	495	}
496		496
497	#connectors {	497	#connectors {
498	position: fixed;	498	position: fixed;
499	left: 8.4em;	499	left: 8.4em;
500	top: 5.6em;	500	top: 5.6em;

Subversion Repositories LCARS

(root)/branches/live/styles/lcars22.css @ 298 - Rev 220 → 236