danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

CSS: fix dashboard hover-flicker (#816), Automations tile clutter (#816), and onboarding badge overlap (#817)

Browse source 
#816 hover-flicker — .dash-card:hover and .qa-tile:hover both did
transform: translateY(-Npx). Hovering a card's bottom edge lifted it off the
cursor → un-hover → drop → re-hover, an infinite rapid loop. Since every
dashboard card is a .dash-card, all of them flickered ("all elements
affected"). Removed the translateY lift; the hover's stronger shadow + border
glow already reads as "raised" without moving the hit box. (qa-tile has
overflow:hidden so a pseudo-element gap-buffer can't help — removal is the
clean, consistent fix.)

#816 Automations "looks strange" — the .qa-tile__flow decoration sits in the
bottom row directly behind the green "Open →" CTA; at 0.45 opacity the accent
nodes/line competed with the CTA (green-on-green clutter). Toned to 0.22 so it
reads as faint background texture; still brightens on hover.

#817 badge overlap — .helper-first-launch-tip was right:84px, only ~4px clear
of the ? float button's 8px pulse ring (button left edge ~72px from right), so
the "New here?" tip touched the button. Moved to right:96px.

CSS values/comments only — no structural changes (brace delta unchanged).
This commit is contained in:
BoulderBadgeDad 2026-06-08 11:29:00 -07:00
parent cdee7b3550
commit 72c62aec45
1 changed files with 16 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
webui/static/style.css
View file

@ -2673,7 +2673,10 @@ body.helper-mode-active #dashboard-activity-feed:hover {
.helper-first-launch-tip {
position: fixed;
bottom: 34px;
right: 84px;
/* Clear the ? float button (right:24 + 48 wide → left edge ~72px from the
right) AND its 8px pulse ring, with margin, so the tip never covers the
button (#817). Was 84px — only ~4px off the pulse ring, so they touched. */
right: 96px;
padding: 8px 16px;
background: rgba(16, 16, 16, 0.95);
border: 1px solid rgba(var(--accent-rgb), 0.3);
@ -61935,7 +61938,10 @@ body.reduce-effects .dash-card::after {
}
.dash-card:hover {
border-color: rgba(var(--accent-rgb), 0.35);
transform: translateY(-3px);
/* No translateY lift: moving the card up on hover pulls its bottom edge off
the cursor when you hover that edge, which un-hovers → drops → re-hovers
in a rapid flicker loop (#816). The stronger shadow + glow below already
reads as "raised" without moving the hit box. */
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.40),
0 4px 14px rgba(0, 0, 0, 0.22),
@ -62137,7 +62143,9 @@ body.reduce-effects .dash-card::after {
.qa-tile:hover,
.qa-tile:focus-visible {
transform: translateY(-2px);
/* No translateY lift — see .dash-card:hover (#816 hover-flicker). overflow
is hidden here so a pseudo-element gap-buffer can't help; the glow/shadow
below carries the hover state. */
border-color: rgba(var(--accent-rgb), 0.32);
box-shadow:
0 16px 40px rgba(0, 0, 0, 0.5),
@ -62310,7 +62318,11 @@ body.reduce-effects .dash-card::after {
align-items: center;
justify-content: space-between;
gap: clamp(4px, 0.5cqw, 8px);
opacity: 0.45;
/* The flow sits in the bottom row, directly behind the green "Open →" CTA —
at 0.45 the accent nodes/line competed with the CTA and read as clutter
(#816 "automations looks a bit strange"). Toned to a faint background
texture; it still brightens on hover. */
opacity: 0.22;
transition: opacity 0.35s ease;
}