Update scss template

[simonschaufi]

Hello! Thank you for your great scrollbar project! I just tried to create my own theme and found this template: https://github.com/KingSora/KingSora.github.io/blob/master/OverlayScrollbars/html/documentation.html#L3243-L3353. Unfortunatelly it seams to be a bit outdated as the structure doesn't fit to the default template (os-theme-dark). Could you please update it?

In my case i just wanted to have a thicker scrollbar on hover like in the theme "os-theme-minimal-dark". When i downloaded the theme, i then realized it doesn't match with the scss template at all (especially the :before parts).

How did you actually create the default theme? It would be great if you could publish your default themes somewhere as scss.

[KingSora]

Good day!

The SCSS template should not resemble the default "os-theme-dark" or "os-theme-light" template. It should only be a "easy to customize" template.

The actual default template is a little bit special, because I've customized it as much as possible, so the actual CSS is as small as possible.

Here is a SCSS template which corresponds to the actual default theme "os-theme-dark".

//your theme name
$theme-name: os-theme-custom;

//horizontal scrollbar
$scrollbar-horizontal-size: 6px; //horizontal scrollbar height
$scrollbar-horizontal-padding: 2px;
$scrollbar-horizontal-inner-expansion: 6px;
$scrollbar-horizontal-track-background: transparent;
$scrollbar-horizontal-track-background-hover: transparent;
$scrollbar-horizontal-track-background-active: transparent;
$scrollbar-horizontal-track-transition: background-color 0.3s;
$scrollbar-horizontal-handle-min-size: 30px; //horizontal scrollbar handle min width
$scrollbar-horizontal-handle-max-size: none; //horizontal scrollbar handle max width
$scrollbar-horizontal-handle-background: rgba(0, 0, 0, 0.4);
$scrollbar-horizontal-handle-background-hover: rgba(0, 0, 0, 0.6);
$scrollbar-horizontal-handle-background-active: rgba(0, 0, 0, 1);
$scrollbar-horizontal-handle-transition: background-color 0.3s;

//vertical scrollbar
$scrollbar-vertical-size: 6px; //vertical scrollbar width
$scrollbar-vertical-padding: 2px;
$scrollbar-vertical-inner-expansion: 6px;
$scrollbar-vertical-track-background: transparent;
$scrollbar-vertical-track-background-hover: transparent;
$scrollbar-vertical-track-background-active: transparent;
$scrollbar-vertical-track-transition: background-color 0.3s;
$scrollbar-vertical-handle-min-size: 30px; //vertical scrollbar handle min height
$scrollbar-vertical-handle-max-size: none; //vertical scrollbar handle max height
$scrollbar-vertical-handle-background: rgba(0, 0, 0, 0.4);
$scrollbar-vertical-handle-background-hover: rgba(0, 0, 0, 0.6);
$scrollbar-vertical-handle-background-active: rgba(0, 0, 0, 1);
$scrollbar-vertical-handle-transition: background-color 0.3s;

//scrollbar corner
$scrollbar-corner-background-color: transparent;

