[libadwaita/wip/exalm/treeviews: 5/5] stylesheet: Refresh treeview and columnview headers

[Alexander Mikhaylenko <alexm src gnome org>]

commit 0b4d8ebf77c7be005888d565065165e728c0341d
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Thu Dec 2 00:27:27 2021 +0500

    stylesheet: Refresh treeview and columnview headers

 src/stylesheet/widgets/_trees.scss | 75 +++++++++++++++++++++-----------------
 1 file changed, 41 insertions(+), 34 deletions(-)
---
diff --git a/src/stylesheet/widgets/_trees.scss b/src/stylesheet/widgets/_trees.scss
index 529d65b3..e1906c2a 100644
--- a/src/stylesheet/widgets/_trees.scss
+++ b/src/stylesheet/widgets/_trees.scss
@@ -69,24 +69,26 @@ treeview.view {
   > header {
     > button {
       @extend %undecorated_button;
-      padding: 0 6px;
-      border: 0px solid $border_color;
-      border-bottom-width: 1px;
+      padding-top: 3px;
+      padding-bottom: 3px;
       border-radius: 0;
       box-shadow: none;
+      line-height: 100%;
 
       > box {
         color: gtkalpha(currentColor, if($contrast == 'high', .6, .4));
-        font-weight: bold;
+        font-weight: 700;
+        font-size: 9pt;
+        border-spacing: 6px;
+      }
 
-        &:hover {
-          color: gtkalpha(currentColor, if($contrast == 'high', .9, .7));
-          box-shadow: none;
-        }
+      &:hover > box {
+        color: gtkalpha(currentColor, if($contrast == 'high', .9, .7));
+        box-shadow: none;
+      }
 
-        &:active {
-          color: currentColor;
-        }
+      &:active > box {
+        color: currentColor;
       }
 
       sort-indicator {
@@ -106,13 +108,8 @@ treeview.view {
   button.dnd,
   header.button.dnd { // for treeview-like derive widgets
     &:active, &:selected, &:hover, & {
-      padding: 0 6px;
-      color: $view_bg_color;
-      background-image: none;
+      color: $accent_fg_color;
       background-color: $accent_bg_color;
-      border-style: none;
-      border-radius: 0;
-      box-shadow: inset 0 0 0 1px $view_bg_color;
       transition: none;
     }
   }
@@ -123,22 +120,10 @@ treeview.view {
   }
 }
 
-// Buttons slightly differ between treeviews and columnviews
 treeview.view > header > button {
-  border-right-width: 1px;
-
-  &:last-child:dir(ltr),
-  &:first-child:dir(rtl) {
-    border-right-width: 0;
-  }
-}
-
-columnview.view > header > button {
-  border-left-width: 1px;
-
-  &:first-child {
-    border-left-width: 0;
-  }
+  padding-left: 4px;
+  padding-right: 4px;
+  border-bottom: 1px solid $border_color;
 }
 
 /********************************************************
@@ -162,9 +147,27 @@ columnview {
     }
   }
 
+  > header > button {
+    padding-left: 6px;
+    padding-right: 6px;
+    border-left: 1px solid transparent;
+
+    &:first-child {
+      border-left-width: 0;
+    }
+  }
+
   // make column separators visible when :show-column-separators is true
-  &.column-separators > listview > row > cell {
-    border-left-color: $border_color;
+  &.column-separators {
+    > listview > row > cell,
+    > header > button {
+      border-left-color: $border_color;
+    }
+  }
+
+  > listview:not(.horizontal).separators > row:not(.separator) {
+    border-top: 1px solid $border_color;
+    border-bottom: none;
   }
 
   // shrink vertically for .data-table
@@ -172,6 +175,10 @@ columnview {
     padding-top: 2px;
     padding-bottom: 2px;
   }
+
+  ~ undershoot.top {
+    box-shadow: inset 0 1px $border_color;
+  }
 }
 
 columnview row:not(:selected) cell editablelabel:not(.editing):focus-within {