/* ========================================================================== RED STUDIO – audio/design.css ███ REDWEB PLUGIN SUITE — DESIGN DNA ███ Zentrale Design-Tokens + Primitives für ALLE Plugins. Ein einziges Ökosystem: gamifiziertes Studio-/Sci-Fi-HUD trifft High-End-Audio. Primär #980A0A · Sekundär #AB27E8. Jedes Plugin teilt sich diese Sprache. Präfix der Tokens: --rw- · Komponenten: .rw-* ========================================================================== */ :root { /* ---- Marke ---- */ --rw-primary: #980A0A; --rw-primary-hi: #d11414; --rw-secondary: #AB27E8; --rw-secondary-hi: #c45cf4; /* ---- Flächen / Tiefe ---- */ --rw-bg: #090b10; --rw-bg-2: #0d1017; --rw-glass: rgba(20,24,32,.74); --rw-glass-2: rgba(32,38,50,.55); --rw-panel: #121620; --rw-panel-2: #171c28; --rw-stroke: rgba(255,255,255,.07); --rw-stroke-2: rgba(255,255,255,.14); --rw-inset: #05070b; /* ---- Text ---- */ --rw-text: #e9ecf3; --rw-muted: #8b93a3; --rw-dim: #5d6473; /* ---- Leuchten / Glows ---- */ --rw-glow-p: 0 0 16px rgba(152,10,10,.55); --rw-glow-s: 0 0 16px rgba(171,39,232,.50); --rw-line-p: rgba(152,10,10,.55); --rw-line-s: rgba(171,39,232,.55); /* ---- Form / Typo / Motion ---- */ --rw-r: 14px; --rw-r-sm: 9px; --rw-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --rw-mono: "SF Mono",ui-monospace,Menlo,Consolas,monospace; --rw-ease: cubic-bezier(.22,.61,.36,1); --rw-dur: .18s; } /* ---- Bewegungen (dezent, hochwertig, nie nervös) ---- */ @keyframes rw-pulse { 0%,100%{opacity:.55} 50%{opacity:1} } @keyframes rw-sheen { 0%{background-position:-180% 0} 100%{background-position:280% 0} } @keyframes rw-rise { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} } /* ===================== PRIMITIVES ===================== */ /* Glas-Panel mit Tiefe + feinem oberen Lichtsaum */ .rw-panel { position:relative; background:linear-gradient(180deg,var(--rw-glass-2),var(--rw-glass)); border:1px solid var(--rw-stroke); border-radius:var(--rw-r); box-shadow:0 18px 48px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(12px); } .rw-panel::before { content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); pointer-events:none; } /* HUD-Raster als subtiler Hintergrund (Sci-Fi-Anmutung) */ .rw-hud { background-image: linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px); background-size:22px 22px; } /* Kategorie-/Status-Badge */ .rw-badge { display:inline-flex; align-items:center; gap:5px; font-size:9px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; padding:3px 8px; border-radius:20px; color:var(--rw-secondary-hi); border:1px solid var(--rw-line-s); background:rgba(171,39,232,.08); } /* Dünner Trenner */ .rw-div { height:1px; background:linear-gradient(90deg,transparent,var(--rw-stroke-2),transparent); } /* Leucht-Akzentlinie (primär/sekundär) */ .rw-accent-p { box-shadow:var(--rw-glow-p); } .rw-accent-s { box-shadow:var(--rw-glow-s); } /* ═══════════════════════════════════════════════════════════════════════════ REDWEB-BILDLAUFLEISTEN ═══════════════════════════════════════════════════════════════════════════ ⚠⚠ NUR AUF ANFORDERUNG. Die Regeln greifen ausschliesslich unterhalb von `.rw-scrollbars`. Ein globales `*::-webkit-scrollbar` in dieser Datei wuerde das Aussehen jeder Seite veraendern, die sie einbindet, einschliesslich der laufenden DAW. Wer den Hausstil will, setzt die Klasse an den Body: ⚠ Die DAW selbst bleibt unberuehrt: `.rs-arrange` bringt eine eigene, breitere Leiste mit und ist spezifischer als diese Regeln. Masse und Farbe folgen dem Hausstil aus der Guardian-Basis (6px, dunkle Spur, roter Griff); der Verlauf nach Violett kommt aus der Plugin-Sprache oben. ═══════════════════════════════════════════════════════════════════════════ */ .rw-scrollbars { /* Firefox kennt keine Pseudo-Elemente fuer die Leiste, nur diese zwei Eigenschaften. Sie muessen deshalb getrennt gepflegt werden. */ scrollbar-width: thin; scrollbar-color: var(--rw-primary) var(--rw-inset); } .rw-scrollbars ::-webkit-scrollbar, .rw-scrollbars::-webkit-scrollbar { width: 6px; height: 6px; } .rw-scrollbars ::-webkit-scrollbar-track, .rw-scrollbars::-webkit-scrollbar-track { background: var(--rw-inset); border-radius: 3px; } .rw-scrollbars ::-webkit-scrollbar-thumb, .rw-scrollbars::-webkit-scrollbar-thumb { /* Rot nach Violett: Redweb und Hypnagogia in einem Griff. */ background: linear-gradient(180deg, var(--rw-primary-hi), var(--rw-secondary)); border-radius: 3px; } .rw-scrollbars ::-webkit-scrollbar-thumb:hover, .rw-scrollbars::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--rw-secondary-hi), var(--rw-primary-hi)); } /* ⚠ Die Ecke zwischen zwei Leisten bleibt sonst hellgrau und faellt auf einer dunklen Seite sofort auf. */ .rw-scrollbars ::-webkit-scrollbar-corner, .rw-scrollbars::-webkit-scrollbar-corner { background: var(--rw-inset); }