/* * Admin panel overrides * Loaded via render hook in AdminPanelProvider. * Plain CSS — no build step required. */ /* ── Fullscreen mode ──────────────────────────────────────────────────────── * * Driven by the topbar fullscreen toggle button. The .np-fullscreen class is * placed on and removes the content max-width cap. Sidebar collapse is * handled separately via Filament's $store.sidebar API. * * -------------------------------------------------------------------------*/ html.np-fullscreen .fi-main { max-width: 100% !important; } /* Collapsed sidebar (icon-only rail) should not scroll. Filament's default .fi-sidebar-nav has overflow-y: auto and scrollbar-gutter: stable applied unconditionally, which produces a wheel-scrollable rail with a reserved gutter even when there is no overflow content to reach. Suppress both in the collapsed state — the open state is unaffected. */ .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav { overflow-y: hidden; scrollbar-gutter: auto; } /* Pin the left sidebar header (logo + collapse control) to the top of the viewport so it always sits flush with the topbar to its right. Filament's .fi-sidebar uses lg:sticky h-screen on the aside, but this rule guarantees the header itself stays anchored at the top of the sidebar's flex column regardless of any flex-stretch or scroll-context quirks. The z-index keeps it painting above the scrolling .fi-sidebar-nav below it. */ .fi-sidebar-header { position: sticky; top: 0; z-index: 1; } /* Strip Filament's default sidebar-header chrome (white bg, ring, shadow) so the header blends seamlessly with the nav items beneath it instead of reading as an extension of the topbar to its right. */ .fi-sidebar-header { background: transparent; box-shadow: none; --tw-ring-shadow: 0 0 #0000; --tw-ring-offset-shadow: 0 0 #0000; } .fi-logo img { margin-right:0.5rem; } html.dark .fi-sidebar-header { background: transparent; } /* ── Page builder dark mode (editor chrome only) ──────────────────────────── * * The Vue page builder lives in `.vue-editor`. Its scoped component styles * are written for light mode only. These rules override the editor chrome * (toolbar, inspector, dropdowns, form fields) when Filament is in dark mode. * * The preview content is `.widget-preview-scope.np-site` and is deliberately * NOT touched here — the rendered preview always shows the public site styles * regardless of the admin theme, so editors see the live result. * * Specificity: `html.dark .foo` (0,2,1) beats Vue's scoped `.foo[data-v-x]` * (0,2,0) by tag specificity, so no `!important` is needed. * * -------------------------------------------------------------------------*/ /* Tokens — kept inline for grep-ability */ /* bg rgb(17 24 39) / gray-900 */ /* bg-subtle rgb(31 41 55) / gray-800 */ /* bg-hover rgb(55 65 81) / gray-700 */ /* fg rgb(229 231 235) / gray-200 */ /* fg-muted rgb(156 163 175) / gray-400 */ /* border rgb(55 65 81) / gray-700 */ /* ── Light-theme border visibility ────────────────────────────────────────── * * Filament's default rings/borders use 5–10% opacity near-black, which is * nearly invisible on average monitors. The overrides below apply only in * light mode (html:not(.dark)) so the dark theme is completely unaffected. * * gray-300 = rgb(209 213 219) — used for structural dividers (table rows) * gray-400 = rgb(156 163 175) — used for component outlines (sections, inputs) * * -------------------------------------------------------------------------*/ /* Form field input wrappers — color controlled by --np-control-border */ .fi-input-wrp { --tw-ring-color: var(--np-control-border); } /* Form field labels — color controlled by --np-form-label */ .fi-fo-field-wrp-label > span { color: var(--np-form-label); } /* Form field value text size — controlled by --np-form-input-size */ .fi-input-wrp input, .fi-input-wrp textarea, .fi-input-wrp select { font-size: var(--np-form-input-size); } /* Section / card outlines */ html:not(.dark) .fi-section { --tw-ring-color: rgb(156 163 175); /* gray-400 */ } /* Table outer container outline */ html:not(.dark) .fi-ta-ctn { --tw-ring-color: rgb(156 163 175); /* gray-400 */ } /* Table row dividers (divide-y) */ html:not(.dark) .fi-ta-row { border-color: var(--np-control-chip-border); /* gray-300 */ } /* Table header bottom border */ html:not(.dark) .fi-ta-header-cell { border-bottom-color: var(--np-control-chip-border); /* gray-300 */ } /* Fieldset / repeater borders — color controlled by --np-control-border */ .fi-fo-fieldset, .fi-fo-repeater-item { --tw-ring-color: var(--np-control-border); } /* Start Time fieldset — flex layout for precise field sizing */ #start-time-fieldset .fi-fo-component-ctn { display: flex !important; gap: 0.375rem; align-items: end; } #start-time-fieldset .fi-fo-component-ctn > * { flex: 1 1 0; min-width: 0; } /* Date picker gets more space */ #start-time-fieldset .fi-fo-component-ctn > *:first-child { flex: 2.5 1 0; } /* Colon separator — minimal fixed width */ #start-time-fieldset .fi-fo-component-ctn > *:nth-child(3) { flex: 0 0 1.25rem; text-align: center; } /* Checkbox / radio ring visibility */ html:not(.dark) .fi-checkbox-input, html:not(.dark) .fi-radio-input { --tw-ring-color: rgb(51 51 51); /* #333 — matches border treatment on other inputs */ } /* ── Trix toolbar ──────────────────────────────────────────────────────────── * * Filament replaces stock Trix toolbar with its own Blade components. * Buttons use fi-fo-rich-editor-toolbar-btn. SVG icons are h-5 w-5 (20px). * Specificity is raised by prepending .fi-fo-rich-editor-toolbar so rules win * against Filament's single-class Tailwind utilities without !important. * * -------------------------------------------------------------------------*/ /* Separator between toolbar and content — Filament uses border-gray-100 which is near-white. Gray-300 is visible without being heavy. */ .fi-fo-rich-editor-toolbar { border-bottom-color: var(--np-control-chip-border); /* gray-300 */ } /* Make the toolbar row fill full width so margin-left: auto works below */ .fi-fo-rich-editor-toolbar > div:first-child { width: 100%; } /* Push the undo/redo group to the far right */ [data-trix-button-group="history-tools"] { margin-left: auto; } /* Buttons — smaller, outlined */ .fi-fo-rich-editor-toolbar .fi-fo-rich-editor-toolbar-btn { height: 1.6rem; min-width: 1.6rem; border: 1px solid var(--np-control-chip-border); /* gray-300 */ border-radius: 4px; } /* Icons — 20% smaller */ .fi-fo-rich-editor-toolbar .fi-fo-rich-editor-toolbar-btn svg { height: 1rem; width: 1rem; } /* Hover — gentle gray fill */ .fi-fo-rich-editor-toolbar .fi-fo-rich-editor-toolbar-btn:hover { background-color: rgb(229 231 235); /* gray-200 */ } /* Active/pressed state */ .fi-fo-rich-editor-toolbar .fi-fo-rich-editor-toolbar-btn.trix-active { border-color: rgb(107 114 128); /* gray-500 */ background-color: rgb(243 244 246); /* gray-100 */ } /* ── Help slide-over ─────────────────────────────────────────────────────────*/ .help-trigger { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; color: #9ca3af; background: none; border: none; cursor: pointer; } .help-trigger:hover { color: #6b7280; } .help-trigger-icon { width: 1.25rem; height: 1.25rem; } .help-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(17, 24, 39, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.3s ease-in-out; } .help-backdrop--open { opacity: 1; pointer-events: auto; } .help-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: 50%; display: flex; flex-direction: column; background: #fff; box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15); transform: translateX(100%); transition: transform 0.3s ease-in-out; } .help-panel--open { transform: translateX(0); } @media (max-width: 768px) { .help-panel { width: 80%; } } .help-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; } .help-panel-title { font-size: 1rem; font-weight: 600; color: #111827; margin: 0; } .help-panel-close { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 0.5rem; color: #9ca3af; background: none; border: none; cursor: pointer; } .help-panel-close:hover { color: #6b7280; } .help-panel-close-icon { width: 1.25rem; height: 1.25rem; } .help-panel-body { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; font-size: 0.875rem; line-height: 1.6; color: #374151; } .help-panel-body h1, .help-panel-body h2, .help-panel-body h3 { font-weight: 600; color: #111827; margin: 1.25rem 0 0.5rem; } .help-panel-body h1 { font-size: 1.125rem; } .help-panel-body h2 { font-size: 1rem; } .help-panel-body h3 { font-size: 0.875rem; } .help-panel-body p { margin: 0 0 0.75rem; } .help-panel-body ul, .help-panel-body ol { margin: 0 0 0.75rem 1.25rem; padding: 0; } .help-panel-body li { margin-bottom: 0.25rem; } .help-panel-body strong { font-weight: 600; color: #111827; } .help-panel-body code { background: #f3f4f6; padding: 0.1rem 0.3rem; border-radius: 3px; font-size: 0.8rem; } .help-panel-body a { color: #2563eb; text-decoration: underline; } .help-panel-body a:hover { color: #1d4ed8; } html.dark .help-panel-body a { color: #60a5fa; } html.dark .help-panel-body a:hover { color: #93c5fd; } .help-panel-footer { padding: 0.75rem 1.5rem; border-top: 1px solid #e5e7eb; font-size: 0.75rem; color: #9ca3af; flex-shrink: 0; } /* ── Help search (top bar) ──────────────────────────────────────────────────*/ .help-search-container { position: relative; margin-right: 0.5rem; } .help-search-input-wrap { position: relative; display: flex; align-items: center; } .help-search-icon { position: absolute; left: 0.5rem; width: 1rem; height: 1rem; color: #9ca3af; pointer-events: none; } .help-search-input { width: 14rem; padding: 0.375rem 0.5rem 0.375rem 1.75rem; font-size: 0.8125rem; line-height: 1.25rem; border: 1px solid #d1d5db; border-radius: 0.5rem; background: #fff; color: #374151; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .help-search-input::placeholder { color: #9ca3af; } .help-search-input:focus { border-color: var(--c-500, #6366f1); box-shadow: 0 0 0 1px var(--c-500, #6366f1); } html.dark .help-search-input { background: rgb(31 41 55); border-color: rgb(75 85 99); color: #e5e7eb; } html.dark .help-search-input:focus { border-color: var(--c-500, #818cf8); box-shadow: 0 0 0 1px var(--c-500, #818cf8); } .help-search-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; margin-top: 0.25rem; min-width: 20rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 0.5rem; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); overflow: hidden; } html.dark .help-search-dropdown { background: rgb(31 41 55); border-color: rgb(75 85 99); } .help-search-result { display: block; padding: 0.5rem 0.75rem; text-decoration: none; color: inherit; border-bottom: 1px solid #f3f4f6; } .help-search-result:last-child { border-bottom: none; } .help-search-result:hover, .help-search-result--focused { background: #f9fafb; } html.dark .help-search-result { border-bottom-color: rgb(55 65 81); } html.dark .help-search-result:hover, html.dark .help-search-result--focused { background: rgb(55 65 81); } .help-search-result-header { display: flex; align-items: center; gap: 0.5rem; } .help-search-result-title { font-size: 0.8125rem; font-weight: 600; color: #111827; } html.dark .help-search-result-title { color: #f3f4f6; } .help-search-result-desc { font-size: 0.75rem; color: #6b7280; margin: 0.125rem 0 0; line-height: 1.3; } html.dark .help-search-result-desc { color: #9ca3af; } .help-search-badge { display: inline-block; padding: 0.0625rem 0.375rem; font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; border-radius: 9999px; white-space: nowrap; flex-shrink: 0; } .help-search-badge--crm { background: #dbeafe; color: #1e40af; } .help-search-badge--cms { background: #dcfce7; color: #166534; } .help-search-badge--finance { background: #fef3c7; color: #92400e; } .help-search-badge--tools { background: #e0e7ff; color: #3730a3; } .help-search-badge--settings { background: #f3e8ff; color: #6b21a8; } .help-search-badge--general { background: #f1f5f9; color: #475569; } html.dark .help-search-badge--crm { background: #1e3a5f; color: #93c5fd; } html.dark .help-search-badge--cms { background: #14532d; color: #86efac; } html.dark .help-search-badge--finance { background: #451a03; color: #fcd34d; } html.dark .help-search-badge--tools { background: #312e81; color: #a5b4fc; } html.dark .help-search-badge--settings { background: #3b0764; color: #d8b4fe; } html.dark .help-search-badge--general { background: #334155; color: #cbd5e1; } /* Help search when inside the help index page — full width */ .help-index-search .help-search-input { width: 100%; padding: 0.625rem 0.75rem 0.625rem 2.25rem; font-size: 0.9375rem; } .help-index-search .help-search-icon { left: 0.625rem; width: 1.25rem; height: 1.25rem; } .help-index-search .help-search-dropdown { min-width: 100%; } /* ── Standalone help page ───────────────────────────────────────────────────*/ .help-page-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; font-size: 0.8125rem; color: #6b7280; } .help-page-content { font-size: 0.875rem; line-height: 1.7; color: #374151; } html.dark .help-page-content { color: #d1d5db; } .help-page-content h1, .help-page-content h2, .help-page-content h3 { font-weight: 600; color: #111827; margin: 1.5rem 0 0.5rem; } html.dark .help-page-content h1, html.dark .help-page-content h2, html.dark .help-page-content h3 { color: #f3f4f6; } .help-page-content h1 { font-size: 1.25rem; } .help-page-content h2 { font-size: 1.125rem; } .help-page-content h3 { font-size: 1rem; } .help-page-content p { margin: 0 0 0.75rem; } .help-page-content ul, .help-page-content ol { margin: 0 0 0.75rem 1.25rem; padding: 0; } .help-page-content li { margin-bottom: 0.25rem; } .help-page-content strong { font-weight: 600; color: #111827; } html.dark .help-page-content strong { color: #f3f4f6; } .help-page-content code { background: #f3f4f6; padding: 0.1rem 0.3rem; border-radius: 3px; font-size: 0.8rem; } html.dark .help-page-content code { background: rgb(55 65 81); color: #e5e7eb; } .help-page-content table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-size: 0.8125rem; } .help-page-content th, .help-page-content td { padding: 0.375rem 0.625rem; border: 1px solid #e5e7eb; text-align: left; } html.dark .help-page-content th, html.dark .help-page-content td { border-color: rgb(75 85 99); } .help-page-content th { background: #f9fafb; font-weight: 600; } html.dark .help-page-content th { background: rgb(55 65 81); } .help-page-content a { color: #2563eb; text-decoration: underline; } .help-page-content a:hover { color: #1d4ed8; } html.dark .help-page-content a { color: #60a5fa; } html.dark .help-page-content a:hover { color: #93c5fd; } .help-related-article { display: block; padding: 0.625rem 0.75rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; text-decoration: none; color: inherit; margin-bottom: 0.5rem; transition: border-color 0.15s; } .help-related-article:hover { border-color: #9ca3af; } html.dark .help-related-article { border-color: rgb(75 85 99); } html.dark .help-related-article:hover { border-color: rgb(107 114 128); } .help-related-article-title { font-size: 0.8125rem; font-weight: 600; color: #111827; } html.dark .help-related-article-title { color: #f3f4f6; } .help-related-article-desc { font-size: 0.75rem; color: #6b7280; margin: 0.125rem 0 0; line-height: 1.3; } /* ── Sidebar nav scroll smoothing ────────────────────────────────────────────*/ .fi-sidebar-nav { scroll-behavior: smooth; } /* ── Page builder preview ───────────────────────────────────────────────────*/ .widget-preview-scope.np-site { min-height: auto; display: block; padding-bottom:50vh; } .widget-preview-region { position: relative; cursor: pointer; padding: 10px 0; border: 2px solid transparent; transition: border-color 0.15s ease; } .widget-preview-region:hover { border-color: rgba(99,102,241,0.3); } .widget-preview-region--selected { border-color: rgb(99,102,241) !important; } /* ── Widget preview notices & placeholders ─────────────────────────────────*/ .widget-preview-notice { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 5rem 1rem 3rem; width: 100%; min-height: 8rem; color: #9ca3af; font-size: 2rem; font-weight: 600; text-align: center; } .widget-preview-notice__label { font-size: 2.5rem; font-weight: 700; color: #6b7280; } .widget-preview-notice__message { font-size: 1.75rem; font-weight: 400; color: #9ca3af; } .widget-preview-notice--error { color: #dc2626; } .widget-preview-scope .widget-placeholder { display: flex; align-items: center; justify-content: center; min-height: 12rem; padding: 2rem; text-align: center; background: #f9fafb; border: 2px dashed #d1d5db; border-radius: 0.5rem; } .widget-preview-scope .widget-placeholder__title { margin: 0 0 0.25rem; font-size: 5rem; font-weight: 600; color: #6b7280; } .widget-preview-scope .widget-placeholder__message { margin: 0; font-size: 3rem; color: #9ca3af; } /* ── Inline text editing affordance ─────────────────────────────────────────*/ .inline-editable { outline: 2px dashed transparent; outline-offset: 2px; transition: outline-color 0.15s ease; cursor: text; border-radius: 2px; } .inline-editable:hover { outline-color: rgba(99,102,241,0.4); } .inline-editable:focus, .inline-editable:focus-within { outline-color: rgb(99,102,241); outline-style: solid; } .inline-editable--text { min-width: 2rem; } /* Empty inline-editable slots: a clickable target + muted schema-label ghost so an unfilled region is discoverable. Only present while the widget is selected (the composable adds .inline-editable then), so the unselected preview stays pixel-clean. */ .inline-editable:empty { display: block; min-height: 1.5em; } .inline-editable:empty::before { content: attr(data-config-placeholder); opacity: 0.45; font-style: italic; pointer-events: none; } /* Strip Quill's "snow" chrome so the in-place editor is visually transparent and inherits the widget's own typography/colour/alignment (true WYSIWYG). Quill (snow) is used because its CSS is already loaded globally and makes the editor usable; we only suppress its box. */ .inline-editable .ql-container, .inline-editable .ql-container.ql-snow { border: 0; background: transparent; font: inherit; color: inherit; /* Quill snow forces height:100% on container+editor, so the editor fills the widget's full box instead of shrink-wrapping like the original element — that is the "hop" (a flex-centred compact box becomes a full-height top-left block). Let it shrink-wrap so the widget's own centring/layout positions it identically. */ height: auto; } .inline-editable .ql-editor { padding: 0; color: inherit; line-height: inherit; text-align: inherit; background: transparent; height: auto; min-height: 0; overflow: visible; } .inline-editable .ql-editor.ql-blank::before { font-style: italic; opacity: 0.45; left: 0; right: 0; color: inherit; } /* ── Control-bar visual tokens (session 197) ──────────────────────────────*/ /* Shared vocabulary for compact admin control surfaces: the Quill toolbar, * the ColorPicker primitive, and any future toolbars/chip groups. Consume * via var(--np-control-*). Light values are the base; dark overrides live * in the .dark block below. */ :root { --np-control-bar-bg: #fafbfc; --np-control-group-bg: #fafbfc; --np-control-border: #d9d9d9; --np-control-chip-border: #d1d5db; --np-control-border-hover: #9ca3af; --np-control-border-active: #6b7280; --np-control-hover-tint: rgba(17, 24, 39, 0.06); --np-control-active-bg: #e5e7eb; --np-control-active-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08); --np-control-icon-default: #4b5563; --np-control-icon-active: #1f2937; --np-control-chip-bg: #ffffff; --np-control-chip-text: #374151; --np-control-chip-text-active: #111827; --np-control-menu-bg: #ffffff; --np-control-menu-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); --np-control-radius: 4px; --np-control-radius-sm: 3px; --np-control-transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease; --np-form-label: #95b7d9; /* gray-700 */ --np-form-input-size: 1rem; /* 14px — Filament default at sm: viewport */ } .dark { --np-control-bar-bg: rgb(17 24 39); --np-control-group-bg: rgb(31 41 55); --np-control-border: rgb(55 65 81); --np-control-chip-border: rgb(75 85 99); --np-control-border-hover: rgb(99 102 241); --np-control-border-active: rgb(129 140 248); --np-control-hover-tint: rgba(255, 255, 255, 0.06); --np-control-active-bg: rgb(55 65 81); --np-control-active-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); --np-control-icon-default: rgb(209 213 219); --np-control-icon-active: rgb(243 244 246); --np-control-chip-bg: rgb(31 41 55); --np-control-chip-text: rgb(209 213 219); --np-control-chip-text-active: rgb(243 244 246); --np-control-menu-bg: rgb(31 41 55); --np-control-menu-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); --np-form-label: rgb(229 231 235); /* gray-200 */ } /* ── Quill toolbar visual language (session 197) ──────────────────────────*/ /* Reference: /mnt/e/Clients/nonprofitcrm/test_import_data/wysiwyg toolbar.jpg * Two-row compact toolbar, light-grey chrome, grouped buttons, chip-shaped * header dropdown. Maps Quill's DOM to the control-bar token vocabulary * above — all colour/radius/transition values route through --np-control-*. */ .ql-toolbar.ql-snow { padding: 5px 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 4px; } .ql-container.ql-snow { border-color: var(--np-control-border); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .ql-toolbar.ql-snow .ql-formats { display: inline-flex; align-items: center; gap: 0; margin: 0; padding: 0; } /* Group frames — lighter fill than the toolbar strip, thin border, small * radius. Covers: * • multi-button groups (B/I/U/S, lists, link+image) * • single-button groups (blockquote, clean) * • icon-picker groups (colour + background, align) * Text-based picker groups (header) keep their own chip chrome — no frame. */ .ql-toolbar.ql-snow .ql-formats:not(:has(> .ql-header, > .ql-font, > .ql-size)) { background: var(--np-control-group-bg); border: 1px solid var(--np-control-border); border-radius: var(--np-control-radius); padding: 1px; } .ql-toolbar.ql-snow button { width: 28px; height: 24px; padding: 3px 5px; border: none; border-radius: var(--np-control-radius-sm); background: transparent; display: inline-flex; align-items: center; justify-content: center; transition: var(--np-control-transition); } .ql-toolbar.ql-snow button:hover { background: var(--np-control-hover-tint); } .ql-toolbar.ql-snow button.ql-active { background: var(--np-control-active-bg); box-shadow: var(--np-control-active-shadow); } .ql-toolbar.ql-snow .ql-stroke { stroke: var(--np-control-icon-default); } .ql-toolbar.ql-snow .ql-fill { fill: var(--np-control-icon-default); } .ql-toolbar.ql-snow button:hover .ql-stroke, .ql-toolbar.ql-snow button.ql-active .ql-stroke { stroke: var(--np-control-icon-active); } .ql-toolbar.ql-snow button:hover .ql-fill, .ql-toolbar.ql-snow button.ql-active .ql-fill { fill: var(--np-control-icon-active); } /* Text-picker chip — Format / Styles dropdown trigger. */ .ql-toolbar.ql-snow .ql-picker { color: var(--np-control-chip-text); height: 26px; display: inline-flex; align-items: center; } .ql-toolbar.ql-snow .ql-picker-label { padding: 0 22px 0 10px; border: 1px solid var(--np-control-chip-border); border-radius: var(--np-control-radius); background: var(--np-control-chip-bg); height: 26px; display: inline-flex; align-items: center; line-height: 1; position: relative; transition: var(--np-control-transition); } .ql-toolbar.ql-snow .ql-picker-label:hover { border-color: var(--np-control-border-hover); color: var(--np-control-chip-text-active); } .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label, .ql-toolbar.ql-snow .ql-picker.ql-active .ql-picker-label { border-color: var(--np-control-border-active); color: var(--np-control-chip-text-active); box-shadow: var(--np-control-active-shadow); } /* Replace Quill's default two-triangle caret with a single chevron — scoped * to text-based pickers (header / font / size) only. Uses currentColor so * it tracks the chip's text colour across rest / hover / expanded. */ .ql-toolbar.ql-snow .ql-header .ql-picker-label svg, .ql-toolbar.ql-snow .ql-font .ql-picker-label svg, .ql-toolbar.ql-snow .ql-size .ql-picker-label svg { display: none; } .ql-toolbar.ql-snow .ql-header .ql-picker-label::after, .ql-toolbar.ql-snow .ql-font .ql-picker-label::after, .ql-toolbar.ql-snow .ql-size .ql-picker-label::after { content: ''; position: absolute; right: 7px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translate(0, -75%) rotate(45deg); pointer-events: none; opacity: 0.7; } .ql-toolbar.ql-snow .ql-header.ql-picker { width: auto; min-width: 96px; } /* Icon-based pickers (align, colour, background) sit inside a framed group, * so their labels behave like buttons — transparent fill, subtle hover tint, * pressed fill when expanded. No own chip chrome. */ .ql-toolbar.ql-snow .ql-align.ql-picker .ql-picker-label, .ql-toolbar.ql-snow .ql-color-picker .ql-picker-label, .ql-toolbar.ql-snow .ql-icon-picker .ql-picker-label { width: 28px; height: 24px; padding: 0 4px; background: transparent; border: none; border-radius: var(--np-control-radius-sm); box-shadow: none; } .ql-toolbar.ql-snow .ql-align.ql-picker .ql-picker-label:hover, .ql-toolbar.ql-snow .ql-color-picker .ql-picker-label:hover, .ql-toolbar.ql-snow .ql-icon-picker .ql-picker-label:hover { background: var(--np-control-hover-tint); } .ql-toolbar.ql-snow .ql-align.ql-picker.ql-expanded .ql-picker-label, .ql-toolbar.ql-snow .ql-color-picker.ql-expanded .ql-picker-label, .ql-toolbar.ql-snow .ql-icon-picker.ql-expanded .ql-picker-label { background: var(--np-control-active-bg); box-shadow: var(--np-control-active-shadow); } .ql-toolbar.ql-snow .ql-picker-options { background: var(--np-control-menu-bg); border-color: var(--np-control-border); border-radius: var(--np-control-radius); box-shadow: var(--np-control-menu-shadow); } /* ── Quill editor dark mode — residuals that don't flow through tokens ──*/ /* Most dark-mode behaviour comes free via the token overrides. These rules * cover editor-body colours and Quill tooltip (link-edit) which sit outside * the control-bar vocabulary. */ .dark .ql-container.ql-snow { background: var(--np-control-group-bg); } .dark .ql-editor { color: rgb(229 231 235); } .dark .ql-editor.ql-blank::before { color: rgb(107 114 128); } .dark .ql-snow .ql-picker-item:hover, .dark .ql-snow .ql-picker-item.ql-selected { color: rgb(165 180 252); } .dark .ql-snow .ql-tooltip { background: var(--np-control-menu-bg); border-color: var(--np-control-border); color: rgb(209 213 219); box-shadow: 0 1px 3px rgba(0, 0, 0, .4); } .dark .ql-snow .ql-tooltip input[type=text] { background: var(--np-control-bar-bg); border-color: var(--np-control-border); color: rgb(229 231 235); } /* ── Quill list rendering — bullet/number markers + indent ─────────────*/ /* Quill 1.x renders list markers via ::before counter pseudo-elements on * every
  • . A CSS reset upstream (Tailwind preflight + modern-normalize) * clears `list-style` and `padding` on