/* ========================================================================== New UI — Select2 "acadetheme" filter dropdown reskin -------------------------------------------------------------------------- Reskins the jQuery Select2 widgets (theme: "acadetheme") used across Views & Tools / tracker pages: School Select widgets (MyPerformance and ~a dozen other widgets), the engagement-filters-directive on Roster/Students/Engagement pages, briefing book trackers, admin tools, etc. Replaces the legacy pale-lavender pill + zebra-striped purple dropdown with the New UI white-field trigger + white card panel, brand blue instead of purple, no zebra stripes. Pure CSS. No template/JS edits. Everything is scoped under .is-myincite-ui.nui-modern-pages (both classes live together on #InciteWrapper — see public/index.html ~line 520) so legacy (non New UI) clients are unaffected. Base rules being overridden live in public/css/style-e7be7ab21a.css (~lines 15866-16103, selector root ".select2-container--acadetheme"). This file is linked after style.css, and every selector here carries extra ancestor classes, so it wins on specificity regardless of link order. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TRIGGER PILL The Select2 render structure is: span.select2.select2-container.select2-container--acadetheme > span.selection > span.select2-selection[--single|--multiple] Select2's JS toggles the "select2-container--open" class on the OUTER ".select2-container" element (confirmed both by the existing codebase rules at style.css:15914 and style.css:16024-16026, which already use the exact compound selector ".select2-container--acadetheme.select2-container--open .select2-selection" to reach the trigger from the open container — i.e. .select2-selection is a DESCENDANT of the element that receives --open, not a sibling). -------------------------------------------------------------------------- */ .is-myincite-ui.nui-modern-pages .select2-container--acadetheme .select2-selection { background: #fff !important; /* beats the legacy background-color !important */ border: 1.5px solid #dbe2ea; border-radius: 8px; padding: 8px 12px; box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; } /* hover + open state (open = ".select2-container--open" on the ancestor container) */ .is-myincite-ui.nui-modern-pages .select2-container--acadetheme .select2-selection:hover, .is-myincite-ui.nui-modern-pages .select2-container--acadetheme.select2-container--open .select2-selection { border-color: #0074C5; box-shadow: 0 0 0 3px rgba(0, 116, 197, .10); } /* kill the decorative ripple pseudo-element (purely cosmetic, safe to remove) */ .is-myincite-ui.nui-modern-pages .select2-container--acadetheme .select2-selection:before { display: none !important; } /* label text — override the legacy hsla(--main-color) red-ish text */ .is-myincite-ui.nui-modern-pages .select2-container--acadetheme .select2-selection__rendered, .is-myincite-ui.nui-modern-pages .select2-container--acadetheme .select2-selection__placeholder { color: #334155; font-weight: 600; font-size: 14px; } /* arrow / chevron at rest */ .is-myincite-ui.nui-modern-pages .select2-container--acadetheme .select2-selection__arrow:before { color: #64748b; display: inline-block; transition: transform .15s ease, color .15s ease; } /* arrow / chevron when open — recolor brand blue + rotate 180deg. NOTE: the legacy rule at style.css:15933 swaps the glyph itself (content: "\f078" chevron-down -> "\f077" chevron-up) to indicate the open state. Rotating that already-flipped glyph 180deg would flip it right back to pointing down, which reads as broken. So we deliberately re-pin content to the single chevron-down glyph here and drive the open/closed indication purely via transform (matches New UI motion conventions elsewhere and avoids the double-flip). This selector has higher specificity than the legacy one, so it wins regardless of CSS file order. */ .is-myincite-ui.nui-modern-pages .select2-container--acadetheme.select2-container--open .select2-selection__arrow:before { content: "\f078"; color: #0074C5; transform: rotate(180deg); } /* -------------------------------------------------------------------------- 2. PANEL (open dropdown) CORRECTION (verified live via a real initialized Select2 widget, not static source reading): Select2's default architecture creates a SECOND, synthetic ".select2-container--acadetheme" element to host the open dropdown, appended directly to (dropdownParent defaults to document.body) — it is a SIBLING of #InciteWrapper, not a descendant. Only the always-visible trigger (Section 1) stays inline inside #InciteWrapper. So the panel/search/option-row rules below use the same body:has() scoping trick already established in new-ui-loaders.css for the loader veil, rather than plain ancestor nesting (which silently never matches for these elements). -------------------------------------------------------------------------- */ body:has(#InciteWrapper.is-myincite-ui.nui-modern-pages) .select2-container--acadetheme .select2-dropdown { background-color: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 4px 16px rgba(15, 23, 42, .10), 0 1px 3px rgba(15, 23, 42, .06); /* NOTE: skipping a margin-top gap here. The base rule sets `top:3px` (style.css:15972) as part of Select2's own inline-positioned offset math for the dropdown; layering an additional margin-top on top of that is not something we can verify is safe without live DOM measurement (Select2 recalculates dropdown position/height on open via inline styles), so the trigger/panel keep their existing ~3px adjacency rather than risk misalignment. */ } /* -------------------------------------------------------------------------- 3. SEARCH FIELD -------------------------------------------------------------------------- */ body:has(#InciteWrapper.is-myincite-ui.nui-modern-pages) .select2-container--acadetheme .select2-dropdown .select2-search--dropdown .select2-search__field { border: 1px solid #e2e8f0; border-radius: 6px; padding: 7px 10px; font-size: 13px; } body:has(#InciteWrapper.is-myincite-ui.nui-modern-pages) .select2-container--acadetheme .select2-dropdown .select2-search--dropdown .select2-search__field:focus { border-color: #0074C5; box-shadow: 0 0 0 3px rgba(0, 116, 197, .10); outline: none; } /* -------------------------------------------------------------------------- 4. OPTION ROWS Zebra striping + hover + selected are all overridden explicitly below — the legacy hover rule references an undefined --secondary-L80 var, so it is treated as effectively unstyled and replaced with an explicit value rather than left alone. -------------------------------------------------------------------------- */ body:has(#InciteWrapper.is-myincite-ui.nui-modern-pages) .select2-container--acadetheme .select2-dropdown .select2-results__options li { padding: 8px 10px; border-radius: 6px; margin: 1px 0; } /* remove zebra stripe entirely */ body:has(#InciteWrapper.is-myincite-ui.nui-modern-pages) .select2-container--acadetheme .select2-dropdown .select2-results__options li:nth-child(odd):not([aria-selected="true"]) { background-color: transparent; } /* hover (not selected) — explicit value, no reliance on undefined --secondary-L80 */ body:has(#InciteWrapper.is-myincite-ui.nui-modern-pages) .select2-container--acadetheme .select2-dropdown .select2-results__options li:hover:not([aria-selected="true"]) { background-color: #f1f5f9; } /* selected — brand blue replacing the legacy dark purple */ body:has(#InciteWrapper.is-myincite-ui.nui-modern-pages) .select2-container--acadetheme .select2-dropdown .select2-results__option[aria-selected="true"] { background: #0074C5; color: #fff; font-weight: 600; } /* -------------------------------------------------------------------------- 5. MULTI-SELECT VARIANT (e.g. AA Cohort / Site filters) Structure confirmed in public/home/aa-dashboard/widgets/MyPerformance/SchoolSelect/school-select-6d32fc7670.html (inline