d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-15 23:16:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

matery 菜单微调；加入自定义滚动条

Browse Source
This commit is contained in:
tangly1024.com
2024-04-29 10:25:49 +08:00
parent a81c1426b5
commit 4811cb7319
2 changed files with 42 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
themes/matery/components/MenuItemCollapse.js
View File

@@ -72,7 +72,7 @@ export const MenuItemCollapse = ({ link }) => {
return (
<div
key={index}
className='cursor-pointer whitespace-nowrap dark:text-gray-200 w-full font-extralight dark:bg-black text-left px-5 justify-start bg-gray-100 hover:bg-indigo-700 hover:text-white dark:hover:bg-gray-900 tracking-widest transition-all duration-200 border-b dark:border-gray-800 py-3 pr-6'>
className='cursor-pointer whitespace-nowrap dark:text-gray-200 w-full font-extralight dark:bg-black text-left px-5 justify-start bg-gray-100 hover:bg-indigo-500 dark:hover:bg-indigo-500 hover:text-white tracking-widest transition-all duration-200 border-b dark:border-gray-800 py-3 pr-6'>
<Link href={sLink.to} target={link?.target}>
<span className='text-sm'>
<i className={`${sLink.icon} w-4 mr-3 text-center`} />

55
themes/matery/style.js
View File

@@ -5,27 +5,54 @@
* @returns
*/
const Style = () => {
return <style jsx global>{`
// 底色
body{
background-color: #f5f5f5
}
.dark body{
return (
<style jsx global>{`
// 底色
body {
background-color: #f5f5f5;
}
.dark body {
background-color: black;
}
}
/* 设置了从上到下的渐变黑色 */
#theme-matery .header-cover::before {
content: "";
/* 设置了从上到下的渐变黑色 */
#theme-matery .header-cover::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0.5) 100%);
}
`}</style>
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.5) 0%,
rgba(0, 0, 0, 0.2) 10%,
rgba(0, 0, 0, 0) 25%,
rgba(0, 0, 0, 0.2) 75%,
rgba(0, 0, 0, 0.5) 100%
);
}
// 自定义滚动条
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: #4338ca;
}
* {
scrollbar-width: thin;
scrollbar-color: #4338ca transparent;
}
`}</style>
)
}
export { Style }