/* OPENX3 — Custom Dash Editor: aufgeräumtes Layout + Haupt-/Untertabs (Add-on) v1.1.0 * * Gehört zu js/vexora-dash-tabs.js. ALLES ist auf #builder.bx begrenzt — die Klasse .bx * setzt nur das Add-on. Ohne Script (oder mit localStorage vex_dash_tabs=off) wirkt hier nichts; * andere Dialoge und die Startseite bleiben unberührt. * * Gliederung * 1 Tokens (inkl. der im Original fehlenden --panel2 / --line / --acc / --dim2 / --err) * 2 Dialog-Rahmen + Kopf * 3 Layout: Desktop (Vorschau links, klebend) · Tablet/Handy (Vorschau-Dock) * 4 Navigation (Haupt-Tabs, Untertabs) * 5 Fußleiste (Änderungen · Kosten · Bau-Button) * 6 Karten, Beschriftungen, Felder, Farbfelder * 7 Ein Stil für Umschalter / Segmente / Chips / kleine Buttons * 8 Sichtbarkeit je Tab (Übersicht-Ansicht, versteckte Original-Leisten) * 9 Emulator-Feinschliff * 10 Niedrige Fenster: nur Kopf- und Fußleiste kleben */ /* ── 1 Tokens ─────────────────────────────────────────────────────────────── */ #builder.bx{ --panel2:rgba(255,255,255,.028); --line:rgba(255,255,255,.085); --acc:var(--drive,#FFA216); --dim2:var(--dimmer,rgba(244,246,250,.4)); --err:#FF6B73; --amber:#FFA216; --bx-bg:#0c0e12; --bx-field:#090b0f; --bx-line2:rgba(255,255,255,.16); --bx-on:#252a33; --bx-r-card:16px; --bx-r-ctl:10px; --bx-r-chip:8px; --bx-s1:4px;--bx-s2:8px;--bx-s3:12px;--bx-s4:16px;--bx-s5:24px; --bx-ctl-h:38px; --bx-top:64px; --bx-gap:4px; /* deckender Streifen unter der Kopfleiste; alles Klebende sitzt darunter */ --bx-dock:0px; --bx-ring:0 0 0 3px rgba(255,162,22,.18); } /* ── 2 Dialog-Rahmen + Kopf ───────────────────────────────────────────────── */ #builder.bx .gcard{ display:flex;flex-direction:column; background:var(--bx-bg);border:1px solid rgba(255,255,255,.08); padding-bottom:0; } #builder.bx .gcard>*{flex-shrink:0} #builder.bx.open .gcard>*{animation:none} #builder.bx .builderClose{display:none} #builder.bx .ghead{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 12px;text-align:left;margin:0 2px} #builder.bx .ghead .glcd{display:none} #builder.bx .ghead h3{font-size:20px;line-height:1.2;letter-spacing:-.01em;text-transform:none;font-weight:700} #builder.bx .ghead .gsub{font:500 12.5px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--dimmer)} #builder.bx #bMain{flex:1 0 auto;margin-top:var(--bx-s4)} #builder.bx #bReady{padding-bottom:var(--bx-s5);margin-top:var(--bx-s3)} /* Inhalt, der über der klebenden Kopfleiste (im oberen Innenabstand) durchscheint, abdecken. * Seitlich über den Innenabstand hinaus nur per box-shadow (zählt nicht zur scrollWidth der .gcard). * ±1px = Rahmen der .mbar (100% meint die Innenkante), damit ihr oberer/unterer Rand sichtbar bleibt. */ #builder.bx .mbar::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% + 1px);height:40px;background:var(--bx-bg);pointer-events:none; box-shadow:-40px 0 0 var(--bx-bg),40px 0 0 var(--bx-bg)} /* … und unter der Leiste: schmaler deckender Streifen bis dorthin, wo Vorschau/Navigation kleben (--bx-gap), * damit Text, der gerade darunter verschwindet (z. B. Unterlängen der Überschrift), nicht hervorschaut */ #builder.bx .mbar::after{content:"";position:absolute;left:0;right:0;top:calc(100% + 1px);height:var(--bx-gap);background:var(--bx-bg);pointer-events:none; box-shadow:-40px 0 0 var(--bx-bg),40px 0 0 var(--bx-bg)} #builder.bx .mbar{background:#0f1116;-webkit-backdrop-filter:none;backdrop-filter:none} /* deckend: nichts scheint durch */ #builder.bx .mbar .mbar-hist{font-size:12px!important} /* Basis-Auswahl als kompakte Zeile */ #builder.bx #bMain>.ginput{display:flex;align-items:center;gap:var(--bx-s3);margin:0 0 var(--bx-s3)!important} #builder.bx #bMain>.ginput label{flex:0 0 auto;margin:0;font:600 13px/1.2 var(--sans);letter-spacing:0;text-transform:none;color:var(--dim)} #builder.bx #bMain>.ginput .gsel{flex:1 1 auto;max-width:420px} /* die Spalte mit Navigation, Inhalt und Fußleiste */ #builder.bx .bx-col{display:flex;flex-direction:column;min-width:0} #builder.bx #bGroups{min-width:0;scroll-margin-top:calc(var(--bx-top) + 96px)} #builder.bx .bx-off{display:none!important} #builder.bx .bx-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ── 3 Layout ─────────────────────────────────────────────────────────────── */ @media (min-width:900px){ #builder.bx .gcard.wide{width:min(1180px,96vw);height:min(92svh,1000px);max-height:92svh;padding:16px 28px 0} #builder.bx #bMain{ display:grid;grid-template-columns:minmax(268px,316px) minmax(0,1fr); grid-template-areas:"pv base" "pv col";grid-template-rows:auto 1fr;column-gap:28px;align-items:start } #builder.bx #bMain>.ginput{grid-area:base} #builder.bx #bMain>#dxPrev{grid-area:pv;position:sticky;top:calc(var(--bx-top) + var(--bx-gap));align-self:start;margin:0} #builder.bx[data-bx-ctl] #bMain>#dxPrev{position:relative;top:auto} #builder.bx #bMain>.bx-col{grid-area:col;align-self:stretch} #builder.bx #bMain>:not(#dxPrev):not(.ginput):not(.bx-col){grid-column:2} #builder.bx #dxPrev .bx-pvtg{display:none} #builder.bx #bReady{max-width:680px;margin:var(--bx-s3) auto 0} #builder.bx[data-bx-state="empty"] #dxPrev .emu-card:not(.emu-ctl){opacity:.55} } @media (max-width:899px){ #builder.bx #bMain{display:flex;flex-direction:column} #builder.bx #bMain>.bx-col{flex:1 0 auto} /* Vorschau-Dock: klebt unter der Kopfleiste, kompakt nebeneinander */ #builder.bx #bMain>#dxPrev{position:sticky;top:calc(var(--bx-top) + var(--bx-gap));z-index:4;margin:0 calc(-1 * var(--bx-s1)) 0;padding:0 var(--bx-s1) var(--bx-s2);background:var(--bx-bg);max-width:none} #builder.bx[data-bx-ctl] #bMain>#dxPrev{position:relative;top:auto;z-index:auto} #builder.bx #dxPrev .emu-card:not(.emu-ctl){ display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"pv h" "pv bar" "pv iss"; align-items:start;align-content:start;column-gap:var(--bx-s3);row-gap:var(--bx-s2);padding:var(--bx-s2) } #builder.bx #dxPrev .emu-card:not(.emu-ctl)>h3{grid-area:h;margin:2px 0 0} #builder.bx #dxPrev .emu-bezel{grid-area:pv;padding:4px;border-radius:12px} #builder.bx #dxPrev .emu-bezel canvas{width:136px!important;max-width:136px!important} #builder.bx #dxPrev .emu-bar{grid-area:bar;justify-content:flex-start;margin:0} #builder.bx #dxPrev .emu-issues{grid-area:iss;margin:0} #builder.bx #dxPrev .emu-card:not(.emu-ctl)>.emu-note{display:none} /* eingeklappt: nur die Kopfzeile */ #builder.bx[data-bx-pv="min"] #dxPrev .emu-card:not(.emu-ctl), #builder.bx[data-bx-state="empty"] #dxPrev .emu-card:not(.emu-ctl){grid-template-columns:minmax(0,1fr);grid-template-areas:"h";padding:6px 10px} #builder.bx[data-bx-pv="min"] #dxPrev .emu-card:not(.emu-ctl)>:not(h3), #builder.bx[data-bx-state="empty"] #dxPrev .emu-card:not(.emu-ctl)>:not(h3){display:none} #builder.bx[data-bx-pv="min"] #dxPrev .emu-card:not(.emu-ctl)>h3, #builder.bx[data-bx-state="empty"] #dxPrev .emu-card:not(.emu-ctl)>h3{margin:0;min-height:30px} #builder.bx[data-bx-state="empty"] #dxPrev{position:relative;top:auto} #builder.bx[data-bx-state="empty"] .bx-pvtg{display:none} #builder.bx[data-bx-pv="min"] .bx-pvtg svg{transform:rotate(180deg)} #builder.bx{--bx-nav-top:calc(var(--bx-top) + var(--bx-gap) + var(--bx-dock))} #builder.bx[data-bx-ctl],#builder.bx[data-bx-state="empty"]{--bx-nav-top:calc(var(--bx-top) + var(--bx-gap))} #builder.bx .bx-foot .ghint{display:none} } @media (max-width:767px){ #builder.bx .gcard{padding-bottom:0!important} #builder.bx .ghead h3{font-size:17px} #builder.bx .ghead .gsub{display:none} #builder.bx #bMain{margin-top:var(--bx-s3)} #builder.bx .mbar{margin-bottom:var(--bx-s3)} } @media (max-width:420px){ #builder.bx #dxPrev .emu-bezel canvas{width:120px!important;max-width:120px!important} #builder.bx #bMain>.ginput label{display:none} #builder.bx #bMain>.ginput .gsel{max-width:none} } /* ── 4 Navigation ─────────────────────────────────────────────────────────── */ #builder.bx .bx-nav{position:sticky;top:var(--bx-nav-top,calc(var(--bx-top) + var(--bx-gap)));z-index:5;background:var(--bx-bg);margin:0 0 var(--bx-s4)} #builder.bx .bx-nav::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;pointer-events:none; background:linear-gradient(var(--bx-bg),rgba(12,14,18,0))} #builder.bx .bx-tabs{position:relative;display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden; scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity} #builder.bx .bx-tabs::-webkit-scrollbar,#builder.bx .bx-sub::-webkit-scrollbar{display:none} #builder.bx .bx-tab{ position:relative;flex:0 0 auto;max-width:none;min-width:0;display:inline-flex;align-items:center;gap:8px; background:none;border:0;border-radius:10px 10px 0 0;color:var(--dim);cursor:pointer;scroll-snap-align:start; font:600 14px/1 var(--sans);letter-spacing:0;text-transform:none;white-space:nowrap;padding:14px 14px 13px; transition:color .18s,background-color .18s } #builder.bx .bx-tab .bx-ic{flex:none;opacity:.75;order:0} #builder.bx .bx-icw{display:contents} #builder.bx .bx-tab .bx-l{order:1} #builder.bx .bx-tab .bx-x{order:2} #builder.bx .bx-tab .bx-n{order:3} #builder.bx .bx-ls{display:none} #builder.bx .bx-tab:hover{color:var(--txt);background:rgba(255,255,255,.03)} #builder.bx .bx-tab[aria-selected="true"]{color:var(--txt)} #builder.bx .bx-tab[aria-selected="true"] .bx-ic{opacity:1;color:var(--acc)} #builder.bx .bx-tab[aria-selected="true"]::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px;background:var(--acc)} /* Übersicht: rechts angeheftet — Zähler bleibt sichtbar, auch wenn die Leiste waagrecht scrollt */ #builder.bx .bx-tab.bx-pin{margin-left:auto;position:sticky;right:0;z-index:1;background-color:var(--bx-bg)} #builder.bx .bx-tab.bx-pin:hover{background-image:linear-gradient(rgba(255,255,255,.03),rgba(255,255,255,.03))} #builder.bx .bx-tabs[data-ov="r"] .bx-pin::before,#builder.bx .bx-tabs[data-ov="lr"] .bx-pin::before{ content:"";position:absolute;top:0;bottom:0;right:100%;width:36px;pointer-events:none; background:linear-gradient(90deg,rgba(12,14,18,0),var(--bx-bg))} #builder.bx .bx-n{min-width:18px;height:18px;padding:0 5px;border-radius:9px;display:inline-grid;place-items:center; background:var(--acc);color:#1a1000;font:700 10.5px/1 var(--mono)} #builder.bx .bx-x{color:#ff9a2e;font-size:11px;line-height:1} /* position:relative → Bezugsrahmen für die absolut positionierten Vorlese-Texte (.bx-vh): ohne ihn hängen sie an * der klebenden .bx-nav, entkommen der Scroll-Leiste und verbreitern die scrollWidth der .gcard */ #builder.bx .bx-sub{position:relative;display:flex;gap:6px;padding:var(--bx-s3) 0 var(--bx-s1);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} #builder.bx .bx-sub[hidden]{display:none} #builder.bx .bx-sub[data-ov="r"]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)} #builder.bx .bx-tabs[data-ov="l"],#builder.bx .bx-tabs[data-ov="lr"],#builder.bx .bx-sub[data-ov="l"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);mask-image:linear-gradient(90deg,transparent,#000 40px)} #builder.bx .bx-sub[data-ov="lr"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)} /* Bis 1100 px Kurznamen + engerer Abstand: zwischen 900 und 1100 px ist die rechte Spalte nur * ~460–650 px breit, auf dem Tablet die ganze Breite — so passen alle Haupt-Tabs in eine Zeile * (wenn nicht, bleibt die angeheftete Übersicht trotzdem sichtbar) */ @media (max-width:1100px){ #builder.bx .bx-tab{padding:14px 9px 13px;gap:6px} #builder.bx .bx-lf{display:none} #builder.bx .bx-ls{display:inline} } @media (max-width:899px){ #builder.bx .bx-tab{padding:13px 10px 12px;gap:8px} } /* Handy: fünf gleich breite Haupt-Tabs, Symbol über Kurzname — alles ohne Wischen sichtbar */ @media (max-width:639px){ /* 5 × 52 px = 260 px → passt auch bei 320 px Fensterbreite (≈290 px Platz) ohne Scrollen */ #builder.bx .bx-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(52px,1fr);gap:0} #builder.bx .bx-tab{flex-direction:column;justify-content:center;gap:5px;padding:9px 2px 10px;font-size:11.5px;border-radius:10px 10px 0 0} #builder.bx .bx-tab .bx-l{max-width:100%;overflow:hidden;text-overflow:ellipsis} #builder.bx .bx-tab.bx-pin{margin-left:0} #builder.bx .bx-icw{display:inline-grid;place-items:center;position:relative;width:22px;height:20px} #builder.bx .bx-tab .bx-ic{width:20px;height:20px} #builder.bx .bx-icw .bx-x{position:absolute;top:-3px;left:19px;font-size:10px} #builder.bx .bx-icw .bx-n{position:absolute;top:-6px;left:14px;min-width:16px;height:16px;font-size:9.5px;padding:0 4px;box-shadow:0 0 0 2px var(--bx-bg)} #builder.bx .bx-lf{display:none} #builder.bx .bx-ls{display:inline} #builder.bx .bx-tab[aria-selected="true"]::after{left:20%;right:20%} #builder.bx .bx-stab{padding:7px 12px;min-height:32px;font-size:12px} } #builder.bx .bx-stab{ position:relative;flex:0 0 auto;max-width:none;min-width:0;display:inline-flex;align-items:center;gap:6px; background:transparent;border:1px solid var(--line);border-radius:999px;color:var(--dim);cursor:pointer; font:600 12.5px/1 var(--sans);letter-spacing:0;text-transform:none;white-space:nowrap;padding:8px 14px;min-height:34px; transition:color .18s,background-color .18s,border-color .18s } #builder.bx .bx-stab:hover{color:var(--txt);border-color:var(--bx-line2)} #builder.bx .bx-stab[aria-selected="true"]{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22);color:var(--txt)} #builder.bx .bx-tab:focus-visible,#builder.bx .bx-stab:focus-visible,#builder.bx .bx-sum:focus-visible,#builder.bx .bx-pvtg:focus-visible{outline:2px solid rgba(255,162,22,.7);outline-offset:-2px} #builder.bx[data-bx-state="empty"] .bx-nav,#builder.bx[data-bx-state="empty"] .bx-info{display:none} #builder.bx[data-bx-state="loading"] .bx-nav{opacity:.45;pointer-events:none} #builder.bx[data-bx-state="loading"] .bx-info{display:none} /* Übersicht: Einleitung */ #builder.bx .bx-info{margin:0 0 var(--bx-s3);padding:var(--bx-s4);border:1px solid var(--line);border-radius:var(--bx-r-card);background:var(--panel2)} #builder.bx .bx-info-h{margin:0 0 6px;font:700 15px/1.3 var(--sans);color:var(--txt)} #builder.bx .bx-info-p{margin:0;font:400 13px/1.55 var(--sans);color:var(--dim)} #builder.bx .bx-info-base{margin-top:8px;color:var(--dimmer);font-size:12.5px} /* ── 5 Fußleiste ──────────────────────────────────────────────────────────── */ #builder.bx .bx-foot{ position:sticky;bottom:0;z-index:5;margin-top:auto;background:var(--bx-bg);border-top:1px solid var(--line); padding:var(--bx-s3) 0 calc(var(--bx-s4) + env(safe-area-inset-bottom)) } #builder.bx .bx-foot::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:18px;pointer-events:none; background:linear-gradient(rgba(12,14,18,0),var(--bx-bg))} #builder.bx .bx-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--bx-s2) var(--bx-s4)} #builder.bx .bx-sum{ flex:1 1 200px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left; background:none;border:0;border-radius:var(--bx-r-ctl);color:var(--dim);cursor:pointer;padding:6px 8px;margin:0 0 0 -8px; font:500 13.5px/1.3 var(--sans);letter-spacing:0;text-transform:none } #builder.bx .bx-sum:hover{background:rgba(255,255,255,.035)} #builder.bx .bx-sum[hidden]{display:none} #builder.bx .bx-sum b{color:var(--txt);font:700 14px/1 var(--mono)} #builder.bx .bx-sum-go{font-size:12px;color:var(--dimmer)} #builder.bx .bx-sum:disabled{cursor:default} #builder.bx .bx-sum:disabled:hover{background:none} #builder.bx .bx-sum-w{font-size:12px;font-weight:600;color:var(--err)} #builder.bx .bx-sum.is-empty{cursor:default;color:var(--dimmer)} #builder.bx .bx-foot #bBuildBtn{ flex:0 0 auto;width:auto;min-width:230px;max-width:100%;margin:0 0 0 auto;min-height:52px;padding:0 30px;border-radius:999px; justify-content:center;font:650 15px/1.25 var(--sans);letter-spacing:0;text-transform:none;white-space:normal;text-align:center; background-image:linear-gradient(180deg,#FFB840,#FF980A);box-shadow:0 10px 28px -12px rgba(255,150,20,.7),inset 0 1px 0 rgba(255,255,255,.35) } #builder.bx .bx-foot #bBuildBtn:disabled{opacity:.55;cursor:not-allowed} #builder.bx .bx-foot #bBuildBtn.locked{background-image:none;background:#2a2e36;color:var(--dim);box-shadow:none} #builder.bx .bx-foot .btnErr{flex:1 0 100%;margin:0} #builder.bx .bx-foot #crQuote{flex:1 0 100%;margin:0} #builder.bx .bx-foot #bLock{margin:0 0 var(--bx-s3);padding:var(--bx-s3) var(--bx-s4);border-radius:var(--bx-r-card)} #builder.bx .bx-foot #bLock .bm-t{margin:0 0 4px;font:700 13px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:#ffc061} #builder.bx .bx-foot #bLock .bm-p{font-size:12.5px;line-height:1.5} #builder.bx .bx-foot .ghint{margin:var(--bx-s2) 0 0;text-align:left;font-size:11.5px;color:var(--dimmer);line-height:1.45} @media (max-width:899px){ #builder.bx .bx-row{flex-wrap:nowrap;gap:var(--bx-s3)} #builder.bx .bx-row:has(.btnErr),#builder.bx .bx-row:has(#crQuote:not([hidden])){flex-wrap:wrap} #builder.bx .bx-sum{flex:0 0 auto;width:36%;max-width:none;font-size:12.5px;padding:4px 6px;margin-left:-6px} #builder.bx .bx-sum-l{display:flex;flex-direction:column;gap:3px} #builder.bx .bx-dot,#builder.bx .bx-sum-go{display:none} #builder.bx .bx-foot #bBuildBtn{flex:1 1 auto;min-width:0;min-height:50px;padding:0 18px;font-size:14.5px} #builder.bx[data-bx-state="empty"] .bx-foot #bBuildBtn{flex-basis:100%} /* Sperr-Hinweis klebt mit der Fußleiste → auf zwei Zeilen kürzen, Antippen zeigt alles */ #builder.bx .bx-foot #bLock{padding:10px 12px;margin-bottom:10px;cursor:pointer} #builder.bx .bx-foot #bLock:not(.bx-open) .bm-p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #builder.bx .bx-foot #bLock .bm-p{font-size:12px;line-height:1.45} } /* ── 6 Karten, Beschriftungen, Felder ─────────────────────────────────────── */ #builder.bx #bGroups>.ghint{margin:0;padding:28px 16px;border:1px dashed var(--line);border-radius:var(--bx-r-card);text-align:center;color:var(--dim);font-size:13px} #builder.bx .sp-card,#builder.bx .dg-color{background:var(--panel2);border:1px solid var(--line);border-radius:var(--bx-r-card);padding:var(--bx-s4);margin:0 0 var(--bx-s3)} #builder.bx details.sp-card{padding:0;overflow:hidden} #builder.bx .sp-card-h{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 var(--bx-s3);font:650 14.5px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--txt)} #builder.bx details.sp-card>summary.sp-card-h{margin:0;padding:14px var(--bx-s4)} #builder.bx details.sp-card .sp-card-b{padding:0 var(--bx-s4) var(--bx-s4)} #builder.bx .sp-card-sub{padding:0 var(--bx-s4) 6px} #builder.bx details.bx-solo>summary.sp-card-h{cursor:default;padding-bottom:var(--bx-s2)} #builder.bx details.bx-solo>summary.sp-card-h:hover{background:none} #builder.bx details.bx-solo>summary .sp-chev{display:none} #builder.bx .sp-card-t{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px} #builder.bx .sp-fn{border-top:1px solid var(--line);padding:var(--bx-s3) 0} #builder.bx .sp-fn:first-child{border-top:0;padding-top:2px} #builder.bx .sp-fn:last-child{padding-bottom:0} #builder.bx .sp-fn-l{font:600 13.5px/1.3 var(--sans);color:var(--txt)} #builder.bx .sp-card-b>.sp-fn+.sp-fn{margin-top:0} /* eine Beschriftungs-Art: Sans 12px, gedimmt, ohne Versalien */ #builder.bx .ccl,#builder.bx .dxf-l,#builder.bx .fx-h,#builder.bx .dg-h,#builder.bx .sprow label,#builder.bx .crLive .crl-h,#builder.bx .rbTitle{ font:600 12px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--dim) } #builder.bx .dg-h{margin:var(--bx-s3) 0 var(--bx-s1)} #builder.bx .sp-mini{font:400 12px/1.45 var(--sans);letter-spacing:0;color:var(--dim2)} #builder.bx .fx-h2{font-size:12px;color:var(--dim2)} /* Felder */ #builder.bx select.sp-sel,#builder.bx .gsel,#builder.bx .sp-txt,#builder.bx .sp-num,#builder.bx .dxf input[type=text]{ background-color:var(--bx-field);border:1px solid var(--line);border-radius:var(--bx-r-ctl);color:var(--txt); font:500 13.5px/1.2 var(--sans);letter-spacing:0;min-height:var(--bx-ctl-h);padding:8px 12px;box-shadow:none;box-sizing:border-box } #builder.bx select.sp-sel,#builder.bx .gsel{padding-right:34px;width:auto;max-width:100%;min-width:180px} #builder.bx .dxf select.sp-sel,#builder.bx .dxf .dxf-in{width:100%;max-width:440px} #builder.bx .sp-num{width:72px;font-family:var(--mono)} #builder.bx select.sp-sel:focus,#builder.bx .gsel:focus,#builder.bx .sp-txt:focus,#builder.bx .sp-num:focus,#builder.bx .dxf input[type=text]:focus{ outline:none;border-color:rgba(255,162,22,.55);box-shadow:var(--bx-ring) } #builder.bx .sprow{gap:var(--bx-s2) var(--bx-s3)} #builder.bx .dxf{gap:6px;margin-bottom:var(--bx-s3)} /* Farbfeld (Klecks + Hex) */ #builder.bx .cc{height:var(--bx-ctl-h);border:1px solid var(--line);border-radius:var(--bx-r-ctl);background:var(--bx-field)} #builder.bx .cc .cc-sw{height:36px;width:40px!important;min-width:40px;max-width:40px!important;flex-basis:40px;border-right:1px solid var(--line)!important} #builder.bx .cc .cc-sw::-webkit-color-swatch-wrapper{padding:5px} #builder.bx .cc .cc-hex{height:36px;font:600 12.5px/1 var(--mono)} #builder.bx .cc:focus-within{border-color:rgba(255,162,22,.55);box-shadow:var(--bx-ring)} #builder.bx .ccgrid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--bx-s2) var(--bx-s4)} #builder.bx .ccrow{padding:6px 6px 6px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.18)} #builder.bx .ccpair{gap:var(--bx-s2);margin-bottom:var(--bx-s2)} /* Kosten-Etiketten neutral (Akzent nur für Bau-Button, aktiven Tab, Fokus) */ #builder.bx .cost{color:var(--dim);background:rgba(255,255,255,.05);border-color:var(--line);border-radius:6px;font:600 11px/1.5 var(--mono)} #builder.bx .cost.free{color:#7fdc7b;background:rgba(26,178,22,.08);border-color:rgba(26,178,22,.22)} #builder.bx .cost em,#builder.bx .dx-seg button em{color:var(--dim2)} /* Experimentell: deutlich, aber ruhig */ #builder.bx .xbadge{background:transparent;color:#ffb14d;border:1px solid rgba(255,138,0,.5);padding:1px 6px;font:700 9.5px/1.4 var(--mono);letter-spacing:.06em} #builder.bx .xcard{border-color:rgba(255,138,0,.32)!important;box-shadow:inset 2px 0 0 rgba(255,138,0,.85)} #builder.bx .xnote{margin:0 0 var(--bx-s3);padding:var(--bx-s3) var(--bx-s4);border-radius:var(--bx-r-card);border:1px solid rgba(255,138,0,.35);background:rgba(255,138,0,.07);font-size:12.5px;line-height:1.55} /* Auswahl-Chips + Kosten (Übersicht) */ #builder.bx #dxPend{display:flex;flex-wrap:wrap;gap:var(--bx-s2);margin:0 0 var(--bx-s3);padding:var(--bx-s4);border:1px solid var(--line);border-radius:var(--bx-r-card);background:var(--panel2)} #builder.bx .sp-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 5px 5px 11px;border:1px solid var(--line);border-radius:var(--bx-r-chip);background:rgba(255,255,255,.05);color:var(--txt);font:500 12.5px/1.25 var(--sans)} #builder.bx .sp-chip b{display:inline-grid;place-items:center;width:22px;height:22px;margin:0;border-radius:6px;color:var(--dim);font-size:14px;cursor:pointer} #builder.bx .sp-chip b:hover{background:rgba(255,107,115,.15);color:var(--err)} #builder.bx .sp-chip.xchip{border-color:rgba(255,138,0,.5);background:rgba(255,138,0,.08);color:#ffc27a} #builder.bx .crLive{margin:0 0 var(--bx-s3);padding:var(--bx-s4);border:1px solid var(--line);border-radius:var(--bx-r-card);background:var(--panel2);font-size:13px} #builder.bx .crLive .crl-h{margin-bottom:var(--bx-s2)} #builder.bx .crLive .crl-r{padding:4px 0;color:var(--dim)} #builder.bx .crLive .crl-r>span,#builder.bx .crLive .crl-t>span{font-family:var(--sans)} #builder.bx .crLive .crl-r b{color:var(--txt)} #builder.bx .crLive .crl-t{margin-top:var(--bx-s2);padding-top:var(--bx-s2);border-color:var(--line)} #builder.bx .crLive .crl-n{font-size:12px} /* ── 7 Ein Stil für Umschalter ────────────────────────────────────────────── */ /* Segment-Gruppen (Auswahl genau einer Option) */ #builder.bx .dx-seg,#builder.bx .fx-seg,#builder.bx .emu-seg,#builder.bx #dxBody .dx-tabs{ display:flex;flex-wrap:wrap;gap:2px;padding:3px;margin:6px 0 10px; background:rgba(0,0,0,.32);border:1px solid var(--line);border-radius:12px } #builder.bx .dx-seg{display:inline-flex;flex-wrap:nowrap;margin:0} #builder.bx .dx-seg button,#builder.bx .fx-seg button,#builder.bx .emu-seg button,#builder.bx #dxBody .dx-tabs .dx-tab{ flex:1 1 auto;min-height:32px;padding:7px 12px;margin:0;border:0;border-radius:9px;background:none;box-shadow:none;cursor:pointer; color:var(--dim);font:600 12.5px/1.2 var(--sans);letter-spacing:0;text-transform:none;white-space:nowrap } #builder.bx .dx-seg button:hover,#builder.bx .fx-seg button:hover,#builder.bx .emu-seg button:hover,#builder.bx #dxBody .dx-tabs .dx-tab:hover{color:var(--txt)} #builder.bx .dx-seg button.on,#builder.bx .fx-seg button.on,#builder.bx .emu-seg button.on,#builder.bx #dxBody .dx-tabs .dx-tab.on{ background:var(--bx-on);color:var(--txt);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13) } #builder.bx #dxBody .dxa-place{gap:var(--bx-s2)} #builder.bx #dxBody .dxa-place .dx-tab{white-space:normal;text-align:left} #builder.bx .dxe-dsel button{min-width:34px;flex:1 0 34px} /* An/Aus-Schalter (Pillen) */ #builder.bx .fx-tog,#builder.bx #dxPrev .emu-b{ display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:7px 13px;border-radius:999px;cursor:pointer; background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--dim);font:600 12.5px/1 var(--sans) } #builder.bx .fx-tog.on,#builder.bx #dxPrev .emu-b.on{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);color:var(--txt)} #builder.bx .dxe-chk,#builder.bx .emu-chk{font:500 13px/1.35 var(--sans);color:var(--dim);gap:8px} #builder.bx input[type=checkbox],#builder.bx input[type=range]{accent-color:var(--acc)} /* kleine Aktions-Buttons */ #builder.bx .abtn{ display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px!important;padding:8px 13px!important; border:1px solid var(--line);border-radius:var(--bx-r-ctl);background:rgba(255,255,255,.045);color:var(--txt);cursor:pointer; font:600 12.5px/1 var(--sans)!important;letter-spacing:0;text-transform:none } #builder.bx .abtn:hover{background:rgba(255,255,255,.08);border-color:var(--bx-line2)} #builder.bx #bGroups .btn.sm{min-height:38px;padding:9px 16px;border-radius:999px;font-size:13px} #builder.bx .rbTempoGrid button,#builder.bx .rbTbtn{border-radius:8px} #builder.bx .rbTbtn.on{background:var(--bx-on);color:var(--txt);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);border-color:transparent} /* aufklappbare Unterbereiche (Feinabstimmung, Bild-Effekte) */ #builder.bx .fx,#builder.bx .dxa-more{border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.16)} #builder.bx .fx summary,#builder.bx .dxa-more summary{font:600 13px/1.3 var(--sans)} #builder.bx .fx-grp{border-color:var(--line)} #builder.bx .dxa-pick{border-color:rgba(255,255,255,.14);border-radius:var(--bx-r-card)} #builder.bx .dxa-pick-ico{color:var(--txt);background:rgba(255,255,255,.07)} #builder.bx .dxa-tile{border-color:var(--line);border-radius:12px;background:var(--bx-field)} #builder.bx .dxa-tile.on{border-color:rgba(255,162,22,.75);box-shadow:var(--bx-ring)} #builder.bx .dxa-grid{max-height:none;overflow:visible} #builder.bx .dxa-cl{border-color:var(--line);border-radius:12px} /* ── 8 Sichtbarkeit je Tab ────────────────────────────────────────────────── */ #builder.bx #bGroups>.dx-tabs[role="tablist"]{display:none!important} /* Original-Leiste → ersetzt */ #builder.bx #dxBody .dxa-filter{display:none!important} /* Asset-Filter → Untertabs */ #builder.bx #dxBody>.dx-costnote{display:none} #builder.bx:not([data-bx-main="review"]) .bx-info, #builder.bx:not([data-bx-main="review"]) #bGroups>#dxPend, #builder.bx:not([data-bx-main="review"]) #bGroups>#dxCost, #builder.bx:not([data-bx-main="review"]) #bGroups>.xnote{display:none!important} #builder.bx[data-bx-main="review"] #bGroups>#dxBody{display:none} /* Asset-Übersicht: Kopf ruhiger, Karte ohne doppelte Überschrift-Optik */ #builder.bx #dxBody .sp-card>.sp-card-h .sp-mini{font-weight:400} /* ── 9 Emulator ───────────────────────────────────────────────────────────── */ #builder.bx #dxPrev.emu{margin:0;gap:var(--bx-s3);grid-template-columns:minmax(0,1fr)!important;min-width:0} #builder.bx #dxPrev .emu-card{min-width:0;background:var(--panel2);border:1px solid var(--line);border-radius:var(--bx-r-card)} #builder.bx #dxPrev .emu-card h3{display:flex;align-items:center;gap:8px;font:650 13px/1.3 var(--sans);letter-spacing:0;text-transform:none} #builder.bx #dxPrev .emu-bezel{border-color:var(--line)} #builder.bx #dxPrev .emu-note{font-size:11.5px;color:var(--dim2)} #builder.bx .bx-pvtg{ flex:none;width:30px;height:30px;margin:-4px -2px -4px 2px;display:inline-grid;place-items:center; border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.04);color:var(--dim);cursor:pointer } #builder.bx .bx-pvtg:hover{color:var(--txt);border-color:var(--bx-line2)} #builder.bx .bx-pvtg svg{transition:transform .2s} @media (min-width:900px){ #builder.bx #dxPrev .emu-card{padding:14px} #builder.bx #dxPrev .emu-bezel canvas{width:100%!important;max-width:100%!important} #builder.bx #dxPrev .emu-card:not(.emu-ctl)>.emu-note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;cursor:help} } @media (prefers-reduced-motion:reduce){ #builder.bx .bx-tab,#builder.bx .bx-stab,#builder.bx .bx-pvtg svg{transition:none} } /* ── 10 Niedrige Fenster (Handy quer, Laptop mit Zoom) ───────────────────── * Sonst bliebe zwischen klebender Vorschau/Navigation und Fußleiste kaum Platz. * Dann kleben nur noch Kopfleiste und Fußleiste. */ @media (max-height:600px){ #builder.bx .bx-nav{position:relative;top:auto} #builder.bx .bx-nav::after{display:none} #builder.bx #bMain>#dxPrev{position:relative;top:auto} #builder.bx .bx-foot{padding-top:var(--bx-s2);padding-bottom:calc(var(--bx-s2) + env(safe-area-inset-bottom))} #builder.bx .bx-foot .ghint{display:none} } /* v3.28.1 — echte Emulator-Vorschau im Live-Display */ .dx-real{display:flex;flex-direction:column;gap:8px} .dx-real-bar{display:flex;gap:6px;flex-wrap:wrap} .dx-real-screen{display:flex;align-items:center;justify-content:center;min-height:340px;background:#05070a;border:1px solid rgba(255,255,255,.09);border-radius:12px;overflow:hidden} .dx-real-img{display:block;width:240px;height:320px;image-rendering:pixelated;border-radius:6px} .dx-real-msg{color:#c9d3e2;text-align:center;padding:0 10px} .dx-real-msg.x{color:#ff8c69}