dev.2ha.me/lixiyu-net
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix the scrollbar

Browse Source
This commit is contained in:
PrinOrange
2024-01-04 10:29:19 +08:00
parent 436e286173
commit ce598ebdef
4 changed files with 29 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/mdx/PreWrapper.tsx
View File

@@ -22,7 +22,7 @@ const PreWrapper = ({ children }: { children: JSX.Element }) => {
}; };
return ( return (
<div ref={textInput} onMouseEnter={onEnter} onMouseLeave={onExit} className="relative"> <div ref={textInput} onMouseEnter={onEnter} onMouseLeave={onExit} className="relative flat-scrollbar-normal">
{hovered && ( {hovered && (
<button <button
aria-label="Copy code" aria-label="Copy code"
@@ -60,7 +60,7 @@ const PreWrapper = ({ children }: { children: JSX.Element }) => {
</svg> </svg>
</button> </button>
)} )}
<pre>{children}</pre> <pre className="flat-scrollbar-normal">{children}</pre>
</div> </div>
); );
}; };

2
pages/blog/[id].tsx
View File

@@ -88,7 +88,7 @@ const ReaderPage = (props: ReaderPageProps) => {
)} )}
</div> </div>
<div <div
className={`typesetting ${fontSourceSerifScreenCN.className} flat-scrollbar-thin my-0 ${ className={`typesetting ${fontSourceSerifScreenCN.className} mt-0 mb-10 ${
!props.frontMatter.allowShare && "select-none" !props.frontMatter.allowShare && "select-none"
}`} }`}
> >

23
styles/formulation.css
View File

@@ -4,17 +4,20 @@
padding-bottom: 10px; padding-bottom: 10px;
} }
.katex-display::-webkit-scrollbar {
width: 10px;
height: 5px;
}
.katex-display::-webkit-scrollbar-track { .katex-display::-webkit-scrollbar-track {
border-radius: 3px; background-color: transparent;
background: rgba(207, 199, 199, 0.05); border-radius: 9999px;
-webkit-box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.08);
} }
.katex-display::-webkit-scrollbar-thumb { .katex-display::-webkit-scrollbar-thumb {
border-radius: 3px; --tw-border-opacity: 1;
background: rgb(232, 229, 229); background-color: rgba(217, 217, 227, 0.5);
-webkit-box-shadow: inset 0 0 50px rgba(169, 160, 160, 0.2); 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;
} }

38
styles/scrollbar.css
View File

@@ -1,29 +1,17 @@
.flat-scrollbar::-webkit-scrollbar { .flat-scrollbar-normal::-webkit-scrollbar-track {
width: 6px; background-color: transparent;
height: 6px; border-radius: 9999px;
}
.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-thin::-webkit-scrollbar { .flat-scrollbar-normal::-webkit-scrollbar-thumb {
width: 3px; --tw-border-opacity: 1;
height: 3px; 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; .flat-scrollbar-normal::-webkit-scrollbar {
background: rgba(0, 0, 0, 0.06); height: 0.5rem;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08); width: 0.5rem;
}
.flat-scrollbar-thin::-webkit-scrollbar-thumb {
border-radius: 3px;
background: gray;
-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
} }