WebSVN - LCARS - Diff - Rev 167 and 169 - /trunk/styles/lcars22.css


<?php
 
 
@\header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');
 
/* Resource expires in HTTP/1.1 caches 24h after last retrieval */
@\header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate');

/* Resource expires in HTTP/1.0 caches 24h after last retrieval */
@\header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT');
 
@\header('Content-Type: text/css; charset=UTF-8');

require_once 'css/least/Mixins.php';
use de\pointedears\css\least\Mixins;
?>@charset "UTF-8";

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

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

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

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

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

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

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

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

/* 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: 23.6em;
  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.4em;
  border-bottom-left-radius: 0em;
  border-bottom-right-radius: 0em;
  background-color: #999;
}

.empty #bow-bottom {
  display: none;
}

#bow-bottom .concave {
  position: absolute;
  margin-left: 0.2em;
  margin-bottom: 0.2em;
  bottom: 0.3em;
  left: 7.8em;
  height: 2.1em;
  width: 2.2em;
  border-bottom-left-radius: 1.2em;
  border-bottom-right-radius: 1em;
  background-color: #000;
}

#bow-bottom .spacer {
  position: absolute;
  left: 10.2em;
  bottom: 0;
  width: 0.2em;
  height: 0.5em;
  background-color: black;
}

.empty #bow-bottom-left-concave {
  display: none;
}

/* Controls */

.button:visited,
.button
{
  position: relative;
  display: inline-block;
  margin-right: 0.2em;
  margin-bottom: 0.2em;
  width: 5em;
  height: 2em;
  background-color: #7d7d7d; /* c9c */
  color: #000 !important;
  text-decoration: none !important;
  text-transform: uppercase;
  /* overflow: hidden; */
  cursor: pointer !important;
}

.button .text {
  position: absolute;
  bottom: 0;
  right: 0.5em;
  cursor: pointer !important;
}

.button.command {
  border-radius: 1.2em;
}

.button.command .text {
  position: absolute;
  bottom: 0;
  right: 1em;
}

.button:hover,
.button:focus,
.button.selected:hover,
.button.selected:focus,
.group .button:hover,
.group .button:focus,
.group .button:visited:hover,
.group .button:visited:focus
{
  background-color: #f90 !important;
  color: #000 !important;
}

.button:active,
.button.selected:active,
.group .button:active,
.group .button:visited:active
{
  background-color: #fff !important;
  color: #000 !important;
}

.menu .button {
  display: block;
  width: 8em;
  height: 1em;
  line-height: 1;
  background-color: #9cf;
  color: #000 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#connectors {
  position: fixed;
  left: 8.4em;
  top: 5.6em;
}

#connectors div {
  position: absolute;
}

#connectors .top {
  top: 0;
  height: 1em;
}

#connectors .mid {
  top: 13.6em;
  height: 0.8em;
}

#connectors .left {
  left: 0;
  width: 2em;
}

#connectors .right {
  left: 2.2em;
  width: 0em;
}

.multi-display
{
  position: fixed;
  top: 2.6em;
  left: 10.6em;
  right: 0;
}

.multi-display .button
{
  width: 5em !important;
}

.multi-display .upper
{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;  
  height: 7.5em;  
  padding-right: 0.2em;
  background-color: black;
}

.multi-display .upper .content
{
  position: absolute;
  top: 0;
  left: 6em;
  bottom: 1.3em;
  right: 0.2em;
  background-color: black;
  color: white;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
}

.multi-display .upper .content .title
{
  position: absolute;
  top: 0;
  left: 0;
  height: 1em;
  right: 0;
  background-color: black;
  color: white;
  font-size: 2.4em;
  text-transform: uppercase;
  text-align: right;
  overflow: hidden;
}

.multi-display .upper .content .title span
{
  white-space: nowrap;
}

.multi-display .upper .content .analysis {
  position: absolute;
  top: 2.4em;
  bottom: 0;
  right: 11em;
  left: 0;
  overflow: hidden;
  text-align: left;
  cursor: default;
}

.multi-display .upper .content .analysis table {
  border-collapse: collapse;
  line-height: 1.2;
  max-width: 100%;
}

.multi-display .upper .content .analysis th {
  padding: 0 0.4em 0 0.1em;
  font-weight: normal;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: baseline;
}

.multi-display .upper .content .analysis td {
  padding: 0 0.1em 0 0.1em;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: baseline;
  text-overflow: ellipsis;
}

.multi-display .upper .content .analysis td sup {
  line-height: 1;
  font-weight: 500;
}

.multi-display .upper .content .commands
{
  position: absolute;
  margin: 0;
  padding: 0;
  top: 2.4em;
  right: 0;
  height: 3.8em;
  width: 10.2em;
  list-style: none;
}

.multi-display .upper .content .commands li
{
  position: absolute;
  margin: 0;
  width: 5em;
  height: 1.8em;
}

.multi-display .upper .content .commands .button
{
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  height: 1.8em;
  border-radius: 0.9em;
  text-transform: none;
}

.multi-display .upper .content .commands .button .text {
  right: 1em;
}

.multi-display .upper .content #cmd1
{
  top: 0;
  right: 5.2em;
}

.multi-display .upper .content #cmd2
{
  top: 0;
  right: 0;
}

