asb_cloud_front/src/styles/smbo.css

124 lines
2.2 KiB
CSS
Executable File

.smbo_container{
display: grid;
column-gap: 4px;
row-gap: 4px;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(9, 1fr);
justify-items: stretch;
align-items: stretch;
}
.smbo_rig_plan{
grid-column-start: 2;
grid-row-start: 2;
}
.plate_container{
background-color: #00000010;
display: grid;
grid-template-columns: 3fr 1fr;
grid-template-rows: auto;
padding: 6px;
margin: 4px;
height: 100%;
width: 100%;
}
.plate_title{
grid-column: 1 / span 2;
grid-row: 1 / 1;
font-weight: bold;
}
.plate_state{
grid-column: 3 / span 1;
grid-row: 1 / span 1;
}
.plate_param{
grid-row: 2 / span 1;
}
.plate_param_title{
grid-column: 1 / span 1;
}
.plate_param_value{
grid-column: 2 / span 1;
font-weight: bold;
place-self: start end;
margin-right: 4px;
}
.plate_param_units{
grid-column: 3 / span 1;
}
.c1{ grid-column-start: 1; }
.c2{ grid-column-start: 2; }
.c3{ grid-column-start: 3; }
.c4{ grid-column-start: 4; }
.c5{ grid-column-start: 5; }
.c6{ grid-column-start: 6; }
.c7{ grid-column-start: 7; }
.c8{ grid-column-start: 8; }
.r1{ grid-row-start: 1; }
.r2{ grid-row-start: 2; }
.r3{ grid-row-start: 3; }
.r4{ grid-row-start: 4; }
.r5{ grid-row-start: 5; }
.r6{ grid-row-start: 6; }
.r7{ grid-row-start: 7; }
.r8{ grid-row-start: 8; }
.ce1{ grid-column-end: 1; }
.ce2{ grid-column-end: 2; }
.ce3{ grid-column-end: 3; }
.ce4{ grid-column-end: 4; }
.ce5{ grid-column-end: 5; }
.ce6{ grid-column-end: 6; }
.ce7{ grid-column-end: 7; }
.ce8{ grid-column-end: 8; }
.re1{ grid-row-end: 1; }
.re2{ grid-row-end: 2; }
.re3{ grid-row-end: 3; }
.re4{ grid-row-end: 4; }
.re5{ grid-row-end: 5; }
.re6{ grid-row-end: 6; }
.re7{ grid-row-end: 7; }
.re8{ grid-row-end: 8; }
.cspan-4{ grid-column-end: 4 start;}
.rspan-6{ grid-row-end: 6 start;}
.rspan-7{ grid-row-end: 7 start;}
.center{
place-self: center stretch;
}
.pointer {
cursor: pointer;
}
.container__example {
display: flex;
}
.block__example {
width: 250px;
height: 120px;
}
.empty_place {
background-color: #505050;
text-align: center;
color: silver;
font-size: 75px;
margin-top: 5px;
align-items: center;
}