diff --git a/web/STYLEGUIDE-SOUNDBOARD-MAIN.md b/web/STYLEGUIDE-SOUNDBOARD-MAIN.md new file mode 100644 index 0000000..667eba7 --- /dev/null +++ b/web/STYLEGUIDE-SOUNDBOARD-MAIN.md @@ -0,0 +1,366 @@ +# Soundboard — Main Branch Design Reference + +Snapshot des Soundboard-Designs vom Main-Branch (v1.8.x) vor dem CI Redesign. +Dieses Dokument dient als Referenz um zum urspruenglichen Design zurueckzukehren. + +--- + +## Design-Identitaet + +- **Aesthetic:** Discord-inspiriert, soft glass, abgerundete Pill-Shapes +- **Palette:** Kuehl Blau-Grau mit Blurple-Accent +- **Font:** DM Sans (bereits auf main), fallback Segoe UI +- **Radius:** 8px Standard, 12px large, 20px fuer Pills (Buttons, Chips, Search) +- **Effekte:** Glow-Shadows, Accent-Glows, Radial-Gradient Overlays, Pulse-Animationen + +--- + +## Theme-Variablen (`.sb-app` Scope) + +### Default Theme (Discord Blurple) + +```css +.sb-app { + --bg-deep: #1a1b1e; + --bg-primary: #1e1f22; + --bg-secondary: #2b2d31; + --bg-tertiary: #313338; + --bg-modifier-hover: rgba(79, 84, 92, .16); + --bg-modifier-active: rgba(79, 84, 92, .24); + --bg-modifier-selected: rgba(79, 84, 92, .32); + + --text-normal: #dbdee1; + --text-muted: #949ba4; + --text-faint: #6d6f78; + + --accent: #5865f2; + --accent-rgb: 88, 101, 242; + --accent-hover: #4752c4; + --accent-glow: rgba(88, 101, 242, .45); + + --green: #23a55a; + --red: #f23f42; + --yellow: #f0b232; + --white: #ffffff; + + --font: 'DM Sans', 'Outfit', 'gg sans', 'Noto Sans', sans-serif; + --radius: 8px; + --radius-lg: 12px; + --shadow-low: 0 1px 3px rgba(0, 0, 0, .24); + --shadow-med: 0 4px 12px rgba(0, 0, 0, .32); + --shadow-high: 0 8px 24px rgba(0, 0, 0, .4); + --transition: 150ms cubic-bezier(.4, 0, .2, 1); + + --card-size: 110px; + --card-emoji: 28px; + --card-font: 11px; +} +``` + +### Alternative Themes + +```css +/* Midnight Purple */ +[data-theme="purple"] { + --bg-deep: #13111c; --bg-primary: #1a1726; + --bg-secondary: #241f35; --bg-tertiary: #2e2845; + --accent: #9b59b6; --accent-glow: rgba(155, 89, 182, .45); +} + +/* Forest */ +[data-theme="forest"] { + --bg-deep: #0f1a14; --bg-primary: #142119; + --bg-secondary: #1c2e22; --bg-tertiary: #253a2c; + --accent: #2ecc71; --accent-glow: rgba(46, 204, 113, .4); +} + +/* Sunset (aehnlich dem spaeter eingefuehrten CI-Redesign) */ +[data-theme="sunset"] { + --bg-deep: #1a1210; --bg-primary: #231815; + --bg-secondary: #2f201c; --bg-tertiary: #3d2a24; + --accent: #e67e22; --accent-glow: rgba(230, 126, 34, .4); +} + +/* Ocean */ +[data-theme="ocean"] { + --bg-deep: #0a1628; --bg-primary: #0f1e33; + --bg-secondary: #162a42; --bg-tertiary: #1e3652; + --accent: #3498db; --accent-glow: rgba(52, 152, 219, .4); +} +``` + +--- + +## Layout-Struktur + +``` +┌──────────────────────────────────────────────────────────────┐ +│ Top Bar (52px, --bg-secondary) │ +│ [Logo] [Title] ──── [Clock 22px] ──── [Channel▾] [Status] │ +├──────────────────────────────────────────────────────────────┤ +│ Toolbar (wrap, --bg-primary) │ +│ [Alle|Neu|Fav] [search...] [link...] [Download] [Stop] │ +│ [Shuffle] [Party] [Volume] [HeadsetSwitch] [Size] [Themes] │ +├──────────────────────────────────────────────────────────────┤ +│ Analytics Strip (--bg-primary) │ +│ [Most Played: chip chip chip ...] [# Sounds] [# Users] │ +├──────────────────────────────────────────────────────────────┤ +│ Category Strip (--bg-primary, scrollable) │ +│ [● A 95] [● B 12] [● C 34] ... │ +├──────────────────────────────────────────────────────────────┤ +│ │ +│ Sound Grid (--bg-primary, scroll-y) │ +│ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │ +│ │ 😂 │ │ 🎺 │ │ 💀 │ │ 🔊 │ │ +│ │ name │ │ name │ │ name │ │ name │ ← 110px, aspect 1:1 │ +│ └──────┘ └──────┘ └──────┘ └──────┘ │ +│ │ +├──────────────────────────────────────────────────────────────┤ +│ Now Playing Bar (--bg-secondary, 56px) │ +│ [▶ emoji name ───── progress ───── duration] [vol] [queue] │ +└──────────────────────────────────────────────────────────────┘ +``` + +--- + +## Kernkomponenten + +### Top Bar + +```css +.topbar { + height: 52px; + padding: 0 20px; + background: var(--bg-secondary); + border-bottom: 1px solid rgba(0, 0, 0, .24); + gap: 16px; +} +``` + +- Logo: 28x28px, accent-bg, `border-radius: 8px` +- Title: 16px, weight 700, `--white` +- Clock: 22px, weight 700, `font-variant-numeric: tabular-nums` + +### Channel Dropdown (Pill-Style) + +```css +.channel-btn { + padding: 5px 12px 5px 10px; + border: 1px solid rgba(255, 255, 255, .08); + border-radius: 20px; /* Pill! */ + background: var(--bg-tertiary); + font-size: 13px; + font-weight: 600; +} +``` + +### Connection Badge (Pill-Style) + +```css +.connection { + padding: 4px 10px; + border-radius: 20px; /* Pill! */ + background: rgba(35, 165, 90, .12); + color: var(--green); + font-size: 12px; + font-weight: 600; +} +.conn-dot { + width: 7px; height: 7px; + border-radius: 50%; + background: var(--green); + box-shadow: 0 0 6px rgba(35, 165, 90, .6); /* Glow! */ + animation: pulse-dot 2s ease-in-out infinite; +} +``` + +### Category Tabs (Pill-Buttons) + +```css +.cat-tab { + padding: 6px 14px; + border-radius: 20px; /* Pill! */ + background: var(--bg-tertiary); + font-size: 13px; + font-weight: 600; +} +.cat-tab.active { + background: var(--accent); + color: var(--white); +} +``` + +### Search (Pill-Input) + +```css +.search-input { + height: 32px; + padding: 0 28px 0 32px; + border: 1px solid rgba(255, 255, 255, .06); + border-radius: 20px; /* Pill! */ + background: var(--bg-secondary); + font-size: 13px; +} +.search-input:focus { + border-color: var(--accent); + box-shadow: 0 0 0 2px var(--accent-glow); /* Glow Ring! */ +} +``` + +### Toolbar Buttons (Pill, farbcodiert) + +```css +.tb-btn { + padding: 6px 12px; + border: 1px solid rgba(255, 255, 255, .08); + border-radius: 20px; /* Pill! */ + background: var(--bg-tertiary); + font-size: 12px; + font-weight: 600; +} +/* Farbcodes: */ +.tb-btn.random { border-color: rgba(88, 101, 242, .3); color: var(--accent); } +.tb-btn.party { border-color: rgba(240, 178, 50, .3); color: var(--yellow); } +.tb-btn.stop { border-color: rgba(242, 63, 66, .3); color: var(--red); } +``` + +### Sound Cards + +```css +.sound-card { + background: var(--bg-secondary); + border-radius: var(--radius-lg); /* 12px */ + border: 2px solid transparent; + aspect-ratio: 1; + padding: 12px 6px 8px; + /* Enter-Animation */ + animation: card-enter 350ms ease-out forwards; +} + +/* Hover: Glow + Gradient Overlay */ +.sound-card:hover { + background: var(--bg-tertiary); + transform: translateY(-3px); + box-shadow: var(--shadow-med), 0 0 20px var(--accent-glow); + border-color: rgba(88, 101, 242, .2); +} + +/* Radial-Gradient Pseudo-Element */ +.sound-card::before { + background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 70%); + opacity: 0; /* wird bei hover auf 1 */ +} + +/* Playing State: Pulsierender Glow */ +.sound-card.playing { + border-color: var(--accent); + animation: card-enter 350ms, playing-glow 1.2s infinite alternate; +} +@keyframes playing-glow { + from { box-shadow: 0 0 4px var(--accent-glow); } + to { box-shadow: 0 0 16px var(--accent-glow); } +} +``` + +- Emoji: 28px, weight 800, opacity .7 → 1 on hover, scale(1.15) +- Name: 11px, weight 600, ellipsis +- Duration: 9px, `--text-faint` + +### Analytics Strip + +```css +.analytics-card { + padding: 8px 12px; + border-radius: 12px; + background: var(--bg-secondary); + border: 1px solid rgba(255, 255, 255, .08); +} +.analytics-chip { + padding: 3px 8px; + border-radius: 999px; /* Full Pill */ + background: rgba(var(--accent-rgb), .15); + color: var(--accent); + font-size: 11px; + font-weight: 600; +} +``` + +### Category Chips + +```css +.cat-chip { + padding: 4px 12px; + border-radius: 20px; /* Pill! */ + background: var(--bg-secondary); + border: 1px solid rgba(255, 255, 255, .06); + font-size: 12px; + font-weight: 600; +} +.cat-chip.active { + background: rgba(88, 101, 242, .1); /* Accent-tinted */ +} +``` + +--- + +## Signifikante Unterschiede zum CI Redesign (v3) + +| Eigenschaft | Main (dieses Dokument) | CI Redesign (nightly) | +|-----------------|-------------------------------|--------------------------------| +| Palette | Kuehl Blau-Grau `#1a1b1e` | Warm Braun `#1a1810` | +| Accent | Blurple `#5865f2` | Ember Orange `#e67e22` | +| Font global | Segoe UI | DM Sans | +| Font Soundboard | DM Sans (bereits) | DM Sans | +| Border-Radius | 8/12/20px (Pills ueberall) | 4/6px (keine Pills) | +| Glow-Effekte | Ja (accent-glow, pulse) | Nein | +| Card ::before | Radial-Gradient Overlay | Entfernt | +| Shadows | Farbige Glows erlaubt | Nur dunkle rgba(0,0,0) Shadows| +| Card Border | 2px solid transparent → accent| 1px solid transparent | +| backdrop-filter | Auf Modals + Panels | Nur Modals | +| Header-Hoehe | 52px (Topbar) + Toolbar | 44px (Hub-Header mit Tabs) | +| Animations | Reichhaltig (ripple, bounce) | Reduziert, funktional | + +--- + +## Animationen (Referenz) + +```css +/* Card-Einblendung */ +@keyframes card-enter { + from { opacity: 0; transform: translateY(10px) scale(.97); } + to { opacity: 1; transform: translateY(0) scale(1); } +} + +/* Spielender Sound — pulsierender Glow */ +@keyframes playing-glow { + from { box-shadow: 0 0 4px var(--accent-glow); } + to { box-shadow: 0 0 16px var(--accent-glow); } +} + +/* Emoji-Bounce beim Abspielen */ +@keyframes emoji-bounce { + 0%, 100% { transform: scale(1); } + 40% { transform: scale(1.3); } + 70% { transform: scale(.95); } +} + +/* Connection-Dot Pulse */ +@keyframes pulse-dot { + 0%, 100% { box-shadow: 0 0 6px rgba(35, 165, 90, .5); } + 50% { box-shadow: 0 0 12px rgba(35, 165, 90, .8); } +} + +/* Party-Button Glow */ +@keyframes party-btn { + from { box-shadow: 0 0 8px rgba(240, 178, 50, .4); } + to { box-shadow: 0 0 20px rgba(240, 178, 50, .7); } +} + +/* Ripple-Effekt auf Cards */ +@keyframes ripple-expand { + to { transform: scale(3); opacity: 0; } +} +.ripple { + background: rgba(88, 101, 242, .3); +} +``` diff --git a/web/STYLEGUIDE.md b/web/STYLEGUIDE.md new file mode 100644 index 0000000..b33ef2c --- /dev/null +++ b/web/STYLEGUIDE.md @@ -0,0 +1,641 @@ +# Gaming Hub — Styleguide + +Verbindliche Design-Referenz für alle Plugins. Basiert auf dem CI Redesign v3 (Warm-Brown, DM Sans). + +--- + +## 1. Design Tokens + +### Hintergrundfarben (Warm-Brown Palette) + +| Variable | Wert | Verwendung | +|-------------------|------------|-------------------------------------| +| `--bg-deep` | `#1a1810` | App-Hintergrund, tiefste Ebene | +| `--bg-primary` | `#211e17` | Header, Hauptflächen | +| `--bg-secondary` | `#2a2620` | Cards, Panels, Sidebar | +| `--bg-tertiary` | `#322d26` | Hover-States, erhöhte Elemente | +| `--bg-card` | `#2a2620` | Alias für Card-Backgrounds | +| `--bg-card-hover` | `#322d26` | Card-Hover | +| `--bg-input` | `#1e1b15` | Input-Felder, Suchleisten | +| `--bg-header` | `#1e1b14` | Header-Bar | + +**Helligkeitsreihenfolge:** `deep` → `primary` → `secondary/card` → `tertiary/card-hover` + +### Textfarben + +| Variable | Wert | Verwendung | +|-----------------|------------|-------------------------------| +| `--text-normal` | `#dbdee1` | Primärtext, Überschriften | +| `--text-muted` | `#949ba4` | Sekundärtext, Labels | +| `--text-faint` | `#6d6f78` | Tertiärtext, Platzhalter, Disabled | + +### Accent-System + +| Variable | Wert | Verwendung | +|-------------------|--------------------------------|-------------------------------| +| `--accent` | `#e67e22` | Primäre Akzentfarbe (Ember) | +| `--accent-rgb` | `230, 126, 34` | Für `rgba()` Konstrukte | +| `--accent-hover` | `#d35400` | Hover/Active auf Accent | +| `--accent-dim` | `rgba(230, 126, 34, 0.15)` | Subtiler Accent-Hintergrund | +| `--accent-border` | `rgba(230, 126, 34, 0.35)` | Focus-Borders, aktive Ränder | + +Weitere Themes via `[data-accent="..."]`: +- `ember` (Standard) — Orange `#e67e22` +- `amethyst` — Lila `#9b59b6` +- `ocean` — Blau `#2e86c1` +- `jade` — Grün `#27ae60` +- `rose` — Pink `#e74c8b` + +### Semantische Farben + +| Variable | Wert | Verwendung | +|-------------|------------|---------------------| +| `--success` | `#57d28f` | Online, Erfolg, Win | +| `--danger` | `#ed4245` | Fehler, Offline, Loss | +| `--warning` | `#fee75c` | Warnungen | + +### Borders + +| Variable | Wert | Verwendung | +|------------------|-------------------------------|-------------------------| +| `--border` | `rgba(255, 255, 255, 0.05)` | Standard-Trennlinien | +| `--border-strong`| `rgba(255, 255, 255, 0.08)` | Betonte Ränder, Divider | + +--- + +## 2. Typografie + +### Font-Stacks + +| Variable | Wert | Verwendung | +|------------|--------------------------------------------------|-----------------| +| `--font` | `'DM Sans', system-ui, -apple-system, sans-serif`| Body, UI-Text | +| `--mono` | `'DM Mono', monospace` | Code, Timer, Zahlen | + +Google Fonts Import (bereits in `styles.css`): +```css +@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Mono:wght@400;500&display=swap'); +``` + +### Type Scale + +| Größe | Verwendung | +|--------|---------------------------------------------| +| `9px` | Micro-Badges, Tier-Ranks | +| `10px` | Kleine Labels, Plattform-Badges | +| `11px` | Meta-Text, Zähler, Sound-Card-Names | +| `12px` | Small Body, Grid-Text, Chip-Labels | +| `13px` | **Base Body** (globaler Standard) | +| `14px` | Buttons, Inputs, Standard-UI-Text | +| `15px` | Profilnamen, Detail-Labels | +| `16px` | Section-Headings, Titel | +| `18px` | Große Überschriften | +| `20px` | Profil-Titel | +| `24px` | Logo, Hero-Text | + +### Font-Weights + +| Wert | Name | Verwendung | +|-------|-----------|--------------------------------------| +| `400` | Regular | Body-Text, Inputs | +| `500` | Medium | Labels, Tab-Navigation, Chips | +| `600` | Semibold | Buttons, Card-Titel, aktive Elemente | +| `700` | Bold | Überschriften, Badges, Logo | + +--- + +## 3. Spacing + +4px-Basis-Grid. Bevorzugte Werte: + +| Wert | Verwendung | +|--------|--------------------------------------| +| `4px` | Micro-Gaps, Icon-Abstände | +| `8px` | Tight Gaps, Badge-Padding | +| `10px` | Button/Input-Padding, Listen-Rows | +| `12px` | Card-Padding, comfortable Gaps | +| `16px` | Grid-Gaps, Section-Padding | +| `20px` | Container-Padding | +| `24px` | Modal-Padding, große Sections | +| `32px` | Section-Abstände | + +--- + +## 4. Border-Radius + +| Variable | Wert | Verwendung | +|---------------|----------|-------------------------------------| +| `--radius` | `4px` | **Standard** — Buttons, Inputs, Cards, Chips | +| `--radius-lg` | `6px` | Modals, Admin-Panels, große Cards | +| `50%` | — | Avatare, Status-Dots | +| `9999px` | — | Pill-Shapes (Tags, Badges) | + +> **Regel:** Kein `border-radius` über `6px` außer Circles (`50%`) und Pills (`9999px`). + +--- + +## 5. Schatten + +| Stufe | Wert | Verwendung | +|--------|-------------------------------------|------------------------| +| xs | `0 1px 3px rgba(0, 0, 0, .24)` | Subtile Erhöhung | +| sm | `0 2px 6px rgba(0, 0, 0, .3)` | Buttons, kleine Panels | +| md | `0 4px 12px rgba(0, 0, 0, .32)` | Cards, Dropdowns | +| lg | `0 4px 20px rgba(0, 0, 0, .4)` | Elevated Cards (Hover) | +| xl | `0 8px 32px rgba(0, 0, 0, .5)` | Modals, Overlays | + +> **Regel:** Nur dunkle Elevation-Shadows. Keine farbigen Glow-Effekte (`0 0 Xpx` mit Farbe). + +--- + +## 6. Motion & Transitions + +| Variable | Wert | Verwendung | +|----------------|---------|-----------------------------| +| `--transition` | `150ms ease` | Standard-Transition | + +### Empfohlene Dauern + +| Dauer | Verwendung | +|---------|---------------------------------------| +| `100ms` | Hover-States, Color-Changes | +| `150ms` | Standard-Transitions, Border-Changes | +| `200ms` | Layout-Changes, Transform-Animations | +| `350ms` | Einblende-Animationen, Card-Enter | + +### Easing + +| Kurve | Verwendung | +|----------------------------------------|-------------------------| +| `ease` | Standard | +| `cubic-bezier(.4, 0, .2, 1)` | Material-Design-Feeling | +| `cubic-bezier(0.16, 1, 0.3, 1)` | Ease-Out (schnell raus) | + +--- + +## 7. Component Patterns + +### Cards + +```css +.prefix-card { + background: var(--bg-card); + border: 1px solid transparent; + border-radius: var(--radius); + padding: 12px; + cursor: pointer; + transition: all var(--transition); +} +.prefix-card:hover { + background: var(--bg-card-hover); + transform: translateY(-2px); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); +} +``` + +### Buttons + +**Primary:** +```css +.prefix-btn-primary { + padding: 8px 16px; + background: var(--accent); + color: #fff; + font-weight: 600; + font-size: 13px; + border-radius: var(--radius); + border: none; + cursor: pointer; + transition: all var(--transition); +} +.prefix-btn-primary:hover { + background: var(--accent-hover); +} +``` + +**Secondary (Outline):** +```css +.prefix-btn-secondary { + padding: 8px 16px; + background: transparent; + color: var(--text-muted); + font-weight: 500; + border: 1px solid var(--border-strong); + border-radius: var(--radius); + cursor: pointer; + transition: all var(--transition); +} +.prefix-btn-secondary:hover { + color: var(--text-normal); + border-color: rgba(255, 255, 255, 0.15); +} +``` + +**Icon-Button:** +```css +.prefix-btn-icon { + padding: 6px; + background: none; + color: var(--text-muted); + border: none; + border-radius: var(--radius); + cursor: pointer; + transition: all var(--transition); +} +.prefix-btn-icon:hover { + background: var(--bg-tertiary); + color: var(--text-normal); +} +``` + +### Inputs + +```css +.prefix-input { + padding: 8px 12px; + background: var(--bg-input); + border: 1px solid var(--border); + border-radius: var(--radius); + color: var(--text-normal); + font-family: var(--font); + font-size: 13px; + transition: border-color var(--transition); +} +.prefix-input::placeholder { + color: var(--text-faint); +} +.prefix-input:focus { + border-color: var(--accent-border); + outline: none; +} +``` + +### Chips / Tags + +```css +.prefix-chip { + display: inline-flex; + align-items: center; + padding: 4px 10px; + font-size: 12px; + font-weight: 500; + color: var(--text-muted); + background: transparent; + border: 1px solid var(--border); + border-radius: var(--radius); + cursor: pointer; + transition: all var(--transition); +} +.prefix-chip:hover { + color: var(--text-normal); + border-color: var(--border-strong); +} +.prefix-chip.active { + background: var(--accent); + border-color: var(--accent); + color: #fff; + font-weight: 600; +} +``` + +### Modals + +```css +/* Overlay — einziger Ort wo backdrop-filter erlaubt ist */ +.prefix-overlay { + position: fixed; + inset: 0; + z-index: 1000; + display: flex; + align-items: center; + justify-content: center; + background: rgba(0, 0, 0, 0.7); + backdrop-filter: blur(4px); +} + +/* Modal-Container */ +.prefix-modal { + background: var(--bg-secondary); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + padding: 24px; + max-width: 500px; + width: 90vw; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); +} +``` + +### Listen-Rows + +```css +.prefix-row { + display: flex; + align-items: center; + gap: 10px; + padding: 8px 12px; + border-radius: var(--radius); + transition: background var(--transition); + cursor: pointer; +} +.prefix-row:hover { + background: var(--bg-tertiary); +} +.prefix-row.active { + background: var(--accent-dim); + border-left: 3px solid var(--accent); +} +``` + +### Dropdowns + +```css +.prefix-dropdown { + position: absolute; + background: var(--bg-secondary); + border: 1px solid var(--border-strong); + border-radius: var(--radius); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); + max-height: 300px; + overflow-y: auto; + z-index: 100; +} +``` + +### Scrollbars + +```css +/* Bereits global in styles.css definiert */ +::-webkit-scrollbar { width: 4px; height: 4px; } +::-webkit-scrollbar-track { background: transparent; } +::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 2px; } +::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.14); } +``` + +### Empty States + +```css +.prefix-empty { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 48px 24px; + color: var(--text-faint); + text-align: center; +} +.prefix-empty-icon { + font-size: 48px; + margin-bottom: 12px; + opacity: 0.5; +} +.prefix-empty-text { + font-size: 14px; +} +``` + +### Status-Dots + +```css +.prefix-status-dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--danger); + flex-shrink: 0; +} +.prefix-status-dot.online { + background: var(--success); + animation: pulse-dot 2s ease-in-out infinite; +} +``` + +--- + +## 8. Naming Conventions + +### Plugin-Prefixe + +| Plugin | Prefix | Beispiel | +|---------------|-----------|---------------------| +| Hub/Global | `hub-` | `.hub-header` | +| Soundboard | `sb-` | `.sb-app` | +| Radio | (in `styles.css`) | `.radio-container` | +| Game Library | `gl-` | `.gl-container` | +| LoL Stats | `lol-` | `.lol-container` | +| Streaming | `stream-` | `.stream-container` | +| Watch Together| `wt-` | `.wt-container` | + +Neues Plugin: Eigenes 2–4 Buchstaben Prefix wählen. + +### Klassen-Naming + +``` +.prefix-block → Hauptcontainer +.prefix-block-element → Kindelement +.prefix-block.active → Zustandsmodifier +.prefix-block.disabled → Disabled-State +``` + +- Hyphen-separated, lowercase +- Keine globalen generischen Klassen (`.card`, `.btn`) — immer mit Prefix +- Modifier als separate Klasse, nicht als BEM-`--modifier` + +--- + +## 9. Layout-Regeln + +### App-Shell + +``` +┌─────────────────────────────────────┐ +│ Header (44px, --bg-primary) │ ← .hub-header +│ [Logo] [Tabs...] [Controls] │ +├─────────────────────────────────────┤ +│ │ +│ Content Area (flex: 1, scroll-y) │ ← .hub-content > .tab-panel +│ │ +└─────────────────────────────────────┘ +``` + +- Header: `44px` Höhe, `var(--bg-primary)`, `border-bottom: 1px solid var(--border)` +- Tab-Navigation: **Horizontal im Header** (keine Sidebar) +- Content: `flex: 1`, `overflow-y: auto` + +### Grids + +```css +.prefix-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 16px; + padding: 16px; +} +``` + +- `minmax` Minimum je nach Inhalt: 88px (Sound-Cards), 220px (User-Cards), 280px (Game-Tiles) +- `gap: 16px` Standard, `gap: 3px` nur für dichte Grids (Soundboard) + +### Responsive Breakpoints + +| Breakpoint | Ziel | Anpassungen | +|------------|-------------|--------------------------------------| +| `768px` | Tablet | Grid-Spalten reduzieren, Modal 90vw | +| `480px` | Mobile | Flex-Direction column, Padding kürzen| + +--- + +## 10. Do / Don't + +### DO + +- Alle Farben über CSS-Variablen (`var(--bg-card)`, `var(--text-muted)`) +- `var(--transition)` für alle Transitions +- `var(--font)` / `var(--mono)` für Font-Stacks +- `var(--radius)` / `var(--radius-lg)` für Border-Radius +- Solide Hintergründe für Content-Elemente +- `transform: translateY(-2px)` für Card-Hover +- Dunkle `rgba(0,0,0,...)` Shadows für Elevation + +### DON'T + +- `backdrop-filter: blur()` außer auf Modal-Overlays +- Farbige Glow-Shadows (`box-shadow: 0 0 Xpx var(--accent)`) +- Dekorative `linear-gradient` / `radial-gradient` Hintergründe +- `border-radius` über `6px` (außer `50%` Circles und `9999px` Pills) +- Hardcoded Farben für Hintergründe/Text/Borders (Ausnahme: Brand-Colors wie Steam `#66c0f4`) +- Font-Stacks direkt angeben (`font-family: 'Arial'`) +- Eigene Accent-Farben definieren — `var(--accent)` verwenden +- Globale Klassen ohne Plugin-Prefix + +--- + +## 11. Theme-System + +### Accent-Themes (global) + +Wechselbar via `data-accent` Attribut auf Root-Element: + +```html +
+
+
+
+
+``` + +Alle Accent-Varianten sind in `styles.css` definiert. Plugins greifen **nur** auf `var(--accent)`, `var(--accent-hover)`, `var(--accent-dim)` etc. zu. + +### Plugin-Themes (optional) + +Soundboard hat zusätzliche Farbthemes via `[data-theme="..."]`. Andere Plugins sollten das **nicht** nachbauen, sondern den globalen Accent nutzen. + +--- + +## 12. Plugin-Template (Starter CSS) + +Minimales Boilerplate für ein neues Plugin `example` mit Prefix `ex-`: + +```css +/* ── Example Plugin ── + Prefix: ex- + Inherits all tokens from :root (styles.css) + ────────────────────────────────────────── */ + +/* Container */ +.ex-container { + display: flex; + flex-direction: column; + height: 100%; + overflow: hidden; +} + +/* Toolbar */ +.ex-toolbar { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 16px; + border-bottom: 1px solid var(--border); + flex-shrink: 0; +} + +/* Content Grid */ +.ex-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 16px; + padding: 16px; + overflow-y: auto; + flex: 1; +} + +/* Card */ +.ex-card { + background: var(--bg-card); + border: 1px solid transparent; + border-radius: var(--radius); + padding: 12px; + cursor: pointer; + transition: all var(--transition); +} +.ex-card:hover { + background: var(--bg-card-hover); + transform: translateY(-2px); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); +} + +/* Card Title */ +.ex-card-title { + font-size: 14px; + font-weight: 600; + color: var(--text-normal); + margin-bottom: 4px; +} + +/* Card Meta */ +.ex-card-meta { + font-size: 12px; + color: var(--text-muted); +} + +/* Empty State */ +.ex-empty { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 48px 24px; + color: var(--text-faint); + text-align: center; +} + +/* Modal */ +.ex-overlay { + position: fixed; + inset: 0; + z-index: 1000; + display: flex; + align-items: center; + justify-content: center; + background: rgba(0, 0, 0, 0.7); + backdrop-filter: blur(4px); +} +.ex-modal { + background: var(--bg-secondary); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + padding: 24px; + max-width: 500px; + width: 90vw; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); +} + +/* Responsive */ +@media (max-width: 768px) { + .ex-grid { + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 12px; + padding: 12px; + } +} +``` diff --git a/web/src/plugins/game-library/game-library.css b/web/src/plugins/game-library/game-library.css index 372c8f0..d4a9c7f 100644 --- a/web/src/plugins/game-library/game-library.css +++ b/web/src/plugins/game-library/game-library.css @@ -62,7 +62,7 @@ align-items: center; gap: 8px; padding: 6px 12px; - border-radius: 20px; + border-radius: 4px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); cursor: pointer; @@ -234,7 +234,7 @@ gap: 6px; background: var(--bg-tertiary); padding: 6px 12px 6px 6px; - border-radius: 20px; + border-radius: 4px; cursor: pointer; transition: all var(--transition); } @@ -698,7 +698,7 @@ } .gl-sort-select option { - background: #1a1a2e; + background: #1a1810; color: #c7d5e0; } @@ -717,7 +717,7 @@ color: #8899a6; border: 1px solid rgba(255, 255, 255, 0.08); padding: 5px 12px; - border-radius: 20px; + border-radius: 4px; font-size: 12px; cursor: pointer; transition: all 0.2s; @@ -776,8 +776,8 @@ } .gl-dialog { - background: #2a2a3e; - border-radius: 12px; + background: #2a2620; + border-radius: 6px; padding: 24px; max-width: 500px; width: 90%; @@ -800,7 +800,7 @@ .gl-dialog-input { width: 100%; padding: 10px 12px; - background: #1a1a2e; + background: #1a1810; border: 1px solid #444; border-radius: 8px; color: #fff; @@ -841,7 +841,7 @@ .gl-dialog-cancel { padding: 8px 18px; - background: #3a3a4e; + background: #322d26; color: #ccc; border: none; border-radius: 8px; @@ -850,7 +850,7 @@ } .gl-dialog-cancel:hover { - background: #4a4a5e; + background: #3a352d; } .gl-dialog-submit { @@ -896,8 +896,8 @@ } .gl-admin-panel { - background: #2a2a3e; - border-radius: 12px; + background: #2a2620; + border-radius: 6px; padding: 0; max-width: 600px; width: 92%; diff --git a/web/src/plugins/lolstats/lolstats.css b/web/src/plugins/lolstats/lolstats.css index 59503c4..2bda0a2 100644 --- a/web/src/plugins/lolstats/lolstats.css +++ b/web/src/plugins/lolstats/lolstats.css @@ -70,7 +70,7 @@ gap: 6px; padding: 4px 10px; border: 1px solid var(--bg-tertiary); - border-radius: 16px; + border-radius: 4px; background: var(--bg-secondary); color: var(--text-muted); font-size: 12px; @@ -94,13 +94,13 @@ align-items: center; gap: 16px; padding: 16px; - border-radius: 12px; + border-radius: 6px; background: var(--bg-secondary); margin-bottom: 12px; } .lol-profile-icon { width: 72px; height: 72px; - border-radius: 12px; + border-radius: 6px; border: 2px solid var(--bg-tertiary); object-fit: cover; } @@ -170,7 +170,7 @@ .lol-ranked-card { flex: 1; padding: 12px 14px; - border-radius: 10px; + border-radius: 6px; background: var(--bg-secondary); border-left: 4px solid var(--bg-tertiary); } @@ -517,7 +517,7 @@ .lol-tier-mode-btn { padding: 6px 14px; border: 1px solid var(--bg-tertiary); - border-radius: 16px; + border-radius: 4px; background: var(--bg-secondary); color: var(--text-muted); font-size: 12px; diff --git a/web/src/plugins/soundboard/soundboard.css b/web/src/plugins/soundboard/soundboard.css index be47e1a..4abee5f 100644 --- a/web/src/plugins/soundboard/soundboard.css +++ b/web/src/plugins/soundboard/soundboard.css @@ -6,10 +6,10 @@ Theme Variables — Default (Discord Blurple) ──────────────────────────────────────────── */ .sb-app { - --bg-deep: #1a1b1e; - --bg-primary: #1e1f22; - --bg-secondary: #2b2d31; - --bg-tertiary: #313338; + --bg-deep: #1a1810; + --bg-primary: #211e17; + --bg-secondary: #2a2620; + --bg-tertiary: #322d26; --bg-modifier-hover: rgba(79, 84, 92, .16); --bg-modifier-active: rgba(79, 84, 92, .24); --bg-modifier-selected: rgba(79, 84, 92, .32); @@ -183,7 +183,7 @@ gap: 8px; padding: 5px 12px 5px 10px; border: 1px solid rgba(255, 255, 255, .08); - border-radius: 20px; + border-radius: 4px; background: var(--bg-tertiary); color: var(--text-normal); font-family: var(--font); @@ -283,7 +283,7 @@ align-items: center; gap: 6px; padding: 4px 10px; - border-radius: 20px; + border-radius: 4px; background: rgba(35, 165, 90, .12); font-size: 12px; color: var(--green); @@ -295,13 +295,12 @@ height: 7px; border-radius: 50%; background: var(--green); - box-shadow: 0 0 6px rgba(35, 165, 90, .6); animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { - 0%, 100% { box-shadow: 0 0 6px rgba(35, 165, 90, .5); } - 50% { box-shadow: 0 0 12px rgba(35, 165, 90, .8); } + 0%, 100% { opacity: .7; } + 50% { opacity: 1; } } .conn-ping { @@ -325,7 +324,7 @@ .conn-modal { background: var(--bg-primary); border: 1px solid var(--border); - border-radius: 16px; + border-radius: 4px; width: 340px; box-shadow: 0 20px 60px rgba(0,0,0,.4); overflow: hidden; @@ -437,7 +436,7 @@ align-items: center; gap: 6px; padding: 6px 14px; - border-radius: 20px; + border-radius: 4px; background: var(--bg-tertiary); color: var(--text-muted); font-family: var(--font); @@ -490,7 +489,7 @@ height: 32px; padding: 0 28px 0 32px; border: 1px solid rgba(255, 255, 255, .06); - border-radius: 20px; + border-radius: 4px; background: var(--bg-secondary); color: var(--text-normal); font-family: var(--font); @@ -541,7 +540,7 @@ max-width: 460px; flex: 1; padding: 4px 6px 4px 8px; - border-radius: 20px; + border-radius: 4px; background: var(--bg-secondary); border: 1px solid rgba(255, 255, 255, .08); } @@ -571,7 +570,7 @@ .url-import-btn { height: 24px; padding: 0 10px; - border-radius: 14px; + border-radius: 6px; border: 1px solid rgba(var(--accent-rgb, 88, 101, 242), .45); background: rgba(var(--accent-rgb, 88, 101, 242), .12); color: var(--accent); @@ -617,7 +616,7 @@ gap: 6px; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .08); - border-radius: 20px; + border-radius: 4px; background: var(--bg-tertiary); color: var(--text-muted); font-family: var(--font); @@ -656,20 +655,20 @@ .tb-btn.party:hover { background: var(--yellow); - color: #1a1b1e; + color: #1a1810; border-color: var(--yellow); } .tb-btn.party.active { background: var(--yellow); - color: #1a1b1e; + color: #1a1810; border-color: var(--yellow); animation: party-btn 600ms ease-in-out infinite alternate; } @keyframes party-btn { - from { box-shadow: 0 0 8px rgba(240, 178, 50, .4); } - to { box-shadow: 0 0 20px rgba(240, 178, 50, .7); } + from { opacity: .85; } + to { opacity: 1; } } .tb-btn.stop { @@ -689,7 +688,7 @@ align-items: center; gap: 6px; padding: 4px 10px; - border-radius: 20px; + border-radius: 4px; background: var(--bg-tertiary); border: 1px solid rgba(255, 255, 255, .06); } @@ -739,7 +738,7 @@ align-items: center; gap: 4px; padding: 4px 8px; - border-radius: 20px; + border-radius: 4px; background: var(--bg-tertiary); border: 1px solid rgba(255, 255, 255, .06); } @@ -759,7 +758,6 @@ .theme-dot.active { border-color: var(--white); - box-shadow: 0 0 6px rgba(255, 255, 255, .3); } /* ── Analytics Strip ── */ @@ -778,7 +776,7 @@ align-items: center; gap: 8px; padding: 8px 12px; - border-radius: 12px; + border-radius: 6px; background: var(--bg-secondary); border: 1px solid rgba(255, 255, 255, .08); } @@ -871,7 +869,7 @@ align-items: center; gap: 6px; padding: 4px 12px; - border-radius: 20px; + border-radius: 4px; font-size: 12px; font-weight: 600; color: var(--text-muted); @@ -946,28 +944,13 @@ animation: card-enter 350ms ease-out forwards; } -.sound-card::before { - content: ''; - position: absolute; - inset: 0; - border-radius: inherit; - opacity: 0; - transition: opacity var(--transition); - background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 70%); - pointer-events: none; -} - .sound-card:hover { background: var(--bg-tertiary); transform: translateY(-3px); - box-shadow: var(--shadow-med), 0 0 20px var(--accent-glow); + box-shadow: var(--shadow-med); border-color: rgba(88, 101, 242, .2); } -.sound-card:hover::before { - opacity: 1; -} - .sound-card:active { transform: translateY(0); transition-duration: 50ms; @@ -975,12 +958,7 @@ .sound-card.playing { border-color: var(--accent); - animation: card-enter 350ms ease-out forwards, playing-glow 1.2s ease-in-out infinite alternate; -} - -@keyframes playing-glow { - from { box-shadow: 0 0 4px var(--accent-glow); } - to { box-shadow: 0 0 16px var(--accent-glow); } + animation: card-enter 350ms ease-out forwards; } @keyframes card-enter { @@ -1170,7 +1148,7 @@ align-items: center; gap: 6px; padding: 4px 12px; - border-radius: 20px; + border-radius: 4px; background: rgba(var(--accent-rgb, 88, 101, 242), .12); border: 1px solid rgba(var(--accent-rgb, 88, 101, 242), .2); font-size: 12px; @@ -1221,7 +1199,7 @@ align-items: center; gap: 6px; padding: 4px 10px; - border-radius: 20px; + border-radius: 4px; background: var(--bg-tertiary); border: 1px solid rgba(255, 255, 255, .06); } @@ -1301,20 +1279,7 @@ content: ''; position: absolute; inset: 0; - background: linear-gradient(45deg, - rgba(255, 0, 0, .04), - rgba(0, 255, 0, .04), - rgba(0, 0, 255, .04), - rgba(255, 255, 0, .04) - ); - background-size: 400% 400%; - animation: party-grad 3s ease infinite; -} - -@keyframes party-grad { - 0% { background-position: 0% 50%; } - 50% { background-position: 100% 50%; } - 100% { background-position: 0% 50%; } + background: rgba(255, 255, 255, .03); } @keyframes party-hue { @@ -1386,7 +1351,7 @@ left: 50%; transform: translateX(-50%); padding: 10px 20px; - border-radius: 20px; + border-radius: 4px; font-size: 13px; font-weight: 600; z-index: 100; @@ -1602,7 +1567,7 @@ justify-content: space-between; gap: 10px; padding: 8px 10px; - border-radius: 10px; + border-radius: 6px; background: var(--bg-tertiary); border: 1px solid rgba(255, 255, 255, .08); flex-wrap: wrap; @@ -1626,7 +1591,7 @@ max-height: 52vh; overflow-y: auto; border: 1px solid rgba(255, 255, 255, .08); - border-radius: 10px; + border-radius: 6px; background: var(--bg-primary); } @@ -1852,7 +1817,7 @@ align-items: center; gap: 14px; padding: 64px 72px; - border-radius: 24px; + border-radius: 6px; border: 2.5px dashed rgba(var(--accent-rgb), .55); background: rgba(var(--accent-rgb), .07); animation: drop-pulse 2.2s ease-in-out infinite; @@ -1861,11 +1826,9 @@ @keyframes drop-pulse { 0%, 100% { border-color: rgba(var(--accent-rgb), .45); - box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); } 50% { border-color: rgba(var(--accent-rgb), .9); - box-shadow: 0 0 60px 12px rgba(var(--accent-rgb), .12); } } @@ -1902,7 +1865,7 @@ width: 340px; background: var(--bg-secondary); border: 1px solid rgba(255, 255, 255, .09); - border-radius: 14px; + border-radius: 6px; box-shadow: 0 8px 40px rgba(0, 0, 0, .45); z-index: 200; animation: slide-up 200ms cubic-bezier(.16,1,.3,1); @@ -2048,7 +2011,7 @@ width: 420px; max-width: 92vw; background: var(--bg-secondary); border: 1px solid rgba(255, 255, 255, .1); - border-radius: 16px; + border-radius: 4px; box-shadow: 0 12px 60px rgba(0, 0, 0, .5); animation: scale-in 200ms cubic-bezier(.16, 1, .3, 1); } diff --git a/web/src/plugins/streaming/streaming.css b/web/src/plugins/streaming/streaming.css index ada73b0..abdf17a 100644 --- a/web/src/plugins/streaming/streaming.css +++ b/web/src/plugins/streaming/streaming.css @@ -536,7 +536,7 @@ .stream-admin-panel { background: var(--bg-secondary); - border-radius: 12px; + border-radius: 6px; width: 560px; max-width: 95vw; max-height: 80vh; @@ -649,7 +649,7 @@ align-items: center; gap: 4px; padding: 4px 10px; - border-radius: 14px; + border-radius: 6px; font-size: 12px; color: var(--text-muted); background: var(--bg-secondary); diff --git a/web/src/plugins/watch-together/watch-together.css b/web/src/plugins/watch-together/watch-together.css index 1873674..32684b4 100644 --- a/web/src/plugins/watch-together/watch-together.css +++ b/web/src/plugins/watch-together/watch-together.css @@ -554,9 +554,9 @@ } .wt-quality-select { - background: var(--bg-secondary, #2a2a3e); + background: var(--bg-secondary, #2a2620); color: var(--text-primary, #e0e0e0); - border: 1px solid var(--border-color, #3a3a4e); + border: 1px solid var(--border-color, #322d26); border-radius: 6px; padding: 2px 6px; font-size: 12px; @@ -862,9 +862,9 @@ border-radius: 50%; flex-shrink: 0; } -.wt-sync-synced { background: #2ecc71; box-shadow: 0 0 6px rgba(46, 204, 113, 0.5); } -.wt-sync-drifting { background: #f1c40f; box-shadow: 0 0 6px rgba(241, 196, 15, 0.5); } -.wt-sync-desynced { background: #e74c3c; box-shadow: 0 0 6px rgba(231, 76, 60, 0.5); } +.wt-sync-synced { background: #2ecc71; } +.wt-sync-drifting { background: #f1c40f; } +.wt-sync-desynced { background: #e74c3c; } /* ══════════════════════════════════════ VOTE BUTTONS diff --git a/web/src/styles.css b/web/src/styles.css index 3b1c050..4d5c046 100644 --- a/web/src/styles.css +++ b/web/src/styles.css @@ -1,24 +1,35 @@ +/* ── Google Fonts ── */ +@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Mono:wght@400;500&display=swap'); + /* ── CSS Variables ── */ :root { - --bg-deep: #1a1b1e; - --bg-primary: #1e1f22; - --bg-secondary: #2b2d31; - --bg-tertiary: #313338; + --bg-deep: #1a1810; + --bg-primary: #211e17; + --bg-secondary: #2a2620; + --bg-tertiary: #322d26; + --bg-card: #2a2620; + --bg-card-hover: #322d26; + --bg-input: #1e1b15; + --bg-header: #1e1b14; --text-normal: #dbdee1; --text-muted: #949ba4; --text-faint: #6d6f78; --accent: #e67e22; --accent-rgb: 230, 126, 34; --accent-hover: #d35400; + --accent-dim: rgba(230, 126, 34, 0.15); + --accent-border: rgba(230, 126, 34, 0.35); --success: #57d28f; --danger: #ed4245; --warning: #fee75c; - --border: rgba(255, 255, 255, 0.06); - --radius: 8px; - --radius-lg: 12px; + --border: rgba(255, 255, 255, 0.05); + --border-strong: rgba(255, 255, 255, 0.08); + --radius: 4px; + --radius-lg: 6px; --transition: 150ms ease; - --font: 'Segoe UI', system-ui, -apple-system, sans-serif; - --header-height: 56px; + --font: 'DM Sans', system-ui, -apple-system, sans-serif; + --mono: 'DM Mono', monospace; + --header-height: 44px; } /* ── Reset & Base ── */ @@ -33,7 +44,7 @@ html, body { height: 100%; font-family: var(--font); - font-size: 15px; + font-size: 13px; color: var(--text-normal); background: var(--bg-deep); -webkit-font-smoothing: antialiased; @@ -261,7 +272,7 @@ html, body { .hub-update-modal { background: var(--bg-card); border: 1px solid var(--border); - border-radius: 12px; + border-radius: 6px; padding: 32px 40px; text-align: center; min-width: 320px; @@ -388,7 +399,7 @@ html, body { .hub-admin-modal { background: var(--bg-card); border: 1px solid var(--border); - border-radius: 12px; + border-radius: 6px; width: 340px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); } @@ -475,7 +486,7 @@ html, body { .hub-version-modal { background: var(--bg-primary); border: 1px solid var(--border); - border-radius: 16px; + border-radius: 4px; width: 340px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); overflow: hidden; @@ -798,10 +809,10 @@ html, body { background: var(--bg-deep); /* Default-Theme Vars (scoped, damit data-theme sie überschreiben kann) */ - --bg-deep: #1a1b1e; - --bg-primary: #1e1f22; - --bg-secondary: #2b2d31; - --bg-tertiary: #313338; + --bg-deep: #1a1810; + --bg-primary: #211e17; + --bg-secondary: #2a2620; + --bg-tertiary: #322d26; --text-normal: #dbdee1; --text-muted: #949ba4; --text-faint: #6d6f78; @@ -859,7 +870,7 @@ html, body { align-items: center; padding: 0 16px; height: 52px; - background: var(--bg-secondary, #2b2d31); + background: var(--bg-secondary, #2a2620); border-bottom: 1px solid rgba(0, 0, 0, .24); z-index: 10; flex-shrink: 0; @@ -958,8 +969,7 @@ html, body { .radio-search-wrap { display: flex; align-items: center; - background: rgba(30, 31, 34, 0.92); - backdrop-filter: blur(12px); + background: rgba(33, 30, 23, 0.92); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0 14px; @@ -1006,8 +1016,7 @@ html, body { /* ── Search Results ── */ .radio-search-results { margin-top: 6px; - background: rgba(30, 31, 34, 0.95); - backdrop-filter: blur(12px); + background: rgba(33, 30, 23, 0.95); border: 1px solid var(--border); border-radius: var(--radius-lg); max-height: 360px; @@ -1079,8 +1088,7 @@ html, body { align-items: center; gap: 4px; padding: 10px 14px; - background: rgba(30, 31, 34, 0.92); - backdrop-filter: blur(12px); + background: rgba(33, 30, 23, 0.92); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text-normal); @@ -1102,7 +1110,7 @@ html, body { background: var(--accent); color: #fff; padding: 1px 6px; - border-radius: 10px; + border-radius: 6px; min-width: 18px; text-align: center; } @@ -1115,8 +1123,7 @@ html, body { width: 340px; height: 100%; z-index: 15; - background: rgba(30, 31, 34, 0.95); - backdrop-filter: blur(16px); + background: rgba(33, 30, 23, 0.95); border-left: 1px solid var(--border); display: flex; flex-direction: column; @@ -1407,7 +1414,7 @@ html, body { width: 100px; height: 4px; border-radius: 2px; - background: var(--bg-tertiary, #383a40); + background: var(--bg-tertiary, #3a352d); outline: none; cursor: pointer; } @@ -1456,7 +1463,6 @@ html, body { .radio-theme-dot.active { border-color: #fff; - box-shadow: 0 0 6px rgba(255, 255, 255, 0.3); } /* ── Station count ── */ @@ -1467,7 +1473,7 @@ html, body { z-index: 10; font-size: 12px; color: var(--text-faint); - background: rgba(30, 31, 34, 0.8); + background: rgba(33, 30, 23, 0.8); padding: 4px 10px; border-radius: 20px; pointer-events: none; @@ -1480,7 +1486,7 @@ html, body { z-index: 10; font-size: 12px; color: var(--text-faint); - background: rgba(30, 31, 34, 0.8); + background: rgba(33, 30, 23, 0.8); padding: 4px 10px; border-radius: 20px; text-decoration: none; @@ -1489,7 +1495,7 @@ html, body { .radio-attribution:hover { color: var(--text-normal); - background: rgba(30, 31, 34, 0.92); + background: rgba(33, 30, 23, 0.92); } /* ── Spinner ── */ @@ -1605,7 +1611,7 @@ html, body { .radio-modal { background: var(--bg-primary); border: 1px solid var(--border); - border-radius: 16px; + border-radius: 4px; width: 340px; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); overflow: hidden; @@ -1699,7 +1705,7 @@ html, body { height: min(620px, calc(100vh - 60px)); background: var(--bg-primary); border: 1px solid var(--border); - border-radius: 16px; + border-radius: 4px; overflow: hidden; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5); animation: hub-modal-in 200ms ease; @@ -2377,7 +2383,7 @@ html, body { .hub-login-modal { background: var(--bg-primary); border: 1px solid var(--border); - border-radius: 16px; + border-radius: 4px; width: 380px; max-width: 92vw; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); @@ -2574,7 +2580,7 @@ html, body { .hub-usettings-panel { background: var(--bg-primary); border: 1px solid var(--border); - border-radius: 16px; + border-radius: 4px; width: 520px; max-width: 95vw; max-height: 85vh;