[gtk+] Adwaita: flatten entries and similar widgets

From: Lapo Calamandrei <lapo src gnome org>
To: commits-list gnome org
Cc:
Subject: [gtk+] Adwaita: flatten entries and similar widgets
Date: Sat, 16 Apr 2016 11:44:15 +0000 (UTC)

commit b744c07b447f2c5d84bc86dd1d01fbbca7dc044f
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Sat Apr 16 13:35:48 2016 +0200

    Adwaita: flatten entries and similar widgets

 gtk/theme/Adwaita/_common.scss           |   10 +++-------
 gtk/theme/Adwaita/_drawing.scss          |   25 ++++++++-----------------
 gtk/theme/Adwaita/gtk-contained-dark.css |   28 +++++++++++++---------------
 gtk/theme/Adwaita/gtk-contained.css      |   28 +++++++++++++---------------
 4 files changed, 37 insertions(+), 54 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 9c2fd75..6c8bdc6 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -294,7 +294,7 @@ entry {
       &:focus, & {
         min-height: 0;
         padding: 2px;
-        background-image: none;
+        background-color: transparent;
         border-color: transparent;
         border-radius: 0;
       }
@@ -387,19 +387,15 @@ entry {
     &:not(:disabled) + entry:not(:disabled),
     &:not(:disabled) + %entry:not(:disabled) {
       border-top-color: mix($borders_color, $base_color, 30%);
-      background-image: linear-gradient(to bottom, $base_color);
 
-      &:backdrop {
-        border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
-        background-image: linear-gradient(to bottom, $backdrop_base_color);
-      }
+      &:backdrop { border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); }
     }
 
     // brighter border between linked insensitive entries
     &:disabled + %entry:disabled,
     &:disabled + entry:disabled { border-top-color: mix($borders_color, $base_color, 30%); }
 
-    // color back the top border of a linked focused entry following another entry and add back the focus 
shadow.
+    // color back the top border of a linked focused entry following another entry.
     // :not(:only-child) is a specificity bump hack.
     + %entry:focus:not(:only-child),
     + entry:focus:not(:only-child) { border-top-color: entry_focus_border(); }
diff --git a/gtk/theme/Adwaita/_drawing.scss b/gtk/theme/Adwaita/_drawing.scss
index 49bdd43..4d20372 100644
--- a/gtk/theme/Adwaita/_drawing.scss
+++ b/gtk/theme/Adwaita/_drawing.scss
@@ -29,15 +29,6 @@
   @return inset 0 0 0 1px $fc;
 }
 
