/* ============================================================================ Docmost custom theme (injected by nginx into ) ---------------------------------------------------------------------------- Philosophy: MINIMAL. Text stays neutral graphite. A single refined accent is used ONLY for interactive/active elements (buttons, active nav, focus, hover, the logo mark). Smooth, subtle motion throughout. Rebrand in one place: change --accent (and friends) in the :root block. Apply changes: docker exec docmost-proxy nginx -s reload (then hard-refresh) ========================================================================== */ :root { /* ---------- BRAND (edit these) ---------- */ --accent: #0d9488; /* teal-600 primary accent */ --accent-hover: #0f766e; /* teal-700 hover/active */ --accent-soft: #f0fdfa; /* teal-50 subtle tint backgrounds */ --accent-soft-2: #ccfbf1; /* teal-100 hover tint */ --accent-contrast: #ffffff; /* text/icon on the accent */ /* ---------- Neutrals (text stays calm, not colored) ---------- */ --ink: #1f2933; /* primary text / titles */ --ink-muted: #6b7280; /* secondary text */ --line: #ececf0; /* hairline borders */ --surface: #ffffff; /* ---------- Shape & motion ---------- */ --r: 10px; --r-sm: 8px; --ease: cubic-bezier(.4, 0, .2, 1); --dur: .16s; /* ---- Remap Mantine primary + the "blue" ramp onto the accent ---- Docmost's primary color is blue; overriding these recolors every primary surface (buttons, active states, badges, icons) in one shot. */ --mantine-primary-color-filled: var(--accent); --mantine-primary-color-filled-hover: var(--accent-hover); --mantine-primary-color-light: var(--accent-soft); --mantine-primary-color-light-hover: var(--accent-soft-2); --mantine-primary-color-light-color: var(--accent); --mantine-primary-color-contrast: var(--accent-contrast); --mantine-color-blue-0: #f0fdfa; --mantine-color-blue-1: #ccfbf1; --mantine-color-blue-2: #99f6e4; --mantine-color-blue-3: #5eead4; --mantine-color-blue-4: #2dd4bf; --mantine-color-blue-5: #14b8a6; --mantine-color-blue-6: #0d9488; --mantine-color-blue-7: #0f766e; --mantine-color-blue-8: #115e59; --mantine-color-blue-9: #134e4a; --mantine-color-blue-filled: var(--accent); --mantine-color-blue-filled-hover: var(--accent-hover); --mantine-color-blue-light: var(--accent-soft); --mantine-color-blue-light-hover: var(--accent-soft-2); --mantine-color-blue-light-color: var(--accent); --mantine-color-blue-outline: var(--accent); --mantine-color-blue-outline-hover:var(--accent-soft); } /* ============================================================================ 1. KEEP TEXT NEUTRAL (fixes the "everything is blue" look) ============================================================================ */ .mantine-Anchor-root, a.mantine-Text-root, .mantine-AppShell-main a:not(.mantine-Button-root) { color: var(--ink); text-decoration: none; transition: color var(--dur) var(--ease); } .mantine-Anchor-root:hover, a.mantine-Text-root:hover, .mantine-AppShell-main a:not(.mantine-Button-root):hover { color: var(--accent); text-decoration: none; } /* ============================================================================ 2. SMOOTH MOTION on interactive elements ============================================================================ */ .mantine-Button-root, .mantine-ActionIcon-root, .mantine-NavLink-root, .mantine-Card-root, .mantine-Paper-root, .mantine-Tabs-tab, .mantine-Badge-root, .mantine-Input-input { transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } /* Buttons: gentle lift + press */ .mantine-Button-root[data-variant="filled"] { border-radius: var(--r-sm); } .mantine-Button-root[data-variant="filled"]:hover { background-color: var(--accent-hover); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 60%, transparent); transform: translateY(-1px); } .mantine-Button-root:active { transform: translateY(0); } /* Action icons: subtle scale */ .mantine-ActionIcon-root:hover { transform: scale(1.06); } /* ============================================================================ 3. SIDEBAR / NAV -> minimalistic with animated active state ============================================================================ */ .mantine-NavLink-root { border-radius: var(--r-sm); position: relative; } .mantine-NavLink-root:hover { background-color: var(--accent-soft); } .mantine-NavLink-root[data-active] { background-color: var(--accent-soft); color: var(--accent); } .mantine-NavLink-root[data-active]::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0; border-radius: 3px; background: var(--accent); transform: translateY(-50%); animation: navBar var(--dur) var(--ease) forwards; } @keyframes navBar { to { height: 60%; } } /* ============================================================================ 4. CARDS (e.g. "Spaces you belong to") -> hover lift ============================================================================ */ .mantine-Card-root, .mantine-Paper-root[data-with-border] { border-radius: var(--r); border: 1px solid var(--line); } a .mantine-Card-root:hover, .mantine-Card-root:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -14px rgba(15, 23, 42, .25); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); } /* ============================================================================ 5. LISTS / ROWS (e.g. "Recently updated") -> soft hover highlight ============================================================================ */ .mantine-AppShell-main table tbody tr, .mantine-AppShell-main [role="row"] { transition: background-color var(--dur) var(--ease); } .mantine-AppShell-main table tbody tr:hover, .mantine-AppShell-main [role="row"]:hover { background-color: var(--accent-soft); } /* ============================================================================ 6. INPUTS / SEARCH -> animated focus ring ============================================================================ */ .mantine-Input-input, .mantine-TextInput-input, .mantine-PasswordInput-input, .mantine-Textarea-input { border-radius: var(--r-sm); } .mantine-Input-input:focus, .mantine-TextInput-input:focus, .mantine-PasswordInput-input:focus, .mantine-Textarea-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } /* ============================================================================ 7. SURFACES: softer modals/menus, refined hairlines ============================================================================ */ .mantine-Modal-content, .mantine-Menu-dropdown, .mantine-Popover-dropdown { border-radius: var(--r); border: 1px solid var(--line); box-shadow: 0 18px 50px -20px rgba(15, 23, 42, .35); } /* ============================================================================ 7b. APP SHELL (header + sidebar) — guaranteed-present classes ============================================================================ */ .mantine-AppShell-header { background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); backdrop-filter: saturate(1.1); } .mantine-AppShell-navbar { background: #fbfbfc; border-right: 1px solid var(--line); } [data-mantine-color-scheme="dark"] .mantine-AppShell-header { background: #1a1b1e; } [data-mantine-color-scheme="dark"] .mantine-AppShell-navbar { background: #18191c; } /* ============================================================================ 8. HEADER / LOGO wordmark -> tight, minimal, neutral ============================================================================ */ [data-brand-mark] { display: inline-flex !important; align-items: center; gap: 8px; font-weight: 650; letter-spacing: -.01em; color: var(--ink); } [data-brand-mark] svg { display: block; } /* ============================================================================ 9. Custom scrollbars ============================================================================ */ * { scrollbar-width: thin; scrollbar-color: rgba(120,120,140,.4) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: rgba(120,120,140,.4); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: rgba(120,120,140,.65); background-clip: content-box; } /* ============================================================================ 10. Gentle content fade-in on first paint ============================================================================ */ @media (prefers-reduced-motion: no-preference) { .mantine-AppShell-main { animation: contentIn .35s var(--ease); } @keyframes contentIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } } /* ============================================================================ 11. Dark mode: keep neutrals readable (accent vars already apply) ============================================================================ */ [data-mantine-color-scheme="dark"] { --ink: #e5e7eb; --ink-muted: #9ca3af; --line: #2a2b31; --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent); --accent-soft-2: color-mix(in srgb, var(--accent) 26%, transparent); } /* ============================================================================ 12. Components introduced / expanded in Docmost 0.95.0 (labels, favorites, templates, AI chat, bases, personal spaces, command palette). These all use standard Mantine components, so theming the components makes the new UI inherit the look. Each rule no-ops if absent. ============================================================================ */ /* Tabs (settings, templates, bases views) -> accent active tab */ .mantine-Tabs-tab { border-radius: var(--r-sm) var(--r-sm) 0 0; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .mantine-Tabs-tab[data-active] { color: var(--accent); } .mantine-Tabs-list { --tab-border-color: var(--accent); } /* Segmented control (view switchers) */ .mantine-SegmentedControl-root { border-radius: var(--r-sm); } .mantine-SegmentedControl-indicator { border-radius: var(--r-sm); } /* Switches / toggles -> accent when on */ .mantine-Switch-input:checked + .mantine-Switch-track, .mantine-Switch-track[data-checked] { background-color: var(--accent); border-color: var(--accent); } /* Badges / labels / pills -> soft accent tint, rounded */ .mantine-Badge-root { border-radius: 999px; } /* Favorites star + other icon toggles keep the accent on active */ .mantine-ActionIcon-root[data-active], .mantine-ActionIcon-root[aria-pressed="true"] { color: var(--accent); } /* Drawer / AI-chat side panel, templates picker */ .mantine-Drawer-content { border-radius: var(--r) 0 0 var(--r); } .mantine-Drawer-header { border-bottom: 1px solid var(--line); } /* Command palette / spotlight search (Ctrl+K) */ .mantine-Spotlight-content, [class*="spotlight" i] { border-radius: var(--r); } .mantine-Spotlight-action:hover, .mantine-Spotlight-actionHovered { background-color: var(--accent-soft); } /* Tooltips -> match the graphite ink surface */ .mantine-Tooltip-tooltip { background: var(--ink); border-radius: var(--r-sm); font-weight: 500; } /* Tree / page-tree nodes in the sidebar (favorites, personal spaces) */ [data-tree-node]:hover, .mantine-AppShell-navbar [role="button"]:hover { background-color: var(--accent-soft); border-radius: var(--r-sm); } /* Chips (used in labels/filters) */ .mantine-Chip-label[data-checked] { background-color: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); } /* ============================================================================ 13. PAGE / ROUTE TRANSITIONS + smooth switches (driven by custom.js which adds .brand-route-anim on SPA navigation) ============================================================================ */ @media (prefers-reduced-motion: no-preference) { /* The main view slides + fades + unblurs in on every page change. */ .brand-route-anim { animation: routeIn .34s cubic-bezier(.22, 1, .36, 1); } @keyframes routeIn { 0% { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(6px); } 60% { filter: blur(0); } 100% { opacity: 1; transform: none; filter: blur(0); } } /* Modals / drawers / menus / popovers pop in smoothly. */ .mantine-Modal-content { animation: popIn .22s var(--ease); } .mantine-Drawer-content { animation: slideInRight .26s cubic-bezier(.22,1,.36,1); } .mantine-Menu-dropdown, .mantine-Popover-dropdown, .mantine-HoverCard-dropdown { animation: popIn .16s var(--ease); transform-origin: top; } @keyframes popIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes slideInRight { from { opacity: .4; transform: translateX(24px); } to { opacity: 1; transform: none; } } /* Tab panel content crossfades when you switch tabs. */ .mantine-Tabs-panel { animation: fadeUp .24s var(--ease); } @keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* Smooth light <-> dark theme switch (crossfade colors instead of a hard flip). */ .mantine-AppShell-main, .mantine-AppShell-header, .mantine-AppShell-navbar, .mantine-AppShell-aside, .mantine-Paper-root, .mantine-Card-root { transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); } /* Accordion / collapsible sections ease open. */ .mantine-Accordion-content { animation: fadeUp .2s var(--ease); } } /* Respect reduced-motion: no transforms/animations for those users. */ @media (prefers-reduced-motion: reduce) { .brand-route-anim { animation: none; } }