[gnome-themes-standard/wip/sass] simplified button text shadow function, dimmed insensitive active button background
- From: Lapo Calamandrei <lapo src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-themes-standard/wip/sass] simplified button text shadow function, dimmed insensitive active button background
- Date: Wed, 21 May 2014 13:58:24 +0000 (UTC)
commit f2e3845f479c24925eeb7f9298253bbe3e474ea3
Author: Lapo Calamandrei <calamandrei gmail com>
Date: Wed May 21 15:57:47 2014 +0200
simplified button text shadow function, dimmed insensitive active button background
themes/Adwaita/gtk-3.0/_drawing.scss | 33 ++++++---------
themes/Adwaita/gtk-3.0/gtk-contained-dark.css | 52 ++++++++++++------------
themes/Adwaita/gtk-3.0/gtk-contained.css | 52 ++++++++++++------------
3 files changed, 65 insertions(+), 72 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/_drawing.scss b/themes/Adwaita/gtk-3.0/_drawing.scss
index 8dd6264..45917a2 100644
--- a/themes/Adwaita/gtk-3.0/_drawing.scss
+++ b/themes/Adwaita/gtk-3.0/_drawing.scss
@@ -22,32 +22,25 @@ $widget_bottom_hilight: 0 1px $borders_edge; //outer hilight "used" on
}
}
- mixin _button_text_shadow ($tc:$theme_fg_color, $sc:false) {
+ mixin _button_text_shadow ($tc:$theme_fg_color) {
//
// helper function for the text emboss effect
//
// $tc is the optional text color, not the shadow color
-// $sc is the optional shadow color
+//
+// TODO: this functions needs a way to deal with special cases
//
+
+ $_dark: transparentize(black,0.8);
+ $_bright: transparentize(white,0.4);
+
@if lightness($tc) < 50% {
- @if $sc {
- text-shadow: 0 1px $sc;
- icon-shadow: 0 1px $sc;
- }
- @else {
- text-shadow: 0 1px lighten(invert($tc),20%);
- icon-shadow: 0 1px lighten(invert($tc),20%);
- }
+ text-shadow: 0 1px $_bright;
+ icon-shadow: 0 1px $_bright;
}
@else {
- @if $sc {
- text-shadow: 0 -1px $sc;
- icon-shadow: 0 -1ps $sc;
- }
- @else {
- text-shadow: 0 -1px transparentize(invert($tc),0.5);
- icon-shadow: 0 -1px transparentize(invert($tc),0.5);
- }
+ text-shadow: 0 -1px $_dark;
+ icon-shadow: 0 -1px $_dark;
}
}
@@ -153,7 +146,7 @@ $widget_bottom_hilight: 0 1px $borders_edge; //outer hilight "used" on
border-color: $_insensitive_borders_color;
@include _button_box_shadow(none,
$widget_bottom_hilight);
- background-image: linear-gradient(to bottom, transparentize($_backdrop_borders_color,.8));
+ background-image: linear-gradient(to bottom, transparentize($_backdrop_borders_color,.9));
}
@else if $t==backdrop { // backdrop button
@@ -180,7 +173,7 @@ $widget_bottom_hilight: 0 1px $borders_edge; //outer hilight "used" on
// pushed button
color: $_backdrop_insensitive_color;
border-color: $_backdrop_borders_color;
- background-image: linear-gradient(to bottom, transparentize($_backdrop_borders_color,.8));
+ background-image: linear-gradient(to bottom, transparentize($_backdrop_borders_color,.9));
box-shadow: none;
}
}
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
index f06af06..78b9f7c 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
@@ -160,8 +160,8 @@ GtkGrid:insensitive {
color: #eeeeec;
background-image: linear-gradient(to bottom, #454c4c, #393f3f 40%, #2d3232);
border-color: #1c1f1f;
- text-shadow: 0 -1px rgba(17, 17, 19, 0.5);
- icon-shadow: 0 -1px rgba(17, 17, 19, 0.5);
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
+ icon-shadow: 0 -1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(238, 238, 236, 0.1), 0 1px rgba(238, 238, 236, 0.1);
/* Suggested and Destructive Action buttons */ }
.button:hover,
@@ -174,8 +174,8 @@ GtkGrid:insensitive {
color: #eeeeec;
border-color: #212424;
background-image: linear-gradient(to bottom, #5b6464, #434a4a 40%, #393f3f);
- text-shadow: 0 -1px rgba(17, 17, 19, 0.5);
- icon-shadow: 0 -1px rgba(17, 17, 19, 0.5);
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
+ icon-shadow: 0 -1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(238, 238, 236, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
.button:active,
.toolbar .button.raised:active,
@@ -187,8 +187,8 @@ GtkGrid:insensitive {
color: #eeeeec;
border-color: #1c1f1f;
background-image: linear-gradient(to bottom, #212424, #2d3232 3%);
- text-shadow: 0 -1px rgba(17, 17, 19, 0.5);
- icon-shadow: 0 -1px rgba(17, 17, 19, 0.5);
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
+ icon-shadow: 0 -1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px rgba(238, 238, 236, 0.1); }
.button:backdrop,
.toolbar .button.raised:backdrop,
@@ -231,7 +231,7 @@ GtkGrid:insensitive {
border-style: solid;
color: white;
border-color: #1c1f1f;
- background-image: linear-gradient(to bottom, rgba(28, 31, 31, 0.2));
+ background-image: linear-gradient(to bottom, rgba(28, 31, 31, 0.1));
box-shadow: none; }
.button:insensitive,
.toolbar .button.raised:insensitive,
@@ -256,7 +256,7 @@ GtkGrid:insensitive {
color: white;
border-color: #1c1f1f;
box-shadow: none, 0 1px rgba(238, 238, 236, 0.1);
- background-image: linear-gradient(to bottom, rgba(28, 31, 31, 0.2)); }
+ background-image: linear-gradient(to bottom, rgba(28, 31, 31, 0.1)); }
.button.suggested-action,
.toolbar .button.raised.suggested-action,
.toolbar .raised .button.suggested-action,
@@ -267,8 +267,8 @@ GtkGrid:insensitive {
color: white;
background-image: linear-gradient(to bottom, #3583d5, #2a76c6 40%, #256ab1);
border-color: #215d9c;
- text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
- icon-shadow: 0 -1px rgba(0, 0, 0, 0.5);
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
+ icon-shadow: 0 -1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(238, 238, 236, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
.button.suggested-action:hover,
.toolbar .button.raised.suggested-action:hover,
@@ -280,8 +280,8 @@ GtkGrid:insensitive {
color: white;
border-color: #215d9c;
background-image: linear-gradient(to bottom, #5b9add, #3180d4 40%, #2a76c6);
- text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
- icon-shadow: 0 -1px rgba(0, 0, 0, 0.5);
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
+ icon-shadow: 0 -1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(238, 238, 236, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
.button.suggested-action:active,
.toolbar .button.raised.suggested-action:active,
@@ -293,8 +293,8 @@ GtkGrid:insensitive {
color: white;
border-color: #215d9c;
background-image: linear-gradient(to bottom, #215d9c, #256ab1 3%);
- text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
- icon-shadow: 0 -1px rgba(0, 0, 0, 0.5);
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
+ icon-shadow: 0 -1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px rgba(238, 238, 236, 0.1); }
.button.suggested-action:backdrop,
.toolbar .button.raised.suggested-action:backdrop,
@@ -341,8 +341,8 @@ GtkGrid:insensitive {
color: white;
background-image: linear-gradient(to bottom, #ed1212, #d51010 40%, #bd0e0e);
border-color: #a60c0c;
- text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
- icon-shadow: 0 -1px rgba(0, 0, 0, 0.5);
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
+ icon-shadow: 0 -1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(238, 238, 236, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
.button.destructive-action:hover,
.toolbar .button.raised.destructive-action:hover,
@@ -354,8 +354,8 @@ GtkGrid:insensitive {
color: white;
border-color: #a60c0c;
background-image: linear-gradient(to bottom, #f03c3c, #e81111 40%, #d51010);
- text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
- icon-shadow: 0 -1px rgba(0, 0, 0, 0.5);
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
+ icon-shadow: 0 -1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(238, 238, 236, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
.button.destructive-action:active,
.toolbar .button.raised.destructive-action:active,
@@ -367,8 +367,8 @@ GtkGrid:insensitive {
color: white;
border-color: #a60c0c;
background-image: linear-gradient(to bottom, #a60c0c, #bd0e0e 3%);
- text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
- icon-shadow: 0 -1px rgba(0, 0, 0, 0.5);
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
+ icon-shadow: 0 -1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px rgba(238, 238, 236, 0.1); }
.button.destructive-action:backdrop,
.toolbar .button.raised.destructive-action:backdrop,
@@ -462,8 +462,8 @@ GtkGrid:insensitive {
color: #eeeeec;
border-color: #1c1f1f;
background-image: linear-gradient(to bottom, #515a5a, #5d6767 3%);
- text-shadow: 0 -1px rgba(17, 17, 19, 0.5);
- icon-shadow: 0 -1px rgba(17, 17, 19, 0.5);
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
+ icon-shadow: 0 -1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px rgba(238, 238, 236, 0.1); }
.spinbutton.vertical .button:first-child {
border-radius: 3px 3px 0 0; }
@@ -671,8 +671,8 @@ GtkPopover {
color: #eeeeec;
background-image: linear-gradient(to bottom, #454c4c, #393f3f 40%, #2d3232);
border-color: #1c1f1f;
- text-shadow: 0 -1px rgba(17, 17, 19, 0.5);
- icon-shadow: 0 -1px rgba(17, 17, 19, 0.5);
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
+ icon-shadow: 0 -1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(238, 238, 236, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
.button.titlebutton:active {
border-width: 1px;
@@ -680,8 +680,8 @@ GtkPopover {
color: #eeeeec;
border-color: #1c1f1f;
background-image: linear-gradient(to bottom, #212424, #2d3232 3%);
- text-shadow: 0 -1px rgba(17, 17, 19, 0.5);
- icon-shadow: 0 -1px rgba(17, 17, 19, 0.5);
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
+ icon-shadow: 0 -1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px rgba(238, 238, 236, 0.1); }
.button.titlebutton:backdrop {
border-width: 1px;
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained.css b/themes/Adwaita/gtk-3.0/gtk-contained.css
index ee48097..192f9aa 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained.css
@@ -160,8 +160,8 @@ GtkGrid:insensitive {
color: #2e3436;
background-image: linear-gradient(to bottom, white, #ededed 40%, lightgray);
border-color: #a1a1a1;
- text-shadow: 0 1px white;
- icon-shadow: 0 1px white;
+ text-shadow: 0 1px rgba(255, 255, 255, 0.6);
+ icon-shadow: 0 1px rgba(255, 255, 255, 0.6);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05);
/* Suggested and Destructive Action buttons */ }
.button:hover,
@@ -174,8 +174,8 @@ GtkGrid:insensitive {
color: #2e3436;
border-color: #a1a1a1;
background-image: linear-gradient(to bottom, white, #f7f7f7 40%, #ededed);
- text-shadow: 0 1px white;
- icon-shadow: 0 1px white;
+ text-shadow: 0 1px rgba(255, 255, 255, 0.6);
+ icon-shadow: 0 1px rgba(255, 255, 255, 0.6);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05); }
.button:active,
.toolbar .button.raised:active,
@@ -187,8 +187,8 @@ GtkGrid:insensitive {
color: #2e3436;
border-color: #a1a1a1;
background-image: linear-gradient(to bottom, #c7c7c7, #d1d1d1 3%, lightgray);
- text-shadow: 0 1px white;
- icon-shadow: 0 1px white;
+ text-shadow: 0 1px rgba(255, 255, 255, 0.6);
+ icon-shadow: 0 1px rgba(255, 255, 255, 0.6);
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.05); }
.button:backdrop,
.toolbar .button.raised:backdrop,
@@ -231,7 +231,7 @@ GtkGrid:insensitive {
border-style: solid;
color: #c7c7c7;
border-color: #a1a1a1;
- background-image: linear-gradient(to bottom, rgba(161, 161, 161, 0.2));
+ background-image: linear-gradient(to bottom, rgba(161, 161, 161, 0.1));
box-shadow: none; }
.button:insensitive,
.toolbar .button.raised:insensitive,
@@ -256,7 +256,7 @@ GtkGrid:insensitive {
color: #748489;
border-color: #a1a1a1;
box-shadow: none, 0 1px rgba(255, 255, 255, 0.05);
- background-image: linear-gradient(to bottom, rgba(161, 161, 161, 0.2)); }
+ background-image: linear-gradient(to bottom, rgba(161, 161, 161, 0.1)); }
.button.suggested-action,
.toolbar .button.raised.suggested-action,
.toolbar .raised .button.suggested-action,
@@ -267,8 +267,8 @@ GtkGrid:insensitive {
color: white;
background-image: linear-gradient(to bottom, #abc6e2, #729fcf 40%, #4c85c2);
border-color: #2b537d;
- text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
- icon-shadow: 0 -1px rgba(0, 0, 0, 0.5);
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
+ icon-shadow: 0 -1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05); }
.button.suggested-action:hover,
.toolbar .button.raised.suggested-action:hover,
@@ -280,8 +280,8 @@ GtkGrid:insensitive {
color: white;
border-color: #2b537d;
background-image: linear-gradient(to bottom, #a7c3e1, #81a9d4 40%, #729fcf);
- text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
- icon-shadow: 0 -1px rgba(0, 0, 0, 0.5);
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
+ icon-shadow: 0 -1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05); }
.button.suggested-action:active,
.toolbar .button.raised.suggested-action:active,
@@ -293,8 +293,8 @@ GtkGrid:insensitive {
color: white;
border-color: #2b537d;
background-image: linear-gradient(to bottom, #3e78b6, #4883c1 3%, #4c85c2);
- text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
- icon-shadow: 0 -1px rgba(0, 0, 0, 0.5);
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
+ icon-shadow: 0 -1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.05); }
.button.suggested-action:backdrop,
.toolbar .button.raised.suggested-action:backdrop,
@@ -341,8 +341,8 @@ GtkGrid:insensitive {
color: white;
background-image: linear-gradient(to bottom, #f47070, #ef2929 40%, #d51010);
border-color: #760909;
- text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
- icon-shadow: 0 -1px rgba(0, 0, 0, 0.5);
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
+ icon-shadow: 0 -1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05); }
.button.destructive-action:hover,
.toolbar .button.raised.destructive-action:hover,
@@ -354,8 +354,8 @@ GtkGrid:insensitive {
color: white;
border-color: #760909;
background-image: linear-gradient(to bottom, #f46b6b, #f03c3c 40%, #ef2929);
- text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
- icon-shadow: 0 -1px rgba(0, 0, 0, 0.5);
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
+ icon-shadow: 0 -1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05); }
.button.destructive-action:active,
.toolbar .button.raised.destructive-action:active,
@@ -367,8 +367,8 @@ GtkGrid:insensitive {
color: white;
border-color: #760909;
background-image: linear-gradient(to bottom, #bd0e0e, #d01010 3%, #d51010);
- text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
- icon-shadow: 0 -1px rgba(0, 0, 0, 0.5);
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
+ icon-shadow: 0 -1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.05); }
.button.destructive-action:backdrop,
.toolbar .button.raised.destructive-action:backdrop,
@@ -462,8 +462,8 @@ GtkGrid:insensitive {
color: #2e3436;
border-color: #a1a1a1;
background-image: linear-gradient(to bottom, #d9d9d9, #e3e3e3 3%, #e6e6e6);
- text-shadow: 0 1px white;
- icon-shadow: 0 1px white;
+ text-shadow: 0 1px rgba(255, 255, 255, 0.6);
+ icon-shadow: 0 1px rgba(255, 255, 255, 0.6);
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.05); }
.spinbutton.vertical .button:first-child {
border-radius: 3px 3px 0 0; }
@@ -671,8 +671,8 @@ GtkPopover {
color: #2e3436;
background-image: linear-gradient(to bottom, white, #ededed 40%, lightgray);
border-color: #a1a1a1;
- text-shadow: 0 1px white;
- icon-shadow: 0 1px white;
+ text-shadow: 0 1px rgba(255, 255, 255, 0.6);
+ icon-shadow: 0 1px rgba(255, 255, 255, 0.6);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05); }
.button.titlebutton:active {
border-width: 1px;
@@ -680,8 +680,8 @@ GtkPopover {
color: #2e3436;
border-color: #a1a1a1;
background-image: linear-gradient(to bottom, #c7c7c7, #d1d1d1 3%, lightgray);
- text-shadow: 0 1px white;
- icon-shadow: 0 1px white;
+ text-shadow: 0 1px rgba(255, 255, 255, 0.6);
+ icon-shadow: 0 1px rgba(255, 255, 255, 0.6);
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.05); }
.button.titlebutton:backdrop {
border-width: 1px;
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]