From 351060c53d01be668f84d04c7e7502bfabda1805 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Mon, 28 Mar 2016 12:09:09 +0200 Subject: [PATCH] fix menu overflow buttons --- common/gtk-3.0/3.20/gtk-dark.css | 43 +++++++++++++----------- common/gtk-3.0/3.20/gtk-darker.css | 43 +++++++++++++----------- common/gtk-3.0/3.20/gtk-solid-dark.css | 43 +++++++++++++----------- common/gtk-3.0/3.20/gtk-solid-darker.css | 43 +++++++++++++----------- common/gtk-3.0/3.20/gtk-solid.css | 43 +++++++++++++----------- common/gtk-3.0/3.20/gtk.css | 43 +++++++++++++----------- common/gtk-3.0/3.20/sass/_common.scss | 16 +++++---- 7 files changed, 154 insertions(+), 120 deletions(-) diff --git a/common/gtk-3.0/3.20/gtk-dark.css b/common/gtk-3.0/3.20/gtk-dark.css index d3e2dfe..e10d6e9 100644 --- a/common/gtk-3.0/3.20/gtk-dark.css +++ b/common/gtk-3.0/3.20/gtk-dark.css @@ -675,8 +675,7 @@ toolbar.inline-toolbar toolbutton > button.flat, .inline-toolbar toolbutton > bu border-style: solid; } menuitem.button.flat, -modelbutton.flat, button:link, button:visited, button:link:hover, button:link:active, button:link:checked, button:visited:hover, button:visited:active, button:visited:checked, menu arrow, -.menu arrow, notebook > header > tabs > tab button.flat:hover, notebook > header > tabs > tab button.sidebar-button:hover, notebook > header > tabs > tab button.flat:active, notebook > header > tabs > tab button.sidebar-button:active, notebook > header > tabs > tab button.flat:active:hover, notebook > header > tabs > tab button.sidebar-button:active:hover, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification button.flat:disabled, .app-notification button.sidebar-button:disabled { +modelbutton.flat, button:link, button:visited, button:link:hover, button:link:active, button:link:checked, button:visited:hover, button:visited:active, button:visited:checked, notebook > header > tabs > tab button.flat:hover, notebook > header > tabs > tab button.sidebar-button:hover, notebook > header > tabs > tab button.flat:active, notebook > header > tabs > tab button.sidebar-button:active, notebook > header > tabs > tab button.flat:active:hover, notebook > header > tabs > tab button.sidebar-button:active:hover, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification button.flat:disabled, .app-notification button.sidebar-button:disabled { border-color: transparent; background-color: transparent; background-image: none; @@ -1541,25 +1540,31 @@ menu, menuitem check:dir(rtl), menuitem radio:dir(rtl) { margin-left: 6px; margin-right: 2px; } - menu arrow, - .menu arrow { - border-style: none; - border-radius: 0; + menu > arrow, + .menu > arrow { + border-color: transparent; + background-color: transparent; + background-image: none; min-width: 16px; - min-height: 16px; } - menu arrow.top, - .menu arrow.top { - -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); - border-bottom: 1px solid #4f5461; } - menu arrow.bottom, - .menu arrow.bottom { - -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); - border-top: 1px solid #4f5461; } - menu arrow:hover, - .menu arrow:hover { + min-height: 16px; + padding: 4px; + background-color: #383C4A; + border-radius: 0; } + menu > arrow.top, + .menu > arrow.top { + margin-top: -6px; + border-bottom: 1px solid #4f5461; + -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } + menu > arrow.bottom, + .menu > arrow.bottom { + margin-bottom: -6px; + border-top: 1px solid #4f5461; + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + menu > arrow:hover, + .menu > arrow:hover { background-color: #4f5461; } - menu arrow:disabled, - .menu arrow:disabled { + menu > arrow:disabled, + .menu > arrow:disabled { color: transparent; background-color: transparent; border-color: transparent; } diff --git a/common/gtk-3.0/3.20/gtk-darker.css b/common/gtk-3.0/3.20/gtk-darker.css index 9ac3de8..94b3a03 100644 --- a/common/gtk-3.0/3.20/gtk-darker.css +++ b/common/gtk-3.0/3.20/gtk-darker.css @@ -674,8 +674,7 @@ toolbar.inline-toolbar toolbutton > button.flat, .inline-toolbar toolbutton > bu border-style: solid; } menuitem.button.flat, -modelbutton.flat, button:link, button:visited, button:link:hover, button:link:active, button:link:checked, button:visited:hover, button:visited:active, button:visited:checked, menu arrow, -.menu arrow, notebook > header > tabs > tab button.flat:hover, notebook > header > tabs > tab button.sidebar-button:hover, notebook > header > tabs > tab button.flat:active, notebook > header > tabs > tab button.sidebar-button:active, notebook > header > tabs > tab button.flat:active:hover, notebook > header > tabs > tab button.sidebar-button:active:hover, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification button.flat:disabled, .app-notification button.sidebar-button:disabled { +modelbutton.flat, button:link, button:visited, button:link:hover, button:link:active, button:link:checked, button:visited:hover, button:visited:active, button:visited:checked, notebook > header > tabs > tab button.flat:hover, notebook > header > tabs > tab button.sidebar-button:hover, notebook > header > tabs > tab button.flat:active, notebook > header > tabs > tab button.sidebar-button:active, notebook > header > tabs > tab button.flat:active:hover, notebook > header > tabs > tab button.sidebar-button:active:hover, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification button.flat:disabled, .app-notification button.sidebar-button:disabled { border-color: transparent; background-color: transparent; background-image: none; @@ -1540,25 +1539,31 @@ menu, menuitem check:dir(rtl), menuitem radio:dir(rtl) { margin-left: 6px; margin-right: 2px; } - menu arrow, - .menu arrow { - border-style: none; - border-radius: 0; + menu > arrow, + .menu > arrow { + border-color: transparent; + background-color: transparent; + background-image: none; min-width: 16px; - min-height: 16px; } - menu arrow.top, - .menu arrow.top { - -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); - border-bottom: 1px solid #efeff0; } - menu arrow.bottom, - .menu arrow.bottom { - -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); - border-top: 1px solid #efeff0; } - menu arrow:hover, - .menu arrow:hover { + min-height: 16px; + padding: 4px; + background-color: #ffffff; + border-radius: 0; } + menu > arrow.top, + .menu > arrow.top { + margin-top: -6px; + border-bottom: 1px solid #efeff0; + -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } + menu > arrow.bottom, + .menu > arrow.bottom { + margin-bottom: -6px; + border-top: 1px solid #efeff0; + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + menu > arrow:hover, + .menu > arrow:hover { background-color: #efeff0; } - menu arrow:disabled, - .menu arrow:disabled { + menu > arrow:disabled, + .menu > arrow:disabled { color: transparent; background-color: transparent; border-color: transparent; } diff --git a/common/gtk-3.0/3.20/gtk-solid-dark.css b/common/gtk-3.0/3.20/gtk-solid-dark.css index 3653d29..5956c95 100644 --- a/common/gtk-3.0/3.20/gtk-solid-dark.css +++ b/common/gtk-3.0/3.20/gtk-solid-dark.css @@ -675,8 +675,7 @@ toolbar.inline-toolbar toolbutton > button.flat, .inline-toolbar toolbutton > bu border-style: solid; } menuitem.button.flat, -modelbutton.flat, button:link, button:visited, button:link:hover, button:link:active, button:link:checked, button:visited:hover, button:visited:active, button:visited:checked, menu arrow, -.menu arrow, notebook > header > tabs > tab button.flat:hover, notebook > header > tabs > tab button.sidebar-button:hover, notebook > header > tabs > tab button.flat:active, notebook > header > tabs > tab button.sidebar-button:active, notebook > header > tabs > tab button.flat:active:hover, notebook > header > tabs > tab button.sidebar-button:active:hover, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification button.flat:disabled, .app-notification button.sidebar-button:disabled { +modelbutton.flat, button:link, button:visited, button:link:hover, button:link:active, button:link:checked, button:visited:hover, button:visited:active, button:visited:checked, notebook > header > tabs > tab button.flat:hover, notebook > header > tabs > tab button.sidebar-button:hover, notebook > header > tabs > tab button.flat:active, notebook > header > tabs > tab button.sidebar-button:active, notebook > header > tabs > tab button.flat:active:hover, notebook > header > tabs > tab button.sidebar-button:active:hover, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification button.flat:disabled, .app-notification button.sidebar-button:disabled { border-color: transparent; background-color: transparent; background-image: none; @@ -1541,25 +1540,31 @@ menu, menuitem check:dir(rtl), menuitem radio:dir(rtl) { margin-left: 6px; margin-right: 2px; } - menu arrow, - .menu arrow { - border-style: none; - border-radius: 0; + menu > arrow, + .menu > arrow { + border-color: transparent; + background-color: transparent; + background-image: none; min-width: 16px; - min-height: 16px; } - menu arrow.top, - .menu arrow.top { - -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); - border-bottom: 1px solid #4f5461; } - menu arrow.bottom, - .menu arrow.bottom { - -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); - border-top: 1px solid #4f5461; } - menu arrow:hover, - .menu arrow:hover { + min-height: 16px; + padding: 4px; + background-color: #383C4A; + border-radius: 0; } + menu > arrow.top, + .menu > arrow.top { + margin-top: -6px; + border-bottom: 1px solid #4f5461; + -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } + menu > arrow.bottom, + .menu > arrow.bottom { + margin-bottom: -6px; + border-top: 1px solid #4f5461; + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + menu > arrow:hover, + .menu > arrow:hover { background-color: #4f5461; } - menu arrow:disabled, - .menu arrow:disabled { + menu > arrow:disabled, + .menu > arrow:disabled { color: transparent; background-color: transparent; border-color: transparent; } diff --git a/common/gtk-3.0/3.20/gtk-solid-darker.css b/common/gtk-3.0/3.20/gtk-solid-darker.css index 7d7ff78..86d2f03 100644 --- a/common/gtk-3.0/3.20/gtk-solid-darker.css +++ b/common/gtk-3.0/3.20/gtk-solid-darker.css @@ -674,8 +674,7 @@ toolbar.inline-toolbar toolbutton > button.flat, .inline-toolbar toolbutton > bu border-style: solid; } menuitem.button.flat, -modelbutton.flat, button:link, button:visited, button:link:hover, button:link:active, button:link:checked, button:visited:hover, button:visited:active, button:visited:checked, menu arrow, -.menu arrow, notebook > header > tabs > tab button.flat:hover, notebook > header > tabs > tab button.sidebar-button:hover, notebook > header > tabs > tab button.flat:active, notebook > header > tabs > tab button.sidebar-button:active, notebook > header > tabs > tab button.flat:active:hover, notebook > header > tabs > tab button.sidebar-button:active:hover, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification button.flat:disabled, .app-notification button.sidebar-button:disabled { +modelbutton.flat, button:link, button:visited, button:link:hover, button:link:active, button:link:checked, button:visited:hover, button:visited:active, button:visited:checked, notebook > header > tabs > tab button.flat:hover, notebook > header > tabs > tab button.sidebar-button:hover, notebook > header > tabs > tab button.flat:active, notebook > header > tabs > tab button.sidebar-button:active, notebook > header > tabs > tab button.flat:active:hover, notebook > header > tabs > tab button.sidebar-button:active:hover, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification button.flat:disabled, .app-notification button.sidebar-button:disabled { border-color: transparent; background-color: transparent; background-image: none; @@ -1540,25 +1539,31 @@ menu, menuitem check:dir(rtl), menuitem radio:dir(rtl) { margin-left: 6px; margin-right: 2px; } - menu arrow, - .menu arrow { - border-style: none; - border-radius: 0; + menu > arrow, + .menu > arrow { + border-color: transparent; + background-color: transparent; + background-image: none; min-width: 16px; - min-height: 16px; } - menu arrow.top, - .menu arrow.top { - -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); - border-bottom: 1px solid #efeff0; } - menu arrow.bottom, - .menu arrow.bottom { - -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); - border-top: 1px solid #efeff0; } - menu arrow:hover, - .menu arrow:hover { + min-height: 16px; + padding: 4px; + background-color: #ffffff; + border-radius: 0; } + menu > arrow.top, + .menu > arrow.top { + margin-top: -6px; + border-bottom: 1px solid #efeff0; + -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } + menu > arrow.bottom, + .menu > arrow.bottom { + margin-bottom: -6px; + border-top: 1px solid #efeff0; + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + menu > arrow:hover, + .menu > arrow:hover { background-color: #efeff0; } - menu arrow:disabled, - .menu arrow:disabled { + menu > arrow:disabled, + .menu > arrow:disabled { color: transparent; background-color: transparent; border-color: transparent; } diff --git a/common/gtk-3.0/3.20/gtk-solid.css b/common/gtk-3.0/3.20/gtk-solid.css index 4d85f7d..2ad1c8a 100644 --- a/common/gtk-3.0/3.20/gtk-solid.css +++ b/common/gtk-3.0/3.20/gtk-solid.css @@ -674,8 +674,7 @@ toolbar.inline-toolbar toolbutton > button.flat, .inline-toolbar toolbutton > bu border-style: solid; } menuitem.button.flat, -modelbutton.flat, button:link, button:visited, button:link:hover, button:link:active, button:link:checked, button:visited:hover, button:visited:active, button:visited:checked, menu arrow, -.menu arrow, notebook > header > tabs > tab button.flat:hover, notebook > header > tabs > tab button.sidebar-button:hover, notebook > header > tabs > tab button.flat:active, notebook > header > tabs > tab button.sidebar-button:active, notebook > header > tabs > tab button.flat:active:hover, notebook > header > tabs > tab button.sidebar-button:active:hover, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification button.flat:disabled, .app-notification button.sidebar-button:disabled { +modelbutton.flat, button:link, button:visited, button:link:hover, button:link:active, button:link:checked, button:visited:hover, button:visited:active, button:visited:checked, notebook > header > tabs > tab button.flat:hover, notebook > header > tabs > tab button.sidebar-button:hover, notebook > header > tabs > tab button.flat:active, notebook > header > tabs > tab button.sidebar-button:active, notebook > header > tabs > tab button.flat:active:hover, notebook > header > tabs > tab button.sidebar-button:active:hover, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification button.flat:disabled, .app-notification button.sidebar-button:disabled { border-color: transparent; background-color: transparent; background-image: none; @@ -1544,25 +1543,31 @@ menu, menuitem check:dir(rtl), menuitem radio:dir(rtl) { margin-left: 6px; margin-right: 2px; } - menu arrow, - .menu arrow { - border-style: none; - border-radius: 0; + menu > arrow, + .menu > arrow { + border-color: transparent; + background-color: transparent; + background-image: none; min-width: 16px; - min-height: 16px; } - menu arrow.top, - .menu arrow.top { - -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); - border-bottom: 1px solid #efeff0; } - menu arrow.bottom, - .menu arrow.bottom { - -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); - border-top: 1px solid #efeff0; } - menu arrow:hover, - .menu arrow:hover { + min-height: 16px; + padding: 4px; + background-color: #ffffff; + border-radius: 0; } + menu > arrow.top, + .menu > arrow.top { + margin-top: -6px; + border-bottom: 1px solid #efeff0; + -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } + menu > arrow.bottom, + .menu > arrow.bottom { + margin-bottom: -6px; + border-top: 1px solid #efeff0; + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + menu > arrow:hover, + .menu > arrow:hover { background-color: #efeff0; } - menu arrow:disabled, - .menu arrow:disabled { + menu > arrow:disabled, + .menu > arrow:disabled { color: transparent; background-color: transparent; border-color: transparent; } diff --git a/common/gtk-3.0/3.20/gtk.css b/common/gtk-3.0/3.20/gtk.css index ce56374..c670a39 100644 --- a/common/gtk-3.0/3.20/gtk.css +++ b/common/gtk-3.0/3.20/gtk.css @@ -674,8 +674,7 @@ toolbar.inline-toolbar toolbutton > button.flat, .inline-toolbar toolbutton > bu border-style: solid; } menuitem.button.flat, -modelbutton.flat, button:link, button:visited, button:link:hover, button:link:active, button:link:checked, button:visited:hover, button:visited:active, button:visited:checked, menu arrow, -.menu arrow, notebook > header > tabs > tab button.flat:hover, notebook > header > tabs > tab button.sidebar-button:hover, notebook > header > tabs > tab button.flat:active, notebook > header > tabs > tab button.sidebar-button:active, notebook > header > tabs > tab button.flat:active:hover, notebook > header > tabs > tab button.sidebar-button:active:hover, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification button.flat:disabled, .app-notification button.sidebar-button:disabled { +modelbutton.flat, button:link, button:visited, button:link:hover, button:link:active, button:link:checked, button:visited:hover, button:visited:active, button:visited:checked, notebook > header > tabs > tab button.flat:hover, notebook > header > tabs > tab button.sidebar-button:hover, notebook > header > tabs > tab button.flat:active, notebook > header > tabs > tab button.sidebar-button:active, notebook > header > tabs > tab button.flat:active:hover, notebook > header > tabs > tab button.sidebar-button:active:hover, .app-notification button.flat, .app-notification button.sidebar-button, .app-notification button.flat:disabled, .app-notification button.sidebar-button:disabled { border-color: transparent; background-color: transparent; background-image: none; @@ -1544,25 +1543,31 @@ menu, menuitem check:dir(rtl), menuitem radio:dir(rtl) { margin-left: 6px; margin-right: 2px; } - menu arrow, - .menu arrow { - border-style: none; - border-radius: 0; + menu > arrow, + .menu > arrow { + border-color: transparent; + background-color: transparent; + background-image: none; min-width: 16px; - min-height: 16px; } - menu arrow.top, - .menu arrow.top { - -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); - border-bottom: 1px solid #efeff0; } - menu arrow.bottom, - .menu arrow.bottom { - -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); - border-top: 1px solid #efeff0; } - menu arrow:hover, - .menu arrow:hover { + min-height: 16px; + padding: 4px; + background-color: #ffffff; + border-radius: 0; } + menu > arrow.top, + .menu > arrow.top { + margin-top: -6px; + border-bottom: 1px solid #efeff0; + -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } + menu > arrow.bottom, + .menu > arrow.bottom { + margin-bottom: -6px; + border-top: 1px solid #efeff0; + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + menu > arrow:hover, + .menu > arrow:hover { background-color: #efeff0; } - menu arrow:disabled, - .menu arrow:disabled { + menu > arrow:disabled, + .menu > arrow:disabled { color: transparent; background-color: transparent; border-color: transparent; } diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 51ee0a7..c20e169 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -1613,20 +1613,24 @@ menu, } } } - arrow { // overflow buttons - @extend %undecorated_button; - border-style: none; - border-radius: 0; + // overflow buttons + > arrow { + @include button(undecorated); min-width: 16px; min-height: 16px; + padding: 4px; + background-color: $_menu_bg; + border-radius: 0; &.top { - -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); + margin-top: -6px; border-bottom: 1px solid mix($fg_color, $base_color, 10%); + -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); } &.bottom { - -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); + margin-bottom: -6px; border-top: 1px solid mix($fg_color, $base_color, 10%); + -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } &:hover { background-color: mix($fg_color, $base_color, 10%); } &:disabled {