Members of the KDE Community are recommended to subscribe to the kde-community mailing list at https://mail.kde.org/mailman/listinfo/kde-community to allow them to participate in important discussions and receive other important announcements

New scrollbar copied for GTK 3.18

parent 07a92777
@mixin _border($name, $width: 1px 1px 2px 1px, $image-width: 2 2 3 2 / 2px 2px 3px 2px) {
border-image: -gtk-scaled(url("../assets/#{$name}.png"),url("../assets/#{$name}@2.png")) $image-width stretch;
border-width: $width;
border-style: solid;
border-color: transparent;
}
$scrollbar_color: transparentize(v_color(text),0.5);
$trough_color: transparentize(w_color(text),0.7);
/**************
* Scrollbars *
**************/
.scrollbar {
-GtkRange-trough-border: 0;
-GtkScrollbar-has-backward-stepper: true;
-GtkScrollbar-has-forward-stepper: true;
-GtkRange-slider-width: 20;
-GtkScrollbar-min-slider-length: 64;
-GtkRange-stepper-spacing: 0;
-GtkRange-trough-under-steppers: 1;
scrollbar {
.button {
@extend %undecorated_button;
color: b_color(text);
-GtkScrollbar-has-backward-stepper: false;
-GtkScrollbar-has-forward-stepper: false;
background-color: w_color(normal);
border-width: 0px 0px;
border-color: w_color(normal);
margin: 0px;
button {
min-width: 14px;
min-height: 14px;
margin: 0px;
padding: 0px 0px;
border: none;
border-radius: 0px;
background-image: none;
background-color: transparent;
color: transparent;
box-shadow: none;
&:hover {
@extend %undecorated_button;
color: b_color(hover);
border: none;
background-image: none;
background-color: w_color(normal);
color: transparent;
}
&:insensitive { color: insensitive(b_color(text)); }
&:active,
&:active:hover {
border: none;
background-image: none;
background-color: w_color(normal);
color: transparent;
}
&:disabled {
border: none;
background-color: w_color(normal);
background-image: none;
color: transparent;
}
&:backdrop {
@extend %undecorated_button;
color: backdrop(b_color(text));
&:insensitive {color: backdrop(insensitive(b_color(text)));}
&:disabled {color: backdrop(insensitive(b_color(text)));}
@extend %undecorated_button;
}
}
......@@ -44,82 +57,51 @@ $trough_color: transparentize(w_color(text),0.7);
&.overlay-indicator:not(.dragging):not(.hovering) {
-GtkRange-slider-width: 8px;
-GtkScrollbar-has-backward-stepper: false;
-GtkScrollbar-has-forward-stepper: false;
background: none;
.slider {
margin: 2px;
border: 2px solid transparent;
border-radius: 2px;
background-color: $scrollbar_color;
slider {
min-width: 6px;
border-radius: 8px;
background-color: transparentize($scrollbar_color, 0.2);
&:backdrop { background-color: backdrop($scrollbar_color); }
}
.trough {
border: none;
background: none;
}
}
// Firefox in Fedora 22 won't take any margins, so images must be used
//
// // Normal Scrollbars / Overlay Scrollbars on Mouseover
// &.trough {
// margin: 5px;
// border: 5px solid transparent;
// border-radius: 5px;
// background-color: $trough_color;
// &:backdrop { background-color: backdrop($trough_color); }
// }
// &.slider {
// margin: 5px;
// border: 5px solid transparent;
// border-radius: 5px;
// background-color: $scrollbar_color;
// &:hover { background-color: border(hover); }
// &:active { background-color: border(active);}
// &:insensitive { background-color: insensitive($scrollbar_color); }
// &:backdrop { background-color: backdrop($trough_color); }
// &:backdrop:insensitive { background-color: backdrop(insensitive($scrollbar_color)); }
// }
// }
//
//
&.trough {
@include _border(scrollbar-trough-vertical, $width: 23px 10px 23px 10px, $image-width: 23 10 23 10 / 23px 10px 23px 10px);
&.horizontal { @include _border(scrollbar-trough-horizontal, $width: 10px 23px 10px 23px, $image-width: 10 23 10 23 / 10px 23px 10px 23px); }
&:backdrop {
@include _border(scrollbar-trough-vertical-backdrop, $width: 23px 10px 23px 10px, $image-width: 23 10 23 10 / 23px 10px 23px 10px);
&.horizontal { @include _border(scrollbar-trough-horizontal-backdrop, $width: 10px 23px 10px 23px, $image-width: 10 23 10 23 / 10px 23px 10px 23px); }
}
&.horizontal slider { min-height: 4px;}
}
&.slider {
@include _border(scrollbar-slider-vertical, $width: 10px 10px 10px 10px, $image-width: 10 10 10 10 / 10px 10px 10px 10px);
&.horizontal { @include _border(scrollbar-slider-horizontal, $width: 10px 10px 10px 10px, $image-width: 10 10 10 10 / 10px 10px 10px 10px); }
&:hover {
@include _border(scrollbar-slider-vertical-hover, $width: 10px 10px 10px 10px, $image-width: 10 10 10 10 / 10px 10px 10px 10px);
&.horizontal { @include _border(scrollbar-slider-horizontal-hover, $width: 10px 10px 10px 10px, $image-width: 10 10 10 10 / 10px 10px 10px 10px); }
}
&:active {
@include _border(scrollbar-slider-vertical-active, $width: 10px 10px 10px 10px, $image-width: 10 10 10 10 / 10px 10px 10px 10px);
&.horizontal { @include _border(scrollbar-slider-horizontal-active, $width: 10px 10px 10px 10px, $image-width: 10 10 10 10 / 10px 10px 10px 10px); }
}
&:insensitive {
@include _border(scrollbar-slider-vertical-insensitive, $width: 10px 10px 10px 10px, $image-width: 10 10 10 10 / 10px 10px 10px 10px);
&.horizontal { @include _border(scrollbar-slider-horizontal-insensitive, $width: 10px 10px 10px 10px, $image-width: 10 10 10 10 / 10px 10px 10px 10px); }
}
&:backdrop {
@include _border(scrollbar-slider-vertical-backdrop, $width: 10px 10px 10px 10px, $image-width: 10 10 10 10 / 10px 10px 10px 10px);
&.horizontal { @include _border(scrollbar-slider-horizontal-backdrop, $width: 10px 10px 10px 10px, $image-width: 10 10 10 10 / 10px 10px 10px 10px); }
}
trough {
//margin: 0px;
transition-duration: 0.1s;
min-width: 6px;
min-height: 14px;
border: 0px solid w_color(normal);
border-radius: 8px;
background-color: transparent;
background-clip: backdrop($trough_color);
box-shadow: inset 0px 0px 0px 5px w_color(normal);
}
&:hover {
trough { background-color: }
}
slider {
//margin: 0px;
transition-duration: 0.1s;
min-width: 6px;
min-height: 30px;
border: 5px solid transparent;
border-radius: 8px;
background-clip: padding-box;
background-color: $scrollbar_color;
&:hover { background-color: b_color(hover); }
&:backdrop { background-color: backdrop($scrollbar_color); }
&:backdrop:disabled { background-color: backdrop(insensitive($scrollbar_color)); }
}
&.horizontal slider {
min-width: 30px;
min-height: 6px;
}
}
.scrollbars-junction,
.scrollbars-junction.frame { // the small square between two scrollbars
border-color: transparent;
background-color: transparent;
border-image: none;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment