diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css index 5e5dad254..208c9d5d3 100644 --- a/app/assets/stylesheets/base.css +++ b/app/assets/stylesheets/base.css @@ -54,6 +54,10 @@ ::selection { background-color: var(--color-selected); + + @media (prefers-color-scheme: dark) { + background-color: var(--color-selected-dark); + } } :where(ul, ol):where([role="list"]) { diff --git a/app/assets/stylesheets/filters.css b/app/assets/stylesheets/filters.css index e1c3f87e2..bc0ebdf98 100644 --- a/app/assets/stylesheets/filters.css +++ b/app/assets/stylesheets/filters.css @@ -1,4 +1,8 @@ @layer components { + #header:has(.filters) { + position: relative; + } + .filters { align-items: center; display: flex; @@ -13,10 +17,10 @@ --btn-border-color: var(--color-ink-medium); --input-background: var(--color-canvas); } - } - #header:has(.filters) { - position: relative; + &:has(.filter-toggle:hover) { + z-index: calc(var(--z-nav) + 1); + } } .filter { @@ -170,5 +174,17 @@ .filters--has-filters-set .filters__manage { display: flex; } + + .filters__show-when-expanded { + .filters:not(.filters--expanded) & { + display: none; + } + } + + .filters__show-when-collapsed { + .filters--expanded & { + display: none; + } + } } diff --git a/app/views/filters/settings/_toggle.html.erb b/app/views/filters/settings/_toggle.html.erb index d1e7d10bf..7df58eff8 100644 --- a/app/views/filters/settings/_toggle.html.erb +++ b/app/views/filters/settings/_toggle.html.erb @@ -8,6 +8,7 @@ <% else %> <% end %>