/** * custom.css — the handful of things Tailwind's utilities can't express. * Loaded AFTER the compiled Tailwind stylesheet (assets/css/tailwind.css) so * these rules win where they overlap. * * Keep this file small. If a rule here can be a Tailwind utility, it should be. */ /* ── Sign-in overlay ─────────────────────────────────────────────────────── */ /* * The overlay is visible by default in the markup, so a signed-out visitor never * sees a flash of the dashboard. When a session token already exists, the * pre-paint script in index.html sets data-signed-in on and this rule * suppresses the overlay before the first frame — avoiding the reverse flash. * UiModule.showLogin()/hideLogin() keep the attribute in step. */ html[data-signed-in='1'] #login-view { display: none; } /* ── Scrollbars ───────────────────────────────────────────────────────────── */ /* Thin, theme-aware scrollbars for the sidebar list and the admin drawer. */ .scroll-area { scrollbar-width: thin; scrollbar-color: rgb(203 213 225) transparent; } .dark .scroll-area { scrollbar-color: rgb(51 65 85) transparent; } .scroll-area::-webkit-scrollbar { width: 8px; height: 8px; } .scroll-area::-webkit-scrollbar-track { background: transparent; } .scroll-area::-webkit-scrollbar-thumb { background-color: rgb(203 213 225); border-radius: 9999px; } .dark .scroll-area::-webkit-scrollbar-thumb { background-color: rgb(51 65 85); } /* ── Copy-button acknowledgement ──────────────────────────────────────────── */ /* Applied by ClipboardService.flash() while a button shows "Copied!". */ .is-flashing { color: rgb(5 150 105) !important; border-color: rgb(16 185 129) !important; } .dark .is-flashing { color: rgb(52 211 153) !important; border-color: rgb(5 150 105) !important; } /* ── Native ──────────────────────────────────────────────────────── */ dialog { border: none; padding: 0; background: transparent; /* Centre it without relying on the UA's default magic margins. */ margin: auto; } dialog::backdrop { background-color: rgb(15 23 42 / 0.5); backdrop-filter: blur(2px); } /* Fallback for browsers that opened it without showModal(). */ dialog[open] { display: block; } /* ── Result panel focus ring ──────────────────────────────────────────────── */ /* The panel receives focus after a create so keyboard users land on it. */ #result-panel:focus { outline: none; } #result-panel:focus-visible { outline: 2px solid rgb(99 102 241); outline-offset: 3px; } /* ── Spinner ──────────────────────────────────────────────────────────────── */ .spinner { animation: cp-spin 0.7s linear infinite; } @keyframes cp-spin { to { transform: rotate(360deg); } } /* ── Respect reduced-motion ───────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .spinner, *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ── help.html: the expandable entries ────────────────────────────────────── */ /* * The troubleshooting entries are
/, styled with `list-none` * so the browser's own triangle does not fight the card layout. The side effect * is that seven CLOSED cards in a row look like ordinary paragraphs — nothing * says "there is more inside this". So draw the marker here instead. * * It is a bordered square rotated 45°, not a glyph: a CSS-drawn box is silent * to screen readers (which already announce the expanded state from ) * and cannot depend on a font having the character. */ .help-section summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; } .help-section summary::after { content: ''; flex: none; width: 0.5rem; height: 0.5rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; /* The rotated box's visual centre sits above its box centre, so nudge it. */ position: relative; top: -0.15rem; opacity: 0.4; transform: rotate(45deg); transition: transform 0.15s ease; } .help-section details[open] > summary::after { top: 0.15rem; transform: rotate(225deg); opacity: 0.6; } /* Keyboard users get a ring around the whole row, not just the text. */ .help-section summary:focus-visible { outline: 2px solid rgb(99 102 241); outline-offset: 3px; border-radius: 0.75rem; }