112 lines
3.1 KiB
TypeScript
112 lines
3.1 KiB
TypeScript
|
import type { FlattenSimpleInterpolation } from "styled-components";
|
||
|
|
import { css } from "styled-components";
|
||
|
|
import { DOWN, LEFT, RIGHT, UP } from "styles/ArrowIcons";
|
||
|
|
|
||
|
|
const ScrollBars = (
|
||
|
|
size: number,
|
||
|
|
verticalX = 0,
|
||
|
|
verticalY = 0
|
||
|
|
): FlattenSimpleInterpolation => css`
|
||
|
|
overflow: auto;
|
||
|
|
scrollbar-color: rgb(77, 77, 77) rgb(23, 23, 23);
|
||
|
|
scrollbar-gutter: stable;
|
||
|
|
|
||
|
|
&::-webkit-scrollbar {
|
||
|
|
height: ${size}px;
|
||
|
|
width: ${size}px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::-webkit-scrollbar-corner,
|
||
|
|
&::-webkit-scrollbar-track {
|
||
|
|
background-color: rgb(23, 23, 23);
|
||
|
|
}
|
||
|
|
|
||
|
|
&::-webkit-scrollbar-thumb {
|
||
|
|
background-clip: padding-box;
|
||
|
|
background-color: rgb(77, 77, 77);
|
||
|
|
}
|
||
|
|
|
||
|
|
&::-webkit-scrollbar-thumb:vertical {
|
||
|
|
background-clip: padding-box;
|
||
|
|
background-color: rgb(77, 77, 77);
|
||
|
|
border-left: 1px solid transparent;
|
||
|
|
border-right: 1px solid transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::-webkit-scrollbar-thumb:horizontal {
|
||
|
|
border-bottom: 1px solid transparent;
|
||
|
|
border-top: 1px solid transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::-webkit-scrollbar-thumb:hover {
|
||
|
|
background-color: rgb(122, 122, 122);
|
||
|
|
}
|
||
|
|
|
||
|
|
&::-webkit-scrollbar-thumb:active {
|
||
|
|
background-color: rgb(166, 166, 166);
|
||
|
|
}
|
||
|
|
|
||
|
|
&::-webkit-scrollbar-button:single-button {
|
||
|
|
background-clip: padding-box;
|
||
|
|
background-color: rgb(23, 23, 23);
|
||
|
|
background-position: center 4px;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: 10px;
|
||
|
|
border: 1px solid rgb(23, 23, 23);
|
||
|
|
display: block;
|
||
|
|
height: ${size ? `${size}px` : "initial"};
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background-color: rgb(55, 55, 55);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:active {
|
||
|
|
background-color: rgb(166, 166, 166);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&::-webkit-scrollbar-button:single-button:vertical:decrement,
|
||
|
|
&::-webkit-scrollbar-button:single-button:vertical:increment {
|
||
|
|
background-position-x: ${verticalX === 0 ? "center" : `${verticalX}px`};
|
||
|
|
background-position-y: ${verticalY === 0 ? "center" : `${verticalY}px`};
|
||
|
|
background-size: 16px;
|
||
|
|
border-bottom: 0;
|
||
|
|
border-top: 0;
|
||
|
|
image-rendering: pixelated;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::-webkit-scrollbar-button:single-button:vertical:decrement {
|
||
|
|
background-image: url(${UP});
|
||
|
|
}
|
||
|
|
|
||
|
|
&::-webkit-scrollbar-button:single-button:vertical:increment {
|
||
|
|
background-image: url(${DOWN});
|
||
|
|
}
|
||
|
|
|
||
|
|
&::-webkit-scrollbar-button:single-button:horizontal:decrement,
|
||
|
|
&::-webkit-scrollbar-button:single-button:horizontal:increment {
|
||
|
|
background-position: center;
|
||
|
|
background-size: 16px;
|
||
|
|
border-left: 0;
|
||
|
|
border-right: 0;
|
||
|
|
image-rendering: pixelated;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::-webkit-scrollbar-button:single-button:horizontal:decrement {
|
||
|
|
background-image: url(${LEFT});
|
||
|
|
}
|
||
|
|
|
||
|
|
&::-webkit-scrollbar-button:single-button:horizontal:increment {
|
||
|
|
background-image: url(${RIGHT});
|
||
|
|
}
|
||
|
|
|
||
|
|
&::-webkit-scrollbar-button:single-button:vertical:decrement:active,
|
||
|
|
&::-webkit-scrollbar-button:single-button:vertical:increment:active,
|
||
|
|
&::-webkit-scrollbar-button:single-button:horizontal:decrement:active,
|
||
|
|
&::-webkit-scrollbar-button:single-button:horizontal:increment:active {
|
||
|
|
background-blend-mode: color-burn;
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
export default ScrollBars;
|