[gtk/wip/baedert/gl-rework: 11/11] adwaita: Solve junction problem without border image

[Timm Bäder <baedert src gnome org>]

commit b0fbd352dc29d3b8ffcaf4fa434b55420fff18cc
Author: Timm Bäder <mail baedert org>
Date:   Sun Dec 22 11:40:30 2019 +0100

    adwaita: Solve junction problem without border image
    
    This genius piece of CSS colors only the top left (or top right in RTL)
    pixel of the scrollbar junction.
    Doing it this way is better because we don't have to upload a cairo node
    every frame.

 gtk/theme/Adwaita/_common.scss | 27 ++++++++++++++++++++-------
 1 file changed, 20 insertions(+), 7 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index eb8702ba18..dff70d90e4 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -3754,17 +3754,30 @@ scrolledwindow {
 
 
   junction { // the small square between two scrollbars
-    border-color: transparent;
-    // the border image is used to add the missing dot between the borders, details, details, details...
-    border-image: linear-gradient(to bottom, $borders_color 1px, transparent 1px) 0 0 0 1 / 0 1px stretch;
-    background-color: $scrollbar_bg_color;
+    // Only color the top-left (or top right in RTL) pixel, to visually connect
+    // the borders of the two scrollbars.
+
+    background: $borders_color,
+                linear-gradient(to bottom, transparent 1px, $scrollbar_bg_color 1px),
+                linear-gradient(to right, transparent 1px, $scrollbar_bg_color 1px);
 
-    &:dir(rtl) { border-image-slice: 0 1 0 0; }
+    &:dir(rtl) {
+      background: $borders_color,
+                  linear-gradient(to bottom, transparent 1px, $scrollbar_bg_color 1px),
+                  linear-gradient(to left, transparent 1px, $scrollbar_bg_color 1px);
+    }
 
     &:backdrop {
-      border-image-source: linear-gradient(to bottom, $backdrop_borders_color 1px, transparent 1px);
-      background-color: $backdrop_scrollbar_bg_color;
       transition: $backdrop_transition;
+      background: $backdrop_borders_color,
+                  linear-gradient(to bottom, transparent 1px, $backdrop_scrollbar_bg_color 1px),
+                  linear-gradient(to right, transparent 1px, $backdrop_scrollbar_bg_color 1px);
+
+      &:dir(rtl) {
+        background: $backdrop_borders_color,
+                    linear-gradient(to bottom, transparent 1px, $backdrop_scrollbar_bg_color 1px),
+                    linear-gradient(to left, transparent 1px, $backdrop_scrollbar_bg_color 1px);
+      }
     }
   }
 }