From 43df3d375c457d6cc9f5a93ab39d2839ff94a7fe Mon Sep 17 00:00:00 2001 From: Daniel Date: Wed, 11 Mar 2026 10:35:00 +0100 Subject: [PATCH] Add: Soundboard Main-Branch Design Reference Snapshot des original Soundboard-Designs (Discord Blurple, Pills, Glows) als Styleguide-Dokument fuer spaetere Referenz. Co-Authored-By: Claude Opus 4.6 --- web/STYLEGUIDE-SOUNDBOARD-MAIN.md | 366 ++++++++++++++++++++++++++++++ 1 file changed, 366 insertions(+) create mode 100644 web/STYLEGUIDE-SOUNDBOARD-MAIN.md 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); +} +```