82 lines
1.4 KiB
CSS
82 lines
1.4 KiB
CSS
/* reset */
|
|
body {
|
|
margin: 0;
|
|
font-family: sans-serif;
|
|
overflow: hidden; /* no scroll */
|
|
background: #303030;
|
|
}
|
|
|
|
/* canvas = full screen */
|
|
canvas {
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
left: 0;
|
|
|
|
width: 100vw;
|
|
height: 100vh;
|
|
|
|
object-fit: contain; /* keep aspect ratio */
|
|
}
|
|
|
|
/* bottom control bar */
|
|
.controls {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
|
|
padding: 10px;
|
|
align-items: center; /* vertical centering */
|
|
|
|
background: rgba(209, 209, 209, 0.07);
|
|
backdrop-filter: blur(6px);
|
|
|
|
z-index: 10;
|
|
}
|
|
|
|
.controls label {
|
|
font-size: 12px;
|
|
opacity: 0.8;
|
|
color: #ccc;
|
|
|
|
display: flex;
|
|
align-items: center; /* vertical center inside its own box */
|
|
}
|
|
|
|
.controls input,
|
|
.controls button {
|
|
font-size: 12px;
|
|
padding: 4px;
|
|
background: #70707023;
|
|
color: #eee;
|
|
border: 1px solid #444;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.controls input::-webkit-outer-spin-button,
|
|
.controls input::-webkit-inner-spin-button {
|
|
/* display: none; <- Crashes Chrome on hover */
|
|
-webkit-appearance: none;
|
|
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
|
|
}
|
|
|
|
.controls input[type="number"] {
|
|
-moz-appearance: textfield; /* Firefox */
|
|
}
|
|
|
|
.controls input:hover,
|
|
.controls button:hover {
|
|
background: #99999934;
|
|
}
|
|
|
|
.controls > * {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|