/* ========================================================== nH TuneUp – Xmas Theme (clean) Aktiv, wenn gesetzt ist. ========================================================== */ /* ========================= 1) Globaler Xmas-Look ========================= */ body.xmas-mode { color: #0f172a; background: radial-gradient( circle at 50% 0%, #ffffff 0%, #f5f5f5 60%, #e5e7eb 100% ); } /* App darf Effekte über die Kante zeichnen (Glow etc.) */ #app { overflow: visible; } /* Keine zusätzlichen Layer mehr – alles schön clean */ body.xmas-mode::before, body.xmas-mode::after { content: none !important; background: none !important; opacity: 0 !important; } /* ========================= 2) Topbar – Feedback-Grün ========================= */ body.xmas-mode .topbar { background: linear-gradient( 135deg, #007A34, #008134 ); border-bottom: 1px solid rgba(255,255,255,0.35); box-shadow: 0 2px 8px rgba(0,0,0,0.12); overflow: visible; /* falls etwas rausleuchtet */ } body.xmas-mode .topbar-inner { padding-top: 10px; padding-bottom: 10px; min-height: 64px; align-items: center; } /* Brand & User */ body.xmas-mode .brand, body.xmas-mode .helloUser { color: #ffffff; } body.xmas-mode .helloUser small { color: #e5e7eb; } /* Brand generell nicht beschneiden (Baum-Glow etc.) */ .brand { overflow: visible; } /* Weihnachtsbaum sanft „atmen“ lassen 🎄 */ @keyframes xmasTreeBreathe { 0% { transform: scale(1); } 50% { transform: scale(1.20); } 100% { transform: scale(1); } } /* Optional: hier NICHT nochmal animation setzen, sonst überschreibst du sie nur */ body.xmas-mode .xmas-toggle-btn { /* z.B. nur extra Glow, wenn du magst */ box-shadow: 0 0 22px rgba(250, 250, 250, 0.9); } /* ========================= 3) Panels & Playlist ========================= */ body.xmas-mode .panel { background: rgba(255,255,255,0.96); border-color: #e5e7eb; box-shadow: 0 10px 26px rgba(15,23,42,0.28); } body.xmas-mode .panel.left { background: rgba(255,255,255,0.98); } body.xmas-mode .right { background: rgba(255,255,255,0.98); } /* Playlist-Kopf (Farbe kommt aus Grundtheme, hier nur Border) */ body.xmas-mode .head { border-bottom-color: #d1fae5; } /* Playlist-Zeilen */ body.xmas-mode .track { background: transparent; color: #111827; border-bottom: 1px solid #e5e7eb; } body.xmas-mode .track:hover { background: rgba(248,250,252,0.95); } body.xmas-mode .track.active { background: linear-gradient(90deg, #fee2e2, #fecaca); border-left: 3px solid #f97373; border-radius: 6px; } body.xmas-mode .name { color: #111827; } body.xmas-mode .dur { color: #6b7280; } /* ========================= 4) Wave – grün + knallrote Welle ========================= */ body.xmas-mode #wave { background: linear-gradient(180deg, #008134, #006234); border-color: rgba(255,255,255,0.25); box-shadow: 0 6px 24px rgba(0,0,0,0.45), 0 0 12px rgba(34,197,94,0.5); /* Wavesurfer-Variablen */ --wave-color: #ff1f1f !important; /* Welle rot */ --progress-color: #ff8080 !important; /* Fortschritt hellrot */ --cursor: #ffe0e0 !important; /* Cursor rosa-hell */ } /* Canvas wirklich knallrot einfärben */ body.xmas-mode #wave canvas { filter: brightness(1.3) contrast(1.4) sepia(1) saturate(20000%) hue-rotate(0deg) !important; } /* Loop-Bereich deutlich röter */ body.xmas-mode #wave .loop-region { background-color: rgba(255, 60, 60, 0.35) !important; border-color: rgba(255, 100, 100, 0.8) !important; box-shadow: 0 0 12px rgba(255, 60, 60, 0.55) inset !important; } /* Loop-Zeitstempel hellrosa */ body.xmas-mode #wave .loop-region::before, body.xmas-mode #wave .loop-region::after { color: #ffe5e5 !important; } /* Fallback-Pille (Tutti) xmas-mässig */ body.xmas-mode .pill-warning { background: rgba(248,113,113,0.18); border-color: rgba(185,28,28,0.85); color: #7f1d1d; } /* Marker-Pillen über der Wave: hell/weiss */ body.xmas-mode .region-label { background: rgba(255,255,255,0.98); border-color: rgba(209,213,219,0.9); color: #111827; } body.xmas-mode .region-stem { background: rgba(209,213,219,0.85); } /* ========================= 5) Buttons – alle weiss ========================= */ /* Grundstil für alle .btn (nicht: .btn-notes / .btn-feedback) */ body.xmas-mode .btn { background: linear-gradient(180deg, #ffffff, #f3f4f6); border: 1px solid #e5e7eb; color: #111827; box-shadow: 0 4px 12px rgba(148,163,184,0.45); } body.xmas-mode .btn:hover { background: linear-gradient(180deg, #f9fafb, #e5e7eb); } body.xmas-mode .btn:active { transform: translateY(1px); box-shadow: 0 3px 10px rgba(148,163,184,0.6); } /* Play – idle: weiss */ body.xmas-mode #play.btn.main { background: linear-gradient(180deg, #ffffff, #f3f4f6); border-color: #e5e7eb; color: #111827; } /* Play – aktiv: Feedback-Grün */ body.xmas-mode #play.playing.btn.main { background: linear-gradient(180deg, #22c55e, #16a34a) !important; border-color: #15803d !important; color: #ffffff !important; box-shadow: 0 8px 18px rgba(34, 197, 94, 0.35) !important; } /* Loop – aus: weiss, an: gold */ body.xmas-mode #loopToggle.btn { background: linear-gradient(180deg, #ffffff, #f3f4f6); border-color: #e5e7eb; color: #111827; } body.xmas-mode #loopToggle[aria-pressed="true"].btn { background: linear-gradient(180deg, #f59e0b, #b45309); border-color: #92400e; color: #ffffff; } /* Rewind */ body.xmas-mode #rewind10.btn.main { background: linear-gradient(180deg, #ffffff, #f3f4f6); border-color: #e5e7eb; color: #111827; } body.xmas-mode #rewind10.btn.main[aria-pressed="true"] { background: linear-gradient(180deg, #f59e0b, #b45309); border-color: #92400e; color: #ffffff; } /* Tempo-Buttons */ body.xmas-mode #tempoDown, body.xmas-mode #tempoUp, body.xmas-mode #tempoReset { background: linear-gradient(180deg, #ffffff, #f3f4f6); border-color: #e5e7eb; color: #111827; box-shadow: 0 4px 12px rgba(148,163,184,0.45); } body.xmas-mode #tempoDown:hover, body.xmas-mode #tempoUp:hover, body.xmas-mode #tempoReset:hover { background: linear-gradient(180deg, #f9fafb, #e5e7eb); } /* Keys-Button */ body.xmas-mode .btn-keys { background: linear-gradient(180deg, #ffffff, #f3f4f6); border-color: #e5e7eb; color: #111827; box-shadow: 0 4px 12px rgba(148,163,184,0.45); } body.xmas-mode .btn-keys:hover { background: linear-gradient(180deg, #f9fafb, #e5e7eb); } /* .btn-notes und .btn-feedback bleiben aus player.css */ /* ========================= 6) Instrument-Box & Tempo-Box – weiss ========================= */ body.xmas-mode .instrumentBox, body.xmas-mode .tempoBox { background: linear-gradient(180deg, #ffffff, #f3f4f6) !important; border: 1px solid #e5e7eb !important; box-shadow: 0 3px 8px rgba(0,0,0,0.15) !important; } /* Labels dunkel lesbar */ body.xmas-mode .instrumentLabel, body.xmas-mode .tempoLabel { color: #111827 !important; } /* Selector innen weiss */ body.xmas-mode select.selectLikeBtn, body.xmas-mode #instrumentSelect { background: linear-gradient(180deg, #ffffff, #f3f4f6) !important; border: 1px solid #d1d5db !important; color: #111827 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.20) !important; } /* ========================= 7) Stück-Titel – rote Xmas-Leiste ========================= */ body.xmas-mode .currentBox { background: linear-gradient( 135deg, #F62626, #dc2626 ); border-color: #b91c1c; box-shadow: 0 8px 20px rgba(220,38,38,0.35); } body.xmas-mode .currentTitle { color: #ffffff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.35); } /* ========================= 8) Marker-Karten (Liste) – weiss ========================= */ body.xmas-mode .markerlist .row { background: #ffffff; border-color: #e5e7eb; box-shadow: 0 6px 16px rgba(148,163,184,0.45); } body.xmas-mode .markerlist .row:hover { background: #f9fafb; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(148,163,184,0.6); } body.xmas-mode .markerlist .row:active { background: #f3f4f6; transform: translateY(1px) scale(0.98); box-shadow: 0 4px 12px rgba(148,163,184,0.55); } body.xmas-mode .markerlist .label { color: #111827; } body.xmas-mode .markerlist .time { color: #4b5563; } /* ========================= 9) Footer ========================= */ body.xmas-mode .credit { color: #0f172a; } body.xmas-mode .version { color: #6b7280; } /* ========================= 10) Playlist – saubere Rundungen ========================= */ body.xmas-mode .panel.left { border-radius: 14px; overflow: hidden; /* Kopf & Liste übernehmen Rundung */ } /* Kopf der Playlist */ body.xmas-mode .head { border-top-left-radius: 14px; border-top-right-radius: 14px; padding-top:30px; } /* Liste unten abrunden */ body.xmas-mode #playlist { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; overflow: hidden; } /* Tracks selbst ohne extra Radius, damit keine „Doppelrundungen“ entstehen */ body.xmas-mode .track { border-radius: 0; } /* ============================================ Xmas-Mode: Buttons (Play / Loop / Rewind10) bekommen denselben soften Hover wie Marker ============================================ */ body.xmas-mode #play.btn.main:hover, body.xmas-mode #loopToggle.btn:hover, body.xmas-mode #rewind10.btn.main:hover { transform: translateY(-2px); background: #ffffff; box-shadow: 0 8px 18px rgba(148,163,184,0.45); } /* Beim Drücken leicht nach unten (wie Marker) */ body.xmas-mode #play.btn.main:active, body.xmas-mode #loopToggle.btn:active, body.xmas-mode #rewind10.btn.main:active { transform: translateY(1px); box-shadow: 0 4px 10px rgba(148,163,184,0.4); } /* Rewind 10s – kleine Klick-Animation im Xmas-Mode */ body.xmas-mode #rewind10.btn.main { background: linear-gradient(180deg, #ffffff, #f3f4f6); border-color: #e5e7eb; color: #111827; box-shadow: 0 4px 12px rgba(148,163,184,0.45); transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, background 0.12s ease-out; } /* beim Klicken kurz „reinsacken“ und gold aufblitzen */ body.xmas-mode #rewind10.btn.main:active { transform: translateY(1px) scale(0.97); background: linear-gradient(180deg, #FFFFE3, #FFF8FF); border-color: #92400e; color: #ffffff; box-shadow: 0 2px 6px rgba(146,64,14,0.6); } /* ============================================ Xmas-Mode: Loop aktiv + hover → text bleibt weiss ============================================ */ /* Loop aktiv: Grundzustand */ body.xmas-mode #loopToggle[aria-pressed="true"].btn { color: #ffffff !important; } /* Loop aktiv + Hover → nur anheben, NICHT umlackieren */ body.xmas-mode #loopToggle[aria-pressed="true"].btn:hover { transform: translateY(-2px); background: linear-gradient(180deg, #f59e0b, #b45309) !important; box-shadow: 0 10px 20px rgba(180, 100, 20, 0.35); color: #ffffff !important; /* 100% fixiert */ } /* Loop aktiv + Klick */ body.xmas-mode #loopToggle[aria-pressed="true"].btn:active { transform: translateY(1px); box-shadow: 0 4px 10px rgba(148,163,184,0.4); color: #ffffff !important; } .topbar .brand { display: inline-flex; align-items: center; gap: 8px; overflow: visible; /* damit der atmende Baum nicht abgeschnitten wird */ z-index:1000 } .xmas-toggle-btn { background: transparent; border: none; padding: 0; margin: 0 0 0 4px; /* kleiner Abstand nach links */ cursor: pointer; font-size: 1.4rem; line-height: 1; } /* Desktop/Default: Brand normal anzeigen */ .brand-title { display: inline; } /* Auf kleinen Screens nur noch den Baum zeigen */ @media (max-width: 900px) { .brand-title { display: none !important; } } /* Desktop: alles wie gehabt */ .brand-title { display: inline; } /* ============================================ MOBILE LAYOUT FIX – Baum direkt rechts vom Playlist-Button ============================================ */ @media (max-width: 900px) { /* Topbar-Layout im Xmas-Mode komplett neu */ body.xmas-mode .topbar-inner { display: flex !important; align-items: center !important; justify-content: flex-start !important; /* NICHT space-between */ gap: 6px !important; } /* Playlist-Button bleibt ganz links */ body.xmas-mode .sidebarBtn { order: 1 !important; flex: 0 0 auto !important; } /* Brand (mit 🎄) direkt daneben */ body.xmas-mode .brand { order: 2 !important; flex: 0 0 auto !important; margin-left: 4px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; overflow: visible !important; /* >>> hier der wichtige Teil: absolute Zentrierung killen <<< */ position: static !important; left: auto !important; transform: none !important; } /* TuneUp-Text auf Mobile ausblenden */ body.xmas-mode .brand-title { display: none !important; } /* Baum normal */ body.xmas-mode .xmas-toggle-btn { margin: 0 !important; padding: 0 !important; font-size: 1.4rem !important; } /* Logo + User nach rechts schieben */ body.xmas-mode .topbar-right { order: 3 !important; margin-left: auto !important; flex: 0 0 auto !important; } }