xbpr/theme/index.less

xbp react ui by @arco-design/web-react

@import "../es/style/index.less";

* {
  box-sizing: border-box;
  outline: none;

  ::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-width);
    background: transparent;
  }
  ::-webkit-scrollbar-corner {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
    background-color: transparent;

    border-radius: var(--scrollbar-border-radius);
    border-width: var(--scrollbar-border-width);
  }
  :hover {
    &::-webkit-scrollbar-thumb {
      background-color: var(--scrollbar-color);
    }
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-color-hover);
  }
}

body {
  // scrollbar 默认值
  --scrollbar-color: var(--color-border-3);
  --scrollbar-color-hover: var(--color-border-4);

  --scrollbar-width: 12px;
  --scrollbar-border-radius: 6px;
  --scrollbar-border-width: 2px;

  background-color: var(--color-bg-1);
  color: var(--color-text-1);
}