elpatron/kapteins-daagbok
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

Make scrollbars wider and more visible on touch devices.

Browse Source 
Global theme-aware scrollbar styling replaces the thin 6px event-table bar so long forms are easier to scroll on mobile.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
elpatron
2026-06-02 22:29:16 +02:00
co-authored by Cursor
parent e3ea45f717
commit 959afd5a63
2 changed files with 60 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/App.css
+1 -15
View File
@@ -2647,27 +2647,13 @@ html.scheme-dark .themed-select-option.is-selected {
.events-scroll-container { .events-scroll-container {
width: 100%; width: 100%;
overflow-x: auto; overflow-x: auto;
-webkit-overflow-scrolling: touch;
background: rgba(11, 12, 16, 0.4); background: rgba(11, 12, 16, 0.4);
border: 1px solid rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px; border-radius: 12px;
box-sizing: border-box; box-sizing: border-box;
} }
/* Custom Scrollbar for events container */
.events-scroll-container::-webkit-scrollbar {
height: 6px;
}
.events-scroll-container::-webkit-scrollbar-track {
background: rgba(11, 12, 16, 0.2);
}
.events-scroll-container::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
}
.events-scroll-container::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.2);
}
.events-table { .events-table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
client/src/index.css
+59
View File
@@ -18,3 +18,62 @@ body {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
/* Scrollbars — auf Touch-Geräten breiter und besser sichtbar */
:root {
--app-scrollbar-size: 10px;
}
@media (hover: none), (pointer: coarse), (max-width: 768px) {
:root {
--app-scrollbar-size: 14px;
}
}
html {
scrollbar-width: auto;
scrollbar-color: var(--app-accent-light) var(--app-surface-inset);
-webkit-overflow-scrolling: touch;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
width: var(--app-scrollbar-size);
height: var(--app-scrollbar-size);
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
background: var(--app-surface-inset);
border-radius: calc(var(--app-scrollbar-size) / 2);
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--app-accent-light) 55%, transparent);
border-radius: calc(var(--app-scrollbar-size) / 2);
min-height: 48px;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
background: color-mix(in srgb, var(--app-accent-light) 80%, transparent);
}
@media (hover: none), (pointer: coarse), (max-width: 768px) {
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--app-accent-light) 70%, transparent);
}
html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active,
*::-webkit-scrollbar-thumb:active {
background: var(--app-accent-light);
}
}