GreenLaguna GTK3: improve spinbuttons

author: raveit65 <[email protected]> 2015-04-18 19:34:17 +0200
committer: raveit65 <[email protected]> 2015-04-18 19:55:19 +0200
commit: 07066560804371d99b0f4ed60472eb33e70f1296 (patch)
tree: 44569883f3eec273921c3adc9eccd3e275f6828b /desktop-themes
parent: 501243f3c3289ac2f43e2ed4386b51a97533b356 (diff)
download: mate-themes-07066560804371d99b0f4ed60472eb33e70f1296.tar.bz2
mate-themes-07066560804371d99b0f4ed60472eb33e70f1296.tar.xz
3 files changed, 202 insertions, 32 deletions
diff --git a/desktop-themes/GreenLaguna/gtk-3.0/Makefile.am b/desktop-themes/GreenLaguna/gtk-3.0/Makefile.am
index 04e94060..ad90ca62 100644
--- a/desktop-themes/GreenLaguna/gtk-3.0/Makefile.am
+++ b/desktop-themes/GreenLaguna/gtk-3.0/Makefile.am
@@ -5,9 +5,8 @@ themedir = $(datadir)/themes/$(THEME_NAME)/gtk-3.0
 theme_DATA = \
 gtk.css \
 gtk-main.css \
- gtk-main-common.css \
- gtk-widgets.css \
- gtk-widgets-assets.css \
+ gtk-widgets.css \
+ gtk-widgets-assets.css \
 mate-applications.css \
 other-applications.css \
 settings.ini \
diff --git a/desktop-themes/GreenLaguna/gtk-3.0/gtk-main.css b/desktop-themes/GreenLaguna/gtk-3.0/gtk-main.css
index 35844a2f..4782b9da 100644
--- a/desktop-themes/GreenLaguna/gtk-3.0/gtk-main.css
+++ b/desktop-themes/GreenLaguna/gtk-3.0/gtk-main.css
@@ -55,8 +55,12 @@
 /*@define-color menu_color #655b56;*/
 @define-color menu_controls_color #ffffff;
 
+@define-color borders #AAABA9;
+
 @define-color highlighted_border #8E8F8E;
-@define-color internal_element_color #898A89;
+@define-color internal_element_color @borders;
+@define-color internal_element_prelight @theme_text_color;
+@define-color internal_element_insensitive mix(@internal_element_color, @theme_base_color, 0.7);
 
 @define-color notebook_border alpha(@frame_color, 0.6); /*#aeaaa6;*/
 @define-color notebook_active_tab_border alpha(@frame_color, 0.6); /*#a6a29e; #9b9b9b;*/
@@ -69,8 +73,6 @@
 
 @define-color expander_row_selected_color #DFF0D9; /*#acccee*/
 
-@define-color borders #AAABA9;
-
 @define-color link_color #8FD94A;
 @define-color frame_color #9FA09E;
 @define-color inactive_frame_color #C8CAC8;
@@ -100,10 +102,10 @@
 * OSD *
 *******/
 @define-color osd_highlight #ffffff;
-@define-color osd_lowlight #525252;
-@define-color osd_base #212526;
+@define-color osd_lowlight #515251;
+@define-color osd_base #252621;
 
-@define-color osd_fg #ededed;
+@define-color osd_fg #EBEDEB;
 @define-color osd_bg alpha(@osd_base, 0.80);
 
 @define-color osd_text_shadow alpha(black, 0.75);
@@ -151,9 +153,30 @@
 @define-color wm_unfocus shade(@theme_bg_color, 1.05);
 @define-color wm_shadow alpha(black, 0.5);
 
-@import url("gtk-main-common.css");
+/********
+ * Misc *
+ ********/
+
+@define-color inset_light_color alpha(white, 0.45);
+@define-color inset_dark_color alpha(black, 0.07);
+
+@define-color button_text_shadow alpha(white, 0.4);
+
+/* Common color scheme */
+
+@define-color os_chrome_bg_color black;
+@define-color os_chrome_fg_color #CACCCA;
+@define-color os_chrome_selected_bg_color #323332;
+@define-color os_chrome_selected_fg_color white;
+
+@define-color chrome_bg_color #171E1A;
+@define-color chrome_fg_color #fff;
+
+@define-color content_view_bg #EFF1EF;
+
 @import url("gtk-widgets.css");
 @import url("gtk-widgets-assets.css");
 @import url("mate-applications.css");
 @import url("other-applications.css");
 @import url("unity.css");
