diff --git a/src/gtk3/widgets/_menus.scss b/src/gtk3/widgets/_menus.scss index cfb5ebf..7f6c40e 100644 --- a/src/gtk3/widgets/_menus.scss +++ b/src/gtk3/widgets/_menus.scss @@ -1,301 +1,314 @@ @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"); + border-radius: 3px; } @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; @if $new-highlight { border-bottom: 3px solid transparent; } &:hover { //Seems like it :hover even with keyboard 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: gtk("@theme_button_decoration_hover"); } &:active { color: gtk("@theme_button_decoration_focus");} &: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: gtk("@theme_fg_color"); &:hover { background-color: gtk("@theme_button_decoration_focus"); color: gtk("@theme_button_foreground_active"); } &:selected { background-color: gtk("@theme_button_decoration_focus"); color: gtk("@theme_button_foreground_active"); } &:backdrop, &:backdrop:hover { @extend %undecorated_button; 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"));} + check, radio { + -gtk-icon-palette: error gtk("@theme_button_decoration_focus"), success gtk("@borders"), warning gtk("@theme_button_background_normal"); + -gtk-icon-shadow: 1px 1px rgba(35,38,41,0.2); + + &:hover { + -gtk-icon-palette: error gtk("@theme_button_decoration_focus"), success gtk("@theme_button_decoration_focus"), warning gtk("@theme_button_background_normal"); + } + &:disabled { + -gtk-icon-palette: error gtk("@theme_button_decoration_focus_insensitive"), success gtk("@insensitive_borders"), warning gtk("@theme_button_background_insensitive"); + } + } + @each $type in ('check', 'radio') { + #{$type} { + -gtk-icon-source: -gtk-recolor(url("../assets/breeze-#{$type}-unchecked-symbolic.svg")); + @each $state in ('checked', 'indeterminate') { + &:#{$state} { + -gtk-icon-source: -gtk-recolor(url("../assets/breeze-#{$type}-#{$state}-symbolic.svg")); + } + } + } + } // 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 gtk("@borders"); border-radius: 3px; 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 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; }