root/gaming-hub
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix refresh button to match Styleguide §7 Icon-Button pattern
All checks were successful
Build & Deploy / build (push) Successful in 57s
Details
Build & Deploy / deploy (push) Successful in 4s
Details
Build & Deploy / bump-version (push) Successful in 7s
Details

Browse source 
Use --bg-tertiary hover + --text-normal instead of accent colors.
Remove custom spin animation and scale transform. Strict adherence
to the documented Icon-Button component pattern.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Daniel 2026-03-11 11:22:02 +01:00
parent 0f43f78d71
commit 44ad953be2
1 changed files with 10 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

30
web/src/styles.css
View file

@ -347,32 +347,22 @@ html, body {
max-width: 300px;
}
/* ── Refresh Button ── */
/* ── Refresh Button (Icon-Button per Styleguide §7) ── */
.hub-refresh-btn {
padding: 6px;
background: none;
color: var(--text-muted);
border: none;
border-radius: var(--radius);
cursor: pointer;
transition: all var(--transition);
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: none;
border-radius: var(--radius);
background: transparent;
color: var(--text-muted);
cursor: pointer;
transition: color var(--transition), background var(--transition);
}
.hub-refresh-btn svg {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.hub-refresh-btn:hover {
color: var(--accent);
background: var(--accent-dim);
}
.hub-refresh-btn:hover svg {
transform: rotate(180deg);
}
.hub-refresh-btn:active {
transform: scale(0.92);
background: var(--bg-tertiary);
color: var(--text-normal);
}
/* ── Admin Button (header) ── */