.#{$theme-name} > .os-scrollbar-horizontal {
    right: $scrollbar-vertical-size + ($scrollbar-vertical-padding * 2);
    height: $scrollbar-horizontal-size;
    padding: $scrollbar-horizontal-padding;
}
.#{$theme-name} > .os-scrollbar-vertical {
    bottom: $scrollbar-horizontal-size + ($scrollbar-horizontal-padding * 2);
    width: $scrollbar-vertical-size;
    padding: $scrollbar-vertical-padding;
}
.#{$theme-name}.os-host-rtl > .os-scrollbar-horizontal {
    left: $scrollbar-vertical-size + ($scrollbar-vertical-padding * 2);
    right: 0;
}
.#{$theme-name} > .os-scrollbar-corner {
    height: $scrollbar-horizontal-size + ($scrollbar-horizontal-padding * 2);
    width: $scrollbar-vertical-size + ($scrollbar-vertical-padding * 2);
    background-color: $scrollbar-corner-background-color;
}
.#{$theme-name} > .os-scrollbar-horizontal > .os-scrollbar-track {
    background: $scrollbar-horizontal-track-background;
}
.#{$theme-name} > .os-scrollbar-vertical > .os-scrollbar-track {
    background: $scrollbar-vertical-track-background;
}
.#{$theme-name} > .os-scrollbar-horizontal > .os-scrollbar-track:hover {
    background: $scrollbar-horizontal-track-background-hover;
}
.#{$theme-name} > .os-scrollbar-vertical > .os-scrollbar-track:hover {
    background: $scrollbar-vertical-track-background-hover;
}
.#{$theme-name} > .os-scrollbar-horizontal > .os-scrollbar-track.active {
    background: $scrollbar-horizontal-track-background-active;
}
.#{$theme-name} > .os-scrollbar-vertical > .os-scrollbar-track.active {
    background: $scrollbar-vertical-track-background-active;
}
.#{$theme-name}.os-host-transition > .os-scrollbar-horizontal > .os-scrollbar-track {
    -webkit-transition: $scrollbar-horizontal-track-transition;
            transition: $scrollbar-horizontal-track-transition;
}
.#{$theme-name}.os-host-transition > .os-scrollbar-vertical > .os-scrollbar-track {
    -webkit-transition: $scrollbar-vertical-track-transition;
            transition: $scrollbar-vertical-track-transition;
}
.#{$theme-name} > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before,
.#{$theme-name} > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: block;
}
.#{$theme-name} > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before {
    top: -$scrollbar-horizontal-inner-expansion;
    bottom: -$scrollbar-horizontal-padding;
}
.#{$theme-name} > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
    left: -$scrollbar-vertical-inner-expansion;
    right: -$scrollbar-vertical-padding;
}
.#{$theme-name}.os-host-rtl > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
    right: -$scrollbar-vertical-inner-expansion;
    left: -$scrollbar-vertical-padding;
}
.#{$theme-name} > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
    border-radius: $scrollbar-horizontal-size;
}
.#{$theme-name} > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
    border-radius: $scrollbar-vertical-size;
}
.#{$theme-name} > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
    min-width: $scrollbar-horizontal-handle-min-size;
    max-width: $scrollbar-horizontal-handle-max-size;
    background: $scrollbar-horizontal-handle-background;
}
.#{$theme-name} > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
    min-height: $scrollbar-vertical-handle-min-size;
    max-height: $scrollbar-vertical-handle-max-size;
    background: $scrollbar-vertical-handle-background;
}
.#{$theme-name} > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:hover {
    background: $scrollbar-horizontal-handle-background-hover;
}
.#{$theme-name} > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:hover {
    background: $scrollbar-vertical-handle-background-hover;
}
.#{$theme-name} > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle.active {
    background: $scrollbar-horizontal-handle-background-active;
}
.#{$theme-name} > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle.active {
    background: $scrollbar-vertical-handle-background-active;
}
.#{$theme-name}.os-host-transition > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
    -webkit-transition: $scrollbar-horizontal-handle-transition;
            transition: $scrollbar-horizontal-handle-transition;
}
.#{$theme-name}.os-host-transition > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
    -webkit-transition: $scrollbar-vertical-handle-transition;
            transition: $scrollbar-vertical-handle-transition;
}

I'll update the template on the documentation page.

[simonschaufi]

Thank you very much!

I figured out that in the code you just posted you actually dispaly the os-scrollbar-handle while in the os-theme-minimal-dark theme you give the os-scrollbar-handle a transparent background and display the os-scrollbar-handle::before instead.

PS: I think your selectors could be a bit optimized as they are quite deep nested which is not needed imho.

[KingSora]

No problem, pal!

Yes you're right. - The reason why I did this is to increase the user friendliness. In this way the handle has basically the same size nevertheless if hovered or not and an other element handles the visual effect. In my opinion it's much better this way (actially the first version of this theme was without this imporvement, but I changed it before 1.0.0 came out, because I wasn't pleased with it) If you want to see the difference, you can shift the styling from the os-scrollbar-handle:before element to the os-scrollbar-handle element.

Yes you're right, but I wanted the selectors this way to rule out any possible mistakes in styling. Maybe I'll update them in the future. :)