[gnome-themes-standard] Use a blue selection bar

From: Cosimo Cecchi <cosimoc src gnome org>
To: commits-list gnome org
Cc:
Subject: [gnome-themes-standard] Use a blue selection bar
Date: Tue, 8 Jan 2013 22:59:22 +0000 (UTC)
commit 372c27fc3af66e27b81a58f98ce01672a58de0f6
Author: William Jon McCann <jmccann redhat com>
Date:   Fri Dec 21 16:12:37 2012 -0500

    Use a blue selection bar
    
    https://bugzilla.gnome.org/show_bug.cgi?id=690627

 themes/Adwaita/gtk-3.0/gtk-main-common.css         |   10 --
 themes/Adwaita/gtk-3.0/gtk-main-dark.css           |   34 +++-
 themes/Adwaita/gtk-3.0/gtk-main.css                |   46 ++++--
 themes/Adwaita/gtk-3.0/gtk-widgets-borders.css     |    2 -
 .../Adwaita/gtk-3.0/gtk-widgets-dark-overrides.css |   16 ++
 themes/Adwaita/gtk-3.0/gtk-widgets.css             |  172 ++++++++++++++------
 6 files changed, 195 insertions(+), 85 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/gtk-main-common.css b/themes/Adwaita/gtk-3.0/gtk-main-common.css
index fdef372..0bc3a0e 100644
--- a/themes/Adwaita/gtk-3.0/gtk-main-common.css
+++ b/themes/Adwaita/gtk-3.0/gtk-main-common.css
@@ -63,16 +63,6 @@
 @define-color osd_scrollbar_slider_active shade(@osd_scrollbar_trough, 2.10);
 @define-color osd_scrollbar_slider_backdrop shade(@osd_scrollbar_trough_backdrop, 1.50);
 
-/**************************
- * Selection Mode classes *
- **************************/
- define-color selection_toolbar_suggested_button_a #7fc141;
- define-color selection_toolbar_suggested_button_b #47850d;
- define-color selection_toolbar_suggested_button_c #4e9a06;
-
- define-color selection_toolbar_suggested_button_fg #ffffff;
- define-color selection_toolbar_suggested_button_shadow alpha(black, 0.30);
-
 /*********************
  * Error/Warning/... *
  *********************/
diff --git a/themes/Adwaita/gtk-3.0/gtk-main-dark.css b/themes/Adwaita/gtk-3.0/gtk-main-dark.css
index 53959f2..1b7e127 100644
--- a/themes/Adwaita/gtk-3.0/gtk-main-dark.css
+++ b/themes/Adwaita/gtk-3.0/gtk-main-dark.css
@@ -112,15 +112,6 @@
 
 @define-color primary_toolbar_button_text_shadow alpha(black, 0.1);
 
- define-color selection_toolbar_bg #191c1d;
- define-color selection_toolbar_fg shade(@theme_text_color, 0.80);
- define-color selection_toolbar_border @internal_element_color;
-
- define-color selection_menu_border @internal_element_color;
- define-color selection_menu_strong @theme_text_color;
- define-color selection_menu_fg shade(@theme_text_color, 0.80);
- define-color selection_menu_dim shade(@theme_text_color, 0.70);
-
 @define-color content_view_bg #242424;
 @define-color list_box_bg @theme_base_color;
 
@@ -146,6 +137,31 @@
 @define-color inset_light_color alpha(white, 0.05);
 @define-color inset_dark_color alpha(black, 0.25);
 
+/**************************
+ * Selection Mode classes *
+ **************************/
+ define-color selection_toolbar_button_a #729fcf;
+ define-color selection_toolbar_button_b #3465a4;
+ define-color selection_toolbar_button_fg #bfbfbf;
+ define-color selection_toolbar_button_border #23446f;
+ define-color selection_toolbar_shadow alpha(black, 0.30);
+
+ define-color selection_toolbar_suggested_button_a #3e4545;
+ define-color selection_toolbar_suggested_button_b #2e3232;
+ define-color selection_toolbar_suggested_button_c #2a2828;
+ define-color selection_toolbar_suggested_button_fg #ffffff;
+ define-color selection_toolbar_suggested_button_border #1f2020;
+
+ define-color selection_toolbar_bg_a #3465a4;
+ define-color selection_toolbar_bg_b #1d437b;
+ define-color selection_toolbar_fg #729fcf;
+ define-color selection_toolbar_shadow #204a87;
+ define-color selection_toolbar_border #183967;
+
+ define-color selection_menu_fg #729fcf;
+ define-color selection_menu_hover shade(@selection_menu_fg, 1.15);
+ define-color selection_menu_active shade(@selection_menu_fg, 1.30);
+
 /**************
  * GNOME Apps *
  **************/
