GTK+-3.20 BlackMate: re-work menus

- fixes menu glitches
- enable transition effects again
- fixes menu issues in firefox
- use symbolic arrows for menus
- adjust menuitem:hover bg-image
- sync popover with normal menus

1 files changed, 199 insertions, 73 deletions

diff --git a/desktop-themes/BlackMATE/gtk-3.0/gtk-widgets.css b/desktop-themes/BlackMATE/gtk-3.0/gtk-widgets.css
index 937fe13c..eefa129f 100644
--- a/desktop-themes/BlackMATE/gtk-3.0/gtk-widgets.css
+++ b/desktop-themes/BlackMATE/gtk-3.0/gtk-widgets.css
@@ -1828,7 +1828,8 @@ scrollbar.vertical slider.fine-tune:hover:active {
  *********/
 
 /* this controls the general appearance of the menubar */
-menubar {
+menubar,
+.menubar {
     background-image: none;
     background-color: @theme_bg_color;
     border-width: 0px;
@@ -1838,27 +1839,20 @@ menubar {
     -GtkWidget-window-dragging: true;
 }
 
-menubar  menuitem {
+menubar menuitem,
+.menubar menuitem {
     -gtk-icon-style: regular;
     transition: all 300ms ease-out;
     padding: 3px 7px;
-}
-
-menu  menuitem {
-    padding: 3px 4px;
-}
-
-menubar  menu  menuitem {
-    transition: none;
-}
-
-menubar  menuitem{
     border-width: 0px;
     border-style: none;
     background-color: transparent;
 }
 
-menu  menuitem {
+menu menuitem,
+.menu menuitem {
+    padding: 3px 4px;
+    transition: all 300ms ease-out;
     border-width: 0px;
 	border-radius: 3px 3px 0px 0px;
     border-style: solid;
@@ -1868,8 +1862,8 @@ menu  menuitem {
 	border-color:transparent;
 }
 
-
-menubar  menuitem:hover {
+menubar menuitem:hover,
+.menubar menuitem:hover {
     background-image: none;
     background-color: @theme_selected_bg_color;
     border-style: solid;
@@ -1878,19 +1872,19 @@ menubar  menuitem:hover {
     border-radius: 3px 3px 0px 0px;
     border-width: 0px;
     border-color: @theme_selected_bg_color;
+    color: @theme_text_color;
 }
 
-menubar  menuitem *:disabled, /* gdebi bug? */
-menubar  menuitem *:hover {
-    color: @theme_text_color;
+menubar menuitem:disabled,
+.menubar menuitem:disabled {
+	color: @insensitive_fg_color;
 }
 
- menu,
- menubar  menu,
- menuitem  menu {
+menu,
+.menu {
     background-color: shade(@theme_selected_bg_color, 0.8);
-    background-image: linear-gradient(to bottom,
-                                      @theme_selected_bg_color,
+    background-image: linear-gradient(to left,
+                                      shade(@theme_selected_bg_color, 0.9),
                                       shade(@theme_selected_bg_color, 0.5));
     border-style: none;
     border-width: 0px;
@@ -1898,65 +1892,193 @@ menubar  menuitem *:hover {
     padding: 1px;
 }
 
-menuitem,
-menuitem * {
-    padding: 2px 0px;
+menuitem:hover,
+menu menuitem:hover,
+.menu menuitem:hover {
+    background-image: linear-gradient(to bottom,
+                                      shade(@theme_selected_bg_color, 1.2),
+                                      shade(@theme_selected_bg_color, 0.3));
+    color: @theme_fg_color;
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 3px;
+    border-image: url("assets/menu-border-dark.svg") 2 / 2px stretch;
 }
 
-/* scroll arrows */
-menu button {
-    border-image: none;
+menu menuitem:disabled,
+.menu menuitem:disabled {
+    color: @insensitive_fg_color;
+    background-color: transparent;
+    border-color: transparent;
+}
+
+/* fixes for firefox menus, and menuitem arrows */
+.menuitem {
     color: @theme_fg_color;
-    background-image: linear-gradient(to bottom,
-                                      @button_hover_gradient_color_a,
-                                      @button_hover_gradient_color_b);
+	transition: none;
 }
 
-menu button:hover {
+.menuitem:hover {
     color: @theme_main_color;
-    background-image: linear-gradient(to bottom,
-                                      shade(@theme_selected_bg_color, 1.3),
-                                      shade(@theme_selected_bg_color, 0.5));
 }
 
-menu button:disabled {
-    background-image: none;
-    background-color: transparent;
-    border-style: none;
+menu separator,
+.menu separator {
+    min-height: 1px;
+    background-image: linear-gradient(to right,
+                                      shade(@theme_selected_bg_color, 1.05),
+                                      shade(@theme_selected_bg_color, 1.25));
 }
 
-menuitem:hover,
-menu  menuitem:hover {
+/* fix for broken firefox */
+menu separator {
+    color: shade(@theme_selected_bg_color, 1.05);
+}
+
+menuitem arrow {
+    min-height: 16px;
+    min-width: 16px;
+    margin-left: 10px;
+}
+
+menu menuitem arrow:dir(ltr),
+.menu menuitem arrow:dir(ltr) {
+    -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
+}
+
+menu menuitem arrow:dir(rtl),
+.menu menuitem arrow:dir(rtl) {
+        -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
+}
+
+menu > arrow.top,
+.menu > arrow.top {
+      -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
+}
+
+menu > arrow.bottom,
+.menu > arrow.bottom {
+      -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
+}
+
+/* settings for 4 menu level, this is needed to override the menuitem:hover
+   state from previous menu level, as GtkArrow itself don't support states.
+   thanks gtk+ devs for this madness */
+menu > menuitem > arrow.right,
+menu > menuitem:hover menu > menuitem > arrow.right,
+menu > menuitem:hover menu > menuitem:hover menu > menuitem > arrow.right,
+menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem > arrow.right,
+menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem > arrow.right,
+menu > menuitem > arrow.left,
+menu > menuitem:hover menu > menuitem > arrow.left,
+menu > menuitem:hover menu > menuitem:hover menu > menuitem > arrow.left,
+menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem > arrow.left,
+menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem > arrow.left,
+.menu > menuitem > arrow.right,
+.menu > menuitem:hover .menu > menuitem > arrow.right,
+.menu > menuitem:hover .menu > menuitem:hover .menu > menuitem > arrow.right,
+.menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem > arrow.right,
+.menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem > arrow.right,
+.menu > menuitem > arrow.left,
+.menu > menuitem:hover .menu > menuitem > arrow.left,
+.menu > menuitem:hover .menu > menuitem:hover .menu > menuitem > arrow.left,
+.menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem > arrow.left,
+.menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem > arrow.left  {
+    color: @theme_fg_color;
+   -gtk-icon-shadow:  0px  1px shade (@theme_main_color, 1.0),
+                      1px  0px shade (@theme_main_color, 1.0),
+                     -1px  0px shade (@theme_main_color, 1.0),
+                      0px -1px shade (@theme_main_color, 1.0);
+}
+
+menu > menuitem:hover > arrow.right,
+menu > menuitem:hover menu > menuitem:hover arrow.right,
+menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover arrow.right,
+menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover arrow.right,
+menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover arrow.right,
+menu > menuitem:hover > arrow.left,
+menu > menuitem:hover menu > menuitem:hover arrow.left,
+menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover arrow.left,
+menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover arrow.left,
+menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover arrow.left,
+.menu > menuitem:hover > arrow.right,
+.menu > menuitem:hover .menu > menuitem:hover arrow.right,
+.menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover arrow.right,
+.menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover arrow.right,
+.menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover arrow.right,
+.menu > menuitem:hover > arrow.left,
+.menu > menuitem:hover .menu > menuitem:hover arrow.left,
+.menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover arrow.left,
+.menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover arrow.left,
+.menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover arrow.left {
+    color: @theme_main_color;
+   -gtk-icon-shadow:  0px  1px shade (@theme_fg_color, 1.0),
+                      1px  0px shade (@theme_fg_color, 1.0),
+                     -1px  0px shade (@theme_fg_color, 1.0),
+                      0px -1px shade (@theme_fg_color, 1.0);
+}
+
+/* scroll arrows */
+menu > arrow.top,
+.menu > arrow.top {
+    margin-top: -2px;
+    margin-left: -2px;
+}
+
+menu > arrow.bottom,
+.menu > arrow.bottom {
+    margin-bottom: -2px;
+    margin-left: -2px;
+}
+
+menu > arrow,
+.menu > arrow {
+    border-image: none;
+    background-color: transparent;
     background-image: linear-gradient(to bottom,
-                                      #999999,
-                                      #404040);
+                                      @button_hover_gradient_color_a,
+                                      @button_hover_gradient_color_b);
     color: @theme_fg_color;
-    border-style: solid;
-    border-width: 1px;
-    border-radius: 3px;
-    border-image: url("assets/menu-border-dark.svg") 2 / 2px stretch;
+   -gtk-icon-shadow:  0px  1px shade (@theme_main_color, 1.0),
+                      1px  0px shade (@theme_main_color, 1.0),
+                     -1px  0px shade (@theme_main_color, 1.0),
+                      0px -1px shade (@theme_main_color, 1.0);
 }
 
-menu  menuitem:disabled,
-menu  menuitem *:disabled {
-    color: @insensitive_fg_color;
+menu > arrow:hover,
+.menu > arrow:hover {
+    background-color: transparent;
+    background-image: linear-gradient(to bottom,
+                                      shade(@theme_selected_bg_color, 1.2),
+                                      shade(@theme_selected_bg_color, 0.3));
+    color: @theme_main_color;
+   -gtk-icon-shadow:  0px  1px shade (@theme_fg_color, 1.0),
+                      1px  0px shade (@theme_fg_color, 1.0),
+                     -1px  0px shade (@theme_fg_color, 1.0),
+                      0px -1px shade (@theme_fg_color, 1.0);
 }
 
-menuitem separator {
-    padding: 4px;
+menu > arrow:disabled,
+.menu > arrow:disabled {
+    background-image: none;
+    background-color: transparent;
     border-style: none;
-    border-color: @theme_selected_bg_color;
+	color: @insensitive_fg_color;
+   -gtk-icon-shadow:  none;
 }
 
 menuitem accelerator,
-menu  menuitem accelerator {
+menu menuitem accelerator,
+.menu menuitem accelerator {
     color: alpha(@theme_main_color, 0.66);
 }
 
 menuitem accelerator:hover,
 menuitem accelerator:active,
-menu  menuitem accelerator:hover,
-menu  menuitem accelerator:active {
+menu menuitem accelerator:hover,
+menu menuitem accelerator:active,
+.menu menuitem accelerator:hover,
+.menu menuitem accelerator:active {
     color: alpha(@theme_text_color, 0.45);
 }
 
@@ -2593,16 +2715,21 @@ modelbutton button {
 	border-radius: 3px;
 }
 
-modelbutton button:checked,
-modelbutton button:active,
-modelbutton button:disabled,
-modelbutton button:active:disabled,
-modelbutton button:checked:disabled,
-modelbutton button,
-modelbutton button:focus,
-modelbutton button:active:focus,
-modelbutton button:checked:focus {
+modelbutton button {
 	background-image: none;
+	background-color: transparent;
+	color: @theme_fg_color;
+	border-radius: 3px;
+}
+
+modelbutton:checked,
+modelbutton:disabled,
+modelbutton:checked:disabled,
+modelbutton,
+modelbutton:focus,
+modelbutton:focus:active {
+	background-image: none;
+	background-color: transparent;
 	border-color: transparent;
 	border-image: none;
 	border-style: none;
@@ -2610,13 +2737,12 @@ modelbutton button:checked:focus {
 	border-radius: 3px;
 }
 
-modelbutton button:checked:hover,
-modelbutton button:active:hover,
-modelbutton button:hover,
-modelbutton button:selected {
+modelbutton:hover:active,
+modelbutton:hover,
+modelbutton:checked {
 	background-image: linear-gradient(to bottom,
-	                                  #999999,
-	                                  #404040);
+                                      shade(@theme_selected_bg_color, 1.2),
+                                      shade(@theme_selected_bg_color, 0.3));
 	color: @theme_selected_fg_color;
 	text-shadow: none;
 	border-width: 0;