diff options
author | Lapo Calamandrei <calamandrei@gmail.com> | 2014-07-07 17:21:52 +0200 |
---|---|---|
committer | Lapo Calamandrei <calamandrei@gmail.com> | 2014-07-07 17:27:57 +0200 |
commit | 607bac7c69d430ea45c0a35760e98ca8bad2a821 (patch) | |
tree | e94067ffd04b25bb370913f9d5436544cf8474a3 | |
parent | 7c1f43f124c4cbf433dcc9a677d0ce1769b17a0c (diff) | |
download | gtk+-607bac7c69d430ea45c0a35760e98ca8bad2a821.tar.gz |
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.
-rw-r--r-- | gtk/resources/theme/Adwaita/_drawing.scss | 17 | ||||
-rw-r--r-- | gtk/resources/theme/Adwaita/gtk-contained-dark.css | 14 | ||||
-rw-r--r-- | 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 1b7562e029..3d386ef13d 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 b3682d6e54..08a1955ab7 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 2c513654d6..cad9be7cf5 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; |