|
|
@@ -99,37 +99,6 @@ p:focus {
|
|
|
|
|
|
/***********/
|
|
|
|
|
|
-/*
|
|
|
- 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;
|
|
|
@@ -137,78 +106,24 @@ p:focus {
|
|
|
|
|
|
/* small size */
|
|
|
|
|
|
+/*
|
|
|
@media only screen and (max-width: 640px) {
|
|
|
- body {
|
|
|
- letter-spacing: 0.125em;
|
|
|
- }
|
|
|
-
|
|
|
+ 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;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
+ .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 */
|
|
|
|
|
|
@@ -216,85 +131,47 @@ p:focus {
|
|
|
.row5 { height: 15vh; }
|
|
|
|
|
|
|
|
|
-@media only screen and (min-width: 640px) {
|
|
|
- body {
|
|
|
- letter-spacing: 0.25em;
|
|
|
- }
|
|
|
+/* @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;
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
+ /*
|
|
|
+ .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; }
|
|
|
+ */
|
|
|
|
|
|
- .bfieldinp {
|
|
|
- width: 20vw;
|
|
|
- height: 20vh;
|
|
|
- }
|
|
|
+ .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:focus {
|
|
|
- outline:0;
|
|
|
+/*
|
|
|
}
|
|
|
+*/
|
|
|
|
|
|
.bdisp {
|
|
|
font-weight: bold;
|
|
|
@@ -304,34 +181,26 @@ p:focus {
|
|
|
background: none;
|
|
|
border: none;
|
|
|
}
|
|
|
-
|
|
|
+.bdisp:focus { outline:0; }
|
|
|
|
|
|
.bmsg {
|
|
|
font-weight: bold;
|
|
|
color: #444444;
|
|
|
background: #ADD8E6;
|
|
|
}
|
|
|
-
|
|
|
-.bmsg:focus {
|
|
|
- outline:0;
|
|
|
-}
|
|
|
+.bmsg:focus { outline:0; }
|
|
|
|
|
|
.bstatus {
|
|
|
font-weight: bold;
|
|
|
color: #444444;
|
|
|
}
|
|
|
-
|
|
|
-.bstatus:focus {
|
|
|
- outline:0;
|
|
|
-}
|
|
|
-
|
|
|
+.bstatus:focus { outline:0; }
|
|
|
|
|
|
.bdrop {
|
|
|
font-weight: bold;
|
|
|
color: #444444;
|
|
|
background: none;
|
|
|
}
|
|
|
-
|
|
|
.bdrop:focus {
|
|
|
outline:0;
|
|
|
}
|
|
|
@@ -347,29 +216,16 @@ p:focus {
|
|
|
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.ltyellow { background: #ffffe0; }
|
|
|
+.bdropinp.mny { color: #446444; }
|
|
|
+.bdropinp.logout { color: #aa4444; }
|
|
|
+.bdropinp.highlight { background: #aaaaff; }
|
|
|
|
|
|
-.bdropinp:focus {
|
|
|
- outline:0;
|
|
|
-}
|
|
|
+.bdropinp:focus { outline:0; }
|
|
|
|
|
|
.bdropinp:active {
|
|
|
- margin-left:9px;
|
|
|
+ /* margin-left:9px; */
|
|
|
+ margin-left:1vw;
|
|
|
background: #aaaaaa;
|
|
|
|
|
|
-webkit-transition: margin-left 0.05s ease, box-shadow 0.05s ease, background 0.05s ease;
|
|
|
@@ -383,53 +239,20 @@ p:focus {
|
|
|
|
|
|
/***********/
|
|
|
|
|
|
-.bkey:focus {
|
|
|
- outline:0;
|
|
|
-}
|
|
|
-
|
|
|
-.bkeym:focus {
|
|
|
- outline:0;
|
|
|
-}
|
|
|
-
|
|
|
-/*****/
|
|
|
-
|
|
|
-.bkeyw:focus {
|
|
|
- outline:0;
|
|
|
-}
|
|
|
-
|
|
|
-/*****/
|
|
|
-
|
|
|
-.bkeyHuge:focus {
|
|
|
- outline:0;
|
|
|
-}
|
|
|
-
|
|
|
-/*****/
|
|
|
-
|
|
|
-.bfieldinp:focus {
|
|
|
- outline:0;
|
|
|
-}
|
|
|
-
|
|
|
-/*****/
|
|
|
+.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;
|
|
|
}
|
|
|
@@ -448,8 +271,6 @@ p:focus {
|
|
|
margin-left: -5vw;
|
|
|
}
|
|
|
|
|
|
-/*****/
|
|
|
-
|
|
|
.rowmain0 {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
@@ -460,17 +281,10 @@ p:focus {
|
|
|
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;
|