From 220bb06234beca71a09f58e34d4069bba5f8c145 Mon Sep 17 00:00:00 2001 From: raveit65 Date: Tue, 26 Apr 2016 23:27:40 +0200 Subject: 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 --- desktop-themes/BlackMATE/gtk-3.0/gtk-widgets.css | 272 +++++++++++++++++------ 1 file 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; -- cgit v1.2.1