/* * GT_Select: gestaltete Auswahlfelder (Plugin-Kern, geteilt von allen Modulen * und den Toolkit-Admin-Seiten). Eigenständig ohne Modul-Variablen, weil das * Panel unter hängt (außerhalb der Widget-Roots). Kontext-Anpassungen * (Größe, Radius) machen die Module in ihrem eigenen CSS. * Style-Guide: UI neutral, Border #E1E0E6, Text #1C1139, Muted #8E8BA3, * Lila #6B35E9 nur für Focus. */ .gt-select, .gt-select-trigger, .gt-select-panel { box-sizing: border-box; } .gt-select { position: relative; display: inline-block; vertical-align: middle; max-width: 100%; min-width: 120px; font-family: "Figtree", -apple-system, "Segoe UI", Roboto, sans-serif; } /* Natives Feld bleibt fokussierbar (Label-Klick), aber unsichtbar. !important, weil Modul-Regeln wie `.gt-ad-form-row select` sonst gewinnen. */ .gt-select > .gt-select-native { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: -1px !important; border: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0); clip-path: inset(50%); opacity: 0; pointer-events: none; } .gt-select-trigger { display: flex; align-items: center; width: 100%; min-height: 40px; padding: 9px 34px 9px 12px; border: 1px solid #E1E0E6; border-radius: 8px; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238E8BA3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; color: #1C1139; font: inherit; font-size: 14px; font-weight: 500; line-height: 1.4; text-align: left; cursor: pointer; box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; } .gt-select-trigger:hover { border-color: #8E8BA3; } .gt-select-trigger:focus { outline: none; } .gt-select-trigger:focus-visible, .gt-select.is-open > .gt-select-trigger { outline: none; border-color: #6B35E9; box-shadow: 0 0 0 3px rgba(107, 53, 233, .15); } .gt-select.is-open > .gt-select-trigger { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B35E9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E"); } .gt-select-trigger.is-invalid { border-color: #E24B4A; } .gt-select-trigger:disabled { opacity: .55; cursor: not-allowed; } .gt-select-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Breiten-Stabilisator: alle Optionstexte unsichtbar → Breite wie natives Select. */ .gt-select-sizer { display: block; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; } .gt-select-sizer > span { display: block; white-space: nowrap; } /* ── Panel (unter ) ── */ .gt-select-panel { position: fixed; z-index: 100001; box-sizing: border-box; margin: 0; padding: 6px; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; background: #fff; border: 1px solid #E1E0E6; border-radius: 12px; box-shadow: 0 8px 24px rgba(28, 17, 57, .12); color: #1C1139; font-family: "Figtree", -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.4; } .gt-select-panel[hidden] { display: none; } .gt-select-option { position: relative; padding: 9px 12px 9px 34px; border-radius: 8px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gt-select-option.is-active { background: #F0EEF5; } .gt-select-option[aria-selected="true"] { font-weight: 600; } .gt-select-option[aria-selected="true"]::before { content: ""; position: absolute; left: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231C1139' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center; } .gt-select-option[aria-disabled="true"] { opacity: .45; cursor: default; }