[gtk+] HighContrast: Update range styling

[Matthias Clasen <matthiasc src gnome org>]

commit 9f3deaa496090c6725afa1672b416f7573945073
Author: Matthias Clasen <mclasen redhat com>
Date:   Thu Nov 5 00:29:14 2015 -0500

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

 gtk/theme/HighContrast/_common.scss |   87 +++++++++++----------
 gtk/theme/HighContrast/gtk.css      |  151 ++++++++++++++---------------------
 2 files changed, 107 insertions(+), 131 deletions(-)
---
diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index da38df0..dd1deca 100644
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -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;
+  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: $insensitive_fg_color;
-       background-color: $insensitive_fg_color;
-       box-shadow: none;
+      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; }
 }
 
 /*****************
diff --git a/gtk/theme/HighContrast/gtk.css b/gtk/theme/HighContrast/gtk.css
index d951eb1..5d08660 100644
--- a/gtk/theme/HighContrast/gtk.css
+++ b/gtk/theme/HighContrast/gtk.css
@@ -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,