From 8f91272433ca2867db141c5647d9e8cbcf4497fe Mon Sep 17 00:00:00 2001
From: GitHub Action <action@github.com>
Date: Thu, 21 Nov 2024 17:26:09 +0000
Subject: [PATCH] Add ToC scroolbar for huge articles

Signed-off-by: GitHub Action <action@github.com>
---
 assets/scss/_colors.scss      |  1 +
 assets/scss/_scrolltotop.scss | 32 ++++++++++++++++++++++++++++++++
 assets/scss/style.scss        | 29 +++++++++++++++++++++++++++--
 3 files changed, 60 insertions(+), 2 deletions(-)
 create mode 100644 assets/scss/_scrolltotop.scss

diff --git a/assets/scss/_colors.scss b/assets/scss/_colors.scss
index 9f241a1..760338d 100644
--- a/assets/scss/_colors.scss
+++ b/assets/scss/_colors.scss
@@ -7,6 +7,7 @@ $highlight-grey: #7d828a !default;
 $midnightblue: #2c3e50 !default;
 $typewriter: hsl(172, 100%, 36%) !default;
 $codebackground: #272822 !default;
+$pagescrollbar-thumb: hsl(0, 0%, 53%) !default;
 
 // Scroll to Top Default colors
 $stt-stroke: #ccc !default;
diff --git a/assets/scss/_scrolltotop.scss b/assets/scss/_scrolltotop.scss
new file mode 100644
index 0000000..2cb6a05
--- /dev/null
+++ b/assets/scss/_scrolltotop.scss
@@ -0,0 +1,32 @@
+.scroll-up {
+    .scroll {
+        #st-ring {
+            stroke: $stt-stroke;
+        }
+
+        #st-circle {
+            fill: $stt-circle;
+        }
+
+        #st-arrow {
+            fill: $stt-arrow;
+        }
+    }
+
+    position: fixed;
+    bottom: 10%;
+    right: 2%;
+    z-index: 1;
+    opacity: 0;
+    transition: all 0.5s ease;
+}
+
+.hide {
+    opacity: 0;
+    transform: translateY(20px);
+}
+
+.show {
+    opacity: 1;
+    transform: translateY(0);
+}
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 2b65287..b85c10f 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -4,7 +4,7 @@
 {{ if ne false .Site.Params.usesAnimation }}
 @import "animate.scss";
 {{ end }}
-@import "scroll.scss";
+@import "scrolltotop.scss";
 @import "socialshare.scss";
 {{ if (fileExists "assets/scss/userstyles.scss") }}
 @import "userstyles.scss";
@@ -27,7 +27,7 @@
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #888;
+  background: $pagescrollbar-thumb;
 
   &:hover {
     background: $text;
@@ -251,6 +251,7 @@ table {
   box-shadow: -1px -2px 3px rgba(0, 0, 0, 0.45);
   background-color: $dark-grey;
   animation-duration: .3s;
+  animation-fill-mode: forwards;
 }
 
 .hdr-wrapper {
@@ -755,11 +756,35 @@ a.footnote-ref {
 
   ul {
     padding-left: 1em;
+    padding-right: 1em;
     margin: 0;
   }
 
+  /* scrollbar customization for ToC */
+  /* Width */
+  &>::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  /* Track */
+  &>::-webkit-scrollbar-track {
+    background: darken($pagescrollbar-thumb, 10%);
+  }
+
+  /* Handle */
+  &>::-webkit-scrollbar-thumb {
+    background: $midnightblue ;
+  }
+
+  /* Handle on hover */
+  &>::-webkit-scrollbar-thumb:hover {
+    background: lighten($midnightblue, 10%);
+  }
+
   &>ul {
     list-style-type: none;
+    overflow-y: auto;
+    height: calc(100vh - 300px);
 
     ul ul {
       font-size: .9em;