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

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

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

/* 
   A horrible hack but there's no way to turn
   off text highlighting in a text area.
   Instead, make the highlight color the same as the
   background and font color.
   I still see artifacts but they're much subtler then
   the default text highlighting.
*/
/*
::selection {
  background-color: rgb(255,255,255,1);
  color: #444444;
}
::-moz-selection {
  background-color: rgb(255,255,255,1);
  color: #444444;
}
::-o-selection {
  background-color: rgb(255,255,255,1);
  color: #444444;
}
::-ms-selection {
  background-color: rgb(255,255,255,1);
  color: #444444;
}
::-webkit-selection {
  background-color: rgb(255,255,255,1);
  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; }

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

  .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:focus {
  outline:0;
}

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

  background: none;
  border: none;
}


.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;
  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: 83%;
  top: 5%;
  */

  left: 85vw;
  top: 5vh;
}

.btnnxt {
  position: absolute;

  /*
  left: 83%;
  top: 35%;
  */

  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);
  /*
  width: 100px;
  height: 100px;
  */
  border: none !important;
  font-size: 0;

  position: fixed;
  z-index: 2;
  outline:0;
}