Initial commit
This commit is contained in:
591
wwwroot/styles/screen.css
Normal file
591
wwwroot/styles/screen.css
Normal file
@@ -0,0 +1,591 @@
|
||||
body{
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
#pageContainer{
|
||||
display:flex;
|
||||
overflow:hidden;
|
||||
height:100vh !important;
|
||||
}
|
||||
|
||||
#leftColumn{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
height:100%;
|
||||
flex-basis:35%;
|
||||
}
|
||||
|
||||
#tableDetails{
|
||||
display:flex;
|
||||
flex-basis:10%;
|
||||
flex-direction:column;
|
||||
}
|
||||
|
||||
#tableDetails h2{
|
||||
flex-basis:50%;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
|
||||
}
|
||||
|
||||
#tableDetails div{
|
||||
display:flex;
|
||||
flex-basis:50%;
|
||||
}
|
||||
|
||||
#tableDetails div a{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
flex-basis:50%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
#orderBoxContainer{
|
||||
flex-basis:80%;
|
||||
background-color:#000;
|
||||
overflow-y:auto;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
#leftColumnFooter{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
flex-basis:10%;
|
||||
background-color:#777;
|
||||
}
|
||||
|
||||
#leftColumnFooter .messageBox{
|
||||
border-top:inset 3px #ccc;
|
||||
border-bottom:inset 3px #ccc;
|
||||
flex-basis:30%;
|
||||
background-color:#FFF;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
|
||||
#leftColumnFooter h2,
|
||||
#leftColumnFooter .selectedTotal{
|
||||
flex-basis:30%;
|
||||
padding-right:1em;
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
#rightColumn{
|
||||
display:flex;
|
||||
flex-basis:65%;
|
||||
flex-direction:column;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
#topBar{
|
||||
flex-basis:10%;
|
||||
display:flex;
|
||||
background:#666;
|
||||
}
|
||||
|
||||
#topBar .exit{
|
||||
flex-basis:15%;
|
||||
font-size:3em;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
|
||||
#topBar a{
|
||||
flex:1;
|
||||
height:100%;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
|
||||
#topHalf{
|
||||
flex-basis:25%;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
#topHalf div{
|
||||
display:flex;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.endFunctionColumn{
|
||||
flex-basis:15%;
|
||||
flex-direction:column;
|
||||
}
|
||||
|
||||
.functionColumn{
|
||||
flex:1;
|
||||
flex-direction:column;
|
||||
}
|
||||
|
||||
.functionColumn *{
|
||||
display:flex;
|
||||
flex:1;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
|
||||
#middleHalf{
|
||||
background-color:#666;
|
||||
flex-basis:10%;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
overflow-x:auto;
|
||||
overflow-y:hidden;
|
||||
}
|
||||
|
||||
#middleHalf a{
|
||||
height:100%;
|
||||
flex:1;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
#bottomHalf{
|
||||
flex:1;
|
||||
overflow-x:auto;
|
||||
overflow-y:hidden;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.pageControls{
|
||||
flex-basis:10%;
|
||||
width:100%;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.pageControls a{
|
||||
height:100%;
|
||||
flex:1;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
#bottomHalf::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#pageWrapper{
|
||||
height:100%;
|
||||
width:100%;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.itemPage{
|
||||
flex-basis:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
|
||||
.itemPage table{
|
||||
table-layout:fixed;
|
||||
}
|
||||
|
||||
.itemPage td{
|
||||
}
|
||||
|
||||
td .itemCellWrapper{
|
||||
position:relative;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
|
||||
td .posButton{
|
||||
position:absolute;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
|
||||
td .posButton.normal{
|
||||
font-size:0.9em;
|
||||
gap:2%;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
td .posButton.normal a:first-of-type{
|
||||
font-size:0.9em;
|
||||
flex-basis:100%;
|
||||
text-align:center;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
td .posButton.normal.hasImage a:first-of-type{
|
||||
margin-left:2%;
|
||||
height:100%;
|
||||
flex-basis:24%;
|
||||
background-size:contain;
|
||||
background-repeat:no-repeat;
|
||||
background-position:center;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
td .posButton.normal.hasImage a:nth-of-type(2){
|
||||
flex-basis:70%;
|
||||
}
|
||||
|
||||
td .posButton.doubleHeight{
|
||||
flex-direction:column;
|
||||
}
|
||||
|
||||
td .posButton.doubleHeight.hasImage a:first-of-type{
|
||||
margin-top:5%;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
width:100%;
|
||||
flex-basis:66%;
|
||||
background-size:contain;
|
||||
background-repeat:no-repeat;
|
||||
background-position:center 20%;
|
||||
}
|
||||
|
||||
.mobile td .posButton.doubleHeight.hasImage a:first-of-type{
|
||||
background-position:center bottom;
|
||||
}
|
||||
|
||||
td .posButton.doubleHeight.hasImage a:nth-of-type(2){
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
flex-basis:33%;
|
||||
}
|
||||
|
||||
td .posButton.doubleWidth.hasImage a:first-of-type{
|
||||
margin-left:2%;
|
||||
height:100%;
|
||||
flex-basis:24%;
|
||||
background-size:contain;
|
||||
background-repeat:no-repeat;
|
||||
background-position:0 center;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
td .posButton.doubleWidth.hasImage a:nth-of-type(2){
|
||||
flex-basis:74%;
|
||||
}
|
||||
|
||||
td .posButton.doubleWidth.doubleHeight{
|
||||
flex-direction:row;
|
||||
gap:4%;
|
||||
}
|
||||
|
||||
td .posButton.doubleWidth.doubleHeight.hasImage a:first-of-type{
|
||||
margin-left:2%;
|
||||
flex-basis:48%;
|
||||
height:100%;
|
||||
background-size:contain;
|
||||
background-repeat:no-repeat;
|
||||
background-position:center;
|
||||
}
|
||||
|
||||
td .posButton.doubleWidth.doubleHeight.hasImage a:nth-of-type(2){
|
||||
flex-basis:48%;
|
||||
}
|
||||
|
||||
#orderBoxItem{
|
||||
width:50%;
|
||||
}
|
||||
|
||||
#orderBox{
|
||||
width:100%;
|
||||
}
|
||||
|
||||
#orderBox th{
|
||||
text-align:center;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
#orderBox th,
|
||||
#orderBox td{
|
||||
height:3em;
|
||||
vertical-align:middle;
|
||||
text-align:center;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
|
||||
.instructionRow td{
|
||||
font-weight:lighter !important;
|
||||
font-size:1em !important;
|
||||
|
||||
}
|
||||
|
||||
td.itemCell{
|
||||
text-align:left !important;
|
||||
}
|
||||
|
||||
.rtl td.itemCell{
|
||||
text-align:right !important;
|
||||
}
|
||||
|
||||
.instructionRow .itemCell{
|
||||
padding-left:2em;
|
||||
}
|
||||
|
||||
.rtl .instructionRow .itemCell{
|
||||
padding-right:2em !important;
|
||||
}
|
||||
|
||||
#positions{
|
||||
position:relative;
|
||||
flex-wrap:wrap;
|
||||
width: 306px;
|
||||
height:max-content;
|
||||
left:-100px;
|
||||
top:0;
|
||||
border:solid 2px #ccc;
|
||||
background-color:#666;
|
||||
z-index:1000 !important;
|
||||
display:none !important;;
|
||||
}
|
||||
|
||||
#positions .posButton{
|
||||
float:left;
|
||||
width:100px;
|
||||
height:50px;
|
||||
line-height:50px;
|
||||
}
|
||||
|
||||
.instructionRow .invisibleText{
|
||||
color:rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
#tableDetails{
|
||||
text-align:center;
|
||||
background-color:#ccc;
|
||||
color:#444;
|
||||
}
|
||||
|
||||
|
||||
.qtyCell{
|
||||
width:15%;
|
||||
}
|
||||
|
||||
.totalPriceCell{
|
||||
width:15%;
|
||||
}
|
||||
|
||||
.printGroupCell{
|
||||
width:15%;
|
||||
}
|
||||
|
||||
.itemCell{
|
||||
width:55%;
|
||||
}
|
||||
|
||||
th.itemCell{
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.numPad{
|
||||
width:260px;
|
||||
padding-left:1em;
|
||||
}
|
||||
|
||||
.numPad a{
|
||||
float:left;
|
||||
height:68px;
|
||||
line-height:68px;
|
||||
margin:2px;
|
||||
width:80px;
|
||||
}
|
||||
|
||||
.posHeader{
|
||||
background-color:#666;
|
||||
color:#ccc;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*Begin Styling for Table Map Screen*/
|
||||
#areaMenu{
|
||||
display:flex;
|
||||
}
|
||||
|
||||
#areaMenu a{
|
||||
height:80px;
|
||||
padding:0 5px;
|
||||
text-align:center;
|
||||
line-height:80px;
|
||||
width:140px;
|
||||
}
|
||||
|
||||
#tableScreen{
|
||||
overflow:hidden;
|
||||
display:flex;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
height: 100%; /* NEW */
|
||||
}
|
||||
|
||||
#tablemapLeftColumn{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
flex-basis:10%;
|
||||
background-color:#333;
|
||||
}
|
||||
|
||||
|
||||
#tablemapRightColumn{
|
||||
display:flex;
|
||||
flex-basis:10%;
|
||||
flex-direction:column;
|
||||
background-color:#333;
|
||||
}
|
||||
|
||||
|
||||
.topCell{
|
||||
display:flex;
|
||||
flex-basis:10%;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.mobile #pageContainer{
|
||||
font-size:0.5em !important;
|
||||
}
|
||||
|
||||
.topCell a{
|
||||
height:100%;
|
||||
flex-basis:100%;
|
||||
}
|
||||
|
||||
a.logOut{
|
||||
font-size:3em;
|
||||
}
|
||||
|
||||
.middleCell{
|
||||
width:100%;
|
||||
flex-basis:80%;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.middleCell a.editModeButton{
|
||||
width:100%;
|
||||
flex-basis:33%;
|
||||
}
|
||||
|
||||
.bottomCell{
|
||||
flex-basis:10%;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#tablemapCenterColumn{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
flex-basis:80%;
|
||||
|
||||
}
|
||||
|
||||
#tablemapLeftColumn a,
|
||||
#tablemapRightColumn a{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
|
||||
#centerTopRow{
|
||||
display:flex;
|
||||
flex-basis:10%;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
background-color:#333;
|
||||
}
|
||||
|
||||
#mapContainer{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
flex-basis:80%;
|
||||
}
|
||||
|
||||
#tableMap{
|
||||
background-repeat:no-repeat;
|
||||
}
|
||||
|
||||
#centerBottomRow{
|
||||
display:flex;
|
||||
flex-basis:10%;
|
||||
background-color:#333;
|
||||
}
|
||||
|
||||
#centerTopRow a{
|
||||
height:100%;
|
||||
display:flex;
|
||||
flex:1;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.editControls{
|
||||
display:flex;
|
||||
height:100%;
|
||||
flex-basis:100%;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.floorplanControls,
|
||||
.mergeControls{
|
||||
visibility:hidden;
|
||||
width:100%;
|
||||
flex-basis:33%;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
}
|
||||
|
||||
.editControls a{
|
||||
height:100%;
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
flex:1;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.editControls .posHeader{
|
||||
flex-direction:column;
|
||||
}
|
||||
|
||||
.floorplanControls a,
|
||||
.mergeControls a{
|
||||
display:flex;
|
||||
flex-basis:33%;
|
||||
width:100%;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
|
||||
#editControls{
|
||||
display:none;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
92
wwwroot/styles/tableMap.css
Normal file
92
wwwroot/styles/tableMap.css
Normal file
@@ -0,0 +1,92 @@
|
||||
#tableScreen{
|
||||
height:100vh !important;
|
||||
}
|
||||
#decorator{
|
||||
display:none;
|
||||
position:absolute;
|
||||
margin:auto;
|
||||
top:0;
|
||||
bottom:0;
|
||||
right:0;
|
||||
left:0;
|
||||
width:30%;
|
||||
height:50%;
|
||||
background-color:#333;
|
||||
border:solid 2px;
|
||||
flex-direction:column;
|
||||
}
|
||||
|
||||
.mobile #decorator{
|
||||
width:90%;
|
||||
height:90%;
|
||||
}
|
||||
|
||||
.deleteDecoration{
|
||||
display:none;
|
||||
}
|
||||
|
||||
#decoratorHeader{
|
||||
background-color:#666;
|
||||
display:flex;
|
||||
flex-basis:10%
|
||||
}
|
||||
|
||||
#decoratorHeader *{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
#decoratorHeader h2{
|
||||
flex-basis:90%;
|
||||
}
|
||||
|
||||
#decoratorHeader a{
|
||||
flex-basis:10%;
|
||||
}
|
||||
|
||||
#decoratorContent{
|
||||
flex-basis:90%;
|
||||
width:100%;
|
||||
overflow-y:auto;
|
||||
display:block;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
.decoratorRow{
|
||||
display:flex;
|
||||
height:30%;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.decoratorItem{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
height:100%;
|
||||
flex-basis:25%;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.decoratorRow:nth-child(odd) .decoratorItem:nth-child(even),
|
||||
.decoratorRow:nth-child(even) .decoratorItem:nth-child(odd){
|
||||
background-color:#ccc;
|
||||
color:#333;
|
||||
}
|
||||
|
||||
.decoratorItem a{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.decoratorItem a:first-of-type{
|
||||
flex-basis:70%;
|
||||
background-size:contain;
|
||||
background-repeat:no-repeat;
|
||||
background-position:center center;
|
||||
}
|
||||
|
||||
.decoratorItem a:nth-of-type(2){
|
||||
flex-basis:30%;
|
||||
}
|
||||
411
wwwroot/styles/theme.css
Normal file
411
wwwroot/styles/theme.css
Normal file
@@ -0,0 +1,411 @@
|
||||
*,body{
|
||||
padding:0;
|
||||
margin:0;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.rtl{
|
||||
direction:rtl;
|
||||
}
|
||||
|
||||
body{
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
}
|
||||
|
||||
.rtl td.itemCell{
|
||||
text-align:right !important;
|
||||
}
|
||||
.rtl .instructionRow .itemCell{
|
||||
padding-right:2em !important;
|
||||
}
|
||||
|
||||
body.darkMode{
|
||||
background-image: linear-gradient(137deg, #242424 25%, #2e2e2e 25%, #2e2e2e 50%, #242424 50%, #242424 75%, #2e2e2e 75%, #2e2e2e 100%);
|
||||
background-size: 58.65px 54.69px;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
|
||||
body.lightMode{
|
||||
background-color:#eee;
|
||||
color:#0f59b1
|
||||
}
|
||||
|
||||
.hide{
|
||||
display:none;
|
||||
}
|
||||
|
||||
#pageContainer{
|
||||
background-color:#333;
|
||||
}
|
||||
|
||||
.darkMode #orderBox tbody tr.selected{
|
||||
background-color:#aaa !important;
|
||||
}
|
||||
|
||||
.lightMode #orderBox tbody tr.selected{
|
||||
background-color:#0f59b1 !important;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
.darkMode #orderBox th{
|
||||
color:#eee;
|
||||
background-color:#999;
|
||||
}
|
||||
|
||||
.lightMode #orderBox th{
|
||||
color:#0f59b1;
|
||||
background-color:#eee;
|
||||
}
|
||||
|
||||
.darkMode #orderBox tbody tr{
|
||||
background: #777;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
.lightMode #orderBox tbody tr{
|
||||
background: #eee;
|
||||
color:#0f59b1;
|
||||
}
|
||||
|
||||
.darkMode .posButton{
|
||||
color: #eee;
|
||||
background: #232B30 -webkit-linear-gradient(top, #3D4850 3%, #000 4%, #333 100%);
|
||||
text-shadow: 1px 1px #1f272b;
|
||||
}
|
||||
|
||||
.lightMode .posButton{
|
||||
color: #0f59b1;
|
||||
background: linear-gradient(0deg, rgba(172,172,172,1) 0%, rgba(255,255,255,1) 100%);
|
||||
text-shadow: 1px 1px #fff;
|
||||
border-color:#ddd
|
||||
}
|
||||
|
||||
|
||||
.posButton.void{
|
||||
background: #232B30 -webkit-linear-gradient(270deg, rgba(255,0,0,1) 0%, #b94141 100%);
|
||||
color:#000;
|
||||
}
|
||||
|
||||
.darkMode .posButton:active,
|
||||
.darkMode .posButton.active{
|
||||
border-color:#eee;
|
||||
border-style: inset;
|
||||
background-position: 0 top;
|
||||
color: #fff;
|
||||
background: #20282D -webkit-gradient(linear, left top, left bottom, color-stop(3%,#20282D), color-stop(51%,#252E34), color-stop(100%,#222A30)); /* webkit */
|
||||
box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* CSS3 */
|
||||
}
|
||||
|
||||
.lightMode .posButton:active,
|
||||
.lightMode .posButton.active{
|
||||
border-color:#000 !important;
|
||||
border-style: inset;
|
||||
background-position: 0 top;
|
||||
color: #333;
|
||||
background: linear-gradient(0deg, rgba(15,89,177,1) 0%, rgba(249,249,249,1) 100%);
|
||||
box-shadow: 0; /* CSS3 */
|
||||
}
|
||||
|
||||
.posButton.void.active,
|
||||
.void:active{
|
||||
color:#000;
|
||||
background: #232B30 -webkit-linear-gradient(90deg, rgba(255,0,0,1) 0%, #b94141 100%) !important;
|
||||
border:inset 2px #fff;
|
||||
}
|
||||
|
||||
.posButton{
|
||||
text-align:center;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
border: 1px solid #1c252b;
|
||||
border-radius: 3px;
|
||||
box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
/*VirtualNumpad*/
|
||||
#virtualNumpad{
|
||||
display:none;
|
||||
flex-direction:column;
|
||||
background-color:#666;
|
||||
width:33%;
|
||||
max-width:400px;
|
||||
height:640px;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
z-index:1200;
|
||||
top: 0; left: 0; bottom: 0; right: 0;
|
||||
border:solid 5px #333;
|
||||
}
|
||||
|
||||
.mobile #virtualNumpad{
|
||||
width:90%;
|
||||
max-width:100%;
|
||||
height:90%;
|
||||
font-size:3em;
|
||||
}
|
||||
|
||||
@media (max-width: 800px){
|
||||
body{
|
||||
font-size:0.6em;
|
||||
}
|
||||
}
|
||||
|
||||
#virtualNumpadInput{
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
flex-basis:10%;
|
||||
background-color:#888;
|
||||
color:#eee;
|
||||
font-weight:bold;
|
||||
font-size:4em;
|
||||
overflow-x:auto;
|
||||
overflow-y:hidden;
|
||||
}
|
||||
|
||||
.headingRow{
|
||||
display:flex;
|
||||
flex-basis:10%;
|
||||
}
|
||||
|
||||
#virtualNumpadHeading{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
flex:1;
|
||||
justify-content:center;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
#virtualNumpadButtons{
|
||||
display:flex;
|
||||
flex-basis:80%;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.virtualNumpadRow{
|
||||
flex-basis:20%;
|
||||
width:100%;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.virtualNumpadButton{
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
flex-basis:33%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.virtualNumpadSubmit{
|
||||
flex-basis:99%;
|
||||
}
|
||||
|
||||
/*Virtual Keyboard*/
|
||||
#virtualKeyboard{
|
||||
position:absolute;
|
||||
margin:auto;
|
||||
height:50%;
|
||||
width:75%;
|
||||
z-index:1200;
|
||||
top: 0; left: 0; bottom: 0; right: 0;
|
||||
border:solid 5px #eee;
|
||||
background-color:#666;
|
||||
display:none;
|
||||
flex-direction:column;
|
||||
}
|
||||
|
||||
.mobile #virtualKeyboard{
|
||||
width:100%;
|
||||
height:33%;
|
||||
font-size:2em;
|
||||
}
|
||||
|
||||
#virtualKeyboardHeading{
|
||||
display:flex;
|
||||
flex-basis: 80%;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
#virtualKeyboardInput{
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
flex-basis: 15%;
|
||||
background-color:#888;
|
||||
color:#eee;
|
||||
font-weight:bold;
|
||||
font-size:2em;
|
||||
overflow-x:auto;
|
||||
overflow-y:hidden;
|
||||
}
|
||||
|
||||
#virtualKeyboardButtons{
|
||||
display:flex;
|
||||
flex-basis:75%;
|
||||
flex-direction:column;
|
||||
flex-wrap:wrap;
|
||||
|
||||
}
|
||||
|
||||
.virtualKeyboardRow{
|
||||
display:flex;
|
||||
flex-basis:20%;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.virtualKeyboardButton{
|
||||
flex:1;
|
||||
display:flex;
|
||||
height:100%;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.virtualKeyboardButton[data-value="space"]{
|
||||
flex:0 0 80%!important;
|
||||
}
|
||||
|
||||
.closeKeyboards{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
flex-basis:20%;
|
||||
background-color:#000;
|
||||
}
|
||||
|
||||
.popupBox{
|
||||
position:absolute;
|
||||
z-index:1000;
|
||||
display:none;
|
||||
border:solid 1px;
|
||||
background-color:#666;
|
||||
flex-direction:column;
|
||||
}
|
||||
|
||||
.popupBox a{
|
||||
flex:1;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.popupBox a.flexWide{
|
||||
flex-basis:100%;
|
||||
}
|
||||
|
||||
.popupBoxRow{
|
||||
flex:1;
|
||||
display:flex;
|
||||
|
||||
}
|
||||
|
||||
/*Virtual Keyboard*/
|
||||
#gridContainer{
|
||||
position:absolute;
|
||||
margin:auto;
|
||||
height:50%;
|
||||
width:75%;
|
||||
z-index:1200;
|
||||
top: 0; left: 0; bottom: 0; right: 0;
|
||||
border:solid 5px #eee;
|
||||
background-color:#666;
|
||||
display:none;
|
||||
flex-direction:column;
|
||||
}
|
||||
|
||||
#gridBody{
|
||||
display:flex;
|
||||
}
|
||||
|
||||
#gridHeader{
|
||||
display:flex;
|
||||
flex:1;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
#gridHeader a{
|
||||
flex-basis:15%;
|
||||
}
|
||||
|
||||
#gridHeader h3{
|
||||
flex:1
|
||||
}
|
||||
|
||||
#gridHeader *{
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
#gridBody{
|
||||
}
|
||||
|
||||
#alert{
|
||||
color:#eee;
|
||||
background-color:#333;
|
||||
flex-direction:column;
|
||||
border:solid 5px;
|
||||
display:none;
|
||||
position:absolute;
|
||||
width:30%;
|
||||
height:30%;
|
||||
top:0;right:0;left:0;bottom:0;
|
||||
margin:auto;
|
||||
z-index:1300;
|
||||
}
|
||||
|
||||
.mobile #alert{
|
||||
height:33%;
|
||||
width:95%;
|
||||
}
|
||||
|
||||
#alertHeading{
|
||||
color:#eee;
|
||||
display:flex;
|
||||
flex-basis:20%;
|
||||
font-size:1.5em;
|
||||
align-items:center;
|
||||
text-align:center;
|
||||
justify-content:center;
|
||||
background-color:#666;
|
||||
border-bottom:solid 3px;
|
||||
}
|
||||
|
||||
#alertMessage{
|
||||
display:flex;
|
||||
flex-basis:60%;
|
||||
justify-content:center;
|
||||
text-align:center;
|
||||
align-items:center;
|
||||
font-size:1.2em;
|
||||
}
|
||||
|
||||
#alertButtons{
|
||||
flex-basis:20%;
|
||||
width:100%;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
#alertButtons a{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
text-align:center;
|
||||
flex:1;
|
||||
height:100%;
|
||||
}
|
||||
Reference in New Issue
Block a user