starred/coolify
1
0
Fork 0
mirror of https://github.com/coollabsio/coolify.git synced 2026-09-24 07:25:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): add raised hover and pressed depth to standard buttons

Browse Source 
Standard .button controls now use a compact 2px bottom edge, lift 1px on
hover, and press down with the depth removed. Highlighted buttons mix the
accent with black for a matching edge, and focus-visible keeps the accent
ring. Other button-like controls still use the lighter scale press.
This commit is contained in:
Andras Bacsai
2026-09-08 09:40:19 +02:00
parent caa07574b1
commit 3ae1eb9d10
3 changed files with 62 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+35 -3
View File
@@ -86,8 +86,36 @@
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
/* Shared press feedback: every button-like control dips slightly on press and
eases back, so pressable elements feel responsive and consistent app-wide. */
/* Standard buttons have a compact physical edge. Hover lifts the face by 1px;
pressing nudges it down while the depth disappears. */
.button:not(:disabled) {
--button-depth-color: rgb(0 0 0 / 0.22);
--button-depth: 0 2px 0 var(--button-depth-color);
--button-depth-hover: 0 3px 0 var(--button-depth-color);
box-shadow: var(--button-depth);
}
.button.button-highlighted:not(:disabled),
.button[isHighlighted]:not(:disabled) {
--button-depth-color: color-mix(in oklab, var(--color-coollabs) 52%, black);
}
/* Keep the shared focus indicator when the depth shadow owns box-shadow. */
.button:not(:disabled):focus-visible {
box-shadow: var(--button-depth), 0 0 0 1px var(--color-accent);
}
.button:not(:disabled):hover {
transform: translateY(-1px);
box-shadow: var(--button-depth-hover);
}
.button:not(:disabled):hover:focus-visible {
box-shadow: var(--button-depth-hover), 0 0 0 1px var(--color-accent);
}
/* Other button-like controls retain the lighter scale feedback. */
.button,
.icon-button,
.app-tab,
@@ -98,7 +126,6 @@
transition-duration: 120ms;
}
.button:not(:disabled):active,
.icon-button:not(:disabled):active,
.app-tab:active,
.split-action-main:not(:disabled):active,
@@ -106,6 +133,11 @@
transform: scale(0.97);
}
.button:not(:disabled):active {
transform: translateY(2px);
box-shadow: none;
}
/* Focus border/ring on any form control should ease, not snap. The accent
focus indicator is a border-color and/or box-shadow (ring) change, which the
utilities' `transition-colors` did not fully animate. Target the elements