/* =================================================================== WebCB – Alternatives Design ("Klassisches CB-Gerät") Wird aktiv, sobald gesetzt ist (Umschalter oben rechts in der Kopfzeile von index.php, die Wahl wird je Browser in localStorage gemerkt und gilt seitenweit). Überschreibt ausschließlich Farben/Verläufe aus assets/style.css - Struktur, Klassen-/ID-Namen und app.js bleiben komplett unverändert, nichts Funktionales wird berührt. Muss NACH assets/style.css eingebunden werden. =================================================================== */ :root[data-theme="alt"]{ --metal-1:#4d4d4d; --metal-2:#2b2b2b; --metal-3:#181818; --housing:#0d0d0d; --panel:#303030; --panel-2:#1e1e1e; --panel-inset:#141414; --line:#565656; --line-soft:#3a3a3a; /* Im Klassik-Design übernimmt Grün die Rolle, die Amber im Standard-Design hat */ --led-amber:#4dff5c; --led-amber-dim:#1f5a28; --led-green:#39ff46; --led-green-dim:#123a17; --led-red:#ff3b3b; --led-red-dim:#751010; --lcd-bg:#081008; --lcd-fg:#61ff69; --lcd-fg-dim:#2e6a35; --text:#e8e8e8; --text-dim:#aaaaaa; --text-faint:#787878; } [data-theme="alt"] html, [data-theme="alt"] body, html[data-theme="alt"], body[data-theme="alt"]{ background:radial-gradient(circle at 50% 0,#303030 0%,#111 55%,#050505 100%); } [data-theme="alt"] .app::before{background:none} /* Hero: amber- durch grün-getönte Verläufe/Schatten ersetzen */ [data-theme="alt"] .hero{ background: radial-gradient(ellipse at 50% -20%,rgba(77,255,92,.10),transparent 60%), linear-gradient(180deg,var(--panel),var(--panel-2) 100%); } [data-theme="alt"] .hero-title{text-shadow:0 0 22px rgba(77,255,92,.25),0 1px 0 rgba(0,0,0,.6)} [data-theme="alt"] .hero-tile:hover{background:linear-gradient(180deg,#132a1a,#0e2013)} /* Kanalliste / Tabs: gleiches amber-getöntes Panel jetzt in Grün */ [data-theme="alt"] .channel.active{ background:linear-gradient(180deg,#132a1a,#0e2013); box-shadow:0 0 10px rgba(77,255,92,.14) inset; } [data-theme="alt"] .community-tab.active, [data-theme="alt"] .auth-tab.active{ background:linear-gradient(180deg,#132a1a,#0e2013); } [data-theme="alt"] .person.clickable:hover{box-shadow:0 0 8px rgba(77,255,92,.2)} /* Funker-Karte (Leaflet): Pin-Farben folgen automatisch --led-green/--led-amber der Theme-Variablen */ [data-theme="alt"] #scanButton.active{animation-name:scanPulseAlt} @keyframes scanPulseAlt{0%,100%{box-shadow:0 0 0 0 rgba(77,255,92,.35)}50%{box-shadow:0 0 0 4px rgba(77,255,92,0)}} /* PTT-Taste: flacher, wie ein echter Gehäuse-Knopf (rot = frei, grün = du sendest) */ [data-theme="alt"] .ptt{ background:linear-gradient(180deg,#c73434,#711414); border-color:#1a1a1a; } [data-theme="alt"] .ptt.active{ border-color:var(--led-green-dim); background:linear-gradient(180deg,#3ad14a,#0f5c1c); box-shadow: 0 0 0 3px #000, 0 0 26px 6px rgba(77,255,92,.35), 0 1px 0 rgba(255,255,255,.15) inset, 0 -10px 22px rgba(0,0,0,.55) inset; } /* Lautstärke-/Mikro-Regler: runder Metall-Knopf statt Standard-Schieber */ [data-theme="alt"] .radio-controls input[type=range]{ -webkit-appearance:none;appearance:none;height:6px;border-radius:999px; background:linear-gradient(180deg,#0a0a0a,#1c1c1c); border:1px solid #000;box-shadow:0 2px 5px rgba(0,0,0,.5) inset;accent-color:var(--led-green); } [data-theme="alt"] .radio-controls input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;width:20px;height:20px;border-radius:50%; background:radial-gradient(circle at 35% 30%,#8a8a8a,#222 70%); border:2px solid #0a0a0a; box-shadow:0 2px 4px rgba(0,0,0,.6),inset 0 1px 1px rgba(255,255,255,.5); cursor:pointer;margin-top:-1px; } [data-theme="alt"] .radio-controls input[type=range]::-moz-range-thumb{ width:20px;height:20px;border-radius:50%; background:radial-gradient(circle at 35% 30%,#8a8a8a,#222 70%); border:2px solid #0a0a0a; box-shadow:0 2px 4px rgba(0,0,0,.6),inset 0 1px 1px rgba(255,255,255,.5); cursor:pointer; } /* Digitale Kanalanzeige mit echten −/+ Tasten (ruft dieselbe switchChannel()- Funktion wie ein Klick in der Kanalliste auf - siehe Script am Seitenende). Nur im Klassik-Design sichtbar, das Standard-Design bleibt unverändert. */ [data-theme="alt"] .channel-stepper{display:flex;align-items:center;gap:10px;margin-top:10px} [data-theme="alt"] .channel-step-btn{ width:34px;height:34px;border-radius:7px;border:1px solid #000;cursor:pointer; background:linear-gradient(180deg,#4a4a4a,#181818);color:#fff;font-size:18px;line-height:1; box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 2px 5px rgba(0,0,0,.45); } [data-theme="alt"] .channel-step-btn:hover{filter:brightness(1.15)} [data-theme="alt"] .channel-step-btn:active{transform:translateY(1px)} [data-theme="alt"] .channel-digit{ min-width:56px;text-align:center;font-family:'Share Tech Mono',monospace;font-size:26px; color:var(--lcd-fg);text-shadow:0 0 8px rgba(97,255,105,.5); background:var(--lcd-bg);border:1px solid #000;border-radius:6px;padding:4px 6px; box-shadow:0 2px 6px rgba(0,0,0,.5) inset; } /* Theme-Umschalter (Kopfzeile) */ #themeToggle{white-space:nowrap}