?iť?
Current Path : /home/scgforma/www/soc064/htdocs/takepos/css/ |
Current File : /home/scgforma/www/soc064/htdocs/takepos/css/pos.css |
html,body { box-sizing: border-box; padding:3px; margin:0; height:100%; width:100%; } button.calcbutton { display: inline-block; position: relative; padding: 0; line-height: normal; cursor: pointer; vertical-align: middle; text-align: center; overflow: visible; /* removes extra width in IE */ width:24%; height:24%; font-weight: bold; } button.calcbutton2 { display: inline-block; position: relative; padding: 0; line-height: normal; cursor: pointer; vertical-align: middle; text-align: center; overflow: visible; /* removes extra width in IE */ width:24%; height:24%; font-weight: bold; } button.calcbutton3 { display: inline-block; position: relative; padding: 0; line-height: normal; cursor: pointer; vertical-align: middle; text-align: center; font-size:120%; overflow: visible; /* removes extra width in IE */ width:24%; height:24%; } button.actionbutton { display: inline-block; position: relative; padding: 0; line-height: normal; cursor: pointer; vertical-align: middle; text-align: center; overflow: visible; /* removes extra width in IE */ width:33%; height:24%; } div.wrapper{ float:left; /* important */ position:relative; /* important(so we can absolutely position the description div */ width:25%; height:25%; margin:0; padding:1px; border: 2px solid #D1D1D1; /*box-shadow: 3px 3px 3px #bbb; */ text-align: center; box-sizing: border-box; background-color:#fff; } div.wrapper2{ float:left; /* important */ position:relative; /* important(so we can absolutely position the description div */ width:12.5%; height:25%; margin:0; /* padding:1px; */ border: 2px solid #D1D1D1; /*box-shadow: 3px 3px 3px #bbb;*/ text-align: center; box-sizing: border-box; background-color:#fff; } button:active{ background:black; color: white; } div.description{ position:absolute; /* absolute position (so we can position it where we want)*/ bottom:0px; /* position will be on bottom */ left:0px; width:100%; /* styling below */ background-color:black; color:white; opacity:0.8; /* transparency */ filter:alpha(opacity=80); /* IE transparency */ text-align:center; } div.catwatermark{ position:absolute; top:3%; left:3%; width:20%; background-color:black; color:white; text-align:center; font-size: 20px; display: none; opacity: 0.8; } table.postablelines tr td { line-height: unset; padding-top: 3px; padding-bottom: 3px; } .posinvoiceline td { height: 40px !important; } @media only screen and (max-aspect-ratio: 6/4) { div.description{ min-height:20%; } } .container{ width: 100%; height: 100%; margin: 0 auto; overflow: visible; box-sizing: border-box; } .row1{ margin: 0 auto; width: 100%; height: 34%; } .row2{ margin: 0 auto; width: 100%; height: 66%; } .div1{ height:100%; width: 34%; float: left; text-align: center; box-sizing: border-box; overflow: auto; /* background-color:white; */ padding-top: 0; padding-bottom: 10px; padding-right: 5px; padding-left: 5px; } .div2{ height: 100%; width: 33%; font-size: 0; float: left; box-sizing: border-box; padding-top: 0; padding-bottom: 10px; padding-right: 5px; padding-left: 5px; } .div3{ height: 100%; width: 33%; float: left; box-sizing: border-box; padding-top: 0; padding-bottom: 10px; padding-right: 5px; padding-left: 5px; } .div4{ height: 100%; width: 34%; float: left; box-sizing: border-box; font-size: 6px; padding-top: 10px; padding-bottom: 10px; padding-right: 5px; padding-left: 5px; } .div5{ height: 100%; width: 66%; float: left; box-sizing: border-box; font-size: 6px; padding-top:10px; padding-bottom:10px; padding-right: 5px; padding-left: 5px; } tr.selected, tr.selected td { /* font-weight: bold; */ background-color: rgb(240,230,210) !important; } .order { color: limegreen; } .colorwhite { color: white; } .colorred { color: red; } .colorgreen { color: green; } .poscolordelete { color: #844; } .poscolorgreen { color: #060; } .poscolorblue { color: #006; } .centerinmiddle { transform: translate(0,-50%); position: relative; top: 50%; } .trunc { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } p.description_content{ padding:10px; margin:0px; } @media screen and (min-width: 892px) { .calcbutton{ font-size: 18px; } .calcbutton2{ font-size: 14px; } .actionbutton{ font-size: 13px; } div.description{ font-size: 15px; } .invoice{ font-size: 14px; } } @media (max-width: 891px) and (min-width: 386px) { .calcbutton{ font-size: 12px; } .calcbutton2{ font-size: 9px; } .actionbutton{ font-size: 12px; } div.description{ font-size: 13px; } .invoice{ font-size: 12px; } } @media screen and (max-width: 385px){ .calcbutton{ font-size: 8px; } .calcbutton2{ font-size: 7px; } .actionbutton{ font-size: 10px; } div.description{ font-size: 11px; } .invoice{ font-size: 10px; } } @media screen and (max-width: 767px){ div.wrapper { width: 50%; } div.wrapper2 { width: 25%; } }