132 lines
2.5 KiB
CSS
132 lines
2.5 KiB
CSS
|
|
:root {
|
|
font-family: system-ui;
|
|
}
|
|
.valueFlex {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
height: 40px;
|
|
border: 1px solid grey;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 10px;
|
|
background-color: lightgrey;
|
|
|
|
}
|
|
.valueFlex div {
|
|
height: 100%;
|
|
flex-grow: 1;
|
|
}
|
|
.valueFlex .value {
|
|
flex-grow: 4;
|
|
text-align: center;
|
|
}
|
|
|
|
.valueFlex div div {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.valueFlex .value.disabled {
|
|
background-color: tomato;
|
|
}
|
|
.valueFlex .value.disabled div:before {
|
|
content: "Disabled";
|
|
}
|
|
|
|
.valueFlex .value.enabled {
|
|
background-color: chartreuse;
|
|
}
|
|
.valueFlex .value.enabled div:before {
|
|
content: "Enabled";
|
|
}
|
|
|
|
.valueGrid {
|
|
border: 1px solid grey;
|
|
display: grid;
|
|
grid-template-columns: 1fr 3fr;
|
|
}
|
|
|
|
.valueGrid>div {
|
|
padding: 5px;
|
|
background-color: lightgrey;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.valueGrid>div>div {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.valueGrid div.value {
|
|
background-color: thistle;
|
|
}
|
|
|
|
.generator {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
height: 40px;
|
|
border: 1px solid grey;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 10px;
|
|
background-color: lightgrey;
|
|
}
|
|
|
|
.items {
|
|
display: grid;
|
|
grid-template-columns: 1fr 4fr;
|
|
gap: 4px;
|
|
}
|
|
|
|
.box {
|
|
border: 1px solid black;
|
|
}
|
|
|
|
.box.label {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.box.listing {
|
|
padding: 10px;
|
|
display: grid;
|
|
grid-template-columns: 1fr 4fr;
|
|
row-gap: 2px;
|
|
}
|
|
|
|
.box.listing div {
|
|
background-color: lightgrey;
|
|
}
|
|
.box.listing .value {
|
|
font-style: italic;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.content {
|
|
}
|
|
|
|
hr {
|
|
margin-top: 40px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
#iframesContainer {
|
|
display:flex;
|
|
width: 100%;
|
|
border: 1px solid blue;
|
|
}
|
|
|
|
#iframesContainer div {
|
|
flex: 1;
|
|
}
|
|
|
|
#target {
|
|
width: 100px;
|
|
}
|
|
|