cleaning up DIU UI

* button yellow was not rendering, made it higher contrast
* clock in `ui_main` now positioned properly within a `row`
* added classes for different menu stylings from `ui_main`
* added color in comments in case we want them for the future

busunit/DIUv2/html/css/diustyles.css

@@ -143,18 +143,36 @@ body { letter-spacing: 0.25em; }
   font-size: 6vh;
   margin-top: 4vh;
   margin-right: 1vw;
+
+  font-weight: bold;
+  color: #444444;
+  margin-left: auto;
+
+  background: none;
+  border: none;
+
 }
 
 .bstatus  { font-size: 6vh; border: solid .3vw #888888; box-shadow: .5vw .5vw 0px #aaaaaa; }
 .bstatus  { font-size: 6vh; border: solid .3vw #888888; box-shadow: .5vw .5vw 0px #aaaaaa; }
 .bdrop    { font-size: 6vh; border: solid .3vw #888888; box-shadow: .5vw .5vw 0px #aaaaaa; }
+/*
 .bdropinp { font-size: 6vh; border: solid .3vw #888888; box-shadow: .5vw .5vw 0px #aaaaaa; }
+*/
 
 .bkey         { width: 20vh; height: 20vh; }
 
 .bkeyFull     { width: 96vw; height: 96vh; }
 .bkeyNarrow   { width: 12vw; height: 25vh; }
-.bkeyTime     { width:16vw; height:10vh; }
+
+.bkeyTime     {
+  width:16vw;
+  height:10vh;
+  color:#bb4444;
+  font-family: monospace;
+  font-size: 6.5vh;
+}
+
 .bkeyTimeBig  { width:16vw; height:10vh; }
 
 .bkeyw      { width: 25vw; height: 17vh; }
@@ -162,14 +180,6 @@ body { letter-spacing: 0.25em; }
 .bkeyHuge   { width: 80vw; height: 80vh; }
 .bfieldinp  { width: 18vh; height: 22vh; }
 
-.bdisp {
-  font-weight: bold;
-  color: #444444;
-  margin-left: auto;
-
-  background: none;
-  border: none;
-}
 .bdisp:focus { outline:0; }
 
 .bmsg {
@@ -198,22 +208,39 @@ body { letter-spacing: 0.25em; }
 .bdropinp {
   font-weight: bold;
   color: #444444;
+
   background: none;
 
   -webkit-transition: margin-left 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
   -moz-transition: margin-left 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
   transition: margin-left 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+
+  font-size: 6vh;
+  border: solid .3vw #888888;
+  box-shadow: .5vw .5vw 0px #aaaaaa;
+
 }
 
-.bdropinp.ltyellow  { background: #ffffe0; }
-.bdropinp.mny       { color: #446444; }
+.bdropinp.ltyellow  { background: #ffffbb; }
+
+.bdropinp.mny       { color: #446444; background: #efefef; }
+.bdropinp.blk       { color: #444444; }
+.bdropinp.mnu       { color: #444444; }
 .bdropinp.logout    { color: #aa4444; }
 .bdropinp.highlight { background: #aaaaff; }
+.bdropinp.dim       { background: #efefef; }
 
-.bdropinp:focus     { outline:0; }
+/*
+.bdropinp.mny       { color: #444444; background: #e3efe3; }
+.bdropinp.blk       { color: #444444; background: #e9efe9; }
+.bdropinp.mnu       { color: #444444; background: #e3e3ef; }
+.bdropinp.logout    { color: #aa4444; background: #efe3e3; }
+.bdropinp.highlight { background: #aaaaff; }
+.bdropinp.dim       { background: #e7e7e7; }
+*/
 
+.bdropinp:focus     { outline:0; }
 .bdropinp:active {
-  /* margin-left:9px; */
   margin-left:1vw;
   background: #aaaaaa;
 
@@ -228,6 +255,7 @@ body { letter-spacing: 0.25em; }
 
 /***********/
 
+
 .bkey:focus       { outline:0; }
 .bkeym:focus      { outline:0; }
 .bkeyw:focus      { outline:0; }
@@ -238,12 +266,21 @@ body { letter-spacing: 0.25em; }
   position: absolute;
   left: 83vw;
   top: 5vh;
+
+  /*
+  background: #efefdf;
+  */
 }
 
 .btnnxt {
   position: absolute;
   left: 83vw;
   top: 30vh;
+
+  /*
+  background: #efefdf;
+  */
+
 }
 
 #mainstatus {

busunit/DIUv2/html/index-ORG.html

@@ -70,14 +70,8 @@
 
         <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw' id='ui_login_login'>Login</button> </div>
         <div class='pure-u-1-3 col'>
-          <button class='bdisp bkeyTime' id='ui_login_time' style='color:#773333; font-family: monospace; font-size: 6.5vh;' >
-            02:34
-          </button>
+          <button class='bdisp bkeyTime' id='ui_login_time'> 02:34 </button>
         </div>
-        <!--
-        <div class='pure-u-1-6 col'> </div>
-        <div class='pure-u-1-6 col'> </div>
-        -->
         <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw' id='ui_login_configuration'>Config</button> </div>
 
       </div>
@@ -591,17 +585,15 @@
         <div class='pure-u-1-6 col'>
 
           <div class='pure-g row'>
-
             <div class='pure-u col'>
-              <button class='bdropinp bkeyNarrow' onmousedown='_beep();' id='ui_main_dim'>DIM</button>
+              <button class='bdropinp bkeyNarrow dim' onmousedown='_beep();' id='ui_main_dim'>DIM</button>
             </div>
+          </div>
 
-            <br>
-
+          <div class='pure-g row'>
             <div class='pure-u col'>
-              <button class='bdisp bkeyTime' id='ui_main_time' style='color:#773333; font-family: monospace; font-size: 6.5vh;' >02:34</button>
+              <button class='bdisp bkeyTime' id='ui_main_time'>02:34</button>
             </div>
-
           </div>
 
         </div>
@@ -630,7 +622,7 @@
         <div class='pure-u-1-4 col'> <button onmousedown='_beep();' class='bdropinp bkeym mny' id='ui_main_adult'>Adult $</button> </div>
         <div class='pure-u-1-4 col'> <button onmousedown='_beep();' class='bdropinp bkeym mny' id='ui_main_youth'>Youth $</button> </div>
         <div class='pure-u-1-4 col'> <button onmousedown='_beep();' class='bdropinp bkeym mny' id='ui_main_half'>Half $</button> </div>
-        <div class='pure-u-1-4 col'> <button onmousedown='_beep();' class='bdropinp bkeym' id='ui_main_bulk'>Bulk $</button> </div>
+        <div class='pure-u-1-4 col'> <button onmousedown='_beep();' class='bdropinp bkeym blk' id='ui_main_bulk'>Bulk $</button> </div>
 
       </div>
 
@@ -639,7 +631,7 @@
         <div class='pure-u-1-4 col'> <button onmousedown='_beep();' class='bdropinp bkeym mny' id='ui_main_bike'>Bike</button> </div>
         <div class='pure-u-1-4 col'> <button onmousedown='_beep();' class='bdropinp bkeym mny' id='ui_main_wheelchair'>Wheel Chair</button> </div>
         <div class='pure-u-1-4 col'> <button onmousedown='_beep();' class='bdropinp bkeym mny' id='ui_main_transfer'>X-fer</button> </div>
-        <div class='pure-u-1-4 col'> <button onmousedown='_beep();' class='bdropinp bkeym' id='ui_main_menu'>Menu</button> </div>
+        <div class='pure-u-1-4 col'> <button onmousedown='_beep();' class='bdropinp bkeym mnu' id='ui_main_menu'>Menu</button> </div>
 
       </div>