diff --git a/src/gtk3/widgets/_menus.scss b/src/gtk3/widgets/_menus.scss index 4e6382c..cfb5ebf 100644 --- a/src/gtk3/widgets/_menus.scss +++ b/src/gtk3/widgets/_menus.scss @@ -1,294 +1,301 @@ @charset "UTF-8"; @mixin item-highlight { @if $new-highlight { background-color: gtk("@theme_selected_bg_color"); color: gtk("@theme_button_foreground_active"); border: 1px solid gtk("@theme_button_decoration_focus"); } @else { background-color: gtk("@theme_button_decoration_focus"); color: gtk("@theme_button_foreground_active") } border-radius: 3px; } /********* * Menus * *********/ menubar, .menubar { -GtkWidget-window-dragging: true; padding: 0px; box-shadow: none; border-style: none; background-color: gtk("@theme_bg_color"); &:backdrop { background-color: gtk("@theme_unfocused_bg_color"); } >menuitem { min-height: 16px; padding: 4px 6px; - border-bottom: 3px solid transparent; + @if $new-highlight { + border-bottom: 3px solid transparent; + } &:hover { //Seems like it :hover even with keyboard focus - background-color: gtkalpha(gtk("@theme_button_decoration_focus"), 0.3); - color: gtk("@theme_button_foreground_active"); - border-bottom: 3px solid gtk("@theme_button_decoration_focus"); + @if $new-highlight { + background-color: gtkalpha(gtk("@theme_button_decoration_focus"), 0.3); + color: gtk("@theme_button_foreground_active"); + border-bottom: 3px solid gtk("@theme_button_decoration_focus"); + } @else { + background-color: gtk("@theme_button_decoration_focus"); + color: gtk("@theme_button_foreground_active"); + } } &:disabled { color: gtk("@insensitive_fg_color"); box-shadow: none; &:backdrop { background-color: gtk("@theme_unfocused_bg_color"); color: gtk("@insensitive_unfocused_fg_color"); } } &:backdrop { background-color: gtk("@theme_unfocused_bg_color"); color: gtk("@theme_unfocused_fg_color"); } } } menu, .menu { padding: 0px; background-color: gtk("@theme_bg_color"); border: 0px solid transparent; // FIXME workaround for libreoffice gtk3, should be a border //border: 1px solid $border_color; // adds borders in a non composited env box-shadow: inset 0px 0px 0px 1px gtk("@borders"); border-radius: $r; .csd & { //background-color: transparent; border: 0px solid; border-radius: $r; //box-shadow: 0px 0px 0px 1px $border_color, 2px 2px 2px 1px rgba(0, 0, 0, 0.1); } // axes borders in a composited env separator { color: gtk("@borders"); } menuitem { text-shadow: none; min-height: 16px; min-width: 40px; padding: 4px 4px; @if $new-highlight{ border: 1px solid transparent; margin: 4px; } &:hover { @include item-highlight(); } &:disabled { color: gtk("@insensitive_fg_color"); &:backdrop { color: gtk("@insensitive_unfocused_fg_color"); } } &:backdrop, &:backdrop:hover { color: gtk("@theme_unfocused_fg_color"); background-color: gtk("@theme_unfocused_bg_color"); } // submenu indicators arrow { min-height: 16px; min-width: 16px; &:dir(ltr) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); margin-left: 10px; } &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); margin-right: 10px; } } } // overflow arrows >arrow { @include button(undecorated); min-height: 16px; min-width: 16px; padding: 4px; background-color: transparent; border-radius: 0; &.top { margin-top: -6px; border: none; -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); } &.bottom { margin-bottom: -6px; border: none; -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } - &:hover { color: b_color(hover); } - &:active { color: b_color(active)} + &:hover { color: gtk("@theme_button_decoration_hover"); } + &:active { color: gtk("@theme_button_decoration_focus");} - &:backdrop { background-color: backdrop($menu_color); } + &:backdrop { background-color: gtk("@theme_unfocused_bg_color"); } &:disabled { color: transparent; background-color: transparent; border-color: transparent ; } } } menuitem { accelerator { color: gtkalpha(currentColor,0.55); } check, radio { min-height: 18px; min-width: 18px; &:dir(ltr) { margin-right: 6px; } &:dir(rtl) { margin-left: 6px; } } &:active check, &:active radio { -gtk-icon-transform: translate(1px,1px); } } /*************** * Popovers * ***************/ /* menu buttons */ modelbutton.flat, .menuitem.button.flat { min-height: 16px; padding: 4px 8px; @extend %undecorated_button; - color: w_color(text); + color: gtk("@theme_fg_color"); &:hover { - background-color: b_color(active); - color: b_color(active-text) + background-color: gtk("@theme_button_decoration_focus"); + color: gtk("@theme_button_foreground_active"); } &:selected { - background-color: b_color(active); - color: b_color(active-text) + background-color: gtk("@theme_button_decoration_focus"); + color: gtk("@theme_button_foreground_active"); } &:backdrop, &:backdrop:hover { @extend %undecorated_button; - color: backdrop(w_color(text)); + color: gtk("@theme_unfocused_fg_color"); } check:hover {-gtk-icon-source: -gtk-scaled(url("../assets/check-unchecked.png"), url("../assets/check-unchecked@2.png"));} radio:hover {-gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked.png"), url("../assets/radio-unchecked@2.png"));} check:checked:hover {-gtk-icon-source: -gtk-scaled(url("../assets/check-checked-active.png"), url("../assets/check-checked-active@2.png"));} radio:checked:hover {-gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-active.png"), url("../assets/radio-checked-active@2.png"));} check:indeterminate:hover {-gtk-icon-source: -gtk-scaled(url("../assets/check-mixed.png"), url("../assets/check-mixed@2.png"));} radio:indeterminate:hover {-gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed.png"), url("../assets/radio-mixed@2.png"));} // FIXME: remove the following when the checks/radios rewrite lands check:last-child, radio:last-child { margin-right: 0px; } check:first-child, radio:first-child { margin-left: 0px; } &:active check, &:active radio { -gtk-icon-transform: translate(1px,1px); } } modelbutton.flat arrow { background: none; &:hover { background: none; } &.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } &.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } } popover.background { padding: 0px; - border: 1px solid $border_color; + border: 1px solid gtk("@borders"); border-radius: 3px; - background-color: w_color(normal); + background-color: gtk("@theme_bg_color"); box-shadow: 0 2px 3px transparentize(black, 0.1); &:backdrop { box-shadow: none; } > list, > .view, > toolbar { border-style: none; background-color: transparent; } .csd &, & { &.touch-selection, &.magnifier { @extend %osd; - border: 1px solid $border_color; + border: 1px solid gtk("@borders"); button { @extend %button }; } &.osd { @extend %osd; } } separator { margin: 3px; } list separator { margin: 0px; } checkbutton, radiobutton { @extend modelbutton.flat; } } // .scale-popup .button, // .scale-popup .button.flat { // +/- buttons on GtkVolumeButton popup // @extend %undecorated_button; // background-color: transparent; // padding: 5px; // color: w_color(text); // &:hover { // @extend %undecorated_button; // color: b_color(hover); // } // &:active { // color: b_color(active); // } // &:insensitive { // color: insensitive(w_color(text)); // } // &:backdrop { // color: backdrop(w_color(text)); // &:insensitive { // color: backdrop(insensitive(w_color(text))); // } // } // } GtkVolumeButton.button { padding: 5px; }