WebSVN - LCARS - Diff - Rev 120 and 123 - /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')
  {
    /* 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 tr {
  <?php
    Mixins::animation('-play-state', 'running');
  ?>  
}

.multi-display .upper .content .analysis:hover tr {
  <?php
    Mixins::animation('-play-state', 'paused');
  ?>  
}
*/
/* Blink rate 1 Hz should be safe for people with photosensitive epilepsy */
.multi-display .upper .content .analysis tr:nth-child(1) th,
.multi-display .upper .content .analysis tr:nth-child(1) td
{
  <?php
    Mixins::animation('', 'analysis 1.5s linear 0s, analysis-scan 4s linear 2.0s infinite');
  ?>  
}

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

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

Subversion Repositories LCARS

(root)/trunk/styles/lcars22.css @ 38 - Rev 120 → 123