[gtk+] HighContrast: Update range styling

[Matthias Clasen <matthiasc src gnome org>]

commit 8dfb0e728c5a939e5aacb16c3d596f110c7660dc
Author: Matthias Clasen <mclasen redhat com>
Date:   Tue Nov 3 23:16:45 2015 -0500

    HighContrast: Update range styling
    
    Adapt to changes in the previous commit.

 gtk/theme/HighContrast/_common.scss |   95 +++++++++----------
 gtk/theme/HighContrast/gtk.css      |  177 ++++++++++++++++++++---------------
 2 files changed, 149 insertions(+), 123 deletions(-)
---
diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index 833563e..59cf608 100644
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -1477,6 +1477,7 @@ notebook {
  * Scrollbars *
  **************/
 
+scrollbar,
 .scrollbar {
   background-clip: padding-box;
   background-image: none;
@@ -1491,14 +1492,14 @@ notebook {
 
   -GtkRange-stepper-spacing: 0;
   -GtkRange-trough-under-steppers: 1;
+  @extend .scrollbars-junction;
   $_slider_margin: 3px;
   $_slider_fine_tune_margin: 4px;
-  
-  .button {
+
+  button {
     border: none;
   }
-  &.trough { @extend .scrollbars-junction; }
-  &.slider {
+  & slider {
     border-radius: 20px;
     border: 5px solid transparent; //margin
     background-color: mix($bg_color, $fg_color, 50%);
@@ -1521,28 +1522,25 @@ notebook {
   &.overlay-indicator {
     &:not(.dragging):not(.hovering) { // Overlay scrolling indicator
       opacity: 0.4;
+      border-style: none;
+      background-color: transparent;
 
       -GtkRange-slider-width: 5px;
 
-      .slider {
+      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 {
+      &.vertical slider {
         margin-top: $_slider_margin - 1px;
         margin-bottom: $_slider_margin - 1px;
       }
 
-      &.horizontal .slider {
+      &.horizontal slider {
         margin-left: $_slider_margin - 1px;
         margin-right: $_slider_margin - 1px;
       }
@@ -1678,6 +1676,7 @@ 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 {
@@ -1686,6 +1685,13 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
   -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;
@@ -1695,7 +1701,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
       margin: 8px;
     }
   }
-  &.slider {
+  & slider {
     //FIXME: better gradient on the slider and hover state
     @include button(normal, $edge: none);
     border-radius: 50%;
@@ -1723,56 +1729,47 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
       border: 1px solid darken($selected_borders_color,3%);
     }
   }
-  &.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;
-    }
+  &.highlight {
+    border-color: $selected_borders_color;
+    background-color: $selected_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;
+       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;
+  }
 }
 
 //FIXME: scale sliders
 
 %scale_marks_above_horz {
-  .trough { margin: 14px 10px 10px; }
-  &.fine-tune .trough { margin: 12px 8px 8px; }
+  margin: 14px 10px 10px;
+  &.fine-tune { margin: 12px 8px 8px; }
 }
 %scale_marks_below_horz {
-  .trough { margin: 10px 10px 14px; }
-  &.fine-tune .trough { margin: 8px 8px 12px; }
+  margin: 10px 10px 14px;
+  &.fine-tune { margin: 8px 8px 12px; }
 }
 %scale_marks_above_vert {
-  .trough { margin: 10px 10px 10px 14px; }
-  &.fine-tune .trough { margin: 8px 8px 8px 12px; }
+  margin: 10px 10px 10px 14px;
+  &.fine-tune { margin: 8px 8px 8px 12px; }
 }
 %scale_marks_below_vert {
-  .trough { margin: 10px 14px 10px 10px; }
-  &.fine-tune .trough { margin: 8px 12px 8px 8px; }
+  margin: 10px 14px 10px 10px;
+  &.fine-tune { margin: 8px 12px 8px 8px; }
 }
 
 /*****************
diff --git a/gtk/theme/HighContrast/gtk.css b/gtk/theme/HighContrast/gtk.css
index 1a34079..cf6c30f 100644
--- a/gtk/theme/HighContrast/gtk.css
+++ b/gtk/theme/HighContrast/gtk.css
@@ -1665,6 +1665,7 @@ notebook {
 /**************
  * Scrollbars *
  **************/
+scrollbar,
 .scrollbar {
   background-clip: padding-box;
   background-image: none;
@@ -1676,46 +1677,61 @@ notebook {
   -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) {
     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) .trough {
-      border-style: none;
-      background-color: transparent; }
-    .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).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; }
 
-.scrollbars-junction, .scrollbar.trough {
+.scrollbars-junction, scrollbar,
+.scrollbar {
   border-color: transparent;
   background-color: #f2f2f2; }
-  .scrollbars-junction:backdrop, .scrollbar.trough:backdrop {
+  .scrollbars-junction:backdrop, scrollbar:backdrop,
+  .scrollbar:backdrop {
     background-color: transparent; }
 
 /**********
@@ -1868,6 +1884,7 @@ 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 {
@@ -1875,20 +1892,30 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
   -GtkRange-slider-width: 20;
   -GtkRange-trough-border: 2;
   outline-offset: -9px;
-  outline-radius: 4px; }
+  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); }
+  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 {
       border-radius: 4px;
       margin: 8px; }
-  .scale.slider,
-  .scale.scale-has-marks-above.scale-has-marks-below.slider,
-  .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider {
+  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;
     border-style: solid;
     color: #000;
@@ -1897,9 +1924,10 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
     border-color: gray;
     border-radius: 50%;
     border-color: #787878; }
-    .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 {
+    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;
       border-style: solid;
       color: #000;
@@ -1908,75 +1936,76 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
       background-image: none;
       border-color: #787878;
       border-radius: 50%; }
-    .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 {
+    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;
       border-radius: 50%;
       background-image: none;
       box-shadow: none; }
-    .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 {
+    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;
       border-radius: 50%;
       border-color: #858585;
       background-image: none;
       box-shadow: none; }
-    .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 {
+    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;
       border-style: solid;
       color: gray;
       background-color: white;
       border-color: #8d8d8d;
       background-image: none; }
-    .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 {
+    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.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 {
+  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 {
       border-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;
+      background-color: gray;
       box-shadow: none; }
-    .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; }
+  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; }
 
 /*****************
  * Progress bars *