/* // theme-switch.css // ================ // // Styles the colour-theme CONTROL: a top-right chip button (top-right of the // fixed .site-nav, mirroring the burger top-left) that toggles a small popover // of theme options. Built on a native
/ so open/close needs // no framework; a few lines of JS in index.html's add close-on-select, // outside-click and Escape. // // The themes THEMSELVES live in theme-.css ([data-theme] scoped); this file // only dresses the picker. Loaded as its own (NOT in site.min.css), so // editing it needs no build step — just a service-worker.js cache bump. // // Mirrors site-nav.css's chip idiom (neutral chrome, hotpink accent on the // DEFAULT theme; theme-ai-slate.css swaps that accent to slate blue). */ .site-nav__theme { position: relative; } /* the trigger chip — same look as the burger chip */ .site-nav__theme-toggle { list-style: none; /* drop the default disclosure marker */ box-sizing: border-box; height: 2.5rem; width: 2.5rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--colour-tw-neutral-900, #171717); background: var(--colour-tw-neutral-050, #fafafa); border: 1px solid var(--colour-tw-neutral-300, #d4d4d4); border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .site-nav__theme-toggle::-webkit-details-marker { display: none; } /* Safari/Chrome marker */ .site-nav__theme-toggle::marker { content: ""; } /* Firefox marker */ .site-nav__theme-toggle:hover, .site-nav__theme[open] .site-nav__theme-toggle { background: #fff; border-color: hotpink; /* default-theme accent; ai-slate → slate blue */ } .site-nav__theme-toggle:focus-visible { outline: 2px solid var(--colour-tw-neutral-900, #171717); outline-offset: 2px; } /* the popover, anchored under the chip's right edge */ .site-nav__theme-pop { position: absolute; top: calc(100% + 0.4rem); right: 0; min-width: 11rem; display: flex; flex-direction: column; gap: 0.1rem; padding: 0.55rem; background: #fff; border: 1px solid var(--colour-tw-neutral-200, #e5e5e5); border-radius: 0.6rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); } .site-nav__theme-label { font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--colour-tw-neutral-500, #737373); padding: 0 0.2rem 0.25rem; } /* button reset + a comfortable row */ .site-nav__theme-btn { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.45rem 0.4rem; margin: 0; background: none; border: 0; border-radius: 0.35rem; font: inherit; font-size: 0.95rem; line-height: 1.2; color: var(--colour-tw-neutral-900, #171717); text-align: left; cursor: pointer; } .site-nav__theme-btn:hover, .site-nav__theme-btn:focus-visible { background: var(--colour-tw-neutral-100, #f1f1f1); outline: none; } .site-nav__swatch { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--_swatch, #d4d4d4); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); } /* per-theme swatch colours (keep in sync with the theme files) */ .site-nav__theme-btn[data-set-theme="default"] { --_swatch: #D4D4D4; } .site-nav__theme-btn[data-set-theme="ai-slate"] { --_swatch: #EBDBBC; } /* manilla */ /* the active theme: ring the swatch + a check, so the current choice is obvious */ .site-nav__theme-btn[aria-pressed="true"] { font-weight: 600; } .site-nav__theme-btn[aria-pressed="true"] .site-nav__swatch { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 0 0 2px var(--colour-tw-neutral-900, #171717); }