From 4cbe0ecfa444e4d07b70a6c9c5d453c5231c3d8a Mon Sep 17 00:00:00 2001 From: spencer-rafada Date: Thu, 3 Aug 2023 00:06:44 -0600 Subject: [PATCH] customize scrollbar like macOS --- src/main.css | 42 ++++++++++++++++++++++++++++++++++++------ src/main.css.map | 2 +- src/main.scss | 35 +++++++++++++++++++++++++++++++---- 3 files changed, 68 insertions(+), 11 deletions(-) diff --git a/src/main.css b/src/main.css index 60af0fb..7db9fdc 100644 --- a/src/main.css +++ b/src/main.css @@ -1,4 +1,36 @@ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap"); +/* total width */ +.scrollbar::-webkit-scrollbar { + background-color: #fff; + width: 16px; +} + +/* background of the scrollbar except button or resizer */ +.scrollbar::-webkit-scrollbar-track { + background-color: #070a13; +} + +.scrollbar::-webkit-scrollbar-track:hover { + background-color: #062c47; +} + +/* scrollbar itself */ +.scrollbar::-webkit-scrollbar-thumb { + background-color: #babac0; + border-radius: 16px; + border: 5px solid #070a13; +} + +.scrollbar::-webkit-scrollbar-thumb:hover { + background-color: #2659f2; + border: 4px solid #062c47; +} + +/* set button(top and bottom of the scrollbar) */ +.scrollbar::-webkit-scrollbar-button { + display: none; +} + @keyframes hoverAnimation { 0% { transform: scale(1); @@ -28,16 +60,14 @@ main { font-family: "Inter", serif; color: #D8E2FD; - padding: 2rem; -} -@media only screen and (min-width: 40em) { - main { - padding: 4rem; - } } +.mainSection { + padding: 2rem; +} @media only screen and (min-width: 40em) { .mainSection { + padding: 4rem; height: calc(100vh - 8rem); } } diff --git a/src/main.css.map b/src/main.css.map index 73d8149..814c9c7 100644 --- a/src/main.css.map +++ b/src/main.css.map @@ -1 +1 @@ -{"version":3,"sources":["main.scss","main.css"],"names":[],"mappings":"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","file":"main.css"} \ No newline at end of file +{"version":3,"sources":["main.scss","main.css"],"names":[],"mappings":"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","file":"main.css"} \ No newline at end of file diff --git a/src/main.scss b/src/main.scss index ef118f4..2155fd8 100644 --- a/src/main.scss +++ b/src/main.scss @@ -14,6 +14,35 @@ $mediumScreen: 48em; $largeScreen: 64em; $extraLargeScreen: 80em; +// Scrollbar +/* total width */ +.scrollbar::-webkit-scrollbar { + background-color:#fff; + width:16px +} + +/* background of the scrollbar except button or resizer */ +.scrollbar::-webkit-scrollbar-track { + background-color:$backgroundColor; +} +.scrollbar::-webkit-scrollbar-track:hover { + background-color:$secondaryColor; +} + +/* scrollbar itself */ +.scrollbar::-webkit-scrollbar-thumb { + background-color:#babac0; + border-radius:16px; + border:5px solid $backgroundColor +} +.scrollbar::-webkit-scrollbar-thumb:hover { + background-color: $accentColor; + border:4px solid $secondaryColor; +} + +/* set button(top and bottom of the scrollbar) */ +.scrollbar::-webkit-scrollbar-button {display:none} + // Animations @keyframes hoverAnimation { 0% { @@ -47,14 +76,12 @@ main { font-family: 'Inter', serif; // background-color: $backgroundColor; color: $textColor; - padding: 2rem; - @media only screen and (min-width: $smallScreen) { - padding: 4rem; - } } .mainSection { + padding: 2rem; @media only screen and (min-width: $smallScreen) { + padding: 4rem; height: calc(100vh - 4rem * 2); } }