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

Subversion Repositories LCARS

(root)/trunk/styles/lcars22.css @ 151 - Rev 125 → 139