diff --git a/app/assets/stylesheets/avatars.css b/app/assets/stylesheets/avatars.css index 214ac26f1..ea3a3d4e7 100644 --- a/app/assets/stylesheets/avatars.css +++ b/app/assets/stylesheets/avatars.css @@ -24,9 +24,9 @@ object-fit: cover; } - &:where(a):not(:active):hover { - @media (any-hover: hover) { - filter: brightness(0.7); + @media (any-hover: hover) { + &:where(a):hover { + filter: brightness(0.8); } } } diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css index ce8774cd0..a6e925cf5 100644 --- a/app/assets/stylesheets/base.css +++ b/app/assets/stylesheets/base.css @@ -34,6 +34,8 @@ } :is(a, button, input, textarea, .switch, .btn) { + transition: 100ms ease-out; + transition-property: background-color, border-color, box-shadow, filter, outline; touch-action: manipulation; /* Keyboard navigation */ @@ -42,6 +44,13 @@ outline: var(--focus-ring-size) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } + + /* Default disabled styles */ + &:where([disabled]) { + cursor: not-allowed; + opacity: 0.5; + pointer-events: none; + } } /* Hover @@ -71,11 +80,6 @@ &:focus:not(:focus-visible) { --outline-offset: 0; } - - &:where([disabled]):not(:hover):not(:active) { - cursor: not-allowed; - filter: brightness(0.75); - } } */ ::selection { diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css index e8408855d..c81668835 100644 --- a/app/assets/stylesheets/buttons.css +++ b/app/assets/stylesheets/buttons.css @@ -26,6 +26,12 @@ opacity var( --transition), scale var( --transition); + @media (any-hover: hover) { + &:hover { + filter: brightness(0.8); + } + } + &[disabled], &:has([disabled]), [disabled] &[type=submit], @@ -79,7 +85,7 @@ .btn--negative { --btn-background: var(--color-negative); - --btn-border-color: var(--color-canvas); + --btn-border-color: var(--color-negative); --btn-color: var(--color-ink-inverted); --outline-color: var(--color-negative); } @@ -144,6 +150,7 @@ &:has(input:checked) { --btn-background: var(--color-ink); + --btn-border-color: var(--color-ink); --btn-color: var(--color-ink-inverted); --outline-color: var(--color-ink); diff --git a/app/assets/stylesheets/inputs.css b/app/assets/stylesheets/inputs.css index 5b1522385..761150254 100644 --- a/app/assets/stylesheets/inputs.css +++ b/app/assets/stylesheets/inputs.css @@ -21,17 +21,8 @@ -webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset; } - &:where(:not(:active)):focus { - --input-border-color: var(--color-selected-dark); - --hover-color: var(--color-selected-dark); - --outline-size: 0; - --outline-color: transparent; - - box-shadow: 0 0 0 var(--hover-size) var(--hover-color); - } - - &:where([disabled]):not(:hover):not(:active) { - filter: none; + &:where(:focus) { + --focus-ring-offset: -1px; } } diff --git a/app/views/accounts/settings/_users.html.erb b/app/views/accounts/settings/_users.html.erb index 550715545..ba6e96cc6 100644 --- a/app/views/accounts/settings/_users.html.erb +++ b/app/views/accounts/settings/_users.html.erb @@ -7,7 +7,7 @@ -