frontend/src/components/gallery/GalleryFilterBar.vue

@@ -181,20 +181,32 @@ function pushFilter(mutate) {
 </script>
 
 <style scoped>
-/* Pinned under the 64px TopNav, matching the app's sticky v-tabs chrome
-   (SettingsView / ArtistHeader / SubscriptionsView). */
+/* Pinned directly under the 64px TopNav and visually continuous with it. */
 .fc-filterbar {
   position: sticky;
   top: 64px;
-  z-index: 4;
+  z-index: 5;
+  /* Attach to the TopNav: cancel the v-container's top padding (pt-2 = 8px)
+     so the bar sits flush at 64px even at scroll 0 — without this it detaches
+     and a gap shows through when scrolled to the top. */
+  margin-top: -8px;
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
-  padding: 8px 4px;
+  padding: 10px 12px;
   margin-bottom: 12px;
-  background: rgb(var(--v-theme-surface));
-  border-bottom: 1px solid rgb(var(--v-theme-surface-light));
+  /* Same hazey obsidian (#14171A = 20,23,26) + blur as the TopNav so the two
+     read as one piece of chrome; content scrolls under both. */
+  background: rgba(20, 23, 26, 0.55);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+}
+/* The inputs/toggles float on the haze: still translucent, but a touch more
+   opaque than the bar/nav so the controls stay legible. */
+.fc-filterbar :deep(.v-field),
+.fc-filterbar :deep(.v-btn-group) {
+  background-color: rgba(20, 23, 26, 0.72);
 }
 .fc-filterbar__search { max-width: 320px; min-width: 200px; }
 .fc-filterbar__chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }