make switch actually look good and work correctly

[tricorder.git] / style / tricorder.css

diff --git a/style/tricorder.css b/style/tricorder.css
index 7f37659a1fea9b6f0f6cb0372e70b85a8d8b2950..d60e7aa7c8da09f99984633578cb6b30dde02f33 100644 (file)
--- a/style/tricorder.css
+++ b/style/tricorder.css
@@ -141,6 +141,14 @@ a:hover, a:active { color: #FFCF00; }
   background-color: #C09070;
   color: #000000;
 }
+#navSound {
+  background-color: #E7ADE7;
+  color: #000000;
+}
+#navDev {
+  background-color: #A09090;
+  color: #000000;
+}
 #navOther {
   background-color: #6000CF;
   color: #000000;
@@ -179,7 +187,7 @@ a:hover, a:active { color: #FFCF00; }
   width: auto;
   padding: 1px;
   min-height: 20em;
-  overflow: none;
+  overflow: hidden;
   border: none;
 }
 
@@ -222,16 +230,75 @@ a:hover, a:active { color: #FFCF00; }
 section {
   display: none;
   background-color: rgba(0,0,0,0.8);
+  height: 100%;
 }
 
 section.active {
   display: block;
 }
 
-.gravVal {
+section > p:first-child {
+  margin-top: 0;
+  padding-top: 1em;
+}
+
+button {
+  font: inherit;
+  border: none;
+  color: #000000;
+  background-color: #C09070;
+  border-radius: 3000px;
+}
+
+button:disabled {
+  background-color: #402858;
+}
+
+.posVal, .gravVal {
   text-align: right;
 }
 
+.posVal {
+  width: 24ch;
+}
+
+.gravVal {
+  width: 10ch;
+}
+
+.note {
+  font-size: .667em;
+}
+
+#soundavail {
+  height: 100%;
+}
+
+#envFlashAvail {
+  margin-top: .5em;
+  padding: .5em 3px 0;
+  border-top: 2px solid #A09090;
+}
+
+.envButton {
+  font-size: 200%;
+  margin-top: .25em;
+}
+
+#envFlashOn {
+  margin-right: 3px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  padding-left: .5em;
+}
+
+#envFlashOff {
+  margin-left: 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  padding-right: .5em;
+}
+
 @media screen and (min-width: 500px) {
   body {
     font-size: 24px;