From e9ebc3fee6741043957e50ff0062db090c6c47f7 Mon Sep 17 00:00:00 2001 From: khannurien Date: Sat, 19 Sep 2026 21:27:04 +0000 Subject: [PATCH] =?UTF-8?q?v3:=20tooltips=20ease=20in=20=E2=80=94=20a=20sh?= =?UTF-8?q?ort=20hover=20delay,=20then=20a=20quick=20fade=20that=20rises?= =?UTF-8?q?=20and=20grows=20from=20the=20anchor=20on=20the=20independent?= =?UTF-8?q?=20translate/scale=20properties=20(so=20the=20inline=20placemen?= =?UTF-8?q?t=20transform=20stays=20put);=20reduced=20motion=20keeps=20just?= =?UTF-8?q?=20the=20fade?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5 --- src/App.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/App.css b/src/App.css index 92399a30..2100840d 100644 --- a/src/App.css +++ b/src/App.css @@ -6170,6 +6170,25 @@ body.has-player .chat-fab { pointer-events: none; z-index: var(--z-toast); box-shadow: var(--shadow-2); + /* The inline `transform` places it above the anchor, so the entrance rides + on the independent `translate`/`scale` properties, which compose with it. + A short delay keeps it from flashing while the pointer sweeps across. */ + transform-origin: 50% 100%; + animation: tooltip-in 160ms cubic-bezier(0.2, 0.7, 0.3, 1) 120ms both; +} + +@keyframes tooltip-in { + from { opacity: 0; translate: 0 4px; scale: 0.96; } + to { opacity: 1; translate: 0 0; scale: 1; } +} + +@media (prefers-reduced-motion: reduce) { + .tooltip { + animation-name: tooltip-fade; + } + @keyframes tooltip-fade { + from { opacity: 0; } + } } /* ── Search bar (in header center slot) ── */