From 78421861380ca39c520b794819a562c96a42c932 Mon Sep 17 00:00:00 2001 From: Dogfather Date: Sun, 2 Aug 2026 01:25:33 +0200 Subject: [PATCH] =?UTF-8?q?Sprachknopf:=20Hintergrund=20leuchtend=20schwar?= =?UTF-8?q?z=20statt=20bunt=20gef=C3=BCllt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Aurora-Farbwolke im Knopf-Hintergrund deutlich gedämpft (Opazität .85 -> .32, bei Hover/offen .48) - der Knopf wirkt jetzt wie eine schwarze, glühende Pille mit farbigem Rand-Glow statt einer komplett bunt eingefärbten Fläche. Nutzerwunsch nach Screenshot-Feedback. --- assets/css/main.css | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index 142449d..e3a5717 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -209,11 +209,12 @@ header.site-header { padding: .4rem 1rem .4rem .55rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--sprach-glut) 55%, rgba(255, 255, 255, .18)); - background: rgba(10, 11, 15, .55); + background: rgba(4, 5, 8, .94); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), - 0 3px 10px rgba(0, 0, 0, .35), - 0 0 16px color-mix(in srgb, var(--sprach-glut) 40%, transparent); + 0 3px 10px rgba(0, 0, 0, .5), + 0 0 10px color-mix(in srgb, var(--sprach-glut) 55%, transparent), + 0 0 22px color-mix(in srgb, var(--sprach-glut) 35%, transparent); transition: transform .2s ease, box-shadow .3s ease, border-color .3s ease; } .sprach-schalter > button:hover, @@ -236,10 +237,17 @@ header.site-header { z-index: -2; background: var(--sprach-aurora); filter: blur(8px) saturate(1.3); - opacity: .85; + /* Bewusst nur ein dezenter Farbschein statt einer vollflächig bunten + Fläche — der Knopf selbst soll "leuchtend schwarz" wirken (Glow am + Rand + hinter der Kugel), nicht komplett eingefärbt. */ + opacity: .32; animation: sprach-aurora-drift 7s ease-in-out infinite alternate; pointer-events: none; } +.sprach-schalter > button:hover::before, +.sprach-schalter.open > button::before { + opacity: .48; +} @keyframes sprach-aurora-drift { from { transform: translate(-3%, -2%) rotate(0deg) scale(1); } to { transform: translate(3%, 3%) rotate(8deg) scale(1.12); }