From 870d15ad735f536ba8e8b5c46983b2981956fa0b Mon Sep 17 00:00:00 2001 From: raveit65 Date: Mon, 13 Apr 2015 13:56:16 +0200 Subject: GreenLaguna GTK+-3.14: a little re-work of the theme --> - fix bg colors of .views - adjust levelbars - fix notebooks - fix popovers button - improve GtkSwitch - improve app-notifications - improve osd - fix notebook close button --- .../GreenLaguna/gtk-3.0/gtk-widgets-assets.css | 8 +- desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets.css | 333 ++++++++++++++++++--- 2 files changed, 293 insertions(+), 48 deletions(-) (limited to 'desktop-themes') diff --git a/desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets-assets.css b/desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets-assets.css index dc55e129..ee86e8ca 100644 --- a/desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets-assets.css +++ b/desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets-assets.css @@ -76,7 +76,8 @@ GtkScale.scale-has-marks-above.slider.vertical:insensitive { border-image: url("assets/button-default-border.svg") 3 / 3px stretch; } -.button.default:active { +.button.default:active, +.button.default:checked { border-image: url("assets/button-default-active-border.svg") 3 / 3px stretch; } @@ -103,6 +104,11 @@ GtkScale.scale-has-marks-above.slider.vertical:insensitive { border-image: url("assets/toolbar-button-border.svg") 3 / 3px stretch; } +/* overrride for osd */ +.osd.toolbar .button:hover { + border-image: none; +} + GtkSwitch.trough:active { border-image: url("assets/switch-trough-border-active.svg") 3 / 3px stretch; } diff --git a/desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets.css b/desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets.css index bb87cdb3..cfbd52ab 100644 --- a/desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets.css +++ b/desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets.css @@ -194,7 +194,7 @@ *********/ .view, .view:insensitive { /* gdebi bug? */ - background-color: @theme_bg_color; + background-color: shade(@base_color, 1.06); color: @theme_text_color; border-radius: 0px; /*border-width: 3px;*/ @@ -564,11 +564,14 @@ GtkLevelBar.vertical { } .level-bar.trough { + border-radius: 2px; padding: 2px; } .level-bar.fill-block { - border-style: none; + border-width: 1px; + border-style: solid; + border-color: @progressbar_border; background-image: linear-gradient(to bottom, shade(@link_color, 1.2), shade(@link_color, 0.6)); @@ -612,7 +615,7 @@ GtkLevelBar.vertical { /* gtk-3.12 */ .notebook.header { background-image: none; - background-color: transparent; + background-color: @base_color; border-style: none; border-image: none; border-width: 0px; @@ -621,6 +624,7 @@ GtkLevelBar.vertical { .notebook { padding: 1px 0px 1px 1px; background-clip: border-box; + background-color: shade(@base_color, 1.06); border-color: @notebook_border; color: @theme_fg_color; /* gdebi bug? */ border-style: solid; @@ -727,7 +731,7 @@ GtkLevelBar.vertical { border-style: none; border-image: none; /*border-color: shade(@theme_bg_color, 0.9);*/ - background-color: alpha(@theme_bg_color, 0.9); + background-color: transparent; background-image: none; -GtkButton-child-displacement-x: 0; -GtkButton-child-displacement-y: 0; @@ -1671,7 +1675,7 @@ GtkCalendar.header .stack-switcher > .titlebutton.button { /*background-image: linear-gradient(to bottom, @toolbar_gradient_base, shade(@theme_bg_color, 1.6));*/ - border-color: alpha(@frame_color, 0.6); + border-color: shade(@theme_bg_color, 0.8); } .notebook GtkContainer .header-bar { @@ -1699,6 +1703,11 @@ GtkOverlay.osd { background-color: transparent; } +.osd.frame { + background-clip: border-box; + background-origin: border-box; +} + .osd.button, .osd.button:checked, .osd.button:active, @@ -1726,12 +1735,15 @@ GtkOverlay.osd { .osd.button, .osd.button:prelight, -.osd.button:checked, .osd.button:active, +.osd.button:checked { + background-color: shade(@osd_bg, 1.10); +} + .osd .button, .osd .button:prelight, -.osd .button:checked, -.osd .button:active { +.osd .button:active, +.osd .button:checked { background-color: transparent; } @@ -1749,24 +1761,28 @@ GtkOverlay.osd { background-color: @osd_button_bg_insensitive_active; } -.osd.button *:hover, -.osd .button *:hover { +.osd.button:hover, +.osd .button:hover { color: @osd_button_fg_hover; } -.osd .button *:checked, -.osd .button *:hover:checked, -.osd .button *:active, -.osd .button *:hover:active { +.osd.button:active, +.osd.button:hover:active, +.osd .button:active, +.osd .button:hover:active, +.osd.button:checked, +.osd.button:hover:checked, +.osd .button:checked, +.osd .button:hover:checked { color: @osd_button_fg_active; } -.osd.button *:insensitive, -.osd.button *:insensitive:checked, -.osd.button *:insensitive:active, -.osd .button *:insensitive, -.osd .button *:insensitive:checked, -.osd .button *:insensitive:active { +.osd.button:insensitive, +.osd.button:active *:insensitive, +.osd.button:checked *:insensitive, +.osd .button:insensitive, +.osd .button:active *:insensitive, +.osd .button:checked *:insensitive { color: @osd_button_fg_insensitive; } @@ -1809,23 +1825,20 @@ GtkOverlay.osd { .osd.toolbar { color: @osd_fg; text-shadow: 0 1px @osd_text_shadow; - padding: 10px; border-style: none; border-radius: 7px; - background-image: linear-gradient(to bottom, - @osd_toolbar_bg_a, - @osd_toolbar_bg_b 63%, - @osd_toolbar_bg_c); + background-image: linear-gradient(to left, + shade(@theme_selected_bg_color, 1.1), + shade(@theme_selected_bg_color, 0.65)); background-color: transparent; - -GtkToolbar-button-relief: normal; } .osd.toolbar .button { padding: 4px; - border-width: 1px 0; - border-radius: 0; + border-width: 1px; + border-radius: 5px; box-shadow: inset -1px 0 @osd_button_inset; } @@ -1861,6 +1874,7 @@ GtkOverlay.osd { and Epiphany */ .osd.trough { background-color: @osd_trough_bg; + border-width: 0; } .osd.progressbar { @@ -1868,13 +1882,25 @@ GtkOverlay.osd { } .osd .scale.trough { - border-color: @osd_button_border; + border: 1px solid rgba(0,0,0,0.1); + border-image: none; background-image: linear-gradient(to bottom, shade(@osd_button_border, 0.70), shade(@osd_button_border, 0.90)); background-color: transparent; } +.osd .scale.trough.highlight { + background-image: none; + background-color: @theme_selected_bg_color; +} + +.osd .scale.trough:insensitive, +.osd .scale.trough.highlight:insensitive { + background-image: none; + background-color: transparent; +} + .osd GtkProgressBar, GtkProgressBar.osd { padding: 0; @@ -1902,6 +1928,49 @@ GtkProgressBar.osd.progressbar { border-radius: 0; } +.osd .view, +.osd.view { + background-color: @osd_view_bg; +} + +.osd .scrollbar.trough { + background-color: @osd_scrollbar_trough; +} + +.osd .scrollbar.slider { + background-color: @osd_scrollbar_slider; +} + +.osd .scrollbar.slider:hover { + background-color: @osd_scrollbar_slider_prelight; +} + +.osd .scrollbar.slider:active { + background-color: @osd_scrollbar_slider_active; +} + +.osd GtkIconView.cell:selected, +.osd GtkIconView.cell:selected:focus { + background-color: transparent; + + border-style: solid; + border-radius: 15px; + border-width: 3px; + border-color: @osd_button_fg; + + outline-color: transparent; +} + +/* used by Documents */ +.osd .page-thumbnail { + border-style: solid; + border-width: 1px; + border-color: @osd_lowlight; + + /* when there's no pixbuf yet */ + background-color: @osd_bg; +} + /************* * Popovers * *************/ @@ -1997,11 +2066,20 @@ GtkModelButton.button:checked:insensitive, GtkModelButton.button, GtkModelButton.button:focus, GtkModelButton.button:active:focus, -GtkModelButton.button:checked:focus { +GtkModelButton.button:checked:focus, +GtkModelButton.button.flat:checked, +GtkModelButton.button.flat:active, +GtkModelButton.button.flat:insensitive, +GtkModelButton.button.flat:active:insensitive, +GtkModelButton.button.flat:checked:insensitive, +GtkModelButton.button.flat, +GtkModelButton.button.flat:focus, +GtkModelButton.button.flat:active:focus, +GtkModelButton.button.flat:checked:focus { color: @theme_selected_fg_color; background-color: transparent; background-image: none; - border-color: transparent; + border-color: @button_border; border-image: none; border-style: none; box-shadow: none; @@ -2011,7 +2089,11 @@ GtkModelButton.button:checked:focus { GtkModelButton.button:checked:hover, GtkModelButton.button:active:hover, GtkModelButton.button:hover, -GtkModelButton.button:selected { +GtkModelButton.button:selected, +GtkModelButton.button.flat:checked:hover, +GtkModelButton.button.flat:active:hover, +GtkModelButton.button.flat:hover, +GtkModelButton.button.flat:selected { color: @theme_selected_fg_color; background-image: linear-gradient(to bottom, shade(@theme_selected_bg_color, 1.6), @@ -2113,7 +2195,15 @@ GtkPopover .separator { .button.image-button.titlebutton:active, .button.image-button.titlebutton:active:hover, .button.text-button.titlebutton:active, -.button.text-button.titlebutton:active:hover { +.button.text-button.titlebutton:active:hover, +.titlebar .titlebutton:checked, +.titlebar .titlebutton:checked:hover, +.header-bar.frame.titlebar:checked, +.header-bar.frame.titlebar:checked:hover, +.button.image-button.titlebutton:checked, +.button.image-button.titlebutton:checked:hover, +.button.text-button.titlebutton:checked, +.button.text-button.titlebutton:checked:hover { /* some apps need this */ color: @theme_fg_color; border-style: solid; @@ -2243,10 +2333,14 @@ GtkAssistant .sidebar { * GtkSwitch * *************/ GtkSwitch { + -GtkSwitch-slider-width: 45px; + font-weight: bold; + font-size: smaller; font: bold condensed; } -GtkSwitch.trough { +GtkSwitch.trough, +GtkSwitch.trough:backdrop { color: @internal_element_color; border-radius: 3px; border-width: 1px; @@ -2258,7 +2352,8 @@ GtkSwitch.trough { @trough_bg_color_b); } -GtkSwitch.trough:active { +GtkSwitch.trough:active, +GtkSwitch.trough:backdrop:active { color: @theme_main_color; border-style: none; /*border-image is defined in gtk-widgets-assets.css*/ @@ -2267,14 +2362,16 @@ GtkSwitch.trough:active { @active_switch_bg_color_b); } -GtkSwitch.trough:insensitive { +GtkSwitch.trough:insensitive, +GtkSwitch.trough:backdrop:insensitive { background-image: none; background-color: shade(@theme_bg_color, 0.9); border-color: shade(@inactive_frame_color, 0.845); border-image: none; } -GtkSwitch.slider { +GtkSwitch.slider, +GtkSwitch.slider:backdrop { border-width: 1px; border-radius: 2px; border-color: shade(@frame_color, 1.31); @@ -2289,16 +2386,44 @@ GtkSwitch.slider { background-position: center; } -GtkSwitch.slider:active { +GtkSwitch.slider:active, +GtkSwitch.slider:backdrop:active { border-color: @switch_slider_border; } -GtkSwitch.slider:insensitive { +GtkSwitch.slider:insensitive, +GtkSwitch.slider:backdrop:insensitive { border-style: none; background-image: none; background-color: shade(@insensitive_bg_color, 1.02); } +GtkSwitch.slider:insensitive > GtkLabel, +GtkSwitch.slider:backdrop:insensitive > GtkLabel { + color: inherit; +} + +.list-row GtkSwitch, +.list-row GtkSwitch:backdrop, +.list-row:selected GtkSwitch, +.list-row:selected GtkSwitch:backdrop { + box-shadow: none; + border-color: shade(@button_border, 1.0); +} + +.list-row:selected GtkSwitch.slider:dir(rtl) { + border-left-color: @borders; +} + +.list-row:selected GtkSwitch.slider:dir(ltr) { + border-right-color: @borders; +} + +.list-row:selected GtkSwitch.slider, +.list-row:selected GtkSwitch.slider:active { + border-color: shade(@button_border, 1.0); +} + GtkStatusbar { padding: 5px; color: @theme_fg_color; @@ -2544,20 +2669,134 @@ GtkIconView.content-view.check:selected { /********************* * App Notifications * *********************/ -.app-notification { +.app-notification, +.app-notification.frame { border-style: solid; - border-color: @app_notification_border; + border-color: rgba(112, 129, 106, 0.9); border-width: 0 1px 1px 1px; border-radius: 0 0 5px 5px; padding: 8px; + background-color: rgba(112, 129, 106, 0.3); + background-image: linear-gradient(to bottom, + rgba(112, 129, 106, 0.2), + transparent 2px); + background-clip: padding-box; + color: @theme_fg_color; +} - background-image: linear-gradient(to bottom, - @app_notification_a, - @app_notification_b 20%, - @app_notification_c); +.app-notification:backdrop, +.app-notification.frame:backdrop { + background-image: none; +} - color: @theme_text_color; - text-shadow: 0 1px white; +.app-notification .button, +.app-notification .header-bar .button.titlebutton, +.header-bar .app-notification .button.titlebutton, +.app-notification .titlebar .button.titlebutton, +.titlebar .app-notification .button.titlebutton, +.app-notification GtkCalendar.header .button.titlebutton, +GtkCalendar.header .app-notification .button.titlebutton, +.app-notification.frame .button { + color: @theme_selected_fg_color; + border-color: rgba(112, 129, 106, 0.9); + border-image: none; + background-image: linear-gradient(to bottom, + rgba(177, 204, 168, 0.9)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(0, 0, 0, 0.1); + text-shadow: none; + icon-shadow: 0 1px black; + outline-color: rgba(0, 0, 0, 0.3); + border-radius: 3px; + padding: 0 0px 2px 0px; +} + +.app-notification .button.flat, +.app-notification .header-bar .titlebutton.button, +.header-bar .app-notification .titlebutton.button, +.app-notification .titlebar .titlebutton.button, +.titlebar .app-notification .titlebutton.button, +.app-notification GtkCalendar.header .titlebutton.button, +GtkCalendar.header .app-notification .titlebutton.button, +.app-notification.frame .button.flat, +.app-notification.frame .header-bar .titlebutton.button, +.header-bar .app-notification.frame .titlebutton.button, +.app-notification.frame .titlebar .titlebutton.button, +.titlebar .app-notification.frame .titlebutton.button, +.app-notification.frame GtkCalendar.header .titlebutton.button, +GtkCalendar.header .app-notification.frame .titlebutton.button { + border-image: none; + icon-shadow: 0 1px black; + text-shadow: 0 1px black; +} + +.app-notification .button:hover, +.app-notification.frame .button:hover { + color: @theme_selected_fg_color; + border-color: rgba(112, 129, 106, 0.7); + border-image: none; + background-color: transparent; + background-image: linear-gradient(to bottom, + rgba(177, 204, 168, 0.1)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(0, 0, 0, 0.1); + text-shadow: none; + icon-shadow: 0 1px black; + outline-color: rgba(0, 0, 0, 0.3); + border-radius: 3px; +} + +.app-notification .button, +.app-notification .button:active, +.app-notification .button:checked, +.app-notification .button:backdrop:active, +.app-notification .button:backdrop:checked, +.app-notification.frame .button, +.app-notification.frame .button:active, +.app-notification.frame .button:checked, +.app-notification.frame .button:backdrop:active, +.app-notification.frame .button:backdrop:checked { + color: white; + border-color: rgba(112, 129, 106, 0.7); + background-color: transparent; + background-image: linear-gradient(to bottom, + rgba(170, 196, 161, 0.9)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + icon-shadow: none; + outline-color: rgba(0, 0, 0, 0.3); + border-radius: 3px; +} + +.app-notification .button:insensitive, +.app-notification .button:backdrop:insensitive, +.app-notification.frame .button:insensitive, +.app-notification.frame .button:backdrop:insensitive { + color: #878989; + border-color: rgba(112, 129, 106, 0.7); + background-image: linear-gradient(to bottom, + rgba(198, 207, 181, 0.5)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + icon-shadow: none; + border-radius: 3px; + padding: 0px; +} + +.app-notification .button:backdrop, +.app-notification.frame .button:backdrop { + color: #eeeeec; + border-color: rgba(112, 129, 106, 0.7); + background-image: linear-gradient(to bottom, + rgba(172, 205, 138, 0.7)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + icon-shadow: none; + border-radius: 3px; + padding: 0px; } /************* -- cgit v1.2.1