From ce598ebdef4309ececd0f8b89a1c3811ac316d6e Mon Sep 17 00:00:00 2001
From: PrinOrange <prinorange@outlook.com>
Date: Thu, 4 Jan 2024 10:29:19 +0800
Subject: [PATCH] fix the scrollbar

---
 components/mdx/PreWrapper.tsx |  4 ++--
 pages/blog/[id].tsx           |  2 +-
 styles/formulation.css        | 23 ++++++++++++---------
 styles/scrollbar.css          | 38 ++++++++++++-----------------------
 4 files changed, 29 insertions(+), 38 deletions(-)

diff --git a/components/mdx/PreWrapper.tsx b/components/mdx/PreWrapper.tsx
index eb5d5c8..32e5945 100644
--- a/components/mdx/PreWrapper.tsx
+++ b/components/mdx/PreWrapper.tsx
@@ -22,7 +22,7 @@ const PreWrapper = ({ children }: { children: JSX.Element }) => {
   };
 
   return (
-    <div ref={textInput} onMouseEnter={onEnter} onMouseLeave={onExit} className="relative">
+    <div ref={textInput} onMouseEnter={onEnter} onMouseLeave={onExit} className="relative flat-scrollbar-normal">
       {hovered && (
         <button
           aria-label="Copy code"
@@ -60,7 +60,7 @@ const PreWrapper = ({ children }: { children: JSX.Element }) => {
           </svg>
         </button>
       )}
-      <pre>{children}</pre>
+      <pre className="flat-scrollbar-normal">{children}</pre>
     </div>
   );
 };
diff --git a/pages/blog/[id].tsx b/pages/blog/[id].tsx
index 41ac193..d73cc69 100644
--- a/pages/blog/[id].tsx
+++ b/pages/blog/[id].tsx
@@ -88,7 +88,7 @@ const ReaderPage = (props: ReaderPageProps) => {
               )}
             </div>
             <div
-              className={`typesetting ${fontSourceSerifScreenCN.className} flat-scrollbar-thin my-0 ${
+              className={`typesetting ${fontSourceSerifScreenCN.className} mt-0 mb-10 ${
                 !props.frontMatter.allowShare && "select-none"
               }`}
             >
diff --git a/styles/formulation.css b/styles/formulation.css
index 703c46d..9bb9ec4 100644
--- a/styles/formulation.css
+++ b/styles/formulation.css
@@ -4,17 +4,20 @@
   padding-bottom: 10px;
 }
 
-.katex-display::-webkit-scrollbar {
-  width: 10px;
-  height: 5px;
-}
 .katex-display::-webkit-scrollbar-track {
-  border-radius: 3px;
-  background: rgba(207, 199, 199, 0.05);
-  -webkit-box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.08);
+  background-color: transparent;
+  border-radius: 9999px;
 }
+
 .katex-display::-webkit-scrollbar-thumb {
-  border-radius: 3px;
-  background: rgb(232, 229, 229);
-  -webkit-box-shadow: inset 0 0 50px rgba(169, 160, 160, 0.2);
+  --tw-border-opacity: 1;
+  background-color: rgba(217, 217, 227, 0.5);
+  border-color: rgba(255, 255, 255, var(--tw-border-opacity));
+  border-radius: 9999px;
+  border-width: 1px;
+}
+
+.katex-display::-webkit-scrollbar {
+  height: 0.4rem;
+  width: 0.5rem;
 }
diff --git a/styles/scrollbar.css b/styles/scrollbar.css
index 28b368f..dd35d50 100644
--- a/styles/scrollbar.css
+++ b/styles/scrollbar.css
@@ -1,29 +1,17 @@
-.flat-scrollbar::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.flat-scrollbar::-webkit-scrollbar-track {
-  border-radius: 3px;
-  background: rgba(0, 0, 0, 0.06);
-  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08);
-}
-.flat-scrollbar::-webkit-scrollbar-thumb {
-  border-radius: 3px;
-  background: gray;
-  -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
+.flat-scrollbar-normal::-webkit-scrollbar-track {
+  background-color: transparent;
+  border-radius: 9999px;
 }
 
-.flat-scrollbar-thin::-webkit-scrollbar {
-  width: 3px;
-  height: 3px;
+.flat-scrollbar-normal::-webkit-scrollbar-thumb {
+  --tw-border-opacity: 1;
+  background-color: rgba(217, 217, 227, 0.5);
+  border-color: rgba(255, 255, 255, var(--tw-border-opacity));
+  border-radius: 9999px;
+  border-width: 1px;
 }
-.flat-scrollbar-thin::-webkit-scrollbar-track {
-  border-radius: 3px;
-  background: rgba(0, 0, 0, 0.06);
-  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08);
-}
-.flat-scrollbar-thin::-webkit-scrollbar-thumb {
-  border-radius: 3px;
-  background: gray;
-  -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
+
+.flat-scrollbar-normal::-webkit-scrollbar {
+  height: 0.5rem;
+  width: 0.5rem;
 }