/* ========================================================================== SILBER (v49) - das neue Design im bisherigen "berserk"-Theme. Vorlage: Wallpaper "Silver Surfer [4k Quality]". Marcelo: dunkel gehalten, weiss und durchsichtig. Jede Regel hier gilt fuer body[data-theme="berserk"] - das steht fest im Markup, also schon vor dem ersten Skriptlauf (kein rotes Aufblitzen). Bewusst NICHT umgefaerbt (Marcelos Liste): die Linkkacheln im Profil, die GTA-Karte, Steam/Spotify/Aktivitaet, das EKG, die Flaggen. ========================================================================== */ /* ---- Grundfarben ---- Dieselben Variablen wie bisher, nur mit Silber belegt. Die meisten Teile der Seite lesen ausschliesslich diese Werte und wechseln damit von selbst. --glow-rgb ist ein kuehles Weiss: reines #fff wirkte auf dem schwarzen Raum hart, das Wallpaper leuchtet leicht blaeulich-silbern. */ body[data-theme="berserk"]{ --red:#e6ebf2; --red-glow:#ffffff; --red-soft:#8e97a4; --ink:#040507; --card-bg:rgba(9,11,15,.46); --card-brd:rgba(255,255,255,.14); --text:#f2f4f8; --muted:#9aa3b0; --acc-mid:#e2e7ee; --acc-soft:#c7ced9; --acc-pale:#dbe0e8; --acc-warm:#f3f5f8; --glow-rgb:228,235,246; --soft-rgb:196,205,219; --surf-1:rgba(24,27,34,.52); --surf-2:rgba(10,12,16,.50); --dlg-1:rgba(22,25,31,.88); --dlg-2:rgba(6,7,10,.94); --dlg-schleier:rgba(0,0,0,.64); --ico-1:#1b1f26; --ico-2:#0a0c10; /* Eigene Werte des Silber-Designs */ --sl-glas:rgba(12,14,19,.42); --sl-glas-stark:rgba(12,14,19,.62); --sl-kante:rgba(255,255,255,.13); --sl-kante-hell:rgba(255,255,255,.34); --sl-glanz:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 42%); --sl-chrom:linear-gradient(180deg,#ffffff 0%,#dfe5ee 38%,#9aa4b3 62%,#eef2f7 100%); --sl-schatten:0 24px 70px rgba(0,0,0,.62),0 2px 10px rgba(0,0,0,.4); } /* Das Kanten- und Flaechensystem aus echo-kosmos.css / design-upgrade.css haengt an --echo-rgb. Damit werden alle Kartenraender (Ruhe, Zeigen, Ausgewaehlt) in einem Zug silbern. */ body.echo-kosmos[data-theme="berserk"]{ --echo-rgb:226,233,244; --echo-light:#ffffff; --echo-text:#f2f4f8; --echo-muted:#9aa3b0; --echo-surface:#030303; --echo-line:rgba(255,255,255,.13); } /* Telefon: kein Milchglas (siehe index.html "Milchglas am Telefon aus"), also etwas dichter - der Raum scheint trotzdem durch. */ @media (max-width:620px){ body[data-theme="berserk"]{--card-bg:rgba(10,12,16,.80);--surf-2:rgba(12,14,19,.82); --sl-glas:rgba(10,12,16,.72);--sl-glas-stark:rgba(10,12,16,.84)} } /* ---- Hintergrund: das Wallpaper mit sanftem Schwarz-Auslauf ---- #bgVideo spielt Marcelos Aufnahme (assets/silber-*.mp4, siehe Lader in index.html). Keine Mausbewegung und kein Zoom. v50 senkt ausschliesslich dunkle Tonwerte ueber eine Gamma-Kurve ab: Die im Quellvideo rechteckig abgeschnittenen Nebelreste um die Figur werden weniger sichtbar. Das betrifft auch schwache Sterne, nicht die hellen Partikel im MK-Canvas. */ body[data-theme="berserk"]{background:#000} body[data-theme="berserk"] #bgVideo{filter:url(#surferNebelWeich)!important;transform:none!important; will-change:auto;background:#000} /* Die roten Bereichsszenen und die Abdunklungen gehoeren nicht mehr zu diesem Design. Ohne Anzeige laedt der Browser deren Bilder auch nicht. */ body[data-theme="berserk"] #sceneBg, body[data-theme="berserk"] .bg-veil, body[data-theme="berserk"] .vignette{display:none} /* MK-Buehne: kein roter Vorhang und kein roter Nebel mehr - hinter dem MK liegt jetzt direkt das Wallpaper. */ body[data-theme="berserk"] .mk-curtain{background:none} body[data-theme="berserk"] .mk-curtain::after{background:none} /* Die Flagge bleibt rot: POL weiss, SKA rot wie die polnischen Farben. */ body[data-theme="berserk"] #aboutCard .pl-wort .rd{color:#ff2b32;text-shadow:0 0 12px rgba(220,20,60,.7)} /* Vier Regeln tragen ihr Rot in einer Kurzschreibweise mit var(). Deren Text gibt der Browser nicht heraus, die erzeugte Umfaerbung sieht sie deshalb nicht - hier von Hand, gleicher Aufbau. Das Wetter bleibt, wie es ist. */ body[data-theme="berserk"] .lit::before{ background:linear-gradient(115deg,transparent 0%,transparent 12%, rgba(var(--glow-rgb),.55) 22%,rgba(214,222,235,.30) 28%,transparent 40%,transparent 100%); background-size:280% 100%} /* v72: derselbe Verlauf auf der verschobenen Lauf-Ebene (index.html .lit>.lauf). */ body[data-theme="berserk"] .lit>.lauf>i{ background:linear-gradient(115deg,transparent 0%,transparent 12%, rgba(var(--glow-rgb),.55) 22%,rgba(214,222,235,.30) 28%,transparent 40%,transparent 100%)} @media (pointer:coarse){ body[data-theme="berserk"] .lit::before{ background:linear-gradient(140deg,rgba(var(--glow-rgb),.45),transparent 40%, transparent 60%,rgba(var(--glow-rgb),.3)); background-size:auto} } body.echo-kosmos[data-theme="berserk"] #setupCard .setup-screen>i{ background:radial-gradient(ellipse at 76% 95%,rgba(var(--echo-rgb),.28),transparent 60%), radial-gradient(circle at 22% 19%,rgba(236,241,248,.65) 0 .6px,transparent 1.2px), linear-gradient(145deg,#16181c,#0b0b0d)} body[data-theme="berserk"] .mk-sound[aria-pressed="true"]{color:#f4f6fa; background:linear-gradient(180deg,rgba(var(--glow-rgb),.2),rgba(7,8,11,.88))} body[data-theme="berserk"] .mk-sound[data-audio-state="blocked"]{ background:linear-gradient(180deg,rgba(var(--glow-rgb),.34),rgba(8,9,12,.9))} /* Mauszeiger: gleiches Fadenkreuz, der rote Punkt wird weiss. */ @media (hover:hover) and (pointer:fine){ body[data-theme="berserk"]{cursor:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2226%22 height=%2226%22 viewBox=%220 0 26 26%22%3E %3Cg stroke-linecap=%22round%22%3E %3Cg stroke=%22%23050608%22 stroke-width=%223.4%22 opacity=%22.6%22%3E %3Cpath d=%22M13 2v6%22/%3E%3Cpath d=%22M13 18v6%22/%3E%3Cpath d=%22M2 13h6%22/%3E%3Cpath d=%22M18 13h6%22/%3E%3C/g%3E %3Cg stroke=%22%23f4f7fb%22 stroke-width=%221.7%22%3E %3Cpath d=%22M13 2v6%22/%3E%3Cpath d=%22M13 18v6%22/%3E%3Cpath d=%22M2 13h6%22/%3E%3Cpath d=%22M18 13h6%22/%3E%3C/g%3E %3Ccircle cx=%2213%22 cy=%2213%22 r=%222.6%22 fill=%22none%22 stroke=%22%23f4f7fb%22 stroke-width=%221.3%22 opacity=%22.6%22/%3E %3Ccircle cx=%2213%22 cy=%2213%22 r=%221.5%22 fill=%22%23ffffff%22/%3E %3C/g%3E%3C/svg%3E") 13 13, auto} body[data-theme="berserk"] :is(a,button,input,.ptile,.game,.bro,.chip,.likes,.pbar,.plist button,.lib a,.dcb a,#egg,.pskip,.pp,.nav a,.lib-btn,.pico,.av-wrap,.dos-zitat){ cursor:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2226%22 height=%2226%22 viewBox=%220 0 26 26%22%3E%3Cdefs%3E%3Cfilter id=%22g%22 x=%22-50%25%22 y=%22-50%25%22 width=%22200%25%22 height=%22200%25%22%3E%3CfeDropShadow dx=%220%22 dy=%220%22 stdDeviation=%221.4%22 flood-color=%22%23dfe9ff%22 flood-opacity=%22.95%22/%3E%3C/filter%3E%3C/defs%3E %3Cg filter=%22url(%23g)%22 stroke-linecap=%22round%22%3E %3Cg stroke=%22%23050608%22 stroke-width=%223.4%22 opacity=%22.6%22%3E %3Cpath d=%22M13 2v6%22/%3E%3Cpath d=%22M13 18v6%22/%3E%3Cpath d=%22M2 13h6%22/%3E%3Cpath d=%22M18 13h6%22/%3E%3C/g%3E %3Cg stroke=%22%23ffffff%22 stroke-width=%221.7%22%3E %3Cpath d=%22M13 2v6%22/%3E%3Cpath d=%22M13 18v6%22/%3E%3Cpath d=%22M2 13h6%22/%3E%3Cpath d=%22M18 13h6%22/%3E%3C/g%3E %3Ccircle cx=%2213%22 cy=%2213%22 r=%222.6%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%221.3%22 opacity=%22.75%22/%3E %3Ccircle cx=%2213%22 cy=%2213%22 r=%221.5%22 fill=%22%23ffffff%22/%3E %3C/g%3E%3C/svg%3E") 13 13, pointer} } /* ---- Musikkante der anderen Karten (v62) ---- Marcelo: "der glow der anderen karten sollte auch anders sein und minimal zur musik abgestimmt sein." Die Regel steht schon in echo-kosmos.css; im Silber-Design traegt silber-umfaerbung.css dort aber die umgefaerbte Fassung der alten Zeile und wiegt schwerer. Darum hier noch einmal, mit denselben Farben und der Musikvariablen. Ohne Ton steht --musik-rand auf 0 und es sieht aus wie vorher. */ body.echo-kosmos[data-theme="berserk"] :is(#aboutCard,#gamesCard,#setupCard){ box-shadow:0 28px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(237,239,242,.035), 0 0 38px rgba(var(--echo-rgb),calc(.025 + .06*var(--musik-rand,0))), 0 0 0 1px rgba(var(--echo-rgb),calc(.14*var(--musik-rand,0)))} /* Handy-Sparmodus: das Silber-Standbild steht direkt in mobile-budget.css. */