X-Git-Url: https://git-public.kairo.at/?p=tricorder.git;a=blobdiff_plain;f=style%2Ftricorder.css;h=99696f6f34a9b88d88942ac322832086c5cc9bfd;hp=b7b8fa510969731a06d52eec394a96ba146444fa;hb=3ad3aa73b25816412c03cbb98016039bd03f659a;hpb=eabed1a435fb1ea52f189b7b0433bdb640a29137

diff --git a/style/tricorder.css b/style/tricorder.css
index b7b8fa5..99696f6 100644
--- a/style/tricorder.css
+++ b/style/tricorder.css
@@ -2,6 +2,18 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+
+/* The original LCARS font in Star Trek is Helvetica Ultra Condensed.
+ * We try to use open stuff here, so we use OSP-DIN from
+ * http://openfontlibrary.org/en/font/osp-din, which is licensed under the
+ * SIL OFL - http://scripts.sil.org/OFL */
+@font-face {
+  font-family: OSPDIN;
+  src: url('OSPDIN.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
 html {
   background-color: #000000;
   height: 100%;
@@ -15,7 +27,7 @@ body {
   background-color: #000000;
   color: #FF9F00;
   position: relative;
-  font-family: Arial,Helvetica,sans-serif;
+  font-family: OSPDIN,sans-serif;
 }
 
 h1 {
@@ -32,8 +44,8 @@ a:hover, a:active { color: #FFCF00; }
   bottom: 3px;
   left: 3px;
   right: auto;
-  width: 140px;
- height: auto;
+  width: 90px;
+  height: auto;
   padding: 0px;
   margin: 0px 0px 0px 0px;
   border: 0px;
@@ -43,8 +55,8 @@ a:hover, a:active { color: #FFCF00; }
 #sideTop {
   background-color: #6080F0;
   color: #000000;
-  width: 120px;
-  height: 80px;
+  width: 70px;
+  height: 60px;
   margin-bottom: 3px;
 }
 
@@ -52,14 +64,13 @@ a:hover, a:active { color: #FFCF00; }
   background-color: #A06060;
   color: #000000;
   padding: 3px 3px 10px;
-  font-weight: bold;
   text-align: right;
   border-bottom: 3px solid black;
 }
 
 #sideSepTop {
   background-color: #808090;
-  width: 140px;
+  width: 90px;
   height: 20px;
   margin-bottom: 3px;
   padding-bottom: 10px;
@@ -69,12 +80,12 @@ a:hover, a:active { color: #FFCF00; }
   background-color: #000000;
   width: 20px;
   height: 100%;
-  margin-left: 120px;
+  margin-left: 70px;
   border-radius: 0px 0px 0px 15px;
 }
 #sideSepBottom {
-  background-color: #008484;
-  width: 140px;
+  background-color: #6080F0;
+  width: 90px;
   height: 50px;
   margin-bottom: 3px;
   padding-top: 10px;
@@ -84,18 +95,18 @@ a:hover, a:active { color: #FFCF00; }
   background-color: #000000;
   width: 20px;
   height: 100%;
-  margin-left: 120px;
+  margin-left: 70px;
   border-radius: 15px 0px 0px 0px;
 }
 
 #sideBottom {
   background-color: #9C9CFF;
   color: #000000;
-  width: 120px;
+  width: 70px;
   margin-bottom: 3px;
   position: absolute;
-  top: 179px;
-  bottom: 40px;
+  top: 159px;
+  bottom: 2em;
   height: auto;
 }
 
@@ -106,41 +117,39 @@ a:hover, a:active { color: #FFCF00; }
 }
 #navlist > li {
   margin: 0;
-  padding: 0 0.2em 0;
+  padding: 0.2em;
   border-bottom: 3px solid #000000;
-  font-weight: bold;
-}
-#navlist > li > a {
-  display: block;
-  text-decoration: none;
-  width: 100%;
-  padding: 0.3em 0;
+  text-transform: uppercase;
 }
 #navlist > li:hover,
-#navlist > li:active,
-#navlist > li:hover > a,
-#navlist > li:active > a,
-#navlist > li > a:hover,
-#navlist > li > a:active {
+#navlist > li:active {
   background-color: #FFCF00;
   color: #000000;
 }
 
-#navlist > li.active,
-#navlist > li.active > a {
+#navlist > li.active {
   background-color: #008484;
   color: #FFCF00;
+  outline: none;
 }
 
