kibi/f0ckm
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

testing a more unified scrollbar look

Browse Source
This commit is contained in:
Kibi Kelburton
2026-05-06 05:09:59 +02:00
parent f6647cd075
commit 5017cd48b6
2 changed files with 20 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
public/s/css/f0ckm.css
View File

@@ -2282,13 +2282,9 @@ body.layout-legacy .scroll-to-bottom svg {
.comments-list::-webkit-scrollbar {
width: 6px;
}
.comments-list::-webkit-scrollbar-thumb { .comments-list {
background: var(--gray); scrollbar-width: thin;
border-radius: 10px;
} }
.comment { .comment {
@@ -3204,13 +3200,20 @@ html[res="fullscreen"] span#favs {
/* Global scrollbar rules */ /* Global scrollbar rules */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 6px; width: 10px;
height: 6px; height: 10px;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-color); background-color: var(--scrollbar-color);
background-clip: content-box;
border: 3px solid transparent;
border-radius: 10px; border-radius: 10px;
transition: background-color 0.2s;
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--accent);
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
@@ -9909,12 +9912,10 @@ body.layout-modern>.pagewrapper:not(:has(.index-layout-wrapper)):not(:has(.item-
scrollbar-color: var(--accent) transparent; scrollbar-color: var(--accent) transparent;
} }
#shortcuts-modal .login-modal-content::-webkit-scrollbar {
width: 6px;
}
#shortcuts-modal .login-modal-content::-webkit-scrollbar-thumb { #shortcuts-modal .login-modal-content::-webkit-scrollbar-thumb {
background-color: var(--accent); background-color: var(--accent);
background-clip: content-box;
border: 3px solid transparent;
border-radius: 10px; border-radius: 10px;
} }

9
views/scroller.html
View File

@@ -575,8 +575,13 @@
/* ── COMMENTS PANEL ───────────────────────────── */ /* ── COMMENTS PANEL ───────────────────────────── */
#comments-panel { z-index: 802; } #comments-panel { z-index: 802; }
#comments-list { flex: 1; overflow-y: auto; padding: 0 16px 8px; } #comments-list { flex: 1; overflow-y: auto; padding: 0 16px 8px; }
#comments-list::-webkit-scrollbar { width: 4px; } #comments-list::-webkit-scrollbar { width: 10px; }
#comments-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 2px; } #comments-list::-webkit-scrollbar-thumb {
background: rgba(255,255,255,.12);
background-clip: content-box;
border: 3px solid transparent;
border-radius: 10px;
}
.comment-item { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.05); } .comment-item { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.comment-item:last-child { border-bottom: none; } .comment-item:last-child { border-bottom: none; }
.comment-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid rgba(255,255,255,.12); } .comment-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid rgba(255,255,255,.12); }