LJ/webui/LJgrid.css
2019-01-16 01:50:24 +01:00

325 lines
7.5 KiB
CSS

.maingrid {
display: grid;
grid-template-columns: 900px;
grid-template-raw: 1fr 1fr 1fr 1fr;
grid-gap: 1px;
background-color: #222;
padding: 5px;
padding-bottom: 0px;
}
.mgtitle {
display: grid;
height: 90px;
grid-template-columns: 130px 70px 80px 600px;
background-color: #111;
transition: all .3s ease;
padding-top: 10px;
border-color: #445;
border-style: groove;
border-width: 1px;
}
.mgstatus {
display: grid;
grid-template-columns: 250px 150px 1fr;
grid-template-raw: 30px;
grid-column-gap: 1px;
grid-row-gap: 1px;
border-color: #334;
border-style: groove;
border-width: 1px;
background-color: #111;
font-size: small;
color:#444;
font-family: sans-serif, Helvetica, Verdana, Arial;
justify-items: center;
align-items: center;
font-family: 'hobeaux-rococeaux-background', Helvetica;
}
.mgalign {
display: grid;
height: 400px;
grid-template-columns: 144px 144px 138px 138px 10px;
grid-template-rows: 1Fr;
background-color: #151515;
border-color: #445;
border-style: groove;
border-width: 1px;
}
.mgcanvas {
display: none;
height: 400px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1Fr;
background-color: #151515;
border-color: #445;
border-style: groove;
border-width: 1px;
}
.mglive {
display: none;
height: 400px;
grid-template-columns: 138px 138px 512px 1Fr;
grid-template-rows: 1Fr;
background-color: #151515;
border-color: #445;
border-style: groove;
border-width: 1px;
}
.mgrun {
display: none;
height: 400px;
grid-template-columns: 66px 66px 66px 66px 66px 66px 66px 66px;
grid-template-rows: 66px 17px 69px 17px 66px 17px 66px 17px;
background-color: #000;
justify-items: center;
align-items: center;
border-color: #445;
border-style: groove;
border-width: 1px;
grid-gap: 1px;
transition: all .3s ease;
}
.mgfooter {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-raw: 25px;
grid-column-gap: 1px;
grid-row-gap: 1px;
border-color: #334;
border-style: groove;
border-width: 1px;
background-color: #111;
font-size: small;
font-family: sans-serif, Helvetica, Verdana, Arial;
justify-items: center;
align-items: center;
font-family: 'hobeaux-rococeaux-background', Helvetica;
}
.topgrid {
display: grid;
height: 80px;
grid-template-columns: 60px 75px 40px 60px 75px 60px 75px 60px 75px;
background-color: #111;
justify-items: center;
align-items: center;
grid-gap: 1px;
border-color: #445;
border-style: groove;
border-width: 1px;
transition: all .3s ease;
}
.laserbox {
display: grid;
height: 390px;
width: 132px;
grid-template-columns: 124px;
grid-template-rows: 15px 32px 325px;
background-color: #111;
line-height: 1;
padding: 4px;
justify-items: center;
align-items: center;
border-color: #334;
border-style: groove;
border-width: 1px;
}
.lasergrid {
display: grid;
height: 323px;
width: 124px;
grid-template-columns: 62px 62px;
grid-template-rows: 30px 19px 8px 55px 20px 19px 8px 55px 25px 19px 8px 55px 19px;
background-color: #111;
line-height: 1;
justify-items: center;
align-items: center;
color:#88c;
}
.lissabox {
display: grid;
height: 353px;
width: 126px;
grid-template-columns: 124px;
grid-template-rows: 15px 338px;
background-color: #111;
line-height: 1;
padding: 6px;
justify-items: center;
align-items: center;
border-color: #334;
border-style: groove;
border-width: 1px;
}
.spacer {
display: grid;
height: 8px;
}
.lissagrid {
display: grid;
height: 323px;
width: 124px;
grid-template-columns: 60px 60px ;
grid-template-rows: 55px 25px 15px 8px 55px 25px 15px 8px 55px 25px 15px;
background-color: #111;
line-height: 1;
justify-items: center;
align-items: center;
}
.withaibox {
display: grid;
height: 353px;
width: 126px;
grid-template-columns: 124px;
grid-template-rows: 15px 338px;
background-color: #111;
line-height: 1;
padding: 6px;
justify-items: center;
align-items: center;
border-color: #334;
border-style: groove;
border-width: 1px;
}
.withaigrid {
display: grid;
height: 323px;
width: 124px;
grid-template-columns: 60px 60px ;
grid-template-rows: 55px 25px 15px 8px 55px 25px 15px 8px 55px 25px 15px;
background-color: #111;
line-height: 1;
justify-items: center;
align-items: center;
}
.projgrid {
display: grid;
height: 140px;
width: 194px;
grid-template-columns: 1Fr 1Fr 1Fr;
grid-template-rows: 25px 8px 55px 25px 15px;
background-color: #111;
line-height: 1;
justify-items: center;
align-items: center;
border-color: #334;
border-style: groove;
border-width: 1px;
}
.lasertext {
font-size: small;
font-family: Helvetica, Verdana, Arial, sans-serif;
color: #bbb;
}
.lasertextxs {
font-size: x-small;
font-family: Helvetica, Verdana, Arial, sans-serif;
color: #bbb;
}
.lsttgrid {
display: grid;
height: 20px;
grid-template-columns: 10px 10px 25px 25px;
grid-template-rows: 15px 15px 15px 15px 15px;
grid-gap: 1px;
justify-items: center;
align-items: center;
transition: all .3s ease;
}
.onoffgrid {
display: grid;
height: 14px;
grid-template-columns: 1Fr;
grid-template-rows: 15px 110px;
justify-items: center;
transition: all .3s ease;
}
.icongrid {
padding: 2px;
width: 100%;
max-height: 100%;
}
#showin {
font-family: Helvetica, Verdana, Arial, sans-serif;
color :#444;
width: 150px;
height: 25px;
padding-top: 4px;
}
#showout {
font-family: Helvetica, Verdana, Arial, sans-serif;
color: #444;
width: 150px;
height: 25px;
padding-top: 4px;
}
#events {
font-family: Helvetica, Verdana, Arial, sans-serif;
color: #444;
width: 150px;
height: 25px;
padding-top: 4px;
}
.button {
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 8px 5px;
border: 1px solid #404040;
background: #141414;
background: -webkit-gradient(linear, left top, left bottom, from(#141414), to(#141414));
background: -moz-linear-gradient(top, #141414, #141414);
background: linear-gradient(to bottom, #141414, #141414);
font: normal normal normal 11px arial;
color: #ffffff;
text-decoration: none;
}
.button:hover,
.button:focus {
padding: 8px 5px;
border: 1px solid #b6b6b6;
background: #181818;
background: -webkit-gradient(linear, left top, left bottom, from(#181818), to(#181818));
background: -moz-linear-gradient(top, #181818, #181818);
background: linear-gradient(to bottom, #181818, #181818);
color: #ffffff;
text-decoration: none;
}
.button:active {
padding: 8px 5px;
background: #0c0c0c;
background: -webkit-gradient(linear, left top, left bottom, from(#0c0c0c), to(#141414));
background: -moz-linear-gradient(top, #0c0c0c, #141414);
background: linear-gradient(to bottom, #0c0c0c, #141414);
border: 1px solid #6666B6;
}
.button:checked {
padding: 8px 5px;
background: #c0c0c0;
color: #0c0c0c;
border: 1px solid #6666B6;
display: inline-block;
text-align: center;
vertical-align: middle;
border-radius: 5px;
font: normal normal normal 11px arial;
text-decoration: none;
}
.submit {
background: #0c0c0c;
color: #c0c0c0;
width: 90px;
text-align: center;
vertical-align: middle;
height: 15px;
background: -webkit-gradient(linear, left top, left bottom, from(#0c0c0c), to(#141414));
background: -moz-linear-gradient(top, #0c0c0c, #141414);
background: linear-gradient(to bottom, #0c0c0c, #141414);
border: 1px solid #445;
}