GTK3 GreenLaguna: re-work panel to support full transparency

author: raveit65 <[email protected]> 2015-09-07 15:59:20 +0200
committer: raveit65 <[email protected]> 2015-09-07 16:01:09 +0200
commit: a6fe7b3cc44666653fb60e00e7d5801a815c6da8 (patch)
tree: 76cca3a12c4035f1eee712c9aaabeafdc97ff346
parent: 85caa35f7adcf2f17a3ef603824e9b1718f28074 (diff)
download: mate-themes-a6fe7b3cc44666653fb60e00e7d5801a815c6da8.tar.bz2
mate-themes-a6fe7b3cc44666653fb60e00e7d5801a815c6da8.tar.xz
2 files changed, 165 insertions, 126 deletions
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 *
 ****************/
author	raveit65 <[email protected]>	2015-09-07 15:59:20 +0200
committer	raveit65 <[email protected]>	2015-09-07 16:01:09 +0200
commit	a6fe7b3cc44666653fb60e00e7d5801a815c6da8 (patch)
tree	76cca3a12c4035f1eee712c9aaabeafdc97ff346
parent	85caa35f7adcf2f17a3ef603824e9b1718f28074 (diff)
download	mate-themes-a6fe7b3cc44666653fb60e00e7d5801a815c6da8.tar.bz2 mate-themes-a6fe7b3cc44666653fb60e00e7d5801a815c6da8.tar.xz