/* =========================================================================== MultichannelTheme — colour palettes Seven ready-made palettes. Each is ONE rule: the plain properties are the light values, the --d-* ones are the dark values. app.css reads --d-* inside its dark blocks, so a single rule covers both schemes and the palette keeps working when the user flips the light/dark toggle. Applied by putting data-palette on : assets/palettes.js does that for you and remembers the choice, but you can just hard-code it and delete the script if you only want one look. Adding your own palette ----------------------- 1. Copy any block below and give it a new data-palette name. 2. Fill in the light values, then the --d-* dark values. 3. Add a matching entry to PALETTES in assets/palettes.js so it appears in the picker. Skip step 3 if you are hard-coding the attribute. Keep --brand-ink readable on top of --brand: white on a dark brand, near black on a light or amber one. "indigo" is the default that lives in app.css; it is repeated here so the picker can switch back to it explicitly. =========================================================================== */ /* --- Indigo · the default -------------------------------------------------- */ :root[data-palette="indigo"] { --brand: #4F46E5; --brand-ink: #FFFFFF; --brand-soft: #EEF2FF; --bg: #F6F7F9; --panel: #FFFFFF; --ink: #0F172A; --muted: #64748B; --line: #E2E8F0; --line-2: #CBD5E1; --d-brand: #6366F1; --d-brand-ink: #FFFFFF; --d-brand-soft: #1E1B4B; --d-bg: #0B1120; --d-panel: #111827; --d-ink: #E6EAF2; --d-muted: #94A3B8; --d-line: #1F2937; --d-line-2: #334155; } /* --- Lumo · warm amber on paper -------------------------------------------- */ :root[data-palette="lumo"] { --brand: #C9852A; --brand-ink: #1C1813; --brand-soft: #F6E7C8; --bg: #FAF8F4; --panel: #FFFFFF; --ink: #1C1813; --muted: #7C756A; --line: #ECE6DB; --line-2: #DED6C7; --d-brand: #EDAA4A; --d-brand-ink: #1B1305; --d-brand-soft: #3A2E17; --d-bg: #141009; --d-panel: #1C1710; --d-ink: #F2ECE0; --d-muted: #A79C89; --d-line: #2A2317; --d-line-2: #372E1E; } /* --- Emerald · green on cool grey ------------------------------------------ */ :root[data-palette="emerald"] { --brand: #059669; --brand-ink: #FFFFFF; --brand-soft: #E7F6F0; --bg: #F5F8F6; --panel: #FFFFFF; --ink: #0C1F1A; --muted: #5B7369; --line: #DCE7E2; --line-2: #BFD1C9; --d-brand: #10B981; --d-brand-ink: #04231A; --d-brand-soft: #052E24; --d-bg: #071310; --d-panel: #0E1D18; --d-ink: #E3F0EA; --d-muted: #8FA9A0; --d-line: #17302A; --d-line-2: #26463D; } /* --- Ocean · sky blue on slate --------------------------------------------- */ :root[data-palette="ocean"] { --brand: #0284C7; --brand-ink: #FFFFFF; --brand-soft: #E6F3FB; --bg: #F5F8FB; --panel: #FFFFFF; --ink: #0C1B2A; --muted: #5B7185; --line: #DDE7F0; --line-2: #BED0E0; --d-brand: #38BDF8; --d-brand-ink: #06243A; --d-brand-soft: #082F49; --d-bg: #08131F; --d-panel: #0F1E2E; --d-ink: #E3EDF7; --d-muted: #90A6BC; --d-line: #17293B; --d-line-2: #2A4560; } /* --- Rose · crimson on warm grey ------------------------------------------- */ :root[data-palette="rose"] { --brand: #E11D48; --brand-ink: #FFFFFF; --brand-soft: #FCE9ED; --bg: #FAF7F8; --panel: #FFFFFF; --ink: #24121A; --muted: #7C6570; --line: #EEE2E6; --line-2: #DCC8CF; --d-brand: #FB7185; --d-brand-ink: #3A0716; --d-brand-soft: #3F0A1B; --d-bg: #150A0F; --d-panel: #1F1219; --d-ink: #F5E8ED; --d-muted: #B29AA3; --d-line: #2E1B23; --d-line-2: #452833; } /* --- Violet · purple on lilac grey ----------------------------------------- */ :root[data-palette="violet"] { --brand: #7C3AED; --brand-ink: #FFFFFF; --brand-soft: #F1ECFD; --bg: #F8F7FB; --panel: #FFFFFF; --ink: #1A1226; --muted: #6D6480; --line: #E7E3F0; --line-2: #CFC8E0; --d-brand: #A78BFA; --d-brand-ink: #24103F; --d-brand-soft: #2C1B52; --d-bg: #100B1A; --d-panel: #1A1428; --d-ink: #EDE7F7; --d-muted: #A197B8; --d-line: #261D3A; --d-line-2: #3C2F58; } /* --- Graphite · monochrome, no accent hue ---------------------------------- */ :root[data-palette="graphite"] { --brand: #0F172A; --brand-ink: #FFFFFF; --brand-soft: #EDF0F4; --bg: #F5F6F7; --panel: #FFFFFF; --ink: #111827; --muted: #6B7280; --line: #E4E6EA; --line-2: #C9CDD4; --d-brand: #E5E7EB; --d-brand-ink: #0B0F17; --d-brand-soft: #1E2530; --d-bg: #0A0C10; --d-panel: #14181F; --d-ink: #EAECEF; --d-muted: #9AA1AC; --d-line: #1E232B; --d-line-2: #333B46; } /* ============================================================ picker widget */ /* Used by assets/palettes.js. Remove both files together if you do not want a runtime switcher. */ .pal-wrap { position: relative; } .pal-menu { position: absolute; top: calc(100% + 9px); inset-inline-end: 0; z-index: 80; width: 268px; padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .pal-menu[hidden] { display: none; } .pal-menu h4 { margin: 0 0 9px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .pal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .pal-btn { display: block; font: inherit; cursor: pointer; text-align: start; padding: 8px; border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--panel); color: var(--ink); transition: border-color .12s, background .12s; } .pal-btn:hover { background: var(--bg); } .pal-btn[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); } .pal-btn .pal-name { display: block; font-size: 12.5px; font-weight: 600; margin-top: 6px; } /* Swatch: light half on the left, dark half on the right, brand dot on top. Shows at a glance that the palette covers both schemes. */ .pal-chip { display: block; height: 26px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line-2); position: relative; } .pal-chip i { position: absolute; top: 0; bottom: 0; width: 50%; } .pal-chip i:first-child { inset-inline-start: 0; } .pal-chip i:last-child { inset-inline-end: 0; } .pal-chip b { position: absolute; inset-inline-start: 50%; top: 50%; width: 13px; height: 13px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px rgba(255,255,255,.28); } :root[dir="rtl"] .pal-chip b { transform: translate(50%, -50%); } /* ============================================================ settings page */ /* The gallery on settings.html → Appearance. */ .pal-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; } .pal-card { display: block; /* without this the inline children overlap on the baseline */ font: inherit; cursor: pointer; text-align: start; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink); transition: border-color .12s, box-shadow .12s, transform .12s; } .pal-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-s); } .pal-card[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } /* Miniature of the panel itself: sidebar, top bar, a button and two rows. */ .pal-mini { height: 96px; display: grid; grid-template-columns: 34px 1fr; } .pal-mini .m-side { padding: 6px 4px; display: grid; gap: 4px; align-content: start; } .pal-mini .m-dot { height: 6px; border-radius: 3px; } .pal-mini .m-main { padding: 7px; display: grid; gap: 5px; align-content: start; } .pal-mini .m-bar { height: 7px; border-radius: 3px; } .pal-mini .m-btn { height: 12px; width: 42px; border-radius: 4px; } .pal-meta { display: block; padding: 9px 11px 11px; border-top: 1px solid var(--line); } .pal-meta b { display: block; font-size: 13.5px; } .pal-meta span { font-size: 12px; color: var(--muted); }