[gnome-themes-standard/wip/sass] redone buttons once again, hope this tie will last a little bit longer :-)
- From: Lapo Calamandrei <lapo src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-themes-standard/wip/sass] redone buttons once again, hope this tie will last a little bit longer :-)
- Date: Mon, 19 May 2014 17:19:38 +0000 (UTC)
commit b24c4e64abe19ebb8a2cf47ea3e9ac3fea8b45f2
Author: Lapo Calamandrei <calamandrei gmail com>
Date: Mon May 19 19:19:23 2014 +0200
redone buttons once again, hope this tie will last a little bit longer :-)
themes/Adwaita/gtk-3.0/_common.scss | 60 +++----
themes/Adwaita/gtk-3.0/_drawing.scss | 242 ++++++++++++++++---------
themes/Adwaita/gtk-3.0/gtk-contained.css | 282 +++++++++++++----------------
themes/Adwaita/gtk-3.0/gtk-contained.scss | 4 +-
4 files changed, 307 insertions(+), 281 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/_common.scss b/themes/Adwaita/gtk-3.0/_common.scss
index 9969cfa..c7afaa2 100644
--- a/themes/Adwaita/gtk-3.0/_common.scss
+++ b/themes/Adwaita/gtk-3.0/_common.scss
@@ -214,39 +214,29 @@ GtkGrid:insensitive {
border-radius: 3px;
transition: all 200ms ease-out;
padding: 4px;
- background-color: transparent;
- @include button_normal;
+ @include button(normal);
&:hover {
- @include button_hover;
+ @include button(hover);
}
&:active {
- @include button_active;
+ @include button(active);
}
&:backdrop {
- // FIXME we need one or two backdrop colors
- @include button_backdrop($backdrop_bg_color);
- color: $backdrop_fg_color;
+ @include button(backdrop);
&:active {
- @include button_backdrop_active($backdrop_bg_color);
- color: $theme_bg_color;
+ @include button(backdrop-active);
}
&:insensitive {
- color: $backdrop_insensitive_color;
- border-color: $backdrop_insensitive_color;
+ @include button(backdrop-insensitive);
}
&:insensitive:active {
- //this ugly flat gradient is unfortunatelly needed...
- background-image: linear-gradient(to bottom, $backdrop_insensitive_color);
- border-color: $backdrop_insensitive_color;
- box-shadow: none;
- color: $backdrop_bg_color;
+ @include button(backdrop-insensitive-active);
}
}
&:insensitive {
- @include button_insensitive;
- color: $insensitive_fg_color;
+ @include button(insensitive);
&:active {
- @include button_insensitive_active;
+ @include button(insensitive-active);
}
}
// button label can't be colored easily, need to match for the GtkLabel
@@ -255,27 +245,21 @@ GtkGrid:insensitive {
@each $b_type, $b_color in (suggested-action, $theme_selected_bg_color),
(destructive-action, $destructive_color) {
&.#{$b_type} {
- @include button_normal($b_color);
- color: $theme_base_color;
- &:active, &:hover:active {
- @include button_active($b_color);
- }
+ @include button(colored,$b_color);
&:hover {
- @include button_hover($b_color);
+ @include button(colored-hover,$b_color);
}
- &:backdrop {
- @include button_backdrop($b_color);
+ &:active { //", &:hover:active {" this *shouldn't* be needed
+ @include button(colored-active,$b_color);
}
- &:insensitive {
- color: $insensitive_fg_color;
- @include button_insensitive($theme_bg_color);
- &:backdrop {
- @include button_insensitive(transparentize($theme_bg_color,0.5));
+ &:backdrop {
+ @include button(colored-backdrop,$b_color);
+ &:insensitive {
+ @include button(backdrop-insensitive);
}
}
- // button label can't be colored easily, need to match for the GtkLabel
- GtkLabel:backdrop:insensitive {
- color: transparentize($insensitive_fg_color, 0.5);
+ &:insensitive {
+ @include button(insensitive);
}
}
}
@@ -583,13 +567,13 @@ GtkPopover {
background-image: none;
box-shadow: none;
&:hover {
- @include button_normal($theme_bg_color);
+ @include button(normal);
}
&:active {
- @include button_active($theme_bg_color);
+ @include button(active);
}
&:backdrop {
- @include button_backdrop($theme_bg_color);
+ @include button(backdrop);
border-color: transparent;
}
}
diff --git a/themes/Adwaita/gtk-3.0/_drawing.scss b/themes/Adwaita/gtk-3.0/_drawing.scss
index 8906cff..40f2b86 100644
--- a/themes/Adwaita/gtk-3.0/_drawing.scss
+++ b/themes/Adwaita/gtk-3.0/_drawing.scss
@@ -23,12 +23,7 @@ $widget_bottom_hilight: 0 1px $borders_edge; //outer hilight "used" on
// buttons
- mixin _button_borders_style {
- border-width: 1px;
- border-style: solid;
-}
-
- mixin _button_borders_custom_color ($c) {
+ mixin _button_border_custom_color ($c) {
@if $variant=='light' {
border-color: darken($c,30%);
}
@@ -48,99 +43,182 @@ $widget_bottom_hilight: 0 1px $borders_edge; //outer hilight "used" on
@mixin _button_box_shadow($shadow1, $shadow2:false, $shadow3:false, $shadow4:false) {
//needed to stack box shadows
@if $shadow2 {box-shadow: $shadow1, $shadow2;}
- @if $shadow3 {box-shadow: $shadow1, $shadow2, $shadow3;}
- @if $shadow4 {box-shadow: $shadow1, $shadow2, $shadow3, shadow4;}
+ @else if $shadow3 {box-shadow: $shadow1, $shadow2, $shadow3;}
+ @else if $shadow4 {box-shadow: $shadow1, $shadow2, $shadow3, shadow4;}
@else { box-shadow: $shadow1; }
}
- mixin button_normal ($c:$theme_bg_color) {
- background-image: linear-gradient(to bottom,
+ mixin button($t, $c:false, $tc:false ) {
+// BUTTON DRAWING FUNCTION
+// $t: button type,
+// $c: base button color for colored* types
+// $tc: optional text-color for colored* types
+//
+// possible $t values:
+// normal, hover, active, insensitive, insensitive-active,
+// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
+// colored, colored-hover, colored-active, colored-backdrop
+
+ border-width: 1px;
+ border-style: solid;
+
+ @if $t==normal { // normal button
+ color: $theme_fg_color;
+ border-color: $borders_color;
+ background-image: linear-gradient(to bottom,
+ lighten($theme_bg_color,10%),
+ $theme_bg_color 40%,
+ darken($theme_bg_color,10%)
+ );
+
+ text-shadow: 0 1px lighten($theme_bg_color,50%);
+ icon-shadow: 0 1px lighten($theme_bg_color,50%);
+
+ @include _button-box-shadow(inset 0 1px $borders_edge,
+ $widget_bottom_hilight);
+ }
+
+ @else if $t==hover { // hovered button
+ color: $theme_fg_color;
+ border-color: $borders_color;
+ background-image: linear-gradient(to bottom,
+ lighten($theme_bg_color,14%),
+ lighten($theme_bg_color,4%) 40%,
+ $theme_bg_color);
+
+ text-shadow: 0 1px lighten($theme_bg_color,50%);
+ icon-shadow: 0 1px lighten($theme_bg_color,50%);
+
+ @include _button-box-shadow(inset 0 1px $borders_edge,
+ $widget_bottom_hilight);
+ }
+
+ @else if $t==active { // pushed button
+ color: $theme_fg_color;
+ border-color: $borders_color;
+ background-image: linear-gradient(to bottom,
+ darken($theme_bg_color,20%),
+ darken($theme_bg_color,15%) 5%,
+ darken($theme_bg_color,10%));
+
+ text-shadow: 0 1px $theme_bg_color;
+ icon-shadow: 0 1px $theme_bg_color;
+
+ @include _button_box_shadow(inset 0 2px 3px -1px transparentize(black,0.7),
+ $widget_bottom_hilight);
+ }
+
+ @else if $t==insensitive { // insensitive button
+ color: $insensitive_fg_color;
+ border-color: $insensitive_fg_color;
+ background-image: none;
+ text-shadow: none;
+ icon-shadow: none;
+ @include _button_box_shadow($widget_bottom_hilight);
+ }
+
+ @else if $t==insensitive-active { // insensitive pushed button
+ color: $insensitive_fg_color;
+ border-color: $insensitive_fg_color;
+
+ //background-image: none;
+
+ @include _button_box_shadow(inset 0 2px 3px -1px transparentize(black,0.8),
+ $widget_bottom_hilight);
+ //text-shadow: none;
+ //icon-shadow: none;
+ }
+
+ @else if $t==backdrop { // backdrop button
+ color: $backdrop_fg_color;
+ border-color: $backdrop_borders_color;
+ background-image: none;
+ text-shadow: none;
+ icon-shadow: none;
+ box-shadow: none;
+ }
+
+ @else if $t==backdrop-active { // backdrop pushed button
+ color: $backdrop_bg_color;
+ border-color: $backdrop_borders_color;
+ background-image: linear-gradient(to bottom, $backdrop_fg_color);
+ }
+
+ @else if $t==backdrop-insensitive { // backdrop insensitive button
+ color: $backdrop_insensitive_color;
+ border-color: $backdrop_insensitive_color;
+ }
+
+ @else if $t==backdrop-insensitive-active { // backdrop insensitive
+ // pushed button
+ color: $backdrop_bg_color;
+ border-color: $backdrop_insensitive_color;
+ background-image: linear-gradient(to bottom, $backdrop_insensitive_color);
+ box-shadow: none;
+ }
+ @else if $t==colored { // custom colored button
+ // if the text color is specified use it, otherwise use the default
+ @if $tc { color: $tc; }
+ @else { color: $theme_base_color };
+
+ @include _button_border_custom_color($c);
+
+ background-image: linear-gradient(to bottom,
lighten($c,10%),
$c 40%,
darken($c,10%)
);
- @if $c!=$theme_bg_color { @include _button_borders_custom_color($c); }
- @else { border-color: $borders_color;}
-
- @include _button_borders_style;
- @include _button-box-shadow(inset 0 1px $borders_edge,
- $widget_bottom_hilight);
- @include _button_text_shadow(lighten($c,50%));
-}
+ text-shadow: 0 1px lighten($c,50%);
+ icon-shadow: 0 1px lighten($c,50%);
+
+ @include _button-box-shadow($widget_bottom_hilight);
+
+ }
+ @else if $t==colored-hover { // custom colored hovered button
+ @if $tc { color: $tc; }
+ @else { color: $theme_base_color };
+
+ @include _button_border_custom_color($c);
- mixin button_hover ($c:$theme_bg_color) {
- background-image: linear-gradient(to bottom,
+ background-image: linear-gradient(to bottom,
lighten($c,14%),
lighten($c,4%) 40%,
$c);
-
- @if $c!=$theme_bg_color { @include _button_borders_custom_color($c); }
- @else { border-color: $borders_color;}
- @include _button_borders_style;
- @include _button-box-shadow(inset 0 1px $borders_edge,
- $widget_bottom_hilight);
- @include _button_text_shadow(lighten($c,50%));
-}
+// text-shadow: 0 1px lighten($c,50%);
+// icon-shadow: 0 1px lighten($c,50%); FIXME
+
+ @include _button-box-shadow(inset 0 1px $borders_edge,
+ $widget_bottom_hilight);
- mixin button_active ($c:$theme_bg_color) {
- background-image: linear-gradient(to bottom,
- darken($c,20%),
- darken($c,15%) 5%,
- darken($c,10%));
-
- @if $c!=$theme_bg_color { @include _button_borders_custom_color($c); }
- @else { border-color: $borders_color;}
-
- @include _button_borders_style;
- @include _button_box_shadow (inset 0 2px 3px -1px transparentize(black,0.8),
- //box shadow for the pushed effect
- $widget_bottom_hilight);
- @include _button_text_shadow($c);
-}
-
- mixin button_backdrop ($c:$backdrop_bg_color) {
- background-image: linear-gradient(to bottom, $c);
+ }
+ @else if $t==colored-active { // custom colored pushed button
+ @if $tc { color: $tc; }
+ @else { color: $theme_base_color };
- @if $c!=$backdrop_bg_color { @include _button_borders_custom_color($c); }
- @else { border-color: $borders_color;}
+ @include _button_border_custom_color($c);
- @include _button_borders_style;
- @include _button_box_shadow(none);
- @include _button_text_shadow(none);
-}
+ background-image: linear-gradient(to bottom,
+ darken($theme_bg_color,20%),
+ darken($theme_bg_color,15%) 5%,
+ darken($theme_bg_color,10%));
- mixin button_backdrop_active ($c:$backdrop_bg_color) {
- background-image: linear-gradient(to bottom, darken($c,30%));
-
- @if $c!=$backdrop_bg_color { @include _button_borders_custom_color($c); }
- @else { border-color: $borders_color;}
+// text-shadow: 0 1px $theme_bg_color; FIXME
+// icon-shadow: 0 1px $theme_bg_color;
- @include _button_borders_style;
- @include _button_box_shadow(none);
- @include _button_text_shadow(none);
-}
-
- mixin button_insensitive ($c:$insensitive_bg_color) {
- background-image: linear-gradient(to bottom, transparentize($c,0.5));
-
- @if $c!=$insensitive_bg_color { @include _button_borders_custom_color($c); }
- @else { border-color: $borders_color;}
+ @include _button_box_shadow(inset 0 2px 3px -1px transparentize(black,0.7),
+ $widget_bottom_hilight);
- @include _button_borders_style;
- @include _button_box_shadow ($widget_bottom_hilight);
- @include _button_text_shadow(none);
-}
-
- mixin button_insensitive_active ($c:$insensitive_bg_color) {
- background-image: linear-gradient(to bottom, transparentize($c,0.5));
-
- @if $c!=$insensitive_bg_color { @include _button_borders_custom_color($c); }
- @else { border-color: $borders_color;}
-
- @include _button_borders_style;
- @include _button_box_shadow (inset 0 2px 3px -1px transparentize(black,0.8),
- $widget_bottom_hilight);
- @include _button_text_shadow(none);
+ }
+ @else if $t==colored-backdrop {
+ color: $c;
+ border-color: $c;
+
+ background-image: none;
+
+ text-shadow: none;
+ icon-shadow: none;
+ box-shadow: none;
+ }
}
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained.css b/themes/Adwaita/gtk-3.0/gtk-contained.css
index 0328eb9..c321013 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained.css
@@ -158,73 +158,71 @@ GtkGrid:insensitive {
border-radius: 3px;
transition: all 200ms ease-out;
padding: 4px;
- background-color: transparent;
- background-image: linear-gradient(to bottom, white, #ededed 40%, lightgray);
- border-color: #a1a1a1;
border-width: 1px;
border-style: solid;
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05);
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
+ color: #2e3436;
+ border-color: #a1a1a1;
+ background-image: linear-gradient(to bottom, white, #ededed 40%, lightgray);
text-shadow: 0 1px white;
icon-shadow: 0 1px white;
+ 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,
.toolbar .button.raised:hover,
.toolbar .raised .button:hover,
.toolbar GtkComboBox .button:hover,
.spinbutton.vertical .button:hover {
- background-image: linear-gradient(to bottom, white, #f7f7f7 40%, #ededed);
- border-color: #a1a1a1;
border-width: 1px;
border-style: solid;
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05);
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
+ 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; }
+ icon-shadow: 0 1px white;
+ 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,
.toolbar .raised .button:active,
.toolbar GtkComboBox .button:active,
.spinbutton.vertical .button:active {
- background-image: linear-gradient(to bottom, #bababa, #c7c7c7 5%, lightgray);
- border-color: #a1a1a1;
border-width: 1px;
border-style: solid;
- box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.05);
- box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2);
+ color: #2e3436;
+ border-color: #a1a1a1;
+ background-image: linear-gradient(to bottom, #bababa, #c7c7c7 5%, lightgray);
text-shadow: 0 1px #ededed;
- icon-shadow: 0 1px #ededed; }
+ icon-shadow: 0 1px #ededed;
+ 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,
.toolbar .raised .button:backdrop,
.toolbar GtkComboBox .button:backdrop,
.spinbutton.vertical .button:backdrop {
- background-image: linear-gradient(to bottom, #ededed);
- border-color: #a1a1a1;
border-width: 1px;
border-style: solid;
- box-shadow: none;
+ color: #748489;
+ border-color: #748489;
+ background-image: none;
text-shadow: none;
icon-shadow: none;
- color: #2e3436; }
+ box-shadow: none; }
.button:backdrop:active,
.toolbar .button.raised:backdrop:active,
.toolbar .raised .button:backdrop:active,
.toolbar GtkComboBox .button:backdrop:active,
.spinbutton.vertical .button:backdrop:active {
- background-image: linear-gradient(to bottom, #a1a1a1);
- border-color: #a1a1a1;
border-width: 1px;
border-style: solid;
- box-shadow: none;
- text-shadow: none;
- icon-shadow: none;
- color: #ededed; }
+ color: #ededed;
+ border-color: #748489;
+ background-image: linear-gradient(to bottom, #748489); }
.button:backdrop:insensitive,
.toolbar .button.raised:backdrop:insensitive,
.toolbar .raised .button:backdrop:insensitive,
.toolbar GtkComboBox .button:backdrop:insensitive,
.spinbutton.vertical .button:backdrop:insensitive {
+ border-width: 1px;
+ border-style: solid;
color: #c7c7c7;
border-color: #c7c7c7; }
.button:backdrop:insensitive:active,
@@ -232,210 +230,175 @@ GtkGrid:insensitive {
.toolbar .raised .button:backdrop:insensitive:active,
.toolbar GtkComboBox .button:backdrop:insensitive:active,
.spinbutton.vertical .button:backdrop:insensitive:active {
- background-image: linear-gradient(to bottom, #c7c7c7);
+ border-width: 1px;
+ border-style: solid;
+ color: #ededed;
border-color: #c7c7c7;
- box-shadow: none;
- color: #ededed; }
+ background-image: linear-gradient(to bottom, #c7c7c7);
+ box-shadow: none; }
.button:insensitive,
.toolbar .button.raised:insensitive,
.toolbar .raised .button:insensitive,
.toolbar GtkComboBox .button:insensitive,
.spinbutton.vertical .button:insensitive {
- background-image: linear-gradient(to bottom, transparent);
- border-color: #a1a1a1;
border-width: 1px;
border-style: solid;
- box-shadow: 0 1px rgba(255, 255, 255, 0.05);
+ color: #748489;
+ border-color: #748489;
+ background-image: none;
text-shadow: none;
icon-shadow: none;
- color: #748489; }
+ box-shadow: 0 1px rgba(255, 255, 255, 0.05); }
.button:insensitive:active,
.toolbar .button.raised:insensitive:active,
.toolbar .raised .button:insensitive:active,
.toolbar GtkComboBox .button:insensitive:active,
.spinbutton.vertical .button:insensitive:active {
- background-image: linear-gradient(to bottom, transparent);
- border-color: #a1a1a1;
border-width: 1px;
border-style: solid;
- box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.05);
- box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2);
- text-shadow: none;
- icon-shadow: none; }
+ color: #748489;
+ border-color: #748489;
+ box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.05); }
.button.suggested-action,
.toolbar .button.raised.suggested-action,
.toolbar .raised .button.suggested-action,
.toolbar GtkComboBox .suggested-action.button,
.spinbutton.vertical .button.suggested-action {
- background-image: linear-gradient(to bottom, #98b9dc, #729fcf 40%, #4c85c2);
- border-color: #2b537d;
border-width: 1px;
border-style: solid;
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05);
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
+ color: white;
+ border-color: #2b537d;
+ background-image: linear-gradient(to bottom, #98b9dc, #729fcf 40%, #4c85c2);
text-shadow: 0 1px white;
icon-shadow: 0 1px white;
- color: white; }
- .button.suggested-action:active, .button.suggested-action:hover:active,
- .toolbar .button.raised.suggested-action:active,
- .toolbar .button.raised.suggested-action:hover:active,
- .toolbar .raised .button.suggested-action:active,
- .toolbar .raised .button.suggested-action:hover:active,
- .toolbar GtkComboBox .suggested-action.button:active,
- .toolbar GtkComboBox .suggested-action.button:hover:active,
- .spinbutton.vertical .button.suggested-action:active,
- .spinbutton.vertical .button.suggested-action:hover:active {
- background-image: linear-gradient(to bottom, #386ca3, #3e78b6 5%, #4c85c2);
- border-color: #2b537d;
- border-width: 1px;
- border-style: solid;
- box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.05);
- box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2);
- text-shadow: 0 1px #729fcf;
- icon-shadow: 0 1px #729fcf; }
+ box-shadow: 0 1px rgba(255, 255, 255, 0.05); }
.button.suggested-action:hover,
.toolbar .button.raised.suggested-action:hover,
.toolbar .raised .button.suggested-action:hover,
.toolbar GtkComboBox .suggested-action.button:hover,
.spinbutton.vertical .button.suggested-action:hover {
- background-image: linear-gradient(to bottom, #a7c3e1, #81a9d4 40%, #729fcf);
+ border-width: 1px;
+ border-style: solid;
+ color: white;
border-color: #2b537d;
+ background-image: linear-gradient(to bottom, #a7c3e1, #81a9d4 40%, #729fcf);
+ 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,
+ .toolbar .raised .button.suggested-action:active,
+ .toolbar GtkComboBox .suggested-action.button:active,
+ .spinbutton.vertical .button.suggested-action:active {
border-width: 1px;
border-style: solid;
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05);
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
- text-shadow: 0 1px white;
- icon-shadow: 0 1px white; }
+ color: white;
+ border-color: #2b537d;
+ background-image: linear-gradient(to bottom, #bababa, #c7c7c7 5%, lightgray);
+ 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,
.toolbar .raised .button.suggested-action:backdrop,
.toolbar GtkComboBox .suggested-action.button:backdrop,
.spinbutton.vertical .button.suggested-action:backdrop {
- background-image: linear-gradient(to bottom, #729fcf);
- border-color: #2b537d;
border-width: 1px;
border-style: solid;
- box-shadow: none;
+ color: #729fcf;
+ border-color: #729fcf;
+ background-image: none;
text-shadow: none;
- icon-shadow: none; }
+ icon-shadow: none;
+ box-shadow: none; }
+ .button.suggested-action:backdrop:insensitive,
+ .toolbar .button.raised.suggested-action:backdrop:insensitive,
+ .toolbar .raised .button.suggested-action:backdrop:insensitive,
+ .toolbar GtkComboBox .suggested-action.button:backdrop:insensitive,
+ .spinbutton.vertical .button.suggested-action:backdrop:insensitive {
+ border-width: 1px;
+ border-style: solid;
+ color: #c7c7c7;
+ border-color: #c7c7c7; }
.button.suggested-action:insensitive,
.toolbar .button.raised.suggested-action:insensitive,
.toolbar .raised .button.suggested-action:insensitive,
.toolbar GtkComboBox .suggested-action.button:insensitive,
.spinbutton.vertical .button.suggested-action:insensitive {
- color: #748489;
- background-image: linear-gradient(to bottom, rgba(237, 237, 237, 0.5));
- border-color: #a1a1a1;
border-width: 1px;
border-style: solid;
- box-shadow: 0 1px rgba(255, 255, 255, 0.05);
+ color: #748489;
+ border-color: #748489;
+ background-image: none;
text-shadow: none;
- icon-shadow: none; }
- .button.suggested-action:insensitive:backdrop,
- .toolbar .button.raised.suggested-action:insensitive:backdrop,
- .toolbar .raised .button.suggested-action:insensitive:backdrop,
- .toolbar GtkComboBox .suggested-action.button:insensitive:backdrop,
- .spinbutton.vertical .button.suggested-action:insensitive:backdrop {
- background-image: linear-gradient(to bottom, rgba(237, 237, 237, 0));
- border-color: rgba(161, 161, 161, 0.5);
- border-width: 1px;
- border-style: solid;
- box-shadow: 0 1px rgba(255, 255, 255, 0.05);
- text-shadow: none;
- icon-shadow: none; }
- .button.suggested-action GtkLabel:backdrop:insensitive,
- .toolbar .button.raised.suggested-action GtkLabel:backdrop:insensitive,
- .toolbar .raised .button.suggested-action GtkLabel:backdrop:insensitive,
- .toolbar GtkComboBox .suggested-action.button GtkLabel:backdrop:insensitive,
- .spinbutton.vertical .button.suggested-action GtkLabel:backdrop:insensitive {
- color: rgba(116, 132, 137, 0.5); }
+ icon-shadow: none;
+ box-shadow: 0 1px rgba(255, 255, 255, 0.05); }
.button.destructive-action,
.toolbar .button.raised.destructive-action,
.toolbar .raised .button.destructive-action,
.toolbar GtkComboBox .destructive-action.button,
.spinbutton.vertical .button.destructive-action {
- background-image: linear-gradient(to bottom, #f35858, #ef2929 40%, #d51010);
- border-color: #760909;
border-width: 1px;
border-style: solid;
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05);
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
+ color: white;
+ border-color: #760909;
+ background-image: linear-gradient(to bottom, #f35858, #ef2929 40%, #d51010);
text-shadow: 0 1px white;
icon-shadow: 0 1px white;
- color: white; }
- .button.destructive-action:active, .button.destructive-action:hover:active,
- .toolbar .button.raised.destructive-action:active,
- .toolbar .button.raised.destructive-action:hover:active,
- .toolbar .raised .button.destructive-action:active,
- .toolbar .raised .button.destructive-action:hover:active,
- .toolbar GtkComboBox .destructive-action.button:active,
- .toolbar GtkComboBox .destructive-action.button:hover:active,
- .spinbutton.vertical .button.destructive-action:active,
- .spinbutton.vertical .button.destructive-action:hover:active {
- background-image: linear-gradient(to bottom, #a60c0c, #bd0e0e 5%, #d51010);
- border-color: #760909;
- border-width: 1px;
- border-style: solid;
- box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.05);
- box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2);
- text-shadow: 0 1px #ef2929;
- icon-shadow: 0 1px #ef2929; }
+ box-shadow: 0 1px rgba(255, 255, 255, 0.05); }
.button.destructive-action:hover,
.toolbar .button.raised.destructive-action:hover,
.toolbar .raised .button.destructive-action:hover,
.toolbar GtkComboBox .destructive-action.button:hover,
.spinbutton.vertical .button.destructive-action:hover {
- background-image: linear-gradient(to bottom, #f46b6b, #f03c3c 40%, #ef2929);
+ border-width: 1px;
+ border-style: solid;
+ color: white;
border-color: #760909;
+ background-image: linear-gradient(to bottom, #f46b6b, #f03c3c 40%, #ef2929);
+ 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,
+ .toolbar .raised .button.destructive-action:active,
+ .toolbar GtkComboBox .destructive-action.button:active,
+ .spinbutton.vertical .button.destructive-action:active {
border-width: 1px;
border-style: solid;
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05);
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
- text-shadow: 0 1px white;
- icon-shadow: 0 1px white; }
+ color: white;
+ border-color: #760909;
+ background-image: linear-gradient(to bottom, #bababa, #c7c7c7 5%, lightgray);
+ 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,
.toolbar .raised .button.destructive-action:backdrop,
.toolbar GtkComboBox .destructive-action.button:backdrop,
.spinbutton.vertical .button.destructive-action:backdrop {
- background-image: linear-gradient(to bottom, #ef2929);
- border-color: #760909;
border-width: 1px;
border-style: solid;
- box-shadow: none;
+ color: #ef2929;
+ border-color: #ef2929;
+ background-image: none;
text-shadow: none;
- icon-shadow: none; }
+ icon-shadow: none;
+ box-shadow: none; }
+ .button.destructive-action:backdrop:insensitive,
+ .toolbar .button.raised.destructive-action:backdrop:insensitive,
+ .toolbar .raised .button.destructive-action:backdrop:insensitive,
+ .toolbar GtkComboBox .destructive-action.button:backdrop:insensitive,
+ .spinbutton.vertical .button.destructive-action:backdrop:insensitive {
+ border-width: 1px;
+ border-style: solid;
+ color: #c7c7c7;
+ border-color: #c7c7c7; }
.button.destructive-action:insensitive,
.toolbar .button.raised.destructive-action:insensitive,
.toolbar .raised .button.destructive-action:insensitive,
.toolbar GtkComboBox .destructive-action.button:insensitive,
.spinbutton.vertical .button.destructive-action:insensitive {
- color: #748489;
- background-image: linear-gradient(to bottom, rgba(237, 237, 237, 0.5));
- border-color: #a1a1a1;
border-width: 1px;
border-style: solid;
- box-shadow: 0 1px rgba(255, 255, 255, 0.05);
+ color: #748489;
+ border-color: #748489;
+ background-image: none;
text-shadow: none;
- icon-shadow: none; }
- .button.destructive-action:insensitive:backdrop,
- .toolbar .button.raised.destructive-action:insensitive:backdrop,
- .toolbar .raised .button.destructive-action:insensitive:backdrop,
- .toolbar GtkComboBox .destructive-action.button:insensitive:backdrop,
- .spinbutton.vertical .button.destructive-action:insensitive:backdrop {
- background-image: linear-gradient(to bottom, rgba(237, 237, 237, 0));
- border-color: rgba(161, 161, 161, 0.5);
- border-width: 1px;
- border-style: solid;
- box-shadow: 0 1px rgba(255, 255, 255, 0.05);
- text-shadow: none;
- icon-shadow: none; }
- .button.destructive-action GtkLabel:backdrop:insensitive,
- .toolbar .button.raised.destructive-action GtkLabel:backdrop:insensitive,
- .toolbar .raised .button.destructive-action GtkLabel:backdrop:insensitive,
- .toolbar GtkComboBox .destructive-action.button GtkLabel:backdrop:insensitive,
- .spinbutton.vertical .button.destructive-action GtkLabel:backdrop:insensitive {
- color: rgba(116, 132, 137, 0.5); }
+ icon-shadow: none;
+ box-shadow: 0 1px rgba(255, 255, 255, 0.05); }
/* GtkComboBoxes text color*/
GtkComboBox:insensitive {
@@ -672,29 +635,30 @@ GtkPopover {
background-image: none;
box-shadow: none; }
.button.titlebutton:hover {
- background-image: linear-gradient(to bottom, white, #ededed 40%, lightgray);
- border-color: #a1a1a1;
border-width: 1px;
border-style: solid;
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05);
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
+ color: #2e3436;
+ border-color: #a1a1a1;
+ background-image: linear-gradient(to bottom, white, #ededed 40%, lightgray);
text-shadow: 0 1px white;
- icon-shadow: 0 1px white; }
+ icon-shadow: 0 1px white;
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05); }
.button.titlebutton:active {
- background-image: linear-gradient(to bottom, #bababa, #c7c7c7 5%, lightgray);
- border-color: #a1a1a1;
border-width: 1px;
border-style: solid;
- box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.05);
- box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2);
+ color: #2e3436;
+ border-color: #a1a1a1;
+ background-image: linear-gradient(to bottom, #bababa, #c7c7c7 5%, lightgray);
text-shadow: 0 1px #ededed;
- icon-shadow: 0 1px #ededed; }
+ icon-shadow: 0 1px #ededed;
+ box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.05); }
.button.titlebutton:backdrop {
- background-image: linear-gradient(to bottom, #ededed);
- border-color: #a1a1a1;
border-width: 1px;
border-style: solid;
- box-shadow: none;
+ color: #748489;
+ border-color: #748489;
+ background-image: none;
text-shadow: none;
icon-shadow: none;
+ box-shadow: none;
border-color: transparent; }
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained.scss b/themes/Adwaita/gtk-3.0/gtk-contained.scss
index f397049..6e1675a 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained.scss
+++ b/themes/Adwaita/gtk-3.0/gtk-contained.scss
@@ -34,9 +34,9 @@ $destructive_color: #ef2929;
//colors for the backdrop state, derived from the main colors.
$backdrop_base_color: darken($theme_base_color,5%);
$backdrop_bg_color: $theme_bg_color;
-$backdrop_fg_color: $theme_fg_color;
+$backdrop_fg_color: $insensitive_fg_color;
$backdrop_insensitive_color: darken($backdrop_bg_color,15%);
-$backdrop_borders_color: $borders_color;
+$backdrop_borders_color: $insensitive_fg_color;
// common drawing routines
@import 'drawing';
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
