authorgravatar for maria@kuuro.netmaria-rcks <maria@kuuro.net> 2026-07-22 23:45:25-04:00
committergravatar for maria@kuuro.netmaria <maria@kuuro.net> 2026-07-23 01:13:29-04:00
logc38225ef1cd462ce79034f6b76f9acd9eac0349b
treeecb2c6f8fa4bad32a72d9854b9317140a6c0e085
parent39cd15b9543af45dd8aed75612bf9baebe92abbd

style(web): fade settings content beneath navbar

2 files changed, 11 insertions(+), 9 deletions(-)

apps/web/src/components/settings/settingsLayout.tsx+1-1
...@@ -120,7 +120,7 @@ export function SettingsPageContainer({...@@ -120,7 +120,7 @@ export function SettingsPageContainer({
120 className?: string;120 className?: string;
121}) {121}) {
122 return (122 return (
123 <div className="scrollbar-gutter-both flex-1 overflow-y-auto px-4 py-7 sm:px-8 sm:py-10">123 <div className="settings-page-scroll-fade scrollbar-gutter-both flex-1 overflow-y-auto px-4 pt-10 pb-7 sm:px-8 sm:pt-12 sm:pb-10">
124 <div className={cn("mx-auto flex w-full max-w-4xl flex-col gap-12", className)}>124 <div className={cn("mx-auto flex w-full max-w-4xl flex-col gap-12", className)}>
125 {children}125 {children}
126 </div>126 </div>
apps/web/src/index.css+10-8
...@@ -305,8 +305,9 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil...@@ -305,8 +305,9 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
305305
306 /* Fade rows themselves as they pass beneath the top chrome. A mask remains306 /* Fade rows themselves as they pass beneath the top chrome. A mask remains
307 visible even when the header and timeline share the same background. */307 visible even when the header and timeline share the same background. */
308 .chat-timeline-scroll-fade {308 .chat-timeline-scroll-fade,
309 --timeline-top-fade-height: 2.5rem;309 .settings-page-scroll-fade {
310 --topbar-scroll-fade-height: 2.5rem;
310 -webkit-mask-image:311 -webkit-mask-image:
311 linear-gradient(312 linear-gradient(
312 to bottom,313 to bottom,
...@@ -322,8 +323,8 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil...@@ -322,8 +323,8 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
322 -webkit-mask-position: top, bottom;323 -webkit-mask-position: top, bottom;
323 -webkit-mask-repeat: no-repeat;324 -webkit-mask-repeat: no-repeat;
324 -webkit-mask-size:325 -webkit-mask-size:
325 100% var(--timeline-top-fade-height),326 100% var(--topbar-scroll-fade-height),
326 100% calc(100% - var(--timeline-top-fade-height));327 100% calc(100% - var(--topbar-scroll-fade-height));
327 mask-image:328 mask-image:
328 linear-gradient(329 linear-gradient(
329 to bottom,330 to bottom,
...@@ -339,8 +340,8 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil...@@ -339,8 +340,8 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
339 mask-position: top, bottom;340 mask-position: top, bottom;
340 mask-repeat: no-repeat;341 mask-repeat: no-repeat;
341 mask-size:342 mask-size:
342 100% var(--timeline-top-fade-height),343 100% var(--topbar-scroll-fade-height),
343 100% calc(100% - var(--timeline-top-fade-height));344 100% calc(100% - var(--topbar-scroll-fade-height));
344 }345 }
345346
346 .workspace-titlebar-controls {347 .workspace-titlebar-controls {
...@@ -593,8 +594,9 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil...@@ -593,8 +594,9 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
593 }594 }
594595
595 @media (min-width: 40rem) {596 @media (min-width: 40rem) {
596 .chat-timeline-scroll-fade {597 .chat-timeline-scroll-fade,
597 --timeline-top-fade-height: 3rem;598 .settings-page-scroll-fade {
599 --topbar-scroll-fade-height: 3rem;
598 }600 }
599601
600 .chat-composer-horizontal-inset {602 .chat-composer-horizontal-inset {