From a6fe7b3cc44666653fb60e00e7d5801a815c6da8 Mon Sep 17 00:00:00 2001 From: raveit65 Date: Mon, 7 Sep 2015 15:59:20 +0200 Subject: GTK3 GreenLaguna: re-work panel to support full transparency --- desktop-themes/GreenLaguna/gtk-3.0/gtk-main.css | 2 + .../GreenLaguna/gtk-3.0/mate-applications.css | 289 ++++++++++++--------- 2 files changed, 165 insertions(+), 126 deletions(-) (limited to 'desktop-themes/GreenLaguna') diff --git a/desktop-themes/GreenLaguna/gtk-3.0/gtk-main.css b/desktop-themes/GreenLaguna/gtk-3.0/gtk-main.css index ec907e53..ee995771 100644 --- a/desktop-themes/GreenLaguna/gtk-3.0/gtk-main.css +++ b/desktop-themes/GreenLaguna/gtk-3.0/gtk-main.css @@ -98,6 +98,8 @@ @define-color app_notification_c @theme_bg_color; @define-color app_notification_border #939493; +@define-color wnckpager_bg_color #98D437; + /******* * OSD * *******/ diff --git a/desktop-themes/GreenLaguna/gtk-3.0/mate-applications.css b/desktop-themes/GreenLaguna/gtk-3.0/mate-applications.css index 6613fb42..783ff798 100644 --- a/desktop-themes/GreenLaguna/gtk-3.0/mate-applications.css +++ b/desktop-themes/GreenLaguna/gtk-3.0/mate-applications.css @@ -242,72 +242,73 @@ CajaWindow .notebook NautilusQueryEditor .toolbar { ****************/ /* the panel bar itself */ -.mate-panel-menu-bar, -MatePanelApplet > GtkMenuBar.menubar, -PanelToplevel, -PanelWidget, -PanelFrame, -PanelAppletFrame, -MatePanelAppletFrameDBus, -MatePanelAppletContainer, -MatePanelApplet { - background-image: none; - background-color: @theme_bg_color; - padding: 0; - color: @theme_fg_color; - text-shadow: none; +.mate-panel-menu-bar { + background-color: @theme_bg_color; + background-image: none; + /* normal panel */ + color: @theme_fg_color; + /* transparent panel with dark wallpaper*/ +/* color: @theme_selected_fg_color; */ + text-shadow: none; } -/* needed for a working top panel with 24px (default) */ -PanelMenuBar.menubar * { - background-image: none; - background-color: transparent; - border-width: 0px; - border-style: none; - padding: 0px; - text-shadow: none; +/* first make all transparent */ +WnckSelector.menubar, +PanelMenuBar.menubar, +WnckSelector GtkMenuItem, +PanelMenuBar GtkMenuItem, +MatePanelApplet GtkToggleButton.button { + border-image: none; + border-color: transparent; + background-image: none; + background-color: transparent; + box-shadow: none; } -PanelMenuBar.menubar .menuitem { - transition: all 300ms ease-out; +MatePanelApplet { + border-width: 0; } -/* set selected menubar button */ -PanelMenuBar.menubar .menuitem:hover { - background-image: none; - background-color: shade(@theme_selected_bg_color, 1.1); - border-style: none; - border-image: none; - /* join menuitem to menu */ - border-radius: 3px 3px 0px 0px; - border-width: 0px; - text-shadow: none; +/* panel grip */ +PanelToplevel.background.mate-custom-panel-background { + background-color: transparent; + border-radius: 2px; +/* enable for making borders visible */ +/* box-shadow: inset 0px 1px shade (@theme_selected_bg_color, 1.0), + inset 1px 0px shade (@theme_bg_color, 1.0), + inset -1px 0px shade (@theme_bg_color, 1.0), + inset 0px -1px shade (@theme_bg_color, 1.0); */ } -/* set normal menubar menuitem */ -PanelMenuBar.menubar .menu .menuitem { - padding: 6px; +/* hide buttons */ +PanelToplevel.background.mate-custom-panel-background .button { + background: transparent; + border-image: none; + border-width: 0px; + border-radius: 2px; + padding: 0px 4px; + box-shadow: inset 0px 1px shade (@theme_bg_color, 1.0), + inset 1px 0px shade (@theme_bg_color, 1.0), + inset -1px 0px shade (@theme_bg_color, 1.0), + inset 0px -1px shade (@theme_bg_color, 1.0); } -/* set selected menubar menuitem */ -PanelMenuBar.menubar .menu .menuitem:checked:hover, -PanelMenuBar.menubar .menu .menuitem:active:hover, -PanelMenuBar.menubar .menu .menuitem:hover { - background-image: linear-gradient(to bottom, - shade(@theme_selected_bg_color, 1.6), - shade(@theme_selected_bg_color, 0.6)); - color: @theme_text_color; - border-style: solid; - border-width: 1px; - border-radius: 3px; - border-image: url("assets/menu-border.svg") 2 / 2px stretch; +PanelToplevel.background.mate-custom-panel-background .button:hover { + box-shadow: inset 0px 1px shade (@theme_selected_bg_color, 1.3), + inset 1px 0px shade (@theme_selected_bg_color, 1.3), + inset -1px 0px shade (@theme_selected_bg_color, 1.3), + inset 0px -1px shade (@theme_selected_bg_color, 1.3); } -MatePanelApplet { - border-width: 0; +/* the grid left from wnckpager and wncktasklist */ +MatePanelAppletFrameDBus { + background-image: -gtk-scaled(url("assets/panel-grid.svg")); + background-color: transparent; + background-repeat: no-repeat; + background-position: left; } -PanelSeparator { +PanelSeparator.mate-custom-panel-background { border-width: 0; background-image: -gtk-gradient (linear, left top, left bottom, from (shade (@theme_bg_color, 0.96)), @@ -316,51 +317,72 @@ PanelSeparator { text-shadow: none; } +/* main menu */ +PanelMenuBar.menubar .menuitem { + transition: all 300ms ease-out; + text-shadow: none; +} + +/* set selected menubar button */ +PanelMenuBar.menubar .menuitem:hover { + background-image: none; + background-color: shade(@theme_selected_bg_color, 1.1); + color: @theme_selected_fg_color; + border-style: none; + border-image: none; + border-radius: 3px 3px 0px 0px; + border-width: 0px; +} + +/* set normal menubar menuitem */ +PanelMenuBar.menubar .menu .menuitem { + padding: 6px; +} + +/* set selected menubar menuitem */ +PanelMenuBar.menubar .menu .menuitem:hover { + background-image: linear-gradient(to bottom, + shade(@theme_selected_bg_color, 1.6), + shade(@theme_selected_bg_color, 0.6)); + color: @theme_selected_fg_color; + border-style: solid; + border-width: 1px; + border-radius: 3px; + border-image: url("assets/menu-border.svg") 2 / 2px stretch; +} + /* desktop-applet, clockapplet, drivemount, character-map, dictionary */ MatePanelApplet .button, MatePanelApplet .button.flat { transition: all 400ms ease-out; - /* Due to a bug somewhere in gtk or cairo, - a padding of zero (or even one) doesn't work always!!! */ - padding: 0px; + background-image: none; + padding: 4px 3px; border-radius: 3px; border-width: 1px; border-style: solid; text-shadow: none; color: @theme_fg_color; - background-image: -gtk-gradient (radial, - 0.5 -2.0, 2.0, - 0.5 -2.0, 3.0, - from (shade(@button_gradient_color_a, 1.5)), - to (shade(@button_gradient_color_b, 0.7))); -} - -MatePanelApplet .button:checked:hover, -MatePanelApplet .button:checked, -MatePanelApplet .button:active:hover, -MatePanelApplet .button:active { - border-radius: 3px; - border-style: solid; - background-image: linear-gradient(to bottom, - @button_gradient_color_b, - @button_gradient_color_a); } MatePanelApplet .button:hover, -MatePanelApplet .button.flat:hover { - border-radius: 3px; - border-style: solid; +MatePanelApplet .button:active, +MatePanelApplet .button:checked, +MatePanelApplet .button:active:hover +MatePanelApplet .button:checked:hover, +MatePanelApplet .button.flat:hover, +MatePanelApplet .button.flat:active, +MatePanelApplet .button.flat:checked, +MatePanelApplet .button.flat:active:hover, +MatePanelApplet .button.flat:checked:hover { background-image: linear-gradient(to bottom, - @button_gradient_color_b, - @button_gradient_color_a); + @button_gradient_color_b, + @button_gradient_color_a); } /*Wncklist */ WnckTasklist .button { transition: all 400ms ease-out; - /* Due to a bug somewhere in gtk or cairo, - a padding of zero (or even one) doesn't work always!!! */ padding: 2px; border-radius: 3px; border-width: 1px; @@ -371,6 +393,8 @@ WnckTasklist .button { 0.5 -2.0, 2.0, 0.5 -2.0, 3.0, from (shade(@button_gradient_color_a, 1.5)), + color-stop (0.42, shade(@button_gradient_color_a, 0.7)), + color-stop (0.43, @theme_bg_color), to (shade(@button_gradient_color_b, 0.7))); } @@ -379,92 +403,97 @@ WnckTasklist .button:checked, WnckTasklist .button:active:hover, WnckTasklist .button:active { border-radius: 3px; + color: @theme_fg_color; border-style: solid; background-image: linear-gradient(to bottom, - @button_gradient_color_b, - @button_gradient_color_a); + shade(@button_gradient_color_b, 0.7), + @theme_bg_color 50%, + shade(@button_gradient_color_a, 1.5)); } WnckTasklist .button:hover { border-radius: 3px; + border-image: none; border-style: solid; + border-color: shade(@button_border, 1.1); background-image: linear-gradient(to bottom, - @button_gradient_color_b, - @button_gradient_color_a); + shade(@button_gradient_color_a, 1.5), + shade(@button_gradient_color_a, 0.7) 39%, + @theme_bg_color 40%, + shade(@less_dark_color, 0.4)); } /* set button WnckSelector */ -MatePanelApplet > WnckSelector.menubar .menuitem { +WnckSelector.menubar .menuitem { border-radius: 3px; color: @theme_fg_color; border-style: solid; - background-image: -gtk-gradient (radial, - 0.5 -2.0, 2.0, - 0.5 -2.0, 3.0, - from (shade(@button_gradient_color_a, 1.5)), - to (shade(@button_gradient_color_b, 0.7))); } /* set selected button WnckSelector */ -.mate-panel-window-menu-menu-bar .menuitem:hover, -MatePanelApplet > WnckSelector.menubar .menuitem:hover { - border-radius: 3px; - color: @theme_fg_color; - border-style: solid; +WnckSelector.menubar .menuitem:hover { background-image: linear-gradient(to bottom, shade(@button_gradient_color_b, 0.7), @theme_bg_color 50%, shade(@button_gradient_color_a, 1.5)); + border-image: url("assets/button-active-border.svg") 3 / 3px stretch; } /* set WnckSelector menuitem */ -.mate-panel-window-menu-menu-bar .menu .menuitem, -MatePanelApplet > WnckSelector.menubar .menu .menuitem { +WnckSelector.menubar .menu .menuitem { background-image: none; - color: @theme_text_color; + color: @theme_selected_fg_color; border-style: none; border-width: 0px; border-radius: 0px; } /* set WnckSelector selected menuitem */ -.mate-panel-window-menu-menu-bar .menu .menuitem:hover, -MatePanelApplet > WnckSelector.menubar .menu .menuitem:hover { - background-image: linear-gradient(to bottom, - shade(@theme_selected_bg_color, 1.6), - shade(@theme_selected_bg_color, 0.6)); - color: @theme_text_color; - border-style: solid; - border-width: 1px; - border-radius: 3px; - border-image: url("assets/menu-border.svg") 2 / 2px stretch; - /*border-color: alpha(@theme_selected_bg_color, 0.1);*/ +WnckSelector.menubar .menu .menuitem:hover { + background-image: linear-gradient(to bottom, + shade(@theme_selected_bg_color, 1.6), + shade(@theme_selected_bg_color, 0.6)); + border-style: solid; + border-width: 1px; + border-radius: 3px; + border-image: url("assets/menu-border.svg") 2 / 2px stretch; } -ClockBox, -.mate-panel-menu-bar.menubar, -MatePanelApplet > GtkMenuBar.menubar { - font: normal; +WnckPager { + background-image: none; + border-color: transparent; + background-color: transparent; + text-shadow: none; } -WnckPager { - background-image: none; - border-color: transparent; - background-color: shade(@theme_bg_color, 0.9); - text-shadow: none; +/* selected WnckPager */ +WnckPager:selected { + background-image: linear-gradient(to bottom, + shade (@wnckpager_bg_color, 1.65), + shade (@wnckpager_bg_color, 0.75)); } /* prelight of WnckPager */ WnckPager:hover { background-image: linear-gradient(to bottom, - shade (@theme_selected_bg_color, 2.86), - shade (@theme_selected_bg_color, 1.0)); - background-color: @theme_base_color; + shade (@wnckpager_bg_color, 0.75), + shade (@wnckpager_bg_color, 1.65)); } -/* Classic icon style */ -.mate-panel-menu-bar { - -PanelMenuBar-icon-visible: true; +/* drivemount */ +DriveList .button, +DriveList .button.flat { + padding: 4px 5px; + border-radius: 3px; + border-color: transparent; + border-image: none; + box-shadow: none; +} + +ClockBox, +.mate-panel-menu-bar.menubar, +MatePanelApplet > GtkMenuBar.menubar { + font: normal; } /* no background for icon-padding area */ @@ -473,14 +502,22 @@ GtkTrayIcon.background { } NaTrayApplet { - background-image: none; - background-color: transparent; - padding: 0; - text-shadow: none; -NaTrayApplet-icon-padding: 3px; -NaTrayApplet-icon-size: 16; } +/* system-monitor-applet */ +MatePanelApplet .horizontal .vertical .frame { + background-color: transparent; + border-style: none; + box-shadow: none; + border-radius: 0px; +} +/* Classic icon style */ +.mate-panel-menu-bar { + -PanelMenuBar-icon-visible: true; +} + /**************** * Mate-Terminal * ****************/ -- cgit v1.2.1