diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css index 6a8d996cd..e7f75840a 100644 --- a/app/assets/stylesheets/buttons.css +++ b/app/assets/stylesheets/buttons.css @@ -1,6 +1,6 @@ @layer components { .btn { - --transition: 300ms ease; + --transition: 150ms ease; --btn-border-radius: 2em; align-items: center; diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css index aef0a93e4..da16711f7 100644 --- a/app/assets/stylesheets/trays.css +++ b/app/assets/stylesheets/trays.css @@ -71,7 +71,7 @@ .tray__actions { --hover-size: 0; - align-items: center; + align-items: stretch; border: 1px dashed color-mix(in srgb, var(--color-white) 40%, var(--color-ink)); border-radius: 0.5em; color: var(--color-ink-inverted); @@ -96,6 +96,25 @@ transition: none; } + /* Get the circle buttons to be full-height without magic numbers */ + form { + aspect-ratio: 1; + + .btn { + block-size: 100%; + inline-size: 100%; + } + } + + .btn { + opacity: 0.66; + + &:hover, + &:focus-visible { + opacity: 1; + } + } + @media (prefers-color-scheme: dark) { .btn--reversed { color: var(--color-ink); @@ -114,7 +133,6 @@ inset: auto 0 0 0; padding: 0; position: absolute; - z-index: 6; .tray[open] &, .tray:not(:has(.tray__item)) &, @@ -197,7 +215,6 @@ /* ------------------------------------------------------------------------ */ .tray--pins { - /* inset: auto auto var(--block-space-half) var(--inline-space); */ inset-inline: var(--inline-space) auto; .tray__item { @@ -265,7 +282,6 @@ /* ------------------------------------------------------------------------ */ .tray--notifications { - /* inset: auto var(--inline-space) var(--block-space-half) auto; */ inset-inline: auto var(--inline-space); .tray__item:nth-child(1n + 7) { @@ -273,7 +289,7 @@ } &:not(:has(.card--notification)) { - .tray__notification-read_action { + .tray__notification-read-action { visibility: hidden; } } diff --git a/app/views/notifications/_tray.html.erb b/app/views/notifications/_tray.html.erb index 17b869af0..efab93104 100644 --- a/app/views/notifications/_tray.html.erb +++ b/app/views/notifications/_tray.html.erb @@ -11,19 +11,25 @@ <% end %> + +