/* ======================================================================= Per-client THEMES and LAYOUT options (v0.9.25) Each client (player or DM) picks these from the gear menu, top-right. The choice is saved in that browser's localStorage and applied as data-* attributes on - so it's purely local: your table-mate can run Daylight while you run Dungeon, and nobody's server state changes. Themes work by overriding the CSS custom properties the whole app already uses (--bg, --panel, --text, --border, --gold/accent, fonts, shadow) plus the body background. Component CSS is untouched. ===================================================================== */ /* ---- default background lives on the variables so themes can replace it ---- */ :root { --app-bg: radial-gradient(circle at 12% 8%, rgba(123, 220, 255, 0.16), transparent 30%), radial-gradient(circle at 92% 3%, rgba(255, 139, 184, 0.15), transparent 28%), linear-gradient(135deg, #080716, #151131 45%, #2b112f); --app-overlay-opacity: 0.8; --accent: var(--gold); --radius: 16px; } body { background: var(--app-bg) !important; } body::before { opacity: var(--app-overlay-opacity); } /* =========================== ARCANE (default) =========================== */ html[data-theme="arcane"] { --bg: #090819; --panel: rgba(22, 18, 43, 0.92); --panel2: rgba(31, 23, 57, 0.95); --border: rgba(255, 213, 116, 0.34); --text: #fff5dd; --muted: #d1c5ff; --gold: #ffd46e; --accent: #ffd46e; --shadow: 0 20px 60px rgba(0,0,0,0.38); --app-bg: radial-gradient(circle at 12% 8%, rgba(123, 220, 255, 0.16), transparent 30%), radial-gradient(circle at 92% 3%, rgba(255, 139, 184, 0.15), transparent 28%), linear-gradient(135deg, #080716, #151131 45%, #2b112f); --app-overlay-opacity: 0.8; --topbar-bg: rgba(9, 8, 25, 0.92); --control-bg: linear-gradient(180deg, #ffe28a, #ffbd4d); --control-hover-bg: linear-gradient(180deg, #ffecaa, #ffc95f); --control-text: #21132f; --input-bg: rgba(7, 6, 20, 0.76); --detail-bg: rgba(21, 16, 42, 0.94); } /* =============================== TAVERN ================================= */ html[data-theme="tavern"] { --bg: #241a10; --panel: rgba(48, 34, 18, 0.94); --panel2: rgba(62, 44, 24, 0.96); --border: rgba(224, 134, 44, 0.42); --text: #f3e6c8; --muted: #cdb891; --gold: #e0a13c; --accent: #e0862c; --shadow: 0 18px 46px rgba(0,0,0,0.5); --app-bg: radial-gradient(circle at 15% 10%, rgba(224, 134, 44, 0.14), transparent 32%), linear-gradient(150deg, #1c1409, #2b1d0e 50%, #3a2712); --app-overlay-opacity: 0.5; } /* =============================== DUNGEON =============================== */ html[data-theme="dungeon"] { --bg: #0c0e12; --panel: rgba(24, 28, 35, 0.95); --panel2: rgba(32, 38, 47, 0.97); --border: rgba(150, 170, 190, 0.28); --text: #e7ecf2; --muted: #9fb0c2; --gold: #8fb4d8; --accent: #6ea8d8; --shadow: 0 16px 40px rgba(0,0,0,0.6); --app-bg: linear-gradient(160deg, #090b0f, #12161c 55%, #0c1116); --app-overlay-opacity: 0.35; --topbar-bg: rgba(8, 11, 15, 0.96); --control-bg: linear-gradient(180deg, #526879, #2e3b47); --control-hover-bg: linear-gradient(180deg, #66839a, #384956); --control-text: #f2f7fb; --input-bg: rgba(4, 7, 10, 0.82); --detail-bg: rgba(18, 23, 29, 0.96); } /* =============================== DAYLIGHT (light mode) ================= */ html[data-theme="daylight"] { --bg: #f4f1ea; --panel: rgba(255, 255, 255, 0.94); --panel2: rgba(246, 242, 233, 0.97); --border: rgba(90, 70, 40, 0.28); --text: #241d12; --muted: #6a5d48; --gold: #b8791f; --accent: #c47f1e; --shadow: 0 12px 32px rgba(60, 45, 20, 0.18); --app-bg: radial-gradient(circle at 12% 8%, rgba(196, 127, 30, 0.08), transparent 34%), linear-gradient(135deg, #f6f2ea, #efe8db 60%, #e9e0cf); --app-overlay-opacity: 0.25; --topbar-bg: rgba(250, 246, 237, 0.94); --control-bg: linear-gradient(180deg, #e2b75f, #bf7e25); --control-hover-bg: linear-gradient(180deg, #edc978, #ca8a32); --control-text: #2d2111; --input-bg: rgba(255,255,255,0.82); --detail-bg: rgba(255,253,248,0.97); } /* light mode needs darker text inside the translucent panels' inputs */ html[data-theme="daylight"] input, html[data-theme="daylight"] select, html[data-theme="daylight"] textarea { color: #241d12; background: rgba(255,255,255,0.75); } /* =============================== FOREST ================================ */ html[data-theme="forest"] { --bg: #0b140e; --panel: rgba(20, 38, 27, 0.95); --panel2: rgba(28, 50, 36, 0.97); --border: rgba(143, 190, 116, 0.36); --text: #edf4df; --muted: #b8c9aa; --gold: #d7bd75; --accent: #7fbd70; --green: #8bce7c; --blue: #91cdb2; --rose: #d89483; --shadow: 0 18px 48px rgba(0,0,0,.56); --app-bg: radial-gradient(circle at 18% 4%, rgba(127,189,112,.16), transparent 31%), radial-gradient(circle at 86% 12%, rgba(215,189,117,.08), transparent 28%), linear-gradient(145deg,#07100a,#122419 52%,#0b1710); --app-overlay-opacity: .48; --topbar-bg: rgba(8,20,12,.94); --control-bg: linear-gradient(180deg,#527744,#304b31); --control-hover-bg: linear-gradient(180deg,#648e53,#3a5c3b); --control-text: #f3f7e9; --input-bg: rgba(5,14,8,.78); --detail-bg: rgba(17,35,23,.97); } /* =============================== INFERNAL ============================== */ html[data-theme="infernal"] { --bg: #150809; --panel: rgba(42, 16, 20, 0.95); --panel2: rgba(57, 21, 27, 0.97); --border: rgba(239, 99, 62, 0.4); --text: #ffe8d7; --muted: #d9aa98; --gold: #ffb15a; --accent: #ef603d; --green: #c5d56b; --blue: #ff8d68; --rose: #ff6b71; --shadow: 0 20px 54px rgba(0,0,0,.64); --app-bg: radial-gradient(circle at 15% 3%, rgba(255,96,54,.20), transparent 32%), radial-gradient(circle at 86% 6%, rgba(255,177,90,.10), transparent 28%), linear-gradient(150deg,#0b0304,#240a0d 48%,#160506); --app-overlay-opacity: .44; --topbar-bg: rgba(20,5,7,.96); --control-bg: linear-gradient(180deg,#9d3427,#5c1718); --control-hover-bg: linear-gradient(180deg,#ba442e,#721e1c); --control-text: #fff1df; --input-bg: rgba(17,3,5,.80); --detail-bg: rgba(45,13,18,.97); } /* =============================== HIGH CONTRAST ======================== */ html[data-theme="contrast"] { --bg: #000000; --panel: #0a0a0a; --panel2: #141414; --border: #ffd400; --text: #ffffff; --muted: #ffe680; --gold: #ffd400; --accent: #ffd400; --shadow: 0 0 0 1px #ffd400; --app-bg: #000000; --app-overlay-opacity: 0; --topbar-bg: #000; --control-bg: #ffd400; --control-hover-bg: #fff07a; --control-text: #000; --input-bg: #000; --detail-bg: #050505; } html[data-theme="contrast"] .side-panel, html[data-theme="contrast"] .sheet-card, html[data-theme="contrast"] .token-popover { border-width: 2px; } /* Density choices were removed in v0.9.85. The comfortable layout is now the single supported layout, avoiding tiny controls and near-duplicate modes. */ /* All non-Tavern themes use their own controls and chrome. Tavern's richer wood/leather rules are scoped in tavern.css and no longer leak into them. */ html[data-theme]:not([data-theme="tavern"]) .topbar { background: var(--topbar-bg); border-bottom: 1px solid var(--border); box-shadow: 0 9px 30px rgba(0,0,0,.34); } html[data-theme]:not([data-theme="tavern"]) .app-name, html[data-theme]:not([data-theme="tavern"]) .brand { color: var(--gold); } html[data-theme]:not([data-theme="tavern"]) .topbar a, html[data-theme]:not([data-theme="tavern"]) .button:not(.danger), html[data-theme]:not([data-theme="tavern"]) button:not(.danger) { color: var(--control-text); background: var(--control-bg); border-color: var(--border); box-shadow: 0 7px 18px rgba(0,0,0,.28); text-shadow: none; } html[data-theme]:not([data-theme="tavern"]) .topbar a:hover, html[data-theme]:not([data-theme="tavern"]) .button:not(.danger):hover, html[data-theme]:not([data-theme="tavern"]) button:not(.danger):hover { background: var(--control-hover-bg); border-color: var(--accent); } html[data-theme]:not([data-theme="tavern"]) input, html[data-theme]:not([data-theme="tavern"]) select, html[data-theme]:not([data-theme="tavern"]) textarea { color: var(--text); background: var(--input-bg); border-color: var(--border); } html[data-theme]:not([data-theme="tavern"]) input:focus, html[data-theme]:not([data-theme="tavern"]) select:focus, html[data-theme]:not([data-theme="tavern"]) textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } html[data-theme]:not([data-theme="tavern"]) .flash { color: var(--text); background: var(--detail-bg); border-color: var(--border); } html[data-theme]:not([data-theme="tavern"]) .side-panel details, html[data-theme]:not([data-theme="tavern"]) .right-panel details, html[data-theme]:not([data-theme="tavern"]) .theme-menu, html[data-theme]:not([data-theme="tavern"]) .dice-popover { color: var(--text); background: var(--detail-bg); border-color: var(--border); } html[data-theme="dungeon"] body::before { background: linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px); background-size: 96px 64px; } html[data-theme="forest"] body::before { background: radial-gradient(ellipse at 20% 20%,rgba(144,197,118,.08),transparent 28%),radial-gradient(ellipse at 80% 70%,rgba(90,130,73,.07),transparent 25%); } html[data-theme="infernal"] body::before { background: radial-gradient(circle at 18px 18px,rgba(255,122,70,.13) 0 2px,transparent 3px); background-size: 92px 92px; } /* ======================================================================= LAYOUT: font family Every option turns the WHOLE page - headings, buttons, panels, brand, the lot - not just body text. Each sets a --page-font, then two shared rules (below) apply it everywhere and override the elements that hardcode their own family (brand, headings, summaries...). True icon glyphs are excluded so emoji tokens / dice faces keep rendering as icons. ===================================================================== */ html[data-font="serif"] { --page-font: "IM Fell English", Georgia, "Palatino Linotype", serif; } html[data-font="sans"] { --page-font: "Trebuchet MS", system-ui, -apple-system, sans-serif; } html[data-font="readable"] { --page-font: "Atkinson Hyperlegible", "Verdana", system-ui, sans-serif; } html[data-font="readable"] body { letter-spacing: 0.02em; line-height: 1.6; } html[data-font="comic"] { --page-font: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive; } html[data-font="dyslexic"] { --page-font: "OpenDyslexic", "Atkinson Hyperlegible", "Comic Sans MS", Verdana, sans-serif; } html[data-font="dyslexic"] body { letter-spacing: 0.03em; line-height: 1.7; word-spacing: 0.08em; } html[data-font="mono"] { --page-font: "JetBrains Mono", "Consolas", "SF Mono", "Courier New", monospace; } html[data-font="rounded"] { --page-font: "Nunito", "Quicksand", "Varela Round", system-ui, sans-serif; } html[data-font="medieval"] { --page-font: "MedievalSharp", "Cinzel", "IM Fell English", Georgia, serif; } html[data-font]:not([data-font="default"]):not([data-font=""]) { --display-font: var(--page-font); --body-font: var(--page-font); } html[data-font]:not([data-font="default"]):not([data-font=""]) body * { font-family: var(--page-font) !important; } html[data-font]:not([data-font="default"]) .token-emoji, html[data-font]:not([data-font="default"]) .standard-token-glyph, html[data-font]:not([data-font="default"]) .map-ping, html[data-font]:not([data-font="default"]) [class*="emoji"] { font-family: inherit !important; } /* ======================================================================= The gear button + theme menu (top-right of the topbar) ===================================================================== */ .theme-menu-wrap { position: relative; display: inline-flex; } #theme-gear { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 1.1rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } #theme-gear:hover { border-color: var(--accent); } .theme-menu { position: absolute; top: 42px; right: 0; z-index: 60; width: 260px; display: none; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel2); box-shadow: var(--shadow); } .theme-menu.open { display: flex; } .theme-menu h4 { margin: 0 0 4px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .theme-menu .theme-options { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .theme-menu .theme-options button { padding: 7px 6px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); color: var(--text); cursor: pointer; font-size: 0.8rem; } .theme-menu .theme-options button.active { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: -2px; font-weight: 700; } /* little colour swatch on each theme button */ .theme-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3); } .sw-arcane { background: linear-gradient(135deg, #2b112f, #ffd46e); } .sw-tavern { background: linear-gradient(135deg, #2b1d0e, #e0862c); } .sw-dungeon { background: linear-gradient(135deg, #12161c, #6ea8d8); } .sw-daylight { background: linear-gradient(135deg, #efe8db, #c47f1e); } .sw-forest { background: linear-gradient(135deg, #0c1b11, #7fbd70); } .sw-infernal { background: linear-gradient(135deg, #160506, #ef603d); } .sw-contrast { background: linear-gradient(135deg, #000, #ffd400); } /* v0.9.121 — desktop navigation density. At 1080p the old header only fit cleanly at ~90% browser zoom. Keep the map itself at true scale (important for token/grid coordinates) and make just the navigation chrome match that 90% look. */ @media (min-width: 1200px) { html[data-theme="tavern"] .topbar { gap: 12px; padding: 10px 16px; } html[data-theme="tavern"] .brand { font-size: 1.26rem; } html[data-theme="tavern"] .app-name { font-size: 1.35rem; } html[data-theme="tavern"] .topbar nav { gap: 7px; } html[data-theme="tavern"] .topbar nav > a, html[data-theme="tavern"] .topbar nav > button, html[data-theme="tavern"] .topbar .theme-menu-wrap > button { padding: 8px 11px; font-size: 0.78rem; border-radius: 7px; } html[data-theme="tavern"] .account-pill { padding: 7px 10px; font-size: 0.9rem; } }