[gtk+] Adwaita: fix thin paned separators

[Lapo Calamandrei <lapo src gnome org>]

commit f09483bb98603a66aa25a75c549b54167245c038
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Sat Jan 9 12:31:41 2016 +0100

    Adwaita: fix thin paned separators

 gtk/theme/Adwaita/_common.scss           |   31 ++++++++++++++++++++---------
 gtk/theme/Adwaita/gtk-contained-dark.css |   31 +++++++++++++++++++----------
 gtk/theme/Adwaita/gtk-contained.css      |   31 +++++++++++++++++++----------
 3 files changed, 61 insertions(+), 32 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 063c8d9..b2969d7 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -3056,23 +3056,34 @@ paned {
   > separator {
     min-width: 1px;
     min-height: 1px;
-    background-color: $borders_color;
-    &:backdrop { background-color: $backdrop_borders_color; }
-    &:selected { background-color: $selected_bg_color; }
-  }
-  &:dir(ltr).horizontal > separator {
-    margin: 0 -8px 0 0;
-    padding: 0 8px 0 0;
+    -gtk-icon-source: none; // defeats the ugly default handle decoration
+    background-color: transparent;
+    background-image: linear-gradient(to top, $borders_color);
+    background-size: 1px 1px;
+    &:selected { background-image: linear-gradient(to top, $selected_bg_color); }
+    &:backdrop { background-image: linear-gradient(to top, $backdrop_borders_color); }
   }
-  &:dir(rtl).horizontal > separator {
-    margin: 0 0 0 -8px;
-    padding: 0 0 0 8px;
+  &.horizontal > separator {
+    background-repeat: repeat-y;
+    &:dir(ltr) {
+      margin: 0 -8px 0 0;
+      padding: 0 8px 0 0;
+      background-position: left;
+    }
+    &:dir(rtl) {
+      margin: 0 0 0 -8px;
+      padding: 0 0 0 8px;
+      background-position: right;
+    }
   }
   &.vertical > separator {
     margin: 0 0 -8px 0;
     padding: 0 0 8px 0;
+    background-repeat: repeat-x;
+    background-position: top;
   }
   > separator.wide {
+    // FIXME: I don't understand this clearly
     min-width: 5px;
     min-height: 5px;
     background-color: transparent;
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 00d9ae0..57b91c9 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -4196,20 +4196,29 @@ placesview row.activatable:hover {
 paned > separator {
   min-width: 1px;
   min-height: 1px;
-  background-color: #1c1f1f; }
-  paned > separator:backdrop {
-    background-color: #1f2222; }
+  -gtk-icon-source: none;
+  background-color: transparent;
+  background-image: linear-gradient(to top, #1c1f1f);
+  background-size: 1px 1px; }
   paned > separator:selected {
-    background-color: #215d9c; }
-paned:dir(ltr).horizontal > separator {
-  margin: 0 -8px 0 0;
-  padding: 0 8px 0 0; }
-paned:dir(rtl).horizontal > separator {
-  margin: 0 0 0 -8px;
-  padding: 0 0 0 8px; }
+    background-image: linear-gradient(to top, #215d9c); }
+  paned > separator:backdrop {
+    background-image: linear-gradient(to top, #1f2222); }
+paned.horizontal > separator {
+  background-repeat: repeat-y; }
+  paned.horizontal > separator:dir(ltr) {
+    margin: 0 -8px 0 0;
+    padding: 0 8px 0 0;
+    background-position: left; }
+  paned.horizontal > separator:dir(rtl) {
+    margin: 0 0 0 -8px;
+    padding: 0 0 0 8px;
+    background-position: right; }
 paned.vertical > separator {
   margin: 0 0 -8px 0;
-  padding: 0 0 8px 0; }
+  padding: 0 0 8px 0;
+  background-repeat: repeat-x;
+  background-position: top; }
 paned > separator.wide {
   min-width: 5px;
   min-height: 5px;
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index a41168e..8ff444d 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -4372,20 +4372,29 @@ placesview row.activatable:hover {
 paned > separator {
   min-width: 1px;
   min-height: 1px;
-  background-color: #9d9d99; }
-  paned > separator:backdrop {
-    background-color: #a5a5a1; }
+  -gtk-icon-source: none;
+  background-color: transparent;
+  background-image: linear-gradient(to top, #9d9d99);
+  background-size: 1px 1px; }
   paned > separator:selected {
-    background-color: #4a90d9; }
-paned:dir(ltr).horizontal > separator {
-  margin: 0 -8px 0 0;
-  padding: 0 8px 0 0; }
-paned:dir(rtl).horizontal > separator {
-  margin: 0 0 0 -8px;
-  padding: 0 0 0 8px; }
+    background-image: linear-gradient(to top, #4a90d9); }
+  paned > separator:backdrop {
+    background-image: linear-gradient(to top, #a5a5a1); }
+paned.horizontal > separator {
+  background-repeat: repeat-y; }
+  paned.horizontal > separator:dir(ltr) {
+    margin: 0 -8px 0 0;
+    padding: 0 8px 0 0;
+    background-position: left; }
+  paned.horizontal > separator:dir(rtl) {
+    margin: 0 0 0 -8px;
+    padding: 0 0 0 8px;
+    background-position: right; }
 paned.vertical > separator {
   margin: 0 0 -8px 0;
-  padding: 0 0 8px 0; }
+  padding: 0 0 8px 0;
+  background-repeat: repeat-x;
+  background-position: top; }
 paned > separator.wide {
   min-width: 5px;
   min-height: 5px;