[gtk+] Adwaita: entry shadows work.



commit 607bac7c69d430ea45c0a35760e98ca8bad2a821
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Mon Jul 7 17:21:52 2014 +0200

    Adwaita: entry shadows work.
    
    For the transition to work the box-shadows types in the shadow list
    needs to be matched in various states so I'm using transparent shadows
    istead of resetting them when not needed.

 gtk/resources/theme/Adwaita/_drawing.scss          |   17 ++++++++++++++---
 gtk/resources/theme/Adwaita/gtk-contained-dark.css |   14 +++++++-------
 gtk/resources/theme/Adwaita/gtk-contained.css      |   14 +++++++-------
 3 files changed, 28 insertions(+), 17 deletions(-)
---
diff --git a/gtk/resources/theme/Adwaita/_drawing.scss b/gtk/resources/theme/Adwaita/_drawing.scss
index 1b7562e..3d386ef 100644
--- a/gtk/resources/theme/Adwaita/_drawing.scss
+++ b/gtk/resources/theme/Adwaita/_drawing.scss
@@ -34,13 +34,23 @@ $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),1);
+  $_blank_edge: if($noedge, none, 0 1px transparentize(white,1));
+
   $_entry_edge: $widget_edge;
   @if $noedge { $_entry_edge: none; }
   
   @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),1),
                       $_entry_edge);
