[gtk+] Adwaita: try to be nicer on performances with entry shadows



commit 09286cf96876a61f42dcef98385aeb277b2db7d2
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Thu Aug 21 14:41:29 2014 +0200

    Adwaita: try to be nicer on performances with entry shadows

 gtk/resources/theme/Adwaita/_drawing.scss          |   41 ++++++++++----------
 gtk/resources/theme/Adwaita/gtk-contained-dark.css |   26 ++++++------
 gtk/resources/theme/Adwaita/gtk-contained.css      |   26 ++++++------
 3 files changed, 47 insertions(+), 46 deletions(-)
---
diff --git a/gtk/resources/theme/Adwaita/_drawing.scss b/gtk/resources/theme/Adwaita/_drawing.scss
index e3ced72..1ed62cc 100644
--- a/gtk/resources/theme/Adwaita/_drawing.scss
+++ b/gtk/resources/theme/Adwaita/_drawing.scss
@@ -34,38 +34,38 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
   background-image: linear-gradient(to bottom,
                                     darken($base_color,3%),
                                     $base_color 90%);
-  // we need to match the same shadow types (inset/outset) in various states
-  // hence transparent shadows istead of resetting them when not needed
-  $_blank_inner_shadows: inset 0 2px 2px -2px
-                           transparentize(mix(black, $base_color, 50%),1),
-                         inset 0 0 2px 1px
-                           transparentize(mix($fc,$base_color,20%),1);
-
   $_blank_edge: if($noedge, none, 0 1px transparentize(white,1));
   $_entry_edge: if($noedge, none, $widget_edge);
