HC: provide explicit treeview styling

deals with some details like:

- DND stuff
- progressbar
- expanders
- separators

https://bugzilla.gnome.org/show_bug.cgi?id=752975

gtk/theme/HighContrast/_common.scss

@@ -24,7 +24,6 @@ $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 
   -GtkToolItemGroup-expander-size: 11;
   -GtkExpander-expander-size: 16;
-  -GtkTreeView-expander-size: 11;
 
   -GtkTreeView-horizontal-separator: 4;
 
@@ -941,6 +940,95 @@ GtkComboBox {
 /**************
  * Tree Views *
  **************/
+GtkTreeView.view {
+  -GtkTreeView-grid-line-width: 1;
+  -GtkTreeView-grid-line-pattern: '';
+  -GtkTreeView-tree-line-width: 1;
+  -GtkTreeView-tree-line-pattern: '';
+  -GtkTreeView-expander-size: 16;
+
+  border-left-color: mix($fg_color, $base_color, 50%); // this is actually the tree lines color,
+  border-top-color: $bg_color;                         // while this is the grid lines color, better then nothing
+
+  &.rubberband { @extend .rubberband; } // to avoid borders being overridden by the previously set props
+
+  &:selected { border-radius: 0; } // rest border radius in lists
+
+  &:selected, &:backdrop:selected {
+    border-left-color: mix($selected_fg_color, $selected_bg_color, 50%);
+    border-top-color: transparentize($fg_color, 0.9); // doesn't work unfortunatelly
+  }
+
+  &:insensitive {
+    color: $insensitive_fg_color;
+    &:selected {
+      color: mix($selected_fg_color, $selected_bg_color, 40%);
+      &:backdrop { color: mix($selected_fg_color, $selected_bg_color, 50%); }
+    }
+    &:backdrop { color: insensitive_color; }
+  }
+
+  &.separator:backdrop {
+    color: transparentize(black, 0.9);
+  }
+
+  &:backdrop {
+    color: $backdrop_fg_color;
+    border-left-color: mix($backdrop_fg_color, $backdrop_bg_color, 50%);
+    border-top: $backdrop_bg_color;
+  }
+
+  &.dnd {
+    border-style: solid none;
+    border-width: 1px;
+    border-color: mix($fg_color, $selected_bg_color, 50%);
+  }
+
+  &.expander {
+    -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+    &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
+    color: mix($fg_color, $base_color, 70%);
+    &:hover { color: $fg_color; }
+    &:selected {
+      color: mix($selected_fg_color, $selected_bg_color, 70%);
+      &:hover { color: $selected_fg_color; }
+      &:backdrop { color: mix($selected_fg_color, $selected_bg_color, 70%); }
+    }
+
+    &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+
+    &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 70%); }
+  }
+
+  &.progressbar { // progress bar in treeviews
+    color: $base_color;
+
+    border: 1px solid $selected_borders_color;
+    border-radius: 4px;
+    background-color: $fg_color;
+
+    &:selected { color: $selected_bg_color; }
+      
+    &:backdrop {
+      color: $selected_bg_color;
+      border-color: $selected_borders_color; // otherwise it gets inherited by .view(?!?)  
+      background-color: $backdrop_base_color;
+    }
+  }
+  
+  &.trough { // progress bar trough in treeviews
+    background-color: transparentize($fg_color,0.9);
+    border-radius: 4px;
+
+    &:selected { 
+      background-color: transparentize($selected_fg_color, 0.7);
+      border-width: 1px 0;
+      border-style: solid;
+      border-color: $selected_bg_color;
+    }
+  }
+}
+
 column-header {
   .button {
     @extend %column_header_button;

gtk/theme/HighContrast/gtk.css

@@ -43,7 +43,6 @@
   -GtkScrolledWindow-scrollbars-within-bevel: 1;
   -GtkToolItemGroup-expander-size: 11;
   -GtkExpander-expander-size: 16;
-  -GtkTreeView-expander-size: 11;
   -GtkTreeView-horizontal-separator: 4;
   -GtkMenu-horizontal-padding: 0;
   -GtkMenu-vertical-padding: 0;
@@ -105,7 +104,7 @@
     color: #000;
     background-color: #fff; }
 
-.rubberband {
+.rubberband, GtkTreeView.view.rubberband {
   border: 1px solid #000;
   background-color: rgba(0, 0, 0, 0.2); }
 
@@ -1182,6 +1181,74 @@ GtkComboBox {
 /**************
  * Tree Views *
  **************/
+GtkTreeView.view {
+  -GtkTreeView-grid-line-width: 1;
+  -GtkTreeView-grid-line-pattern: '';
+  -GtkTreeView-tree-line-width: 1;
+  -GtkTreeView-tree-line-pattern: '';
+  -GtkTreeView-expander-size: 16;
+  border-left-color: #7f7f7f;
+  border-top-color: #fff; }
+  GtkTreeView.view:selected {
+    border-radius: 0; }
+  GtkTreeView.view:selected, GtkTreeView.view:backdrop:selected {
+    border-left-color: #7f7f7f;
+    border-top-color: rgba(0, 0, 0, 0.1); }
+  GtkTreeView.view:insensitive {
+    color: #7f7f7f; }
+    GtkTreeView.view:insensitive:selected {
+      color: #666666; }
+      GtkTreeView.view:insensitive:selected:backdrop {
+        color: #7f7f7f; }
+    GtkTreeView.view:insensitive:backdrop {
+      color: insensitive_color; }
+  GtkTreeView.view.separator:backdrop {
+    color: rgba(0, 0, 0, 0.1); }
+  GtkTreeView.view:backdrop {
+    color: #000;
+    border-left-color: #7f7f7f;
+    border-top: #fff; }
+  GtkTreeView.view.dnd {
+    border-style: solid none;
+    border-width: 1px;
+    border-color: black; }
+  GtkTreeView.view.expander {
+    -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
+    color: #4c4c4c; }
+    GtkTreeView.view.expander:dir(rtl) {
+      -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); }
+    GtkTreeView.view.expander:hover {
+      color: #000; }
+    GtkTreeView.view.expander:selected {
+      color: #b2b2b2; }
+      GtkTreeView.view.expander:selected:hover {
+        color: #fff; }
+      GtkTreeView.view.expander:selected:backdrop {
+        color: #b2b2b2; }
+    GtkTreeView.view.expander:checked {
+      -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
+    GtkTreeView.view.expander:backdrop {
+      color: #4c4c4c; }
+  GtkTreeView.view.progressbar {
+    color: #fff;
+    border: 1px solid #000;
+    border-radius: 4px;
+    background-color: #000; }
+    GtkTreeView.view.progressbar:selected {
+      color: #000; }
+    GtkTreeView.view.progressbar:backdrop {
+      color: #000;
+      border-color: #000;
+      background-color: #fff; }
+  GtkTreeView.view.trough {
+    background-color: rgba(0, 0, 0, 0.1);
+    border-radius: 4px; }
+    GtkTreeView.view.trough:selected {
+      background-color: rgba(255, 255, 255, 0.3);
+      border-width: 1px 0;
+      border-style: solid;
+      border-color: #000; }
+
 column-header .button {
   color: #7f7f7f;
   font-weight: bold;