diff --git a/resources/css/app.css b/resources/css/app.css index b8e54fb280..081dd74b86 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -194,18 +194,20 @@ transition-duration: 120ms; } -.button { - transition-duration: 120ms, 120ms, 120ms, 80ms, 80ms; -} - .icon-button:not(:disabled):active, -.app-tab:active, -.split-action-main:not(:disabled):active, -.split-action-caret:not(:disabled):active { +.app-tab:active { transform: scale(0.97); } -.button:not(:disabled):active { +.button, +.split-action-main, +.split-action-caret { + transition-duration: 120ms, 120ms, 120ms, 80ms, 80ms; +} + +.button:not(:disabled):active, +.split-action-main:not(:disabled):active, +.split-action-caret:not(:disabled):active { transform: translateY(2px); box-shadow: none; } @@ -2575,12 +2577,30 @@ html[data-theme="custom"]:not(.dark) :is(.application-settings-section, .applica opacity: 0.45; } +/* Same physical edge as highlighted .button: hover lifts, press sinks. */ +.split-action-main:not(:disabled), +.split-action-caret:not(:disabled) { + --button-depth-color: var(--color-coollabs-300); + box-shadow: 0 2px 0 var(--button-depth-color); +} + +.dark .split-action-main:not(:disabled), +.dark .split-action-caret:not(:disabled) { + --button-depth-color: var(--color-brand-depth); +} + +.split-action-main:not(:disabled):hover, +.split-action-caret:not(:disabled):hover { + transform: translateY(-1px); + box-shadow: 0 3px 0 var(--button-depth-color); +} + .split-action-main:focus-visible, .split-action-caret:focus-visible { - outline: none; + outline: 1px solid var(--color-accent); + outline-offset: 2px; position: relative; z-index: 1; - box-shadow: 0 0 0 1px var(--color-accent); } /* Custom listbox (replaces native