/* VÆLGEREN — husets egen dropdown, i stedet for browserens med 44 sprog aabner operativsystemets egen menu: den springer ud af popuppen, den * ser ud som macOS og ikke som appen, den kan ikke gruppere, og paa lange lister lander den et * vilkaarligt sted paa skaermen. Maalt 5. august 2026 paa Indstillinger -> Sprog. * * Formen er porteret fra Radix' Select (shadcn): udloeser med vaerdi og vinkel, panel i en portal, * grupper med overskrift, flueben paa det valgte. Selve koden kan ikke bruges — den er React, og * denne app er vanilla uden bundler — men opfoerslen er den samme. * * PANELET HAENGER PAA , ikke ved siden af udloeseren. Baade indstillings-kortet og * .st-body.fyld har overflow:hidden, saa et panel i traeet ville blive klippet af sin egen kasse. */ .vlg-ud { display:inline-flex; align-items:center; gap:9px; width:100%; max-width:320px; border:1px solid var(--line); border-radius: var(--r-knap); background:#fff; cursor:pointer; padding:9px 12px; font:inherit; font-size:14px; color:var(--ink); text-align:left; transition:border-color .15s, box-shadow .15s; } .vlg-ud:hover { border-color:rgba(15,21,17,.2); } .vlg-ud:focus-visible { outline:0; border-color:var(--maerke); box-shadow:0 0 0 3px rgba(255,77,141,.18); } .vlg-ud[aria-expanded="true"] { border-color:var(--maerke); } .vlg-ud .flag { flex:none; font-size:16px; line-height:1; } .vlg-ud .tx { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Pladsholderen er ikke en vaerdi. Den skal kunne ses som noget der mangler. */ .vlg-ud.tom .tx { color:var(--muted); } .vlg-ud .vnk { flex:none; width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; color:var(--muted); transition:transform .18s; } .vlg-ud[aria-expanded="true"] .vnk { transform:rotate(180deg); } .vlg-panel { position:fixed; z-index:400; min-width:220px; max-height:min(24rem,60vh); display:flex; flex-direction:column; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius: var(--r-kort); box-shadow:0 22px 60px -18px rgba(6,14,9,.32), 0 4px 14px -6px rgba(6,14,9,.12); animation:vlgInd .13s cubic-bezier(.22,.9,.3,1); } @keyframes vlgInd { from{opacity:0;transform:translateY(-4px) scale(.985)} to{opacity:1;transform:none} } @media (prefers-reduced-motion:reduce) { .vlg-panel { animation:none } } /* Soegefeltet vises foerst naar listen er lang nok til at man ellers skal rulle efter det man allerede ved hedder. Under det er en soegelinje bare et ekstra element at forbi. */ .vlg-sog { flex:none; border:0; border-bottom:1px solid var(--line); font:inherit; font-size:13.5px; padding:10px 13px; outline:0; color:var(--ink); background:transparent; } .vlg-sog::placeholder { color:var(--muted); } .vlg-liste { overflow-y:auto; padding:5px; min-height:0; } .vlg-grp { font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); padding:9px 10px 4px; } .vlg-grp:first-child { padding-top:4px; } .vlg-pkt { display:flex; align-items:center; gap:9px; width:100%; border:0; background:none; font:inherit; font-size:13.5px; color:var(--ink); text-align:left; cursor:pointer; padding:7px 10px 7px 30px; border-radius: var(--r-knap); position:relative; } /* Fremhaevningen foelger TASTATURET saavel som musen. Uden .paa ville piletasterne flytte et markoer ingen kan se. */ .vlg-pkt:hover, .vlg-pkt.paa { background:var(--felt); } .vlg-pkt .flag { flex:none; font-size:16px; line-height:1; } .vlg-pkt .tx { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .vlg-pkt .tjek { position:absolute; left:9px; width:14px; height:14px; stroke:var(--maerke-tekst); fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; opacity:0; } .vlg-pkt.valgt .tjek { opacity:1; } .vlg-pkt.valgt { font-weight:600; } .vlg-tom { padding:14px 12px; font-size:13px; color:var(--muted); }