+@import url("window-controls.css");
diff --git a/desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets.css b/desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets.css
index e2a62d22..e69b91c6 100644
--- a/desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets.css
+++ b/desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets.css
@@ -477,10 +477,9 @@ GtkTreeView .separator,
 }
 
 .entry:focus {
- padding: 3px 3px;
- border-image: none;
- border-style: solid;
- border-color: @theme_selected_bg_color;
+ box-shadow: inset 1px 2px alpha(@theme_selected_bg_color, 0.1),
+ inset 1px 1px alpha(@theme_selected_bg_color, 0.1),
+ inset -1px -1px alpha(@theme_selected_bg_color, 0.2);
 }
 
 .entry:insensitive {
@@ -1283,31 +1282,179 @@ GtkTreeMenu .menuitem * {
 /*****************
 * GtkSpinButton *
 *****************/
-.spinbutton .button,
-.spinbutton .button:insensitive,
-.spinbutton .button:hover,
-.spinbutton .button:active,
-.spinbutton .button:focus {
- background-image: none;
- background-color: transparent;
- /*border-width: 1px;*/
+.spinbutton .button {
+ color: @internal_element_color;
+ padding: 2px 6px;
+ border-width: 0;
+ border-radius: 0;
 border-style: none;
 border-image: none;
- /*padding: 0px;*/
+ box-shadow: inset 1px 0 @inset_dark_color;
 }
 
-.spinbutton .button,
-.spinbutton .button:focus {
- color: shade(@insensitive_fg_color, 0.75);
+.spinbutton .button {
+ background-color: transparent;
+ background-image: none;
 }
 
-.spinbutton .button:hover,
-.spinbutton .button:active {
- color: @theme_text_color;
+.spinbutton .button:insensitive {
+ color: @internal_element_insensitive;
 }
 
-.spinbutton .button:insensitive {
- color: shade(@insensitive_fg_color, 1.2);
+.spinbutton .button:active,
+.spinbutton .button:checked,
+.spinbutton .button:hover {
+ color: @internal_element_prelight;
+}
+
+.spinbutton .button:first-child {
+ border-radius: 3px 0 0 3px;
+ box-shadow: none;
+}
+
+.spinbutton .button:last-child {
+ border-radius: 0 3px 3px 0;
+ box-shadow: none;
+}
+
+.spinbutton .button:dir(rtl) {
+ box-shadow: inset -1px 0 @inset_dark_color;
+}
+
+/* Add back the glowy effect from the entry covered by the pushed button background*/
+.spinbutton .button:active,
+.spinbutton .button:active:focus,
+.spinbutton .button:checked,
+.spinbutton .button:checked:focus {
+ padding: 2px 4px;
+ box-shadow: inset 1px 0 @inset_dark_color,
+ inset 0 1px alpha(@theme_selected_bg_color, 0.2),
+ inset 0 -1px alpha(@theme_selected_bg_color, 0.2);
+}
+
+.spinbutton .button:first-child:active,
+.spinbutton .button:first-child:active:focus,
+.spinbutton .button:first-child:active,
+.spinbutton .button:first-child:active:focus {
+ padding: 2px 4px;
+ box-shadow: inset 1px 1px alpha(@theme_selected_bg_color, 0.2),
+ inset 0 -1px alpha(@theme_selected_bg_color, 0.2);
+}
+
+.spinbutton .button:last-child:active,
+.spinbutton .button:last-child:active:focus,
+.spinbutton .button:last-child:checked,
+.spinbutton .button:last-child:checked:focus {
+ padding: 2px 4px;
+ box-shadow: inset 1px 0 @inset_dark_color,
+ inset 0 1px alpha(@theme_selected_bg_color, 0.2),
+ inset -1px -1px alpha(@theme_selected_bg_color, 0.2);
+}
+
+.spinbutton.vertical .button {
+ padding: 4px;
+ icon-shadow: 0 1px @button_text_shadow;
+}
+
+.spinbutton.vertical .button,
+.spinbutton.vertical .button:hover {
+ padding: 4px;
+ color: @theme_fg_color;
+}
+
+.spinbutton.vertical .button:hover,
+.spinbutton.horizontal .button:hover {
+ background-image: linear-gradient(to bottom,
+ @button_hover_gradient_color_a,
+ @button_hover_gradient_color_b);
+}
+
+.spinbutton.vertical .button:active,
+.spinbutton.horizontal .button:active,
+.spinbutton.vertical .button:checked,
+.spinbutton.horizontal .button:checked {
+ background-image: linear-gradient(to bottom,
+ @button_gradient_color_b,
+ @button_gradient_color_a);
+}
+
+.spinbutton.vertical .button:insensitive {
+ color: @insensitive_fg_color;
+}
+
+.spinbutton.vertical .button:active,
+.spinbutton.vertical .button:checked {
+ color: @button_active_text;
+ icon-shadow: 0 1px @button_active_text_shadow;
+}
+
+/* :insensitive:insensitive to override the dark overriden style for
+ normal spinbutton buttons, yeah we lack !important */
+.spinbutton.vertical .button:insensitive:insensitive {
+ icon-shadow: none;
+}
+
+.spinbutton.vertical .button,
+/* :active:active to override the dark overriden style for
+ normal spinbutton buttons, yeah we lack !important */
+.spinbutton.vertical .button:active:active,
+.spinbutton.vertical .button:checked:checked {
+ box-shadow: none;
+}
+
+.spinbutton.vertical .button:first-child,
+.spinbutton.vertical .button:hover:first-child,
+.spinbutton.vertical .button:active:first-child,
+.spinbutton.vertical .button:checked:first-child {
+ border-color: transparent;
+ border-image-width: 3px 3px 0 3px;
+ border-width: 2px 1px 0 1px;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ padding: 4px;
+}
+
+.spinbutton.vertical .button:last-child,
+.spinbutton.vertical .button:hover:last-child,
+.spinbutton.vertical .button:active:last-child,
+.spinbutton.vertical .button:checked:last-child {
+ border-color: transparent;
+ border-image-width: 0 3px 4px 3px;
+ border-width: 0 1px 2px 1px;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ padding: 4px;
+}
+
+.spinbutton.vertical.entry {
+ border-image: none;
+ border-color: alpha(@borders, 0.1);
+ border-width: 0 1px 0 1px;
+ border-style: solid;
+ border-radius: 0;
+ box-shadow: inset 1px 0 0 0 @borders,
+ inset -1px 0 0 0 @borders,
+ inset 0 1px 0 0 @borders,
+ inset 0 -1px 0 0 @borders;
+
+ /* I'm using box-shadow as borders, so I need to compensate
+ with padding. Those two values need to be entry padding +1 */
+ padding-top: 5px;
+ padding-bottom: 5px;
+}
+
+.spinbutton.vertical.entry:insensitive {
+ border-color: alpha(@borders, 0.1);
+ box-shadow: inset 0 1px alpha(@borders, 0.4),
+ inset 0 -1px alpha(@borders, 0.4);
+}
+
+.spinbutton.vertical.entry:focus {
+ border-color: alpha(@borders, 0.1);
+ box-shadow: inset 1px 0 0 0 @theme_selected_bg_color,
+ inset -1px 0 0 0 @theme_selected_bg_color,
+ inset 0 1px 0 0 @theme_selected_bg_color,
+ inset 0 -1px 0 0 @theme_selected_bg_color;
 }
 
 /**************
@@ -2374,6 +2521,7 @@ GtkPopover .separator {
 border-width: 1px;
 border-style: solid;
 text-shadow: 0 -1px black;
+
 color: #CCD9D0;
 background-image: -gtk-gradient (radial,
 0.5 -2.0, 2.0,
@@ -2398,7 +2546,7 @@ GtkPopover .separator {
 .button.text-button.titlebutton:hover {
 border-image: none;
 border-style: solid;
- border-color: shade(@button_border, 1.1);
+ border-color: transparent;
 background-image: linear-gradient(to bottom,
 @button_hover_gradient_color_a,
 @button_hover_gradient_color_b);
author	raveit65 <[email protected]>	2015-04-18 19:34:17 +0200
committer	raveit65 <[email protected]>	2015-04-18 19:55:19 +0200
commit	07066560804371d99b0f4ed60472eb33e70f1296 (patch)
tree	44569883f3eec273921c3adc9eccd3e275f6828b /desktop-themes
parent	501243f3c3289ac2f43e2ed4386b51a97533b356 (diff)
download	mate-themes-07066560804371d99b0f4ed60472eb33e70f1296.tar.bz2 mate-themes-07066560804371d99b0f4ed60472eb33e70f1296.tar.xz