root/gaming-hub
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: root:nightly
Branches Tags
root:main
root:nightly
..
compare: root:main
Branches Tags
root:nightly
root:main

No commits in common. "nightly" and "main" have entirely different histories.
nightly ... main

6 changed files with 129 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

22
web/src/plugins/game-library/game-library.css
View file

@ -62,7 +62,7 @@
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 6px 12px; padding: 6px 12px;
border-radius: 4px; border-radius: 20px;
background: rgba(255,255,255,0.05); background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1);
cursor: pointer; cursor: pointer;
@ -234,7 +234,7 @@
gap: 6px; gap: 6px;
background: var(--bg-tertiary); background: var(--bg-tertiary);
padding: 6px 12px 6px 6px; padding: 6px 12px 6px 6px;
border-radius: 4px; border-radius: 20px;
cursor: pointer; cursor: pointer;
transition: all var(--transition); transition: all var(--transition);
} }
@ -698,7 +698,7 @@
} }
.gl-sort-select option { .gl-sort-select option {
background: #1a1810; background: #1a1a2e;
color: #c7d5e0; color: #c7d5e0;
} }
@ -717,7 +717,7 @@
color: #8899a6; color: #8899a6;
border: 1px solid rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.08);
padding: 5px 12px; padding: 5px 12px;
border-radius: 4px; border-radius: 20px;
font-size: 12px; font-size: 12px;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
@ -776,8 +776,8 @@
} }
.gl-dialog { .gl-dialog {
background: #2a2620; background: #2a2a3e;
border-radius: 6px; border-radius: 12px;
padding: 24px; padding: 24px;
max-width: 500px; max-width: 500px;
width: 90%; width: 90%;
@ -800,7 +800,7 @@
.gl-dialog-input { .gl-dialog-input {
width: 100%; width: 100%;
padding: 10px 12px; padding: 10px 12px;
background: #1a1810; background: #1a1a2e;
border: 1px solid #444; border: 1px solid #444;
border-radius: 8px; border-radius: 8px;
color: #fff; color: #fff;
@ -841,7 +841,7 @@
.gl-dialog-cancel { .gl-dialog-cancel {
padding: 8px 18px; padding: 8px 18px;
background: #322d26; background: #3a3a4e;
color: #ccc; color: #ccc;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
@ -850,7 +850,7 @@
} }
.gl-dialog-cancel:hover { .gl-dialog-cancel:hover {
background: #3a352d; background: #4a4a5e;
} }
.gl-dialog-submit { .gl-dialog-submit {
@ -896,8 +896,8 @@
} }
.gl-admin-panel { .gl-admin-panel {
background: #2a2620; background: #2a2a3e;
border-radius: 6px; border-radius: 12px;
padding: 0; padding: 0;
max-width: 600px; max-width: 600px;
width: 92%; width: 92%;

10
web/src/plugins/lolstats/lolstats.css
View file

@ -70,7 +70,7 @@
gap: 6px; gap: 6px;
padding: 4px 10px; padding: 4px 10px;
border: 1px solid var(--bg-tertiary); border: 1px solid var(--bg-tertiary);
border-radius: 4px; border-radius: 16px;
background: var(--bg-secondary); background: var(--bg-secondary);
color: var(--text-muted); color: var(--text-muted);
font-size: 12px; font-size: 12px;
@ -94,13 +94,13 @@
align-items: center; align-items: center;
gap: 16px; gap: 16px;
padding: 16px; padding: 16px;
border-radius: 6px; border-radius: 12px;
background: var(--bg-secondary); background: var(--bg-secondary);
margin-bottom: 12px; margin-bottom: 12px;
} }
.lol-profile-icon { .lol-profile-icon {
width: 72px; height: 72px; width: 72px; height: 72px;
border-radius: 6px; border-radius: 12px;
border: 2px solid var(--bg-tertiary); border: 2px solid var(--bg-tertiary);
object-fit: cover; object-fit: cover;
} }
@ -170,7 +170,7 @@
.lol-ranked-card { .lol-ranked-card {
flex: 1; flex: 1;
padding: 12px 14px; padding: 12px 14px;
border-radius: 6px; border-radius: 10px;
background: var(--bg-secondary); background: var(--bg-secondary);
border-left: 4px solid var(--bg-tertiary); border-left: 4px solid var(--bg-tertiary);
} }
@ -517,7 +517,7 @@
.lol-tier-mode-btn { .lol-tier-mode-btn {
padding: 6px 14px; padding: 6px 14px;
border: 1px solid var(--bg-tertiary); border: 1px solid var(--bg-tertiary);
border-radius: 4px; border-radius: 16px;
background: var(--bg-secondary); background: var(--bg-secondary);
color: var(--text-muted); color: var(--text-muted);
font-size: 12px; font-size: 12px;

103
web/src/plugins/soundboard/soundboard.css
View file

@ -6,10 +6,10 @@
Theme Variables — Default (Discord Blurple) Theme Variables — Default (Discord Blurple)
──────────────────────────────────────────── */ ──────────────────────────────────────────── */
.sb-app { .sb-app {
--bg-deep: #1a1810; --bg-deep: #1a1b1e;
--bg-primary: #211e17; --bg-primary: #1e1f22;
--bg-secondary: #2a2620; --bg-secondary: #2b2d31;
--bg-tertiary: #322d26; --bg-tertiary: #313338;
--bg-modifier-hover: rgba(79, 84, 92, .16); --bg-modifier-hover: rgba(79, 84, 92, .16);
--bg-modifier-active: rgba(79, 84, 92, .24); --bg-modifier-active: rgba(79, 84, 92, .24);
--bg-modifier-selected: rgba(79, 84, 92, .32); --bg-modifier-selected: rgba(79, 84, 92, .32);
@ -183,7 +183,7 @@
gap: 8px; gap: 8px;
padding: 5px 12px 5px 10px; padding: 5px 12px 5px 10px;
border: 1px solid rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .08);
border-radius: 4px; border-radius: 20px;
background: var(--bg-tertiary); background: var(--bg-tertiary);
color: var(--text-normal); color: var(--text-normal);
font-family: var(--font); font-family: var(--font);
@ -283,7 +283,7 @@
align-items: center; align-items: center;
gap: 6px; gap: 6px;
padding: 4px 10px; padding: 4px 10px;
border-radius: 4px; border-radius: 20px;
background: rgba(35, 165, 90, .12); background: rgba(35, 165, 90, .12);
font-size: 12px; font-size: 12px;
color: var(--green); color: var(--green);
@ -295,12 +295,13 @@
height: 7px; height: 7px;
border-radius: 50%; border-radius: 50%;
background: var(--green); background: var(--green);
box-shadow: 0 0 6px rgba(35, 165, 90, .6);
animation: pulse-dot 2s ease-in-out infinite; animation: pulse-dot 2s ease-in-out infinite;
} }
@keyframes pulse-dot { @keyframes pulse-dot {
0%, 100% { opacity: .7; } 0%, 100% { box-shadow: 0 0 6px rgba(35, 165, 90, .5); }
50% { opacity: 1; } 50% { box-shadow: 0 0 12px rgba(35, 165, 90, .8); }
} }
.conn-ping { .conn-ping {
@ -324,7 +325,7 @@
.conn-modal { .conn-modal {
background: var(--bg-primary); background: var(--bg-primary);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 4px; border-radius: 16px;
width: 340px; width: 340px;
box-shadow: 0 20px 60px rgba(0,0,0,.4); box-shadow: 0 20px 60px rgba(0,0,0,.4);
overflow: hidden; overflow: hidden;
@ -436,7 +437,7 @@
align-items: center; align-items: center;
gap: 6px; gap: 6px;
padding: 6px 14px; padding: 6px 14px;
border-radius: 4px; border-radius: 20px;
background: var(--bg-tertiary); background: var(--bg-tertiary);
color: var(--text-muted); color: var(--text-muted);
font-family: var(--font); font-family: var(--font);
@ -489,7 +490,7 @@
height: 32px; height: 32px;
padding: 0 28px 0 32px; padding: 0 28px 0 32px;
border: 1px solid rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .06);
border-radius: 4px; border-radius: 20px;
background: var(--bg-secondary); background: var(--bg-secondary);
color: var(--text-normal); color: var(--text-normal);
font-family: var(--font); font-family: var(--font);
@ -540,7 +541,7 @@
max-width: 460px; max-width: 460px;
flex: 1; flex: 1;
padding: 4px 6px 4px 8px; padding: 4px 6px 4px 8px;
border-radius: 4px; border-radius: 20px;
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .08);
} }
@ -570,7 +571,7 @@
.url-import-btn { .url-import-btn {
height: 24px; height: 24px;
padding: 0 10px; padding: 0 10px;
border-radius: 6px; border-radius: 14px;
border: 1px solid rgba(var(--accent-rgb, 88, 101, 242), .45); border: 1px solid rgba(var(--accent-rgb, 88, 101, 242), .45);
background: rgba(var(--accent-rgb, 88, 101, 242), .12); background: rgba(var(--accent-rgb, 88, 101, 242), .12);
color: var(--accent); color: var(--accent);
@ -616,7 +617,7 @@
gap: 6px; gap: 6px;
padding: 6px 12px; padding: 6px 12px;
border: 1px solid rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .08);
border-radius: 4px; border-radius: 20px;
background: var(--bg-tertiary); background: var(--bg-tertiary);
color: var(--text-muted); color: var(--text-muted);
font-family: var(--font); font-family: var(--font);
@ -655,20 +656,20 @@
.tb-btn.party:hover { .tb-btn.party:hover {
background: var(--yellow); background: var(--yellow);
color: #1a1810; color: #1a1b1e;
border-color: var(--yellow); border-color: var(--yellow);
} }
.tb-btn.party.active { .tb-btn.party.active {
background: var(--yellow); background: var(--yellow);
color: #1a1810; color: #1a1b1e;
border-color: var(--yellow); border-color: var(--yellow);
animation: party-btn 600ms ease-in-out infinite alternate; animation: party-btn 600ms ease-in-out infinite alternate;
} }
@keyframes party-btn { @keyframes party-btn {
from { opacity: .85; } from { box-shadow: 0 0 8px rgba(240, 178, 50, .4); }
to { opacity: 1; } to { box-shadow: 0 0 20px rgba(240, 178, 50, .7); }
} }
.tb-btn.stop { .tb-btn.stop {
@ -688,7 +689,7 @@
align-items: center; align-items: center;
gap: 6px; gap: 6px;
padding: 4px 10px; padding: 4px 10px;
border-radius: 4px; border-radius: 20px;
background: var(--bg-tertiary); background: var(--bg-tertiary);
border: 1px solid rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .06);
} }
@ -738,7 +739,7 @@
align-items: center; align-items: center;
gap: 4px; gap: 4px;
padding: 4px 8px; padding: 4px 8px;
border-radius: 4px; border-radius: 20px;
background: var(--bg-tertiary); background: var(--bg-tertiary);
border: 1px solid rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .06);
} }
@ -758,6 +759,7 @@
.theme-dot.active { .theme-dot.active {
border-color: var(--white); border-color: var(--white);
box-shadow: 0 0 6px rgba(255, 255, 255, .3);
} }
/* ── Analytics Strip ── */ /* ── Analytics Strip ── */
@ -776,7 +778,7 @@
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 8px 12px; padding: 8px 12px;
border-radius: 6px; border-radius: 12px;
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .08);
} }
@ -869,7 +871,7 @@
align-items: center; align-items: center;
gap: 6px; gap: 6px;
padding: 4px 12px; padding: 4px 12px;
border-radius: 4px; border-radius: 20px;
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
color: var(--text-muted); color: var(--text-muted);
@ -944,13 +946,28 @@
animation: card-enter 350ms ease-out forwards; 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 { .sound-card:hover {
background: var(--bg-tertiary); background: var(--bg-tertiary);
transform: translateY(-3px); transform: translateY(-3px);
box-shadow: var(--shadow-med); box-shadow: var(--shadow-med), 0 0 20px var(--accent-glow);
border-color: rgba(88, 101, 242, .2); border-color: rgba(88, 101, 242, .2);
} }
.sound-card:hover::before {
opacity: 1;
}
.sound-card:active { .sound-card:active {
transform: translateY(0); transform: translateY(0);
transition-duration: 50ms; transition-duration: 50ms;
@ -958,7 +975,12 @@
.sound-card.playing { .sound-card.playing {
border-color: var(--accent); border-color: var(--accent);
animation: card-enter 350ms ease-out forwards; 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); }
} }
@keyframes card-enter { @keyframes card-enter {
@ -1148,7 +1170,7 @@
align-items: center; align-items: center;
gap: 6px; gap: 6px;
padding: 4px 12px; padding: 4px 12px;
border-radius: 4px; border-radius: 20px;
background: rgba(var(--accent-rgb, 88, 101, 242), .12); background: rgba(var(--accent-rgb, 88, 101, 242), .12);
border: 1px solid rgba(var(--accent-rgb, 88, 101, 242), .2); border: 1px solid rgba(var(--accent-rgb, 88, 101, 242), .2);
font-size: 12px; font-size: 12px;
@ -1199,7 +1221,7 @@
align-items: center; align-items: center;
gap: 6px; gap: 6px;
padding: 4px 10px; padding: 4px 10px;
border-radius: 4px; border-radius: 20px;
background: var(--bg-tertiary); background: var(--bg-tertiary);
border: 1px solid rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .06);
} }
@ -1279,7 +1301,20 @@
content: ''; content: '';
position: absolute; position: absolute;
inset: 0; inset: 0;
background: rgba(255, 255, 255, .03); 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%; }
} }
@keyframes party-hue { @keyframes party-hue {
@ -1351,7 +1386,7 @@
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
padding: 10px 20px; padding: 10px 20px;
border-radius: 4px; border-radius: 20px;
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
z-index: 100; z-index: 100;
@ -1567,7 +1602,7 @@
justify-content: space-between; justify-content: space-between;
gap: 10px; gap: 10px;
padding: 8px 10px; padding: 8px 10px;
border-radius: 6px; border-radius: 10px;
background: var(--bg-tertiary); background: var(--bg-tertiary);
border: 1px solid rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .08);
flex-wrap: wrap; flex-wrap: wrap;
@ -1591,7 +1626,7 @@
max-height: 52vh; max-height: 52vh;
overflow-y: auto; overflow-y: auto;
border: 1px solid rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .08);
border-radius: 6px; border-radius: 10px;
background: var(--bg-primary); background: var(--bg-primary);
} }
@ -1817,7 +1852,7 @@
align-items: center; align-items: center;
gap: 14px; gap: 14px;
padding: 64px 72px; padding: 64px 72px;
border-radius: 6px; border-radius: 24px;
border: 2.5px dashed rgba(var(--accent-rgb), .55); border: 2.5px dashed rgba(var(--accent-rgb), .55);
background: rgba(var(--accent-rgb), .07); background: rgba(var(--accent-rgb), .07);
animation: drop-pulse 2.2s ease-in-out infinite; animation: drop-pulse 2.2s ease-in-out infinite;
@ -1826,9 +1861,11 @@
@keyframes drop-pulse { @keyframes drop-pulse {
0%, 100% { 0%, 100% {
border-color: rgba(var(--accent-rgb), .45); border-color: rgba(var(--accent-rgb), .45);
box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0);
} }
50% { 50% {
border-color: rgba(var(--accent-rgb), .9); border-color: rgba(var(--accent-rgb), .9);
box-shadow: 0 0 60px 12px rgba(var(--accent-rgb), .12);
} }
} }
@ -1865,7 +1902,7 @@
width: 340px; width: 340px;
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .09);
border-radius: 6px; border-radius: 14px;
box-shadow: 0 8px 40px rgba(0, 0, 0, .45); box-shadow: 0 8px 40px rgba(0, 0, 0, .45);
z-index: 200; z-index: 200;
animation: slide-up 200ms cubic-bezier(.16,1,.3,1); animation: slide-up 200ms cubic-bezier(.16,1,.3,1);
@ -2011,7 +2048,7 @@
width: 420px; max-width: 92vw; width: 420px; max-width: 92vw;
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .1);
border-radius: 4px; border-radius: 16px;
box-shadow: 0 12px 60px rgba(0, 0, 0, .5); box-shadow: 0 12px 60px rgba(0, 0, 0, .5);
animation: scale-in 200ms cubic-bezier(.16, 1, .3, 1); animation: scale-in 200ms cubic-bezier(.16, 1, .3, 1);
} }

