Source code
Revision control
Copy as Markdown
Other Tools
: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;
}