First of all, let me thanks you a lot for this nice and essential theme, that I have taken as a starting point to design my own GTK3 theme for PhotoFlow. Without you, I would still be struggling with the CSS syntax, most likely without much success
However, for the scrollbars I have taken the Mint theme as an example, simply making it darker… here is how they look like:
and below is the relevant portion of the CSS file.
Hope this can help!
/*************
* scrollbar *
*************/
.scrollbar {
-GtkRange-trough-border: 2;
-GtkScrollbar-has-backward-stepper: 0;
-GtkScrollbar-has-forward-stepper: 0;
-GtkRange-slider-width: 10;
-GtkScrollbar-min-slider-length: 30;
-GtkRange-stepper-spacing: 0;
-GtkRange-trough-under-steppers: 1;
}
.scrollbar.trough,
.scrollbar.trough.vertical {
border-width: 0 0 0 1px;
border-radius: 0;
border-color: alpha(@border, 0.5);
}
.scrollbar.trough,
.scrollbar.trough.vertical {
background-image: linear-gradient(to right,
shade(@theme_bg_color,0.9),
shade(@theme_bg_color,0.9));
}
.scrollbar.trough.horizontal {
border-width: 1px 0 0 0;
background-image: linear-gradient(to bottom,
shade(@theme_bg_color,0.9),
shade(@theme_bg_color,0.9));
}
.scrollbar.slider,
.scrollbar.slider.vertical {
border: 1px solid @border;
border-radius: 20px;
background-color: transparent;
background-image: linear-gradient(to right,
shade(@theme_bg_color, 1.12),
shade(@theme_bg_color, 0.95));
box-shadow: 1px 0 alpha(white, 0.5);
}
.scrollbar.slider.vertical:hover {
background-image: linear-gradient(to right,
shade(@theme_bg_color, 1.4),
shade(@theme_bg_color, 1.2));
box-shadow: 1px 0 alpha(white, 0.3);
}
.scrollbar.slider.horizontal {
background-image: linear-gradient(to bottom,
shade(@theme_bg_color, 1.12),
shade(@theme_bg_color, 0.95));
}
.scrollbar.slider.horizontal:hover {
background-image: linear-gradient(to bottom,
shade(@theme_bg_color, 1.4),
shade(@theme_bg_color, 1.2));
box-shadow: 1px 0 alpha(white, 0.3);
}
.scrollbar.slider.fine-tune:prelight:active {
border: 3px solid transparent;
background-color: shade(@theme_bg_color, 0.9);
background-image: none;
box-shadow: none;
}