diff --git a/src/components/ViewCollection.vue b/src/components/ViewCollection.vue index 2818fab0..d554319f 100644 --- a/src/components/ViewCollection.vue +++ b/src/components/ViewCollection.vue @@ -22,32 +22,34 @@ export default { class="tify-collection" tabindex="0" > -

- {{ $translate('Collection') }} -

+
+

+ {{ $translate('Collection') }} +

-

- - -

+ + + +
    :first-child { - border-radius: $br 0 0 $br; - } - - > :last-child { - border-radius: 0 $br $br 0; - } } .tify-collection-filter { + border-radius: $br 0 0 $br; flex: 1; max-width: 36em; @@ -25,6 +18,15 @@ } } +.tify-collection-header { + backdrop-filter: $blur; + background: oklch(from $panel-bg l c h / 61.8%); + margin: g(-.5) g(-.5) 0; + padding: g(.5); + position: sticky; + top: g(-.5); +} + .tify-collection-list { list-style: none; margin: 0; @@ -71,5 +73,6 @@ .tify-collection-reset { @extend %button-small; + border-radius: 0 $br $br 0; margin-left: -1px; } diff --git a/src/styles/sections/info.scss b/src/styles/sections/info.scss index fb170c5f..0724839b 100644 --- a/src/styles/sections/info.scss +++ b/src/styles/sections/info.scss @@ -73,8 +73,8 @@ $info-content-max-height: g(6.75); // Ensure visibility in dark mode since most logos require a white background background: $panel-bg; color-scheme: light; - margin: g(-.5); - padding: g(.5); + margin: g(-.25) g(-.5) g(-1); + padding: g(.25) g(.75); > :last-child { margin: 0;