@qvant/qui-max/dist/css/q-scrollbar.css

A Vue 3 Design system for Web.

.q-scrollbar {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.q-scrollbar__wrap {
  height: 100%;
  overflow: scroll;
}
.q-scrollbar__wrap_hidden-default {
  scrollbar-width: none;
}
.q-scrollbar__wrap_hidden-default::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.q-scrollbar__view {
  min-height: 100%;
}
.q-scrollbar__thumb {
  position: relative;
  display: block;
  width: 0;
  height: 0;
  cursor: pointer;
  background-color: var(--color-primary-blue);
  border-radius: var(--border-radius-base);
  transition: 0.3s background-color;
}
.q-scrollbar__thumb:hover {
  background-color: var(--color-primary-blue);
}
.q-scrollbar__thumb_secondary {
  background-color: rgb(var(--color-rgb-gray)/16%);
}
.q-scrollbar__thumb_secondary:hover, .q-scrollbar__thumb_secondary:active {
  background-color: rgb(var(--color-rgb-gray)/32%);
}
.q-scrollbar__bar {
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 1;
  border-radius: var(--border-radius-base);
  opacity: 0;
  transition: opacity 120ms ease-out;
}
.q-scrollbar__bar_vertical {
  top: 6px;
  width: 2px;
}
.q-scrollbar__bar_vertical > .q-scrollbar__thumb {
  width: 100%;
}
.q-scrollbar__bar_horizontal {
  left: 6px;
  height: 2px;
}
.q-scrollbar__bar_horizontal > .q-scrollbar__thumb {
  height: 100%;
}
.q-scrollbar__bar_secondary.q-scrollbar__bar_vertical {
  width: 8px;
  background-color: var(--color-tertiary-gray);
}
.q-scrollbar__bar_secondary.q-scrollbar__bar_horizontal {
  height: 8px;
  background-color: var(--color-tertiary-gray);
}
.q-scrollbar_visible > .q-scrollbar__bar, .q-scrollbar:hover > .q-scrollbar__bar, .q-scrollbar:active > .q-scrollbar__bar, .q-scrollbar:focus > .q-scrollbar__bar, .q-scrollbar__wrap.focus-visible ~ .q-scrollbar__bar {
  opacity: 1;
  transition: opacity 340ms ease-out;
}