425 lines
9.2 KiB
CSS
425 lines
9.2 KiB
CSS
|
|
|
|
main {
|
|
max-width: 38rem;
|
|
padding: 1.5rem;
|
|
margin: auto;
|
|
}
|
|
|
|
.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 70px 530px;
|
|
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: 313px 150px 1fr;
|
|
grid-template-raw: 30px;
|
|
grid-column-gap: 1px;
|
|
grid-row-gap: 1px;
|
|
border-color: #334;
|
|
border-style: groove;
|
|
border-width: 0px;
|
|
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: none;
|
|
height: 400px;
|
|
grid-template-columns: 144px 144px 138px 138px 10px 326px;
|
|
grid-template-rows: 1Fr;
|
|
background-color: #151515;
|
|
border-color: #445;
|
|
border-style: groove;
|
|
border-width: 1px;
|
|
}
|
|
.mgsimu {
|
|
display: grid;
|
|
height: 400px;
|
|
width: 900px;
|
|
grid-template-columns: 500px 400px;
|
|
grid-template-rows: 400px;
|
|
background-color: #151515;
|
|
}
|
|
.cnvbuttons {
|
|
display: none;
|
|
height: 400px;
|
|
width: 400px;
|
|
grid-template-columns: 66px 66px 66px 66px 66px 66px;
|
|
grid-template-rows: 67px 67px 67px;
|
|
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;
|
|
background-color: #151515;
|
|
}
|
|
.posebuttons {
|
|
display: none;
|
|
height: 400px;
|
|
width: 400px;
|
|
grid-template-columns: 66px 66px 66px 66px 66px 66px;
|
|
grid-template-rows: 67px 67px 67px 30px 30px;
|
|
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;
|
|
background-color: #151515;
|
|
}
|
|
.nozoidbuttons {
|
|
display: none;
|
|
height: 400px;
|
|
width: 400px;
|
|
grid-template-columns: 195px 195px;
|
|
grid-template-rows: 70px 40px 120px 40px 1fr;
|
|
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;
|
|
background-color: #151515;
|
|
}
|
|
.destmatrix {
|
|
display: grid;
|
|
height: 250px;
|
|
width: 400px;
|
|
grid-template-columns: 76px 76px 76px 76px 76px;
|
|
grid-template-rows: 30px 30px 30px 30px 30px 1Fr;
|
|
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;
|
|
background-color: #151515;
|
|
}
|
|
.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;
|
|
}
|
|
.mgnozoid {
|
|
display: none;
|
|
height: 400px;
|
|
grid-template-columns: 1Fr;
|
|
grid-template-rows: 1Fr;
|
|
background-color: #151515;
|
|
border-color: #445;
|
|
border-style: groove;
|
|
border-width: 1px;
|
|
}
|
|
.mgplanet {
|
|
display: none;
|
|
height: 400px;
|
|
width: 900px;
|
|
grid-template-columns: 500px 400px;
|
|
grid-template-rows: 400px;
|
|
background-color: #151515;
|
|
}
|
|
.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: 80px 80px 80px 80px 60px 75px 60px 75px;
|
|
background-color: #000;
|
|
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 19px 20px 8px 55px 19px 25px 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: #000;
|
|
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;
|
|
}
|
|
.info {
|
|
background: #000;
|
|
color: #c0c0c0;
|
|
width: 160px;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
height: 21px;
|
|
border: 1px solid #445;
|
|
}
|
|
.submit {
|
|
background: #000;
|
|
color: #c0c0c0;
|
|
width: 90px;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
height: 15px;
|
|
border: 1px solid #445;
|
|
}
|
|
.submitsmall {
|
|
background: #000;
|
|
color: #c0c0c0;
|
|
width: 45px;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
height: 15px;
|
|
border: 1px solid #445;
|
|
}
|
|
|
|
|