+    // the second transparent shadow is needed for the transition to work
   }
   @if $t==focus {
     @if $variant == 'light' {
@@ -62,17 +72,18 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
     color: $insensitive_fg_color;
     border-color: $borders_color;
     background-image: linear-gradient(to bottom, $insensitive_bg_color);
-    @include _shadows($_entry_edge);
+    @include _shadows($_blank_inner_shadows, $_entry_edge);
+
   }
   @if $t==backdrop {
     color: $backdrop_fg_color;
     background-image: linear-gradient(to bottom, $backdrop_base_color);
-    box-shadow: 0 1px transparentize(white,1);
+    @include _shadows($_blank_inner_shadows, $_blank_edge);
   }
   @if $t==backdrop-insensitive {
     color: $backdrop_insensitive_color;
     background-image: linear-gradient(to bottom, $backdrop_bg_color);
-    box-shadow: 0 1px transparentize(white,1);
+    @include _shadows($_blank_inner_shadows, $_blank_edge);
   }
 }
 
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css 
b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index b3682d6..08a1955 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -142,7 +142,7 @@
   border-width: 1px;
   background-image: linear-gradient(to bottom, #212121, #292929 90%);
   border-color: #1c1f1f;
-  box-shadow: inset 0 2px 2px -2px #141414, 0 1px rgba(238, 238, 236, 0.1); }
+  box-shadow: inset 0 2px 2px -2px #141414, inset 0 0 2px 1px rgba(37, 67, 98, 0), 0 1px rgba(238, 238, 236, 
0.1); }
   .entry.flat, .entry.flat:focus {
     padding: 2px;
     background-color: transparent;
@@ -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;
+    box-shadow: inset 0 2px 2px -2px #141414, inset 0 0 2px 1px rgba(37, 67, 98, 0);
     border: none;
     border-radius: 0; }
   .entry:focus {
@@ -168,7 +168,7 @@
     color: #939695;
     border-color: #1c1f1f;
     background-image: linear-gradient(to bottom, #323636);
-    box-shadow: 0 1px rgba(238, 238, 236, 0.1); }
+    box-shadow: inset 0 2px 2px -2px rgba(20, 20, 20, 0), inset 0 0 2px 1px rgba(37, 67, 98, 0), 0 1px 
rgba(238, 238, 236, 0.1); }
   .entry:backdrop {
     background-color: transparent;
     border-style: solid;
@@ -176,7 +176,7 @@
     background-image: linear-gradient(to bottom, #212121, #292929 90%);
     color: #c9cbc9;
     background-image: linear-gradient(to bottom, #2c2c2c);
-    box-shadow: 0 1px rgba(255, 255, 255, 0); }
+    box-shadow: inset 0 2px 2px -2px rgba(20, 20, 20, 0), inset 0 0 2px 1px rgba(37, 67, 98, 0), 0 1px 
rgba(255, 255, 255, 0); }
   .entry:backdrop:insensitive {
     background-color: transparent;
     border-style: solid;
@@ -184,7 +184,7 @@
     background-image: linear-gradient(to bottom, #212121, #292929 90%);
     color: #454c4c;
     background-image: linear-gradient(to bottom, #393f3f);
-    box-shadow: 0 1px rgba(255, 255, 255, 0); }
+    box-shadow: inset 0 2px 2px -2px rgba(20, 20, 20, 0), inset 0 0 2px 1px rgba(37, 67, 98, 0), 0 1px 
rgba(255, 255, 255, 0); }
   .entry:selected, .entry:backdrop:selected {
     background-color: #215d9c;
     color: white; }
@@ -2244,7 +2244,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, 0 1px rgba(238, 238, 236, 0.1); }
+  box-shadow: inset 0 2px 2px -2px #141414, inset 0 0 2px 1px rgba(37, 67, 98, 0), 0 1px rgba(238, 238, 236, 
0.1); }
   .level-bar.trough:backdrop {
     background-color: transparent;
     border-style: solid;
@@ -2252,7 +2252,7 @@ GtkLevelBar.vertical {
     background-image: linear-gradient(to bottom, #212121, #292929 90%);
     color: #c9cbc9;
     background-image: linear-gradient(to bottom, #2c2c2c);
-    box-shadow: 0 1px rgba(255, 255, 255, 0); }
+    box-shadow: inset 0 2px 2px -2px rgba(20, 20, 20, 0), inset 0 0 2px 1px rgba(37, 67, 98, 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 2c51365..cad9be7 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -142,7 +142,7 @@
   border-width: 1px;
   background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
   border-color: #a1a1a1;
-  box-shadow: inset 0 2px 2px -2px #7f7f7f, 0 1px white; }
+  box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px rgba(164, 199, 236, 0), 0 1px white; }
   .entry.flat, .entry.flat:focus {
     padding: 2px;
     background-color: transparent;
@@ -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;
+    box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px rgba(164, 199, 236, 0);
     border: none;
     border-radius: 0; }
   .entry:focus {
@@ -168,7 +168,7 @@
     color: #8d9091;
     border-color: #a1a1a1;
     background-image: linear-gradient(to bottom, #f4f4f4);
-    box-shadow: 0 1px white; }
+    box-shadow: inset 0 2px 2px -2px rgba(127, 127, 127, 0), inset 0 0 2px 1px rgba(164, 199, 236, 0), 0 1px 
white; }
   .entry:backdrop {
     background-color: transparent;
     border-style: solid;
@@ -176,7 +176,7 @@
     background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
     color: #54595a;
     background-image: linear-gradient(to bottom, #fcfcfc);
-    box-shadow: 0 1px rgba(255, 255, 255, 0); }
+    box-shadow: inset 0 2px 2px -2px rgba(127, 127, 127, 0), inset 0 0 2px 1px rgba(164, 199, 236, 0), 0 1px 
rgba(255, 255, 255, 0); }
   .entry:backdrop:insensitive {
     background-color: transparent;
     border-style: solid;
@@ -184,7 +184,7 @@
     background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
     color: #c7c7c7;
     background-image: linear-gradient(to bottom, #ededed);
-    box-shadow: 0 1px rgba(255, 255, 255, 0); }
+    box-shadow: inset 0 2px 2px -2px rgba(127, 127, 127, 0), inset 0 0 2px 1px rgba(164, 199, 236, 0), 0 1px 
rgba(255, 255, 255, 0); }
   .entry:selected, .entry:backdrop:selected {
     background-color: #4a90d9;
     color: white; }
@@ -2235,7 +2235,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, 0 1px white; }
+  box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px rgba(164, 199, 236, 0), 0 1px white; }
   .level-bar.trough:backdrop {
     background-color: transparent;
     border-style: solid;
@@ -2243,7 +2243,7 @@ GtkLevelBar.vertical {
     background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
     color: #54595a;
     background-image: linear-gradient(to bottom, #fcfcfc);
-    box-shadow: 0 1px rgba(255, 255, 255, 0); }
+    box-shadow: inset 0 2px 2px -2px rgba(127, 127, 127, 0), inset 0 0 2px 1px rgba(164, 199, 236, 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]