/* * NoteVault — app.css * =========================================================================== * This file owns two responsibilities: * * 1. CSS custom property foundation (light mode defaults, dark mode ready) * Variables are defined here; Tailwind utility classes are used in views. * When dark mode is activated in Phase 2, swap the values under * [data-theme="dark"] or via a `@media (prefers-color-scheme: dark)` block. * * 2. NoteVault component classes (nv-*) that reference the variables, * bridging Tailwind's utility approach with theme-aware colours. * * =========================================================================== */ /* --------------------------------------------------------------------------- * 1. CSS Custom Properties — Light mode defaults * --------------------------------------------------------------------------- * All semantic colour decisions live here. * Components use var(--*) so a single theme toggle flips every colour at once. */ :root { /* Backgrounds */ --bg-primary: #ffffff; /* card / modal surfaces */ --bg-secondary: #f9fafb; /* page background (gray-50 equiv) */ --bg-hover: #f3f4f6; /* subtle hover state */ /* Text */ --text-primary: #111827; /* headings, body copy (gray-900) */ --text-muted: #6b7280; /* captions, helper text (gray-500) */ --text-inverse: #ffffff; /* text on dark/accent backgrounds */ /* Borders */ --border-color: #e5e7eb; /* card edges, input borders (gray-200) */ /* Accent (brand / interactive) — AZtechs teal */ --accent: #0e8080; /* teal — buttons, links, focus */ --accent-hover: #0a6060; /* teal dark — button hover */ --accent-light: #e6f5f5; /* teal-50 — subtle tinted bg */ /* Status */ --success-bg: #f0fdf4; --success-text: #166534; --success-border: #bbf7d0; --error-bg: #fef2f2; --error-text: #991b1b; --error-border: #fecaca; /* Radius & shadow tokens (used in nv-* classes below) */ --radius-card: 0.75rem; /* 12px — card corners */ --radius-input: 0.5rem; /* 8px — input / button corners */ --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.07), 0 1px 2px -1px rgb(0 0 0 / 0.07); } /* --------------------------------------------------------------------------- * 2. Dark mode — .dark on (toggled by theme.js) * --------------------------------------------------------------------------- * All nv-* components reference var(--*), so flipping these values here * is the only change needed to theme the entire UI. */ .dark { --bg-primary: #0f172a; /* slate-900 */ --bg-secondary: #1e293b; /* slate-800 */ --bg-hover: #334155; /* slate-700 */ --text-primary: #f1f5f9; /* slate-100 */ --text-muted: #94a3b8; /* slate-400 */ --text-inverse: #0f172a; /* dark text on light bg */ --border-color: #334155; /* slate-700 */ --accent: #14a0a0; /* teal-400 — brighter on dark bg */ --accent-hover: #18b8b8; /* teal-300 — hover on dark bg */ --accent-light: #0a2e2e; /* very dark teal tint */ --success-bg: #052e16; --success-text: #86efac; --success-border: #166534; --error-bg: #450a0a; --error-text: #fca5a5; --error-border: #991b1b; --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4); } /* --------------------------------------------------------------------------- * 3. Base reset + smooth theme transitions * --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* * Smooth transition on theme toggle. * Scoped to properties that actually change between light/dark so we don't * accidentally slow down hover/focus transitions on interactive elements. */ body, .nv-sidebar, .nv-main-content, .nv-note-card, .nv-card, .nv-flash, .nv-share-panel, .nv-share-list, .nv-note-readonly-body, .nv-quill-editor, .ql-toolbar.ql-snow, .ql-container.ql-snow, .ql-editor { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } /* --------------------------------------------------------------------------- * 4. NoteVault semantic component classes * --------------------------------------------------------------------------- * These keep view templates clean: one class name, all theme-awareness baked in. */ /* Page body background */ .nv-body { background-color: var(--bg-secondary); color: var(--text-primary); } /* Card / panel surface */ .nv-card { background-color: var(--bg-primary); border-color: var(--border-color); border-radius: var(--radius-card); box-shadow: var(--shadow-card); } /* Typography helpers */ .nv-text-primary { color: var(--text-primary); } .nv-text-muted { color: var(--text-muted); } /* Border utility */ .nv-border { border-color: var(--border-color); } /* Form inputs */ .nv-input { background-color: var(--bg-primary); border-color: var(--border-color); color: var(--text-primary); border-radius: var(--radius-input); } .nv-input::placeholder { color: var(--text-muted); } .nv-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); outline: none; } /* Primary button */ .nv-btn-primary { background-color: var(--accent); color: var(--text-inverse); border-radius: var(--radius-input); padding: 0.625rem 1rem; font-size: 0.875rem; font-weight: 600; transition: background-color 150ms ease; cursor: pointer; border: none; display: inline-flex; align-items: center; justify-content: center; } .nv-btn-primary:hover { background-color: var(--accent-hover); } .nv-btn-primary:focus { outline: 2px solid var(--accent); outline-offset: 2px; } /* Link style */ .nv-link { color: var(--accent); transition: color 150ms ease; } .nv-link:hover { color: var(--accent-hover); } /* =========================================================================== * Phase 2 — App shell, note cards, editor * =========================================================================== */ /* --------------------------------------------------------------------------- * App layout: fixed sidebar + scrollable main content * --------------------------------------------------------------------------- */ .nv-app-layout { display: flex; min-height: 100vh; } .nv-sidebar { width: 260px; flex-shrink: 0; background-color: var(--bg-primary); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; height: 100vh; overflow-y: auto; z-index: 10; } .nv-main-content { margin-left: 260px; flex: 1; padding: 2rem; min-height: 100vh; background-color: var(--bg-secondary); } /* --------------------------------------------------------------------------- * Sidebar components * --------------------------------------------------------------------------- */ .nv-sidebar-brand { display: flex; align-items: center; gap: 0.625rem; padding: 1rem 0.75rem; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; } .nv-brand-icon { width: 2rem; height: 2rem; border-radius: 0.5rem; background-color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .nv-sidebar-nav-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; color: var(--text-primary); text-decoration: none; transition: background-color 150ms ease; } .nv-sidebar-nav-item:hover { background-color: var(--bg-hover); } .nv-sidebar-nav-item--active { background-color: var(--accent-light); color: var(--accent); font-weight: 500; } .nv-avatar { width: 2rem; height: 2rem; border-radius: 50%; background-color: var(--accent); color: var(--text-inverse); display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 600; flex-shrink: 0; } /* --------------------------------------------------------------------------- * Flash notifications (main layout) * --------------------------------------------------------------------------- */ .nv-flash { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: var(--radius-input); font-size: 0.875rem; margin-bottom: 1.5rem; border: 1px solid transparent; } .nv-flash--success { background-color: var(--success-bg); border-color: var(--success-border); color: var(--success-text); } .nv-flash--error { background-color: var(--error-bg); border-color: var(--error-border); color: var(--error-text); } /* --------------------------------------------------------------------------- * Note card grid * --------------------------------------------------------------------------- */ .nv-notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; } .nv-notes-grid--archived { opacity: 0.65; } /* The card is an tag — reset link styles */ .nv-note-card { display: flex; overflow: hidden; background-color: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-card); box-shadow: var(--shadow-card); text-decoration: none; cursor: pointer; transition: transform 150ms ease, box-shadow 150ms ease; } .nv-note-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px 0 rgb(0 0 0 / 0.12); } .dark .nv-note-card:hover { box-shadow: 0 8px 20px 0 rgb(0 0 0 / 0.45); } /* 4px accent bar on the left edge — Phase 3 will set this to the label color */ .nv-note-card-accent { width: 4px; flex-shrink: 0; background-color: var(--accent); } .nv-note-card-body { padding: 1rem 1.25rem; flex: 1; min-width: 0; /* lets truncation work inside a flex child */ } .nv-note-card-title { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nv-note-card-preview { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.55; /* Clamp to 2 lines */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0.75rem; } .nv-note-card-date { font-size: 0.75rem; color: var(--text-muted); } /* --------------------------------------------------------------------------- * Editor page layout * --------------------------------------------------------------------------- */ .nv-editor-wrap { max-width: 800px; margin: 0 auto; } .nv-editor-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } /* Large borderless title input */ .nv-title-input { display: block; width: 100%; font-size: 1.5rem; font-weight: 700; color: var(--text-primary); background: transparent; border: none; border-bottom: 2px solid var(--border-color); padding: 0.25rem 0; margin-bottom: 1.25rem; outline: none; transition: border-color 150ms ease; } .nv-title-input:focus { border-bottom-color: var(--accent); } .nv-title-input::placeholder { color: var(--text-muted); font-weight: 400; } .nv-editor-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1rem; } /* --------------------------------------------------------------------------- * Quill editor theming — override snow theme to use CSS variables * --------------------------------------------------------------------------- */ .nv-quill-editor .ql-toolbar, .ql-toolbar.ql-snow { border-color: var(--border-color) !important; border-top-left-radius: var(--radius-card); border-top-right-radius: var(--radius-card); background-color: var(--bg-secondary); } .nv-quill-editor .ql-container, .ql-container.ql-snow { border-color: var(--border-color) !important; border-bottom-left-radius: var(--radius-card); border-bottom-right-radius: var(--radius-card); font-family: inherit; font-size: 1rem; } .ql-editor { min-height: 420px; background-color: var(--bg-primary); color: var(--text-primary); line-height: 1.7; } /* Placeholder text */ .ql-editor.ql-blank::before { color: var(--text-muted); font-style: normal; } /* --------------------------------------------------------------------------- * Button variants * --------------------------------------------------------------------------- */ /* Secondary — outlined neutral */ .nv-btn-secondary { display: inline-flex; align-items: center; background-color: transparent; color: var(--text-primary); border: 1px solid var(--border-color); border-radius: var(--radius-input); padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: background-color 150ms ease; } .nv-btn-secondary:hover { background-color: var(--bg-hover); } /* Danger — for destructive actions like delete */ .nv-btn-danger { display: inline-flex; align-items: center; background-color: transparent; color: #dc2626; border: 1px solid #fca5a5; border-radius: var(--radius-input); padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background-color 150ms ease; } .nv-btn-danger:hover { background-color: #fef2f2; } /* =========================================================================== * Phase 3 — Labels, chips, color picker * =========================================================================== */ /* --------------------------------------------------------------------------- * Sidebar label items * --------------------------------------------------------------------------- */ .nv-sidebar-label-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; color: var(--text-primary); text-decoration: none; transition: background-color 150ms ease; } .nv-sidebar-label-item:hover { background-color: var(--bg-hover); } .nv-sidebar-label-item--active { background-color: var(--bg-hover); font-weight: 500; } /* 10px color dot */ .nv-sidebar-label-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } /* --------------------------------------------------------------------------- * Label pills — read-only badges shown on note cards * --------------------------------------------------------------------------- */ .nv-label-pill { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 500; line-height: 1.5; /* background-color and color set inline via PHP label_text_color() */ } .nv-note-card-labels { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.5rem; } /* --------------------------------------------------------------------------- * Label toggle chips — interactive checkboxes on note create/edit * --------------------------------------------------------------------------- */ .nv-label-toggle-group { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; } .nv-label-toggle { display: inline-flex; align-items: center; padding: 0.25rem 0.875rem; border-radius: 9999px; font-size: 0.8125rem; font-weight: 500; cursor: pointer; /* Outlined by default using the label's color via CSS custom property */ border: 2px solid var(--chip-color, var(--accent)); color: var(--chip-color, var(--accent)); background-color: transparent; transition: background-color 150ms ease, color 150ms ease; user-select: none; } /* Filled state: triggered either by JS class toggle OR by CSS :has() */ .nv-label-toggle--active, .nv-label-toggle:has(input:checked) { background-color: var(--chip-color, var(--accent)); color: var(--chip-text, #ffffff); } /* sr-only — visually hide checkbox but keep it accessible */ .nv-label-toggle .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* --------------------------------------------------------------------------- * Labels list page (labels/index.php) * --------------------------------------------------------------------------- */ .nv-label-list-row { display: flex; align-items: center; gap: 1rem; padding: 0.875rem 1.25rem; } /* Color swatch chip — filled pill showing label name + color */ .nv-label-swatch-chip { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.8125rem; font-weight: 500; /* background-color and color set inline */ white-space: nowrap; } /* --------------------------------------------------------------------------- * Native color picker input * --------------------------------------------------------------------------- */ .nv-color-input { -webkit-appearance: none; appearance: none; width: 2.75rem; height: 2.75rem; padding: 0.2rem; border: 2px solid var(--border-color); border-radius: var(--radius-input); background-color: var(--bg-primary); cursor: pointer; transition: border-color 150ms ease; } .nv-color-input:hover, .nv-color-input:focus { border-color: var(--accent); outline: none; } /* Inner swatch (WebKit) */ .nv-color-input::-webkit-color-swatch-wrapper { padding: 0; } .nv-color-input::-webkit-color-swatch { border: none; border-radius: calc(var(--radius-input) - 2px); } /* =========================================================================== * Phase 4 — Sharing panel, shared badge, read-only note view * =========================================================================== */ /* --------------------------------------------------------------------------- * "Shared" badge on note cards (dashboard) * --------------------------------------------------------------------------- */ .nv-shared-badge { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; background-color: var(--accent-light); color: var(--accent); white-space: nowrap; flex-shrink: 0; } /* --------------------------------------------------------------------------- * Permission badge in editor top bar and share list * --------------------------------------------------------------------------- */ .nv-permission-badge { display: inline-flex; align-items: center; padding: 0.2rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; border: 1px solid transparent; } .nv-permission-badge--view { background-color: #f3f4f6; color: #374151; border-color: #e5e7eb; } .nv-permission-badge--edit { background-color: #ecfdf5; color: #065f46; border-color: #a7f3d0; } /* --------------------------------------------------------------------------- * Read-only note view (view-permission shares) * --------------------------------------------------------------------------- */ .nv-note-readonly-title { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--border-color); } /* Wrapper that styles raw Quill HTML output for reading */ .nv-note-readonly-body { background-color: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-card); padding: 1.5rem 2rem; color: var(--text-primary); line-height: 1.75; font-size: 1rem; } /* Mirror Quill's default content styles so the read view matches the editor */ .nv-note-readonly-body h1 { font-size: 1.5em; font-weight: 700; margin: 0.75em 0 0.25em; } .nv-note-readonly-body h2 { font-size: 1.25em; font-weight: 700; margin: 0.75em 0 0.25em; } .nv-note-readonly-body p { margin: 0 0 0.5em; } .nv-note-readonly-body ul, .nv-note-readonly-body ol { padding-left: 1.5em; margin: 0 0 0.5em; } .nv-note-readonly-body ul { list-style-type: disc; } .nv-note-readonly-body ol { list-style-type: decimal; } .nv-note-readonly-body blockquote { border-left: 4px solid var(--border-color); padding-left: 1em; color: var(--text-muted); margin: 0.5em 0; } .nv-note-readonly-body pre { background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 0.375rem; padding: 0.75em 1em; font-family: ui-monospace, monospace; font-size: 0.875em; overflow-x: auto; margin: 0.5em 0; } .nv-note-readonly-body code { font-family: ui-monospace, monospace; font-size: 0.875em; } .nv-note-readonly-body a { color: var(--accent); text-decoration: underline; } .nv-note-readonly-body strong { font-weight: 700; } .nv-note-readonly-body em { font-style: italic; } .nv-note-readonly-body s { text-decoration: line-through; } /* --------------------------------------------------------------------------- * Sharing panel * --------------------------------------------------------------------------- */ .nv-share-panel { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border-color); } .nv-share-panel-heading { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 1rem; } /* Add-share form row */ .nv-share-add-form { margin-bottom: 1.5rem; } .nv-share-add-fields { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } .nv-share-email-input { flex: 1; min-width: 200px; } .nv-share-permission-select { width: auto; cursor: pointer; background-color: var(--bg-primary); color: var(--text-primary); } /* Current shares list */ .nv-share-list { background-color: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-card); overflow: hidden; } .nv-share-list-heading { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding: 0.625rem 1rem; background-color: var(--bg-secondary); border-bottom: 1px solid var(--border-color); } .nv-share-list-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); } .nv-share-list-item:first-of-type { border-top: none; } .nv-share-user-info { flex: 1; min-width: 0; } .nv-share-user-name { display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nv-share-user-email { display: block; font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nv-share-revoke-btn { font-size: 0.75rem; color: #dc2626; background: none; border: none; cursor: pointer; padding: 0.25rem 0.5rem; border-radius: 0.375rem; transition: background-color 150ms ease; white-space: nowrap; } .nv-share-revoke-btn:hover { background-color: #fef2f2; } /* =========================================================================== * Phase 5 — Live search * =========================================================================== */ /* Search bar wrapper — sits in the sidebar above the New Note button */ .nv-search-wrap { position: relative; display: flex; align-items: center; } .nv-search-icon { position: absolute; left: 0.5rem; width: 1rem; height: 1rem; color: var(--text-muted); pointer-events: none; flex-shrink: 0; } .nv-search-input { width: 100%; padding: 0.4rem 0.625rem 0.4rem 2rem; font-size: 0.8125rem; color: var(--text-primary); background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 0.5rem; outline: none; transition: border-color 150ms ease, box-shadow 150ms ease; /* Remove the native clear (×) button on WebKit */ -webkit-appearance: none; } .nv-search-input::placeholder { color: var(--text-muted); } .nv-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-light); background-color: var(--bg-primary); } /* Highlighted match inside a search result card title */ mark { background-color: #fef08a; /* yellow-200 */ color: inherit; border-radius: 2px; padding: 0 1px; } .dark mark { background-color: #713f12; /* amber-900 — readable on dark surfaces */ color: #fef08a; } /* =========================================================================== * Phase 6 — Dark mode polish, responsive sidebar, skeleton, flash animation * =========================================================================== */ /* --------------------------------------------------------------------------- * Dark mode: Quill toolbar icon SVG strokes + dropdowns * Quill hardcodes some colors inline; we target the Snow theme selectors. * --------------------------------------------------------------------------- */ .dark .ql-snow .ql-stroke { stroke: var(--text-muted); } .dark .ql-snow .ql-fill, .dark .ql-snow .ql-stroke.ql-fill { fill: var(--text-muted); } .dark .ql-snow .ql-picker-label, .dark .ql-snow .ql-picker-item { color: var(--text-muted); } .dark .ql-snow .ql-picker-options { background-color: var(--bg-secondary); border-color: var(--border-color); } .dark .ql-snow .ql-picker-label:hover, .dark .ql-snow .ql-picker-item:hover, .dark .ql-snow .ql-picker-item.ql-selected { color: var(--text-primary); } .dark .ql-snow .ql-tooltip { background-color: var(--bg-secondary); border-color: var(--border-color); color: var(--text-primary); } .dark .ql-snow .ql-tooltip input[type="text"] { background-color: var(--bg-primary); border-color: var(--border-color); color: var(--text-primary); } /* --------------------------------------------------------------------------- * Dark mode: permission badges (hardcoded palette overrides) * --------------------------------------------------------------------------- */ .dark .nv-permission-badge--view { background-color: #1e293b; color: #cbd5e1; border-color: #334155; } .dark .nv-permission-badge--edit { background-color: #052e16; color: #86efac; border-color: #166534; } /* --------------------------------------------------------------------------- * Dark mode: danger button hover * --------------------------------------------------------------------------- */ .dark .nv-btn-danger:hover { background-color: #450a0a; } .dark .nv-share-revoke-btn:hover { background-color: #450a0a; } /* --------------------------------------------------------------------------- * Dark mode: auth layout card (uses nv-card class — variables handle it, * but the Tailwind hard-coded classes in the template need overriding) * --------------------------------------------------------------------------- */ .dark .nv-auth-card { background-color: var(--bg-primary); border-color: var(--border-color); } /* --------------------------------------------------------------------------- * Dark mode: search input — bg-secondary already adapts via variable, * but the native search cancel button needs hiding in dark too * --------------------------------------------------------------------------- */ .dark .nv-search-input { color-scheme: dark; } /* --------------------------------------------------------------------------- * Flash notifications — slide-in + auto-dismiss animation * --------------------------------------------------------------------------- */ @keyframes nv-slide-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .nv-flash { animation: nv-slide-in 0.25s ease both; transition: opacity 0.35s ease, transform 0.35s ease; } .nv-flash--dismissed { opacity: 0; transform: translateY(-6px); pointer-events: none; } /* --------------------------------------------------------------------------- * Skeleton loading state — used by search.js while fetching * --------------------------------------------------------------------------- */ @keyframes nv-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .nv-skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; } .nv-skeleton-card { background-color: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-card); overflow: hidden; display: flex; height: 130px; } .nv-skeleton-accent { width: 4px; flex-shrink: 0; background-color: var(--border-color); } .nv-skeleton-body { flex: 1; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .nv-skeleton-line { border-radius: 4px; background: linear-gradient( 90deg, var(--bg-hover) 25%, var(--bg-secondary) 50%, var(--bg-hover) 75% ); background-size: 800px 100%; animation: nv-shimmer 1.4s infinite linear; } .nv-skeleton-line--title { height: 14px; width: 65%; } .nv-skeleton-line--text { height: 11px; width: 90%; } .nv-skeleton-line--text2 { height: 11px; width: 75%; } .nv-skeleton-line--date { height: 10px; width: 35%; margin-top: auto; } /* --------------------------------------------------------------------------- * Theme toggle button (in sidebar footer) * --------------------------------------------------------------------------- */ .nv-theme-toggle { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 0.5rem; background: none; border: 1px solid var(--border-color); cursor: pointer; color: var(--text-muted); transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; flex-shrink: 0; } .nv-theme-toggle:hover { background-color: var(--bg-hover); color: var(--text-primary); } .nv-theme-toggle svg { width: 1rem; height: 1rem; pointer-events: none; } /* --------------------------------------------------------------------------- * Hamburger button (mobile only — hidden on desktop) * --------------------------------------------------------------------------- */ .nv-hamburger { display: none; /* shown via media query below */ align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; background: none; border: 1px solid var(--border-color); border-radius: 0.5rem; cursor: pointer; color: var(--text-muted); flex-shrink: 0; } .nv-hamburger svg { width: 1.25rem; height: 1.25rem; pointer-events: none; } /* --------------------------------------------------------------------------- * Sidebar overlay (mobile backdrop) * --------------------------------------------------------------------------- */ .nv-sidebar-overlay { display: none; position: fixed; inset: 0; background-color: rgb(0 0 0 / 0.45); z-index: 9; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .nv-sidebar-overlay--visible { opacity: 1; pointer-events: auto; } /* --------------------------------------------------------------------------- * Mobile top bar (hamburger row — visible only on small screens) * --------------------------------------------------------------------------- */ .nv-mobile-topbar { display: none; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background-color: var(--bg-primary); border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 8; } .nv-mobile-topbar-title { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); flex: 1; } /* --------------------------------------------------------------------------- * Responsive layout — sidebar collapses on < 768 px * --------------------------------------------------------------------------- */ @media (max-width: 767px) { /* Sidebar: slides in from the left as an overlay */ .nv-sidebar { transform: translateX(-100%); transition: transform 0.25s ease; z-index: 10; } .nv-sidebar--open { transform: translateX(0); } /* Overlay becomes active */ .nv-sidebar-overlay { display: block; } /* Main content takes full width */ .nv-main-content { margin-left: 0; padding: 0; /* topbar provides top spacing */ } /* Mobile topbar appears */ .nv-mobile-topbar { display: flex; } /* Main content padding (below topbar) */ .nv-main-content > *:not(.nv-mobile-topbar) { padding: 1.25rem; } /* Hamburger shows */ .nv-hamburger { display: flex; } /* Editor wrap full-width on mobile */ .nv-editor-wrap { max-width: 100%; } /* Share add fields stack vertically */ .nv-share-add-fields { flex-direction: column; align-items: stretch; } .nv-share-email-input { min-width: 0; } }