Adwaita: style textview border

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

3 files changed, 71 insertions, 16 deletions

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 32dee8a326..7733d2e97b 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -121,6 +121,37 @@ textview {
   }
 }
 
+textview border {
+  background-color: mix($bg_color, $base_color, 50%);
+  background-image: image($bg_color); // HACK: the border node just draws background so, using a background-image to draw the border
+  background-repeat: no-repeat;
+
+  &:backdrop {
+    background-color: mix($backdrop_bg_color, $backdrop_base_color, 50%);
+    background-image: image($backdrop_bg_color);
+  }
+
+  &.bottom {
+    background-size: 100% 1px;
+    background-position: top;
+  }
+
+  &.top {
+    background-size: 100% 1px;
+    background-position: bottom;
+  }
+
+  &.left {
+    background-size: 1px 100%;
+    background-position: right;
+  }
+
+  &.right {
+    background-size: 1px 100%;
+    background-position: left;
+  }
+}
+
 iconview { @extend .view; }
 
 .rubberband,
@@ -199,12 +230,6 @@ assistant {
   .sidebar label.highlight { background-color: mix($bg_color, $fg_color, 80%); }
 }
 
-textview { // This will get overridden by .view, needed by gedit line numbers
-  background-color: mix($bg_color, $base_color, 50%);
-
-  &:backdrop { background-color: mix($backdrop_bg_color, $backdrop_base_color, 50%); }
-}
-
 %osd, .osd {
   color: $osd_fg_color;
   border: none;
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index c79f05f10a..0dbd69dea3 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -75,6 +75,26 @@ textview text {
   textview text:selected {
     border-radius: 3px; }
 
+textview border {
+  background-color: #313434;
+  background-image: image(#393f3f);
+  background-repeat: no-repeat; }
+  textview border:backdrop {
+    background-color: #333636;
+    background-image: image(#393f3f); }
+  textview border.bottom {
+    background-size: 100% 1px;
+    background-position: top; }
+  textview border.top {
+    background-size: 100% 1px;
+    background-position: bottom; }
+  textview border.left {
+    background-size: 1px 100%;
+    background-position: right; }
+  textview border.right {
+    background-size: 1px 100%;
+    background-position: left; }
+
 .rubberband,
 rubberband,
 flowbox rubberband,
@@ -121,11 +141,6 @@ assistant .sidebar label {
 assistant .sidebar label.highlight {
   background-color: #5d6262; }
 
-textview {
-  background-color: #313434; }
-  textview:backdrop {
-    background-color: #333636; }
-
 .csd popover.background.touch-selection, .csd popover.background.magnifier, popover.background.touch-selection, popover.background.magnifier, .csd popover.background.osd, popover.background.osd, .app-notification,
 .app-notification.frame, .osd .scale-popup, .osd {
   color: #eeeeec;
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 87e4f2159e..a221f235d2 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -75,6 +75,26 @@ textview text {
   textview text:selected {
     border-radius: 3px; }
 
+textview border {
+  background-color: #f4f4f3;
+  background-image: image(#e8e8e7);
+  background-repeat: no-repeat; }
+  textview border:backdrop {
+    background-color: #f2f2f2;
+    background-image: image(#e8e8e7); }
+  textview border.bottom {
+    background-size: 100% 1px;
+    background-position: top; }
+  textview border.top {
+    background-size: 100% 1px;
+    background-position: bottom; }
+  textview border.left {
+    background-size: 1px 100%;
+    background-position: right; }
+  textview border.right {
+    background-size: 1px 100%;
+    background-position: left; }
+
 .rubberband,
 rubberband,
 flowbox rubberband,
@@ -121,11 +141,6 @@ assistant .sidebar label {
 assistant .sidebar label.highlight {
   background-color: #c3c4c4; }
 
-textview {
-  background-color: #f4f4f3; }
-  textview:backdrop {
-    background-color: #f2f2f2; }
-
 .csd popover.background.touch-selection, .csd popover.background.magnifier, popover.background.touch-selection, popover.background.magnifier, .csd popover.background.osd, popover.background.osd, .app-notification,
 .app-notification.frame, .osd .scale-popup, .osd {
   color: #eeeeec;