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/>.
 *
 */

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: 5vh;
  letter-spacing: 0.125vh;
  font-weight:bold;
  font-family: monospace;
  outline: thin solid #999999;
  background: #f7f7f7;
  width:80vw;
  height:60vh;
  overflow:hidden;
}

.textwindowmain {
  float: left;
  color: #444444;
  font-size: 5vh;
  letter-spacing: 0.125vh;
  font-weight:bold;
  font-family: monospace;
  outline: thin solid #999999;
  background: #f7f7f7;
  width:65vw;
  height:51vh;
  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;
}

/* small size */

/*
@media only screen and (max-width: 640px) {
  body { letter-spacing: 0.125em; }
  .row { height: 80px; }
  .col { width: 80px; }
  .bdisp { font-size: 20px; margin-top: 15px; margin-right: 15px; } 
  .bstatus { font-size: 20px; border: solid 2px #888888; box-shadow: 3px 3px 0px #aaaaaa; }
  .bstatus { font-size: 20px; border: solid 2px #888888; box-shadow: 3px 3px 0px #aaaaaa; }
  .bdrop { font-size: 19px; border: solid 2px #888888; box-shadow: 3px 3px 0px #aaaaaa; }
  .bdropinp { font-size: 22px; border: solid 2px #888888; box-shadow: 3px 3px 0px #aaaaaa; }
  .bkey { width: 75px; height:75px; }
  .bkeyNarrow { width: 75px; height:75px; }
  .bkeyw { width: 150px; height:58px; }
  .bkeym { width: 100px; height:58px; }
  .bkeyHuge { width: 300px; height:300px; }
  .bfieldinp { width: 150px; height: 58px; }
}
*/

/* LARGE SIZE */

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


/* @media only screen and (min-width: 640px) { */
  body { letter-spacing: 0.25em; }

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


  /*
  .row { height: 20vh; }
  .col { width: 20vw; }
  */

  .bdisp {
    font-size: 7vh;
    margin-top: 5vh;
    margin-right: 1vw;
  }

  /*
  .bstatus { font-size: 40px; border: solid 4px #888888; box-shadow: 6px 6px 0px #aaaaaa; }
  .bstatus { font-size: 40px; border: solid 4px #888888; box-shadow: 6px 6px 0px #aaaaaa; }
  .bdrop { font-size: 7vh; border: solid 4px #888888; box-shadow: 6px 6px 0px #aaaaaa; }
  .bdropinp { font-size: 7vh; border: solid 4px #888888; box-shadow: 6px 6px 0px #aaaaaa; }
  */

  .bstatus  { font-size: 7vh; border: solid .3vw #888888; box-shadow: .5vw .5vw 0px #aaaaaa; }
  .bstatus  { font-size: 7vh; border: solid .3vw #888888; box-shadow: .5vw .5vw 0px #aaaaaa; }
  .bdrop    { font-size: 7vh; border: solid .3vw #888888; box-shadow: .5vw .5vw 0px #aaaaaa; }
  .bdropinp { font-size: 7vh; border: solid .3vw #888888; box-shadow: .5vw .5vw 0px #aaaaaa; }

  .bkey       { width: 20vh; height: 20vh; }
  .bkeyFull   { width: 96vw; height: 96vh; }
  .bkeyNarrow { width: 10vw; height: 40vh; }
  .bkeyw      { width: 25vw; height: 17vh; }
  .bkeym      { width: 20vw; height: 17vh; }
  .bkeyHuge   { width: 80vw; height: 80vh; }
  .bfieldinp  { width: 20vw; height: 20vh; }

/*
}
*/

.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: 85vw;
  top: 5vh;
}

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

#mainstatus {
  font-family: "Courier New";
  font-weight:bold;
  font-size: 5vh;
  color: #d7d644;

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

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