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

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;
  height:60vh;
  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: #333333; */
  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;
}

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

.bkeyw      { width: 25vw; height: 17vh; }
.bkeym      { width: 20vw; height: 17vh; }
.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 {
  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;
}

.bdropinp.ltyellow  { background: #ffffe0; }
.bdropinp.mny       { color: #446444; }
.bdropinp.logout    { color: #aa4444; }
.bdropinp.highlight { background: #aaaaff; }

.bdropinp:focus     { outline:0; }

.bdropinp:active {
  /* margin-left:9px; */
  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;
}

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

#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: 40px;
	width: 200px;
  */
	height: 20vh;
	width: 40vw;
	cursor: pointer;
	border-radius: 0; /* iOS */
}

input[type="range"].wide {
  /*
  width: 400px;
  */
  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;
  /*
	width: 20px;
	height: 40px;
  */
	height: 20vh;
	width: 5vw;
	background: #efefef;
	box-shadow: -100vw 0 0 100vw #555555;
	border: 2px solid #999;
}

::-moz-range-track {
  /*
	height: 40px;
  */
  height: 20vh;
	background: #ddd;
}

::-moz-range-thumb {
	background: #fff;
  /*
	height: 40px;
	width: 20px;
  */
	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;
}