+  $_inner_shadows: inset 0 3px mix(black, $base_color, 3%),
+                   inset 0 1px mix(black, $base_color, 18%);
+  @if $variant == 'dark' {
+    $_inner_shadows: inset 0 3px mix(black, $base_color, 20%),
+                     inset 0 1px mix(black, $base_color, 35%);
+  }
+
+  // we need to match the same shadow types (inset/outset) in various states
+  // hence transparent shadows istead of resetting them when not needed
+  $_blank_inner_shadows: inset 0 2px transparentize(mix(black, $base_color, 5%),1),
+                         inset 0 1px transparentize(mix(black, $base_color, 18%),1);
+  $_focus_glow_color: if($variant=='light', transparentize($fc,0.85),
+                                            transparentize($fc,0.3));
 
   @if $t==normal {
     border-color: $borders_color;
-    @include _shadows(inset 0 2px 2px -2px mix(black, $base_color, 50%),
-                      inset 0 0 2px 1px
-                        transparentize(mix($fc,$base_color, 20%),1),
+    @include _shadows($_inner_shadows,
+                      inset 0 0 0 1px transparentize($fc,1),
                       $_entry_edge);
     // the second transparent shadow is needed for the transition to work
   }
   @if $t==focus {
-    @if $variant == 'light' {
-      border-color: $fc;
-      @include _shadows(inset 0 2px 2px -2px mix(black, $base_color, 50%),
-                        inset 0 0 2px 1px mix($fc,$base_color, 20%),
-                        $_entry_edge);
-    }
+    @include _shadows($_inner_shadows,
+                      inset 0 0 0 1px $_focus_glow_color,
+                      $_entry_edge);
+    @if $variant == 'light' { border-color: $fc; }
     @else {
       border-color: if($fc==$selected_bg_color,
                        $selected_borders_color,
                        darken($fc,35%));
-      @include _shadows(inset 0 2px 2px -2px mix(black, $base_color, 50%),
-                        inset 0 0 1px 1px $fc,
-                        $_entry_edge);
     }
   }
   @if $t==insensitive {
@@ -91,7 +91,8 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
 
 // buttons
 
- function _border_color ($c) { @return darken($c,25%); } // colored buttons want the border form the base 
color
+ function _border_color ($c) { @return darken($c,25%); } // colored buttons want the
+                                                         // border form the base color
 
 @function _text_shadow_color ($tc:$fg_color, $bg:$bg_color) {
 //
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css 
b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index f175c17..4a81df2 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -150,7 +150,7 @@
   border-width: 1px;
   background-image: linear-gradient(to bottom, #212121, #292929 90%);
   border-color: #1c1f1f;
-  box-shadow: inset 0 2px 2px -2px #141414, inset 0 0 2px 1px rgba(39, 51, 64, 0), 0 1px rgba(238, 238, 236, 
0.1); }
+  box-shadow: inset 0 3px #202020, inset 0 1px #1a1a1a, inset 0 0 0 1px rgba(33, 93, 156, 0), 0 1px 
rgba(238, 238, 236, 0.1); }
   .entry.image.left {
     padding-left: 0; }
   .entry.image.right {
@@ -162,7 +162,7 @@
     border-width: 1px;
     background-image: linear-gradient(to bottom, #212121, #292929 90%);
     border-color: #1c1f1f;
-    box-shadow: inset 0 2px 2px -2px #141414, inset 0 0 2px 1px rgba(39, 51, 64, 0);
+    box-shadow: inset 0 3px #202020, inset 0 1px #1a1a1a, inset 0 0 0 1px rgba(33, 93, 156, 0);
     border: none;
     border-radius: 0; }
   .entry:focus {
@@ -170,8 +170,8 @@
     border-style: solid;
     border-width: 1px;
     background-image: linear-gradient(to bottom, #212121, #292929 90%);
-    border-color: #0f2b48;
-    box-shadow: inset 0 2px 2px -2px #141414, inset 0 0 1px 1px #215d9c, 0 1px rgba(238, 238, 236, 0.1); }
+    box-shadow: inset 0 3px #202020, inset 0 1px #1a1a1a, inset 0 0 0 1px rgba(33, 93, 156, 0.7), 0 1px 
rgba(238, 238, 236, 0.1);
+    border-color: #0f2b48; }
   .entry:insensitive {
     background-color: transparent;
     border-style: solid;
@@ -180,7 +180,7 @@
     color: #939695;
     border-color: #1c1f1f;
     background-image: linear-gradient(to bottom, #323636);
-    box-shadow: inset 0 2px 2px -2px rgba(20, 20, 20, 0), inset 0 0 2px 1px rgba(39, 51, 64, 0), 0 1px 
rgba(238, 238, 236, 0.1); }
+    box-shadow: inset 0 2px rgba(38, 38, 38, 0), inset 0 1px rgba(33, 33, 33, 0), 0 1px rgba(238, 238, 236, 
0.1); }
   .entry:backdrop {
     background-color: transparent;
     border-style: solid;
@@ -189,7 +189,7 @@
     color: #c9cbc9;
     border-color: #1e2222;
     background-image: linear-gradient(to bottom, #2c2c2c);
-    box-shadow: inset 0 2px 2px -2px rgba(20, 20, 20, 0), inset 0 0 2px 1px rgba(39, 51, 64, 0), 0 1px 
rgba(255, 255, 255, 0); }
+    box-shadow: inset 0 2px rgba(38, 38, 38, 0), inset 0 1px rgba(33, 33, 33, 0), 0 1px rgba(255, 255, 255, 
0); }
   .entry:backdrop:insensitive {
     background-color: transparent;
     border-style: solid;
@@ -198,7 +198,7 @@
     color: #5d6767;
     border-color: #1e2222;
     background-image: linear-gradient(to bottom, #323636);
-    box-shadow: inset 0 2px 2px -2px rgba(20, 20, 20, 0), inset 0 0 2px 1px rgba(39, 51, 64, 0), 0 1px 
rgba(255, 255, 255, 0); }
+    box-shadow: inset 0 2px rgba(38, 38, 38, 0), inset 0 1px rgba(33, 33, 33, 0), 0 1px rgba(255, 255, 255, 
0); }
   .entry:selected, .entry:backdrop:selected {
     background-color: #215d9c;
     color: white; }
@@ -232,8 +232,8 @@
       border-style: solid;
       border-width: 1px;
       background-image: linear-gradient(to bottom, #212121, #292929 90%);
-      border-color: #1a0000;
-      box-shadow: inset 0 2px 2px -2px #141414, inset 0 0 1px 1px #cc0000, 0 1px rgba(238, 238, 236, 0.1); }
+      box-shadow: inset 0 3px #202020, inset 0 1px #1a1a1a, inset 0 0 0 1px rgba(204, 0, 0, 0.7), 0 1px 
rgba(238, 238, 236, 0.1);
+      border-color: #1a0000; }
     .entry.error:selected, .entry.error:selected:focus {
       background-color: #cc0000; }
     .entry.error:selected:focus {
@@ -248,8 +248,8 @@
       border-style: solid;
       border-width: 1px;
       background-image: linear-gradient(to bottom, #212121, #292929 90%);
-      border-color: #432100;
-      box-shadow: inset 0 2px 2px -2px #141414, inset 0 0 1px 1px #f57900, 0 1px rgba(238, 238, 236, 0.1); }
+      box-shadow: inset 0 3px #202020, inset 0 1px #1a1a1a, inset 0 0 0 1px rgba(245, 121, 0, 0.7), 0 1px 
rgba(238, 238, 236, 0.1);
+      border-color: #432100; }
     .entry.warning:selected, .entry.warning:selected:focus {
       background-color: #f57900; }
     .entry.warning:selected:focus {
@@ -2459,7 +2459,7 @@ GtkLevelBar.vertical {
   border-width: 1px;
   background-image: linear-gradient(to bottom, #212121, #292929 90%);
   border-color: #1c1f1f;
-  box-shadow: inset 0 2px 2px -2px #141414, inset 0 0 2px 1px rgba(39, 51, 64, 0), 0 1px rgba(238, 238, 236, 
0.1); }
+  box-shadow: inset 0 3px #202020, inset 0 1px #1a1a1a, inset 0 0 0 1px rgba(33, 93, 156, 0), 0 1px 
rgba(238, 238, 236, 0.1); }
   .level-bar.trough:backdrop {
     background-color: transparent;
     border-style: solid;
@@ -2468,7 +2468,7 @@ GtkLevelBar.vertical {
     color: #c9cbc9;
     border-color: #1e2222;
     background-image: linear-gradient(to bottom, #2c2c2c);
-    box-shadow: inset 0 2px 2px -2px rgba(20, 20, 20, 0), inset 0 0 2px 1px rgba(39, 51, 64, 0), 0 1px 
rgba(255, 255, 255, 0); }
+    box-shadow: inset 0 2px rgba(38, 38, 38, 0), inset 0 1px rgba(33, 33, 33, 0), 0 1px rgba(255, 255, 255, 
0); }
 .level-bar.fill-block {
   border-width: 1px;
   border-style: solid;
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index 4203fcb..35f1ccb 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -150,7 +150,7 @@
   border-width: 1px;
   background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
   border-color: #a1a1a1;
-  box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px rgba(218, 232, 247, 0), 0 1px white; }
+  box-shadow: inset 0 3px #f7f7f7, inset 0 1px #d1d1d1, inset 0 0 0 1px rgba(74, 144, 217, 0), 0 1px white; }
   .entry.image.left {
     padding-left: 0; }
   .entry.image.right {
@@ -162,7 +162,7 @@
     border-width: 1px;
     background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
     border-color: #a1a1a1;
-    box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px rgba(218, 232, 247, 0);
+    box-shadow: inset 0 3px #f7f7f7, inset 0 1px #d1d1d1, inset 0 0 0 1px rgba(74, 144, 217, 0);
     border: none;
     border-radius: 0; }
   .entry:focus {
@@ -170,8 +170,8 @@
     border-style: solid;
     border-width: 1px;
     background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
-    border-color: #4a90d9;
-    box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px #dae8f7, 0 1px white; }
+    box-shadow: inset 0 3px #f7f7f7, inset 0 1px #d1d1d1, inset 0 0 0 1px rgba(74, 144, 217, 0.15), 0 1px 
white;
+    border-color: #4a90d9; }
   .entry:insensitive {
     background-color: transparent;
     border-style: solid;
@@ -180,7 +180,7 @@
     color: #8d9091;
     border-color: #a1a1a1;
     background-image: linear-gradient(to bottom, #f4f4f4);
-    box-shadow: inset 0 2px 2px -2px rgba(127, 127, 127, 0), inset 0 0 2px 1px rgba(218, 232, 247, 0), 0 1px 
white; }
+    box-shadow: inset 0 2px rgba(242, 242, 242, 0), inset 0 1px rgba(209, 209, 209, 0), 0 1px white; }
   .entry:backdrop {
     background-color: transparent;
     border-style: solid;
@@ -189,7 +189,7 @@
     color: #54595a;
     border-color: #a8a8a8;
     background-image: linear-gradient(to bottom, #fcfcfc);
-    box-shadow: inset 0 2px 2px -2px rgba(127, 127, 127, 0), inset 0 0 2px 1px rgba(218, 232, 247, 0), 0 1px 
rgba(255, 255, 255, 0); }
+    box-shadow: inset 0 2px rgba(242, 242, 242, 0), inset 0 1px rgba(209, 209, 209, 0), 0 1px rgba(255, 255, 
255, 0); }
   .entry:backdrop:insensitive {
     background-color: transparent;
     border-style: solid;
@@ -198,7 +198,7 @@
     color: #c7c7c7;
     border-color: #a8a8a8;
     background-image: linear-gradient(to bottom, #f4f4f4);
-    box-shadow: inset 0 2px 2px -2px rgba(127, 127, 127, 0), inset 0 0 2px 1px rgba(218, 232, 247, 0), 0 1px 
rgba(255, 255, 255, 0); }
+    box-shadow: inset 0 2px rgba(242, 242, 242, 0), inset 0 1px rgba(209, 209, 209, 0), 0 1px rgba(255, 255, 
255, 0); }
   .entry:selected, .entry:backdrop:selected {
     background-color: #4a90d9;
     color: white; }
@@ -232,8 +232,8 @@
       border-style: solid;
       border-width: 1px;
       background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
-      border-color: #cc0000;
-      box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px #f4cccc, 0 1px white; }
+      box-shadow: inset 0 3px #f7f7f7, inset 0 1px #d1d1d1, inset 0 0 0 1px rgba(204, 0, 0, 0.15), 0 1px 
white;
+      border-color: #cc0000; }
     .entry.error:selected, .entry.error:selected:focus {
       background-color: #cc0000; }
   .entry.warning {
@@ -244,8 +244,8 @@
       border-style: solid;
       border-width: 1px;
       background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
-      border-color: #f57900;
-      box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px #fde4cc, 0 1px white; }
+      box-shadow: inset 0 3px #f7f7f7, inset 0 1px #d1d1d1, inset 0 0 0 1px rgba(245, 121, 0, 0.15), 0 1px 
white;
+      border-color: #f57900; }
     .entry.warning:selected, .entry.warning:selected:focus {
       background-color: #f57900; }
   .entry.image {
@@ -2454,7 +2454,7 @@ GtkLevelBar.vertical {
   border-width: 1px;
   background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
   border-color: #a1a1a1;
-  box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px rgba(218, 232, 247, 0), 0 1px white; }
+  box-shadow: inset 0 3px #f7f7f7, inset 0 1px #d1d1d1, inset 0 0 0 1px rgba(74, 144, 217, 0), 0 1px white; }
   .level-bar.trough:backdrop {
     background-color: transparent;
     border-style: solid;
@@ -2463,7 +2463,7 @@ GtkLevelBar.vertical {
     color: #54595a;
     border-color: #a8a8a8;
     background-image: linear-gradient(to bottom, #fcfcfc);
-    box-shadow: inset 0 2px 2px -2px rgba(127, 127, 127, 0), inset 0 0 2px 1px rgba(218, 232, 247, 0), 0 1px 
rgba(255, 255, 255, 0); }
+    box-shadow: inset 0 2px rgba(242, 242, 242, 0), inset 0 1px rgba(209, 209, 209, 0), 0 1px rgba(255, 255, 
255, 0); }
 .level-bar.fill-block {
   border-width: 1px;
   border-style: solid;


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