.forgejo/workflows/build-deploy.yml

@@ -6,6 +6,7 @@ on:
 
 env:
   REGISTRY: forgejo.adriahub.de
+  REGISTRY_MIRROR: forgejo.daddelolymp.de
   IMAGE: root/gaming-hub
 
 jobs:
@@ -66,13 +67,27 @@ jobs:
             docker push ${{ env.REGISTRY }}/${{ env.IMAGE }}:latest
           fi
 
+      - name: Mirror to registry (daddelolymp)
+        run: |
+          echo "${{ secrets.REGISTRY_DADDELOLYMP_PASSWORD }}" | docker login ${{ env.REGISTRY_MIRROR }} -u root --password-stdin
+          docker tag ${{ env.REGISTRY }}/${{ env.IMAGE }}:${{ steps.vars.outputs.tag }} \
+            ${{ env.REGISTRY_MIRROR }}/${{ env.IMAGE }}:${{ steps.vars.outputs.tag }}
+          docker push ${{ env.REGISTRY_MIRROR }}/${{ env.IMAGE }}:${{ steps.vars.outputs.tag }}
+          if [ "${GITHUB_REF_NAME}" = "main" ]; then
+            docker tag ${{ env.REGISTRY }}/${{ env.IMAGE }}:latest \
+              ${{ env.REGISTRY_MIRROR }}/${{ env.IMAGE }}:latest
+            docker push ${{ env.REGISTRY_MIRROR }}/${{ env.IMAGE }}:latest
+          fi
+
       - name: Cleanup build artifacts
         if: always()
         run: |
           TAG="${{ steps.vars.outputs.tag }}"
           docker rmi "${{ env.REGISTRY }}/${{ env.IMAGE }}:${TAG}" 2>/dev/null || true
+          docker rmi "${{ env.REGISTRY_MIRROR }}/${{ env.IMAGE }}:${TAG}" 2>/dev/null || true
           if [ "${GITHUB_REF_NAME}" = "main" ]; then
             docker rmi "${{ env.REGISTRY }}/${{ env.IMAGE }}:latest" 2>/dev/null || true
+            docker rmi "${{ env.REGISTRY_MIRROR }}/${{ env.IMAGE }}:latest" 2>/dev/null || true
           fi
           docker image prune -f 2>/dev/null || true
           docker builder prune -f --keep-storage=4GB 2>/dev/null || true
@@ -117,6 +132,7 @@ jobs:
             -e DISCORD_CLIENT_ID="${{ secrets.DISCORD_CLIENT_ID }}" \
             -e DISCORD_CLIENT_SECRET="${{ secrets.DISCORD_CLIENT_SECRET }}" \
             -v /mnt/cache/appdata/gaming-hub/data:/data:rw \
+            -v /mnt/cache/appdata/dockge/container/jukebox/sounds/:/data/sounds:rw \
             "$DEPLOY_IMAGE"
 
           docker ps --filter name="$CONTAINER_NAME"

VERSION

@@ -1 +1 @@
-1.9.7
+1.9.0

web/src/App.tsx