diff --git a/themes/Adwaita/gtk-3.0/gtk-main.css b/themes/Adwaita/gtk-3.0/gtk-main.css
index 25f9f08..033ac56 100644
--- a/themes/Adwaita/gtk-3.0/gtk-main.css
+++ b/themes/Adwaita/gtk-3.0/gtk-main.css
@@ -112,15 +112,6 @@
 
 @define-color primary_toolbar_button_text_shadow alpha(black, 0.1);
 
- define-color selection_toolbar_bg @theme_base_color;
- define-color selection_toolbar_fg @internal_element_color;
- define-color selection_toolbar_border @internal_element_color;
-
- define-color selection_menu_border #a9ada9;
- define-color selection_menu_strong #555753;
- define-color selection_menu_fg @internal_element_color;
- define-color selection_menu_dim shade(@internal_element_color, 1.15);
-
 @define-color content_view_bg #f1f2f1;
 @define-color list_box_bg #fafaf9;
 
@@ -130,12 +121,6 @@
 
 @define-color app_notification_border #949486;
 
- define-color suggested_action_button_a #74a9e0;
- define-color suggested_action_button_b #4287cf;
- define-color suggested_action_button_border #204a87;
- define-color suggested_action_button_fg #ffffff;
- define-color suggested_action_button_shadow shade(@suggested_action_button_border, 1.15);
-
 @define-color treeview_focus_border #2a79cb;
 
 @define-color view_separators shade(@borders, 1.30);
@@ -146,6 +131,37 @@
 @define-color inset_light_color alpha(white, 0.45);
 @define-color inset_dark_color alpha(black, 0.07);
 
+ define-color suggested_action_button_a #74a9e0;
+ define-color suggested_action_button_b #4287cf;
+ define-color suggested_action_button_border #204a87;
+ define-color suggested_action_button_fg @theme_base_color;
+ define-color suggested_action_button_shadow shade(@suggested_action_button_border, 1.15);
+
+/**************************
+ * Selection Mode classes *
+ **************************/
+ define-color selection_toolbar_bg_a #97b9db;
+ define-color selection_toolbar_bg_b #729fcf;
+ define-color selection_toolbar_fg #3465a4;
+ define-color selection_toolbar_border @selection_toolbar_bg;
+ define-color selection_toolbar_shadow alpha(white, 0.40);
+
+ define-color selection_toolbar_button_a #bcd1e8;
+ define-color selection_toolbar_button_b #5a8fc7;
+ define-color selection_toolbar_button_fg @theme_base_color;
+ define-color selection_toolbar_button_border #3465a4;
+
+ define-color selection_toolbar_suggested_button_a @theme_base_color;
+ define-color selection_toolbar_suggested_button_b @theme_bg_color;
+ define-color selection_toolbar_suggested_button_c #f3f4f3;
+ define-color selection_toolbar_suggested_button_fg @theme_text_color;
+ define-color selection_toolbar_suggested_button_shadow alpha(white, 0.40);
+ define-color selection_toolbar_suggested_button_border #3465a4;
+
+ define-color selection_menu_fg #3465a4;
+ define-color selection_menu_hover shade(@selection_menu_fg, 0.80);
+ define-color selection_menu_active shade(@selection_menu_fg, 0.60);
+
 /**************
  * GNOME Apps *
  **************/
