Fix scrollbar issue on safari and improve code scrollbar

radito · Apr 4, 2024 · a2f7aea · a2f7aea
1 parent 71ac0ad
commit a2f7aea
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 6 deletions.
diff --git a/assets/css/common/post-single.css b/assets/css/common/post-single.css
@@ -157,7 +157,8 @@
 
 .post-content .highlight:not(table) {
   margin: 10px auto;
-  background: var(--hljs-bg) !important;
+  background: transparent;
+  border: 1px solid var(--border);
   border-radius: var(--radius);
   direction: ltr;
 }
@@ -205,7 +206,7 @@
   margin: auto 0;
   padding: 10px;
   color: rgb(213, 213, 214);
-  /* background: var(--hljs-bg) !important; */
+  background: var(--code-bg) !important;
   border-radius: var(--radius);
   overflow-x: auto;
   word-break: break-all;

diff --git a/assets/css/extended/extmain.css b/assets/css/extended/extmain.css
@@ -7,11 +7,24 @@
   transform: scale(103%);
 }
 
-.chroma > code{
+.chroma > code {
   transition: background-color 100ms ease-in-out, color 200ms ease-in-out;
 }
 
 .chroma > code::-webkit-scrollbar {
   width: 0.35rem;
   height: 0.35rem;
-}
+}
+.chroma > code::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.chroma > code::-webkit-scrollbar-thumb {
+  border-width: 0px;
+}
+
+.chroma > code::-webkit-scrollbar-thumb {
+  background: var(--tertiary);
+  border: 2px;
+  border-radius: var(--radius);
+}
diff --git a/assets/css/includes/scroll-bar.css b/assets/css/includes/scroll-bar.css
@@ -0,0 +1,63 @@
+/* from reset */
+::-webkit-scrollbar-track {
+    background: var(--theme);
+}
+
+.list:not(.dark)::-webkit-scrollbar-track {
+    background: var(--code-bg);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--tertiary);
+    border: 5px solid var(--theme);
+    border-radius: var(--radius);
+}
+
+.list:not(.dark)::-webkit-scrollbar-thumb {
+    border: 5px solid var(--code-bg);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--secondary);
+}
+
+::-webkit-scrollbar:not(.highlighttable, .highlight table, .gist .highlight) {
+    background: var(--theme);
+}
+
+/* from post-single */
+.post-content .highlighttable td .highlight pre code::-webkit-scrollbar {
+    display: none;
+}
+
+.post-content :not(table) ::-webkit-scrollbar-thumb {
+    border: 2px solid var(--hljs-bg);
+    background: rgb(113, 113, 117);
+}
+
+.post-content :not(table) ::-webkit-scrollbar-thumb:hover {
+    background: rgb(163, 163, 165);
+}
+
+.gist table::-webkit-scrollbar-thumb {
+    border: 2px solid rgb(255, 255, 255);
+    background: rgb(173, 173, 173);
+}
+
+.gist table::-webkit-scrollbar-thumb:hover {
+    background: rgb(112, 112, 112);
+}
+
+.post-content table::-webkit-scrollbar-thumb {
+    border-width: 2px;
+}
+
+/* from zmedia */
+@media screen and (min-width: 768px) {
+
+    /* reset */
+    ::-webkit-scrollbar {
+        width: 19px;
+        height: 11px;
+    }
+}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
@@ -182,13 +182,13 @@
                 background: var(--theme);
             }
 
-            .list:not(.dark)::-webkit-scrollbar-track {
+            /* .list:not(.dark)::-webkit-scrollbar-track {
                 background: 0 0;
             }
 
             .list:not(.dark)::-webkit-scrollbar-thumb {
                 border-color: var(--theme);
-            }
+            } */
         }
     </style>
     {{- end }}