popufare/busunit/DIUv2/html/css/diustyles.css

/*
 * Copyright (c) 2019 Clementine Computing LLC.
 *
 * This file is part of PopuFare.
 *
 * PopuFare is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * PopuFare is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with PopuFare.  If not, see <https://www.gnu.org/licenses/>.
 *
 */

#ui_test {
  position:absolute;
  visibility:hidden;
  height:auto;
  width:auto;
  white-space:nowrap;

  font-size: 3vw;
  letter-spacing: 0.125vw;
  font-weight:bold;
  font-family: monospace;
}

#dim_overlay {
  opacity:0.0;
  background: #000000;
  position:absolute;
  height: 120vh;
  width: 120vw;

  margin-left: -5vw;
  margin-top: -5vh;

  pointer-events:none;
}

html, body {
  height: 100%;

}

body {
  background: #efefef;
  color: hsl(240,30,10);
  text-align: center;

  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */

	overflow: hidden;
}

h1 {
  margin: 3em 0 2em;
}

p:focus {
  border:0;
}

.textwindow {
  float: left;
  color: #444444;
  font-size: 3vw;
  letter-spacing: 0.125vw;
  font-weight:bold;
  font-family: monospace;
  outline: thin solid #999999;
  background: #f7f7f7;
  /* width:90vw; */
  width:95vw;
  /* height:60vh; */
  height:70vh;
  overflow:hidden;
}

.textwindowmain {
  float: left;
  color: #444444;
  font-size: 3vw;
  letter-spacing: 0.125vw;
  font-weight:bold;
  font-family: monospace;
  outline: thin solid #999999;
  background: #f7f7f7;
  width:63vw;
  height:50vh;
  overflow:hidden;
}

.textrow {
  padding-left: 0.5vw;
  float:left;
  width: 100%;
  text-align:left;
}

.textrow.accept {
  background: #44cc44;
  color: #444444;
}

.textrow.reject {
  background: #cc4444;
  color: #dddddd;
}

.textrow.error {
  background: #ff7f33;
  color: #444444;
}

/***********/

.bkeyFull {
  width: 96vw;
  height:96vh;
}

.row4 { height: 20vh; }
.row5 { height: 15vh; }


body { letter-spacing: 0.25em; }

.row { height: 160px; }
.col { width: 160px; }

.bdisp {
  font-size: 6vh;
  margin-top: 4vh;
  margin-right: 1vw;

  font-weight: bold;
  color: #444444;
  margin-left: auto;

  background: none;
  border: none;

}

.bdispSmall {
  font-size: 4vh;
  margin-top: 1vh;
  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; }
.bkey         { width: 20vh; height: 20vh; }

.bkeyFull     { width: 96vw; height: 96vh; }
.bkeyNarrow   { width: 12vw; height: 25vh; }

.bkeyTime     {
  width:16vw;
  height:10vh;
  color:#bb4444;
  font-family: monospace;
  font-size: 6.5vh;
}

.bkeyDate {
  width:16vw;
  height:6vh;
  font-family: monospace;
  font-size: 3.5vh;
}

.bkeyTimeBig  { width:16vw; height:10vh; }

.bkeyw      { width: 25vw; height: 17vh; }
.bkeym      { width: 20vw; height: 17vh; }
.bkeyHuge   { width: 80vw; height: 80vh; }
.bfieldinp  { width: 18vh; height: 22vh; }

.bdisp:focus { outline:0; }

.bmsg {
  font-weight: bold;
  color: #444444;
  background: #ADD8E6;
}
.bmsg:focus { outline:0; }

.bstatus {
  font-weight: bold;
  color: #444444;
}
.bstatus:focus { outline:0; }

.bdrop {
  font-weight: bold;
  color: #444444;
  background: none;
}
.bdrop:focus {
  outline:0;
}


.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;

}

.bdropdark {
  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 #000000;
  box-shadow: .5vw .5vw 0px #000000;

}

.bdropinp.ltyellow  { background: #ffffbb; }

.bdropinp.mny       { color: #446444; background: #efefef; }
.bdropinp.blk       { color: #444444; }
.bdropinp.mnu       { color: #444444; }
.bdropinp.logout    { color: #aa4444; background: #efe3e3; }
.bdropinp.options   { color: #aa4444; background: #efe3e3; }
.bdropinp.highlight { background: #aaaaff; }
.bdropinp.dim       { background: #efefef; }

/*
.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:1vw;
  background: #aaaaaa;

  -webkit-transition: margin-left 0.05s ease, box-shadow 0.05s ease, background 0.05s ease;
  -moz-transition: margin-left 0.05s ease, box-shadow 0.05s ease, background 0.05s ease;
  transition: margin-left 0.05s ease, box-shadow 0.05s ease, background 0.05s ease;

  -webkit-box-shadow: 0px 0px 0px #8e44ad;
  -moz-box-shadow: 0px 0px 0px #8e44ad;
  box-shadow: 0px 0px 0px #8e44ad;
}

/***********/


.bkey:focus       { outline:0; }
.bkeym:focus      { outline:0; }
.bkeyw:focus      { outline:0; }
.bkeyHuge:focus   { outline:0; }
.bfieldinp:focus  { outline:0; }

.btnprv {
  position: absolute;
  left: 83vw;
  top: 5vh;

  /*
  background: #efefdf;
  */
}

.btnnxt {
  position: absolute;
  left: 83vw;
  top: 30vh;

  /*
  background: #efefdf;
  */

}

#mainstatus {
  font-family: "Courier New";
  font-weight:bold;
  font-family: monospace;

  font-size: 3.85vh;
  letter-spacing: 0.125vw;
  color: #d7d644;

  position:absolute;
  bottom:0;
  width:110%;
  height: 6vh;
  background:#555555;
  margin-left: -7vw;
}

.rowmain0 {
  position: absolute;
  top: 50%;
}

.rowmain1 {
  position: absolute;
  top: 70%;
}

.invisiblock {
  background-color: rgba(0,0,0,0);
  border: none !important;
  font-size: 0;
  position: fixed;
  z-index: 2;
  outline:0;
}

/* slider range css */

/*
 * https://codepen.io/noahblon/pen/OyajvN
 */

input[type="range"] {
	margin: auto;
	-webkit-appearance: none;
	position: relative;
	overflow: hidden;
	height: 20vh;
	width: 40vw;
	cursor: pointer;
	border-radius: 0; /* iOS */
}

input[type="range"].wide {
  width: 40vw;
}

input[type="range"]:focus {
  outline:none;
}

::-webkit-slider-runnable-track {
  background: #ddd;
}

/*
 * 1. Set to 0 width and remove border for a slider without a thumb
 */

::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 20vh;
	width: 5vw;
	background: #efefef;
	box-shadow: -100vw 0 0 100vw #555555;
	border: 2px solid #999;
}

::-moz-range-track {
  height: 20vh;
	background: #ddd;
}

::-moz-range-thumb {
	background: #fff;
	height: 20vh;
	width: 10vw;
	border: 3px solid #999;
	border-radius: 0 !important;
	box-shadow: -100vw 0 0 100vw #555555;
	box-sizing: border-box;
}

::-ms-fill-lower {
  background: #555555;
}