forked from Wavyzz/dolibarr
178 lines
2.9 KiB
CSS
178 lines
2.9 KiB
CSS
html,body {
|
|
padding:0;
|
|
margin:0;
|
|
height:100%;
|
|
}
|
|
|
|
body {
|
|
width:100%;
|
|
}
|
|
|
|
.row {
|
|
width:100%;
|
|
height:50%;
|
|
}
|
|
|
|
.row div {
|
|
width:33%;
|
|
height:100%;
|
|
float:left;
|
|
}
|
|
|
|
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%;
|
|
}
|
|
|
|
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%;
|
|
}
|
|
|
|
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:12%;
|
|
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:32%;
|
|
height:32%;
|
|
}
|
|
|
|
div.wrapper{
|
|
float:left; /* important */
|
|
position:relative; /* important(so we can absolutely position the description div */
|
|
width:21.5%;
|
|
height:23%;
|
|
margin:1%;
|
|
border: 0.1em solid;
|
|
box-shadow: 3px 3px 2px #888;
|
|
text-align: center;
|
|
}
|
|
|
|
div.wrapper2{
|
|
float:left; /* important */
|
|
position:relative; /* important(so we can absolutely position the description div */
|
|
width:10.2%;
|
|
height:23%;
|
|
margin-top:0.5%;
|
|
margin-bottom:0.5%;
|
|
margin-left:0.5%;
|
|
margin-right:0.5%;
|
|
border: 0.1em solid;
|
|
box-shadow: 3px 3px 2px #888;
|
|
text-align: center;
|
|
}
|
|
|
|
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 bellow */
|
|
background-color:black;
|
|
font-family: 'tahoma';
|
|
color:white;
|
|
opacity:0.8; /* transparency */
|
|
filter:alpha(opacity=80); /* IE transparency */
|
|
text-align:center;
|
|
}
|
|
|
|
@media only screen and (max-aspect-ratio: 6/4) {
|
|
div.description{
|
|
min-height:20%;
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
} |