/* ============================================================================ APP CHROME THEME — edit these variables to recolor the whole app (login, dashboard, admin panel). This file is intentionally the ONE place you touch to restyle the product. (Overlay board colors are separate — users pick those per overlay via themes.) ========================================================================== */ /* Light + dark are neutral greys (no navy). The mode is chosen by a data-theme attribute on , set before paint by a bootstrap script on each page and toggled from the dashboard (persisted in localStorage). Dark is the default. */ :root, :root[data-theme="dark"] { --bg: #141414; /* dark grey, almost black */ --panel: #1c1c1e; --panel-2: #2a2a2e; --accent: #3b82f6; --accent-2: #60a5fa; --text: #f2f2f4; --muted: #9a9aa2; --border: #ffffff1f; --danger: #ef4444; --radius: 4px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } :root[data-theme="light"] { --bg: #f4f4f6; /* light grey, almost white */ --panel: #ffffff; --panel-2: #ececf0; --accent: #3b82f6; --accent-2: #2563eb; --text: #16181d; --muted: #5c6270; --border: #00000018; --danger: #dc2626; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font); min-height: 100vh; -webkit-text-size-adjust: 100%; } a { color: var(--accent-2); } button { font-family: var(--font); cursor: pointer; border-radius: var(--radius); border: 1px solid var(--border); background: var(--panel-2); color: var(--text); padding: 12px 16px; font-size: 15px; transition: filter .12s ease, background .12s ease; } button:hover { filter: brightness(1.12); } button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } button.danger { background: transparent; border-color: var(--danger); color: var(--danger); } button.danger:hover { background: var(--danger); color: #fff; filter: none; } /* Text-ish inputs only. Range, checkbox and radio are excluded deliberately: this rule used to apply to them too, and the 14px horizontal padding inset a slider's track so the thumb could never reach either end. It looked broken, and the fix had been per-selector `padding: 0` patches scattered around the admin panel rather than here. */ input:not([type=range]):not([type=checkbox]):not([type=radio]), select { font-family: var(--font); font-size: 15px; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; } input:focus, select:focus, button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; } /* Sliders. No padding, no border, no background box: the track IS the control, and it must run the full width it is given. accent-color colours the track and thumb in every browser that matters, so there is no need to rebuild the thing out of ::-webkit-slider-thumb and friends. */ input[type=range] { /* Native appearance is kept on purpose. `appearance: none` would strip the track and thumb entirely, and accent-color only paints the NATIVE control, so turning it off would mean rebuilding the whole thing out of ::-webkit-slider-thumb / ::-moz-range-thumb for no gain. */ padding: 0; border: 0; background: transparent; accent-color: var(--accent); width: 100%; height: 20px; cursor: pointer; vertical-align: middle; } input[type=range]:disabled { cursor: default; opacity: .5; } input[type=checkbox], input[type=radio] { accent-color: var(--accent); cursor: pointer; } .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; } .muted { color: var(--muted); } /* App top bar shared across dashboard + admin */ .appbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px clamp(12px, 4vw, 18px); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); z-index: 20; } .appbar .brand { font-size: 16px; font-weight: 700; letter-spacing: .3px; } .appbar .spacer { flex: 1; } /* The signed-in email is the one thing in this bar that is not an action, so it is the one thing allowed to give up space. An address has no spaces to break on and a flex item will not shrink below its content without min-width: 0, so without this it sets a floor that pushes the buttons off the right edge of a phone and makes the whole PAGE scroll sideways. Below 420px it goes entirely: there is no width at which a truncated "q…" is worth a clipped button, and the address is on the account page in full. */ .appbar #who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 420px) { .appbar #who { display: none; } } .wrap { max-width: 1100px; margin: 0 auto; padding: 18px; } /* ============================================================================ AUTH PAGES — sign in, sign up, forgot, reset. One card, centred, no chrome. Shared here rather than repeated in four files. ========================================================================== */ .auth-shell { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px 20px; position: relative; } /* Shared light/dark button. The preference is global across the whole product (localStorage['ub-theme']), so this appears on every page, not just the dashboard. Wired by /site/ui.js via [data-theme-toggle]. */ .theme-btn { padding: 7px; line-height: 0; display: inline-flex; flex: none; background: transparent; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; } .theme-btn img { width: 18px; height: 18px; display: block; } .theme-btn:hover { background: var(--panel-2); } /* On the auth pages it floats in the corner rather than sitting in a nav. */ .auth-shell .theme-btn { position: absolute; top: 18px; right: 18px; } /* The logo PNG is a wordmark (845x257) and already reads "United Breakers", so no text sits beside it anywhere. Height only; width follows the ratio. */ .auth-logo { display: inline-flex; align-items: center; text-decoration: none; } .auth-logo img { height: 38px; width: auto; display: block; } .auth-card { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 14px; } .auth-card h1 { margin: 0; font-size: 21px; } .auth-card .sub { margin: -6px 0 2px; font-size: 14px; color: var(--muted); } .auth-card label { font-size: 13px; color: var(--muted); display: block; margin-bottom: 6px; } .auth-card input { width: 100%; } .auth-card .hint { font-size: 12px; color: var(--muted); margin-top: 6px; } /* Reveal toggle on password fields. The .pw-wrap span is inserted AROUND the input at runtime by /site/ui.js, so no page markup changes and selectors like `.auth-card input` (a descendant match) keep working. The button is inset inside the field's own border rather than sitting beside it, so the field keeps its full width and nothing reflows when it appears. */ .pw-wrap { position: relative; display: block; } /* The :not() chain is repeated verbatim from the base input rule near the top of this file. Each :not([type=…]) carries an attribute selector's specificity, so that rule scores (0,3,1) and a plain `.pw-wrap > input` (0,1,1) loses to it — the padding silently stayed 14px and the button sat on top of the text. */ .pw-wrap > input:not([type=range]):not([type=checkbox]):not([type=radio]) { padding-right: 44px; } .pw-eye { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 40px; display: flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: none; color: var(--muted); cursor: pointer; border-radius: 0 var(--radius) var(--radius) 0; } .pw-eye:hover { color: var(--text); background: transparent; filter: none; } .pw-eye svg { width: 18px; height: 18px; display: block; } /* Reserve the line's height so the card does not jump when a message appears. */ .err { color: var(--danger); font-size: 14px; min-height: 18px; } .note { color: var(--muted); font-size: 14px; min-height: 18px; } .note.good { color: #10b981; } /* #10b981 is picked for a dark panel; on the light theme it reads about 2.2:1 against the card and is effectively invisible. Darker shade of the same green, light theme only. The attribute selector also outranks the plain `.note.good` that account.html repeats in its own