Cardoza_Construction/base
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add custom scrollbar styles for app shell page view
CI / build (push) Has been skipped
Details
CI / deploy (push) Successful in 1m10s
Details

Browse Source 
Implemented Shadcn-style scrollbars for scrollable areas in the app shell. Adjusted scrollbar width and colors for both light and dark themes to enhance user experience and visual consistency.
This commit is contained in:
eewing
2026-03-17 09:21:47 -05:00
parent a37575d810
commit 89f9f04504
1 changed files with 25 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/layout.css
+25
View File
@@ -162,3 +162,28 @@
} }
/* Inputs inherit font size so they scale with system text size */ /* Inputs inherit font size so they scale with system text size */
/* Shadcn-style scrollbars for scrollable areas */
.app-shell .page-view {
scrollbar-width: thin;
scrollbar-color: hsl(240 3.7% 15.9%) transparent;
}
.app-shell .page-view::-webkit-scrollbar {
width: 8px;
}
.app-shell .page-view::-webkit-scrollbar-track {
background: transparent;
}
.app-shell .page-view::-webkit-scrollbar-thumb {
background-color: hsl(240 3.7% 15.9%);
border-radius: 9999px;
border: 2px solid transparent;
background-clip: padding-box;
}
.dark .app-shell .page-view::-webkit-scrollbar-thumb {
background-color: hsl(240 3.7% 30%);
}