HC: implement overlay scrollbar theming

while the behavior was in place, the specific theming for
overlay scrollbars was missing, and content was hidden.
This commit is contained in:
Jakub Steiner 2015-05-04 14:39:40 +02:00
parent ff558d3d39
commit 5cce2051dd
2 changed files with 56 additions and 0 deletions

View File

@ -1374,6 +1374,9 @@ GtkTreeView.view.progressbar { //Progressbar in treeview cells
-GtkRange-stepper-spacing: 0;
-GtkRange-trough-under-steppers: 1;
$_slider_margin: 3px;
$_slider_fine_tune_margin: 4px;
.button {
border: none;
}
@ -1398,6 +1401,40 @@ GtkTreeView.view.progressbar { //Progressbar in treeview cells
}
}
}
&.overlay-indicator {
&:not(.dragging):not(.hovering) { // Overlay scrolling indicator
opacity: 0.4;
-GtkRange-slider-width: 5px;
.slider {
margin: 0;
background-color: $fg_color;
border: 1px solid white;
background-clip: padding-box;
}
.trough {
border-style: none;
background-color: transparent;
}
// w/o the following margin tweaks the slider shrinks when hovering/dragging
&.vertical .slider {
margin-top: $_slider_margin - 1px;
margin-bottom: $_slider_margin - 1px;
}
&.horizontal .slider {
margin-left: $_slider_margin - 1px;
margin-right: $_slider_margin - 1px;
}
}
&.dragging,
&.hovering { opacity: 0.7; }
}
}
.scrollbars-junction { // the small square between two scrollbars

View File

@ -1606,6 +1606,25 @@ GtkTreeView.view.progressbar {
border-width: 8px; }
.scrollbar.slider.fine-tune:prelight:active {
background-color: #000; }
.scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
opacity: 0.4;
-GtkRange-slider-width: 5px; }
.scrollbar.overlay-indicator:not(.dragging):not(.hovering) .slider {
margin: 0;
background-color: #000;
border: 1px solid white;
background-clip: padding-box; }
.scrollbar.overlay-indicator:not(.dragging):not(.hovering) .trough {
border-style: none;
background-color: transparent; }
.scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical .slider {
margin-top: 2px;
margin-bottom: 2px; }
.scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal .slider {
margin-left: 2px;
margin-right: 2px; }
.scrollbar.overlay-indicator.dragging, .scrollbar.overlay-indicator.hovering {
opacity: 0.7; }
.scrollbars-junction, .scrollbar.trough {
border-color: transparent;