/** * Fast Live Search — front-end styles * * All rules are scoped to the .fls / .fls__modal namespace so nothing leaks * into the theme. Design tokens are custom properties on :root — override them * in your theme CSS (or Appearance > Customize > Additional CSS) instead of * fighting specificity. * * Layers: * 1. Tokens 6. Modal mode * 2. Utilities 7. Expand mode (slide-in) * 3. Input field 8. Filter tabs / chips / recent / pinned * 4. Results panel 9. Responsive * 5. Badges 10. Fallbacks: no-backdrop-filter, dark, reduced motion * * @package FastLiveSearch * @since 1.2.0 Frosted-glass surfaces + expand mode. */ /* ------------------------------------------------------------------------- * 1. Tokens * ---------------------------------------------------------------------- */ /* Tokens live on :root, not on .fls — the modal overlay is re-parented to at runtime and would otherwise lose them. */ :root { --fls-accent: #2563eb; --fls-accent-soft: rgba(37, 99, 235, .10); --fls-accent-ring: rgba(37, 99, 235, .18); /* Opaque fallbacks. Used verbatim when backdrop-filter is unsupported. */ --fls-bg: #ffffff; --fls-fg: #0f172a; /* Slightly darker than a typical muted grey: secondary text has to stay legible over an arbitrary, possibly busy blurred backdrop. */ --fls-muted: #55606f; /* Glass surfaces. */ --fls-glass: rgba(255, 255, 255, .75); --fls-glass-strong: rgba(255, 255, 255, .86); --fls-blur: 16px; --fls-saturate: 165%; /* Hairlines: a dark hairline on light glass, plus a bright inner highlight along the top edge — the detail that sells the "pane of glass" read. */ --fls-border: rgba(15, 23, 42, .09); --fls-border-hi: rgba(255, 255, 255, .55); --fls-hover: rgba(15, 23, 42, .055); --fls-chip: rgba(15, 23, 42, .05); --fls-chip-solid: rgba(255, 255, 255, .75); --fls-radius: 14px; --fls-radius-sm: 10px; --fls-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -6px rgba(16, 24, 40, .16), 0 24px 48px -16px rgba(16, 24, 40, .22); --fls-field-h: 46px; --fls-trigger-size: 44px; --fls-expand-width: 680px; --fls-expand-dur: .55s; --fls-ease: cubic-bezier(.22, .8, .36, 1); --fls-font: inherit; } /* NOTE: the wrapper deliberately does NOT set `color`. * * It used to set `color: var(--fls-fg)`, which meant a visitor whose OS was in * dark mode got a near-white icon — on a light theme header that is a white * icon on a white background, i.e. an apparently blank widget. The icon-only * modes (modal, expand) vanished completely; inline mode survived because its * field has its own background and border. * * The trigger must inherit the THEME's text colour. Only surfaces that paint * their own background (field, dropdown, dialog) get the plugin palette. */ .fls, .fls__modal { position: relative; display: block; font-family: var(--fls-font, inherit); box-sizing: border-box; } /* Surfaces own their foreground colour, because they own their background. */ .fls__field, .fls__panel, .fls__dialog { color: var(--fls-fg, #0f172a); } /* Any icon we ship is a fixed-size, stroke-only glyph. Themes that blanket style `svg { width: 100%; fill: currentColor }` must not be able to inflate, collapse or ink-fill it. */ .fls svg, .fls__modal svg { flex: 0 0 auto; fill: none; max-width: none; max-height: none; vertical-align: middle; } .fls *, .fls *::before, .fls *::after, .fls__modal *, .fls__modal *::before, .fls__modal *::after { box-sizing: border-box; } /* ------------------------------------------------------------------------- * 2. Utilities * ---------------------------------------------------------------------- */ .fls__sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* The shared glass recipe. Applied to the field, the dropdown and the modal dialog so every surface refracts its backdrop identically. */ .fls__field, .fls__panel { background: var(--fls-glass, rgba(255, 255, 255, .75)); -webkit-backdrop-filter: blur(var(--fls-blur, 16px)) saturate(var(--fls-saturate, 165%)); backdrop-filter: blur(var(--fls-blur, 16px)) saturate(var(--fls-saturate, 165%)); border: 1px solid var(--fls-border, rgba(15, 23, 42, .09)); } /* ------------------------------------------------------------------------- * 3. Input field * ---------------------------------------------------------------------- */ .fls__field { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: var(--fls-field-h, 46px); margin: 0; padding: 0 8px 0 12px; border-radius: var(--fls-radius, 14px); box-shadow: inset 0 1px 0 var(--fls-border-hi, rgba(255, 255, 255, .55)), 0 1px 2px rgba(16, 24, 40, .04), 0 6px 20px -8px rgba(16, 24, 40, .18); transition: border-color .18s ease, box-shadow .18s ease; } .fls__field:focus-within { border-color: var(--fls-accent-ring, rgba(37, 99, 235, .18)); /* fallback */ border-color: color-mix(in srgb, var(--fls-accent, #2563eb) 45%, transparent); box-shadow: inset 0 1px 0 var(--fls-border-hi, rgba(255, 255, 255, .55)), 0 0 0 3px var(--fls-accent-ring, rgba(37, 99, 235, .18)), 0 8px 26px -8px rgba(16, 24, 40, .22); } .fls__field-icon { display: inline-flex; flex: 0 0 auto; color: var(--fls-muted, #55606f); pointer-events: none; } .fls__input { flex: 1 1 auto; width: 100%; min-width: 0; height: calc(var(--fls-field-h, 46px) - 2px); padding: 0; font: inherit; font-size: 15px; line-height: 1.4; letter-spacing: -.006em; color: var(--fls-fg, #0f172a); background: transparent; border: 0; outline: none; box-shadow: none; appearance: none; -webkit-appearance: none; } .fls__input::placeholder { color: var(--fls-muted, #55606f); opacity: 1; } /* Typed text must never be invisible. * * Some themes reset `input { color: inherit }` (or paint the field via * `-webkit-text-fill-color`, which wins over `color` on WebKit/Blink) inside a * header whose own text colour is white. In expand mode the bar is overlaid on * that header, so the field inherited white-on-white: the query ran and results * rendered, but the characters were unreadable. * * The !important here is deliberate rather than lazy: it guards legibility of * user input against arbitrary theme resets. It still resolves through * --fls-fg, so the dark-scheme palette below — and any token override a site * makes — keeps working. */ .fls__input, .fls--expand .fls__input { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; caret-color: #2563eb !important; opacity: 1 !important; } /* Placeholders follow the same reasoning, one step muted. */ .fls__input::placeholder, .fls--expand .fls__input::placeholder { color: #55606f !important; -webkit-text-fill-color: #55606f !important; opacity: 1 !important; } /* Kill the native WebKit clear button — we ship our own. */ .fls__input::-webkit-search-decoration, .fls__input::-webkit-search-cancel-button, .fls__input::-webkit-search-results-button, .fls__input::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; } .fls__clear, .fls__close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 30px; height: 30px; padding: 0; color: var(--fls-muted, #55606f); background: transparent; border: 0; border-radius: 999px; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .fls__clear:hover, .fls__close:hover { color: var(--fls-fg, #0f172a); background: var(--fls-hover, rgba(15, 23, 42, .055)); } .fls__clear:focus-visible, .fls__close:focus-visible { outline: 2px solid var(--fls-accent, #2563eb); outline-offset: 1px; } .fls__clear[hidden] { display: none; } /* Spinner */ .fls__spinner { flex: 0 0 auto; width: 16px; height: 16px; border: 2px solid var(--fls-border, rgba(15, 23, 42, .09)); border-top-color: var(--fls-accent, #2563eb); border-radius: 50%; animation: fls-spin .6s linear infinite; } .fls__spinner[hidden] { display: none; } @keyframes fls-spin { to { transform: rotate(360deg); } } /* ------------------------------------------------------------------------- * 4. Results panel * ---------------------------------------------------------------------- */ .fls__panel { position: absolute; z-index: 999; top: calc(100% + 8px); left: 0; right: 0; max-height: min(70vh, 520px); overflow-y: auto; overscroll-behavior: contain; border-radius: var(--fls-radius, 14px); box-shadow: inset 0 1px 0 var(--fls-border-hi, rgba(255, 255, 255, .55)), var(--fls-shadow, 0 8px 24px -6px rgba(16, 24, 40, .18)); animation: fls-pop .16s var(--fls-ease, cubic-bezier(.22, .8, .36, 1)); } .fls__panel[hidden] { display: none; } @keyframes fls-pop { from { opacity: 0; transform: translateY(-6px) scale(.995); } to { opacity: 1; transform: none; } } .fls__list { margin: 0; padding: 6px; list-style: none; } .fls__list:empty { display: none; } /* --- Result row --- */ .fls__item { display: flex; align-items: center; gap: 12px; padding: 8px; color: inherit; text-decoration: none; border-radius: var(--fls-radius-sm, 10px); transition: background-color .12s ease; } .fls__item:hover, .fls__item.is-active { background: var(--fls-hover, rgba(15, 23, 42, .055)); } .fls__item:focus-visible { outline: 2px solid var(--fls-accent, #2563eb); outline-offset: -2px; } .fls__thumb { flex: 0 0 auto; width: 44px; height: 44px; object-fit: cover; background: var(--fls-chip, rgba(15, 23, 42, .05)); border: 1px solid var(--fls-border, rgba(15, 23, 42, .09)); border-radius: 10px; } .fls__thumb--empty { display: flex; align-items: center; justify-content: center; color: var(--fls-muted, #55606f); font-size: 15px; font-weight: 600; text-transform: uppercase; } .fls__body { flex: 1 1 auto; min-width: 0; } .fls__title { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; letter-spacing: -.006em; color: var(--fls-fg, #0f172a); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .fls__title mark { padding: 0; color: inherit; font-weight: 700; background: var(--fls-accent-soft, rgba(37, 99, 235, .10)); /* fallback */ background: color-mix(in srgb, var(--fls-accent, #2563eb) 18%, transparent); border-radius: 3px; } .fls__sub { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--fls-muted, #55606f); } .fls__price { font-weight: 600; color: var(--fls-fg, #0f172a); } .fls__price del { margin-right: 4px; font-weight: 400; color: var(--fls-muted, #55606f); } .fls__price ins { text-decoration: none; } /* --- Status / empty state --- */ .fls__status { padding: 22px 16px; font-size: 14px; text-align: center; color: var(--fls-muted, #55606f); } .fls__status[hidden] { display: none; } /* --- View all --- */ .fls__viewall { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; font-size: 13px; font-weight: 600; color: var(--fls-accent, #2563eb); text-decoration: none; border-top: 1px solid var(--fls-border, rgba(15, 23, 42, .09)); border-radius: 0 0 var(--fls-radius, 14px) var(--fls-radius, 14px); transition: background-color .12s ease; } .fls__viewall:hover, .fls__viewall.is-active { background: var(--fls-hover, rgba(15, 23, 42, .055)); } .fls__viewall[hidden] { display: none; } /* ------------------------------------------------------------------------- * 5. Badges * ---------------------------------------------------------------------- */ .fls__badge { flex: 0 0 auto; padding: 2px 8px; font-size: 11px; font-weight: 600; line-height: 1.6; letter-spacing: .01em; white-space: nowrap; border-radius: 999px; border: 1px solid transparent; } .fls__badge--product { color: var(--fls-accent, #2563eb); background: var(--fls-accent-soft, rgba(37, 99, 235, .10)); /* fallback */ background: color-mix(in srgb, var(--fls-accent, #2563eb) 12%, transparent); border-color: var(--fls-accent-ring, rgba(37, 99, 235, .18)); /* fallback */ border-color: color-mix(in srgb, var(--fls-accent, #2563eb) 24%, transparent); } .fls__badge--post { color: var(--fls-muted, #55606f); background: var(--fls-chip, rgba(15, 23, 42, .05)); border-color: var(--fls-border, rgba(15, 23, 42, .09)); } /* ------------------------------------------------------------------------- * 6. Modal mode * ---------------------------------------------------------------------- */ /* The trigger is the entire visible surface of modal and expand mode, so it is * hardened against every way a host theme can make an element disappear: * literal px min-box (survives unresolved custom properties), explicit * visibility/opacity, and an inherited colour that always matches the header. */ .fls__trigger { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; box-sizing: border-box; width: var(--fls-trigger-size, 40px); height: var(--fls-trigger-size, 40px); min-width: 24px; min-height: 24px; padding: 0; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 999px; cursor: pointer; opacity: 1; visibility: visible; overflow: visible; transition: background-color .18s ease, border-color .18s ease, opacity .18s ease, transform .18s var(--fls-ease, cubic-bezier(.22, .8, .36, 1)); } .fls__trigger:hover { background: var(--fls-hover, rgba(15, 23, 42, .055)); } .fls__trigger:focus-visible { outline: none; border-color: var(--fls-accent, #2563eb); box-shadow: 0 0 0 3px var(--fls-accent-ring, rgba(37, 99, 235, .18)); } .fls__modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 16px; } .fls__modal[hidden] { display: none; } .fls__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .34); -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); animation: fls-fade .18s ease-out; } .fls__dialog { position: relative; width: 100%; max-width: 620px; animation: fls-rise .22s var(--fls-ease, cubic-bezier(.22, .8, .36, 1)); } .fls__dialog .fls__field { --fls-field-h: 54px; background: var(--fls-glass-strong, rgba(255, 255, 255, .86)); box-shadow: inset 0 1px 0 var(--fls-border-hi, rgba(255, 255, 255, .55)), var(--fls-shadow, 0 8px 24px -6px rgba(16, 24, 40, .18)); } .fls__dialog .fls__panel { position: static; margin-top: 10px; max-height: min(60vh, 460px); background: var(--fls-glass-strong, rgba(255, 255, 255, .86)); } @keyframes fls-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes fls-rise { from { opacity: 0; transform: translateY(-10px) scale(.99); } to { opacity: 1; transform: none; } } /* Locks background scroll while the overlay is open (class set on ). */ .fls-modal-open { overflow: hidden; } /* Both icon-only modes are inline-level boxes that centre their trigger and never grow or shrink inside a flex/grid header. */ .fls--modal, .fls--expand { display: inline-flex; align-items: center; justify-content: center; position: relative; flex: 0 0 auto; vertical-align: middle; opacity: 1; visibility: visible; } /* ------------------------------------------------------------------------- * 7. Expand mode — slide-in from the right * ---------------------------------------------------------------------- * * Zero layout shift by construction: * * .fls--expand fixed footprint, exactly the size of the icon button. * This box NEVER changes size, so no sibling in the header * can be pushed, bounced or resized. * .fls__expander position:absolute, right-anchored, already at its FULL * width at rest. Out of flow ⇒ invisible to siblings. * .fls__expander-clip * the only animated element. Animates clip-path / opacity / * transform — all compositor properties, zero layout, zero * paint invalidation of the surrounding header. * * The clip lives on an inner wrapper rather than on .fls__expander itself so it * only ever clips the bar; the results dropdown hangs outside that box and * must not be cut off. * ---------------------------------------------------------------------- */ .fls--expand { /* The reserved footprint. * * min-* rather than width/height: the trigger stays IN FLOW (see below), so * the wrapper is sized by a real child. Even if every custom property in * this file failed to resolve, the box could not collapse. */ min-width: var(--fls-trigger-size, 40px); min-height: var(--fls-trigger-size, 40px); --fls-expand-width: 640px; } .fls--expand.is-expanded { /* Lift above sibling nav items once the bar overlays them. */ z-index: 999; } /* Deliberately NOT absolutely positioned. * * When it was `position: absolute; inset: 0`, the wrapper had no in-flow child; * if --fls-trigger-size did not resolve the wrapper collapsed to ~0x0 and took * the trigger with it. In flow, the button's own box guarantees the footprint, * and because that box never changes size the zero-layout-shift property is * unaffected. */ .fls--expand .fls__trigger { position: relative; z-index: 2; } .fls--expand.is-expanded .fls__trigger { opacity: 0; transform: scale(.88); pointer-events: none; } .fls__expander { position: absolute; top: 50%; right: 0; z-index: 1; width: 550px !important; max-width: calc(100vw - 24px); transform: translateY(-50%); /* visibility (not display) so the collapsed bar leaves the tab order and the accessibility tree without breaking the transition. Delayed on close so the element stays visible for the duration of the collapse. */ visibility: hidden; transition: visibility 0s linear var(--fls-expand-dur, .34s); } .fls--expand.is-expanded .fls__expander { visibility: visible; transition-delay: 0s; } .fls__expander-clip { opacity: 0; transform: translateX(8px); /* Collapsed: everything left of the icon is clipped away, with a pill radius so the sliver that remains reads as the round icon button. */ clip-path: inset(0 0 0 calc(100% - var(--fls-trigger-size, 40px)) round 999px); transition: clip-path var(--fls-expand-dur, .34s) var(--fls-ease, cubic-bezier(.22, .8, .36, 1)), transform var(--fls-expand-dur, .34s) var(--fls-ease, cubic-bezier(.22, .8, .36, 1)), opacity .2s ease; } .fls--expand.is-expanded .fls__expander-clip { opacity: 1; transform: translateX(0); clip-path: inset(0 0 0 0 round var(--fls-radius, 14px)); } /* Promote to its own compositor layer only while it is actually moving. */ .fls--expand.is-animating .fls__expander-clip { will-change: clip-path, transform, opacity; } /* The dropdown belongs to the bar, not to the 40px footprint. */ .fls--expand .fls__panel { top: calc(100% + 8px); } /* Right-to-left sites mirror the whole gesture. */ [dir="rtl"] .fls__expander { right: auto; left: 0; } [dir="rtl"] .fls__expander-clip { transform: translateX(-8px); clip-path: inset(0 calc(100% - var(--fls-trigger-size, 40px)) 0 0 round 999px); } [dir="rtl"] .fls--expand.is-expanded .fls__expander-clip { transform: translateX(0); clip-path: inset(0 0 0 0 round var(--fls-radius, 14px)); } /* ------------------------------------------------------------------------- * 8. Filter tabs, chip groups, recent searches, pinned redirect * ---------------------------------------------------------------------- */ .fls__tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 10px 4px; border-bottom: 1px solid var(--fls-border, rgba(15, 23, 42, .09)); } .fls__tabs[hidden] { display: none; } .fls__tab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; font: inherit; font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--fls-muted, #55606f); background: transparent; border: 1px solid var(--fls-border, rgba(15, 23, 42, .09)); border-radius: 999px; cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, border-color .12s ease; } .fls__tab:hover { color: var(--fls-fg, #0f172a); background: var(--fls-hover, rgba(15, 23, 42, .055)); } .fls__tab.is-active { color: #fff; background: var(--fls-accent, #2563eb); border-color: var(--fls-accent, #2563eb); box-shadow: 0 2px 8px -2px var(--fls-accent-ring, rgba(37, 99, 235, .18)); } .fls__tab:focus-visible { outline: 2px solid var(--fls-accent, #2563eb); outline-offset: 2px; } .fls__tab-count { padding: 0 5px; font-size: 11px; font-weight: 700; line-height: 1.55; background: var(--fls-chip, rgba(15, 23, 42, .05)); border-radius: 999px; } .fls__tab.is-active .fls__tab-count { color: #fff; background: rgba(255, 255, 255, .24); } /* --- Grouped sections (categories, recent) --- */ .fls__group, .fls__recent { padding: 10px 12px 4px; } .fls__group[hidden], .fls__recent[hidden] { display: none; } .fls__group + .fls__list:not(:empty), .fls__recent + .fls__list:not(:empty) { border-top: 1px solid var(--fls-border, rgba(15, 23, 42, .09)); margin-top: 6px; } .fls__group-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--fls-muted, #55606f); } .fls__linkbtn { padding: 0; font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--fls-accent, #2563eb); background: none; border: 0; cursor: pointer; } .fls__linkbtn:hover { text-decoration: underline; } /* --- Chips --- */ .fls__chips { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 6px; } .fls__chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 11px; font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.5; color: var(--fls-fg, #0f172a); text-decoration: none; background: var(--fls-chip, rgba(15, 23, 42, .05)); border: 1px solid var(--fls-border, rgba(15, 23, 42, .09)); border-radius: 999px; cursor: pointer; transition: background-color .12s ease, border-color .12s ease; } .fls__chip:hover, .fls__chip.is-active { background: var(--fls-accent-soft, rgba(37, 99, 235, .10)); /* fallback */ background: color-mix(in srgb, var(--fls-accent, #2563eb) 14%, transparent); border-color: var(--fls-accent-ring, rgba(37, 99, 235, .18)); /* fallback */ border-color: color-mix(in srgb, var(--fls-accent, #2563eb) 32%, transparent); } .fls__chip:focus-visible { outline: 2px solid var(--fls-accent, #2563eb); outline-offset: 1px; } .fls__chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fls__chip-text mark { padding: 0; color: inherit; font-weight: 800; background: transparent; text-decoration: underline; text-underline-offset: 2px; } .fls__chip-count { padding: 0 6px; font-size: 11px; font-weight: 700; color: var(--fls-muted, #55606f); background: var(--fls-chip-solid, rgba(255, 255, 255, .75)); border-radius: 999px; } .fls__chip-icon { font-size: 12px; line-height: 1; color: var(--fls-muted, #55606f); } .fls__chip--recent { font-weight: 500; } /* --- Pinned redirect suggestion --- */ .fls__pinned { padding: 8px 8px 0; } .fls__pinned[hidden] { display: none; } .fls__pin { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: var(--fls-fg, #0f172a); text-decoration: none; background: var(--fls-accent-soft, rgba(37, 99, 235, .10)); /* fallback */ background: color-mix(in srgb, var(--fls-accent, #2563eb) 10%, transparent); border: 1px solid var(--fls-accent-ring, rgba(37, 99, 235, .18)); /* fallback */ border: 1px solid color-mix(in srgb, var(--fls-accent, #2563eb) 28%, transparent); border-radius: var(--fls-radius-sm, 10px); transition: background-color .12s ease; } .fls__pin:hover, .fls__pin.is-active { background: var(--fls-accent-ring, rgba(37, 99, 235, .18)); /* fallback */ background: color-mix(in srgb, var(--fls-accent, #2563eb) 18%, transparent); } .fls__pin-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 26px; height: 26px; font-size: 13px; color: #fff; background: var(--fls-accent, #2563eb); border-radius: 8px; } .fls__pin-body { display: flex; flex-direction: column; min-width: 0; } .fls__pin-label { font-size: 13px; font-weight: 600; line-height: 1.35; } .fls__pin-term { font-size: 12px; line-height: 1.4; color: var(--fls-muted, #55606f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Hidden rows must stay hidden even though .fls__row has no display rule. */ .fls__row[hidden], .fls__list[hidden] { display: none; } /* ------------------------------------------------------------------------- * 9. Responsive * ---------------------------------------------------------------------- */ @media (max-width: 600px) { .fls__modal { padding: 0; } .fls__dialog { max-width: none; height: 100%; padding: 12px; background: var(--fls-glass-strong, rgba(255, 255, 255, .86)); } .fls__dialog .fls__panel { max-height: calc(100vh - 100px); border: 0; box-shadow: none; } /* Never let the expanding bar run off-screen on a narrow viewport. */ .fls__expander { width: min(var(--fls-expand-width, 340px), calc(100vw - 24px)); } } /* ------------------------------------------------------------------------- * 10. Fallbacks * ---------------------------------------------------------------------- */ /* No backdrop-filter (older Firefox, Chrome with the feature disabled): fall back to opaque surfaces so text contrast never degrades. */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .fls__field, .fls__panel, .fls__dialog .fls__field, .fls__dialog .fls__panel { background: var(--fls-bg, #ffffff); } .fls__backdrop { background: rgba(15, 23, 42, .55); } } /* Users who ask for less transparency get flat, fully opaque chrome. Blur is also the most expensive thing this plugin paints — honouring the preference is both an accessibility win and a performance one. */ @media (prefers-reduced-transparency: reduce) { .fls__field, .fls__panel, .fls__dialog .fls__field, .fls__dialog .fls__panel { background: var(--fls-bg, #ffffff); -webkit-backdrop-filter: none; backdrop-filter: none; } .fls__backdrop { background: rgba(15, 23, 42, .6); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* Opt-out switch rendered by the plugin when "Frosted glass" is disabled. */ .fls--flat .fls__field, .fls--flat .fls__panel { background: var(--fls-bg, #ffffff); -webkit-backdrop-filter: none; backdrop-filter: none; } /* --- Dark mode --- */ @media (prefers-color-scheme: dark) { :root { --fls-bg: #121826; --fls-fg: #f3f5f9; --fls-muted: #a3adbd; --fls-glass: rgba(18, 24, 38, .75); --fls-glass-strong: rgba(18, 24, 38, .88); --fls-border: rgba(255, 255, 255, .14); --fls-border-hi: rgba(255, 255, 255, .10); --fls-hover: rgba(255, 255, 255, .07); --fls-chip: rgba(255, 255, 255, .07); --fls-chip-solid: rgba(18, 24, 38, .85); --fls-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -8px rgba(0, 0, 0, .6); } .fls__backdrop { background: rgba(2, 6, 16, .5); } } /* --- Reduced motion --- */ @media (prefers-reduced-motion: reduce) { .fls *, .fls__modal *, .fls__expander, .fls__expander-clip { animation: none !important; transition: none !important; } }