Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-10 10:22:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(next): restyle WebKit scrollbars

Browse Source
This commit is contained in:
Adorian Doran 2025-03-26 18:53:17 +02:00
parent 0cedd697cc
commit c2d917b926
3 changed files with 68 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/public/stylesheets/theme-next-dark.css
View File

@ -190,8 +190,11 @@
--right-pane-item-hover-background: #ffffff26;
--right-pane-item-hover-color: white;
--scrollbar-border-color: #666;
--scrollbar-background-color: #333;
--scrollbar-thumb-color: #fdfdfd5c;
--scrollbar-thumb-color-hover: #ffffff7d;
--scrollbar-border-color: unset; /* Deprecated */
--scrollbar-background-color: unset; /* Deprecated */
--link-color: lightskyblue;
--mermaid-theme: dark;

7
src/public/stylesheets/theme-next-light.css
View File

@ -189,8 +189,11 @@
--right-pane-item-hover-background: #ececec;
--right-pane-item-hover-color: inherit;
--scrollbar-border-color: #ddd;
--scrollbar-background-color: #ddd;
--scrollbar-thumb-color: #0000005c;
--scrollbar-thumb-color-hover: #00000066;
--scrollbar-border-color: unset; /* Deprecated */
--scrollbar-background-color: unset; /* Deprecated */
--link-color: blue;
--mermaid-theme: default;

58
src/public/stylesheets/theme-next/forms.css
View File

@ -660,3 +660,61 @@ a.tn-link:hover[href^="https://"]:not(.no-arrow)::after,
input[type="range"] {
background: transparent;
}
/*
* WebKit scrollbars
*/
:root {
--scrollbar-thickness: 10px;
--scrollbar-thumb-thickness: 3px;
--scrollbar-thumb-hover-thickness: 8px;
--scrollbar-start-end-gap: 8px;
}
/* Scrollbar's body */
::-webkit-scrollbar:vertical {
width: var(--scrollbar-thickness) !important;
}
::-webkit-scrollbar:horizontal {
height: var(--scrollbar-thickness) !important;
}
/* Scrollbar's thumb */
::-webkit-scrollbar-thumb {
--s-thumb-thickness: var(--scrollbar-thumb-thickness);
--s-thumb-color: var(--scrollbar-thumb-color);
--s-gradient-angle: 90deg;
--s-gradient-p1: calc((var(--scrollbar-thickness) - var(--s-thumb-thickness)) / 2);
--s-gradient-p2: calc(var(--s-gradient-p1) + var(--s-thumb-thickness));
border: none !important;
background: linear-gradient(var(--s-gradient-angle), transparent, transparent var(--s-gradient-p1),
var(--s-thumb-color) 0px, var(--s-thumb-color) var(--s-gradient-p2),
transparent 0) !important;
border-radius: calc(var(--scrollbar-thickness) / 2) !important;
}
::-webkit-scrollbar-thumb:horizontal {
--s-gradient-angle: 0deg;
}
::-webkit-scrollbar-thumb:hover {
--s-thumb-thickness: var(--scrollbar-thumb-hover-thickness);
--s-thumb-color: var(--scrollbar-thumb-color-hover);
}
/* Scrollbar's increment/decrement buttons (repurposed as a scrollbar start/end gap) */
::-webkit-scrollbar-button:vertical {
height: var(--scrollbar-start-end-gap);
}
::-webkit-scrollbar-button:horizontal {
width: var(--scrollbar-start-end-gap);
}