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') }}
-
+
: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;