GreenLaguna GTK3: improve spinbuttons

3 files changed, 202 insertions, 31 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 e9577c3d..19be10b7 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);
@@ -145,9 +147,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 4d31cc15..c319a062 100644
--- a/desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets.css
+++ b/desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets.css
@@ -315,9 +315,9 @@ GtkTreeView .separator,
 }
 
 .entry:focus {
-	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 {
@@ -1115,31 +1115,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;
 }
 
 /**************
@@ -2173,6 +2321,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,
@@ -2197,7 +2346,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);