New Latitudes - scrollbar editor

Colors

Box

Background

Border

Scrollbar

Track color

Thumb color

Spacing (webkit only)

Vertical

Width

Padding top

Padding right

Padding bottom

Padding left

Horizontal

Height

Padding top

Padding right

Padding bottom

Padding left

Edges

roundedsquared

Preview

CSS

@supports not selector(::-webkit-scrollbar) {
    scrollbar-color: #9fa2b4 #dfe0eb;
}

@supports selector(::-webkit-scrollbar) {
    &::-webkit-scrollbar {
        width: 16px;
        height: 16px;
    }

    &::-webkit-scrollbar-corner {
        display: none;
    }

    &::-webkit-scrollbar-button {
        display: none;
    }

    &::-webkit-scrollbar-track {
        background-color: #dfe0eb;
        background-clip: content-box;
        border-style: solid;
        border-color: transparent;
    }

    &::-webkit-scrollbar-thumb {
        background-color: #9fa2b4;
        background-clip: content-box;
        border-style: solid;
        border-color: transparent;
    }

    &::-webkit-scrollbar-track:vertical {
        border-width: 6px 6px 6px 6px;
        border-radius: 8px 8px 8px 8px / 8px 8px 8px 8px;
    }

    &::-webkit-scrollbar-thumb:vertical {
        border-width: 6px 6px 6px 6px;
        border-radius: 8px 8px 8px 8px / 8px 8px 8px 8px;
    }

    &::-webkit-scrollbar-track:horizontal {
        border-width: 6px 6px 6px 6px;
        border-radius: 8px 8px 8px 8px / 8px 8px 8px 8px;
    }

    &::-webkit-scrollbar-thumb:horizontal {
        border-width: 6px 6px 6px 6px;
        border-radius: 8px 8px 8px 8px / 8px 8px 8px 8px;
    }
}