You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
1.8 KiB
76 lines
1.8 KiB
import { css } from '@/theme'
|
|
|
|
export const useScrollStyle = () => {
|
|
|
|
|
|
const scrollbar = css`
|
|
&::-webkit-scrollbar {
|
|
//width: 6px;
|
|
//height: 6px;
|
|
//background-color: rgb(252, 252, 252);
|
|
|
|
width: 9px;
|
|
height: 9px;
|
|
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
//box-shadow: inset 0 0 6px rgba(173, 173, 173, 0.15);
|
|
//border-radius: 10px;
|
|
//background-color: #fcfcfc;
|
|
|
|
border-radius: 8px;
|
|
background-color: transparent;
|
|
|
|
&:hover {
|
|
background-color: rgba(0, 0, 0, .06);
|
|
-webkit-box-shadow: -1px 0 0 #fff inset, 1px 0 0 hsla(0, 0%, 100%, .9) inset, 0 -1px 0 hsla(0, 0%, 100%, .9) inset, 0 1px 0 hsla(0, 0%, 100%, .9) inset
|
|
|
|
}
|
|
|
|
&:active {
|
|
background-color: rgba(0, 0, 0, .1)
|
|
}
|
|
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
|
|
//height: 20px;
|
|
//border-radius: 10px;
|
|
//box-shadow: inset 0 0 6px rgba(0, 0, 0, .12);
|
|
//background-color: #cbcbcb;
|
|
|
|
border-radius: 8px;
|
|
background-color: rgba(0, 0, 0, .1);
|
|
-webkit-box-shadow: -2px 0 0 #fff inset, 1px 0 0 #fff inset, 0 -1px 0 hsl(0deg 0% 100% / 90%) inset, 0 1px 0 hsl(0deg 0% 100% / 90%) inset;
|
|
|
|
&:hover {
|
|
background-color: rgba(0, 0, 0, .4)
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(0, 0, 0, .6)
|
|
}
|
|
}
|
|
`
|
|
|
|
const scrollbarBackground = css`
|
|
background: linear-gradient(#fff 30%, hsla(0, 0%, 100%, 0)),
|
|
linear-gradient(hsla(0, 0%, 100%, 0), #fff 70%) 0 100%,
|
|
radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .1), transparent),
|
|
radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .1), transparent) 0 100%;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
|
|
background-attachment: local, local, scroll, scroll;
|
|
|
|
${scrollbar.toString()}
|
|
|
|
`
|
|
|
|
|
|
return {
|
|
scrollbarBackground,
|
|
scrollbar,
|
|
}
|
|
}
|