/* ───────────────────────────────────────────────────────────── Minimal Select — lightweight custom dropdown that replaces the native 's classes, so each dropdown keeps the skin its context gave it; only the popup list is unified. Defaults below use :where() (zero specificity) so any existing class rule still wins. ───────────────────────────────────────────────────────────── */ /* Adds no box of its own — the trigger inherits the select's place in layout */ .ms-wrap { display: contents; } .ms-native { display: none !important; } /* ── Trigger ───────────────────────────────────────────────── */ /* Zero-specificity defaults: only apply where the select had no styling of its own. Any .filter-select / .op-select / .text-input rule wins. */ button:where(.ms-trigger) { padding: calc(7px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)); border: 1px solid var(--border-color, #e0e0e0); border-radius: calc(8px * var(--ui-scale, 1)); background: var(--surface-color, #ffffff); color: var(--text-primary, #333333); font-size: calc(13px * var(--ui-scale, 1)); } /* Structural rules — these must win, so normal specificity */ .ms-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: calc(8px * var(--ui-scale, 1)); min-width: 0; font-family: inherit; line-height: 1.2; text-align: left; cursor: pointer; /* Kill the chevron that inherited classes painted as a background image — !important because theme rules like `body.theme-dark .filter-select` out-specify a plain class, and a second caret would show through */ background-image: none !important; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .ms-trigger:focus-visible { outline: none; border-color: var(--primary-color, #2196f3); box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15); } .ms-wrap.open .ms-trigger { border-color: var(--primary-color, #2196f3); box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.12); } .ms-trigger-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ms-trigger-text.placeholder { color: var(--text-muted, #999999); } .ms-caret { flex-shrink: 0; width: calc(10px * var(--ui-scale, 1)); height: calc(10px * var(--ui-scale, 1)); color: var(--text-muted, #999999); transition: transform 0.18s ease, color 0.15s ease; } .ms-wrap.open .ms-caret { transform: rotate(180deg); color: var(--primary-color, #2196f3); } .ms-trigger:disabled { opacity: 0.55; cursor: not-allowed; } /* ── Menu ──────────────────────────────────────────────────── */ /* Portaled to and positioned by JS, so a modal's overflow or a scrolling panel can never clip it */ .ms-menu { position: fixed; top: 0; left: 0; z-index: 1000001; padding: calc(5px * var(--ui-scale, 1)); background: var(--surface-color, #ffffff); border: 1px solid var(--border-color, #e0e0e0); border-radius: calc(10px * var(--ui-scale, 1)); box-shadow: 0 10px 28px rgba(15, 25, 35, 0.12), 0 2px 6px rgba(15, 25, 35, 0.06); max-width: min(90vw, calc(360px * var(--ui-scale, 1))); display: flex; flex-direction: column; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(calc(-4px * var(--ui-scale, 1))); /* visibility flips instantly on open (so the filter box is focusable the moment the menu opens) and only waits for the fade on the way out */ transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s; } .ms-menu.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s; } /* ── Search (menus with many options) ──────────────────────── */ .ms-search { flex-shrink: 0; padding: calc(2px * var(--ui-scale, 1)) calc(2px * var(--ui-scale, 1)) calc(6px * var(--ui-scale, 1)); border-bottom: 1px solid var(--border-color, #e0e0e0); margin-bottom: calc(4px * var(--ui-scale, 1)); } .ms-search[hidden] { display: none; } .ms-search input { width: 100%; padding: calc(6px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1)) calc(6px * var(--ui-scale, 1)) calc(28px * var(--ui-scale, 1)); border: 1px solid var(--border-color, #e0e0e0); border-radius: calc(6px * var(--ui-scale, 1)); background: var(--background-color, #f5f6f8); color: var(--text-primary, #333333); font-family: inherit; font-size: calc(12.5px * var(--ui-scale, 1)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(9px * var(--ui-scale, 1)) center; } .ms-search input:focus { outline: none; border-color: var(--primary-color, #2196f3); } .ms-search input::placeholder { color: var(--text-muted, #999999); } .ms-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .ms-empty { padding: calc(10px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1)); font-size: calc(12.5px * var(--ui-scale, 1)); color: var(--text-muted, #999999); text-align: center; } /* ── Options ───────────────────────────────────────────────── */ .ms-option { display: flex; align-items: center; justify-content: space-between; gap: calc(8px * var(--ui-scale, 1)); padding: calc(7px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1)); border-radius: calc(6px * var(--ui-scale, 1)); font-size: calc(12.5px * var(--ui-scale, 1)); color: var(--text-primary, #333333); white-space: nowrap; cursor: pointer; user-select: none; transition: background 0.12s ease, color 0.12s ease; } /* .ms-option sets display:flex, which would otherwise beat the UA rule for the hidden attribute and leave filtered-out rows on screen */ .ms-option[hidden] { display: none; } .ms-option + .ms-option { margin-top: calc(1px * var(--ui-scale, 1)); } /* Single highlight state driven by JS — keyboard and pointer share it, so the two never fight over which row looks active */ .ms-option.active { background: var(--surface-hover, #f0f2f5); } .ms-option.selected { color: var(--primary-color, #2196f3); font-weight: 600; } .ms-option[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; } .ms-option-label { overflow: hidden; text-overflow: ellipsis; } .ms-check { flex-shrink: 0; width: calc(12px * var(--ui-scale, 1)); height: calc(12px * var(--ui-scale, 1)); opacity: 0; transform: scale(0.7); transition: opacity 0.14s ease, transform 0.14s ease; } .ms-option.selected .ms-check { opacity: 1; transform: scale(1); } /* Scrollbar — kept thin so the panel stays quiet */ .ms-list::-webkit-scrollbar { width: 8px; } .ms-list::-webkit-scrollbar-track { background: transparent; } .ms-list::-webkit-scrollbar-thumb { background: var(--border-color, #e0e0e0); border: 2px solid var(--surface-color, #ffffff); border-radius: 8px; } .ms-list::-webkit-scrollbar-thumb:hover { background: var(--text-muted, #999999); } /* ── Context fixes ─────────────────────────────────────────── */ /* These rules targeted the select element itself, which no longer renders. Mirror them onto the trigger so layout is unchanged. */ .editor-row .ms-trigger { flex: 1; } .cond-card-head .ms-trigger { flex: 1; min-width: 0; } /* Light-surface modals keep their own palette in dark mode; match the menu */ .io-config-modal .ms-trigger, #serviceEventModal .ms-trigger { justify-content: space-between; } /* ── Dark theme ────────────────────────────────────────────── */ /* #2196f3 sits low against the dark surface; lift it the same way the vehicle dropdown does so both menus mark "selected" identically */ body.theme-dark .ms-option.selected { color: #4dabf7; } body.theme-dark .ms-search input { background-color: #1e2d3d; border-color: #2a3f52; color: #e8edf2; } body.theme-dark .ms-menu { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3); } /* ── Reduced motion ────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .ms-trigger, .ms-caret, .ms-menu, .ms-option, .ms-check { transition: none; } }