CI Redesign: Warm-Brown Palette, DM Sans, 4px Radius (basierend auf main)
- Farben: Discord Blau-Grau -> Warme Braun-Palette (#1a1810, #211e17, #2a2620) - Fonts: Segoe UI -> DM Sans + DM Mono (Google Fonts) - Border-Radius: max 6px, Standard 4px (war 8-20px) - Header-Hoehe: 44px (war 56px) - Glow-Effekte und dekorative Gradients entfernt - backdrop-filter: blur nur noch auf Modal-Overlays - Font-Size: 13px (war 15px) - Plugin-CSS angepasst (Soundboard, Game-Library, LoLStats, Streaming, Watch-Together) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Daniel
parent
32918e0a7a
commit
4e0d691aa1
6 changed files with 98 additions and 129 deletions
|
|
@ -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