feat: change scrollbar's color too

SkyCryptWebsite · Dec 26, 2023 · 7b61334 · 7b61334
1 parent fc1961c
commit 7b61334
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 12 deletions.
diff --git a/public/resources/scss/shared.scss b/public/resources/scss/shared.scss
@@ -54,6 +54,9 @@
   /* Normal Background */
   --bg: url(/resources/img/bg.webp);
 
+  /* Scrollbar color */
+  --scrollbar-color: #0bca51;
+
   color-scheme: dark;
 
   &.light {
@@ -1013,7 +1016,7 @@ body {
 
   *::-webkit-scrollbar-thumb {
     border-radius: 12px;
-    background-color: var(--icon-hex);
+    background-color: var(--scrollbar-color);
   }
 
   body::-webkit-scrollbar {

diff --git a/public/resources/scss/stats.scss b/public/resources/scss/stats.scss
@@ -1343,7 +1343,7 @@ a.additional-player-stat:hover {
 }
 
 .piece-admin-bg,
-.style-scrollbar .piece-admin-bg + .item-lore::-webkit-scrollbar-thumb {
+.style-scrollbar .piece-admin-bg {
   background-color: var(--§4);
 }
 .piece-admin-bg + .item-lore {
@@ -1354,7 +1354,7 @@ a.additional-player-stat:hover {
 }
 
 .piece-supreme-bg,
-.style-scrollbar .piece-supreme-bg + .item-lore::-webkit-scrollbar-thumb {
+.style-scrollbar .piece-supreme-bg {
   background-color: var(--§4);
 }
 .piece-supreme-bg + .item-lore {
@@ -1365,7 +1365,7 @@ a.additional-player-stat:hover {
 }
 
 .piece-very_special-bg,
-.style-scrollbar .piece-very_special-bg + .item-lore::-webkit-scrollbar-thumb {
+.style-scrollbar .piece-very_special-bg {
   background-color: var(--§c);
 }
 .piece-very_special-bg + .item-lore {
@@ -1376,7 +1376,7 @@ a.additional-player-stat:hover {
 }
 
 .piece-special-bg,
-.style-scrollbar .piece-special-bg + .item-lore::-webkit-scrollbar-thumb {
+.style-scrollbar .piece-special-bg {
   background-color: var(--§c);
 }
 .piece-special-bg + .item-lore {
@@ -1387,7 +1387,7 @@ a.additional-player-stat:hover {
 }
 
 .piece-divine-bg,
-.style-scrollbar .piece-divine-bg + .item-lore::-webkit-scrollbar-thumb {
+.style-scrollbar .piece-divine-bg {
   background-color: var(--§b);
 }
 .piece-divine-bg + .item-lore {
@@ -1398,7 +1398,7 @@ a.additional-player-stat:hover {
 }
 
 .piece-mythic-bg,
-.style-scrollbar .piece-mythic-bg + .item-lore::-webkit-scrollbar-thumb {
+.style-scrollbar .piece-mythic-bg {
   background-color: var(--§d);
 }
 .piece-mythic-bg + .item-lore {
@@ -1409,7 +1409,7 @@ a.additional-player-stat:hover {
 }
 
 .piece-legendary-bg,
-.style-scrollbar .piece-legendary-bg + .item-lore::-webkit-scrollbar-thumb {
+.style-scrollbar .piece-legendary-bg {
   background-color: var(--§6);
 }
 .piece-legendary-bg + .item-lore {
@@ -1420,7 +1420,7 @@ a.additional-player-stat:hover {
 }
 
 .piece-epic-bg,
-.style-scrollbar .piece-epic-bg + .item-lore::-webkit-scrollbar-thumb {
+.style-scrollbar .piece-epic-bg {
   background-color: var(--§5);
 }
 .piece-epic-bg + .item-lore {
@@ -1431,7 +1431,7 @@ a.additional-player-stat:hover {
 }
 
 .piece-rare-bg,
-.style-scrollbar .piece-rare-bg + .item-lore::-webkit-scrollbar-thumb {
+.style-scrollbar .piece-rare-bg {
   background-color: var(--§9);
 }
 .piece-rare-bg + .item-lore {
@@ -1442,7 +1442,7 @@ a.additional-player-stat:hover {
 }
 
 .piece-uncommon-bg,
-.style-scrollbar .piece-uncommon-bg + .item-lore::-webkit-scrollbar-thumb {
+.style-scrollbar .piece-uncommon-bg {
   background-color: var(--§a);
 }
 .piece-uncommon-bg + .item-lore {
@@ -1453,7 +1453,7 @@ a.additional-player-stat:hover {
 }
 
 .piece-common-bg,
-.style-scrollbar .piece-common-bg + .item-lore::-webkit-scrollbar-thumb {
+.style-scrollbar .piece-common-bg {
   background-color: var(--§f);
 }
 .piece-common-bg + .item-lore {

diff --git a/public/resources/ts/stats-defer.ts b/public/resources/ts/stats-defer.ts
@@ -273,6 +273,8 @@ function fillLore(element: HTMLElement) {
 
   itemNameContent.innerHTML = isMulticolor ? itemNameHtml : itemNameString.replace(/§([0-9a-fklmnor])/gi, "") ?? "???";
 
+  statsContent.style.setProperty("--scrollbar-color", itemName.style.backgroundColor);
+
   itemNameContent.dataset.multicolor = String(isMulticolor);
 
   if (element.hasAttribute("data-pet-index")) {