1
0
mirror of https://github.com/kognise/water.css.git synced 2025-08-18 19:02:05 +02:00

Custom scrollbars everywhere

This commit is contained in:
Kognise
2019-04-11 10:33:22 -04:00
parent bdc8a566f8
commit 839f643f6a
8 changed files with 40 additions and 24 deletions

View File

@@ -12,6 +12,9 @@ $code: #ffbe85 !default;
$button-hover: #324759 !default;
$animation-duration: 0.1s !default;
$scrollbar-thumb: $button-hover;
$scrollbar-thumb-hover: lighten($button-hover, 8%);
$form-placeholder: #a9a9a9 !default;
$form-text: #ffffff !default;

View File

@@ -12,6 +12,9 @@ $code: #000000 !default;
$button-hover: #dddddd !default;
$animation-duration: 0.1s !default;
$scrollbar-thumb: darken($button-hover, 3%);
$scrollbar-thumb-hover: darken($button-hover, 10%);
$form-placeholder: #949494 !default;
$form-text: #000000 !default;

View File

@@ -13,22 +13,21 @@ pre > code {
scrollbar-width: thin; /* Firefox see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars */
}
pre > code::-webkit-scrollbar {
::-webkit-scrollbar {
height: 10px;
width: 10px;
}
pre > code::-webkit-scrollbar-track {
background: darken($button-hover, 3%);
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
::-webkit-scrollbar-track {
background: $background-alt;
border-radius: 6px;
}
pre > code::-webkit-scrollbar-thumb {
background: lighten($button-hover, 5%);
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
::-webkit-scrollbar-thumb {
background: $scrollbar-thumb;
border-radius: 6px;
}
pre > code::-webkit-scrollbar-thumb:hover {
background: darken($button-hover, 12%);
}
::-webkit-scrollbar-thumb:hover {
background: $scrollbar-thumb-hover;
}

View File

@@ -24,4 +24,23 @@ th {
tbody tr:nth-child(even) {
background-color: $background-alt;
}
::-webkit-scrollbar {
height: 10px;
width: 10px;
}
::-webkit-scrollbar-track {
background: $background-alt;
border-radius: 6px;
}
::-webkit-scrollbar-thumb {
background: $scrollbar-thumb;
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: $scrollbar-thumb-hover;
}