From bcba7417b2fbb914570334a3e22f1d0f8802d5f3 Mon Sep 17 00:00:00 2001 From: raveit65 Date: Sat, 18 Apr 2015 19:34:17 +0200 Subject: GreenLaguna GTK3: improve spinbuttons --- desktop-themes/GreenLaguna/gtk-3.0/Makefile.am | 5 +- desktop-themes/GreenLaguna/gtk-3.0/gtk-main.css | 37 +++- desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets.css | 192 ++++++++++++++++++--- 3 files changed, 202 insertions(+), 32 deletions(-) (limited to 'desktop-themes/GreenLaguna') 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); -- cgit v1.2.1