/* ============================================================ SOUNDMAP CORPORATE DESIGN — "Style Shield" ------------------------------------------------------------ EINE verbindliche Design-Datei fuer die GANZE Suite. Wird in JEDEM Modul NACH shared/styles.css geladen -> gewinnt im Cascade. Rein additiv: ueberschreibt nur Optik (Form/Farbe), loescht keine bestehende Regel, aendert kein Layout/Funktion. Grundsatz: Graphite + Neon-Lime. - Aktiv / primaer = vollflaechig Lime (var(--accent)) + dunkler Text - Inaktiv = grau (Surface + Muted) - Alle Knoepfe/Chips = runde Pillen (border-radius 999px) - Farben NUR ueber Tokens (var(--accent), --ok, --warn, --danger, --text, --surface ...). Keine neuen Hex-Werte (Ausnahme: Schwarz im Wertfeld des Steppers ist Absicht). Tokens kommen aus shared/styles.css (Dark + Light). ============================================================ */ /* ---- Native Bedienelemente global auf Lime (null Layout-Risiko) ---- */ input[type="range"] { accent-color: var(--accent); } input[type="checkbox"] { accent-color: var(--accent); } input[type="radio"] { accent-color: var(--accent); } /* ---- Buttons + Auswahl als runde Pillen ---- */ .btn, .btn-primary, .btn-secondary, .btn-danger, .btn-ghost, .mini-btn, .seg__btn, .target-bar__btn, .btn--small, .btn--big, .btn--full { border-radius: 999px; } .btn--icon { border-radius: 50%; } /* ---- Alt-Teal (#4ec9b0) -> Marke Lime, ohne alte Regeln zu loeschen ---- */ .btn--ok { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } .btn--ok:hover { background: var(--accent-soft); filter: brightness(1.15); } .mini-btn.active, .mini-btn--active { background: var(--accent-soft); color: var(--text); border-color: var(--accent); } /* ============================================================ WERT-STEPPER (freigegeben 2026-06) Lime-Pille, schwarze -/+ , schwarzes Wertfeld in der Mitte. PFLICHT-Verhalten: Doppelklick/Tap aufs Feld -> Zahl eintippen (JS im jeweiligen Modul; CSS gibt nur die Optik vor). Markup: ============================================================ */ .cd-stepper { display:inline-flex; align-items:center; background:var(--accent); border-radius:999px; padding:5px; } .cd-stepper__pm { width:30px; height:42px; display:flex; align-items:center; justify-content:center; color:#000 !important; -webkit-text-fill-color:#000; font-size:24px; font-weight:700; line-height:1; background:transparent; border:none; cursor:pointer; user-select:none; font-family:inherit; padding:0; } .cd-stepper__pm:active { transform:scale(0.9); } .cd-stepper__field { height:42px; min-width:120px; border-radius:999px; background:#000; color:var(--text); display:inline-flex; align-items:center; justify-content:center; gap:6px; text-align:center; font-size:16px; font-weight:600; padding:0 18px; margin:0 3px; border:none; font-family:inherit; } .cd-stepper__field:focus { outline:none; box-shadow:0 0 0 2px var(--accent); } .cd-stepper__unit { font-size:12px; color:var(--text-muted); font-weight:400; } .cd-stepper--big .cd-stepper__pm { width:38px; height:52px; font-size:30px; } .cd-stepper--big .cd-stepper__field { height:52px; min-width:160px; font-size:20px; } /* ============================================================ BESTEHENDES .stepper-SYSTEM (Tuning/Messung) auf Corporate-Pill. Markup passt schon: [− input unit +]. Wir geben nur die Optik: Lime-Pille aussen, schwarze −/+ Symbole, schwarzes Wertfeld. (Laedt NACH den lokalen Modul-Styles -> gewinnt im Cascade.) ============================================================ */ .stepper { background: var(--accent); border: none; border-radius: 999px; padding: 4px; height: auto; overflow: visible; align-items: center; } .stepper:focus-within { box-shadow: 0 0 0 2px var(--accent-soft); } .stepper__btn { background: transparent; border: none; color: #000 !important; -webkit-text-fill-color: #000; font-weight: 700; width: 30px; height: 38px; } .stepper__btn:hover { background: transparent; filter: brightness(0.8); color: #000 !important; } .stepper__btn:active { background: transparent; filter: brightness(0.65); } .stepper__input { background: #000 !important; color: var(--text); border: none !important; border-radius: 8px !important; height: 38px; min-width: 56px; margin: 0 2px; } .stepper__unit { background: #000 !important; color: var(--text-muted); border: none !important; border-radius: 8px; margin-right: 2px; padding: 0 8px; } /* Wert + Einheit zu EINEM schwarzen Feld verschmelzen (keine Lime-Lücke) */ .stepper__input:has(+ .stepper__unit) { border-radius: 8px 0 0 8px !important; margin-right: 0 !important; } .stepper:has(.stepper__unit) .stepper__unit { border-radius: 0 8px 8px 0 !important; margin-left: 0 !important; padding-left: 2px !important; } .stepper--lg .stepper__btn, .stepper--xl .stepper__btn { color: #000 !important; -webkit-text-fill-color: #000; } .stepper--lg .stepper__input, .stepper--xl .stepper__input { height: 44px; } /* ============================================================ SCHALTER (Toggle) class="cd-switch" (+ .on) ============================================================ */ .cd-switch { width:44px; height:25px; border-radius:999px; background:var(--surface2); border:1px solid var(--border-strong); position:relative; cursor:pointer; display:inline-block; flex:none; vertical-align:middle; } .cd-switch::after { content:""; position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%; background:var(--text-muted); transition:left 120ms, background 120ms; } .cd-switch.on { background:var(--accent); border-color:var(--accent); } .cd-switch.on::after { left:21px; background:var(--accent-contrast); } /* ============================================================ HAKEN (eigenes Kaestchen) class="cd-check" (+ .on) Fuer native Checkboxen reicht accent-color oben. ============================================================ */ .cd-check { width:21px; height:21px; border-radius:6px; border:1px solid var(--border-strong); background:var(--surface2); display:inline-flex; align-items:center; justify-content:center; color:transparent; font-size:14px; cursor:pointer; flex:none; } .cd-check.on { background:var(--accent); border-color:var(--accent); color:var(--accent-contrast); } /* ============================================================ STATUS-PILLEN class="cd-status cd-status--ok|warn|acc|danger" ============================================================ */ .cd-status { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; font-size:12px; font-weight:500; } .cd-status--ok { background:rgba(74,222,128,.16); color:var(--ok); } .cd-status--warn { background:rgba(255,180,84,.16); color:var(--warn); } .cd-status--acc { background:var(--accent-soft); color:var(--accent); } .cd-status--danger { background:var(--danger-soft); color:var(--danger); } /* ============================================================ GERAHMTE FUNKTIONS-KARTE class="cd-card" + Kopf "cd-card__hd" (wie die DSP-Verbindungs-Karte) ============================================================ */ .cd-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px; } .cd-card__hd { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:500; color:var(--accent); margin:0 0 12px; } .cd-card__hd i { font-size:15px; }