61 lines
1.8 KiB
CSS
61 lines
1.8 KiB
CSS
/* 根容器 */
|
||
.custom-scrollbar {
|
||
scrollbar-gutter: stable both-edges;
|
||
border-radius: 4px; /* Mantine 默认圆角 */
|
||
}
|
||
|
||
/* Firefox */
|
||
.custom-scrollbar {
|
||
scrollbar-width: thin; /* 细滚动条 */
|
||
scrollbar-color: light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4))
|
||
transparent;
|
||
scroll-behavior: smooth;
|
||
border-radius: 4px; /* Mantine 默认圆角 */
|
||
}
|
||
|
||
/* Webkit 滚动条（Chrome / Edge / Safari） */
|
||
.custom-scrollbar::-webkit-scrollbar {
|
||
width: 8px; /* Mantine 默认宽度 */
|
||
height: 8px;
|
||
border-radius: 4px; /* Mantine 默认圆角 */
|
||
}
|
||
|
||
.custom-scrollbar::-webkit-scrollbar-track {
|
||
background-color: transparent; /* Mantine 无轨道背景 */
|
||
border-radius: 4px; /* Mantine 默认圆角 */
|
||
}
|
||
|
||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||
background-color: rgba(0, 0, 0, 0.25); /* Mantine 默认 thumb 颜色 */
|
||
border-radius: 4px; /* Mantine 默认圆角 */
|
||
transition: background-color 150ms ease;
|
||
border-radius: 4px; /* Mantine 默认圆角 */
|
||
}
|
||
|
||
.custom-scrollbar:hover::-webkit-scrollbar-thumb {
|
||
background-color: rgba(0, 0, 0, 0.35); /* hover 时更深 */
|
||
border-radius: 4px; /* Mantine 默认圆角 */
|
||
}
|
||
|
||
/* Active（按住拖动） */
|
||
.custom-scrollbar::-webkit-scrollbar-thumb:active {
|
||
background-color: light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4));
|
||
border-radius: 4px; /* Mantine 默认圆角 */
|
||
}
|
||
|
||
/* Hover 效果（Firefox） */
|
||
.custom-scrollbar:hover {
|
||
scrollbar-color: light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.3))
|
||
transparent;
|
||
scroll-behavior: smooth;
|
||
border-radius: 4px; /* Mantine 默认圆角 */
|
||
}
|
||
|
||
/**
|
||
* 支持垂直 + 水平滚动条交汇区域（ScrollArea 的 corner）
|
||
*/
|
||
.custom-scrollbar-corner {
|
||
background-color: transparent;
|
||
border-radius: 4px; /* Mantine 默认圆角 */
|
||
}
|