/* Shared across all pages: htmx request indicator, disabled-button state, the top-of-page loading bar shown during htmx requests (including hx-boost navigation), and the app-wide font-size scale. */ :root { --nt93-font-size-xs: 0.7rem; /* 11.2px — hints, timestamps, small badges */ --nt93-font-size-sm: 0.85rem; /* 13.6px — table rows, form/panel body text */ --nt93-font-size-md: 1rem; /* 16px — default body text */ --nt93-font-size-lg: 1.125rem; /* 18px — subheadings */ --nt93-font-size-xl: 1.5rem; /* 24px — headings */ /* Dashboard theme tokens (dark = default, matches the app's original hardcoded palette exactly so `` with no data-theme attribute — or any page that never loads the toggle, e.g. public-blog — looks unchanged). Overridden below under html[data-theme="light"]. Consumed by dashboard.css and by the handful of inline styles/Bootstrap-utility bridges noted where they're used. See public/js/app.js's theme-init snippet in layouts/dashboard.ejs for how the attribute gets set (localStorage, applied before first paint to avoid a flash), and the toggle switch in partials/header.ejs. */ --nt93-color-bg: #000; --nt93-color-surface: #0a0a0a; /* sidebar, panels, dropdowns, modals */ --nt93-color-surface-alt: #111; /* inputs, header button, thumbnail placeholders, nav hover */ --nt93-color-surface-hover: #1a1a1a; --nt93-color-border: #222; --nt93-color-border-strong: #333; --nt93-color-border-input: #444; /* checkbox/radio borders */ --nt93-color-text: #fff; --nt93-color-text-secondary: #d1d5db; --nt93-color-text-muted: #9ca3af; --nt93-color-text-faint: #666; --nt93-color-text-faint-2: #8b8f97; --nt93-color-accent: #fff; /* logo dot, active nav border, badge/pagination "active" fill */ --nt93-color-accent-contrast: #000; --nt93-color-danger-bg: #2a1414; --nt93-color-danger-border: #2a1414; --nt93-color-danger-text: #b45454; --nt93-color-danger-bg-hover: #2a1414; --nt93-color-danger-border-hover: #4a1f1f; --nt93-color-danger-text-hover: #ff8080; --nt93-color-shadow: rgba(0, 0, 0, 0.5); --nt93-color-shadow-strong: rgba(0, 0, 0, 0.6); } html[data-theme="light"] { --nt93-color-bg: #f8f9fa; --nt93-color-surface: #ffffff; --nt93-color-surface-alt: #f1f3f5; --nt93-color-surface-hover: #e9ecef; --nt93-color-border: #dee2e6; --nt93-color-border-strong: #ced4da; --nt93-color-border-input: #adb5bd; --nt93-color-text: #16181d; --nt93-color-text-secondary: #343a40; --nt93-color-text-muted: #6c757d; --nt93-color-text-faint: #868e96; --nt93-color-text-faint-2: #868e96; --nt93-color-accent: #16181d; --nt93-color-accent-contrast: #fff; --nt93-color-danger-bg: #fdecec; --nt93-color-danger-border: #f3c8c8; --nt93-color-danger-text: #c53030; --nt93-color-danger-bg-hover: #f8d7d7; --nt93-color-danger-border-hover: #e59a9a; --nt93-color-danger-text-hover: #a52121; --nt93-color-shadow: rgba(0, 0, 0, 0.1); --nt93-color-shadow-strong: rgba(0, 0, 0, 0.2); } /* Bridges a few Bootstrap utility classes used throughout dashboard-rendered views (dashboard.ejs, media.ejs, badge.ejs, ...) that assume a dark background — .text-secondary/.border-secondary/.bg-secondary already resolve to a fixed mid-grey (--bs-secondary-rgb) that's legible on both themes, but .text-light (near-white) needs remapping or it goes invisible against a light surface. */ html[data-theme="light"] .text-light { color: var(--nt93-color-text) !important; } /* .btn-close-white (confirm-modal.ejs) inverts Bootstrap's close icon to white for a dark modal — undo that inversion in light mode or the X renders white-on-white. */ html[data-theme="light"] .btn-close-white { filter: none; } /* .btn-light.text-dark (btn-save/btn-create/post-edit's Publish, etc.) is this app's primary CTA style: a bright accent button that pops against the dark surfaces around it. Bootstrap's literal #f8f9fa background is indistinguishable from this theme's light-mode page background, so invert it here the same way --nt93-color-accent already inverts elsewhere (white-on-black in dark mode, black-on-white in light mode) to keep it a visible CTA in both. */ html[data-theme="light"] .btn-light.text-dark { --bs-btn-bg: var(--nt93-color-accent); --bs-btn-border-color: var(--nt93-color-accent); --bs-btn-color: var(--nt93-color-accent-contrast); --bs-btn-hover-bg: #343a40; --bs-btn-hover-border-color: #343a40; --bs-btn-hover-color: var(--nt93-color-accent-contrast); --bs-btn-active-bg: #343a40; --bs-btn-active-border-color: #343a40; --bs-btn-active-color: var(--nt93-color-accent-contrast); color: var(--nt93-color-accent-contrast) !important; } .htmx-indicator { display: none; } .htmx-request.htmx-indicator, .htmx-request .htmx-indicator { display: inline-block; } button[disabled] { cursor: not-allowed; opacity: 0.7; } /* Bootstrap's .badge defaults to font-size: .75em (relative to its context, so it shrinks along with the smaller table/panel font-size). Use an absolute size from the scale instead so badges stay legible everywhere. */ .badge { font-size: var(--nt93-font-size-sm); } /* Small uppercase page-label/status chip (header page name, "BETA" tag, etc.) */ .nt93-badge { font-size: var(--nt93-font-size-xs); text-transform: uppercase; letter-spacing: 0.1em; border: 1px solid var(--nt93-color-border-strong); color: var(--nt93-color-text-muted); padding: 2px 6px; border-radius: 2px; } #nt93-loading-bar { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 2000; pointer-events: none; } #nt93-loading-bar .bar { height: 100%; width: 0%; opacity: 0; background: var(--nt93-color-accent); box-shadow: 0 0 8px var(--nt93-color-shadow-strong); transform-origin: left; } #nt93-loading-bar.is-loading .bar { opacity: 1; width: 85%; transition: width 6s cubic-bezier(0.1, 0.7, 1, 0.1); } #nt93-loading-bar.is-done .bar { width: 100%; opacity: 0; transition: width 200ms ease-out, opacity 300ms ease-out 150ms; } /* Shared confirm dialog (partials/ui/confirm-modal.ejs), replacing the native window.confirm() that hx-confirm="..." would otherwise trigger — see app.js's htmx:confirm listener for the JS side. */ .nt93-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 2100; display: flex; align-items: center; justify-content: center; padding: 1rem; } .nt93-modal { width: 100%; max-width: 420px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); } body.nt93-modal-open { overflow: hidden; }