mirror/TimeTracker
1
0
Fork 0
mirror of https://github.com/DRYTRIX/TimeTracker.git synced 2026-01-10 05:30:08 -06:00
Code Issues Packages Projects Releases Wiki Activity

Improve sidebar scrollbar styling for better UI consistency

Browse Source 
- Add custom scrollbar styling for sidebar navigation menu
- Implement thin, subtle scrollbar with transparent track
- Support both light and dark themes with appropriate opacity
- Add hover effects for better user interaction
- Compatible with Firefox (scrollbar-width/color) and Webkit browsers
- Fixes default browser scrollbar appearance when sidebar content overflows
This commit is contained in:
Dries Peeters
2025-11-17 19:24:49 +01:00
parent 3f73cb35c8
commit d2a477da0c
1 changed files with 31 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/templates/base.html
View File

@@ -89,6 +89,37 @@
/* Ensure body and html don't cause horizontal overflow */
html, body { overflow-x: hidden; }
#appShell { overflow-x: hidden; width: 100%; }
/* Custom scrollbar styling for sidebar */
#sidebar {
scrollbar-width: thin;
scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}
.dark #sidebar {
scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
}
/* Webkit scrollbar styling (Chrome, Edge, Safari) */
#sidebar::-webkit-scrollbar {
width: 8px;
}
#sidebar::-webkit-scrollbar-track {
background: transparent;
}
#sidebar::-webkit-scrollbar-thumb {
background-color: rgba(156, 163, 175, 0.5);
border-radius: 4px;
border: 2px solid transparent;
background-clip: padding-box;
}
#sidebar::-webkit-scrollbar-thumb:hover {
background-color: rgba(156, 163, 175, 0.7);
}
.dark #sidebar::-webkit-scrollbar-thumb {
background-color: rgba(156, 163, 175, 0.3);
}
.dark #sidebar::-webkit-scrollbar-thumb:hover {
background-color: rgba(156, 163, 175, 0.5);
}
</style>
<script>
// Theme init (unchanged)