.multi-display .upper .content #cmd3
{
  top: 2em;
  right: 0;
}

.multi-display .upper .content #cmd4
{
  top: 2em;
  right: 5.2em;
}

.multi-display .upper .elbo-button
{
  position: absolute;
  top: 0;
  left: 0;
  width: 5em;
  height: 4em;
  background-color: #c9c !important;
  color: #000 !important;
  cursor: default;
}

.multi-display .upper .elbo-button .text
{
  position: absolute;
  bottom: 0;
  right: 0.2em;
  max-width: 4em;
  max-height: 3.6em;
  text-align: right;
  overflow: hidden;
}

.multi-display .upper .elbo
{
  position: absolute;
  left: 0;
  top: 4.2em;
  width: 6em;
  height: 3.2em;
  border-bottom-left-radius: 2em;
  background-color: #9cf;
  color: #000;
}

.multi-display .upper .elbo .text
{
  position: absolute;
  top: 0;
  right: 1.2em;
  max-width: 4em;
  max-height: 2.2em;
  text-align: right;
  overflow: hidden;
  cursor: default;
}

.elbo [title],
.button [title]
{
  border-bottom: none;
}

.multi-display .upper .elbo .concave
{
  position: absolute;
  left: 5em;
  top: 0;
  width: 1.1em;
  height: 2.2em;
  border-bottom-left-radius: 1em;
  background-color: black;
}

.multi-display .border
{
  height: 1em;
}

.multi-display .upper .border
{
  position: absolute;
  top: 6.4em;
  left: 6em;
  right: 0.2em;
}

.multi-display .border div
{
  position: absolute;
  top: 0;
  height: 1em;
}

.multi-display .upper .border div
{
  background-color: #9cf;
}

.multi-display .upper .border .left
{
  left: 0;
  right: 5.2em;
  height: 1em;
}
 
.multi-display .upper .border .right
{
  width: 5em;
  right: 0;
}
 
.multi-display .lower
{
  position: absolute;
  top: 7.5em;
  left: 0;
  height: 0.1em;
  right: 0;
  background-color: black;
}

.multi-display .lower .elbo
{
  position: absolute;
  top: 0.1em;
  left: 0;
  width: 6em;
  height: 3em;
  border-top-left-radius: 2em;
  background-color: #fc6;
}

.multi-display .lower .elbo .concave
{
  position: absolute;
  left: 5em;
  top: 1em;
  width: 1.1em;
  height: 2.1em;
  background-color: black;
  border-top-left-radius: 1em;
}

.multi-display .lower .bg
{
  position: fixed;
  top: 13.4em;
  bottom: 0.2em;
  width: 5em;
  background-color: #fc6;
}

.multi-display .lower .border-container
{
  position: absolute;
  top: 0.1em;
  left: 6em;
  right: 0;
  height: 1.2em;
  background-color: black;
}

.multi-display .lower .border
{
  position: absolute;
  left: 0;
  right: 0.2em;
}

.multi-display .lower .border div
{
  background-color: #fc6;
}

.multi-display .lower .border .left
{
  left: 0;
  right: 5.2em;
}

.multi-display .lower .border .right
{
  width: 5em;
  right: 0;
}

.menu .button.secondary,
.multi-display .lower .elbo.secondary,
.multi-display .lower .bg.secondary,
.multi-display .lower .border.secondary
{
  background-color: #f96;
}

.menu .button.ancillary,
.multi-display .lower .elbo.ancillary,
.multi-display .lower .bg.ancillary,
.multi-display .lower .border.ancillary
{
  background-color: #c9c;
}

.menu .button.database,
.multi-display .lower .elbo.database,
.multi-display .lower .bg.database,
.multi-display .lower .border.database
{
  background-color: #c66;
}

.menu .button .text {
  position: static;
  margin: 0 0.25em;
}

.button.selected {
  background-color: #fc6 !important;
  color: #000 !important;  
}

.group {
  margin: 0 auto;
  position: relative;
  width: 7.7em;
}

.group .separator {
  float: left;
  position: absolute;
  top: 0;
  left: 0;
  width: 1.5em;
  height: 100%;
  background-color: #c66;
  color: #000;
}

.group .separator:after {
  position: absolute;
  width: 0.8em;
  height: 0.5em;
  bottom: 0.25em;
  left: 0.25em;
  background-color: #000;
  content: "\a0";
}

.group ul {
  margin-left: 1.7em;
}

.group li {
  margin-bottom: 0;
}

.group .button:visited,
.group .button
{
  display: block;
  position: relative;
  width: 6em;
  background-color: #99f !important;
}

.group li:last-child .button
{
  margin-bottom: 0;
}

.button.right {
  border-top-right-radius: 1em;
  border-bottom-right-radius: 1em;
}

.button.right .text {
  right: 1em;
}

.button.left {
  border-top-left-radius: 1em;
  border-bottom-left-radius: 1em;
}

.group .button .key {
  display: inline-block;
  position: absolute;
  left: 0.2em;
  top: 0;
  bottom: 0;
  padding: 0 0.1em;
  background-color: #000;
  color: #f90;
  font-size: 2.4em;
  text-transform: uppercase;
  line-height: 0.9;
}

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

Subversion Repositories LCARS

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