open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mimic light scrollbars

Browse Source
This commit is contained in:
tophf 2022-02-16 00:59:35 +03:00
parent 815f8aa26d
commit 8132b0b964
1 changed files with 30 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
global-dark.css
View File

@ -51,8 +51,8 @@
border: 0; border: 0;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 14px; width: 17px;
height: 14px; height: 17px;
background: var(--bg); background: var(--bg);
} }
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
@ -61,59 +61,58 @@
} }
/* buttons */ /* buttons */
::-webkit-scrollbar-button:single-button { ::-webkit-scrollbar-button:single-button {
height: 14px; height: 17px;
width: 14px; width: 17px;
background-size: 10px; background-size: 9px;
background-position: 2px 4px; background-position: 4px 7px;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
::-webkit-scrollbar-button:horizontal:single-button { ::-webkit-scrollbar-button:horizontal:single-button {
background-position: 4px 2px; background-position: 7px 4px;
} }
/* up */ /* up */
::-webkit-scrollbar-button:single-button:vertical:decrement { ::-webkit-scrollbar-button:single-button:vertical:decrement {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='hsl(0, 0%, 35%)'><polygon points='50,00 0,50 100,50'/></svg>"); background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' fill='hsl(0, 0%, 35%)'><polygon points='1,0 0,1 2,1'/></svg>");
} }
::-webkit-scrollbar-button:single-button:vertical:decrement:hover { ::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='hsl(0, 0%, 45%)'><polygon points='50,00 0,50 100,50'/></svg>"); background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' fill='hsl(0, 0%, 45%)'><polygon points='1,0 0,1 2,1'/></svg>");
} }
::-webkit-scrollbar-button:single-button:vertical:decrement:active { ::-webkit-scrollbar-button:single-button:vertical:decrement:active {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='hsl(0, 0%, 55%)'><polygon points='50,00 0,50 100,50'/></svg>"); background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' fill='hsl(0, 0%, 55%)'><polygon points='1,0 0,1 2,1'/></svg>");
} }
/* down */ /* down */
::-webkit-scrollbar-button:single-button:vertical:increment { ::-webkit-scrollbar-button:single-button:vertical:increment {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='hsl(0, 0%, 35%)'><polygon points='0,0 100,0 50,50'/></svg>"); background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' fill='hsl(0, 0%, 35%)'><polygon points='0,0 2,0 1,1'/></svg>");
} }
::-webkit-scrollbar-button:single-button:vertical:increment:hover { ::-webkit-scrollbar-button:single-button:vertical:increment:hover {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='hsl(0, 0%, 45%)'><polygon points='0,0 100,0 50,50'/></svg>"); background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' fill='hsl(0, 0%, 45%)'><polygon points='0,0 2,0 1,1'/></svg>");
} }
::-webkit-scrollbar-button:single-button:vertical:increment:active { ::-webkit-scrollbar-button:single-button:vertical:increment:active {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='hsl(0, 0%, 55%)'><polygon points='0,0 100,0 50,50'/></svg>"); background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' fill='hsl(0, 0%, 55%)'><polygon points='0,0 2,0 1,1'/></svg>");
} }
/* left */ /* left */
::-webkit-scrollbar-button:single-button:horizontal:decrement { ::-webkit-scrollbar-button:single-button:horizontal:decrement {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='hsl(0, 0%, 35%)'><polygon points='0,50 50,100 50,0'/></svg>"); background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' fill='hsl(0, 0%, 35%)'><polygon points='0,1 1,2 1,0'/></svg>");
} }
::-webkit-scrollbar-button:single-button:horizontal:decrement:hover { ::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='hsl(0, 0%, 45%)'><polygon points='0,50 50,100 50,0'/></svg>"); background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' fill='hsl(0, 0%, 45%)'><polygon points='0,1 1,2 1,0'/></svg>");
} }
::-webkit-scrollbar-button:single-button:horizontal:decrement:active { ::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='hsl(0, 0%, 55%)'><polygon points='0,50 50,100 50,0'/></svg>"); background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' fill='hsl(0, 0%, 55%)'><polygon points='0,1 1,2 1,0'/></svg>");
} }
/* right */ /* right */
::-webkit-scrollbar-button:single-button:horizontal:increment { ::-webkit-scrollbar-button:single-button:horizontal:increment {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='hsl(0, 0%, 35%)'><polygon points='0,0 0,100 50,50'/></svg>"); background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' fill='hsl(0, 0%, 35%)'><polygon points='0,0 0,2 1,1'/></svg>");
} }
::-webkit-scrollbar-button:single-button:horizontal:increment:hover { ::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='hsl(0, 0%, 45%)'><polygon points='0,0 0,100 50,50'/></svg>"); background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' fill='hsl(0, 0%, 45%)'><polygon points='0,0 0,2 1,1'/></svg>");
} }
::-webkit-scrollbar-button:single-button:horizontal:increment:active { ::-webkit-scrollbar-button:single-button:horizontal:increment:active {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='hsl(0, 0%, 55%)'><polygon points='0,0 0,100 50,50'/></svg>"); background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' fill='hsl(0, 0%, 55%)'><polygon points='0,0 0,2 1,1'/></svg>");
} }
::-webkit-scrollbar-track-piece { ::-webkit-scrollbar-track-piece {
background: #333; background: #333;
border: 4px solid var(--bg); border: 1px solid var(--bg);
border-radius: 8px;
} }
::-webkit-scrollbar-track-piece:hover { ::-webkit-scrollbar-track-piece:hover {
background: #444; background: #444;
@ -122,10 +121,15 @@
background: #555; background: #555;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
border: 3px solid var(--bg); border: 2px solid;
border-radius: 8px;
background: #555; background: #555;
} }
::-webkit-scrollbar-thumb:horizontal {
border-color: var(--bg) #333;
}
::-webkit-scrollbar-thumb:vertical {
border-color: #333 var(--bg);
}
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: #666; background: #666;
} }
@ -149,5 +153,8 @@
textarea { textarea {
border: 1px solid var(--c65); border: 1px solid var(--c65);
} }
* {
scrollbar-color: var(--c75) var(--bg);
}
} }
} }