diff --git a/themes/Adwaita/gtk-3.0/gtk-widgets-borders.css b/themes/Adwaita/gtk-3.0/gtk-widgets-borders.css
index a844cd6..5fb82a1 100644
--- a/themes/Adwaita/gtk-3.0/gtk-widgets-borders.css
+++ b/themes/Adwaita/gtk-3.0/gtk-widgets-borders.css
@@ -203,8 +203,6 @@ column-header:last-child .button:backdrop {
 
 
 /* unfocused window: generic element borders */
-.selection-mode.toolbar .suggested-action.button:backdrop, 
-.selection-mode.toolbar GtkToolButton.suggested-action .button:backdrop,
 .button:backdrop,
 .spinbutton.vertical .button:backdrop,
 GtkComboBox.combobox-entry .entry:backdrop,
diff --git a/themes/Adwaita/gtk-3.0/gtk-widgets-dark-overrides.css b/themes/Adwaita/gtk-3.0/gtk-widgets-dark-overrides.css
index be285bc..3b90744 100644
--- a/themes/Adwaita/gtk-3.0/gtk-widgets-dark-overrides.css
+++ b/themes/Adwaita/gtk-3.0/gtk-widgets-dark-overrides.css
@@ -223,3 +223,19 @@ GtkColorEditor GtkColorSwatch.color-light:hover {
     background-image: none;
     border-color: @unfocused_borders;
 }
+
+.selection-mode.toolbar .button *,
+.selection-mode.toolbar GtkToolButton .button *,
+.selection-mode.toolbar .button *:active,
+.selection-mode.toolbar GtkToolButton .button *:active {
+    text-shadow: 0 -1px @selection_toolbar_button_shadow;
+    icon-shadow: 0 -1px @selection_toolbar_button_shadow;
+}
+
+.selection-mode.toolbar .suggested-action.button *,
+.selection-mode.toolbar GtkToolButton.suggested-action .button *,
+.selection-mode.toolbar .suggested-action.button *:active,
+.selection-mode.toolbar GtkToolButton.suggested-action *:active {
+    text-shadow: 0 -1px @button_text_shadow;
+    icon-shadow: 0 -1px @button_text_shadow;
+}
diff --git a/themes/Adwaita/gtk-3.0/gtk-widgets.css b/themes/Adwaita/gtk-3.0/gtk-widgets.css
index 2f74ccd..6fb522e 100644
--- a/themes/Adwaita/gtk-3.0/gtk-widgets.css
+++ b/themes/Adwaita/gtk-3.0/gtk-widgets.css
@@ -2917,6 +2917,7 @@ GtkProgressBar.osd.progressbar {
     border-width: 1px;
 
     color: @suggested_action_button_fg;
+
     text-shadow: 0 -1px @suggested_action_button_shadow;
 }
 
@@ -2934,6 +2935,8 @@ GtkProgressBar.osd.progressbar {
     background-image: linear-gradient(to bottom,
                                       @suggested_action_button_b,
                                       @suggested_action_button_a);
+
+    color: @suggested_action_button_fg;
 }
 
 .toolbar .suggested-action.button:backdrop,
@@ -2943,15 +2946,6 @@ GtkProgressBar.osd.progressbar {
     border-color: @unfocused_borders;
 }
 
-.toolbar .suggested-action.button *:hover,
-.toolbar .suggested-action.button *:active,
-.toolbar .suggested-action.button *:hover:active,
-.suggested-action.button *:hover,
-.suggested-action.button *:active,
-.suggested-action.button *:hover:active {
-    color: @suggested_action_button_fg;
-}
-
 .toolbar .suggested-action.button *:active,
 .toolbar .suggested-action.button *:hover:active,
 .suggested-action.button *:active,
@@ -2969,63 +2963,101 @@ GtkProgressBar.osd.progressbar {
  **************************/
 .selection-mode.toolbar {
     color: @selection_toolbar_fg;
-    background-color: @selection_toolbar_bg;
-    text-shadow: 1px 1px @primary_toolbar_button_text_shadow;
+    background-image: linear-gradient(to bottom,
+                                      @selection_toolbar_bg_a,
+                                      @selection_toolbar_bg_b);
+    background-color: transparent;
 
-    border-top-width: 1px;
     border-color: @borders;
     border-style: solid;
-    padding-top: 3px;
+
+    text-shadow: 0 1px @selection_toolbar_shadow;
 }
 
-.selection-mode.toolbar .selection-menu.button {
-    background-image: none;
+/* regular button */
+.selection-mode.toolbar .button,
+.selection-mode.toolbar GtkToolButton .button {
+    background-image: linear-gradient(to bottom,
+                                      @selection_toolbar_button_a,
+                                      @selection_toolbar_button_b);
+
     border-image: none;
-    color: @selection_menu_fg;
+    border-color: @selection_toolbar_button_border;
+    border-width: 1px;
+
+    box-shadow: inset 0 1px alpha(white, 0.1);
+
+    color: @selection_toolbar_button_fg;
 }
 
-.selection-mode.toolbar .selection-menu.button:backdrop {
-    background-color: @selection_toolbar_bg;
+.selection-mode.toolbar .button:hover,
+.selection-mode.toolbar GtkToolButton .button:hover {
+    background-image: linear-gradient(to bottom,
+                                      shade(@selection_toolbar_button_a, 1.05),
+                                      shade(@selection_toolbar_button_b, 1.02));
 }
 
-.selection-mode.toolbar .selection-menu.button .dim-label {
-    color: @selection_menu_dim;
+.selection-mode.toolbar .button:active,
+.selection-mode.toolbar .button:hover:active,
+.selection-mode.toolbar GtkToolButton .button:active,
+.selection-mode.toolbar GtkToolButton .button:hover:active {
+    background-image: linear-gradient(to bottom,
+                                      shade(@selection_toolbar_button_b, 0.95),
+                                      shade(@selection_toolbar_button_a, 0.88));
+    box-shadow: none;
 }
 
-.selection-mode.toolbar .selection-menu.button:hover,
-.selection-mode.toolbar .selection-menu.button:active {
-    color: @selection_menu_strong;
+.selection-mode.toolbar .button:backdrop,
+.selection-mode.toolbar GtkToolButton .button:backdrop {
+    text-shadow: none;
+    icon-shadow: none;
+
+    background-image: none;
+    background-color: transparent;
+    border-color: alpha(@selection_toolbar_button_border, 0.3);
+
+    box-shadow: none;
+    color: @selection_toolbar_button_fg;
 }
 
-.selection-mode.toolbar .selection-menu.button:active {
-    border-color: @selection_menu_border;
-    border-radius: 3px;
-    border-width: 1px;
+.selection-mode.toolbar .button *:active,
+.selection-mode.toolbar GtkToolButton .button *:active {
+    color: @selection_toolbar_button_fg;
 }
 
+.selection-mode.toolbar .button *,
+.selection-mode.toolbar GtkToolButton .button *,
+.selection-mode.toolbar .button *:active,
+.selection-mode.toolbar GtkToolButton .button *:active {
+    text-shadow: 0 1px @selection_toolbar_button_shadow;
+    icon-shadow: 0 1px @selection_toolbar_button_shadow;
+}
+
+/* suggested button */
 .selection-mode.toolbar .suggested-action.button,
 .selection-mode.toolbar GtkToolButton.suggested-action .button {
     background-image: linear-gradient(to bottom,
                                       @selection_toolbar_suggested_button_a,
-                                      @selection_toolbar_suggested_button_b 83%,
+                                      @selection_toolbar_suggested_button_b 40%,
                                       @selection_toolbar_suggested_button_c);
     padding-left: 6px;
     padding-right: 6px;
 
-    box-shadow: inset 0 2px alpha(white, 0.2), inset 0 1px @selection_toolbar_suggested_button_a;
-
-    text-shadow: 0 -1px @selection_toolbar_suggested_button_shadow;
-    icon-shadow: 0 -1px @selection_toolbar_suggested_button_shadow;
+    border-image: none;
+    border-color: @selection_toolbar_suggested_button_border;
+    border-width: 1px;
 
-    color: @selection_toolbar_suggested_button_fg;
+    box-shadow: inset 0 2px alpha(@selection_toolbar_suggested_button_b, 0.2),
+                inset 0 1px @selection_toolbar_suggested_button_a;
+    color: @theme_text_color;
 }
 
 .selection-mode.toolbar .suggested-action.button:hover,
 .selection-mode.toolbar GtkToolButton.suggested-action .button:hover {
     background-image: linear-gradient(to bottom,
-                                      shade(@selection_toolbar_suggested_button_a, 1.20),
-                                      shade(@selection_toolbar_suggested_button_b, 1.10) 83%,
-                                      shade(@selection_toolbar_suggested_button_c, 1.10));
+                                      shade(@selection_toolbar_suggested_button_a, 1.15),
+                                      shade(@selection_toolbar_suggested_button_b, 1.15) 40%,
+                                      @selection_toolbar_suggested_button_c);
 }
 
 .selection-mode.toolbar .suggested-action.button:active,
@@ -3033,12 +3065,10 @@ GtkProgressBar.osd.progressbar {
 .selection-mode.toolbar GtkToolButton.suggested-action .button:active,
 .selection-mode.toolbar GtkToolButton.suggested-action .button:hover:active {
     background-image: linear-gradient(to bottom,
-                                      @selection_toolbar_suggested_button_b,
-                                      shade(@selection_toolbar_suggested_button_a, 0.90));
+                                      shade(@selection_toolbar_suggested_button_c, 0.92),
+                                      @selection_toolbar_suggested_button_b 40%,
+                                      shade(@selection_toolbar_suggested_button_a, 0.92));
     box-shadow: none;
-
-    text-shadow: 0 1px @button_active_text_shadow;
-    icon-shadow: 0 1px @button_active_text_shadow;
 }
 
 .selection-mode.toolbar .suggested-action.button:backdrop,
@@ -3047,21 +3077,65 @@ GtkProgressBar.osd.progressbar {
     icon-shadow: none;
 
     background-image: none; /* remove custom bg, we want colored buttons to look like normal buttons in backdrop*/
+    background-color: @selection_toolbar_suggested_button_b;
+    border-color: alpha(@selection_toolbar_button_border, 0.3);
 
     box-shadow: none;
-
     color: @theme_unfocused_fg_color;
+}
 
-    /* compensate different border images border-width settings */
-    padding-left: 5px;
-    padding-right: 5px;
+.selection-mode.toolbar .suggested-action.button *:active,
+.selection-mode.toolbar GtkToolButton.suggested-action *:active {
+    color: @theme_text_color;
 }
 
 .selection-mode.toolbar .suggested-action.button *,
-.selection-mode.toolbar GtkToolButton.suggested-action .button * {
-    text-shadow: inherit;
-    icon-shadow: inherit;
-    color: inherit;
+.selection-mode.toolbar GtkToolButton.suggested-action .button *,
+.selection-mode.toolbar .suggested-action.button *:active,
+.selection-mode.toolbar GtkToolButton.suggested-action *:active {
+    text-shadow: 0 1px @button_text_shadow;
+    icon-shadow: 0 1px @button_text_shadow;
+}
+
+/* menu button */
+.selection-mode.toolbar .selection-menu.button {
+    background-image: none;
+    border-image: none;
+    border-color: transparent;
+    border: 0px;
+    box-shadow: none;
+
+    color: @selection_menu_fg;
+}
+
+.selection-mode.toolbar .selection-menu.button:backdrop {
+    background-color: transparent;
+    color: @selection_menu_fg;
+}
+
+.selection-mode.toolbar .selection-menu.button:hover {
+    background-color: transparent;
+    color: @selection_menu_hover;
+}
+
+.selection-mode.toolbar .selection-menu.button:active {
+    border-color: transparent;
+    border-radius: 3px;
+    border-width: 1px;
+
+    background-color: transparent;
+}
+
+.selection-mode.toolbar .selection-menu.button *:active {
+    color: @selection_menu_active;
+}
+
+.selection-mode.toolbar .selection-menu.button * {
+    text-shadow: 0 1px @selection_toolbar_shadow;
+}
+
+.selection-mode.toolbar .selection-menu.button .menuitem * {
+    text-shadow: none;
 }
 
 /****************
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]