[gnome-themes-standard/wip/sass] simplify button drawing
- From: Jakub Steiner <jimmac src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-themes-standard/wip/sass] simplify button drawing
- Date: Tue, 20 May 2014 16:53:02 +0000 (UTC)
commit ae84367d30f81da3a16fa7c9ed2af090b78d1e9b
Author: Jakub Steiner <jimmac gmail com>
Date: Tue May 20 16:39:04 2014 +0200
simplify button drawing
- colored buttons should not require separate duplicate states.
themes/Adwaita/gtk-3.0/_common.scss | 10 +-
themes/Adwaita/gtk-3.0/_drawing.scss | 203 ++------
themes/Adwaita/gtk-3.0/gtk-contained-dark.css | 672 ++++++++++++++++++++++++
themes/Adwaita/gtk-3.0/gtk-contained-dark.scss | 10 +-
themes/Adwaita/gtk-3.0/gtk-contained.css | 56 +-
themes/Adwaita/gtk-3.0/gtk-contained.scss | 10 +-
6 files changed, 767 insertions(+), 194 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/_common.scss b/themes/Adwaita/gtk-3.0/_common.scss
index a64685e..dfbf172 100644
--- a/themes/Adwaita/gtk-3.0/_common.scss
+++ b/themes/Adwaita/gtk-3.0/_common.scss
@@ -242,18 +242,18 @@ GtkGrid:insensitive {
// button label can't be colored easily, need to match for the GtkLabel
/* Suggested and Destructive Action buttons */
- @each $b_type, $b_color in (suggested-action, $theme_selected_bg_color),
+ @each $b_type, $b_color in (suggested-action, $theme_selected_bg_color),
(destructive-action, $destructive_color) {
&.#{$b_type} {
- @include button(colored,$b_color);
+ @include button(normal,$b_color, white);
&:hover {
- @include button(colored-hover,$b_color);
+ @include button(hover,$b_color, white);
}
&:active { //", &:hover:active {" this *shouldn't* be needed
- @include button(colored-active,$b_color);
+ @include button(active,$b_color, white);
}
&:backdrop {
- @include button(colored-backdrop,$b_color);
+ @include button(backdrop,$b_color);
&:insensitive {
@include button(backdrop-insensitive);
}
diff --git a/themes/Adwaita/gtk-3.0/_drawing.scss b/themes/Adwaita/gtk-3.0/_drawing.scss
index e6e4df4..3b60950 100644
--- a/themes/Adwaita/gtk-3.0/_drawing.scss
+++ b/themes/Adwaita/gtk-3.0/_drawing.scss
@@ -7,27 +7,10 @@ $widget_bottom_hilight: 0 1px $borders_edge; //outer hilight "used" on
//since gtk doesn't draw (yet?)
//outside the widget itself.
-$bright_text_shadow: transparentize(white,0.2);
-$dark_text_shadow: transparentize(black,0.6);
-
- mixin _border-rounded() {
-}
-
- mixin _border-rounded-left() {
-}
-
- mixin _border-rounded-right() {
-}
-
- mixin _border-rounded-top() {
-}
-
- mixin _border-rounded-bottom() {
-}
// buttons
- mixin _button_border_custom_color ($c) {
+ mixin _button_border_color ($c) {
//
// helper function to draw borders for colored buttons
//
@@ -52,8 +35,8 @@ $dark_text_shadow: transparentize(black,0.6);
icon-shadow: 0 1px $sc;
}
@else {
- text-shadow: 0 1px $bright_text_shadow;
- icon-shadow: 0 1px $bright_text_shadow;
+ text-shadow: 0 1px lighten(invert($tc),20%);
+ icon-shadow: 0 1px lighten(invert($tc),20%);
}
}
@else {
@@ -62,8 +45,8 @@ $dark_text_shadow: transparentize(black,0.6);
icon-shadow: 0 -1ps $sc;
}
@else {
- text-shadow: 0 -1px $dark_text_shadow;
- icon-shadow: 0 -1px $dark_text_shadow;
+ text-shadow: 0 -1px transparentize(invert($tc),0.5);
+ icon-shadow: 0 -1px transparentize(invert($tc),0.5);
}
}
}
@@ -78,7 +61,7 @@ $dark_text_shadow: transparentize(black,0.6);
@else { box-shadow: $shadow1; }
}
- mixin button($t, $c:false, $tc:false ) {
+ mixin button($t, $c:$theme_bg_color, $tc:$theme_fg_color ) {
//
// Button drawing function
//
@@ -94,46 +77,43 @@ $dark_text_shadow: transparentize(black,0.6);
border-width: 1px;
border-style: solid;
- @if $t==normal {
- //
- // normal button
- //
- color: $theme_fg_color;
- border-color: $borders_color;
+ @if $t==normal { // normal button
+ color: $tc;
+ @include _button_border_color($c);
background-image: linear-gradient(to bottom,
- lighten($theme_bg_color,10%),
- $theme_bg_color 40%,
- darken($theme_bg_color,10%)
+ lighten($c,10%),
+ $c 40%,
+ darken($c,10%)
);
- @include _button_text_shadow;
+
+ @include _button_text_shadow($tc);
+
@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;
+
+ @else if $t==hover { // hovered button
+ color: $tc;
+ @include _button_border_color($c);
background-image: linear-gradient(to bottom,
- lighten($theme_bg_color,14%),
- lighten($theme_bg_color,4%) 40%,
- $theme_bg_color);
- @include _button_text_shadow;
+ lighten($c,14%),
+ lighten($c,4%) 40%,
+ $c);
+
+ @include _button_text_shadow($tc);
@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;
+
+ @else if $t==active { // pushed button
+ color: $tc;
+ @include _button_border_color($c);
background-image: linear-gradient(to bottom,
- darken($theme_bg_color,20%),
- darken($theme_bg_color,15%) 5%,
- darken($theme_bg_color,10%));
- @include _button_text_shadow($theme_fg_color,$theme_bg_color);
+ darken($c,20%),
+ darken($c,15%) 5%,
+ darken($c,10%));
+
+ @include _button_text_shadow($tc);
@include _button_box_shadow(inset 0 2px 3px -1px transparentize(black,0.7),
$widget_bottom_hilight);
}
@@ -157,111 +137,32 @@ $dark_text_shadow: transparentize(black,0.6);
@include _button_box_shadow(inset 0 2px 3px -1px transparentize(black,0.8),
$widget_bottom_hilight);
}
- @else if $t==backdrop {
- //
- // backdrop button
- //
- color: $backdrop_fg_color;
- border-color: $backdrop_borders_color;
+
+ @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;
- @include _button_text_shadow($tc);
- }
- @else {
- color: $theme_base_color;
- @include _button_text_shadow($theme_base_color);
- }
- @include _button_border_custom_color($c);
- background-image: linear-gradient(to bottom,
- lighten($c,10%),
- $c 40%,
- darken($c,10%)
- );
- @include _button_box_shadow($widget_bottom_hilight);
- }
- @else if $t==colored-hover {
- //
- // custom colored hovered button
- //
- @if $tc {
- color: $tc;
- @include _button_text_shadow($tc);
- }
- @else {
- color: $theme_base_color;
- @include _button_text_shadow($theme_base_color);
- }
- @include _button_border_custom_color($c);
- background-image: linear-gradient(to bottom,
- lighten($c,14%),
- lighten($c,4%) 40%,
- $c);
- @include _button_box_shadow(inset 0 1px $borders_edge,
- $widget_bottom_hilight);
+
+ @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==colored-active {
- //
- // custom colored pushed button
- //
- @if $tc {
- color: $tc;
- @include _button_text_shadow($tc);
- }
- @else {
- color: $theme_base_color;
- @include _button_text_shadow($theme_base_color);
- };
- @include _button_border_custom_color($c);
- background-image: linear-gradient(to bottom,
- darken($c,20%),
- darken($c,15%) 5%,
- darken($c,10%));
- @include _button_box_shadow(inset 0 2px 3px -1px transparentize(black,0.7),
- $widget_bottom_hilight);
+
+ @else if $t==backdrop-insensitive { // backdrop insensitive button
+ color: $_backdrop_insensitive_color;
+ border-color: $_backdrop_insensitive_color;
}
- @else if $t==colored-backdrop {
- //
- // custom colored backdrop button
- //
- color: $c;
- border-color: $c;
- background-image: none;
- text-shadow: none;
- icon-shadow: none;
+
+ @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;
}
}
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
new file mode 100644
index 0000000..16b24a5
--- /dev/null
+++ b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
@@ -0,0 +1,672 @@
+debug {
+ background-color: red; }
+
+* {
+ engine: adwaita;
+ padding: 0;
+ background-clip: padding-box;
+ -GtkToolButton-icon-spacing: 4;
+ -GtkTextView-error-underline-color: #cc0000;
+ -GtkPaned-handle-size: 5;
+ -GtkCheckButton-indicator-size: 16;
+ -GtkCheckMenuItem-indicator-size: 12;
+ /* The size for scrollbars. The slider is 2px smaller, but we keep it
+ * up so that the whole area is sensitive to button presses for the
+ * slider. The stepper button is larger in both directions, the slider
+ * only in the width
+ */
+ -GtkScrolledWindow-scrollbar-spacing: 0;
+ -GtkScrolledWindow-scrollbars-within-bevel: 1;
+ -GtkToolItemGroup-expander-size: 11;
+ -GtkExpander-expander-size: 11;
+ -GtkTreeView-expander-size: 11;
+ -GtkTreeView-horizontal-separator: 4;
+ -GtkMenu-horizontal-padding: 0;
+ -GtkMenu-vertical-padding: 0;
+ -GtkWidget-link-color: #4a90d9;
+ -GtkWidget-visited-link-color: #4a90d9;
+ -GtkWidget-focus-padding: 2;
+ -GtkWidget-focus-line-width: 1;
+ -GtkWindow-resize-grip-width: 0;
+ -GtkWindow-resize-grip-height: 0;
+ outline-color: rgba(238, 238, 236, 0.7);
+ outline-style: dashed;
+ outline-offset: 2px; }
+
+/***************
+ * Base States *
+ ***************/
+.background {
+ color: #eeeeec;
+ background-color: #393f3f; }
+
+.background:backdrop {
+ text-shadow: none;
+ icon-shadow: none;
+ color: white; }
+
+/*
+ These wildcard seems unavoidable, need to investigate.
+ Wildcards are bad and troublesome, use them with care,
+ or better, just don't.
+ Everytime a wildcard is used a kitten dies, painfully.
+*/
+*:selected,
+*:selected:focus {
+ background-color: #2a76c6;
+ color: white; }
+
+*:selected:backdrop {
+ background-color: #2a76c6;
+ color: white; }
+
+*:insensitive {
+ -gtk-image-effect: dim; }
+
+*:hover {
+ -gtk-image-effect: highlight; }
+
+.gtkstyle-fallback {
+ background-color: #393f3f;
+ color: #eeeeec; }
+
+.gtkstyle-fallback:prelight {
+ background-color: #515a5a;
+ color: #eeeeec; }
+
+.gtkstyle-fallback:active {
+ background-color: #212424;
+ color: #eeeeec; }
+
+.gtkstyle-fallback:insensitive {
+ background-color: transparent;
+ color: white; }
+
+.gtkstyle-fallback:selected {
+ background-color: #2a76c6;
+ color: white; }
+
+GtkImage,
+GtkImage:insensitive,
+GtkLabel,
+GtkLabel:insensitive,
+GtkBox,
+GtkBox:insensitive,
+GtkGrid,
+GtkGrid:insensitive {
+ background-color: transparent; }
+
+ keyframes spin {
+ to {
+ -gtk-icon-transform: rotate(1turn); } }
+.spinner {
+ background-image: none;
+ background-color: blue;
+ opacity: 0;
+ /* non spinning spinner makes no sense */
+ -gtk-icon-source: url("assets/spinner.svg"); }
+ .spinner:active {
+ opacity: 1;
+ animation: spin 1s linear infinite; }
+ .spinner:active:insensitive {
+ opacity: 0.5; }
+
+/****************
+ * Text Entries *
+ ****************/
+.entry, .linked .entry {
+ padding: 4px;
+ color: #eeeeec;
+ border-radius: 3px;
+ transition: all 200ms ease-out;
+ border: 1px solid #090909;
+ background-image: linear-gradient(to bottom, #262626 0%, #333333 90%);
+ box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.4), 0 1px rgba(238, 238, 236, 0.1);
+ background-color: transparent; }
+ .entry:insensitive {
+ color: white;
+ background-image: none;
+ background-color: transparent;
+ box-shadow: 0 1px rgba(238, 238, 236, 0.1); }
+ .entry:focus {
+ border-color: #2a76c6;
+ box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.4), inset 0 0 2px 1px rgba(42, 118, 198, 0.5), 0 1px
rgba(238, 238, 236, 0.1);
+ /* not working */ }
+ .entry:backdrop {
+ background-image: none;
+ box-shadow: none;
+ /* let's make it flat */ }
+ .entry GtkLabel, .linked .entry GtkLabel {
+ text-shadow: 0 1px red; }
+
+.linked .entry:first-child {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-right-width: 0; }
+.linked .entry:last-child {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0; }
+
+/***********
+ * Buttons *
+ ***********/
+.button, .linked .button, GtkComboBox .button,
+.toolbar .button.raised,
+.toolbar .raised .button,
+.toolbar GtkComboBox .button,
+.spinbutton.vertical .button {
+ border-radius: 3px;
+ transition: all 200ms ease-out;
+ padding: 4px;
+ border-width: 1px;
+ border-style: solid;
+ color: #eeeeec;
+ border-color: #212424;
+ background-image: linear-gradient(to bottom, #515a5a, #393f3f 40%, #212424);
+ text-shadow: 0 -1px rgba(17, 17, 19, 0.5);
+ icon-shadow: 0 -1px rgba(17, 17, 19, 0.5);
+ 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,
+ .toolbar .button.raised:hover,
+ .toolbar .raised .button:hover,
+ .toolbar GtkComboBox .button:hover,
+ .spinbutton.vertical .button:hover {
+ border-width: 1px;
+ border-style: solid;
+ 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);
+ 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,
+ .toolbar .raised .button:active,
+ .toolbar GtkComboBox .button:active,
+ .spinbutton.vertical .button:active {
+ border-width: 1px;
+ border-style: solid;
+ color: #eeeeec;
+ border-color: #212424;
+ background-image: linear-gradient(to bottom, #090909, #151717 5%, #212424);
+ text-shadow: 0 -1px rgba(17, 17, 19, 0.5);
+ icon-shadow: 0 -1px rgba(17, 17, 19, 0.5);
+ 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,
+ .toolbar .raised .button:backdrop,
+ .toolbar GtkComboBox .button:backdrop,
+ .spinbutton.vertical .button:backdrop {
+ border-width: 1px;
+ border-style: solid;
+ color: #eeeeec;
+ border-color: #090909;
+ background-image: none;
+ text-shadow: none;
+ icon-shadow: none;
+ 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 {
+ border-width: 1px;
+ border-style: solid;
+ color: #393f3f;
+ border-color: #090909;
+ background-image: linear-gradient(to bottom, #eeeeec); }
+ .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: white;
+ border-color: white; }
+ .button:backdrop:insensitive:active,
+ .toolbar .button.raised:backdrop:insensitive:active,
+ .toolbar .raised .button:backdrop:insensitive:active,
+ .toolbar GtkComboBox .button:backdrop:insensitive:active,
+ .spinbutton.vertical .button:backdrop:insensitive:active {
+ border-width: 1px;
+ border-style: solid;
+ color: #393f3f;
+ border-color: white;
+ background-image: linear-gradient(to bottom, white);
+ box-shadow: none; }
+ .button:insensitive,
+ .toolbar .button.raised:insensitive,
+ .toolbar .raised .button:insensitive,
+ .toolbar GtkComboBox .button:insensitive,
+ .spinbutton.vertical .button:insensitive {
+ border-width: 1px;
+ border-style: solid;
+ color: white;
+ border-color: white;
+ background-image: none;
+ text-shadow: none;
+ icon-shadow: none;
+ box-shadow: 0 1px rgba(238, 238, 236, 0.1); }
+ .button:insensitive:active,
+ .toolbar .button.raised:insensitive:active,
+ .toolbar .raised .button:insensitive:active,
+ .toolbar GtkComboBox .button:insensitive:active,
+ .spinbutton.vertical .button:insensitive:active {
+ border-width: 1px;
+ border-style: solid;
+ color: white;
+ border-color: white;
+ box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2), 0 1px rgba(238, 238, 236, 0.1); }
+ .button.suggested-action,
+ .toolbar .button.raised.suggested-action,
+ .toolbar .raised .button.suggested-action,
+ .toolbar GtkComboBox .suggested-action.button,
+ .spinbutton.vertical .button.suggested-action {
+ border-width: 1px;
+ border-style: solid;
+ color: white;
+ border-color: #215d9c;
+ background-image: linear-gradient(to bottom, #4a90d9, #2a76c6 40%, #215d9c);
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
+ icon-shadow: 0 -1px rgba(0, 0, 0, 0.5);
+ 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,
+ .toolbar .raised .button.suggested-action:hover,
+ .toolbar GtkComboBox .suggested-action.button:hover,
+ .spinbutton.vertical .button.suggested-action:hover {
+ border-width: 1px;
+ border-style: solid;
+ 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);
+ 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,
+ .toolbar .raised .button.suggested-action:active,
+ .toolbar GtkComboBox .suggested-action.button:active,
+ .spinbutton.vertical .button.suggested-action:active {
+ border-width: 1px;
+ border-style: solid;
+ color: white;
+ border-color: #215d9c;
+ background-image: linear-gradient(to bottom, #184472, #1c5187 5%, #215d9c);
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
+ icon-shadow: 0 -1px rgba(0, 0, 0, 0.5);
+ 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,
+ .toolbar .raised .button.suggested-action:backdrop,
+ .toolbar GtkComboBox .suggested-action.button:backdrop,
+ .spinbutton.vertical .button.suggested-action:backdrop {
+ border-width: 1px;
+ border-style: solid;
+ color: #eeeeec;
+ border-color: #090909;
+ background-image: none;
+ text-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: white;
+ border-color: white; }
+ .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 {
+ border-width: 1px;
+ border-style: solid;
+ color: white;
+ border-color: white;
+ background-image: none;
+ text-shadow: none;
+ icon-shadow: none;
+ box-shadow: 0 1px rgba(238, 238, 236, 0.1); }
+ .button.destructive-action,
+ .toolbar .button.raised.destructive-action,
+ .toolbar .raised .button.destructive-action,
+ .toolbar GtkComboBox .destructive-action.button,
+ .spinbutton.vertical .button.destructive-action {
+ border-width: 1px;
+ border-style: solid;
+ color: white;
+ border-color: #a60c0c;
+ background-image: linear-gradient(to bottom, #ef2929, #d51010 40%, #a60c0c);
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
+ icon-shadow: 0 -1px rgba(0, 0, 0, 0.5);
+ 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,
+ .toolbar .raised .button.destructive-action:hover,
+ .toolbar GtkComboBox .destructive-action.button:hover,
+ .spinbutton.vertical .button.destructive-action:hover {
+ border-width: 1px;
+ border-style: solid;
+ 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);
+ 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,
+ .toolbar .raised .button.destructive-action:active,
+ .toolbar GtkComboBox .destructive-action.button:active,
+ .spinbutton.vertical .button.destructive-action:active {
+ border-width: 1px;
+ border-style: solid;
+ color: white;
+ border-color: #a60c0c;
+ background-image: linear-gradient(to bottom, #760909, #8e0b0b 5%, #a60c0c);
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
+ icon-shadow: 0 -1px rgba(0, 0, 0, 0.5);
+ 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,
+ .toolbar .raised .button.destructive-action:backdrop,
+ .toolbar GtkComboBox .destructive-action.button:backdrop,
+ .spinbutton.vertical .button.destructive-action:backdrop {
+ border-width: 1px;
+ border-style: solid;
+ color: #eeeeec;
+ border-color: #090909;
+ background-image: none;
+ text-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: white;
+ border-color: white; }
+ .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 {
+ border-width: 1px;
+ border-style: solid;
+ color: white;
+ border-color: white;
+ background-image: none;
+ text-shadow: none;
+ icon-shadow: none;
+ box-shadow: 0 1px rgba(238, 238, 236, 0.1); }
+
+/* GtkComboBoxes text color*/
+GtkComboBox:insensitive {
+ color: white; }
+GtkComboBox:backdrop {
+ color: white; }
+GtkComboBox:backdrop:insensitive {
+ color: rgba(255, 255, 255, 0.5); }
+
+/* menu/popover buttons */
+.menuitem.button, .menuitem.button:active, .menuitem.button:insensitive, .menuitem.button:active:insensitive
{
+ color: #eeeeec;
+ background-color: transparent;
+ background-image: none;
+ border-color: transparent;
+ border-image: none;
+ border-style: none;
+ box-shadow: none; }
+ .menuitem.button:active, .menuitem.button:insensitive, .menuitem.button:active:insensitive {
+ /* override generic .button:* */ }
+ .menuitem.button:backdrop, .menuitem.button:backdrop:active:insensitive, .menuitem.button:hover:backdrop,
.menuitem.button:insensitive:backdrop, .menuitem.button:active:insensitive:backdrop,
.menuitem.button:active:backdrop, .menuitem.button:active:hover:backdrop,
.menuitem.button:active:selected:backdrop {
+ text-shadow: none;
+ icon-shadow: none;
+ color: white;
+ background-color: transparent;
+ background-image: none;
+ border: none;
+ box-shadow: none; }
+
+.linked .button {
+ padding: 6px;
+ border-radius: 0;
+ border-right-width: 0; }
+ .linked .button:first-child {
+ border-radius: 3px 0 0 3px;
+ border-width: 1px 0 1px 1px; }
+ .linked .button:last-child {
+ border-radius: 0 3px 3px 0;
+ border-width: 1px; }
+ .linked .button:only-child {
+ border-radius: 3px;
+ border-width: 1px; }
+
+.header-bar .button.text-button {
+ padding: 6px 8px 5px;
+ /* due to font metrics the image buttons are 1px shorter */ }
+.header-bar .button.image-button {
+ padding: 8px; }
+
+/**************
+ * ComboBoxes *
+ **************/
+GtkComboBox {
+ padding: 0;
+ -GtkComboBox-arrow-scaling: 0.5;
+ -GtkComboBox-shadow-type: none; }
+ GtkComboBox .separator {
+ /* always disable separators */
+ -GtkWidget-wide-separators: true;
+ -GtkWidget-horizontal-separator: 0;
+ -GtkWidget-vertical-separator: 0; }
+ GtkComboBox.combobox-entry .entry:first-child {
+ border-radius: 3px 0 0 3px;
+ border-right: 0; }
+ GtkComboBox.combobox-entry .button:first-child {
+ border-radius: 3px 0 0 3px; }
+ GtkComboBox.combobox-entry .entry:last-child {
+ border-radius: 0 3px 3px 0;
+ border-left: 0; }
+ GtkComboBox.combobox-entry .button:last-child {
+ border-radius: 0 3px 3px 0; }
+ GtkComboBox .linked .button, .linked GtkComboBox .button, GtkComboBox .button {
+ padding: 4px 6px; }
+
+/***************
+ * Header bars *
+ ***************/
+.header-bar {
+ border-width: 0 0 1px;
+ border-style: solid;
+ border-color: black;
+ border-radius: 7px 7px 0 0;
+ background-color: transparent;
+ background-image: linear-gradient(to bottom, #3e4444, #2d3232);
+ box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2), inset 0 1px rgba(238, 238, 236, 0.1);
+ padding: 6px; }
+ .header-bar:backdrop {
+ background-image: none;
+ background-color: #393f3f; }
+ .header-bar .title {
+ font: Bold;
+ padding: 0px 12px; }
+ .header-bar .subtitle {
+ font-size: 80%;
+ padding: 0 12px; }
+ .header-bar > GtkBox > .separator.vertical {
+ -GtkWidget-wide-separators: 1;
+ -GtkWidget-separator-width: 2px;
+ background-color: transparent;
+ border-width: 0 1px;
+ border-style: solid;
+ border-color: transparent;
+ border-image: -gtk-scaled(url("assets/header-separator-dark.png"), url("assets/header-separator-dark 2
png")) 0 1 0 1/0 1px 0 1px stretch; }
+ .header-bar.selection-mode {
+ color: #1c5187;
+ text-shadow: 0 1px rgba(0, 0, 0, 0.6);
+ background-image: linear-gradient(to bottom, #3583d5, #2b7bcf); }
+
+.window-frame.tiled .header-bar {
+ border-radius: 0;
+ /* FIXME doesn't work */ }
+
+/***************
+ * Popovers *
+ ***************/
+GtkPopover {
+ border-radius: 5px;
+ background-clip: border-box;
+ /*
+ background-color: @osd_popover_bg;
+ */
+ background-color: #393f3f;
+ border-color: black;
+ border-width: 1px;
+ border-style: solid;
+ box-shadow: 0 2px 3px rgba(0, 0, 0, 0.6);
+ margin: 10px;
+ padding: 2px; }
+ GtkPopover:backdrop {
+ box-shadow: none; }
+ GtkPopover > .list, GtkPopover > .view, GtkPopover > .toolbar {
+ background-color: transparent; }
+ GtkPopover .separator {
+ font-size: 80%;
+ font-weight: bold;
+ color: rgba(238, 238, 236, 0.6);
+ text-shadow: none;
+ background-color: transparent;
+ icon-shadow: none;
+ border: 0; }
+
+/*****************
+ * Notebooks and *
+ * Tabs *
+ *****************/
+.notebook {
+ padding: 0;
+ border-style: solid;
+ border-color: #090909;
+ background-color: #333333;
+ -GtkNotebook-initial-gap: 10;
+ -GtkNotebook-arrow-spacing: 5;
+ -GtkNotebook-tab-curvature: 0;
+ -GtkNotebook-tab-overlap: 1;
+ -GtkNotebook-has-tab-gap: false;
+ -GtkWidget-focus-padding: 0;
+ -GtkWidget-focus-line-width: 0;
+ transition: all 200ms ease-out; }
+
+.notebook.frame {
+ border-width: 1px; }
+
+.notebook.header {
+ background-color: #2d3232;
+ box-shadow: inset 0 6px 3px -5px rgba(0, 0, 0, 0.25);
+ border-width: 0px; }
+
+.notebook.header.frame {
+ border: 1px solid #090909; }
+ .notebook.header.frame.top {
+ border-bottom: none; }
+ .notebook.header.frame.bottom {
+ border-top: none; }
+ .notebook.header.frame.right {
+ border-left: none; }
+ .notebook.header.frame.left {
+ border-right: none; }
+
+.notebook tab {
+ border-width: 0;
+ background-color: transparent; }
+ .notebook tab.top, .notebook tab.bottom {
+ padding: 8px 20px; }
+ .notebook tab.left, .notebook tab.right {
+ padding: 5px 20px; }
+
+.notebook tab GtkLabel {
+ font-weight: bold;
+ color: white; }
+ .notebook tab GtkLabel.active-page {
+ color: #eeeeec; }
+ .notebook tab GtkLabel.prelight-page {
+ color: white; }
+
+.notebook tab GtkLabel.active-page {
+ color: #eeeeec; }
+
+.notebook tab.top:hover {
+ box-shadow: inset 0 -2px #090909; }
+.notebook tab.top:active {
+ box-shadow: inset 0 -2px #2a76c6; }
+.notebook tab.bottom:hover {
+ box-shadow: inset 0 2px #090909; }
+.notebook tab.bottom:active {
+ box-shadow: inset 0 2px #2a76c6; }
+.notebook tab.right:hover {
+ box-shadow: inset 2px 0 #090909; }
+.notebook tab.right:active {
+ box-shadow: inset 2px 0 #2a76c6; }
+.notebook tab.left:hover {
+ box-shadow: inset -2px 0 #090909; }
+.notebook tab.left:active {
+ box-shadow: inset -2px 0 #2a76c6; }
+
+/***************
+ * WM Stuff *
+ ***************/
+.window-frame {
+ border-radius: 7px 7px 0 0;
+ /* lamefun trick to get rounded borders regardless of CSD use */
+ border-width: 0px;
+ box-shadow: 0 2px 10px 4px rgba(0, 0, 0, 0.05), 0 0 0 1px transparent;
+ /* this is used for the resize cursor area */
+ margin: 10px; }
+ .window-frame:backdrop {
+ box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px transparent; }
+ .window-frame.tiled {
+ border-radius: 0;
+ background-color: #393f3f; }
+
+.button.titlebutton {
+ padding: 8px;
+ border-color: transparent;
+ background-image: none;
+ box-shadow: none; }
+ .button.titlebutton:hover {
+ border-width: 1px;
+ border-style: solid;
+ color: #eeeeec;
+ border-color: #212424;
+ background-image: linear-gradient(to bottom, #515a5a, #393f3f 40%, #212424);
+ text-shadow: 0 -1px rgba(17, 17, 19, 0.5);
+ icon-shadow: 0 -1px rgba(17, 17, 19, 0.5);
+ 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;
+ border-style: solid;
+ color: #eeeeec;
+ border-color: #212424;
+ background-image: linear-gradient(to bottom, #090909, #151717 5%, #212424);
+ text-shadow: 0 -1px rgba(17, 17, 19, 0.5);
+ icon-shadow: 0 -1px rgba(17, 17, 19, 0.5);
+ 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;
+ border-style: solid;
+ color: #eeeeec;
+ border-color: #090909;
+ 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-dark.scss b/themes/Adwaita/gtk-3.0/gtk-contained-dark.scss
index d20ff6a..03d1911 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained-dark.scss
+++ b/themes/Adwaita/gtk-3.0/gtk-contained-dark.scss
@@ -21,11 +21,11 @@ $insensitive_fg_color: lighten($theme_fg_color, 10%);
$insensitive_bg_color: transparent;
//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_insensitive_color: lighten($insensitive_fg_color,5%); //FIXME
-$backdrop_borders_color: $borders_color;
+$_backdrop_base_color: darken($theme_base_color,5%);
+$_backdrop_bg_color: $theme_bg_color;
+$_backdrop_fg_color: $theme_fg_color;
+$_backdrop_insensitive_color: lighten($insensitive_fg_color,5%); //FIXME
+$_backdrop_borders_color: $borders_color;
@import 'drawing';
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained.css b/themes/Adwaita/gtk-3.0/gtk-contained.css
index a3853ef..8d4d868 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained.css
@@ -163,8 +163,8 @@ GtkGrid:insensitive {
color: #2e3436;
border-color: #a1a1a1;
background-image: linear-gradient(to bottom, white, #ededed 40%, lightgray);
- text-shadow: 0 1px rgba(255, 255, 255, 0.8);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.8);
+ 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,
@@ -177,8 +177,8 @@ GtkGrid:insensitive {
color: #2e3436;
border-color: #a1a1a1;
background-image: linear-gradient(to bottom, white, #f7f7f7 40%, #ededed);
- text-shadow: 0 1px rgba(255, 255, 255, 0.8);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.8);
+ 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); }
.button:active,
.toolbar .button.raised:active,
@@ -190,8 +190,8 @@ GtkGrid:insensitive {
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;
+ text-shadow: 0 1px white;
+ icon-shadow: 0 1px white;
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,
@@ -267,11 +267,11 @@ GtkGrid:insensitive {
border-width: 1px;
border-style: solid;
color: white;
- text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
- icon-shadow: 0 -1px rgba(0, 0, 0, 0.4);
border-color: #2b537d;
background-image: linear-gradient(to bottom, #98b9dc, #729fcf 40%, #4c85c2);
- box-shadow: 0 1px rgba(255, 255, 255, 0.05); }
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
+ icon-shadow: 0 -1px rgba(0, 0, 0, 0.5);
+ 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,
.toolbar .raised .button.suggested-action:hover,
@@ -280,10 +280,10 @@ GtkGrid:insensitive {
border-width: 1px;
border-style: solid;
color: white;
- text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
- icon-shadow: 0 -1px rgba(0, 0, 0, 0.4);
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);
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,10 +293,10 @@ GtkGrid:insensitive {
border-width: 1px;
border-style: solid;
color: white;
- text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
- icon-shadow: 0 -1px rgba(0, 0, 0, 0.4);
border-color: #2b537d;
background-image: linear-gradient(to bottom, #386ca3, #3e78b6 5%, #4c85c2);
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
+ icon-shadow: 0 -1px rgba(0, 0, 0, 0.5);
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,
@@ -305,8 +305,8 @@ GtkGrid:insensitive {
.spinbutton.vertical .button.suggested-action:backdrop {
border-width: 1px;
border-style: solid;
- color: #729fcf;
- border-color: #729fcf;
+ color: #748489;
+ border-color: #748489;
background-image: none;
text-shadow: none;
icon-shadow: none;
@@ -341,11 +341,11 @@ GtkGrid:insensitive {
border-width: 1px;
border-style: solid;
color: white;
- text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
- icon-shadow: 0 -1px rgba(0, 0, 0, 0.4);
border-color: #760909;
background-image: linear-gradient(to bottom, #f35858, #ef2929 40%, #d51010);
- box-shadow: 0 1px rgba(255, 255, 255, 0.05); }
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
+ icon-shadow: 0 -1px rgba(0, 0, 0, 0.5);
+ 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,
.toolbar .raised .button.destructive-action:hover,
@@ -354,10 +354,10 @@ GtkGrid:insensitive {
border-width: 1px;
border-style: solid;
color: white;
- text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
- icon-shadow: 0 -1px rgba(0, 0, 0, 0.4);
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);
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,10 +367,10 @@ GtkGrid:insensitive {
border-width: 1px;
border-style: solid;
color: white;
- text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
- icon-shadow: 0 -1px rgba(0, 0, 0, 0.4);
border-color: #760909;
background-image: linear-gradient(to bottom, #a60c0c, #bd0e0e 5%, #d51010);
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
+ icon-shadow: 0 -1px rgba(0, 0, 0, 0.5);
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,
@@ -379,8 +379,8 @@ GtkGrid:insensitive {
.spinbutton.vertical .button.destructive-action:backdrop {
border-width: 1px;
border-style: solid;
- color: #ef2929;
- border-color: #ef2929;
+ color: #748489;
+ border-color: #748489;
background-image: none;
text-shadow: none;
icon-shadow: none;
@@ -648,8 +648,8 @@ GtkPopover {
color: #2e3436;
border-color: #a1a1a1;
background-image: linear-gradient(to bottom, white, #ededed 40%, lightgray);
- text-shadow: 0 1px rgba(255, 255, 255, 0.8);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.8);
+ 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); }
.button.titlebutton:active {
border-width: 1px;
@@ -657,8 +657,8 @@ GtkPopover {
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;
+ text-shadow: 0 1px white;
+ icon-shadow: 0 1px white;
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;
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained.scss b/themes/Adwaita/gtk-3.0/gtk-contained.scss
index 6e1675a..2946d90 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained.scss
+++ b/themes/Adwaita/gtk-3.0/gtk-contained.scss
@@ -32,11 +32,11 @@ $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: $insensitive_fg_color;
-$backdrop_insensitive_color: darken($backdrop_bg_color,15%);
-$backdrop_borders_color: $insensitive_fg_color;
+$_backdrop_base_color: darken($theme_base_color,5%);
+$_backdrop_bg_color: $theme_bg_color;
+$_backdrop_fg_color: $insensitive_fg_color;
+$_backdrop_insensitive_color: darken($_backdrop_bg_color,15%);
+$_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]
