h/oslstats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

scroll fixes

Browse Source
This commit is contained in:
Haelnorr
2026-03-07 13:01:08 +11:00
parent 4064c9c557
commit 3b1eeaf12d
4 changed files with 49 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
internal/embedfs/web/css/input.css
View File

@@ -129,72 +129,29 @@
}
/* Custom Scrollbar Styles - Catppuccin Theme */
/* Only applied to specific elements (viewport, dropdowns, modals) to avoid
overriding the browser default scrollbar on the html/body level */
/* Firefox */
* {
/* Main content viewport */
#page-viewport {
--scrollbar-thumb: var(--overlay0);
--scrollbar-track: var(--base);
scrollbar-width: normal;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
/* Multi-select dropdowns */
.multi-select-dropdown {
--scrollbar-thumb: var(--surface2);
--scrollbar-track: var(--base);
scrollbar-width: thin;
scrollbar-color: var(--surface1) var(--mantle);
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--mantle);
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: var(--surface1);
border-radius: 4px;
border: 2px solid var(--mantle);
}
::-webkit-scrollbar-thumb:hover {
background: var(--surface2);
}
::-webkit-scrollbar-thumb:active {
background: var(--overlay0);
}
/* Specific styling for multi-select dropdowns */
.multi-select-dropdown::-webkit-scrollbar {
width: 6px;
}
.multi-select-dropdown::-webkit-scrollbar-track {
background: var(--base);
border-radius: 3px;
}
.multi-select-dropdown::-webkit-scrollbar-thumb {
background: var(--surface2);
border-radius: 3px;
border: 1px solid var(--base);
}
.multi-select-dropdown::-webkit-scrollbar-thumb:hover {
background: var(--overlay0);
}
/* Specific styling for modal content */
.modal-scrollable::-webkit-scrollbar {
width: 8px;
}
.modal-scrollable::-webkit-scrollbar-track {
background: var(--base);
}
.modal-scrollable::-webkit-scrollbar-thumb {
background: var(--surface1);
border-radius: 4px;
}
.modal-scrollable::-webkit-scrollbar-thumb:hover {
background: var(--surface2);
/* Modal content */
.modal-scrollable {
--scrollbar-thumb: var(--surface1);
--scrollbar-track: var(--base);
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

63
internal/embedfs/web/css/output.css
View File

@@ -2460,56 +2460,23 @@
font-weight: 700;
font-style: italic;
}
* {
#page-viewport {
--scrollbar-thumb: var(--overlay0);
--scrollbar-track: var(--base);
scrollbar-width: normal;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.multi-select-dropdown {
--scrollbar-thumb: var(--surface2);
--scrollbar-track: var(--base);
scrollbar-width: thin;
scrollbar-color: var(--surface1) var(--mantle);
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--mantle);
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: var(--surface1);
border-radius: 4px;
border: 2px solid var(--mantle);
}
::-webkit-scrollbar-thumb:hover {
background: var(--surface2);
}
::-webkit-scrollbar-thumb:active {
background: var(--overlay0);
}
.multi-select-dropdown::-webkit-scrollbar {
width: 6px;
}
.multi-select-dropdown::-webkit-scrollbar-track {
background: var(--base);
border-radius: 3px;
}
.multi-select-dropdown::-webkit-scrollbar-thumb {
background: var(--surface2);
border-radius: 3px;
border: 1px solid var(--base);
}
.multi-select-dropdown::-webkit-scrollbar-thumb:hover {
background: var(--overlay0);
}
.modal-scrollable::-webkit-scrollbar {
width: 8px;
}
.modal-scrollable::-webkit-scrollbar-track {
background: var(--base);
}
.modal-scrollable::-webkit-scrollbar-thumb {
background: var(--surface1);
border-radius: 4px;
}
.modal-scrollable::-webkit-scrollbar-thumb:hover {
background: var(--surface2);
.modal-scrollable {
--scrollbar-thumb: var(--surface1);
--scrollbar-track: var(--base);
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
@property --tw-translate-x {
syntax: "*";

8
internal/view/baseview/footer.templ
View File

@@ -30,10 +30,10 @@ templ Footer() {
templ backToTopButton() {
<div class="absolute end-4 top-4 sm:end-6 lg:end-8">
<a
<button
class="inline-block rounded-full bg-teal p-2 text-crust
shadow-sm transition hover:bg-teal/75"
href="#main-content"
shadow-sm transition hover:bg-teal/75 hover:cursor-pointer"
onclick="document.getElementById('page-viewport').scrollTo({ top: 0, behavior: 'smooth' })"
>
<span class="sr-only">Back to top</span>
<svg
@@ -50,7 +50,7 @@ templ backToTopButton() {
clip-rule="evenodd"
></path>
</svg>
</a>
</button>
</div>
}

14
internal/view/baseview/layout.templ
View File

@@ -29,7 +29,7 @@ templ Layout(title string) {
}
</head>
<body
class="bg-base dark text-text ubuntu-mono-regular overflow-x-hidden"
class="bg-base dark text-text ubuntu-mono-regular overflow-hidden h-screen"
hx-ext="ws"
ws-connect={ devInfo.WebsocketBase + "/ws/notifications" }
>
@@ -38,16 +38,20 @@ templ Layout(title string) {
@popup.ConfirmModal()
<div
id="main-content"
class="flex flex-col h-screen justify-between"
class="flex flex-col h-screen"
>
@Navbar()
if previewRole != nil {
@previewModeBanner(previewRole)
}
<div id="page-content" class="mb-auto md:px-5 md:pt-5">
{ children... }
<div id="page-viewport" class="flex-1 overflow-y-auto overflow-x-hidden">
<div id="page-content" class="min-h-full flex flex-col justify-between">
<div class="mb-auto md:px-5 md:pt-5">
{ children... }
</div>
@Footer()
</div>
</div>
@Footer()
</div>
</body>
</html>