Adwaita: style textview border
authorLapo Calamandrei <calamandrei@gmail.com>
Sat, 2 Apr 2016 14:24:52 +0000 (16:24 +0200)
committerLapo Calamandrei <calamandrei@gmail.com>
Sat, 2 Apr 2016 14:24:52 +0000 (16:24 +0200)
see https://bugzilla.gnome.org/show_bug.cgi?id=764203

gtk/theme/Adwaita/_common.scss
gtk/theme/Adwaita/gtk-contained-dark.css
gtk/theme/Adwaita/gtk-contained.css

index a2b8fb584bf20d71986a71d639e80686d478c8d1..dfa259f4af451e1d4fb70c653f9025c3483ccb88 100644 (file)
@@ -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;
index b8a4cd627b764e9bcbe7682aa5042fe146c69740..4e99dce07788d72689933516b3e74c5e665e81f9 100644 (file)
@@ -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;
index 2283880a4ca19874705bc9ee945bc5750f2ef3c1..e24f28e494670f8a05287061f9a6dc8e010e4a53 100644 (file)
@@ -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;