itlxrd/Psychotoxical-psysonic
1
0
Fork 0
mirror of https://github.com/Psychotoxical/psysonic.git synced 2026-07-22 15:25:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(titlebar): hide traffic-light glyphs until hover (#243)

Browse Source 
* fix(titlebar): hide traffic-light glyphs until hover

The lucide Minus/Square/X icons at 9×9 with stroke-width 2.5 looked
chunky at all times — especially the Square for maximize. Match real
macOS behaviour: glyphs fade in only when the controls group is hovered
(or a button is keyboard-focused).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(titlebar): drop traffic-light glyphs entirely, add coloured hover glow

Following review feedback: even on-hover the lucide glyphs at 9×9
weren't pleasant. Remove them outright and signal hover with a soft
coloured glow matching each button (red/yellow/green) plus a subtle
brightness lift. Keyboard focus uses a white outer ring for accessibility.

- TitleBar.tsx: remove lucide imports + icon children, add aria-label
- layout.css: drop svg sizing rules, add per-variant box-shadow hover,
  add focus-visible ring, transition box-shadow

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Psychotoxical <dev@psysonic.app>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Frank Stellmacher
2026-04-21 19:11:24 +02:00
committed by GitHub
parent bac0afe6ae
commit fb02b62a54
2 changed files with 17 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/layout.css
+11 -11
View File
@@ -142,38 +142,38 @@
border-radius: 50%;
cursor: pointer;
box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18);
transition: filter var(--transition-fast);
}
.titlebar-btn svg {
width: 9px;
height: 9px;
stroke-width: 2.5;
transition: filter var(--transition-fast), box-shadow var(--transition-fast);
}
.titlebar-btn-close {
background: #ff5f57;
color: #4d0000;
}
.titlebar-btn-minimize {
background: #febc2e;
color: #7a4a00;
}
.titlebar-btn-maximize {
background: #28c840;
color: #004d00;
}
.titlebar-btn:hover {
filter: brightness(1.08);
filter: brightness(1.1);
}
.titlebar-btn-close:hover { box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18), 0 0 6px rgba(255, 95, 87, 0.75); }
.titlebar-btn-minimize:hover { box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18), 0 0 6px rgba(254, 188, 46, 0.75); }
.titlebar-btn-maximize:hover { box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18), 0 0 6px rgba(40, 200, 64, 0.75); }
.titlebar-btn:active {
filter: brightness(0.92);
}
.titlebar-btn:focus-visible {
outline: none;
box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18), 0 0 0 2px rgba(255, 255, 255, 0.5);
}
/* Resizer handles must start below the titlebar */
.app-shell[data-titlebar] .resizer {
top: var(--titlebar-height);