style(gallery): hazey filter bar attached to the TopNav
- Filter bar gets the same obsidian translucent + backdrop-blur as the TopNav so the two read as one piece of chrome. - margin-top:-8px cancels the v-container's pt-2 so the bar sits flush at 64px even at scroll 0 — fixes the gap/separation when scrolled to top. - Inputs/toggles get a more-opaque backing so they stay legible on the haze. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -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; }
|
||||
|
||||
Reference in New Issue
Block a user