update kayal

Author: iCaran

public/css/main.css

@@ -97,7 +97,6 @@ code {
 
 pre {
   line-height: 1.5;
-  overflow-x: auto;
   padding: 0.5em;
 }
 
@@ -106,11 +105,17 @@ pre code {
   color: inherit;
   font-size: 100%;
   padding: 0;
+  display: block;
+  overflow-x: auto;
+}
+
+.highlight pre code {
+  overflow-x: unset;
 }
 
 pre:has(code) {
-  color: #f8f8f2;
-  background-color: #272822;
+  color: var(--code-fg);
+  background-color: var(--code-bg);
   border-radius: var(--radius);
   box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
 }
@@ -294,7 +299,7 @@ details[open] div {
 }
 
 .menu-btn svg,
-.copy-button svg {
+.copy-button svg{
   height: 1.1em;
   width: 1.1em;
   vertical-align: text-top;
@@ -448,7 +453,7 @@ body:not(.dark) #sun {
 
 .pg-title {
   padding: 0;
-  margin-bottom: 0px;
+  margin: 0px;
 }
 
 /* Meta */
@@ -513,6 +518,7 @@ pre:hover .copy-button {
   /*padding: 0.25rem 0.5rem;*/
   cursor:pointer;
   background-color: inherit;
+  color: var(--code-fg);
   border: none;
 }
 
@@ -744,5 +750,75 @@ h6:hover .anchor {
 }
 
 .mermaid {
-  background-color: #292929;
+  background-color: var(--black);
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+::-webkit-scrollbar {
+  width: 0.5vw;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--scrollbar-track);
+  border-radius: var(--radius);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: var(--radius);
+}
+
+.highlight pre::-webkit-scrollbar-track,
+.highlight>div::-webkit-scrollbar-track,
+pre code::-webkit-scrollbar-track {
+  background: var(--code-bg) !important;
+}
+
+.highlight pre::-webkit-scrollbar-thumb,
+.highlight>div::-webkit-scrollbar-thumb,
+pre code::-webkit-scrollbar-thumb {
+  background: var(--code-scroll-thumb) !important;
+}
+
+::-webkit-scrollbar-thumb:hover,
+.highlight pre::-webkit-scrollbar-thumb:hover,
+.highlight>div::-webkit-scrollbar-thumb:hover,
+pre code::-webkit-scrollbar-thumb:hover {
+  background: var(--tertiary-color-light) !important;
+}
+
+.breadcrumbs {
+  padding: 0;
+  margin: 0;
+  opacity: 0.5;
+  display: inline-flex;
+  font-size: 0.98em;
+  align-items: center;
+}
+
+.breadcrumbs li::before {
+  content: none;
+}
+
+.breadcrumbs li::after {
+  content: "»";
+  width: 1em;
+  text-align: center;
+  display: inline-block;
+}
+
+.breadcrumbs a {
+  border: none;
+  display: inline-flex;
+  align-items: center;
+}
+
+.breadcrumbs a svg {
+  width: 0.94em;
+  height: auto;
+  text-align: center;
+  vertical-align: text-top;
+  opacity: inherit;
 }