GTK+-3.20 TOK themes: rework menus and fix issue with arrows on firefox menus

2 files changed, 150 insertions, 48 deletions

diff --git a/desktop-themes/TraditionalGreen/gtk-3.0/gtk-widgets.css b/desktop-themes/TraditionalGreen/gtk-3.0/gtk-widgets.css
index 66dd8a3d..2f1e8c10 100644
--- a/desktop-themes/TraditionalGreen/gtk-3.0/gtk-widgets.css
+++ b/desktop-themes/TraditionalGreen/gtk-3.0/gtk-widgets.css
@@ -2135,7 +2135,8 @@ treemenu menuitem {
     padding: 2px;
 }
 
-menu {
+menu,
+.menu {
     font: normal;
     background-color: @menu_bg_color;
     color: @menu_fg_color;
@@ -2145,7 +2146,8 @@ menu {
     border-color: @menu_border_color;
 }
 
-menu button {
+menu button,
+.menu button {
     background-image: none;
     background-color: @menu_bg_color;
     color: @internal_element_color;
@@ -2153,7 +2155,8 @@ menu button {
     border-style: none;
 }
 
-menu button:hover {
+menu button:hover,
+.menu button:hover {
     background-image: none;
     background-color: @theme_base_color;
     color: @theme_text_color;
@@ -2161,7 +2164,8 @@ menu button:hover {
     border-style: none;
 }
 
-menu button:disabled {
+menu button:disabled,
+.menu button:disabled {
     background-color: @theme_base_color;
     color: lighter(@internal_element_color);
     border-image: none;
@@ -2169,7 +2173,8 @@ menu button:disabled {
 }
 
 /* this controls the general appearance of the menubar */
-menubar {
+menubar,
+.menubar {
     border-style: none;
     padding: 1px;
     -GtkWidget-window-dragging: true;
@@ -2181,7 +2186,8 @@ menubar {
                       to (@menubar_gradient_c));
 }
 
-menubar menuitem {
+menubar menuitem,
+.menubar menuitem {
     border-style: solid;
     border-width: 1px 1px 0px;
     border-color: transparent;
@@ -2190,6 +2196,7 @@ menubar menuitem {
 }
 
 menubar menuitem:hover,
+.menubar menuitem:hover,
 menuitem button.flat:hover,
 menuitem button.flat:active {
     background-color: @menu_bg_color;
@@ -2216,27 +2223,37 @@ menuitem button.flat:focus {
     color: @theme_text_color;
 }
 
-menubar menuitem:hover {
+menubar menuitem:hover,
+.menubar menuitem:hover {
     border-width: 1px 1px 0px;
     color: @menubar_menuitem_hover_color;
 }
 
 menu menuitem,
-menu menuitem:disabled {
+menu menuitem:disabled,
+.menu menuitem,
+.menu menuitem:disabled {
     border-width: 1px 0px;
     border-style: solid;
     border-color: transparent;
     padding: 4px;
     background-color: @menu_bg_color;
+    color: @theme_text_color;
 }
 
-menu menuitem:hover {
+menu > menuitem,
+.menu > menuitem {
+    color: @theme_text_color;
+}
+
+menu > menuitem:hover,
+.menu > menuitem:hover {
     border-radius: 0;
 }
 
 treemenu menuitem:hover,
-menu menuitem:active,
-menu menuitem:hover {
+menu menuitem:hover,
+.menu menuitem:hover {
     border-style: solid;
     border-width: 1px 0px;
     border-color: @menubar_menuitem_hover_border_color;
@@ -2244,11 +2261,9 @@ menu menuitem:hover {
 
 treemenu menuitem:hover,
 combobox menuitem:hover,
-menu menuitem:active,
-menu menuitem:active,
 menu menuitem:hover,
-menu menuitem:hover {
-    color: @theme_selected_fg_color;
+.menu menuitem:hover {
+    color: @menubar_menuitem_hover_color;
     background-image: -gtk-gradient (linear,
                       left top,
                       left bottom,
@@ -2258,11 +2273,13 @@ menu menuitem:hover {
                       to (@menubar_menuitem_hover_gradient_d));
 }
 
-menu menuitem:disabled {
+menu menuitem:disabled,
+.menu menuitem:disabled {
     color: mix (@menu_fg_color, @menu_bg_color, 0.6);
 }
 
-menu menuitem accelerator:disabled {
+menu menuitem accelerator:disabled,
+.menu menuitem accelerator:disabled {
     color: mix (@menu_fg_color, @menu_bg_color, 0.7);
 }
 
@@ -2270,8 +2287,7 @@ menuitem accelerator {
     color: alpha (@menu_fg_color, 0.4);
 }
 
-menuitem accelerator:hover,
-menuitem accelerator:active {
+menuitem accelerator:hover {
     color: alpha (@menu_fg_color, 0.3);
 }
 
@@ -2282,28 +2298,63 @@ menuitem arrow {
     color: @menu_controls_color;
 }
 
-menu menuitem arrow:dir(ltr) {
+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),
+.menu menuitem arrow:dir(rtl) {
     -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
 }
 
-menu arrow.top {
+menu arrow.top,
+.menu arrow.top {
     -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
 }
 
-menu arrow.bottom {
+menu arrow.bottom,
+.menu arrow.bottom {
     -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
 }
 
-menu arrow:hover {
+menu arrow:hover,
+.menu arrow:hover {
     border-color: @theme_selected_fg_color;
     color: shade (@theme_selected_bg_color, 1.6);
 }
 
+/* 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,
+menu > menuitem:hover menu > menuitem arrow,
+menu > menuitem:hover menu > menuitem:hover menu > menuitem arrow,
+menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem arrow,
+menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem arrow,
+.menu > menuitem > arrow,
+.menu > menuitem:hover .menu > menuitem arrow,
+.menu > menuitem:hover .menu > menuitem:hover .menu > menuitem arrow,
+.menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem arrow,
+.menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem arrow  {
+    color: @theme_text_color;
+}
+
+menu > menuitem:hover > arrow,
+menu > menuitem:hover menu > menuitem:hover arrow,
+menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover arrow,
+menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover arrow,
+menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover arrow,
+.menu > menuitem:hover > arrow,
+.menu > menuitem:hover .menu > menuitem:hover arrow,
+.menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover arrow,
+.menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover arrow,
+.menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover arrow {
+    color: @menubar_menuitem_hover_color;
+}
+
 menu separator,
+.menu separator,
 menuitem separator {
     color: @menu_separator_color;
     min-height: 1px;
diff --git a/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css b/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css
index dd33c421..11ddda1a 100644
--- a/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css
+++ b/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css
@@ -2135,7 +2135,8 @@ treemenu menuitem {
     padding: 2px;
 }
 
-menu {
+menu,
+.menu {
     font: normal;
     background-color: @menu_bg_color;
     color: @menu_fg_color;
@@ -2145,7 +2146,8 @@ menu {
     border-color: @menu_border_color;
 }
 
-menu button {
+menu button,
+.menu button {
     background-image: none;
     background-color: @menu_bg_color;
     color: @internal_element_color;
@@ -2153,7 +2155,8 @@ menu button {
     border-style: none;
 }
 
-menu button:hover {
+menu button:hover,
+.menu button:hover {
     background-image: none;
     background-color: @theme_base_color;
     color: @theme_text_color;
@@ -2161,7 +2164,8 @@ menu button:hover {
     border-style: none;
 }
 
-menu button:disabled {
+menu button:disabled,
+.menu button:disabled {
     background-color: @theme_base_color;
     color: lighter(@internal_element_color);
     border-image: none;
@@ -2169,7 +2173,8 @@ menu button:disabled {
 }
 
 /* this controls the general appearance of the menubar */
-menubar {
+menubar,
+.menubar {
     border-style: none;
     padding: 1px;
     -GtkWidget-window-dragging: true;
@@ -2181,7 +2186,8 @@ menubar {
                       to (@menubar_gradient_c));
 }
 
-menubar menuitem {
+menubar menuitem,
+.menubar menuitem {
     border-style: solid;
     border-width: 1px 1px 0px;
     border-color: transparent;
@@ -2190,6 +2196,7 @@ menubar menuitem {
 }
 
 menubar menuitem:hover,
+.menubar menuitem:hover,
 menuitem button.flat:hover,
 menuitem button.flat:active {
     background-color: @menu_bg_color;
@@ -2216,27 +2223,37 @@ menuitem button.flat:focus {
     color: @theme_text_color;
 }
 
-menubar menuitem:hover {
+menubar menuitem:hover,
+.menubar menuitem:hover {
     border-width: 1px 1px 0px;
     color: @menubar_menuitem_hover_color;
 }
 
 menu menuitem,
-menu menuitem:disabled {
+menu menuitem:disabled,
+.menu menuitem,
+.menu menuitem:disabled {
     border-width: 1px 0px;
     border-style: solid;
     border-color: transparent;
     padding: 4px;
     background-color: @menu_bg_color;
+    color: @theme_text_color;
 }
 
-menu menuitem:hover {
+menu > menuitem,
+.menu > menuitem {
+    color: @theme_text_color;
+}
+
+menu > menuitem:hover,
+.menu > menuitem:hover {
     border-radius: 0;
 }
 
 treemenu menuitem:hover,
-menu menuitem:active,
-menu menuitem:hover {
+menu menuitem:hover,
+.menu menuitem:hover {
     border-style: solid;
     border-width: 1px 0px;
     border-color: @menubar_menuitem_hover_border_color;
@@ -2244,11 +2261,9 @@ menu menuitem:hover {
 
 treemenu menuitem:hover,
 combobox menuitem:hover,
-menu menuitem:active,
-menu menuitem:active,
 menu menuitem:hover,
-menu menuitem:hover {
-    color: @theme_selected_fg_color;
+.menu menuitem:hover {
+    color: @menubar_menuitem_hover_color;
     background-image: -gtk-gradient (linear,
                       left top,
                       left bottom,
@@ -2258,11 +2273,13 @@ menu menuitem:hover {
                       to (@menubar_menuitem_hover_gradient_d));
 }
 
-menu menuitem:disabled {
+menu menuitem:disabled,
+.menu menuitem:disabled {
     color: mix (@menu_fg_color, @menu_bg_color, 0.6);
 }
 
-menu menuitem accelerator:disabled {
+menu menuitem accelerator:disabled,
+.menu menuitem accelerator:disabled {
     color: mix (@menu_fg_color, @menu_bg_color, 0.7);
 }
 
@@ -2270,8 +2287,7 @@ menuitem accelerator {
     color: alpha (@menu_fg_color, 0.4);
 }
 
-menuitem accelerator:hover,
-menuitem accelerator:active {
+menuitem accelerator:hover {
     color: alpha (@menu_fg_color, 0.3);
 }
 
@@ -2282,28 +2298,63 @@ menuitem arrow {
     color: @menu_controls_color;
 }
 
-menu menuitem arrow:dir(ltr) {
+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),
+.menu menuitem arrow:dir(rtl) {
     -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
 }
 
-menu arrow.top {
+menu arrow.top,
+.menu arrow.top {
     -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
 }
 
-menu arrow.bottom {
+menu arrow.bottom,
+.menu arrow.bottom {
     -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
 }
 
-menu arrow:hover {
+menu arrow:hover,
+.menu arrow:hover {
     border-color: @theme_selected_fg_color;
     color: shade (@theme_selected_bg_color, 1.6);
 }
 
+/* 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,
+menu > menuitem:hover menu > menuitem arrow,
+menu > menuitem:hover menu > menuitem:hover menu > menuitem arrow,
+menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem arrow,
+menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem arrow,
+.menu > menuitem > arrow,
+.menu > menuitem:hover .menu > menuitem arrow,
+.menu > menuitem:hover .menu > menuitem:hover .menu > menuitem arrow,
+.menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem arrow,
+.menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem arrow  {
+    color: @theme_text_color;
+}
+
+menu > menuitem:hover > arrow,
+menu > menuitem:hover menu > menuitem:hover arrow,
+menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover arrow,
+menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover arrow,
+menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover menu > menuitem:hover arrow,
+.menu > menuitem:hover > arrow,
+.menu > menuitem:hover .menu > menuitem:hover arrow,
+.menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover arrow,
+.menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover arrow,
+.menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover .menu > menuitem:hover arrow {
+    color: @menubar_menuitem_hover_color;
+}
+
 menu separator,
+.menu separator,
 menuitem separator {
     color: @menu_separator_color;
     min-height: 1px;