diff --git a/src/components/layout/header/internal/HeaderWithShadow.tsx b/src/components/layout/header/internal/HeaderWithShadow.tsx index 0971e3c482..3bef09362a 100644 --- a/src/components/layout/header/internal/HeaderWithShadow.tsx +++ b/src/components/layout/header/internal/HeaderWithShadow.tsx @@ -15,7 +15,7 @@ export const HeaderWithShadow: Component = ({ children }) => {
{ {stack.map((item, index) => { return })} - - {/* */} ) } -export const HeaderPreventCLS = () => { - const hasModal = useAtomValue( - useMemo( - () => - selectAtom(modalStackAtom, (atom) => { - return atom.length > 0 - }), - [], - ), - ) - - useEffect(() => { - if (!hasModal) return - /// 5px - const $header = document.querySelector('body > header') as HTMLElement - if (!$header) return - - $header.style.right = '5px' - return () => { - $header.style.right = '' - } - }, [hasModal]) - - return null -} - const enterStyle: Target = { scale: 1, opacity: 1, diff --git a/src/styles/scrollbar.css b/src/styles/scrollbar.css index 2c4ec1f8e9..17fce63d0e 100644 --- a/src/styles/scrollbar.css +++ b/src/styles/scrollbar.css @@ -1,45 +1,44 @@ body::-webkit-scrollbar { height: 0; - width: 0; } body { overflow: overlay; /* scrollbar-gutter: stable; */ } -/**/ -/* [data-theme='dark'] { */ -/* ::-webkit-scrollbar-thumb, */ -/* ::-webkit-scrollbar-thumb:hover { */ -/* border: 3px solid theme(colors.zinc.700/20); */ -/* } */ -/**/ -/* ::-webkit-scrollbar-thumb:hover { */ -/* background: theme(colors.zinc.800/96); */ -/* } */ -/* } */ -/**/ -/* ::-webkit-scrollbar-thumb, */ -/* ::-webkit-scrollbar-thumb:hover { */ -/* background-color: transparent; */ -/* border: 3px solid theme(colors.base-100); */ -/* border-radius: 5px; */ -/* } */ -/**/ -/* ::-webkit-scrollbar { */ -/* width: 5px !important; */ -/* height: 5px !important; */ -/* background: theme(colors.base-100); */ -/* } */ -/**/ -/* ::-webkit-scrollbar-thumb { */ -/* background: theme(colors.neutral); */ -/* } */ -/**/ -/* ::-webkit-scrollbar-thumb:hover { */ -/* background: theme(colors.neutral-focus); */ -/* } */ -/**/ -/* ::-webkit-scrollbar-corner { */ -/* background: theme(colors.base-100); */ -/* } */ + +[data-theme='dark'] { + ::-webkit-scrollbar-thumb, + ::-webkit-scrollbar-thumb:hover { + border: 3px solid theme(colors.zinc.700/20); + } + + ::-webkit-scrollbar-thumb:hover { + background: theme(colors.zinc.800/96); + } +} + +::-webkit-scrollbar-thumb, +::-webkit-scrollbar-thumb:hover { + background-color: transparent; + border: 3px solid theme(colors.base-100); + border-radius: 5px; +} + +::-webkit-scrollbar { + width: 5px !important; + height: 5px !important; + background: theme(colors.base-100); +} + +::-webkit-scrollbar-thumb { + background: theme(colors.neutral); +} + +::-webkit-scrollbar-thumb:hover { + background: theme(colors.neutral-focus); +} + +::-webkit-scrollbar-corner { + background: theme(colors.base-100); +}