WebSVN - LCARS - Diff - Rev 139 and 144 - /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');
  ?>  
}

<?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');
  ?>
}

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

Subversion Repositories LCARS

(root)/trunk/styles/lcars22.css - Rev 139 → 144