@@ -48,14 +48,6 @@ export function registerTab(pluginName: string, component: React.FC<{ data: any;
 
 type UpdateStatus = 'idle' | 'checking' | 'available' | 'downloading' | 'ready' | 'upToDate' | 'error';
 
-const APP_THEMES = [
-  { id: 'default', color: '#e67e22', label: 'Ember' },
-  { id: 'purple', color: '#9b59b6', label: 'Amethyst' },
-  { id: 'forest', color: '#2ecc71', label: 'Jade' },
-  { id: 'ocean', color: '#3498db', label: 'Ocean' },
-  { id: 'cherry', color: '#e74c6f', label: 'Rose' },
-];
-
 export default function App() {
   const [connected, setConnected] = useState(false);
   const [plugins, setPlugins] = useState<PluginInfo[]>([]);
@@ -66,31 +58,8 @@ export default function App() {
     localStorage.setItem('hub_activeTab', tab);
   };
   const [showVersionModal, setShowVersionModal] = useState(false);
-  const [showSettingsModal, setShowSettingsModal] = useState(false);
   const [pluginData, setPluginData] = useState<Record<string, any>>({});
 
-  // ── Global Theme ──
-  const [theme, setThemeRaw] = useState(() => localStorage.getItem('hub-theme') || 'default');
-  const setTheme = (t: string) => {
-    setThemeRaw(t);
-    localStorage.setItem('hub-theme', t);
-  };
-
-  // ── Clock ──
-  const [clock, setClock] = useState('');
-  useEffect(() => {
-    const update = () => {
-      const now = new Date();
-      const h = String(now.getHours()).padStart(2, '0');
-      const m = String(now.getMinutes()).padStart(2, '0');
-      const s = String(now.getSeconds()).padStart(2, '0');
-      setClock(`${h}:${m}:${s}`);
-    };
-    update();
-    const id = setInterval(update, 1000);
-    return () => clearInterval(id);
-  }, []);
-
   // ── Unified Auth State ──
   const [user, setUser] = useState<AuthUser>({ authenticated: false });
   const [providers, setProviders] = useState<AuthProviders>({ discord: false, steam: false, admin: false });
@@ -279,7 +248,7 @@ export default function App() {
   }
 
   return (
-    <div className="hub-app" data-theme={theme}>
+    <div className="hub-app">
       <header className="hub-header">
         <div className="hub-header-left">
           <span className="hub-logo">{'\u{1F3AE}'}</span>
@@ -341,31 +310,13 @@ export default function App() {
             )}
           </button>
 
-          <button
-            className="hub-settings-btn"
-            onClick={() => setShowSettingsModal(true)}
-            title="Einstellungen"
-          >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
-              <circle cx="12" cy="12" r="3" />
-            </svg>
-          </button>
           <button
             className="hub-refresh-btn"
             onClick={() => window.location.reload()}
             title="Seite neu laden"
           >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            {'\u{1F504}'}
-              <path d="M21 2v6h-6" />
-              <path d="M3 12a9 9 0 0 1 15-6.7L21 8" />
-              <path d="M3 22v-6h6" />
-              <path d="M21 12a9 9 0 0 1-15 6.7L3 16" />
-            </svg>
           </button>
-          <span className="hub-clock">
-            {clock.slice(0, 5)}<span className="hub-clock-sec">{clock.slice(5)}</span>
-          </span>
           <span
             className="hub-version hub-version-clickable"
             onClick={() => {
@@ -387,37 +338,6 @@ export default function App() {
       </header>
 
 
-      {/* Settings Modal */}
-      {showSettingsModal && (
-        <div className="hub-settings-overlay" onClick={() => setShowSettingsModal(false)}>
-          <div className="hub-settings-modal" onClick={e => e.stopPropagation()}>
-            <div className="hub-settings-modal-header">
-              <span>Einstellungen</span>
-              <button className="hub-settings-modal-close" onClick={() => setShowSettingsModal(false)}>
-                {'\u2715'}
-              </button>
-            </div>
-            <div className="hub-settings-modal-body">
-              <div className="hub-settings-section">
-                <span className="hub-settings-section-label">Farbschema</span>
-                <div className="hub-settings-theme-grid">
-                  {APP_THEMES.map(t => (
-                    <button
-                      key={t.id}
-                      className={`hub-settings-theme-btn ${theme === t.id ? 'active' : ''}`}
-                      onClick={() => setTheme(t.id)}
-                    >
-                      <span className="hub-settings-theme-dot" style={{ background: t.color }} />
-                      <span className="hub-settings-theme-label">{t.label}</span>
-                    </button>
-                  ))}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-
       {showVersionModal && (
         <div className="hub-version-overlay" onClick={() => setShowVersionModal(false)}>
           <div className="hub-version-modal" onClick={e => e.stopPropagation()}>

web/src/plugins/radio/RadioTab.tsx

@@ -54,6 +54,13 @@ interface VoiceStats {
   connectedSince: string | null;
 }
 
+const THEMES = [
+  { id: 'default', color: '#e67e22', label: 'Sunset' },
+  { id: 'purple', color: '#9b59b6', label: 'Midnight' },
+  { id: 'forest', color: '#2ecc71', label: 'Forest' },
+  { id: 'ocean', color: '#3498db', label: 'Ocean' },
+  { id: 'cherry', color: '#e74c6f', label: 'Cherry' },
+];
 
 // ── Zoom scaling constants ──
 const BASE_ALT = 2.0;
@@ -64,6 +71,7 @@ export default function RadioTab({ data }: { data: any }) {
   const globeRef = useRef<any>(null);
   const rotationResumeRef = useRef<ReturnType<typeof setTimeout>>(undefined);
 
+  const [theme, setTheme] = useState(() => localStorage.getItem('radio-theme') || 'default');
   const [places, setPlaces] = useState<RadioPlace[]>([]);
   const [selectedPlace, setSelectedPlace] = useState<RadioPlace | null>(null);
   const [stations, setStations] = useState<RadioChannel[]>([]);
@@ -144,24 +152,17 @@ export default function RadioTab({ data }: { data: any }) {
     }
   }, [data, selectedGuild]);
 
-  // ── Update globe colors when global theme changes ──
+  // ── Theme persist + update globe colors ──
   useEffect(() => {
-    function updateGlobeColors() {
+    localStorage.setItem('radio-theme', theme);
-      if (!globeRef.current || !containerRef.current) return;
+    if (globeRef.current && containerRef.current) {
-      const style = getComputedStyle(containerRef.current);
+      const style = getComputedStyle(containerRef.current.parentElement!);
       const accentRgb = style.getPropertyValue('--accent-rgb').trim();
-      if (!accentRgb) return;
       globeRef.current
         .pointColor(() => `rgba(${accentRgb}, 0.85)`)
         .atmosphereColor(`rgba(${accentRgb}, 0.25)`);
     }
-    updateGlobeColors();
+  }, [theme]);
-    const app = document.querySelector('.hub-app');
-    if (!app) return;
-    const observer = new MutationObserver(updateGlobeColors);
-    observer.observe(app, { attributes: true, attributeFilter: ['data-theme'] });
-    return () => observer.disconnect();
-  }, []);
 
   // ── Helper: pause globe rotation for 5s (only resumes if no panel open) ──
   const selectedPlaceRef = useRef(selectedPlace);
@@ -465,7 +466,7 @@ export default function RadioTab({ data }: { data: any }) {
   const currentGuild = guilds.find(g => g.id === selectedGuild);
 
   return (
-    <div className="radio-container">
+    <div className="radio-container" data-theme={theme}>
 
       {/* ═══ TOPBAR ═══ */}
       <header className="radio-topbar">
@@ -525,6 +526,17 @@ export default function RadioTab({ data }: { data: any }) {
               <button className="radio-topbar-stop" onClick={handleStop}>{'\u23F9'} Stop</button>
             </>
           )}
+          <div className="radio-theme-inline">
+            {THEMES.map(t => (
+              <div
+                key={t.id}
+                className={`radio-theme-dot ${theme === t.id ? 'active' : ''}`}
+                style={{ background: t.color }}
+                title={t.label}
+                onClick={() => setTheme(t.id)}
+              />
+            ))}
+          </div>
         </div>
       </header>
 

web/src/plugins/soundboard/SoundboardTab.tsx

@@ -266,6 +266,13 @@ function apiUploadFileWithName(
    CONSTANTS
    ══════════════════════════════════════════════════════════════════ */
 
+const THEMES = [
+  { id: 'default', color: '#5865f2', label: 'Discord' },
+  { id: 'purple', color: '#9b59b6', label: 'Midnight' },
+  { id: 'forest', color: '#2ecc71', label: 'Forest' },
+  { id: 'sunset', color: '#e67e22', label: 'Sunset' },
+  { id: 'ocean', color: '#3498db', label: 'Ocean' },
+];
 
 const CAT_PALETTE = [
   '#3b82f6', '#f59e0b', '#8b5cf6', '#ec4899', '#14b8a6',
@@ -343,6 +350,8 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
 
   /* ── Preferences ── */
   const [favs, setFavs] = useState<Record<string, boolean>>({});
+  const [theme, setTheme] = useState(() => localStorage.getItem('jb-theme') || 'default');
+  const [cardSize, setCardSize] = useState(() => parseInt(localStorage.getItem('jb-card-size') || '110'));
 
   /* ── Party ── */
   const [chaosMode, setChaosMode] = useState(false);
@@ -373,6 +382,7 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
 
   /* ── UI ── */
   const [notification, setNotification] = useState<{ msg: string; type: 'info' | 'error' } | null>(null);
+  const [clock, setClock] = useState('');
   const [ctxMenu, setCtxMenu] = useState<{ x: number; y: number; sound: Sound } | null>(null);
   const [refreshKey, setRefreshKey] = useState(0);
 
@@ -458,6 +468,20 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
     channels.find(c => `${c.guildId}:${c.channelId}` === selected),
   [channels, selected]);
 
+  /* ── Clock ── */
+  useEffect(() => {
+    const update = () => {
+      const now = new Date();
+      const h = String(now.getHours()).padStart(2, '0');
+      const m = String(now.getMinutes()).padStart(2, '0');
+      const s = String(now.getSeconds()).padStart(2, '0');
+      setClock(`${h}:${m}:${s}`);
+    };
+    update();
+    const id = setInterval(update, 1000);
+    return () => clearInterval(id);
+  }, []);
+
   /* ── Init ── */
   useEffect(() => {
     (async () => {
@@ -476,6 +500,23 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  /* ── Theme (persist only, data-theme is set on .sb-app div) ── */
+  useEffect(() => {
+    localStorage.setItem('jb-theme', theme);
+  }, [theme]);
+
+  /* ── Card size (scoped to .sb-app container) ── */
+  const sbAppRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const el = sbAppRef.current;
+    if (!el) return;
+    el.style.setProperty('--card-size', cardSize + 'px');
+    const ratio = cardSize / 110;
+    el.style.setProperty('--card-emoji', Math.round(28 * ratio) + 'px');
+    el.style.setProperty('--card-font', Math.max(9, Math.round(11 * ratio)) + 'px');
+    localStorage.setItem('jb-card-size', String(cardSize));
+  }, [cardSize]);
+
   /* ── SSE via props.data instead of own EventSource ── */
   useEffect(() => {
     if (!data) return;
@@ -786,11 +827,14 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
   const analyticsTop = analytics.mostPlayed.slice(0, 10);
   const totalSoundsDisplay = analytics.totalSounds || total;
 
+  const clockMain = clock.slice(0, 5);
+  const clockSec = clock.slice(5);
+
   /* ════════════════════════════════════════════
      RENDER
      ════════════════════════════════════════════ */
   return (
-    <div className="sb-app">
+    <div className="sb-app" data-theme={theme} ref={sbAppRef}>
       {chaosMode && <div className="party-overlay active" />}
 
       {/* ═══ TOPBAR ═══ */}
@@ -839,6 +883,10 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
           </div>
         </div>
 
+        <div className="clock-wrap">
+          <div className="clock">{clockMain}<span className="clock-seconds">{clockSec}</span></div>
+        </div>
+
         <div className="topbar-right">
           {lastPlayed && (
             <div className="now-playing">
@@ -849,6 +897,15 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
               <span className="np-label">Last Played:</span> <span className="np-name">{lastPlayed}</span>
             </div>
           )}
+          {selected && (
+            <div className="connection" onClick={() => setShowConnModal(true)} style={{cursor:'pointer'}} title="Verbindungsdetails">
+              <span className="conn-dot" />
+              Verbunden
+              {voiceStats?.voicePing != null && (
+                <span className="conn-ping">{voiceStats.voicePing}ms</span>
+              )}
+            </div>
+          )}
         </div>
       </header>
 
@@ -979,16 +1036,29 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
           Stop
         </button>
 
-        {selected && (
+        <div className="size-control" title="Button-Groesse">
-          <div className="connection" onClick={() => setShowConnModal(true)} style={{cursor:'pointer'}} title="Verbindungsdetails">
+          <span className="material-icons sc-icon">grid_view</span>
-            <span className="conn-dot" />
+          <input
-            Verbunden
+            type="range"
-            {voiceStats?.voicePing != null && (
+            className="size-slider"
-              <span className="conn-ping">{voiceStats.voicePing}ms</span>
+            min={80}
-            )}
+            max={160}
+            value={cardSize}
+            onChange={e => setCardSize(parseInt(e.target.value))}
+          />
         </div>
-        )}
 
+        <div className="theme-selector">
+          {THEMES.map(t => (
+            <div
+              key={t.id}
+              className={`theme-dot ${theme === t.id ? 'active' : ''}`}
+              style={{ background: t.color }}
+              title={t.label}
+              onClick={() => setTheme(t.id)}
+            />
+          ))}
+        </div>
       </div>
 
       <div className="analytics-strip">

web/src/plugins/soundboard/soundboard.css

@@ -6,20 +6,35 @@
    Theme Variables — Default (Discord Blurple)
    ──────────────────────────────────────────── */
 .sb-app {
-  /* Inherits all theme vars (--bg-*, --accent-*, --text-*) from .hub-app */
+  --bg-deep: #1a1810;
-  --accent-glow: rgba(var(--accent-rgb), 0.45);
+  --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);
 
+  --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', Whitney, 'Helvetica Neue', Helvetica, Arial, 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;
@@ -28,6 +43,53 @@
   color-scheme: dark;
 }
 
+/* ── Theme: Midnight Purple ── */
+.sb-app[data-theme="purple"] {
+  --bg-deep: #13111c;
+  --bg-primary: #1a1726;
+  --bg-secondary: #241f35;
+  --bg-tertiary: #2e2845;
+  --accent: #9b59b6;
+  --accent-rgb: 155, 89, 182;
+  --accent-hover: #8e44ad;
+  --accent-glow: rgba(155, 89, 182, .45);
+}
+
+/* ── Theme: Forest ── */
+.sb-app[data-theme="forest"] {
+  --bg-deep: #0f1a14;
+  --bg-primary: #142119;
+  --bg-secondary: #1c2e22;
+  --bg-tertiary: #253a2c;
+  --accent: #2ecc71;
+  --accent-rgb: 46, 204, 113;
+  --accent-hover: #27ae60;
+  --accent-glow: rgba(46, 204, 113, .4);
+}
+
+/* ── Theme: Sunset ── */
+.sb-app[data-theme="sunset"] {
+  --bg-deep: #1a1210;
+  --bg-primary: #231815;
+  --bg-secondary: #2f201c;
+  --bg-tertiary: #3d2a24;
+  --accent: #e67e22;
+  --accent-rgb: 230, 126, 34;
+  --accent-hover: #d35400;
+  --accent-glow: rgba(230, 126, 34, .4);
+}
+
+/* ── Theme: Ocean ── */
+.sb-app[data-theme="ocean"] {
+  --bg-deep: #0a1628;
+  --bg-primary: #0f1e33;
+  --bg-secondary: #162a42;
+  --bg-tertiary: #1e3652;
+  --accent: #3498db;
+  --accent-rgb: 52, 152, 219;
+  --accent-hover: #2980b9;
+  --accent-glow: rgba(52, 152, 219, .4);
+}
 
 /* ────────────────────────────────────────────
    App Layout
@@ -80,6 +142,28 @@
   letter-spacing: -.02em;
 }
 
+/* ── Clock ── */
+.clock-wrap {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+}
+
+.clock {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--text-normal);
+  letter-spacing: .02em;
+  font-variant-numeric: tabular-nums;
+  opacity: .9;
+}
+
+.clock-seconds {
+  font-size: 14px;
+  color: var(--text-faint);
+  font-weight: 500;
+}
+
 .topbar-right {
   display: flex;
   align-items: center;
@@ -598,6 +682,56 @@
   border-color: var(--red);
 }
 
+/* ── Size Slider ── */
+.size-control {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 4px;
+  background: var(--bg-tertiary);
+  border: 1px solid rgba(255, 255, 255, .06);
+}
+
+.size-control .sc-icon {
+  font-size: 14px;
+  color: var(--text-faint);
+}
+
+.size-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 70px;
+  height: 3px;
+  border-radius: 2px;
+  background: var(--bg-modifier-selected);
+  outline: none;
+  cursor: pointer;
+}
+
+.size-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--accent);
+  cursor: pointer;
+  transition: transform var(--transition);
+}
+
+.size-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.3);
+}
+
+.size-slider::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--accent);
+  border: none;
+  cursor: pointer;
+}
+
 /* ── Theme Selector ── */
 .theme-selector {
   display: flex;
@@ -1576,6 +1710,7 @@
     order: -1;
   }
 
+  .size-control,
   .theme-selector {
     display: none;
   }
@@ -1595,6 +1730,14 @@
     text-overflow: ellipsis;
   }
 
+  .clock {
+    font-size: 16px;
+  }
+
+  .clock-seconds {
+    font-size: 11px;
+  }
+
   .tb-btn span:not(.tb-icon) {
     display: none;
   }

web/src/styles.css

@@ -32,71 +32,6 @@
   --header-height: 44px;
 }
 
-/* ── Global App Themes ── */
-.hub-app[data-theme="purple"] {
-  --bg-deep: #13111c;
-  --bg-primary: #1a1726;
-  --bg-secondary: #241f35;
-  --bg-tertiary: #2e2845;
-  --bg-card: #241f35;
-  --bg-card-hover: #2e2845;
-  --bg-input: #110f19;
-  --bg-header: #161320;
-  --accent: #9b59b6;
-  --accent-rgb: 155, 89, 182;
-  --accent-hover: #8e44ad;
-  --accent-dim: rgba(155, 89, 182, 0.15);
-  --accent-border: rgba(155, 89, 182, 0.35);
-}
-
-.hub-app[data-theme="forest"] {
-  --bg-deep: #0f1a14;
-  --bg-primary: #142119;
-  --bg-secondary: #1c2e22;
-  --bg-tertiary: #253a2c;
-  --bg-card: #1c2e22;
-  --bg-card-hover: #253a2c;
-  --bg-input: #0c150f;
-  --bg-header: #111c16;
-  --accent: #2ecc71;
-  --accent-rgb: 46, 204, 113;
-  --accent-hover: #27ae60;
-  --accent-dim: rgba(46, 204, 113, 0.15);
-  --accent-border: rgba(46, 204, 113, 0.35);
-}
-
-.hub-app[data-theme="ocean"] {
-  --bg-deep: #0a1628;
-  --bg-primary: #0f1e33;
-  --bg-secondary: #162a42;
-  --bg-tertiary: #1e3652;
-  --bg-card: #162a42;
-  --bg-card-hover: #1e3652;
-  --bg-input: #081220;
-  --bg-header: #0c1a2e;
-  --accent: #3498db;
-  --accent-rgb: 52, 152, 219;
-  --accent-hover: #2980b9;
-  --accent-dim: rgba(52, 152, 219, 0.15);
-  --accent-border: rgba(52, 152, 219, 0.35);
-}
-
-.hub-app[data-theme="cherry"] {
-  --bg-deep: #1a0f14;
-  --bg-primary: #22141a;
-  --bg-secondary: #301c25;
-  --bg-tertiary: #3e2530;
-  --bg-card: #301c25;
-  --bg-card-hover: #3e2530;
-  --bg-input: #150c10;
-  --bg-header: #1d1117;
-  --accent: #e74c6f;
-  --accent-rgb: 231, 76, 111;
-  --accent-hover: #c0392b;
-  --accent-dim: rgba(231, 76, 111, 0.15);
-  --accent-border: rgba(231, 76, 111, 0.35);
-}
-
 /* ── Reset & Base ── */
 *,
 *::before,
@@ -292,20 +227,6 @@ html, body {
   line-height: 1;
 }
 
-/* ── Clock ── */
-.hub-clock {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-muted);
-  font-variant-numeric: tabular-nums;
-  letter-spacing: .02em;
-}
-.hub-clock-sec {
-  font-size: 10px;
-  color: var(--text-faint);
-  font-weight: 400;
-}
-
 .hub-version {
   font-size: 12px;
   color: var(--text-faint);
@@ -426,130 +347,21 @@ html, body {
   max-width: 300px;
 }
 
-/* ── Settings Button (Icon-Button per Styleguide §7) ── */
+/* ── Refresh Button ── */
-.hub-settings-btn {
-  padding: 6px;
-  background: none;
-  color: var(--text-muted);
-  border: none;
-  border-radius: var(--radius);
-  cursor: pointer;
-  transition: all var(--transition);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.hub-settings-btn:hover {
-  background: var(--bg-tertiary);
-  color: var(--text-normal);
-}
-
-/* ── Settings Modal ── */
-.hub-settings-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);
-}
-.hub-settings-modal {
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  width: 340px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
-}
-.hub-settings-modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 20px 12px;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text-normal);
-  border-bottom: 1px solid var(--border);
-}
-.hub-settings-modal-close {
-  background: none;
-  border: none;
-  color: var(--text-muted);
-  cursor: pointer;
-  font-size: 14px;
-  padding: 4px;
-  border-radius: var(--radius);
-  transition: all var(--transition);
-}
-.hub-settings-modal-close:hover {
-  background: var(--bg-tertiary);
-  color: var(--text-normal);
-}
-.hub-settings-modal-body {
-  padding: 16px 20px 20px;
-}
-.hub-settings-section-label {
-  display: block;
-  font-size: 11px;
-  font-weight: 500;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  margin-bottom: 10px;
-}
-.hub-settings-theme-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-.hub-settings-theme-btn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  background: transparent;
-  border: 1px solid var(--border-strong);
-  border-radius: var(--radius);
-  color: var(--text-muted);
-  font-family: var(--font);
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all var(--transition);
-}
-.hub-settings-theme-btn:hover {
-  color: var(--text-normal);
-  border-color: rgba(255, 255, 255, 0.15);
-}
-.hub-settings-theme-btn.active {
-  border-color: var(--accent);
-  color: var(--text-normal);
-  background: var(--accent-dim);
-}
-.hub-settings-theme-dot {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-/* ── Refresh Button (Icon-Button per Styleguide §7) ── */
 .hub-refresh-btn {
-  padding: 6px;
   background: none;
-  color: var(--text-muted);
   border: none;
-  border-radius: var(--radius);
+  color: var(--text-muted);
+  font-size: 1rem;
   cursor: pointer;
+  padding: 4px 6px;
+  border-radius: var(--radius);
   transition: all var(--transition);
-  display: flex;
+  line-height: 1;
-  align-items: center;
-  justify-content: center;
 }
 .hub-refresh-btn:hover {
-  background: var(--bg-tertiary);
+  color: var(--accent);
-  color: var(--text-normal);
+  background: rgba(230, 126, 34, 0.1);
 }
 
 /* ── Admin Button (header) ── */
@@ -995,6 +807,60 @@ html, body {
   height: 100%;
   overflow: hidden;
   background: var(--bg-deep);
+
+  /* Default-Theme Vars (scoped, damit data-theme sie überschreiben kann) */
+  --bg-deep: #1a1810;
+  --bg-primary: #211e17;
+  --bg-secondary: #2a2620;
+  --bg-tertiary: #322d26;
+  --text-normal: #dbdee1;
+  --text-muted: #949ba4;
+  --text-faint: #6d6f78;
+  --accent: #e67e22;
+  --accent-rgb: 230, 126, 34;
+  --accent-hover: #d35400;
+  --border: rgba(255, 255, 255, 0.06);
+}
+
+/* ── Radio Themes ── */
+.radio-container[data-theme="purple"] {
+  --bg-deep: #13111c;
+  --bg-primary: #1a1726;
+  --bg-secondary: #241f35;
+  --bg-tertiary: #2e2845;
+  --accent: #9b59b6;
+  --accent-rgb: 155, 89, 182;
+  --accent-hover: #8e44ad;
+}
+
+.radio-container[data-theme="forest"] {
+  --bg-deep: #0f1a14;
+  --bg-primary: #142119;
+  --bg-secondary: #1c2e22;
+  --bg-tertiary: #253a2c;
+  --accent: #2ecc71;
+  --accent-rgb: 46, 204, 113;
+  --accent-hover: #27ae60;
+}
+
+.radio-container[data-theme="ocean"] {
+  --bg-deep: #0a1628;
+  --bg-primary: #0f1e33;
+  --bg-secondary: #162a42;
+  --bg-tertiary: #1e3652;
+  --accent: #3498db;
+  --accent-rgb: 52, 152, 219;
+  --accent-hover: #2980b9;
+}
+
+.radio-container[data-theme="cherry"] {
+  --bg-deep: #1a0f14;
+  --bg-primary: #22141a;
+  --bg-secondary: #301c25;
+  --bg-tertiary: #3e2530;
+  --accent: #e74c6f;
+  --accent-rgb: 231, 76, 111;
+  --accent-hover: #c0392b;
 }
 
 /* ── Globe ── */