140 lines
2.7 KiB
CSS
140 lines
2.7 KiB
CSS
|
|
* {
|
|
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
|
|
html, body {
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
|
|
.horizontal-aligner {
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
background-color: #000000;
|
|
}
|
|
|
|
|
|
|
|
.generic-panel {
|
|
|
|
min-width: 150px;
|
|
height: 100%;
|
|
|
|
background-color: #2c3046;
|
|
border-right: solid 1px #1c1e24;
|
|
border-left: solid 1px #1c1e24;
|
|
}
|
|
|
|
.generic-panel > .header {
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
|
|
width: 100%;
|
|
height: 24px;
|
|
|
|
font-size: 16px;
|
|
font-weight: 750;
|
|
|
|
background-color: #1c1e24;
|
|
color: #ffffff;
|
|
}
|
|
|
|
|
|
|
|
.info-view {
|
|
|
|
min-width: 100px;
|
|
width: 50%;
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
|
.control-view {
|
|
|
|
min-width: 100px;
|
|
width: 25%;
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.monitor-view {
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
|
|
width: 100%;
|
|
min-width: 400px;
|
|
height: 100%;
|
|
|
|
background-color: #080808;
|
|
}
|
|
|
|
.monitor {
|
|
|
|
width: 50vw;
|
|
height: auto;
|
|
padding-left: 3px;
|
|
padding-right: 3px;
|
|
|
|
background-color: #1c1e24;
|
|
border-bottom-left-radius: 5px;
|
|
border-bottom-right-radius: 5px;
|
|
}
|
|
|
|
.monitor > .info-header {
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
|
|
height: 24px;
|
|
|
|
font-size: 16px;
|
|
font-weight: 750;
|
|
|
|
background-color: #1c1e24;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.monitor > .output {
|
|
|
|
width: 100%;
|
|
height: calc(50vw * 0.5625);
|
|
|
|
background-color: #000000;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
noscript {
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #000000;
|
|
color: #ffffff;
|
|
}
|
|
|