From b4cf38ce76e350953bca014cf63da7ec729a3f99 Mon Sep 17 00:00:00 2001 From: vvveiii Date: Wed, 20 Jan 2021 17:46:40 +0800 Subject: update scrollbar style. --- assets/css/dark-style.css | 8 ++++++++ assets/css/style.css | 42 +++++++++++++++++++++++++++++++----------- 2 files changed, 39 insertions(+), 11 deletions(-) diff --git a/assets/css/dark-style.css b/assets/css/dark-style.css index a38df61..12e6c24 100644 --- a/assets/css/dark-style.css +++ b/assets/css/dark-style.css @@ -1,3 +1,11 @@ +*::-webkit-scrollbar-thumb { + background-color: rgba(255, 255, 255, 0.25) +} + +*::-webkit-scrollbar-thumb:hover { + background-color: rgba(255, 255, 255, 0.5) +} + body { color: #d8dde2; background-color: #222831; diff --git a/assets/css/style.css b/assets/css/style.css index 7817c26..597a859 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,19 +1,39 @@ -.color-orange { color: #d28e5d;} -.color-red { color: #dc3c3c;} -.color-fusia { color: #b73999;} -.color-purple { color: #8485ce;} -.color-forest-green { color: #64878f;} -.color-mint-green { color: #95c76f;} -.color-green { color: #52bd58;} -.color-blue-green { color: #00aba5;} -.color-blue { color: #4670d8;} -.bg-dark { background-color: #20222B; } - :root { color-scheme: light dark; supported-color-schemes: light dark; } +/* Works on Firefox */ +* { + scrollbar-width: auto; + scrollbar-color: var(--color-scrollbar-thumb) transparent +} + +/* Works on Chrome, Edge, and Safari */ +*::-webkit-scrollbar { + width: 12px; /* width of the entire scrollbar */ + height: 12px +} + +*::-webkit-scrollbar-track-piece { + background: transparent +} + +*::-webkit-scrollbar-track { + background: transparent /* color of the tracking area */ +} + +*::-webkit-scrollbar-thumb { + background-color: rgba(0, 0, 0, 0.175); /* color of the scroll thumb */ + background-clip: padding-box; + border-radius: 6px; /* roundness of the scroll thumb */ + border: 2px solid transparent /* creates padding around scroll thumb */ +} + +*::-webkit-scrollbar-thumb:hover { + background-color: rgba(0, 0, 0, 0.35) +} + html { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', 'Segoe UI', Ubuntu, Roboto, Oxygen, Cantarell, 'Fira Sans', 'Droid Sans', -- cgit v1.2.3