BitSquare/Codeman
2
0
Fork 0
mirror of https://github.com/Ark0N/Codeman.git synced 2026-10-10 01:09:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(header): keep the header stats styles out of the glyph motion

Browse Source 
#538's Compact and Tiles header styles carried two glyph rules of their own:
a `transform var(--transition-smooth)` transition on every header button's
svg, and `.btn-settings:hover > svg { rotate(45deg) }`. #561 had meanwhile
dropped the global button rotate and moved the hover motion onto the glyphs
(gear turn, folder, Tiles squares) behind `(hover: hover)` and a
prefers-reduced-motion off switch. The #538 rules out-specified those
guarded rules (they reach the glyph through `html[data-header-stats]
.header-right`), so under the default Tiles style a reduced-motion user
still saw the gear turn, a touch tap left it stuck at 45deg, and the 0.2s
ease replaced #561's spring.

Both rules go; #538 keeps only its glyph sizes, and the guarded motion now
applies the same in all three header styles. The hover test scanned only
selectors naming .btn-icon-header, which is how this slipped through: it
now scans every rule that reaches a header glyph and pins the one spring
transition and the hover guard.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Codeman maintainer
2026-10-08 21:36:04 +02:00
parent e308e99f05
commit 42147d30c0
2 changed files with 56 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/public/styles.css
+5 -12
View File
@@ -21311,8 +21311,11 @@ html[data-header-stats='tiles'] .header-plan-usage .pu-win-idle {
/* Bare 16px glyphs beside 36px tiles read as a different design. In Tiles the
header's icon buttons take the tile box (same height, border and fill, a
larger icon); in Compact they become round chips the height of the pills.
Only the box changes: the marker classes still hide them, and the gear
keeps its quarter turn on hover, on the glyph rather than the whole box. */
Only the box changes: the marker classes still hide them, and the glyph
motion (the gear's quarter turn, the folder, the Tiles squares) stays with
the guarded rules beside .btn-icon-header:hover. A glyph transform or
transition here would out-specify them and slip past their (hover: hover)
and reduced-motion guards. */
html[data-header-stats='tiles'] .header-right > .btn-icon-header,
html[data-header-stats='compact'] .header-right > .btn-icon-header {
box-sizing: border-box;
@@ -21351,16 +21354,6 @@ html[data-header-stats='compact'] .header-right > .btn-icon-header:hover {
transform: none;
}
html[data-header-stats='tiles'] .header-right > .btn-icon-header > svg,
html[data-header-stats='compact'] .header-right > .btn-icon-header > svg {
transition: transform var(--transition-smooth);
}
html[data-header-stats='tiles'] .header-right > .btn-settings:hover > svg,
html[data-header-stats='compact'] .header-right > .btn-settings:hover > svg {
transform: rotate(45deg);
}
/* Before the first plan reading the chip holds a bare em dash; give it a tile
of its own so it does not read as a stray mark between the tiles. */
html[data-header-stats='tiles'] .header-plan-usage:not(:has(.pu-row)) {