starred/coolify
1
0
Fork 0
mirror of https://github.com/coollabsio/coolify.git synced 2026-11-06 13:10:37 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): offset focus ring on highlighted buttons with outline gap

Browse Source 
Highlighted buttons use the accent color, so the flush box-shadow focus
ring looked like a stray border. Use an offset accent outline instead and
keep the regular depth shadow on focus and hover-focus.
This commit is contained in:
Andras Bacsai
2026-10-02 16:58:42 +02:00
parent 5b1fcd6e13
commit 2f3a5088ee
1 changed files with 14 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+14
View File
@@ -136,6 +136,20 @@
box-shadow: var(--button-depth-hover), 0 0 0 1px var(--color-red-500);
}
/* Highlighted buttons share the accent hue, so a flush ring reads as a stray
border. Offset the indicator with an outline to leave a clear gap. */
.button.button-highlighted:not(:disabled):focus-visible,
.button[isHighlighted]:not(:disabled):focus-visible {
box-shadow: var(--button-depth);
outline: 1px solid var(--color-accent);
outline-offset: 2px;
}
.button.button-highlighted:not(:disabled):hover:focus-visible,
.button[isHighlighted]:not(:disabled):hover:focus-visible {
box-shadow: var(--button-depth-hover);
}
/* Other button-like controls retain the lighter scale feedback. */
.button,
.icon-button,