diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css index be3f39de4..99c98f92a 100644 --- a/app/assets/stylesheets/bubbles.css +++ b/app/assets/stylesheets/bubbles.css @@ -402,10 +402,10 @@ --border-size: 2px; --divider-color: var(--color-subtle-dark); - block-size: calc(100% + 4ch); + block-size: calc(100% + 12ch); font-size: 1rem; cursor: grab; - margin-inline: -1rem; + margin-inline: -6ch; visibility: hidden; } @@ -431,9 +431,11 @@ } .bubbles-list__count { - background-color: var(--divider-color); - color: var(--color-ink-reversed); - padding: 0.1em 0.7em; + --btn-background: var(--divider-color); + --btn-color: var(--color-ink-reversed); + --btn-gap: 0.5ch; + --btn-icon-size: 1em; + --btn-padding: 0.1em 1em 0.1em 0.7em; } .bubble__title-text { diff --git a/app/assets/stylesheets/notifications.css b/app/assets/stylesheets/notifications.css index ea8f772c6..22d96725a 100644 --- a/app/assets/stylesheets/notifications.css +++ b/app/assets/stylesheets/notifications.css @@ -96,6 +96,10 @@ .notification__content { color: var(--color-ink); + @media (prefers-color-scheme: dark) { + border: 1px solid var(--color-subtle-dark); + } + .notificiations-list--read & { border: 1px solid var(--color-subtle); box-shadow: none; diff --git a/app/views/bubbles/list/_divider.html.erb b/app/views/bubbles/list/_divider.html.erb index f26ebf177..1e365d554 100644 --- a/app/views/bubbles/list/_divider.html.erb +++ b/app/views/bubbles/list/_divider.html.erb @@ -1,8 +1,9 @@