/* ═══════════════════════════════════════════════════════════════════════════ AITS select — panel styling. Paired with assets/js/aits-select.js. Uses the --aits-* tokens, declared with identical values in aitoolsay-admin.css and custom.ltr/rtl.css, so one sheet serves the admin and the public side. ═══════════════════════════════════════════════════════════════════════ */ /* ── The closed field ─────────────────────────────────────────────── Only fields the script has claimed. With JS off nothing is stamped and the browser's own list stays reachable — a select you cannot open is worse than an unbranded one. Deliberately narrow: a chevron, the room for it, and the interaction states. No height, font or background — these 9,534 selects sit beside text inputs in 2,331 files and must keep matching them. */ select[data-aits-sel] { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-inline-end: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232060C0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 15px 15px; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; } [dir="rtl"] select[data-aits-sel] { background-position: left 13px center; } body.theme-dark select[data-aits-sel] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238CBEFA' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } @media (hover: hover) { select[data-aits-sel]:hover { border-color: var(--aits-blue-line, #CFE0FA); } } select[data-aits-sel]:focus, select[data-aits-sel][aria-expanded="true"] { outline: 0; border-color: var(--aits-blue, #3680ED); box-shadow: 0 0 0 3px var(--aits-blue-tint, #EAF2FD); } /* The chevron flips while the panel is up, so the field says which state it is in rather than looking identical open and closed. */ select[data-aits-sel][aria-expanded="true"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232060C0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 15l-6-6-6 6'/%3E%3C/svg%3E"); } body.theme-dark select[data-aits-sel][aria-expanded="true"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238CBEFA' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 15l-6-6-6 6'/%3E%3C/svg%3E"); } /* ── The panel ────────────────────────────────────────────────────── Fixed and parented to by the script. The z-index clears the admin's sticky bars without reaching the search overlay's 2147480000; it sits one step under the date picker so the two can never argue. */ .aitssel { position: fixed; z-index: 2147469000; display: none; box-sizing: border-box; min-width: 240px; max-width: calc(100vw - 16px); padding: 6px; background: var(--aits-card, #fff); border: 1px solid var(--aits-line, #E7ECF3); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 2px 6px rgba(16, 24, 40, .06), 0 20px 48px -14px rgba(16, 24, 40, .26); animation: aitssel-in .14s ease-out; } .aitssel * { box-sizing: border-box; } .aitssel.is-open { display: block; } body.theme-dark .aitssel { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 2px 6px rgba(0, 0, 0, .5), 0 20px 48px -14px rgba(0, 0, 0, .7); } @keyframes aitssel-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } } /* ── Search ─────────────────────────────────────────────────────────── */ /* The field inside the panel borrows the SAME idiom as the closed select it belongs to — hairline at rest, blue hairline plus a soft tint halo on focus. It used to swap the hairline for a bare 1px blue line, which read as an outlined box rather than an emphasised field, and sat oddly beside the very control that opened it. */ .aitssel-search { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 11px; margin-bottom: 6px; border-radius: 9px; /* matches the option rows below it */ background: var(--aits-bg-2, #F7F9FC); /* --aits-line-soft (#F1F1F1) on a #F7F9FC fill is all but invisible, so at rest the field read as bare text until you focused it. */ box-shadow: inset 0 0 0 1px var(--aits-line, #E4EAF2); transition: box-shadow .18s ease, background-color .18s ease; } .aitssel-search:focus-within { background: var(--aits-card, #fff); box-shadow: inset 0 0 0 1px var(--aits-blue, #3680ED), 0 0 0 3px var(--aits-blue-tint, #EAF2FD); } .aitssel-search[hidden] { display: none; } .aitssel-search svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--aits-mut, #6B7686); transition: color .18s ease; } /* The glyph picks up the focus colour, so the field says it is live without needing a second border. */ .aitssel-search:focus-within svg { color: var(--aits-blue, #3680ED); } .aitssel-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--aits-ink, #0B1220); font: inherit; font-size: 13.5px; } /* Not --aits-faint: it resolves to #999 on the public side and reads at 2.85:1 on the focused white fill. --aits-mut clears 5.7:1. */ .aitssel-search input::placeholder { color: var(--aits-mut, #6B7686); opacity: 1; } body.theme-dark .aitssel-search { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10); } /* (0,3,1) — has to outrank `body.theme-dark .aitssel-search` at (0,2,1), which otherwise beat the light `.aitssel-search:focus-within` at (0,2,0) and left dark mode with no visible focus at all. */ body.theme-dark .aitssel-search:focus-within { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px var(--aits-blue, #3680ED), 0 0 0 3px rgba(54, 128, 237, .26); } body.theme-dark .aitssel-search:focus-within svg { color: var(--aits-blue-light, #8CBEFA); } /* ── The list ───────────────────────────────────────────────────────── */ .aitssel-list { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--aits-line, #E7ECF3) transparent; } .aitssel-list::-webkit-scrollbar { width: 6px; } .aitssel-list::-webkit-scrollbar-track { background: transparent; } .aitssel-list::-webkit-scrollbar-thumb { background: var(--aits-line, #E7ECF3); border-radius: 4px; } .aitssel-list::-webkit-scrollbar-thumb:hover { background: var(--aits-blue-line, #CFE0FA); } body.theme-dark .aitssel-list { scrollbar-color: rgba(255, 255, 255, .16) transparent; } body.theme-dark .aitssel-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); } .aitssel-group { padding: 9px 10px 5px; color: var(--aits-mut, #6B7686); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .aitssel .aitssel-opt { display: block; width: 100%; padding: 9px 11px; border: 0; border-radius: 9px; background: transparent; color: var(--aits-txt, #3D4757); font: inherit; font-size: 13.5px; font-weight: 550; text-align: start; cursor: pointer; /* No ellipsis and no nowrap: these are company and category names an editor has to be able to READ before choosing one, and the native list this replaces never truncated them either. A long label wraps and its row grows. */ white-space: normal; word-break: break-word; /* Positioning context for the selected tick, which is absolute rather than floated so it stays put when a long label wraps to a second line. */ position: relative; transition: background-color .13s ease, color .13s ease; } .aitssel .aitssel-opt.is-none { color: var(--aits-mut, #6B7686); font-style: italic; } .aitssel .aitssel-opt.is-disabled { color: var(--aits-faint, #98A2B3); cursor: not-allowed; } /* Keyboard cursor and pointer hover are the SAME affordance and share one look — two different highlights on one list is how you lose track of which row Enter will take. */ .aitssel .aitssel-opt.is-cursor, .aitssel .aitssel-opt:hover:not(.is-disabled) { background: var(--aits-bg-2, #F1F4F9); color: var(--aits-ink, #0B1220); } body.theme-dark .aitssel .aitssel-opt.is-cursor, body.theme-dark .aitssel .aitssel-opt:hover:not(.is-disabled) { background: rgba(255, 255, 255, .07); color: #F2F4F8; } /* The CHOSEN row and the keyboard cursor are different states, so they carry different HUES rather than different strengths of the same one: the cursor is neutral, the chosen row is brand. A saturated fill was the old answer, but the default choice is usually row one, so opening any list dropped a dark slab across the top of the panel. Tint + brand ink + a tick reads as clearly "current" while letting the list stay a list. */ .aitssel .aitssel-opt.is-on { background: var(--aits-blue-tint, #EAF2FD); color: var(--aits-blue-dark, #2060C0); font-weight: 680; /* A placeholder row ("All categories") is .is-none AND .is-on at once. Without this it keeps the italic that marks the empty choice and renders as bold italic — the one thing in the panel that looked like a mistake. */ font-style: normal; } /* Room for the tick, and only where a tick is actually drawn: multi-select swaps it for a checkbox and blanks the ::after below. */ .aitssel .aitssel-opt.is-on:not(.is-multi) { padding-inline-end: 32px; } .aitssel .aitssel-opt.is-on::after { content: ''; position: absolute; inset-inline-end: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232060C0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / 15px 15px; } /* Chosen AND under the cursor — a third, deeper step so the keyboard position is still readable when it lands on the row that is already selected. */ .aitssel .aitssel-opt.is-on.is-cursor, .aitssel .aitssel-opt.is-on:hover { background: var(--aits-blue-tint-2, #DBE8FB); color: var(--aits-blue-dark, #2060C0); } body.theme-dark .aitssel .aitssel-opt.is-on { background: rgba(54, 128, 237, .22); color: #A8CBFB; } body.theme-dark .aitssel .aitssel-opt.is-on.is-cursor, body.theme-dark .aitssel .aitssel-opt.is-on:hover { background: rgba(54, 128, 237, .30); } body.theme-dark .aitssel .aitssel-opt.is-on::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8CBFB' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); } .aitssel-empty { padding: 20px 12px; color: var(--aits-mut, #6B7686); font-size: 13px; text-align: center; } .aitssel :focus-visible { outline: 2px solid var(--aits-blue, #3680ED); outline-offset: -2px; } /* ── Phone: a bottom sheet ────────────────────────────────────────── A panel matched to the field's width is right on a laptop and cramped on a phone, where it can also land under the keyboard. The script's inline top/left/width are measured coordinates that mean nothing in this layout, so they are overridden. */ @media (max-width: 560px) { .aitssel { top: auto !important; left: 0 !important; right: 0; bottom: 0; width: 100% !important; max-width: none; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; animation: aitssel-up .18s ease-out; } @keyframes aitssel-up { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } } .aitssel-list { max-height: 46vh; } .aitssel .aitssel-opt { padding: 13px 12px; font-size: 14.5px; } .aitssel-search { padding: 10px 12px; } .aitssel-search input { font-size: 16px; } /* 16px stops iOS zooming the page on focus */ } @media (prefers-reduced-motion: reduce) { .aitssel { animation: none; } .aitssel .aitssel-opt, select[data-aits-sel] { transition: none; } } /* ══ Multi-select ═══════════════════════════════════════════════════════════ Replaces `