72 lines
4.8 KiB
CSS
72 lines
4.8 KiB
CSS
|
:root {
|
||
|
|
--bg: #0a0a0a; --panel: #141414; --panel-2: #1c1c1c; --line: #2a2a2a;
|
||
|
|
--ink: #e8e4d8; --ink-dim: #8a8578; --ink-mute: #555049;
|
||
|
|
--accent: #d4a574; --warn: #c87a4a;
|
||
|
|
}
|
||
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
|
html, body { height: 100%; overflow: hidden; }
|
||
|
|
body {
|
||
|
|
background: var(--bg); color: var(--ink);
|
||
|
|
font-family: 'JetBrains Mono', monospace; font-size: 12px;
|
||
|
|
display: grid; grid-template-columns: 330px 1fr; height: 100vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---------- Sidebar ---------- */
|
||
|
|
aside { background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; padding: 20px 18px; }
|
||
|
|
aside::-webkit-scrollbar { width: 6px; }
|
||
|
|
aside::-webkit-scrollbar-thumb { background: var(--line); }
|
||
|
|
|
||
|
|
.brand { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 22px; letter-spacing: 0.02em; margin-bottom: 2px; }
|
||
|
|
.subtitle { font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-mute); margin-bottom: 22px; }
|
||
|
|
|
||
|
|
.group { border-top: 1px solid var(--line); padding: 16px 0 8px; }
|
||
|
|
.group-title { font-size: 9px; text-transform: uppercase; letter-spacing: 0.25em; color: var(--accent); margin-bottom: 14px; }
|
||
|
|
|
||
|
|
.row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 10px; }
|
||
|
|
.row label { font-size: 11px; color: var(--ink-dim); flex: 1; }
|
||
|
|
.row .val { font-size: 11px; color: var(--ink); min-width: 50px; text-align: right; font-variant-numeric: tabular-nums; }
|
||
|
|
|
||
|
|
input[type=range] { width: 100%; -webkit-appearance: none; appearance: none; background: transparent; height: 18px; margin-bottom: 6px; }
|
||
|
|
input[type=range]::-webkit-slider-runnable-track { height: 1px; background: var(--line); }
|
||
|
|
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 10px; width: 10px; background: var(--ink); border-radius: 0; margin-top: -4px; cursor: ew-resize; transition: background 0.15s; }
|
||
|
|
input[type=range]:hover::-webkit-slider-thumb { background: var(--accent); }
|
||
|
|
input[type=range]::-moz-range-track { height: 1px; background: var(--line); }
|
||
|
|
input[type=range]::-moz-range-thumb { height: 10px; width: 10px; background: var(--ink); border: none; border-radius: 0; cursor: ew-resize; }
|
||
|
|
|
||
|
|
.seed-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; }
|
||
|
|
.seed-input, select.preset {
|
||
|
|
background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
|
||
|
|
padding: 8px 10px; font-family: 'JetBrains Mono', monospace; font-size: 11px; width: 100%; letter-spacing: 0.05em;
|
||
|
|
}
|
||
|
|
.seed-input:focus, select.preset:focus { outline: none; border-color: var(--accent); }
|
||
|
|
select.preset { margin-top: 8px; cursor: pointer; }
|
||
|
|
|
||
|
|
button {
|
||
|
|
background: transparent; border: 1px solid var(--line); color: var(--ink);
|
||
|
|
padding: 8px 12px; font-family: 'JetBrains Mono', monospace; font-size: 10px;
|
||
|
|
text-transform: uppercase; letter-spacing: 0.15em; cursor: pointer; transition: all 0.15s;
|
||
|
|
}
|
||
|
|
button:hover { border-color: var(--accent); color: var(--accent); }
|
||
|
|
button.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
|
||
|
|
button.primary:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
|
||
|
|
|
||
|
|
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
|
||
|
|
.btn-row-full { display: grid; gap: 6px; margin-top: 8px; }
|
||
|
|
|
||
|
|
.checkbox-row { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; cursor: pointer; }
|
||
|
|
.checkbox-row input { accent-color: var(--accent); }
|
||
|
|
.checkbox-row span { font-size: 11px; color: var(--ink-dim); }
|
||
|
|
|
||
|
|
/* ---------- Stage ---------- */
|
||
|
|
main { position: relative; background: #050505; overflow: hidden; display: flex; align-items: center; justify-content: center; }
|
||
|
|
.stage-frame { position: relative; background: #0a0a0a; box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px var(--line); }
|
||
|
|
#preview { display: block; width: min(88vh, calc(100vw - 400px)); height: min(88vh, calc(100vw - 400px)); image-rendering: -webkit-optimize-contrast; }
|
||
|
|
|
||
|
|
.stage-meta { position: absolute; bottom: 16px; left: 18px; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); }
|
||
|
|
.stage-meta .hash { color: var(--accent); letter-spacing: 0.1em; text-transform: none; }
|
||
|
|
.stage-corner { position: absolute; top: 16px; right: 18px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14px; color: var(--ink-mute); text-align: right; line-height: 1.4; }
|
||
|
|
.stage-corner .sm { font-family: 'JetBrains Mono', monospace; font-style: normal; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); margin-top: 2px; }
|
||
|
|
|
||
|
|
.toast { position: absolute; bottom: 16px; right: 18px; background: var(--panel); border: 1px solid var(--accent); color: var(--accent); padding: 8px 14px; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
|
||
|
|
.toast.show { opacity: 1; }
|