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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* Pinned under the 64px TopNav, matching the app's sticky v-tabs chrome
|
/* Pinned directly under the 64px TopNav and visually continuous with it. */
|
||||||
(SettingsView / ArtistHeader / SubscriptionsView). */
|
|
||||||
.fc-filterbar {
|
.fc-filterbar {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 64px;
|
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;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
padding: 8px 4px;
|
padding: 10px 12px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
background: rgb(var(--v-theme-surface));
|
/* Same hazey obsidian (#14171A = 20,23,26) + blur as the TopNav so the two
|
||||||
border-bottom: 1px solid rgb(var(--v-theme-surface-light));
|
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__search { max-width: 320px; min-width: 200px; }
|
||||||
.fc-filterbar__chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
|
.fc-filterbar__chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
|
||||||
|
|||||||
Reference in New Issue
Block a user