4
web/src/plugins/streaming/streaming.css
View file

@ -536,7 +536,7 @@
.stream-admin-panel { .stream-admin-panel {
background: var(--bg-secondary); background: var(--bg-secondary);
border-radius: 6px; border-radius: 12px;
width: 560px; width: 560px;
max-width: 95vw; max-width: 95vw;
max-height: 80vh; max-height: 80vh;
@ -649,7 +649,7 @@
align-items: center; align-items: center;
gap: 4px; gap: 4px;
padding: 4px 10px; padding: 4px 10px;
border-radius: 6px; border-radius: 14px;
font-size: 12px; font-size: 12px;
color: var(--text-muted); color: var(--text-muted);
background: var(--bg-secondary); background: var(--bg-secondary);

10
web/src/plugins/watch-together/watch-together.css
View file

@ -554,9 +554,9 @@
} }
.wt-quality-select { .wt-quality-select {
background: var(--bg-secondary, #2a2620); background: var(--bg-secondary, #2a2a3e);
color: var(--text-primary, #e0e0e0); color: var(--text-primary, #e0e0e0);
border: 1px solid var(--border-color, #322d26); border: 1px solid var(--border-color, #3a3a4e);
border-radius: 6px; border-radius: 6px;
padding: 2px 6px; padding: 2px 6px;
font-size: 12px; font-size: 12px;
@ -862,9 +862,9 @@
border-radius: 50%; border-radius: 50%;
flex-shrink: 0; flex-shrink: 0;
} }
.wt-sync-synced { background: #2ecc71; } .wt-sync-synced { background: #2ecc71; box-shadow: 0 0 6px rgba(46, 204, 113, 0.5); }
.wt-sync-drifting { background: #f1c40f; } .wt-sync-drifting { background: #f1c40f; box-shadow: 0 0 6px rgba(241, 196, 15, 0.5); }
.wt-sync-desynced { background: #e74c3c; } .wt-sync-desynced { background: #e74c3c; box-shadow: 0 0 6px rgba(231, 76, 60, 0.5); }
/* ══════════════════════════════════════ /* ══════════════════════════════════════
VOTE BUTTONS VOTE BUTTONS

78
web/src/styles.css
View file

@ -1,35 +1,24 @@
/* ── 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 ── */ /* ── CSS Variables ── */
:root { :root {
--bg-deep: #1a1810; --bg-deep: #1a1b1e;
--bg-primary: #211e17; --bg-primary: #1e1f22;
--bg-secondary: #2a2620; --bg-secondary: #2b2d31;
--bg-tertiary: #322d26; --bg-tertiary: #313338;
--bg-card: #2a2620;
--bg-card-hover: #322d26;
--bg-input: #1e1b15;
--bg-header: #1e1b14;
--text-normal: #dbdee1; --text-normal: #dbdee1;
--text-muted: #949ba4; --text-muted: #949ba4;
--text-faint: #6d6f78; --text-faint: #6d6f78;
--accent: #e67e22; --accent: #e67e22;
--accent-rgb: 230, 126, 34; --accent-rgb: 230, 126, 34;
--accent-hover: #d35400; --accent-hover: #d35400;
--accent-dim: rgba(230, 126, 34, 0.15);
--accent-border: rgba(230, 126, 34, 0.35);
--success: #57d28f; --success: #57d28f;
--danger: #ed4245; --danger: #ed4245;
--warning: #fee75c; --warning: #fee75c;
--border: rgba(255, 255, 255, 0.05); --border: rgba(255, 255, 255, 0.06);
--border-strong: rgba(255, 255, 255, 0.08); --radius: 8px;
--radius: 4px; --radius-lg: 12px;
--radius-lg: 6px;
--transition: 150ms ease; --transition: 150ms ease;
--font: 'DM Sans', system-ui, -apple-system, sans-serif; --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
--mono: 'DM Mono', monospace; --header-height: 56px;
--header-height: 44px;
} }
/* ── Reset & Base ── */ /* ── Reset & Base ── */
@ -44,7 +33,7 @@
html, body { html, body {
height: 100%; height: 100%;
font-family: var(--font); font-family: var(--font);
font-size: 13px; font-size: 15px;
color: var(--text-normal); color: var(--text-normal);
background: var(--bg-deep); background: var(--bg-deep);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -272,7 +261,7 @@ html, body {
.hub-update-modal { .hub-update-modal {
background: var(--bg-card); background: var(--bg-card);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 6px; border-radius: 12px;
padding: 32px 40px; padding: 32px 40px;
text-align: center; text-align: center;
min-width: 320px; min-width: 320px;
@ -399,7 +388,7 @@ html, body {
.hub-admin-modal { .hub-admin-modal {
background: var(--bg-card); background: var(--bg-card);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 6px; border-radius: 12px;
width: 340px; width: 340px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
} }
@ -486,7 +475,7 @@ html, body {
.hub-version-modal { .hub-version-modal {
background: var(--bg-primary); background: var(--bg-primary);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 4px; border-radius: 16px;
width: 340px; width: 340px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
overflow: hidden; overflow: hidden;
@ -809,10 +798,10 @@ html, body {
background: var(--bg-deep); background: var(--bg-deep);
/* Default-Theme Vars (scoped, damit data-theme sie überschreiben kann) */ /* Default-Theme Vars (scoped, damit data-theme sie überschreiben kann) */
--bg-deep: #1a1810; --bg-deep: #1a1b1e;
--bg-primary: #211e17; --bg-primary: #1e1f22;
--bg-secondary: #2a2620; --bg-secondary: #2b2d31;
--bg-tertiary: #322d26; --bg-tertiary: #313338;
--text-normal: #dbdee1; --text-normal: #dbdee1;
--text-muted: #949ba4; --text-muted: #949ba4;
--text-faint: #6d6f78; --text-faint: #6d6f78;
@ -870,7 +859,7 @@ html, body {
align-items: center; align-items: center;
padding: 0 16px; padding: 0 16px;
height: 52px; height: 52px;
background: var(--bg-secondary, #2a2620); background: var(--bg-secondary, #2b2d31);
border-bottom: 1px solid rgba(0, 0, 0, .24); border-bottom: 1px solid rgba(0, 0, 0, .24);
z-index: 10; z-index: 10;
flex-shrink: 0; flex-shrink: 0;
@ -969,7 +958,8 @@ html, body {
.radio-search-wrap { .radio-search-wrap {
display: flex; display: flex;
align-items: center; align-items: center;
background: rgba(33, 30, 23, 0.92); background: rgba(30, 31, 34, 0.92);
backdrop-filter: blur(12px);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: 0 14px; padding: 0 14px;
@ -1016,7 +1006,8 @@ html, body {
/* ── Search Results ── */ /* ── Search Results ── */
.radio-search-results { .radio-search-results {
margin-top: 6px; margin-top: 6px;
background: rgba(33, 30, 23, 0.95); background: rgba(30, 31, 34, 0.95);
backdrop-filter: blur(12px);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
max-height: 360px; max-height: 360px;
@ -1088,7 +1079,8 @@ html, body {
align-items: center; align-items: center;
gap: 4px; gap: 4px;
padding: 10px 14px; padding: 10px 14px;
background: rgba(33, 30, 23, 0.92); background: rgba(30, 31, 34, 0.92);
backdrop-filter: blur(12px);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
color: var(--text-normal); color: var(--text-normal);
@ -1110,7 +1102,7 @@ html, body {
background: var(--accent); background: var(--accent);
color: #fff; color: #fff;
padding: 1px 6px; padding: 1px 6px;
border-radius: 6px; border-radius: 10px;
min-width: 18px; min-width: 18px;
text-align: center; text-align: center;
} }
@ -1123,7 +1115,8 @@ html, body {
width: 340px; width: 340px;
height: 100%; height: 100%;
z-index: 15; z-index: 15;
background: rgba(33, 30, 23, 0.95); background: rgba(30, 31, 34, 0.95);
backdrop-filter: blur(16px);
border-left: 1px solid var(--border); border-left: 1px solid var(--border);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -1414,7 +1407,7 @@ html, body {
width: 100px; width: 100px;
height: 4px; height: 4px;
border-radius: 2px; border-radius: 2px;
background: var(--bg-tertiary, #3a352d); background: var(--bg-tertiary, #383a40);
outline: none; outline: none;
cursor: pointer; cursor: pointer;
} }
@ -1463,6 +1456,7 @@ html, body {
.radio-theme-dot.active { .radio-theme-dot.active {
border-color: #fff; border-color: #fff;
box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
} }
/* ── Station count ── */ /* ── Station count ── */
@ -1473,7 +1467,7 @@ html, body {
z-index: 10; z-index: 10;
font-size: 12px; font-size: 12px;
color: var(--text-faint); color: var(--text-faint);
background: rgba(33, 30, 23, 0.8); background: rgba(30, 31, 34, 0.8);
padding: 4px 10px; padding: 4px 10px;
border-radius: 20px; border-radius: 20px;
pointer-events: none; pointer-events: none;
@ -1486,7 +1480,7 @@ html, body {
z-index: 10; z-index: 10;
font-size: 12px; font-size: 12px;
color: var(--text-faint); color: var(--text-faint);
background: rgba(33, 30, 23, 0.8); background: rgba(30, 31, 34, 0.8);
padding: 4px 10px; padding: 4px 10px;
border-radius: 20px; border-radius: 20px;
text-decoration: none; text-decoration: none;
@ -1495,7 +1489,7 @@ html, body {
.radio-attribution:hover { .radio-attribution:hover {
color: var(--text-normal); color: var(--text-normal);
background: rgba(33, 30, 23, 0.92); background: rgba(30, 31, 34, 0.92);
} }
/* ── Spinner ── */ /* ── Spinner ── */
@ -1611,7 +1605,7 @@ html, body {
.radio-modal { .radio-modal {
background: var(--bg-primary); background: var(--bg-primary);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 4px; border-radius: 16px;
width: 340px; width: 340px;
box-shadow: 0 20px 60px rgba(0, 0, 0, .4); box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
overflow: hidden; overflow: hidden;
@ -1705,7 +1699,7 @@ html, body {
height: min(620px, calc(100vh - 60px)); height: min(620px, calc(100vh - 60px));
background: var(--bg-primary); background: var(--bg-primary);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 4px; border-radius: 16px;
overflow: hidden; overflow: hidden;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
animation: hub-modal-in 200ms ease; animation: hub-modal-in 200ms ease;
@ -2383,7 +2377,7 @@ html, body {
.hub-login-modal { .hub-login-modal {
background: var(--bg-primary); background: var(--bg-primary);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 4px; border-radius: 16px;
width: 380px; width: 380px;
max-width: 92vw; max-width: 92vw;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
@ -2580,7 +2574,7 @@ html, body {
.hub-usettings-panel { .hub-usettings-panel {
background: var(--bg-primary); background: var(--bg-primary);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 4px; border-radius: 16px;
width: 520px; width: 520px;
max-width: 95vw; max-width: 95vw;
max-height: 85vh; max-height: 85vh;