Adwaita: wide paned separator style

...paned separator decoration fixed in the process.

gtk/resources/theme/Adwaita/_common.scss

@@ -8,7 +8,6 @@ $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
   padding: 0;
   -GtkToolButton-icon-spacing: 4;
   -GtkTextView-error-underline-color: $error_color;
-  -GtkPaned-handle-size: 1;
 
   -GtkCheckButton-indicator-size: 16;
   -GtkCheckMenuItem-indicator-size: 16;
@@ -2749,24 +2748,40 @@ GtkPlacesSidebar.sidebar .view {
   }
 }
 
-GtkPaned {
+GtkPaned { // this is for the standard paned separator
-  // This is actually the invisible area of the paned separator, not a margin...
+
-  margin: 0 8px 8px 0; //drag area of the separator
+  -GtkPaned-handle-size: 1; // sets separator width
+
+  margin: 0 8px 8px 0; // drag area of the separator, not a real margin
   &:dir(rtl) {
     margin-right: 0;
     margin-left: 8px;
   }
-}
+  .pane-separator {
-
+    //FIXME abusing a background-image to get rid of the handle decoration
-.pane-separator {
+    //I'd like something better...
-  //FIXME abusing a background-image to get rid of the handle decoration
+    background-image: linear-gradient(to bottom, $borders_color);
-  //I'd like something better...
+    background-color: transparent; // transparent background color to gets rid of the decoration.
-  background-image: linear-gradient(to bottom, $borders_color);
+    &:backdrop {
-  &:backdrop {
+      background-image: linear-gradient(to bottom, $backdrop_borders_color);
-    background-image: linear-gradient(to bottom, $backdrop_borders_color);
+    }
   }
 }
 
+GtkPaned.wide { // this is for the paned with wide separator
+  -GtkPaned-handle-size: 5; // wider separator here
+  margin: 0; // no need of the invisible drag area so, reset margin
+  .pane-separator {
+    border-style: none solid;
+    border-color: $borders_color;
+    background-image: none;
+    border-width: 1px;
+  }
+  &.vertical .pane-separator { border-style: solid none;}
+  .pane-separator:backdrop { border-color: $backdrop_borders_color; }
+}
+
+
 /**************
  * GtkInfoBar *
  **************/

gtk/resources/theme/Adwaita/gtk-contained-dark.css

@@ -2,7 +2,6 @@
   padding: 0;
   -GtkToolButton-icon-spacing: 4;
   -GtkTextView-error-underline-color: #cc0000;
-  -GtkPaned-handle-size: 1;
   -GtkCheckButton-indicator-size: 16;
   -GtkCheckMenuItem-indicator-size: 16;
   -GtkScrolledWindow-scrollbar-spacing: 0;
@@ -4070,15 +4069,29 @@ GtkPlacesSidebar.sidebar .view {
     background-size: 6px 6px, 0 0; }
 
 GtkPaned {
+  -GtkPaned-handle-size: 1;
   margin: 0 8px 8px 0; }
   GtkPaned:dir(rtl) {
     margin-right: 0;
     margin-left: 8px; }
+  GtkPaned .pane-separator {
+    background-image: linear-gradient(to bottom, #1c1f1f);
+    background-color: transparent; }
+    GtkPaned .pane-separator:backdrop {
+      background-image: linear-gradient(to bottom, #1e2222); }
 
-.pane-separator {
+GtkPaned.wide {
-  background-image: linear-gradient(to bottom, #1c1f1f); }
+  -GtkPaned-handle-size: 5;
-  .pane-separator:backdrop {
+  margin: 0; }
-    background-image: linear-gradient(to bottom, #1e2222); }
+  GtkPaned.wide .pane-separator {
+    border-style: none solid;
+    border-color: #1c1f1f;
+    background-image: none;
+    border-width: 1px; }
+  GtkPaned.wide.vertical .pane-separator {
+    border-style: solid none; }
+  GtkPaned.wide .pane-separator:backdrop {
+    border-color: #1e2222; }
 
 /**************
  * GtkInfoBar *

gtk/resources/theme/Adwaita/gtk-contained.css

@@ -2,7 +2,6 @@
   padding: 0;
   -GtkToolButton-icon-spacing: 4;
   -GtkTextView-error-underline-color: #cc0000;
-  -GtkPaned-handle-size: 1;
   -GtkCheckButton-indicator-size: 16;
   -GtkCheckMenuItem-indicator-size: 16;
   -GtkScrolledWindow-scrollbar-spacing: 0;
@@ -4231,15 +4230,29 @@ GtkPlacesSidebar.sidebar .view {
     background-size: 6px 6px, 0 0; }
 
 GtkPaned {
+  -GtkPaned-handle-size: 1;
   margin: 0 8px 8px 0; }
   GtkPaned:dir(rtl) {
     margin-right: 0;
     margin-left: 8px; }
+  GtkPaned .pane-separator {
+    background-image: linear-gradient(to bottom, #a1a1a1);
+    background-color: transparent; }
+    GtkPaned .pane-separator:backdrop {
+      background-image: linear-gradient(to bottom, #a8a8a8); }
 
-.pane-separator {
+GtkPaned.wide {
-  background-image: linear-gradient(to bottom, #a1a1a1); }
+  -GtkPaned-handle-size: 5;
-  .pane-separator:backdrop {
+  margin: 0; }
-    background-image: linear-gradient(to bottom, #a8a8a8); }
+  GtkPaned.wide .pane-separator {
+    border-style: none solid;
+    border-color: #a1a1a1;
+    background-image: none;
+    border-width: 1px; }
+  GtkPaned.wide.vertical .pane-separator {
+    border-style: solid none; }
+  GtkPaned.wide .pane-separator:backdrop {
+    border-color: #a8a8a8; }
 
 /**************
  * GtkInfoBar *