Migrations/bookorbit
1
0
Fork 0
mirror of https://github.com/bookorbit/bookorbit.git synced 2026-11-03 00:11:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

fix(client): center the top glow on the main column

Browse Source 
Paint the glow from a zero-height element in the main inset instead of the full-width shell, so it
centers on the content column and follows the sidebar as it resizes or collapses. The shell's own
background patterns (dots, mesh, aurora and others) were hidden under the old glow and now render.
This commit is contained in:
neon
2026-10-12 04:31:21 +00:00
parent 4d453c82ca
commit 0c367b2b57
3 changed files with 22 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/assets/main.css
+19 -12
View File
@@ -253,22 +253,28 @@
mask-size: 150px 150px;
}
.glow-wrapper {
background-image: var(--glow-image);
background-position: top;
background-repeat: no-repeat;
background-size: auto calc(var(--glow-band) * var(--glow-reach));
/* A zero-height flow item at the top of the main inset. Being in flow, it spans the inset's content box,
which ends at the sidebar's edge, so the glow centres on the main column and follows the sidebar as it
resizes or collapses. Its layers sit at a negative z-index, under the shell's content like the
background patterns. The texture is a layer of its own so its tiles keep their size; the reach only
moves the fade. */
.shell-glow {
position: relative;
flex: none;
height: 0;
}
/* The texture sits on its own layer so its tiles keep their size; the reach only moves the fade. Negative
z-index keeps it under the shell's content and the glow, like the background patterns. */
.glow-wrapper::after {
.shell-glow::before,
.shell-glow::after {
content: '';
position: absolute;
inset: 0 0 auto;
z-index: -1;
height: calc(var(--glow-band) * var(--glow-reach));
pointer-events: none;
}
.shell-glow::before {
background-image: var(--glow-texture);
background-position: top center;
background-size: var(--glow-texture-size);
@@ -276,12 +282,13 @@
mask-image: radial-gradient(ellipse 62% 100% at 50% 0%, #000 0%, transparent 100%);
}
html[data-glow='off'] .glow-wrapper {
background-image: none;
.shell-glow::after {
background-image: var(--glow-image);
background-repeat: no-repeat;
}
html[data-glow='off'] .glow-wrapper::after {
content: none;
html[data-glow='off'] .shell-glow {
display: none;
}
@layer base {
client/src/assets/theme/tokens.css
+1 -1
View File
@@ -150,7 +150,7 @@
--shell-backdrop: blur(24px) saturate(150%);
--shell-shadow: var(--elevation-lg);
/* Accent glow behind the top of the shell (.glow-wrapper). --glow-band is the style's own reach and
/* Accent glow behind the top of the main column (.shell-glow). --glow-band is the style's own reach and
--glow-reach the user's multiplier on it, written on <html>. A texture keeps its tile size at any reach;
only the fade that reveals it follows the band. */
--glow-reach: 0.8;
client/src/components/AppLayout.vue
+2 -1
View File
@@ -50,9 +50,10 @@ const viewKey = computed(() => {
</script>
<template>
<SidebarProvider class="app-shell glow-wrapper min-h-svh" :class="themeStore.appliedBackgroundClass">
<SidebarProvider class="app-shell min-h-svh" :class="themeStore.appliedBackgroundClass">
<AppSidebar />
<SidebarInset class="app-shell-inset flex flex-col h-svh overflow-hidden relative bg-transparent pb-(--shell-gap)">
<div aria-hidden="true" class="shell-glow" />
<!-- 1. Global App Header: Fixed at the top, independent of views -->
<AppHeader />