Adwaita: try to be nicer on performances with entry shadows

This commit is contained in:
Lapo Calamandrei 2014-08-21 14:41:29 +02:00
parent 3566108160
commit 09286cf968
3 changed files with 47 additions and 46 deletions

View File

@ -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) {
//

View File

@ -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;

View File

@ -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;