html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
a {
color: black;
}
body, canvas {
background-color: #808080;
}
video {
display: none;
}
#objects {
outline: none;
height: calc(100% - 18.4px);
width: 110px;
border: unset;
}
.select-panel {
position: absolute;
float: left;
height: 100%;
}
#control {
text-align: center;
background-color: white;
color: black;
font-family: Arial;
font-size: 18px;
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
}
.objects-wrapper {
float: left;
height: calc(100% - 15px);
width: calc(100%);
}
.viewer-panel {
position: absolute;
top: 0;
left: 0;
}
option {
padding-left: 5px;
font-size: 14px;
padding-top: 3px;
padding-bottom: 3px;
}
option:hover {
cursor: pointer;
}
#colors {
position: absolute;
bottom: 20px;
left: 130px;
border-radius: 2px;
padding: 5px;
}
#colors td {
border: 1px solid white;
}
#colors td:hover {
cursor: pointer;
}
.frames-wrapper {
position: absolute;
top: 0;
right: 100px;
}
.bottom-links {
position: absolute;
bottom: 10px;
right: 10px;
margin: 0;
}
.bottom-links ul {
list-style-type: none;
}
.bottom-links li {
float: left;
margin-left: 10px;
list-style-type: none;
}
.custom-colors {
position: absolute;
bottom: 210px;
left: 130px;
}
.custom-colors input:hover {
cursor: pointer;
}
#control a {
text-decoration: none;
}
#control a:hover, #control a.active {
text-decoration: underline;
}
@media (prefers-color-scheme: dark)
{
body, canvas {
background-color: #181818;
}
body, a, #objects, option {
color: #f5f5f5 !important;
}
#objects {
background-color: #292929;
}
option:checked, option:hover, .option:active {
background-color: #4f4f4f !important;
}
#colors, .custom-colors input {
background-color: #343434;
}
#colors td {
border: 1px solid white;
}
.custom-colors input {
border-radius: 2px;
}
#objects option:nth-child(2n) {
background-color: #2e2e2e;
}
#control {
background-color: #292929;
color: #f5f5f5;
}
}