/* ============================================================================ * Theme: Minimal Dark (Free) * * Dark inversion of the Minimal Light theme. Near-black surface on a * barely-visible dark border, white primary text, and the user's * configured primary accent for hover and selected states. The selected * state uses a dark primary tint (primary-900 fill + primary-500 border * + inset ring) so the contrast inverts against the bright fill of the * light variant. */ .fast-fuzzy-search--minimal-dark { --ffs-border-color: var(--ffs-color-gray-700); --ffs-scrollbar-thumb: var(--ffs-color-gray-600); --ffs-scrollbar-thumb-hover: var(--ffs-color-gray-500); --ffs-kbd-bg: var(--ffs-color-gray-800); --ffs-kbd-border: var(--ffs-color-gray-700); --ffs-press-scale: 0.985; --ffs-active-scale: 0.97; --ffs-highlight-bg: var(--ffs-color-primary-900); --ffs-highlight-fg: var(--ffs-color-white); @media (prefers-reduced-motion: reduce) { --ffs-press-scale: 1; --ffs-active-scale: 1; } } /* ---- Field ---- */ .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__field { height: 48px; background: var(--ffs-color-gray-900); border: 1px solid var(--ffs-border-color); border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.3); color: var(--ffs-color-gray-100); transition: border-color var(--ffs-duration-fast) var(--ffs-easing), box-shadow var(--ffs-duration-fast) var(--ffs-easing); } .fast-fuzzy-search--minimal-dark[data-has-query="true"] .fast-fuzzy-search__field { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* ---- Input ---- */ .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__input, .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__input::placeholder { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ffs-color-gray-200); } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__input::placeholder { color: var(--ffs-color-gray-500); transition: color var(--ffs-duration-fast) var(--ffs-easing); } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__field:focus-within .fast-fuzzy-search__input::placeholder { color: var(--ffs-color-gray-600); } /* ---- Icon ---- */ .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__icon, .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__icon-frame { color: var(--ffs-color-gray-400); transition: color var(--ffs-duration-fast) var(--ffs-easing); } /* ---- Clear button ---- */ .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__clear button { background: var(--ffs-color-gray-800); color: var(--ffs-color-gray-300); transition: background-color var(--ffs-duration-fast) var(--ffs-easing), color var(--ffs-duration-fast) var(--ffs-easing), transform var(--ffs-duration-fast) var(--ffs-easing); } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__clear button:hover { background: var(--ffs-color-gray-700); color: var(--ffs-color-gray-100); } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__clear button:active { transform: scale(var(--ffs-active-scale)); } /* ---- Post-type bar ---- */ .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__post-types { background: var(--ffs-color-gray-800); border-bottom-color: var(--ffs-border-color); color: var(--ffs-color-gray-100); padding: var(--ffs-space-3) var(--ffs-space-4); } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__chip-list { gap: var(--ffs-space-2); } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__chip-button { border: 1px solid var(--ffs-color-gray-700); background: var(--ffs-color-gray-900); color: var(--ffs-color-gray-300); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); transition: background-color var(--ffs-duration-fast) var(--ffs-easing), color var(--ffs-duration-fast) var(--ffs-easing), border-color var(--ffs-duration-fast) var(--ffs-easing), transform var(--ffs-duration-fast) var(--ffs-easing); } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__chip-button:hover { background: var(--ffs-color-gray-800); color: var(--ffs-color-gray-100); border-color: var(--ffs-color-gray-600); } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__chip-button:active { transform: scale(var(--ffs-press-scale)); } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__chip-button[aria-selected="true"] { border-color: var(--ffs-color-primary-500); color: var(--ffs-color-primary-300); background: var(--ffs-color-primary-900); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 0 1px var(--ffs-color-primary-500); } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__chip-button[aria-selected="true"]:hover { background: var(--ffs-color-primary-800); } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__chip-button[disabled], .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__chip-button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; } /* ---- Context strip ---- */ .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__context { color: var(--ffs-color-gray-100); background: var(--ffs-color-gray-800); border-bottom: 1px solid var(--ffs-border-color); position: sticky; top: 0; z-index: 1; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.02); } /* ---- Panel ---- */ .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__panel { border: 1px solid var(--ffs-border-color); border-top: 0; background: var(--ffs-color-gray-900); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; font-size: 14px; line-height: 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 12px rgba(0, 0, 0, 0.25), 0 16px 48px rgba(0, 0, 0, 0.4); color: var(--ffs-color-gray-100); transition: box-shadow var(--ffs-duration) var(--ffs-easing); overflow: hidden; } /* Slight lift when the panel is open and the user is interacting */ .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__field:focus-within + .fast-fuzzy-search__panel, .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__panel:has(.fast-fuzzy-search__result-link:hover), .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__panel:has(.fast-fuzzy-search__result-link[aria-selected="true"]) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 6px 16px rgba(0, 0, 0, 0.3), 0 20px 56px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(var(--ffs-color-primary-rgb), 0.14); } /* ---- Result link ---- */ .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link { color: var(--ffs-color-gray-100); border: 1px solid transparent; border-radius: 8px; padding: var(--ffs-space-3) var(--ffs-space-4); transition: background-color var(--ffs-duration-fast) var(--ffs-easing), border-color var(--ffs-duration-fast) var(--ffs-easing), color var(--ffs-duration-fast) var(--ffs-easing), transform var(--ffs-duration-fast) var(--ffs-easing); animation: ffs-minimal-dark-row-in var(--ffs-duration) var(--ffs-easing) both; animation-delay: calc(var(--ffs-i, 0) * 18ms); } @keyframes ffs-minimal-dark-row-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link:hover { background: var(--ffs-color-gray-800); border-color: var(--ffs-color-gray-700); } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link:active { transform: scale(var(--ffs-press-scale)); } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--ffs-color-gray-900), 0 0 0 4px var(--ffs-color-primary-500); } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link[aria-selected="true"] { border-color: var(--ffs-color-primary-500); border-left-color: var(--ffs-color-primary-500); background: var(--ffs-color-primary-900); box-shadow: inset 0 0 0 1px var(--ffs-color-primary-500), 0 0 24px rgba(var(--ffs-color-primary-rgb), 0.18); } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link[aria-selected="true"]:hover { background: var(--ffs-color-primary-800); } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__result-icon-frame, .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link:hover .fast-fuzzy-search__result-icon-frame { transform: translateX(2px); } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link[disabled], .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; } /* ---- Result icon + image ---- */ .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-icon { background: var(--ffs-color-gray-800); color: var(--ffs-color-gray-300); border: 1px solid var(--ffs-color-gray-700); transition: background-color var(--ffs-duration-fast) var(--ffs-easing), color var(--ffs-duration-fast) var(--ffs-easing), border-color var(--ffs-duration-fast) var(--ffs-easing), transform var(--ffs-duration-fast) var(--ffs-easing); } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link:hover .fast-fuzzy-search__result-icon, .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__result-icon { background: var(--ffs-color-primary-500); color: var(--ffs-color-white); border-color: var(--ffs-color-primary-500); } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-image { border-radius: 8px; border: 1px solid var(--ffs-color-gray-700); transition: transform var(--ffs-duration-fast) var(--ffs-easing); } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__result-image, .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link:hover .fast-fuzzy-search__result-image { transform: scale(1.05); border-color: var(--ffs-color-primary-500); } /* ---- Result chip ---- */ .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__chip { background: var(--ffs-color-gray-800); color: var(--ffs-color-gray-300); border: 1px solid var(--ffs-color-gray-700); transition: background-color var(--ffs-duration-fast) var(--ffs-easing), color var(--ffs-duration-fast) var(--ffs-easing), border-color var(--ffs-duration-fast) var(--ffs-easing); } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link:hover .fast-fuzzy-search__chip, .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__chip { background: var(--ffs-color-primary-500); color: var(--ffs-color-white); border-color: var(--ffs-color-primary-500); } /* ---- Empty state ---- */ .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__empty { background: var(--ffs-color-gray-900); color: var(--ffs-color-gray-400); } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__empty-title { color: var(--ffs-color-gray-100); } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__empty-description { color: var(--ffs-color-gray-500); } /* ---- Keyboard footer ---- */ .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__keyboard-shortcuts { background: var(--ffs-color-gray-800); border-top-color: var(--ffs-border-color); color: var(--ffs-color-gray-400); } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__kbd { background: var(--ffs-color-gray-900); border-color: var(--ffs-color-gray-700); color: var(--ffs-color-gray-200); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); transition: background-color var(--ffs-duration-fast) var(--ffs-easing), border-color var(--ffs-duration-fast) var(--ffs-easing), transform var(--ffs-duration-fast) var(--ffs-easing); } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__keyboard-shortcuts:hover .fast-fuzzy-search__kbd { border-color: var(--ffs-color-gray-600); } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__kbd:hover { background: var(--ffs-color-gray-800); transform: translateY(-0.5px); } /* ---- View all button ---- */ .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__view-all { background: var(--ffs-color-gray-800); color: var(--ffs-color-primary-400); position: relative; overflow: hidden; transition: color var(--ffs-duration-fast) var(--ffs-easing); } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__view-all::before { content: ""; position: absolute; inset: 0; background: var(--ffs-color-primary-900); opacity: 0; transition: opacity var(--ffs-duration-fast) var(--ffs-easing); pointer-events: none; } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__view-all:hover { color: var(--ffs-color-primary-300); } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__view-all:hover::before { opacity: 1; } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__view-all:active::before { background: var(--ffs-color-primary-800); } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__view-all > * { position: relative; z-index: 1; } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__view-all-icon { transition: transform var(--ffs-duration-fast) var(--ffs-easing); } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__view-all:hover .fast-fuzzy-search__view-all-icon { transform: translateX(3px); } /* ---- Panel close button ---- */ .fast-fuzzy-search__panel-close--minimal-dark { background: var(--ffs-color-gray-900); color: var(--ffs-color-gray-100); border: 1px solid var(--ffs-color-gray-700); border-radius: var(--ffs-radius-pill); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 12px rgba(0, 0, 0, 0.35); transition: background-color var(--ffs-duration-fast) var(--ffs-easing), color var(--ffs-duration-fast) var(--ffs-easing), box-shadow var(--ffs-duration-fast) var(--ffs-easing), transform var(--ffs-duration-fast) var(--ffs-easing); } .fast-fuzzy-search__panel-close--minimal-dark:hover, .fast-fuzzy-search__panel-close--minimal-dark:focus { background: var(--ffs-color-gray-800); border-color: var(--ffs-color-gray-600); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 16px rgba(0, 0, 0, 0.4); } .fast-fuzzy-search__panel-close--minimal-dark:active { transform: scale(var(--ffs-active-scale)); } /* ---- Trigger buttons (button.php + icon-button.php) ---- * * Both the icon-only button and the full-text "Search" button share the * same surface; only the border-radius and padding differ. The lift on * hover (deeper shadow) plus the bg shift are unified into a single * :hover rule. The focus ring uses the primary accent for both buttons. */ .fast-fuzzy-search__icon-button.fast-fuzzy-search--minimal-dark, .fast-fuzzy-search__button.fast-fuzzy-search--minimal-dark { background: var(--ffs-color-gray-900); color: var(--ffs-color-gray-100); border: 1px solid var(--ffs-color-gray-700); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 12px rgba(0, 0, 0, 0.3); transition: background-color var(--ffs-duration-fast) var(--ffs-easing), border-color var(--ffs-duration-fast) var(--ffs-easing), box-shadow var(--ffs-duration-fast) var(--ffs-easing), transform var(--ffs-duration-fast) var(--ffs-easing); } .fast-fuzzy-search__icon-button.fast-fuzzy-search--minimal-dark { border-radius: var(--ffs-radius-pill); } .fast-fuzzy-search__button.fast-fuzzy-search--minimal-dark { border-radius: 10px; padding: 0 var(--ffs-space-4); } .fast-fuzzy-search__icon-button.fast-fuzzy-search--minimal-dark:hover, .fast-fuzzy-search__button.fast-fuzzy-search--minimal-dark:hover { background: var(--ffs-color-gray-800); border-color: var(--ffs-color-gray-600); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 4px rgba(0, 0, 0, 0.25), 0 8px 20px rgba(0, 0, 0, 0.35); } .fast-fuzzy-search__icon-button.fast-fuzzy-search--minimal-dark:focus-visible, .fast-fuzzy-search__button.fast-fuzzy-search--minimal-dark:focus-visible { border-color: var(--ffs-color-primary-500); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 3px rgba(var(--ffs-color-primary-rgb), 0.25); } .fast-fuzzy-search__icon-button.fast-fuzzy-search--minimal-dark[disabled], .fast-fuzzy-search__icon-button.fast-fuzzy-search--minimal-dark[aria-disabled="true"], .fast-fuzzy-search__button.fast-fuzzy-search--minimal-dark[disabled], .fast-fuzzy-search__button.fast-fuzzy-search--minimal-dark[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* ---- CTA button (inverted) ---- * * Mirrors the inverted "Join" / "Convo AI" button pattern in * media/minimal-dark.webp: solid near-white surface with dark text, * which reads as a primary CTA on a near-black page. The user's * primary color is used as a thin border + soft glow to keep the brand * present without overpowering the high-contrast surface. */ .fast-fuzzy-search__cta--minimal-dark { background: var(--ffs-color-white); color: var(--ffs-color-black); border: 1px solid var(--ffs-color-primary-500); border-radius: 10px; padding: 0 var(--ffs-space-5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 24px rgba(var(--ffs-color-primary-rgb), 0.18), 0 4px 12px rgba(0, 0, 0, 0.3); transition: background-color var(--ffs-duration-fast) var(--ffs-easing), color var(--ffs-duration-fast) var(--ffs-easing), box-shadow var(--ffs-duration-fast) var(--ffs-easing), transform var(--ffs-duration-fast) var(--ffs-easing); } .fast-fuzzy-search__cta--minimal-dark:hover { background: var(--ffs-color-gray-100); color: var(--ffs-color-black); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 32px rgba(var(--ffs-color-primary-rgb), 0.28), 0 8px 18px rgba(0, 0, 0, 0.35); transform: translateY(-0.5px); } .fast-fuzzy-search__cta--minimal-dark:focus-visible { outline: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 3px rgba(var(--ffs-color-primary-rgb), 0.35); } .fast-fuzzy-search__cta--minimal-dark:active { transform: translateY(0) scale(var(--ffs-press-scale)); } .fast-fuzzy-search__cta--minimal-dark[disabled], .fast-fuzzy-search__cta--minimal-dark[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* ---- Highlight (fuzzy match) ---- * * The fuzzy search wraps matched substrings in or * .fast-fuzzy-search__highlight. On dark surfaces we use a dark * primary tint with a brighter primary text color so the highlight * is visible without flooding the row. */ .fast-fuzzy-search--minimal-dark mark, .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__highlight { background: var(--ffs-highlight-bg); color: var(--ffs-highlight-fg); padding: 0 2px; border-radius: 3px; font-weight: 600; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link[aria-selected="true"] mark, .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__highlight { background: var(--ffs-color-primary-700); color: var(--ffs-color-white); box-shadow: 0 0 0 1px var(--ffs-color-primary-500); } /* ---- Loading skeleton ---- * * Optional class to apply to a result row while content is loading. * Uses a subtle gray shimmer that respects reduced motion. */ .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__skeleton { background: linear-gradient( 90deg, var(--ffs-color-gray-800) 0%, var(--ffs-color-gray-700) 50%, var(--ffs-color-gray-800) 100% ); background-size: 200% 100%; border-radius: 4px; color: transparent; animation: ffs-minimal-dark-shimmer 1.4s ease-in-out infinite; user-select: none; pointer-events: none; } @keyframes ffs-minimal-dark-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .fast-fuzzy-search--minimal-dark .fast-fuzzy-search__skeleton { animation: none; background: var(--ffs-color-gray-800); } }