- function entry_gradient($c) {
-  @if $variant=='light' { @return linear-gradient(to bottom, mix($borders_color, $c, 45%),
-                                                             mix($borders_color, $c, 3%) 2px,
-                                                             $c 90%); }
-  @else { @return linear-gradient(to bottom, mix($borders_color, $c, 95%),
-                                             mix($borders_color, $c, 40%) 3px,
-                                             $c 90%); }
-}
-
 @mixin entry($t, $fc:$selected_bg_color, $edge: none) {
 //
 // Entries drawing function
@@ -57,7 +48,7 @@
   @if $t==normal {
     color: $text_color;
     border-color: $borders_color;
-    background-image: entry_gradient($base_color);
+    background-color: $base_color;
     @include _shadows(entry_focus_shadow(transparentize($fc, 1)), $_entry_edge);
     // for the transition to work the number of shadows in different states needs to match, hence the 
transparent shadow here.
   }
@@ -68,25 +59,25 @@
   @if $t==insensitive {
     color: $insensitive_fg_color;
     border-color: $borders_color;
-    background-image: linear-gradient(to bottom, $insensitive_bg_color);
+    background-color: $insensitive_bg_color;
     box-shadow: $_entry_edge;
   }
   @if $t==backdrop {
     color: $backdrop_text_color;
     border-color: $backdrop_borders_color;
-    background-image: linear-gradient(to bottom, $backdrop_base_color);
+    background-color: $backdrop_base_color;
     box-shadow: $_blank_edge;
   }
   @if $t==backdrop-insensitive {
     color: $backdrop_insensitive_color;
     border-color: $backdrop_borders_color;
-    background-image: linear-gradient(to bottom, $insensitive_bg_color);
+    background-color: $insensitive_bg_color;
     box-shadow: $_blank_edge;
   }
   @if $t==osd {
     color: $osd_text_color;
     border-color: $osd_borders_color;
-    background-image: linear-gradient(to bottom, transparentize(opacify($osd_borders_color, 1), 0.5));
+    background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
     background-clip: padding-box;
     box-shadow: none;
     text-shadow: 0 1px black;
@@ -95,7 +86,7 @@
   @if $t==osd-focus {
     color: $osd_text_color;
     border-color: $selected_bg_color;
-    background-image: linear-gradient(to bottom, transparentize(opacify($osd_borders_color, 1), 0.5));
+    background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
     background-clip: padding-box;
     box-shadow: entry_focus_shadow($fc);
     text-shadow: 0 1px black;
@@ -104,7 +95,7 @@
   @if $t==osd-insensitive {
     color: $osd_insensitive_fg_color;
     border-color: $osd_borders_color;
-    background-image: linear-gradient(to bottom, $osd_insensitive_bg_color);
+    background-color: $osd_insensitive_bg_color;
     background-clip: padding-box;
     box-shadow: none;
     text-shadow: none;
@@ -113,7 +104,7 @@
   @if $t==osd-backdrop {
     color: $osd_text_color;
     border-color: $osd_borders_color;
-    background-image: linear-gradient(to bottom, transparentize(opacify($osd_borders_color, 1), 0.5));
+    background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
     background-clip: padding-box;
     box-shadow: none;
     text-shadow: none;
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 79bc552..46f7f37 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -182,7 +182,7 @@ entry {
   transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
   color: white;
   border-color: #1c1f1f;
-  background-image: linear-gradient(to bottom, #1d2020, #242525 3px, #292929 90%);
+  background-color: #292929;
   box-shadow: inset 0 0 0 1px rgba(33, 93, 156, 0); }
   spinbutton:not(.vertical) image.left,
   entry image.left {
@@ -219,7 +219,7 @@ entry {
   entry.flat {
     min-height: 0;
     padding: 2px;
-    background-image: none;
+    background-color: transparent;
     border-color: transparent;
     border-radius: 0; }
   spinbutton:focus:not(.vertical),
@@ -230,20 +230,20 @@ entry {
   entry:disabled {
     color: #949796;
     border-color: #1c1f1f;
-    background-image: linear-gradient(to bottom, #333636);
+    background-color: #333636;
     box-shadow: none; }
   spinbutton:backdrop:not(.vertical),
   entry:backdrop {
     color: #d5d5d5;
     border-color: #1f2222;
-    background-image: linear-gradient(to bottom, #2c2c2c);
+    background-color: #2c2c2c;
     box-shadow: none;
     transition: 200ms ease-out; }
   spinbutton:backdrop:disabled:not(.vertical),
   entry:backdrop:disabled {
     color: #5d6767;
     border-color: #1f2222;
-    background-image: linear-gradient(to bottom, #333636);
+    background-color: #333636;
     box-shadow: none; }
   spinbutton.error:not(.vertical),
   entry.error {
@@ -290,7 +290,7 @@ entry {
   entry {
     color: white;
     border-color: rgba(0, 0, 0, 0.7);
-    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5));
+    background-color: rgba(0, 0, 0, 0.5);
     background-clip: padding-box;
     box-shadow: none;
     text-shadow: 0 1px black;
@@ -299,7 +299,7 @@ entry {
     entry:focus {
       color: white;
       border-color: #215d9c;
-      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5));
+      background-color: rgba(0, 0, 0, 0.5);
       background-clip: padding-box;
       box-shadow: inset 0 0 0 1px #215d9c;
       text-shadow: 0 1px black;
@@ -308,7 +308,7 @@ entry {
     entry:backdrop {
       color: white;
       border-color: rgba(0, 0, 0, 0.7);
-      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5));
+      background-color: rgba(0, 0, 0, 0.5);
       background-clip: padding-box;
       box-shadow: none;
       text-shadow: none;
@@ -317,7 +317,7 @@ entry {
     entry:disabled {
       color: #878a89;
       border-color: rgba(0, 0, 0, 0.7);
-      background-image: linear-gradient(to bottom, rgba(53, 57, 58, 0.5));
+      background-color: rgba(53, 57, 58, 0.5);
       background-clip: padding-box;
       box-shadow: none;
       text-shadow: none;
@@ -354,13 +354,11 @@ entry {
 .linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled), .linked.vertical > 
spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):not(.vertical), .linked.vertical >
 entry:not(:disabled) + entry:not(:disabled), .linked.vertical >
 entry:not(:disabled) + spinbutton:not(:disabled):not(.vertical) {
-  border-top-color: #252626;
-  background-image: linear-gradient(to bottom, #292929); }
+  border-top-color: #252626; }
   .linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled):backdrop, 
.linked.vertical > spinbutton:not(:disabled):not(.vertical) + 
spinbutton:not(:disabled):backdrop:not(.vertical), .linked.vertical >
   entry:not(:disabled) + entry:not(:disabled):backdrop, .linked.vertical >
   entry:not(:disabled) + spinbutton:not(:disabled):backdrop:not(.vertical) {
-    border-top-color: #282929;
-    background-image: linear-gradient(to bottom, #2c2c2c); }
+    border-top-color: #282929; }
 .linked.vertical > spinbutton:disabled:not(.vertical) + spinbutton:disabled:not(.vertical), .linked.vertical

spinbutton:disabled:not(.vertical) + entry:disabled, .linked.vertical >

 entry:disabled + spinbutton:disabled:not(.vertical), .linked.vertical >
 entry:disabled + entry:disabled {
@@ -3616,12 +3614,12 @@ levelbar trough {
   border-radius: 3px;
   color: white;
   border-color: #1c1f1f;
-  background-image: linear-gradient(to bottom, #1d2020, #242525 3px, #292929 90%);
+  background-color: #292929;
   box-shadow: inset 0 0 0 1px rgba(33, 93, 156, 0); }
   levelbar trough:backdrop {
     color: #d5d5d5;
     border-color: #1f2222;
-    background-image: linear-gradient(to bottom, #2c2c2c);
+    background-color: #2c2c2c;
     box-shadow: none; }
 levelbar.horizontal.discrete block {
   margin: 0 1px; }
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 483ee17..8705244 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -182,7 +182,7 @@ entry {
   transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
   color: black;
   border-color: #9d9d99;
-  background-image: linear-gradient(to bottom, #d3d3d1, #fcfcfc 2px, #ffffff 90%);
+  background-color: #ffffff;
   box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0); }
   spinbutton:not(.vertical) image.left,
   entry image.left {
@@ -219,7 +219,7 @@ entry {
   entry.flat {
     min-height: 0;
     padding: 2px;
-    background-image: none;
+    background-color: transparent;
     border-color: transparent;
     border-radius: 0; }
   spinbutton:focus:not(.vertical),
@@ -230,20 +230,20 @@ entry {
   entry:disabled {
     color: #8b8e8f;
     border-color: #9d9d99;
-    background-image: linear-gradient(to bottom, #f1f1f1);
+    background-color: #f1f1f1;
     box-shadow: none; }
   spinbutton:backdrop:not(.vertical),
   entry:backdrop {
     color: #323232;
     border-color: #a5a5a1;
-    background-image: linear-gradient(to bottom, #fcfcfc);
+    background-color: #fcfcfc;
     box-shadow: none;
     transition: 200ms ease-out; }
   spinbutton:backdrop:disabled:not(.vertical),
   entry:backdrop:disabled {
     color: #c3c3c0;
     border-color: #a5a5a1;
-    background-image: linear-gradient(to bottom, #f1f1f1);
+    background-color: #f1f1f1;
     box-shadow: none; }
   spinbutton.error:not(.vertical),
   entry.error {
@@ -290,7 +290,7 @@ entry {
   entry {
     color: white;
     border-color: rgba(0, 0, 0, 0.7);
-    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5));
+    background-color: rgba(0, 0, 0, 0.5);
     background-clip: padding-box;
     box-shadow: none;
     text-shadow: 0 1px black;
@@ -299,7 +299,7 @@ entry {
     entry:focus {
       color: white;
       border-color: #4a90d9;
-      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5));
+      background-color: rgba(0, 0, 0, 0.5);
       background-clip: padding-box;
       box-shadow: inset 0 0 0 1px #4a90d9;
       text-shadow: 0 1px black;
@@ -308,7 +308,7 @@ entry {
     entry:backdrop {
       color: white;
       border-color: rgba(0, 0, 0, 0.7);
-      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5));
+      background-color: rgba(0, 0, 0, 0.5);
       background-clip: padding-box;
       box-shadow: none;
       text-shadow: none;
@@ -317,7 +317,7 @@ entry {
     entry:disabled {
       color: #878a89;
       border-color: rgba(0, 0, 0, 0.7);
-      background-image: linear-gradient(to bottom, rgba(53, 57, 58, 0.5));
+      background-color: rgba(53, 57, 58, 0.5);
       background-clip: padding-box;
       box-shadow: none;
       text-shadow: none;
@@ -354,13 +354,11 @@ entry {
 .linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled), .linked.vertical > 
spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):not(.vertical), .linked.vertical >
 entry:not(:disabled) + entry:not(:disabled), .linked.vertical >
 entry:not(:disabled) + spinbutton:not(:disabled):not(.vertical) {
-  border-top-color: #e2e2e0;
-  background-image: linear-gradient(to bottom, #ffffff); }
+  border-top-color: #e2e2e0; }
   .linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled):backdrop, 
.linked.vertical > spinbutton:not(:disabled):not(.vertical) + 
spinbutton:not(:disabled):backdrop:not(.vertical), .linked.vertical >
   entry:not(:disabled) + entry:not(:disabled):backdrop, .linked.vertical >
   entry:not(:disabled) + spinbutton:not(:disabled):backdrop:not(.vertical) {
-    border-top-color: #e2e2e1;
-    background-image: linear-gradient(to bottom, #fcfcfc); }
+    border-top-color: #e2e2e1; }
 .linked.vertical > spinbutton:disabled:not(.vertical) + spinbutton:disabled:not(.vertical), .linked.vertical

spinbutton:disabled:not(.vertical) + entry:disabled, .linked.vertical >

 entry:disabled + spinbutton:disabled:not(.vertical), .linked.vertical >
 entry:disabled + entry:disabled {
@@ -3645,12 +3643,12 @@ levelbar trough {
   border-radius: 3px;
   color: black;
   border-color: #9d9d99;
-  background-image: linear-gradient(to bottom, #d3d3d1, #fcfcfc 2px, #ffffff 90%);
+  background-color: #ffffff;
   box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0); }
   levelbar trough:backdrop {
     color: #323232;
     border-color: #a5a5a1;
-    background-image: linear-gradient(to bottom, #fcfcfc);
+    background-color: #fcfcfc;
     box-shadow: none; }
 levelbar.horizontal.discrete block {
   margin: 0 1px; }

[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]