GTK3 GreenLaguna: re-work panel to support full transparency

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 d3f98756..421629d0 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 15ffd896..c842b119 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 *
  ****************/