From 40678cd1f967f248648759fb782923c4bc0f1b98 Mon Sep 17 00:00:00 2001 From: raveit65 Date: Sun, 24 Apr 2016 19:29:38 +0200 Subject: GTK+-3.20 Menta themes: several adjustments ...... - re-work tooltips - replace GtkToolButton with toolbutton - replace GtkMenuButton with button.popup - re-work menus, fix issues with firefox - use button.file for filechooser button - update mate-panel settings for latest changes - add animation for button.needs-attention --- desktop-themes/Menta/gtk-3.0/gtk-widgets.css | 274 +++++++++++++++------ desktop-themes/Menta/gtk-3.0/mate-applications.css | 44 ++-- 2 files changed, 223 insertions(+), 95 deletions(-) (limited to 'desktop-themes/Menta') diff --git a/desktop-themes/Menta/gtk-3.0/gtk-widgets.css b/desktop-themes/Menta/gtk-3.0/gtk-widgets.css index 6d0f063d..4a6d01a8 100644 --- a/desktop-themes/Menta/gtk-3.0/gtk-widgets.css +++ b/desktop-themes/Menta/gtk-3.0/gtk-widgets.css @@ -111,29 +111,27 @@ textView { /************ * Tooltips * ************/ + tooltip { - padding: 4px; - border-style: solid; - border-width: 1px; - border-color: shade(@theme_tooltip_bg_color, 0.50); border-radius: 2px; + border-width: 1px; + border-color: @theme_tooltip_fg_color; + border-style: solid; } tooltip.background { background-color: @theme_tooltip_bg_color; - color: @theme_tooltip_fg_color; - text-shadow: none; + background-clip: padding-box; } -tooltip decoration { - background-color: alpha(shade(@theme_selected_bg_color, 1.0), 0.4); - border-radius: 4px; +tooltip label { + text-shadow: none; + color: @theme_tooltip_fg_color; + padding: 8px; } -tooltip * { +tooltip decoration { background-color: transparent; - color: @theme_tooltip_fg_color; - padding: 4px; } /********************* @@ -1562,10 +1560,10 @@ toolbar.inline-toolbar.vertical toolbutton > button:only-child, } /* remove shadows from linked menu buttons */ -.linked .menuitem.button:checked, -toolbar .raised.linked .menuitem.button:checked, -toolbar.inline-toolbar .menuitem.button:checked, -toolbar.inline-toolbar toolbutton > .menuitem.button:checked, +.linked button.popup:checked, +toolbar .raised.linked button.popup:checked, +toolbar.inline-toolbar button.popup:checked, +toolbar.inline-toolbar toolbutton > button.popup:checked, .linked GtkMenuButton.menu-button:active, .toolbar GtkMenuButton.menu-button.raised.linked:active, .toolbar .raised.linked GtkMenuButton.menu-button:active, @@ -1814,11 +1812,16 @@ calendar.header stackswitcher > button.titlebutton { stackswitcher > button.needs-attention > label, stackswitcher > button.needs-attention > image { - animation: needs_attention 150ms ease-in; - background-color: @theme_bg_color; /* FIXME: ? */ - background-size: 6px 6px, 6px 6px; - background-repeat: no-repeat; - background-position: right 3px, right 4px; + animation: needs_attention 150ms ease-in; + background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, + to(#4a90d9), + to(transparent)), + -gtk-gradient(radial, center center, 0, center center, 0.5, + to(rgba(255, 255, 255, 0.76923)), + to(transparent)); + background-size: 6px 6px, 6px 6px; + background-repeat: no-repeat; + background-position: right 3px, right 4px; } stackswitcher > button.needs-attention > label:backdrop, @@ -2421,7 +2424,7 @@ combobox arrow { ********************/ button.font separator, -filechooserbutton button separator, +filechooserbutton button.file separator, filechooser separator { /* always disable separators */ -GtkWidget-horizontal-separator: 0; @@ -2435,7 +2438,7 @@ button.font label:last-child { color: mix(@theme_fg_color, @theme_bg_color, 0.35); } -filechooserbutton button image:last-child { +filechooserbutton button.file image:last-child { color: @internal_element_color; } @@ -2686,100 +2689,116 @@ toolbar button menuitem { text-shadow: none; } -menu { +menu, +.menu { background-color: @menu_bg_color; color: @menu_fg_color; padding: 0; border: 1px solid @borders; margin: 4px; + text-shadow: none; } -menu button { +menu button, +.menu button { background-image: none; background-color: @theme_base_color; color: @internal_element_color; border-image: none; border-style: none; + text-shadow: none; } -menu button:hover { +menu button:hover, +.menu button:hover { background-image: none; background-color: @theme_base_color; color: @theme_text_color; border-image: none; border-style: none; + text-shadow: none; } -menu button:disabled { +menu button:disabled, +.menu button:disabled { background-color: @theme_base_color; color: lighter(@internal_element_color); border-image: none; border-style: none; + text-shadow: none; } /* this controls the general appearance of the menubar */ -menubar { +menubar, +.menubar { background-image: linear-gradient(to bottom, @theme_bg_color, shade (@theme_bg_color, 0.96)); border-width: 0; -GtkWidget-window-dragging: true; + text-shadow: none; } -menubar menuitem { +menubar menuitem, +.menubar menuitem { min-height: 18px; transition: all 200ms ease-out; -gtk-icon-style: regular; border-style: none; padding: 4px 6px; text-shadow: 0 1px @button_text_shadow; + text-shadow: none; + color: @menu_fg_color; } -menubar menuitem:hover { +menubar menuitem:hover, +.menubar menuitem:hover { background-image: linear-gradient(to bottom, shade (@theme_bg_color, 1.0), shade (@theme_bg_color, 0.82)); -} - -menubar menuitem:hover { color: @menu_fg_color; + text-shadow: none; } -menu menuitem { +menu menuitem, +.menu menuitem { min-height: 18px; background-color: transparent; transition: all 150ms ease-out; padding: 6px 5px; + text-shadow: none; + color: @menu_fg_color; } -menu menuitem:hover { - border-radius: 0; +/* fix for firefox menus */ +.menuitem { + transition: none; + color: @menu_fg_color; + text-shadow: none; } menu menuitem:active, -menu menuitem:hover { +menu menuitem:hover, +.menu menuitem:active, +.menu menuitem:hover { background-color: @theme_selected_bg_color; background-image: linear-gradient(to bottom, shade (@theme_selected_bg_color, 1.0), shade (@theme_selected_bg_color, 0.85)); + color: @theme_selected_fg_color; text-shadow: none; - border: none; + border-style: none; + border-radius: 0px; } -menu menuitem:disabled { +menu menuitem:disabled, +.menu menuitem:disabled { background-color: transparent; -} - -menu menuitem:active, -menu menuitem:hover { - color: @theme_selected_fg_color; -} - -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); } @@ -2799,22 +2818,134 @@ 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"); } +/* 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 { + -gtk-icon-shadow: 0px 1px shade (@theme_base_color, 1.0), + 1px 0px shade (@theme_base_color, 1.0), + -1px 0px shade (@theme_base_color, 1.0), + 0px -1px shade (@theme_base_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_base_color; + -gtk-icon-shadow: 0px 1px shade (@theme_fg_color, 0.8), + 1px 0px shade (@theme_fg_color, 0.8), + -1px 0px shade (@theme_fg_color, 0.8), + 0px -1px shade (@theme_fg_color, 0.8); +} + +menu > menuitem:disabled > arrow, +.menu > menuitem:disabled > arrow { + color: mix (@menu_fg_color, @menu_bg_color, 0.6); + -gtk-icon-shadow: none; +} + +/* scroll arrows */ +menu > arrow, +.menu > arrow { + border-color: transparent; + background-color: transparent; + background-image: none; + min-height: 16px; + min-width: 16px; + padding: 4px; + color: @theme_fg_color; + -gtk-icon-shadow: 0px 1px shade (@theme_base_color, 1.0), + 1px 0px shade (@theme_base_color, 1.0), + -1px 0px shade (@theme_base_color, 1.0), + 0px -1px shade (@theme_base_color, 1.0); +} + +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:hover, +.menu > arrow:hover { + background-color: @theme_selected_bg_color; + color: @theme_base_color; + -gtk-icon-shadow: 0px 1px shade (@theme_fg_color, 0.8), + 1px 0px shade (@theme_fg_color, 0.8), + -1px 0px shade (@theme_fg_color, 0.8), + 0px -1px shade (@theme_fg_color, 0.8); +} + +menu > arrow:disabled, +.menu > arrow:disabled { + color: mix (@menu_fg_color, @menu_bg_color, 0.6); + -gtk-icon-shadow: none; + background-color: transparent; + border-color: transparent; +} + menuitem separator { color: @menu_separator; } @@ -2880,11 +3011,11 @@ menuitem radio:checked:disabled { * Menu Button * ***************/ -toolbar .menuitem.button:selected, -toolbar .raised .menuitem.button:selected, -.menuitem.button:selected, -.linked .menuitem.button:selected, -toolbar .linked.raised .menuitem.button:selected { +toolbar button.popup:selected, +toolbar .raised button.popup:selected, +button.popup:selected, +.linked button.popup:selected, +toolbar .linked.raised button.popup:selected { /* background-image: none; background-color: @menu_bg_color; border-image: none; @@ -2893,25 +3024,25 @@ toolbar .linked.raised .menuitem.button:selected { color: @theme_text_color;*/ } -.menuitem.button:selected, -.linked .menuitem.button:selected, -toolbar .linked.raised .menuitem.button:selected { +button.popup:selected, +.linked button.popup:selected, +toolbar .linked.raised button.popup:selected { text-shadow: none; -gtk-icon-shadow: none; box-shadow: none; } -.linked .menuitem.button:selected:last-child, -toolbar .linked.raised .menuitem.button:selected:last-child { +.linked button.popup:selected:last-child, +toolbar .linked.raised button.popup:selected:last-child { border-top-left-radius: 0; } -.linked .menuitem.button:selected:first-child, -toolbar .linked.raised .menuitem.button:selected:first-child { +.linked button.popup:selected:first-child, +toolbar .linked.raised button.popup:selected:first-child { border-top-right-radius: 0; } -menubar .menuitem.button:selected { +menubar button.popup:selected { background-image: none; background-color: @menu_bg_color; border-radius: 4px 4px 0 0; @@ -2921,14 +3052,13 @@ menubar .menuitem.button:selected { border-style: solid; } -menubar .menuitem.button:selected, -.menuitem.button:selected, -toolbar .menuitem.button:selected, -.button.menuitem.menubar:active { +menubar button.popup:selected, +button.popup:selected, +toolbar button.popup:selected { color: @theme_text_color; } -menu .menuitem.button { +menu button.popup { text-shadow: none; } @@ -3472,12 +3602,12 @@ toolbar.osd button.image-button { box-shadow: none; } -.osd .menuitem.button:selected { +.osd button.popup:selected { background-color: transparent; border-color: @osd_button_border; } -.osd .menuitem.button:selected { +.osd button.popup:selected { color: @osd_button_fg_active; text-shadow: 0 -1px @osd_button_shadow; } diff --git a/desktop-themes/Menta/gtk-3.0/mate-applications.css b/desktop-themes/Menta/gtk-3.0/mate-applications.css index 5388ee0e..46665291 100644 --- a/desktop-themes/Menta/gtk-3.0/mate-applications.css +++ b/desktop-themes/Menta/gtk-3.0/mate-applications.css @@ -217,6 +217,10 @@ /* first make all transparent */ .mate-panel-menu-bar, .mate-panel-menu-bar menubar, +.mate-panel-menu-bar menuitem, +#PanelPlug, +#PanelApplet button, +PanelToplevel.background, #PanelApplet-window-menu-applet-button { background-color: transparent; border-image: none; @@ -226,7 +230,9 @@ } /* let's start it */ -.mate-panel-menu-bar { +#PanelPlug, +.mate-panel-menu-bar, +PanelToplevel.background { background-color: @theme_bg_color; background-image: none; /* normal panel */ @@ -237,12 +243,12 @@ } /* workaround to avoid unwanted black frames if switching compositor on/off */ -.mate-panel-menu-bar .window-frame.csd.popup { +.mate-panel-menu-bar .csd.popup decoration { box-shadow: none; } /* hide buttons */ -.mate-panel-menu-bar button { +PanelToplevel > widget > button { background: transparent; border-image: none; border-radius: 2px; @@ -251,8 +257,8 @@ box-shadow: none; } -.mate-panel-menu-bar button:hover, -.mate-panel-menu-bar button:hover:active { +PanelToplevel > widget > button:hover, +PanelToplevel > widget > button:hover:active { background-image: linear-gradient(to bottom, shade (@theme_selected_bg_color, 0.86), shade (@theme_selected_bg_color, 0.26)); @@ -293,17 +299,11 @@ MatePanelAppletFrameDBus { background-image: linear-gradient(to bottom, shade (@theme_selected_bg_color, 0.86), shade (@theme_selected_bg_color, 0.26)); - color: shade (@theme_selected_fg_color, 1.00); + color: shade (@theme_base_color, 1.00); text-shadow: none; border-style: solid; border-width: 0px; - border-radius: 5px; -} - -/* set menubar menuitem separator , does not work */ -.mate-panel-menu-bar menubar menu menuitem separator { - color: @menu_separator; -/* -GtkMenuItem-horizontal-padding: 0; deprecated */ + border-radius: 3px; } /* set normal menubar menuitem */ @@ -359,7 +359,7 @@ MatePanelAppletFrameDBus { shade (@theme_selected_bg_color, 0.86), shade (@theme_selected_bg_color, 0.26)); background-color: transparent; - color: shade (@theme_selected_fg_color, 1.00); + color: shade (@theme_base_color, 1.00); border-image: none; border-style: solid; border-width: 0px; @@ -408,22 +408,20 @@ PanelApplet.wnck-applet .wnck-pager:hover { @theme_selected_bg_color); } -.mate-panel-menu-bar menubar, -MatePanelApplet > menubar { +#clock-applet-button.flat.toggle > box.horizontal > label { font: normal; } -/* no background for icon-padding area */ -GtkTrayIcon.background { - background-color: transparent; -} - -/* na-tray-applet */ -.mate-panel-menu-bar #PanelApplet { +na-tray-applet { -NaTrayApplet-icon-padding: 3px; -NaTrayApplet-icon-size: 16; } +/* no background for icon-padding area */ +na-tray-applet widget box widget { + background-color: transparent; +} + /* Classic icon style */ .mate-panel-menu-bar { -PanelMenuBar-icon-visible: true; -- cgit v1.2.1