/* * CXMedia Advanced Search Box — Frontend Styles v1.4 * Author: Gino Croes — Crossmedia297 * * Portal architecture: the dropdown is moved to by JS on open, * then positioned with position:fixed via getBoundingClientRect(). * CSS only controls appearance; JS controls position entirely. */ /* ── Variables ───────────────────────────────────────────────────────────── */ :root { --cxasb-primary: #2563eb; --cxasb-primary-dark: #1d4ed8; --cxasb-text: #111827; --cxasb-text-muted: #6b7280; --cxasb-text-light: #9ca3af; --cxasb-border: #d1d5db; --cxasb-bg: #ffffff; /* bar background — overridden by admin */ --cxasb-dropdown-bg: #ffffff; /* dropdown background — overridden by admin */ --cxasb-hover-bg: #f9fafb; --cxasb-active-bg: #eff6ff; --cxasb-shadow: 0 8px 30px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.07); --cxasb-radius: 26px; --cxasb-bar-height: 50px; /* overridden by admin */ --cxasb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --cxasb-ease: cubic-bezier(.4, 0, .2, 1); } /* ── Scoped reset ────────────────────────────────────────────────────────── */ .cxasb-wrapper, .cxasb-wrapper * { box-sizing: border-box; -webkit-font-smoothing: antialiased; } /* ── Wrapper ─────────────────────────────────────────────────────────────── */ .cxasb-wrapper { position: relative; width: 100%; max-width: 640px; font-family: var(--cxasb-font); font-size: 15px; color: var(--cxasb-text); } /* ═══════════════════════════════════════════════════════════════════════════ BAR — always visible pill input ═══════════════════════════════════════════════════════════════════════════ */ .cxasb-bar { display: flex; align-items: center; height: var(--cxasb-bar-height); padding: 0 8px 0 0; background: var(--cxasb-bg); border: 2px solid var(--cxasb-border); border-radius: var(--cxasb-radius); transition: border-color .15s var(--cxasb-ease), box-shadow .15s var(--cxasb-ease); } .cxasb-bar:hover { border-color: #9ca3af; } /* Active: blue ring while dropdown is open */ .cxasb-wrapper.is-open .cxasb-bar { border-color: var(--cxasb-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); } /* Search icon */ .cxasb-bar__icon { flex-shrink: 0; width: 18px; height: 18px; margin: 0 10px 0 15px; color: var(--cxasb-text-light); pointer-events: none; transition: color .15s; } .cxasb-wrapper.is-open .cxasb-bar__icon { color: var(--cxasb-primary); } /* Input */ .cxasb-bar__input { flex: 1; height: 100%; padding: 0; border: none !important; outline: none !important; box-shadow: none !important; background: transparent; font-family: var(--cxasb-font); font-size: 16px; color: var(--cxasb-text); caret-color: var(--cxasb-primary); min-width: 0; } .cxasb-bar__input::placeholder { color: var(--cxasb-text-light); } /* Spinner */ .cxasb-bar__spinner { display: none; flex-shrink: 0; width: 16px; height: 16px; border: 2px solid #e5e7eb; border-top-color: var(--cxasb-primary); border-radius: 50%; animation: cxasb-spin .6s linear infinite; margin-right: 6px; } .cxasb-bar__spinner.is-visible { display: block; } @keyframes cxasb-spin { to { transform: rotate(360deg); } } /* Clear button — solid colours, always readable */ .cxasb-bar__clear { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; padding: 0; margin-right: 4px; border: none; border-radius: 50%; background: #e5e7eb; /* solid swatch — never transparent */ color: #374151; cursor: pointer; line-height: 1; transition: background .12s, color .12s; } .cxasb-bar__clear:hover { background: #374151; color: #ffffff; } .cxasb-bar__clear:focus { outline: 2px solid var(--cxasb-primary); outline-offset: 1px; } .cxasb-bar__clear svg { width: 12px; height: 12px; display: block; } /* ═══════════════════════════════════════════════════════════════════════════ DROPDOWN ═══════════════════════════════════════════════════════════════════════════ Appearance only. Position (top/left/width/position:fixed) is set entirely by JS via inline styles after getBoundingClientRect(). When closed, the dropdown lives inside .cxasb-wrapper; when open it is a direct child of — this completely bypasses overflow:hidden on any ancestor element. ═══════════════════════════════════════════════════════════════════════════ */ .cxasb-dropdown { /* Default state: inside wrapper, hidden */ position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 99999; background: var(--cxasb-dropdown-bg); border: 2px solid var(--cxasb-primary); border-radius: 16px; box-shadow: var(--cxasb-shadow); overflow: hidden; /* Hidden */ opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .15s var(--cxasb-ease), transform .15s var(--cxasb-ease); } /* Visible — added by JS when dropdown is open (works wherever in DOM it is) */ .cxasb-dropdown.cxasb-is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } /* ═══════════════════════════════════════════════════════════════════════════ DATE-RANGE FILTER (show_filters="true" only) ═══════════════════════════════════════════════════════════════════════════ */ .cxasb-date-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--cxasb-border); background: var(--cxasb-hover-bg); } .cxasb-date-filter__label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--cxasb-text-muted); flex-shrink: 0; } .cxasb-date-row { display: flex; align-items: center; gap: 6px; flex: 1; } .cxasb-date-from, .cxasb-date-to { flex: 1; min-width: 0; height: 30px; padding: 0 8px; border: 1px solid var(--cxasb-border); border-radius: 6px; font-family: var(--cxasb-font); font-size: 12px; color: var(--cxasb-text); background: var(--cxasb-bg); outline: none; transition: border-color .12s; } .cxasb-date-from:focus, .cxasb-date-to:focus { border-color: var(--cxasb-primary); } .cxasb-date-sep { color: var(--cxasb-text-light); flex-shrink: 0; } .cxasb-date-clear { padding: 0 8px; height: 28px; border: 1px solid var(--cxasb-border); border-radius: 6px; background: transparent; color: var(--cxasb-text-muted); font-size: 12px; cursor: pointer; white-space: nowrap; transition: border-color .12s, color .12s; } .cxasb-date-clear:hover { border-color: #dc2626; color: #dc2626; } /* ═══════════════════════════════════════════════════════════════════════════ RESULTS LIST ═══════════════════════════════════════════════════════════════════════════ */ .cxasb-results-list { list-style: none; margin: 0; padding: 6px 0; max-height: 360px; overflow-y: auto; overflow-x: hidden; } .cxasb-results-list::-webkit-scrollbar { width: 4px; } .cxasb-results-list::-webkit-scrollbar-track { background: transparent; } .cxasb-results-list::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 2px; } /* Result row */ .cxasb-result-item { list-style: none; animation: cxasb-item-in .12s var(--cxasb-ease) both; } @keyframes cxasb-item-in { from { opacity: 0; transform: translateX(-5px); } to { opacity: 1; transform: translateX(0); } } .cxasb-result-link { display: flex; align-items: center; gap: 8px; padding: 9px 14px; text-decoration: none; color: inherit; cursor: pointer; transition: background .08s; outline: none; } .cxasb-result-link:hover, .cxasb-result-item.is-active .cxasb-result-link { background: var(--cxasb-active-bg); } .cxasb-result-body { flex: 1; min-width: 0; } .cxasb-result-title { font-size: 14px; font-weight: 500; color: var(--cxasb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; display: block; } .cxasb-result-title mark { background: transparent; color: var(--cxasb-primary); font-weight: 700; } .cxasb-result-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; } .cxasb-result-type { font-size: 11px; font-weight: 600; text-transform: capitalize; color: var(--cxasb-text-muted); background: var(--cxasb-hover-bg); border: 1px solid var(--cxasb-border); border-radius: 4px; padding: 1px 5px; line-height: 1.5; display: inline-block; } .cxasb-result-date { font-size: 11px; color: var(--cxasb-text-light); } /* Chevron */ .cxasb-result-arrow { flex-shrink: 0; width: 13px; height: 13px; color: var(--cxasb-text-light); opacity: 0; transform: translateX(-3px); transition: opacity .1s, transform .1s; } .cxasb-result-link:hover .cxasb-result-arrow, .cxasb-result-item.is-active .cxasb-result-arrow { opacity: 1; transform: translateX(0); } /* Skeleton shimmer */ .cxasb-skeleton .cxasb-result-link { flex-direction: column; align-items: flex-start; gap: 5px; pointer-events: none; } .cxasb-skel-line { display: block; height: 10px; width: 60%; background: linear-gradient(90deg, #f3f4f6 25%, #e9eaf0 50%, #f3f4f6 75%); background-size: 200% 100%; animation: cxasb-shimmer 1.4s infinite; border-radius: 4px; } .cxasb-skel-line--sm { height: 8px; width: 35%; margin-top: 2px; } @keyframes cxasb-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* Empty / error */ .cxasb-state-empty { display: block; padding: 18px 14px; font-size: 13px; color: var(--cxasb-text-muted); text-align: center; } .cxasb-state-empty strong { color: var(--cxasb-text); } /* ═══════════════════════════════════════════════════════════════════════════ DROPDOWN FOOTER ═══════════════════════════════════════════════════════════════════════════ */ .cxasb-dropdown__footer { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-top: 1px solid var(--cxasb-border); background: var(--cxasb-hover-bg); } .cxasb-view-all { font-size: 13px; font-weight: 600; color: var(--cxasb-primary); text-decoration: none; transition: color .12s; } .cxasb-view-all:hover { color: var(--cxasb-primary-dark); text-decoration: underline; } .cxasb-result-count { font-size: 11px; color: var(--cxasb-text-light); } /* ═══════════════════════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 480px) { .cxasb-bar { height: max(46px, var(--cxasb-bar-height)); } .cxasb-bar__input { font-size: 15px; } .cxasb-date-filter { flex-direction: column; align-items: flex-start; } .cxasb-date-row { width: 100%; } }