Custom the scrollbar on Webkit browsers
the default scrollbar on Windows looks like shit
This commit is contained in:
parent
a603aac8e8
commit
c0b8c089c2
3 changed files with 24 additions and 0 deletions
|
@ -53,6 +53,26 @@ body {
|
|||
font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
|
||||
}
|
||||
|
||||
/* --- Scrollbar --- */
|
||||
|
||||
$scrollbar-size: 7px;
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: $scrollbar-size;
|
||||
height: $scrollbar-size;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@at-root body#{&} {
|
||||
-webkit-box-shadow: inset 0 0 6px var(--scrollbar-track-bg);
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--scrollbar-thumb-bg);
|
||||
border-radius: calc(#{$scrollbar-size} / 2);
|
||||
}
|
||||
|
||||
/* --- Typography --- */
|
||||
|
||||
h1 {
|
||||
|
|
|
@ -12,6 +12,8 @@
|
|||
--input-focus-border-color: rgb(112, 114, 115);
|
||||
--mask-bg: rgb(68, 69, 70);
|
||||
--footer-bg-color: var(--main-wrapper-bg);
|
||||
--scrollbar-track-bg: rgba(0,0,0,0.3);
|
||||
--scrollbar-thumb-bg: rgb(173 171 171 / 50%);
|
||||
|
||||
/* common color */
|
||||
--text-color: rgb(175, 176, 177);
|
||||
|
|
|
@ -24,6 +24,8 @@
|
|||
--btn-box-shadow: #eaeaea;
|
||||
--checkbox-color: #c5c5c5;
|
||||
--checkbox-checked-color: #07a8f7;
|
||||
--scrollbar-track-bg: rgba(0,0,0,0.3);
|
||||
--scrollbar-thumb-bg: rgba(0,0,0,0.3);
|
||||
|
||||
/* Sidebar */
|
||||
--sidebar-bg: radial-gradient(circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%);
|
||||
|
|
Loading…
Reference in a new issue