Merge nightly: CI Redesign v3 (Warm-Brown, DM Sans, Styleguides)
- Warm-Brown Palette (#1a1810 - #322d26) ersetzt Discord Blau-Grau - DM Sans + DM Mono Fonts (Google Fonts) - border-radius: 4px/6px statt 8-20px - Header: 44px, font-size: 13px - Glow-Effekte und dekorative Gradients entfernt - STYLEGUIDE.md fuer einheitliches Plugin-Design - STYLEGUIDE-SOUNDBOARD-MAIN.md als Referenz zum alten Design Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Daniel
commit
01b29eb3cf
8 changed files with 1105 additions and 129 deletions
366
web/STYLEGUIDE-SOUNDBOARD-MAIN.md
Normal file
366
web/STYLEGUIDE-SOUNDBOARD-MAIN.md
Normal file
|
|
@ -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);
|
||||
}
|
||||
```
|
||||
641
web/STYLEGUIDE.md
Normal file
641
web/STYLEGUIDE.md
Normal file
|
|
@ -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
|
||||
<div data-accent="ember"> <!-- Standard: Orange -->
|
||||
<div data-accent="amethyst"> <!-- Lila -->
|
||||
<div data-accent="ocean"> <!-- Blau -->
|
||||
<div data-accent="jade"> <!-- Grün -->
|
||||
<div data-accent="rose"> <!-- Pink -->
|
||||
```
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue