style/tricorder.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
   3  * You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5
   6 /* The original LCARS font in Star Trek is Helvetica Ultra Condensed.
   7  * We try to use open stuff here, so we use OSP-DIN from
   8  * http://openfontlibrary.org/en/font/osp-din, which is licensed under the
   9  * SIL OFL - http://scripts.sil.org/OFL */
  10 @font-face {
  11   font-family: OSPDIN;
  12   src: url('OSPDIN.ttf') format('truetype');
  13   font-weight: normal;
  14   font-style: normal;
  15 }
  16
  17 html {
  18   background-color: #000000;
  19   height: 100%;
  20 }
  21
  22 body {
  23   border: 0px solid #9C9CFF;
  24   font-size: 16px;
  25   margin: 0px;
  26   height: 100%;
  27   background-color: #000000;
  28   color: #FF9F00;
  29   position: relative;
  30   font-family: OSPDIN,sans-serif;
  31 }
  32
  33 h1 {
  34   display: none;
  35 }
  36
  37 a:link { color: #FF9F00; }
  38 a:visited { color: #8050B0; }
  39 a:hover, a:active { color: #FFCF00; }
  40
  41 #sidebar {
  42   position: absolute;
  43   top: 3px;
  44   bottom: 3px;
  45   left: 3px;
  46   right: auto;
  47   width: 90px;
  48   height: auto;
  49   padding: 0px;
  50   margin: 0px 0px 0px 0px;
  51   border: 0px;
  52   overflow: hidden;
  53 }
  54
  55 #sideTop {
  56   background-color: #6080F0;
  57   color: #000000;
  58   width: 70px;
  59   height: 60px;
  60   margin-bottom: 3px;
  61 }
  62
  63 #stardate {
  64   background-color: #A06060;
  65   color: #000000;
  66   padding: 3px 3px 10px;
  67   text-align: right;
  68   border-bottom: 3px solid black;
  69 }
  70
  71 #sideSepTop {
  72   background-color: #808090;
  73   width: 90px;
  74   height: 20px;
  75   margin-bottom: 3px;
  76   padding-bottom: 10px;
  77   border-radius: 0px 0px 0px 15px;
  78 }
  79 #sideSepTopInsert {
  80   background-color: #000000;
  81   width: 20px;
  82   height: 100%;
  83   margin-left: 70px;
  84   border-radius: 0px 0px 0px 15px;
  85 }
  86 #sideSepBottom {
  87   background-color: #008484;
  88   width: 90px;
  89   height: 50px;
  90   margin-bottom: 3px;
  91   padding-top: 10px;
  92   border-radius: 15px 0px 0px 0px;
  93 }
  94 #sideSepBottomInsert {
  95   background-color: #000000;
  96   width: 20px;
  97   height: 100%;
  98   margin-left: 70px;
  99   border-radius: 15px 0px 0px 0px;
 100 }
 101
 102 #sideBottom {
 103   background-color: #9C9CFF;
 104   color: #000000;
 105   width: 70px;
 106   margin-bottom: 3px;
 107   position: absolute;
 108   top: 159px;
 109   bottom: 2em;
 110   height: auto;
 111 }
 112
 113 #navlist {
 114   list-style-type: none;
 115   margin: 0 0 1em;
 116   padding: 0 0 0.2em;
 117 }
 118 #navlist > li {
 119   margin: 0;
 120   padding: 0.2em;
 121   border-bottom: 3px solid #000000;
 122   text-transform: uppercase;
 123 }
 124 #navlist > li:hover,
 125 #navlist > li:active {
 126   background-color: #FFCF00;
 127   color: #000000;
 128 }
 129
 130 #navlist > li.active {
 131   background-color: #008484;
 132   color: #FFCF00;
 133   outline: none;
 134 }
 135
 136 #navPos {
 137   background-color: #FF9F00;
 138   color: #000000;
 139 }
 140 #navGrav {
 141   background-color: #C09070;
 142   color: #000000;
 143 }
 144 #navAcou {
 145   background-color: #6000CF;
 146   color: #000000;
 147 }
 148
 149 #sideRemark {
 150   background-color: #E7ADE7;
 151   color: #000000;
 152   width: 70px;
 153   position: absolute;
 154   bottom: 0px;
 155   height: 2em;
 156   margin: 0;
 157   padding: 0;
 158   list-style-type: none;
 159 }
 160 #sideRemark > li {
 161   text-transform: uppercase;
 162   padding-top: .25em;
 163   padding-left: .2em;
 164   height: 1.75em;
 165   margin: 0;
 166 }
 167 #sideRemark > li:hover,
 168 #sideRemark > li:active {
 169   background-color: #FFCF00;
 170   color: #000000;
 171 }
 172
 173 #mainarea {
 174   position: absolute;
 175   top: 3px;
 176   bottom: 3px;
 177   left: 95px;
 178   right: 3px;
 179   width: auto;
 180   padding: 1px;
 181   min-height: 20em;
 182   overflow: none;
 183   border: none;
 184 }
 185
 186 #mainHeader {
 187   color: #FFCF00;
 188   font-size: 3em;
 189   font-weight: bold;
 190   line-height: .8em;
 191   height: 82px;
 192   text-align: center;
 193 }
 194
 195 #mainSepTop {
 196   background-color: #E7ADE7;
 197   font-size: 1px;
 198   height: 10px;
 199   margin-bottom: 3px;
 200 }
 201 #mainSepBottom {
 202   background-color: #A09090;
 203   font-size: 1px;
 204   height: 10px;
 205   margin-bottom: 3px;
 206 }
 207
 208 #mainContent {
 209   position: absolute;
 210   top: 109px;
 211   bottom: 0px;
 212   left: 0px;
 213   right: 1px;
 214   width: auto;
 215   padding: 1px;
 216   height: auto;
 217   overflow: auto;
 218   border: none;
 219   background: transparent url("tilexborder.png") center center no-repeat;
 220 }
 221
 222 section {
 223   display: none;
 224   background-color: rgba(0,0,0,0.8);
 225 }
 226
 227 section.active {
 228   display: block;
 229 }
 230
 231 .gravVal {
 232   text-align: right;
 233 }
 234
 235 @media screen and (min-width: 500px) {
 236   body {
 237     font-size: 24px;
 238   }
 239   #sidebar {
 240     width: 140px;
 241   }
 242   #sideTop {
 243     width: 120px;
 244     height: 80px;
 245   }
 246   #sideSepTop {
 247     width: 140px;
 248   }
 249   #sideSepTopInsert {
 250     margin-left: 120px;
 251   }
 252   #sideSepBottom {
 253     width: 140px;
 254   }
 255   #sideSepBottomInsert {
 256     margin-left: 120px;
 257   }
 258   #sideBottom {
 259     width: 120px;
 260     top: 179px;
 261     bottom: 40px;
 262   }
 263   #sideRemark {
 264     width: 120px;
 265     height: 40px;
 266   }
 267   #mainarea {
 268     left: 145px;
 269   }
 270   #mainHeader {
 271     height: 102px;
 272   }
 273   #mainContent {
 274     top: 129px;
 275   }
 276 }