diff --git a/gtk-4.0/gtk-dark.css b/gtk-4.0/gtk-dark.css index 194e4ccf..8b0b0c84 100755 --- a/gtk-4.0/gtk-dark.css +++ b/gtk-4.0/gtk-dark.css @@ -3346,7 +3346,7 @@ popover.background { border-style: none; background-color: transparent; } popover.background > contents separator { - background-color: rgba(27, 28, 36, 0.93); + background-color: #373a4b; margin: 3px; } popover.background > contents list separator { margin: 0; } @@ -3362,6 +3362,79 @@ popover.background { magnifier { background-color: #282a36; } +/********************** + * Popover Base Menus * + **********************/ +popover.menu { + padding: 0; } + popover.menu box.inline-buttons { + padding: 0 12px; } + popover.menu box.inline-buttons button.image-button.model { + border-color: transparent; + background-color: transparent; + background-image: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; + min-height: 30px; + min-width: 30px; + padding: 0; + border: none; + outline: none; + transition: none; } + popover.menu box.inline-buttons button.image-button.model:selected { + background: image(#383a4c); } + popover.menu box.circular-buttons { + padding: 12px 12px 6px; } + popover.menu box.circular-buttons button.circular.image-button.model { + padding: 11px; } + popover.menu box.circular-buttons button.circular.image-button.model:focus { + background-color: #383a4c; + border-color: #383a4c; } + popover.menu > arrow, popover.menu.background > contents { + background-color: #242530; + color: #f8f8f2; + padding: 5px; } + popover.menu.background separator { + margin: 6px 0; } + popover.menu accelerator { + color: alpha(currentColor,0.55); } + popover.menu accelerator:dir(ltr) { + margin-left: 12px; } + popover.menu accelerator:dir(rtl) { + margin-right: 12px; } + popover.menu check:hover, popover.menu check:active, + popover.menu radio:hover, + popover.menu radio:active { + background-color: transparent; } + popover.menu radio { + border-color: rgba(25, 26, 34, 0.9); } + popover.menu radio:active { + border-color: rgba(25, 26, 34, 0.4); } + popover.menu arrow.left, + popover.menu radio.left, + popover.menu check.left { + margin-left: -2px; + margin-right: 6px; } + popover.menu arrow.right, + popover.menu radio.right, + popover.menu check.right { + margin-left: 6px; + margin-right: -2px; } + popover.menu modelbutton { + min-height: 30px; + min-width: 40px; + padding: 0 12px; + border-radius: 5px; } + popover.menu modelbutton:selected { + color: #f8f8f2; + background-color: #383a4c; } + popover.menu modelbutton:selected:active { + background-color: #4d506a; } + popover.menu label.title { + font-weight: bold; + padding: 4px 32px; } + /***************** * Progress bars * *****************/ diff --git a/gtk-4.0/gtk.css b/gtk-4.0/gtk.css index 96a1166e..9f861e15 100755 --- a/gtk-4.0/gtk.css +++ b/gtk-4.0/gtk.css @@ -3346,7 +3346,7 @@ popover.background { border-style: none; background-color: transparent; } popover.background > contents separator { - background-color: rgba(27, 28, 36, 0.93); + background-color: #373a4b; margin: 3px; } popover.background > contents list separator { margin: 0; } @@ -3362,6 +3362,79 @@ popover.background { magnifier { background-color: #282a36; } +/********************** + * Popover Base Menus * + **********************/ +popover.menu { + padding: 0; } + popover.menu box.inline-buttons { + padding: 0 12px; } + popover.menu box.inline-buttons button.image-button.model { + border-color: transparent; + background-color: transparent; + background-image: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; + min-height: 30px; + min-width: 30px; + padding: 0; + border: none; + outline: none; + transition: none; } + popover.menu box.inline-buttons button.image-button.model:selected { + background: image(#383a4c); } + popover.menu box.circular-buttons { + padding: 12px 12px 6px; } + popover.menu box.circular-buttons button.circular.image-button.model { + padding: 11px; } + popover.menu box.circular-buttons button.circular.image-button.model:focus { + background-color: #383a4c; + border-color: #383a4c; } + popover.menu > arrow, popover.menu.background > contents { + background-color: #242530; + color: #f8f8f2; + padding: 5px; } + popover.menu.background separator { + margin: 6px 0; } + popover.menu accelerator { + color: alpha(currentColor,0.55); } + popover.menu accelerator:dir(ltr) { + margin-left: 12px; } + popover.menu accelerator:dir(rtl) { + margin-right: 12px; } + popover.menu check:hover, popover.menu check:active, + popover.menu radio:hover, + popover.menu radio:active { + background-color: transparent; } + popover.menu radio { + border-color: rgba(25, 26, 34, 0.9); } + popover.menu radio:active { + border-color: rgba(25, 26, 34, 0.4); } + popover.menu arrow.left, + popover.menu radio.left, + popover.menu check.left { + margin-left: -2px; + margin-right: 6px; } + popover.menu arrow.right, + popover.menu radio.right, + popover.menu check.right { + margin-left: 6px; + margin-right: -2px; } + popover.menu modelbutton { + min-height: 30px; + min-width: 40px; + padding: 0 12px; + border-radius: 5px; } + popover.menu modelbutton:selected { + color: #f8f8f2; + background-color: #383a4c; } + popover.menu modelbutton:selected:active { + background-color: #4d506a; } + popover.menu label.title { + font-weight: bold; + padding: 4px 32px; } + /***************** * Progress bars * *****************/ diff --git a/gtk-4.0/widgets/_popovers.scss b/gtk-4.0/widgets/_popovers.scss index c53a5e8b..461ecb5f 100644 --- a/gtk-4.0/widgets/_popovers.scss +++ b/gtk-4.0/widgets/_popovers.scss @@ -34,7 +34,7 @@ } separator { - background-color: mix($bg_color, $borders_color, 30%); + background-color: mix($bg_color, lighten($base_color, 12%), 30%); margin: 3px; } @@ -63,4 +63,120 @@ magnifier { background-color: $base_color; -} \ No newline at end of file +} + + +/********************** + * Popover Base Menus * + **********************/ + +$_menu-padding: 12px; //inner menuitem padding +//global 5px for outside menuitems + +popover.menu { + padding: 0; + + box.inline-buttons { + padding: 0 $_menu-padding; + + button.image-button.model { + @include button(undecorated); + + min-height: 30px; + min-width: 30px; + padding: 0; + border: none; + outline: none; + transition: none; + + &:selected { + background: image($popover_hover_color); + + // @if $contrast == 'high' { + // box-shadow: inset 0 0 0 1px $borders_color; + // } + } + } + } + + box.circular-buttons { + padding: $_menu-padding $_menu-padding 6px; + + button.circular.image-button.model { + // @extend %list_button; + + padding: 11px; + &:focus { + background-color: $popover_hover_color; + border-color: $popover_hover_color; + } + } + } + + & > arrow, + &.background > contents { + background-color: $popover_bg_color; + color: $fg_color; + padding: 5px; + } + + &.background separator { + margin: 6px 0; + } + + accelerator { + color: gtkalpha(currentColor,0.55); + + &:dir(ltr) { margin-left: $_menu-padding; } + &:dir(rtl) { margin-right: $_menu-padding; } + } + + check, + radio { + // @include check('menu', 'transparent', $text_color); + + &:hover, &:active { background-color: transparent; } + } + + + radio { border-color: $borders_color; + &:active { border-color: transparentize($borders_color,0.5); } +} + + + arrow.left, + radio.left, + check.left { + margin-left: -2px; + margin-right: 6px; + } + + arrow.right, + radio.right, + check.right { + margin-left: 6px; + margin-right: -2px; + } + + modelbutton { + min-height: 30px; + min-width: 40px; + padding: 0 $_menu-padding; + border-radius: 5px; + + &:selected { + color: $text-color; + background-color: $popover_hover_color; + } + &:selected:active { + //@extend %selected_items; + //color: $selected_fg_color; + background-color: lighten($popover_hover_color, 10%); // matching buttons + } + } + + label.title { + font-weight: bold; + padding: 4px ($_menu-padding + 20px); //this will fall apart with font sizing + } +}