-#navPos, #navPos > a {
+#navPos {
   background-color: #FF9F00;
   color: #000000;
 }
-#navGrav, #navGrav > a {
+#navGrav {
   background-color: #C09070;
   color: #000000;
 }
-#navAcou, #navAcou > a {
+#navSound {
+  background-color: #E7ADE7;
+  color: #000000;
+}
+#navDev {
+  background-color: #A09090;
+  color: #000000;
+}
+#navOther {
   background-color: #6000CF;
   color: #000000;
 }
@@ -148,26 +157,37 @@ a:hover, a:active { color: #FFCF00; }
 #sideRemark {
   background-color: #E7ADE7;
   color: #000000;
-  width: 120px;
-  font-size: 10px;
-  text-align: center;
+  width: 70px;
   position: absolute;
   bottom: 0px;
-  height: 40px;
+  height: 2em;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+#sideRemark > li {
+  text-transform: uppercase;
+  padding-top: .25em;
+  padding-left: .2em;
+  height: 1.75em;
+  margin: 0;
+}
+#sideRemark > li:hover,
+#sideRemark > li:active {
+  background-color: #FFCF00;
+  color: #000000;
 }
-#sideRemark a:link, #sideRemark a:visited { color: #000000; }
-#sideRemark a:hover, #sideRemark a:active { color: #008484; }
 
 #mainarea {
   position: absolute;
   top: 3px;
   bottom: 3px;
-  left: 145px;
+  left: 95px;
   right: 3px;
   width: auto;
   padding: 1px;
-  min-height: 35em;
-  overflow: none;
+  min-height: 20em;
+  overflow: hidden;
   border: none;
 }
 
@@ -175,7 +195,8 @@ a:hover, a:active { color: #FFCF00; }
   color: #FFCF00;
   font-size: 3em;
   font-weight: bold;
-  height: 102px;
+  line-height: .8em;
+  height: 82px;
   text-align: center;
 }
 
@@ -194,7 +215,7 @@ a:hover, a:active { color: #FFCF00; }
 
 #mainContent {
   position: absolute;
-  top: 129px;
+  top: 109px;
   bottom: 0px;
   left: 0px;
   right: 1px;
@@ -203,12 +224,83 @@ a:hover, a:active { color: #FFCF00; }
   height: auto;
   overflow: auto;
   border: none;
+  background: transparent url("tilexborder.png") center center no-repeat;
 }
 
 section {
   display: none;
+  background-color: rgba(0,0,0,0.8);
+  height: 100%;
 }
 
 section.active {
   display: block;
 }
+
+section > p:first-child {
+  margin-top: 0;
+  padding-top: 1em;
+}
+
+.posVal, .gravVal {
+  text-align: right;
+}
+
+.posVal {
+  width: 24ch;
+}
+
+.gravVal {
+  width: 10ch;
+}
+
+.note {
+  font-size: .667em;
+}
+
+#soundavail {
+  height: 100%;
+}
+
+@media screen and (min-width: 500px) {
+  body {
+    font-size: 24px;
+  }
+  #sidebar {
+    width: 140px;
+  }
+  #sideTop {
+    width: 120px;
+    height: 80px;
+  }
+  #sideSepTop {
+    width: 140px;
+  }
+  #sideSepTopInsert {
+    margin-left: 120px;
+  }
+  #sideSepBottom {
+    width: 140px;
+  }
+  #sideSepBottomInsert {
+    margin-left: 120px;
+  }
+  #sideBottom {
+    width: 120px;
+    top: 179px;
+    bottom: 40px;
+  }
+  #sideRemark {
+    width: 120px;
+    height: 40px;
+  }
+  #mainarea {
+    left: 145px;
+  }
+  #mainHeader {
+    height: 102px;
+  }
+  #mainContent {
+    top: 129px;
+  }
+}