HighContrast: Update range styling

Adjust to the changes in the previous commit.
This commit is contained in:
Matthias Clasen 2015-11-05 00:29:14 -05:00
parent 1261aa6fdf
commit 9f3deaa496
2 changed files with 108 additions and 132 deletions

View File

@ -1457,8 +1457,7 @@ notebook {
* Scrollbars *
**************/
scrollbar,
.scrollbar {
scrollbar {
background-clip: padding-box;
background-image: none;
border-style: solid;
@ -1472,7 +1471,9 @@ scrollbar,
-GtkRange-stepper-spacing: 0;
-GtkRange-trough-under-steppers: 1;
@extend junction;
trough { @extend junction; }
$_slider_margin: 3px;
$_slider_fine_tune_margin: 4px;
@ -1502,8 +1503,6 @@ scrollbar,
&.overlay-indicator {
&:not(.dragging):not(.hovering) { // Overlay scrolling indicator
opacity: 0.4;
border-style: none;
background-color: transparent;
-GtkRange-slider-width: 5px;
@ -1514,6 +1513,11 @@ scrollbar,
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;
@ -1651,7 +1655,6 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
* GtkScale *
************/
scale,
.scale,
.scale.scale-has-marks-above.scale-has-marks-below,
.scale.vertical.scale-has-marks-above.scale-has-marks-below {
-GtkScale-slider-length: 20;
@ -1659,18 +1662,11 @@ scale,
-GtkRange-trough-border: 2;
outline-offset: -9px;
outline-radius: 4px;
margin: 10px;
border-width: 1px;
border-style: solid;
border-radius: 3px;
border-color: $borders_color;
background-color: mix($bg_color,$borders_color,60%);
box-shadow: inset 1px 1px transparentize(black, 0.9);
&.fine-tune {
outline-offset: -7px;
outline-radius: 6px;
&.trough {
& trough {
border-radius: 4px;
margin: 8px;
}
@ -1703,47 +1699,56 @@ scale,
border: 1px solid darken($selected_borders_color,3%);
}
}
&.highlight {
border-color: $selected_borders_color;
background-color: $selected_bg_color;
&:backdrop {
border-color: $insensitive_fg_color;
background-color: $insensitive_fg_color;
box-shadow: none;
trough {
margin: 10px;
border-width: 1px;
border-style: solid;
border-radius: 3px;
border-color: $borders_color;
background-color: mix($bg_color,$borders_color,60%);
box-shadow: inset 1px 1px transparentize(black, 0.9);
&.highlight {
border-color: $selected_borders_color;
background-color: $selected_bg_color;
&:backdrop {
border-color: $insensitive_fg_color;
background-color: $insensitive_fg_color;
box-shadow: none;
}
}
&:insensitive, &.hilight:insensitive {
border-color: $insensitive_borders_color;
background-color: $insensitive_bg_color;
}
&:backdrop {
border-color: $backdrop_borders_color;
background-color: mix($backdrop_bg_color,$borders_color);
box-shadow: none;
}
&:backdrop:insensitive, .hilight:backdrop:insensitive {
border-color: $insensitive_fg_color;
background-color: $backdrop_bg_color;
}
}
&:insensitive, &.hilight:insensitive {
border-color: $insensitive_borders_color;
background-color: $insensitive_bg_color;
}
&:backdrop {
border-color: $backdrop_borders_color;
background-color: mix($backdrop_bg_color,$borders_color);
box-shadow: none;
}
&:backdrop:insensitive, .hilight:backdrop:insensitive {
border-color: $insensitive_fg_color;
background-color: $backdrop_bg_color;
}
}
//FIXME: scale sliders
%scale_marks_above_horz {
margin: 14px 10px 10px;
&.fine-tune { margin: 12px 8px 8px; }
trough { margin: 14px 10px 10px; }
&.fine-tune trough { margin: 12px 8px 8px; }
}
%scale_marks_below_horz {
margin: 10px 10px 14px;
&.fine-tune { margin: 8px 8px 12px; }
trough { margin: 10px 10px 14px; }
&.fine-tune trough { margin: 8px 8px 12px; }
}
%scale_marks_above_vert {
margin: 10px 10px 10px 14px;
&.fine-tune { margin: 8px 8px 8px 12px; }
trough { margin: 10px 10px 10px 14px; }
&.fine-tune trough { margin: 8px 8px 8px 12px; }
}
%scale_marks_below_vert {
margin: 10px 14px 10px 10px;
&.fine-tune { margin: 8px 12px 8px 8px; }
trough { margin: 10px 14px 10px 10px; }
&.fine-tune trough { margin: 8px 12px 8px 8px; }
}
/*****************

View File

@ -1600,8 +1600,7 @@ notebook {
/**************
* Scrollbars *
**************/
scrollbar,
.scrollbar {
scrollbar {
background-clip: padding-box;
background-image: none;
border-style: solid;
@ -1612,53 +1611,40 @@ scrollbar,
-GtkScrollbar-min-slider-length: 42;
-GtkRange-stepper-spacing: 0;
-GtkRange-trough-under-steppers: 1; }
scrollbar button,
.scrollbar button {
scrollbar button {
border: none; }
scrollbar slider,
.scrollbar slider {
scrollbar slider {
border-radius: 20px;
border: 5px solid transparent;
background-color: gray; }
scrollbar slider:backdrop, scrollbar slider:insensitive,
.scrollbar slider:backdrop,
.scrollbar slider:insensitive {
scrollbar slider:backdrop, scrollbar slider:insensitive {
background-color: #e6e6e6; }
scrollbar slider:hover,
.scrollbar slider:hover {
scrollbar slider:hover {
background-color: #4d4d4d; }
scrollbar slider:prelight:active,
.scrollbar slider:prelight:active {
scrollbar slider:prelight:active {
background-color: #000; }
scrollbar slider.fine-tune,
.scrollbar slider.fine-tune {
scrollbar slider.fine-tune {
border-width: 8px; }
scrollbar slider.fine-tune:prelight:active,
.scrollbar slider.fine-tune:prelight:active {
scrollbar slider.fine-tune:prelight:active {
background-color: #000; }
scrollbar.overlay-indicator:not(.dragging):not(.hovering),
.scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
opacity: 0.4;
border-style: none;
background-color: transparent;
-GtkRange-slider-width: 5px; }
scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider,
.scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
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).vertical slider,
.scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
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,
.scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
margin-left: 2px;
margin-right: 2px; }
scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering,
.scrollbar.overlay-indicator.dragging,
.scrollbar.overlay-indicator.hovering {
scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering {
opacity: 0.7; }
/**********
@ -1812,35 +1798,24 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
* GtkScale *
************/
scale,
.scale,
.scale.scale-has-marks-above.scale-has-marks-below,
.scale.vertical.scale-has-marks-above.scale-has-marks-below {
-GtkScale-slider-length: 20;
-GtkRange-slider-width: 20;
-GtkRange-trough-border: 2;
outline-offset: -9px;
outline-radius: 4px;
margin: 10px;
border-width: 1px;
border-style: solid;
border-radius: 3px;
border-color: gray;
background-color: #cccccc;
box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1); }
outline-radius: 4px; }
scale.fine-tune,
.scale.fine-tune,
.scale.scale-has-marks-above.scale-has-marks-below.fine-tune,
.scale.vertical.scale-has-marks-above.scale-has-marks-below.fine-tune {
outline-offset: -7px;
outline-radius: 6px; }
scale.fine-tune.trough,
.scale.fine-tune.trough,
.scale.scale-has-marks-above.scale-has-marks-below.fine-tune.trough,
.scale.vertical.scale-has-marks-above.scale-has-marks-below.fine-tune.trough {
scale.fine-tune trough,
.scale.scale-has-marks-above.scale-has-marks-below.fine-tune trough,
.scale.vertical.scale-has-marks-above.scale-has-marks-below.fine-tune trough {
border-radius: 4px;
margin: 8px; }
scale slider,
.scale slider,
.scale.scale-has-marks-above.scale-has-marks-below slider,
.scale.vertical.scale-has-marks-above.scale-has-marks-below slider {
border-width: 2px;
@ -1852,7 +1827,6 @@ scale,
border-radius: 50%;
border-color: #787878; }
scale slider:hover,
.scale slider:hover,
.scale.scale-has-marks-above.scale-has-marks-below slider:hover,
.scale.vertical.scale-has-marks-above.scale-has-marks-below slider:hover {
border-width: 2px;
@ -1864,7 +1838,6 @@ scale,
border-color: #787878;
border-radius: 50%; }
scale slider:insensitive,
.scale slider:insensitive,
.scale.scale-has-marks-above.scale-has-marks-below slider:insensitive,
.scale.vertical.scale-has-marks-above.scale-has-marks-below slider:insensitive {
border-style: solid;
@ -1872,7 +1845,6 @@ scale,
background-image: none;
box-shadow: none; }
scale slider:backdrop,
.scale slider:backdrop,
.scale.scale-has-marks-above.scale-has-marks-below slider:backdrop,
.scale.vertical.scale-has-marks-above.scale-has-marks-below slider:backdrop {
border-style: solid;
@ -1881,7 +1853,6 @@ scale,
background-image: none;
box-shadow: none; }
scale slider:backdrop:insensitive,
.scale slider:backdrop:insensitive,
.scale.scale-has-marks-above.scale-has-marks-below slider:backdrop:insensitive,
.scale.vertical.scale-has-marks-above.scale-has-marks-below slider:backdrop:insensitive {
border-width: 2px;
@ -1891,48 +1862,50 @@ scale,
border-color: #8d8d8d;
background-image: none; }
scale slider:active,
.scale slider:active,
.scale.scale-has-marks-above.scale-has-marks-below slider:active,
.scale.vertical.scale-has-marks-above.scale-has-marks-below slider:active {
border: 1px solid black; }
scale.highlight,
.scale.highlight,
.scale.scale-has-marks-above.scale-has-marks-below.highlight,
.scale.vertical.scale-has-marks-above.scale-has-marks-below.highlight {
border-color: #000;
background-color: #000; }
scale.highlight:backdrop,
.scale.highlight:backdrop,
.scale.scale-has-marks-above.scale-has-marks-below.highlight:backdrop,
.scale.vertical.scale-has-marks-above.scale-has-marks-below.highlight:backdrop {
scale trough,
.scale.scale-has-marks-above.scale-has-marks-below trough,
.scale.vertical.scale-has-marks-above.scale-has-marks-below trough {
margin: 10px;
border-width: 1px;
border-style: solid;
border-radius: 3px;
border-color: gray;
background-color: #cccccc;
box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1); }
scale trough.highlight,
.scale.scale-has-marks-above.scale-has-marks-below trough.highlight,
.scale.vertical.scale-has-marks-above.scale-has-marks-below trough.highlight {
border-color: #000;
background-color: #000; }
scale trough.highlight:backdrop,
.scale.scale-has-marks-above.scale-has-marks-below trough.highlight:backdrop,
.scale.vertical.scale-has-marks-above.scale-has-marks-below trough.highlight:backdrop {
border-color: gray;
background-color: gray;
box-shadow: none; }
scale trough:insensitive, scale trough.hilight:insensitive,
.scale.scale-has-marks-above.scale-has-marks-below trough:insensitive,
.scale.scale-has-marks-above.scale-has-marks-below trough.hilight:insensitive,
.scale.vertical.scale-has-marks-above.scale-has-marks-below trough:insensitive,
.scale.vertical.scale-has-marks-above.scale-has-marks-below trough.hilight:insensitive {
border-color: gray;
background-color: gray;
background-color: white; }
scale trough:backdrop,
.scale.scale-has-marks-above.scale-has-marks-below trough:backdrop,
.scale.vertical.scale-has-marks-above.scale-has-marks-below trough:backdrop {
border-color: #8d8d8d;
background-color: silver;
box-shadow: none; }
scale:insensitive, scale.hilight:insensitive,
.scale:insensitive,
.scale.hilight:insensitive,
.scale.scale-has-marks-above.scale-has-marks-below:insensitive,
.scale.scale-has-marks-above.scale-has-marks-below.hilight:insensitive,
.scale.vertical.scale-has-marks-above.scale-has-marks-below:insensitive,
.scale.vertical.scale-has-marks-above.scale-has-marks-below.hilight:insensitive {
border-color: gray;
background-color: white; }
scale:backdrop,
.scale:backdrop,
.scale.scale-has-marks-above.scale-has-marks-below:backdrop,
.scale.vertical.scale-has-marks-above.scale-has-marks-below:backdrop {
border-color: #8d8d8d;
background-color: silver;
box-shadow: none; }
scale:backdrop:insensitive, scale .hilight:backdrop:insensitive,
.scale:backdrop:insensitive,
.scale .hilight:backdrop:insensitive,
.scale.scale-has-marks-above.scale-has-marks-below:backdrop:insensitive,
.scale.scale-has-marks-above.scale-has-marks-below .hilight:backdrop:insensitive,
.scale.vertical.scale-has-marks-above.scale-has-marks-below:backdrop:insensitive,
.scale.vertical.scale-has-marks-above.scale-has-marks-below .hilight:backdrop:insensitive {
border-color: gray;
background-color: #fff; }
scale trough:backdrop:insensitive, scale trough .hilight:backdrop:insensitive,
.scale.scale-has-marks-above.scale-has-marks-below trough:backdrop:insensitive,
.scale.scale-has-marks-above.scale-has-marks-below trough .hilight:backdrop:insensitive,
.scale.vertical.scale-has-marks-above.scale-has-marks-below trough:backdrop:insensitive,
.scale.vertical.scale-has-marks-above.scale-has-marks-below trough .hilight:backdrop:insensitive {
border-color: gray;
background-color: #fff; }
/*****************
* Progress bars *
@ -2184,12 +2157,10 @@ scrolledwindow undershoot.right {
background-position: right center;
border: none;
box-shadow: none; }
scrolledwindow junction, scrolledwindow scrollbar,
scrolledwindow .scrollbar {
scrolledwindow junction, scrolledwindow scrollbar trough, scrollbar scrolledwindow trough {
border-color: transparent;
background-color: #f2f2f2; }
scrolledwindow junction:backdrop, scrolledwindow scrollbar:backdrop,
scrolledwindow .scrollbar:backdrop {
scrolledwindow junction:backdrop, scrolledwindow scrollbar trough:backdrop, scrollbar scrolledwindow trough:backdrop {
background-color: transparent; }
separator, GtkPlacesSidebar.sidebar .view separator,