/* ===================================================================== * RotMG chrome. The game's UI has no rounded corners and no flat 1px * outlines — every surface is a square panel with a 2px bevel: a lit edge * top-left, a shadowed edge bottom-right. Two variables drive all of it: * --bev-hi the lit edge --bev-lo the shadowed edge * Raised (panels, buttons, chips): border-color: hi lo lo hi * Sunken (inputs, slots, bars): border-color: lo hi hi lo * They're per-theme because the light schemes need a much stronger * highlight and a softer shadow to read as bevels rather than as dirt. * ===================================================================== */ :root { /* theme-independent */ --green: #6fcf6f; --red: #e06666; --blue: #6fb0e0; /* item-tier colours — RealmEye/in-game convention */ --t-low: #cfd6de; /* T0–T7 plain white-silver */ --t-high: #ffd76a; /* T8+ gold */ --t-ut: #ff9d3d; /* UT orange */ --t-st: #6fe3e1; /* ST cyan */ /* --gold is the accent for FILLS (bars, curve, dots); --gold-ink is the same accent for TEXT. They diverge on the light schemes, where a bright accent is fine as a bar but unreadable as 12px type. */ --gold-ink: var(--gold); font-size: 15px; /* bevels (dark schemes) */ --bev-hi: rgba(255, 255, 255, 0.13); --bev-lo: rgba(0, 0, 0, 0.62); --slot: #100d09; /* inventory-slot well: darker than the page */ /* The bevel itself. Drawn as INSET shadows, not thicker borders, so turning a surface raised/sunken costs no layout: the 1px outline and the box size are untouched, which is what keeps the dense sidebar from reflowing. */ --raise: inset 2px 2px 0 var(--bev-hi), inset -2px -2px 0 var(--bev-lo); --sink: inset 2px 2px 0 var(--bev-lo), inset -2px -2px 0 var(--bev-hi); /* default scheme — Amber (--gold is "the accent", whatever the hue) */ --bg: #14110c; --panel: #1f1a12; --panel-2: #2a2318; --ink: #ece3d0; --muted: #9c8f74; --gold: #e8b34a; --gold-dim: #b3892f; --border: #3a3122; --glow: #221b11; --topbar-bg: rgba(31, 26, 18, 0.92); --accent-glow: rgba(232, 179, 74, 0.35); } /* ---- alternate colour schemes (set via data-theme on ) ---- */ :root[data-theme="ocean"] { --bg: #0c1016; --panel: #131b25; --panel-2: #1c2735; --ink: #dce7f2; --muted: #7e91a6; --gold: #46b8e6; --gold-dim: #2b7ea8; --border: #243444; --glow: #122232; --topbar-bg: rgba(19, 27, 37, 0.92); --accent-glow: rgba(70, 184, 230, 0.35); --slot: #070a0e; } :root[data-theme="forest"] { --bg: #0d130f; --panel: #151d17; --panel-2: #1f2b22; --ink: #dfe9de; --muted: #83967e; --gold: #5ccf7c; --gold-dim: #399653; --border: #243528; --glow: #152a1b; --topbar-bg: rgba(21, 29, 23, 0.92); --accent-glow: rgba(92, 207, 124, 0.32); --slot: #070b08; } :root[data-theme="ember"] { --bg: #150f0f; --panel: #211616; --panel-2: #2e2020; --ink: #f1dede; --muted: #a58a8a; --gold: #e56a52; --gold-dim: #a83f30; --border: #3a2726; --glow: #2a1512; --topbar-bg: rgba(33, 22, 22, 0.92); --accent-glow: rgba(229, 106, 82, 0.35); --slot: #0d0808; } :root[data-theme="amethyst"] { --bg: #120f18; --panel: #1b1626; --panel-2: #261f37; --ink: #e7dff2; --muted: #948aa8; --gold: #a97ee8; --gold-dim: #7a4fb8; --border: #2f2642; --glow: #211534; --topbar-bg: rgba(27, 22, 38, 0.92); --accent-glow: rgba(169, 126, 232, 0.35); --slot: #0b0910; } :root[data-theme="slate"] { --bg: #0f1114; --panel: #171a1f; --panel-2: #222730; --ink: #e3e7ed; --muted: #8892a0; --gold: #8aa9cf; --gold-dim: #587ba3; --border: #2a2f37; --glow: #1a2230; --topbar-bg: rgba(23, 26, 31, 0.92); --accent-glow: rgba(138, 169, 207, 0.30); --slot: #08090b; } :root[data-theme="rose"] { --bg: #160f13; --panel: #21171c; --panel-2: #2f2029; --ink: #f2dde7; --muted: #a88a99; --gold: #e678a6; --gold-dim: #b04b78; --border: #3a2732; --glow: #2a1520; --topbar-bg: rgba(33, 23, 28, 0.92); --accent-glow: rgba(230, 120, 166, 0.35); --slot: #0d080b; } /* ---- light schemes (panels lighter than the page; darker ink + accents; semantic +/- colours darkened so stat chips stay legible on a light bg) ---- */ :root[data-theme="parchment"] { --bg: #e8dfcb; --panel: #f4eee0; --panel-2: #dccfb2; --ink: #38301f; --muted: #857857; --gold: #a9760f; --gold-dim: #855a0b; --border: #cabf9d; --glow: #f2ecdb; --topbar-bg: rgba(244, 238, 224, 0.9); --accent-glow: rgba(169, 118, 15, 0.20); --green: #2f9142; --red: #c0453e; --blue: #2d72b0; --bev-hi: rgba(255,255,255,0.95); --bev-lo: rgba(92,74,40,0.40); --slot: #d3c6a6; --gold-ink: #6b4700; --muted: #6b6042; --t-low: #3f3a2a; --t-high: #6b4700; --t-ut: #7d3405; --t-st: #0a5250; } :root[data-theme="daylight"] { --bg: #e6eaf0; --panel: #f7f9fc; --panel-2: #d9e0ea; --ink: #232c3a; --muted: #64707f; --gold: #2777bd; --gold-dim: #1c5a91; --border: #c8d1dd; --glow: #eef2f8; --topbar-bg: rgba(247, 249, 252, 0.9); --accent-glow: rgba(39, 119, 189, 0.20); --green: #2f9142; --red: #c94b45; --blue: #2777bd; --bev-hi: rgba(255,255,255,0.95); --bev-lo: rgba(40,55,75,0.32); --slot: #ccd5e1; --gold-ink: #1b4f7d; --muted: #525c69; --t-low: #2b3340; --t-high: #5f4600; --t-ut: #7c3300; --t-st: #08544f; } :root[data-theme="sage"] { --bg: #e2e8dd; --panel: #f1f4ec; --panel-2: #d3dcc8; --ink: #2a3324; --muted: #6c7862; --gold: #3f8f52; --gold-dim: #2f6d3e; --border: #c6d0b9; --glow: #edf1e7; --topbar-bg: rgba(241, 244, 236, 0.9); --accent-glow: rgba(63, 143, 82, 0.20); --green: #2f8f45; --red: #c0453e; --blue: #2d72b0; --bev-hi: rgba(255,255,255,0.95); --bev-lo: rgba(45,60,40,0.32); --slot: #c9d3bd; --gold-ink: #2c5c39; --muted: #59654f; --t-low: #2b3428; --t-high: #5a4300; --t-ut: #743206; --t-st: #095150; } * { box-sizing: border-box; } /* ===================================================================== * CHROME — which surfaces are raised and which are sunken. * Grouped here (rather than repeated per component) so the whole UI's * depth model is one thing you can read. Components that draw their own * box-shadow (.combo-list, .bar-track, .theme-swatch) are handled at * their own rule instead, since they need the bevel COMBINED with it. * ===================================================================== */ .panel, .build-card, .result-strip, .sbox, .chip, .istat, .ench-block, .ench-awk, .minion, .toggle, .mini-btn, .btab, .chip-toggle span, .data-badge, .imp-char, .dps-badge { box-shadow: var(--raise); } input[type="number"], input[type="text"], textarea, select, .gear-box, .class-icon-lg, .build-name, .btab-rename, .imp-code, .istat-chip, .minion-stats { box-shadow: var(--sink); } /* Buttons physically press in: the bevel flips and the face drops a pixel. */ .toggle:active, .mini-btn:active, .btab:active, .chip-toggle:active span, .imp-char:active { box-shadow: var(--sink); transform: translateY(1px); } /* Focus reads as a lit gold edge rather than a browser outline. */ input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; } body { margin: 0; /* the page glow, over a faint 4px pixel weave — texture at a sprite's scale */ background: repeating-linear-gradient(0deg, rgba(0,0,0,0.045) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(0,0,0,0.045) 0 1px, transparent 1px 4px), radial-gradient(1400px 700px at 70% -10%, var(--glow), var(--bg)); background-attachment: fixed; color: var(--ink); font-family: "Segoe UI", system-ui, -apple-system, sans-serif; line-height: 1.45; } /* Pixel art must never be smoothed, and in game every sprite carries a hard 1px black outline — rebuild it with four offset drop-shadows. */ .item-icon, .class-icon, .class-icon-lg, .gear-box img { image-rendering: pixelated; filter: drop-shadow(1px 0 0 rgba(0,0,0,0.9)) drop-shadow(-1px 0 0 rgba(0,0,0,0.9)) drop-shadow(0 1px 0 rgba(0,0,0,0.9)) drop-shadow(0 -1px 0 rgba(0,0,0,0.9)); } /* Chunky square checkbox with a gold tick — the native control is round-ish and themed by the OS, which broke the illusion everywhere it appeared. */ input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; flex: none; margin: 0 2px 0 0; background: var(--slot); border: 1px solid var(--border); box-shadow: var(--sink); cursor: pointer; position: relative; } input[type="checkbox"]:checked { background: color-mix(in srgb, var(--gold) 22%, var(--slot)); } input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--gold); border-width: 0 2px 2px 0; transform: rotate(40deg); } /* Native number spinners render as bright OS-themed boxes that read as a web form on every dark scheme — drop them. Arrow keys still step the value. */ input[type="number"] { appearance: textfield; -moz-appearance: textfield; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* Chunky square scrollbars (Firefox + WebKit). */ * { scrollbar-width: thin; scrollbar-color: var(--gold-dim) var(--slot); } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--slot); } ::-webkit-scrollbar-thumb { background: var(--gold-dim); border: 1px solid var(--border); box-shadow: var(--raise); } /* ---- top bar ---- */ .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 22px; background: var(--topbar-bg); backdrop-filter: blur(6px); border-bottom: 2px solid var(--border); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); } .brand { display: flex; align-items: center; gap: 10px; } /* The logo is inlined into index.html by embed-logo.py (see its docstring: a referenced SVG can't read these vars, so it could never follow the theme). Every fill inside derives from --logo-accent; --gold-ink rather than --gold because the wordmark is lettering, and the bright fill accent is illegible as type on the three light schemes. Height only — the viewBox keeps the ratio. */ /* 44px is deliberate: the art is a 9.2-unit pixel grid, so this lands ~2.0 device px per cell and the blocks stay square. Dropping to ~30px puts it on a 1.4x grid, which softens every edge and makes the THEORYCRAFTER subtitle mush. */ .brand-logo { height: 44px; width: auto; flex: none; display: block; --logo-accent: var(--gold-ink); } .brand-tag { font-size: 0.78rem; color: var(--muted); border-left: 1px solid var(--border); padding-left: 10px; } .data-badge { font-size: 0.72rem; color: var(--muted); border: 1px solid var(--border); background: var(--panel-2); padding: 2px 9px; white-space: nowrap; cursor: default; } .topbar-right { display: flex; align-items: center; gap: 16px; } .theme-picker { display: flex; gap: 7px; } /* Concentric swatch: the scheme's accent as a solid disc inside a ring of its page colour. Reads as a clean circle even when the ring colour matches the current page (a diagonal split left a lone accent half-moon "slipping" into the bg). */ .theme-swatch { width: 20px; height: 20px; padding: 0; cursor: pointer; flex: none; box-sizing: border-box; background: var(--sw); border: 3px solid var(--sw2, var(--sw)); box-shadow: var(--raise), 0 0 0 1px var(--border); transition: transform .1s, box-shadow .1s; } .theme-swatch:hover { transform: translateY(-1px); } .theme-swatch.active { box-shadow: var(--raise), 0 0 0 2px var(--ink); } /* ---- layout ---- */ .layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 18px; max-width: 1720px; margin: 18px auto; padding: 0 18px; align-items: start; } .stage { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .panel { background: var(--panel); border: 1px solid var(--border); padding: 16px 18px; } .panel h2 { margin: 0 0 12px; font-size: 0.92rem; text-transform: uppercase; letter-spacing: 1.2px; color: var(--gold-ink); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); border-bottom: 2px solid var(--border); padding-bottom: 8px; display: flex; align-items: center; justify-content: space-between; } .panel h3 { margin: 16px 0 8px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); } label { display: block; font-size: 0.82rem; color: var(--muted); margin-bottom: 10px; } label.check { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 0.9rem; } .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } input[type="number"], input[type="text"], select { width: 100%; margin-top: 4px; background: var(--panel-2); border: 1px solid var(--border); color: var(--ink); padding: 8px 10px; font-size: 0.95rem; } input[type="number"]:focus, input[type="text"]:focus, select:focus { outline: none; border-color: var(--gold-dim); } /* gear combobox — a type-to-filter clickable list layered over a hidden