/** * Search modal styling. * High-specificity selectors to override jQuery UI defaults. */ /* Hide title */ .ks-search-modal--fullpage.ui-dialog .ui-dialog-titlebar .ui-dialog-title { display: none; } /* Position titlebar - high z-index for clickability */ .ks-search-modal--fullpage.ui-dialog .ui-dialog-titlebar { position: absolute; top: 8px; right: 8px; left: auto; background: transparent; border: 0; padding: 0; z-index: 1000; pointer-events: auto; } /* Close button - match jQuery UI specificity */ .ks-search-modal--fullpage.ui-dialog .ui-dialog-titlebar .ui-button.ui-dialog-titlebar-close { position: relative; width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0; margin: 0; background: #f5f5f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") center no-repeat; background-size: 16px 16px; border: 1px solid #ddd; border-radius: 50%; font-size: 0; color: transparent; cursor: pointer; pointer-events: auto; } /* Hide spans inside button */ .ks-search-modal--fullpage.ui-dialog .ui-dialog-titlebar .ui-button.ui-dialog-titlebar-close span { display: none; } /* Dark mode: the Scolta search UI (contrib scolta.css) defines its colors as light-only :root variables. Remap them to foundation dark tokens inside the modal and dark-style the pieces that use no variable (input, dialog surface, close button). Dark mode toggles `.dark` on . */ .dark .ks-search-modal--fullpage { --scolta-primary: var(--ks-color-primary-300); --scolta-primary-hover: var(--ks-color-primary-400); --scolta-accent: var(--ks-color-primary-400); --scolta-bg: var(--ks-color-surface-section); --scolta-card-bg: var(--ks-color-surface-card); --scolta-text: var(--ks-color-text-default); --scolta-text-muted: var(--ks-color-text-muted); --scolta-text-light: var(--ks-color-text-muted); --scolta-border: var(--ks-color-border-default); --scolta-highlight: rgba(53, 204, 169, 0.25); --scolta-summary-bg-start: var(--ks-color-surface-card); --scolta-summary-bg-mid: var(--ks-color-surface-strong); --scolta-summary-border: var(--ks-color-border-default); --scolta-badge-bg: var(--ks-color-surface-strong); } /* Dialog surface */ .dark .ks-search-modal--fullpage.ui-dialog, .dark .ks-search-modal--fullpage.ui-dialog .ui-dialog-content { background: var(--ks-color-surface-page); color: var(--ks-color-text-default); } /* Search input has no variable-driven background/color of its own */ .dark .ks-search-modal--fullpage .scolta-search-box input[type="text"], .dark .ks-search-modal--fullpage .scolta-ai-followup-input input { background: var(--ks-color-surface-card); color: var(--ks-color-text-default); } /* Close button: dark surface with a light glyph */ .dark .ks-search-modal--fullpage.ui-dialog .ui-dialog-titlebar .ui-button.ui-dialog-titlebar-close { background: var(--ks-color-surface-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") center no-repeat; background-size: 16px 16px; border-color: var(--ks-color-border-default); }