/* ============================================================ SELECT2 — AUTO LIGHT / DARK MODE (Bootstrap 5 Style) ============================================================ */ /* ------------------------------------------------------------ LIGHT MODE (default) ------------------------------------------------------------ */ .select2-container--bootstrap-5 .select2-selection { background-color: #fff !important; border-color: #ced4da !important; color: #212529 !important; min-height: 40px !important; border-radius: .5rem; } .select2-container--bootstrap-5 .select2-selection__placeholder { color: #6c757d !important; } .select2-container--bootstrap-5 .select2-selection__rendered { color: #212529 !important; } /* Arrow Light */ .select2-container--bootstrap-5 .select2-selection__arrow b { border-color: #333 transparent transparent transparent !important; opacity: .7; } /* Dropdown Light */ .select2-container--bootstrap-5 .select2-dropdown { background-color: #fff !important; border-color: #ced4da !important; } .select2-container--bootstrap-5 .select2-results__option { background-color: #fff !important; color: #212529 !important; } .select2-container--bootstrap-5 .select2-results__option--highlighted { background-color: #0d6efd !important; color: #fff !important; } .select2-container--bootstrap-5 .select2-results__option--selected { background-color: #0b5cd6 !important; color: #fff !important; } /* Light clear button */ .select2-container--bootstrap-5 .select2-selection__clear { color: #222 !important; } /* ------------------------------------------------------------ DARK MODE (active when ) ------------------------------------------------------------ */ html.dark .select2-container--bootstrap-5 .select2-selection { background-color: #121213 !important; border-color: #333 !important; color: #fff !important; } html.dark .select2-container--bootstrap-5 .select2-selection__placeholder { color: #999 !important; } html.dark .select2-container--bootstrap-5 .select2-selection__rendered { color: #fff !important; } /* Arrow Dark */ html.dark .select2-container--bootstrap-5 .select2-selection__arrow b { border-color: #ddd transparent transparent transparent !important; opacity: .9; } /* Dropdown Dark */ html.dark .select2-container--bootstrap-5 .select2-dropdown { background-color: #1e1f22 !important; border-color: #333 !important; } html.dark .select2-container--bootstrap-5 .select2-results__option { background-color: #1e1f22 !important; color: #fff !important; } html.dark .select2-container--bootstrap-5 .select2-results__option--highlighted { background-color: #0d6efd !important; color: #fff !important; } html.dark .select2-container--bootstrap-5 .select2-results__option--selected { background-color: #0b5cd6 !important; color: #fff !important; } /* Dark clear button */ html.dark .select2-container--bootstrap-5 .select2-selection__clear { color: #ddd !important; } /* ------------------------------------------------------------ SHARED STYLES ------------------------------------------------------------ */ /* Hover effect arrow */ .select2-container--bootstrap-5 .select2-selection:hover .select2-selection__arrow b { opacity: 1; } /* Rotate arrow when open */ .select2-container--open .select2-selection__arrow b { transform: rotate(180deg); transition: transform .25s ease; } /* Scrollbar */ .select2-results__options::-webkit-scrollbar { width: 6px; } .select2-results__options::-webkit-scrollbar-thumb { border-radius: 4px; } html.dark .select2-results__options::-webkit-scrollbar-track { background: #222; } html.dark .select2-results__options::-webkit-scrollbar-thumb { background: #555; } /* ============================================================ FIX: SELECT2 SEARCH INPUT (DARK MODE) ============================================================ */ html.dark .select2-container--bootstrap-5 .select2-search__field { background-color: #121213 !important; border-color: #444 !important; color: #fff !important; } html.dark .select2-container--bootstrap-5 .select2-search__field::placeholder { color: #aaa !important; } html.dark .select2-dropdown .select2-search__field { background-color: #121213 !important; border-color: #444 !important; color: #fff !important; } html.dark .select2-dropdown .select2-search__field::placeholder { color: #aaa !important; }