From c817091dc4b6d0c64979a319f79873ff0564c3a0 Mon Sep 17 00:00:00 2001 From: EliverLara Date: Sun, 5 Dec 2021 14:05:47 -0600 Subject: [PATCH] Gtk-4: Fix window control buttons appearance --- gtk-4.0/gtk-dark.css | 71 +++++++++++++++++--------------- gtk-4.0/gtk.css | 71 +++++++++++++++++--------------- gtk-4.0/widgets/_windows.scss | 77 +++++++++++++++++++++-------------- 3 files changed, 124 insertions(+), 95 deletions(-) diff --git a/gtk-4.0/gtk-dark.css b/gtk-4.0/gtk-dark.css index 34242da..7690f0f 100755 --- a/gtk-4.0/gtk-dark.css +++ b/gtk-4.0/gtk-dark.css @@ -656,7 +656,7 @@ button.suggested-action { color: white; border-radius: 100px; background: linear-gradient(to right, #654ea3 0%, #eaafc8 100%); } - .selection-mode button.titlebutton, button.suggested-action.flat { + .selection-mode windowcontrols button, button.suggested-action.flat { box-shadow: none; color: white; border-radius: 100px; @@ -671,33 +671,33 @@ button.suggested-action { outline-color: rgba(255, 255, 255, 0.3); background-color: #00c1e4; text-shadow: none; } - .selection-mode button.titlebutton:backdrop, button.suggested-action:backdrop, button.suggested-action.flat:backdrop { + .selection-mode windowcontrols button:backdrop, button.suggested-action:backdrop, button.suggested-action.flat:backdrop { color: rgba(255, 255, 255, 0.4); outline-color: rgba(255, 255, 255, 0.3); background-color: #00c1e4; text-shadow: none; } - .selection-mode button.titlebutton:backdrop label, button.suggested-action:backdrop label, button.suggested-action.flat:backdrop label { + .selection-mode windowcontrols button:backdrop label, button.suggested-action:backdrop label, button.suggested-action.flat:backdrop label { color: rgba(255, 255, 255, 0.5); } - .selection-mode button.titlebutton:backdrop:active, .selection-mode button.titlebutton:backdrop:checked, button.suggested-action:backdrop:active, button.suggested-action:backdrop:checked, button.suggested-action.flat:backdrop:active, button.suggested-action.flat:backdrop:checked { + .selection-mode windowcontrols button:backdrop:active, .selection-mode windowcontrols button:backdrop:checked, button.suggested-action:backdrop:active, button.suggested-action:backdrop:checked, button.suggested-action.flat:backdrop:active, button.suggested-action.flat:backdrop:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(255, 255, 255, 0.3); background-color: #c50ed2; text-shadow: none; } - .selection-mode button.titlebutton:backdrop:active label, .selection-mode button.titlebutton:backdrop:checked label, button.suggested-action:backdrop:active label, button.suggested-action:backdrop:checked label, button.suggested-action.flat:backdrop:active label, button.suggested-action.flat:backdrop:checked label { + .selection-mode windowcontrols button:backdrop:active label, .selection-mode windowcontrols button:backdrop:checked label, button.suggested-action:backdrop:active label, button.suggested-action:backdrop:checked label, button.suggested-action.flat:backdrop:active label, button.suggested-action.flat:backdrop:checked label { color: rgba(254, 254, 254, 0.7); } - .selection-mode button.titlebutton:backdrop:disabled, button.suggested-action:backdrop:disabled, button.suggested-action.flat:backdrop:disabled { + .selection-mode windowcontrols button:backdrop:disabled, button.suggested-action:backdrop:disabled, button.suggested-action.flat:backdrop:disabled { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #00c1e4; text-shadow: none; } - .selection-mode button.titlebutton:backdrop:disabled label, button.suggested-action:backdrop:disabled label, button.suggested-action.flat:backdrop:disabled label { + .selection-mode windowcontrols button:backdrop:disabled label, button.suggested-action:backdrop:disabled label, button.suggested-action.flat:backdrop:disabled label { color: rgba(255, 255, 255, 0.5); } - .selection-mode button.titlebutton:backdrop:disabled:active, .selection-mode button.titlebutton:backdrop:disabled:checked, button.suggested-action:backdrop:disabled:active, button.suggested-action:backdrop:disabled:checked, button.suggested-action.flat:backdrop:disabled:active, button.suggested-action.flat:backdrop:disabled:checked { + .selection-mode windowcontrols button:backdrop:disabled:active, .selection-mode windowcontrols button:backdrop:disabled:checked, button.suggested-action:backdrop:disabled:active, button.suggested-action:backdrop:disabled:checked, button.suggested-action.flat:backdrop:disabled:active, button.suggested-action.flat:backdrop:disabled:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(255, 255, 255, 0.3); background-color: #c50ed2; text-shadow: none; } - .selection-mode button.titlebutton:backdrop, .selection-mode button.titlebutton:disabled, .selection-mode button.titlebutton:backdrop:disabled, button.suggested-action.flat:backdrop, button.suggested-action.flat:disabled, button.suggested-action.flat:backdrop:disabled { + .selection-mode windowcontrols button:backdrop, .selection-mode windowcontrols button:disabled, .selection-mode windowcontrols button:backdrop:disabled, button.suggested-action.flat:backdrop, button.suggested-action.flat:disabled, button.suggested-action.flat:backdrop:disabled { background-color: transparent; background-image: none; border-color: transparent; @@ -4423,27 +4423,34 @@ decoration { border: solid 1px rgba(13, 16, 23, 0.82); box-shadow: none; } -button.titlebutton { - background-repeat: no-repeat; - background-position: center; +windowcontrols button.close, windowcontrols button.maximize, windowcontrols button.minimize { + min-width: 20px; min-height: 20px; + margin: 0; padding: 0 1px; - box-shadow: none; } - button.titlebutton.close { - background-image: -gtk-scaled(url("../assets/close.png"), url("../assets/close@2.png")); } - button.titlebutton.close:hover, button.titlebutton.close:active { - background-image: -gtk-scaled(url("../assets/close_prelight.png"), url("../assets/close_prelight@2.png")); } - button.titlebutton.maximize { - background-image: -gtk-scaled(url("../assets/maximize.png"), url("../assets/maximize@2.png")); } - button.titlebutton.maximize:hover, button.titlebutton.maximize:active { - background-image: -gtk-scaled(url("../assets/maximize_prelight.png"), url("../assets/maximize_prelight@2.png")); } - button.titlebutton.minimize { - background-image: -gtk-scaled(url("../assets/min.png"), url("../assets/min@2.png")); } - button.titlebutton.minimize:hover, button.titlebutton.minimize:active { - background-image: -gtk-scaled(url("../assets/min_prelight.png"), url("../assets/min_prelight@2.png")); } - button.titlebutton:backdrop { - -gtk-icon-shadow: none; - background-image: -gtk-scaled(url("../assets/close_unfocused.png"), url("../assets/close_unfocused@2.png")); } + background-position: center; + background-repeat: no-repeat; + background-size: 16px 16px; } + windowcontrols button.close, windowcontrols button.close:hover, windowcontrols button.close:focus, windowcontrols button.close:active, windowcontrols button.close:backdrop, windowcontrols button.close:backdrop:hover, windowcontrols button.maximize, windowcontrols button.maximize:hover, windowcontrols button.maximize:focus, windowcontrols button.maximize:active, windowcontrols button.maximize:backdrop, windowcontrols button.maximize:backdrop:hover, windowcontrols button.minimize, windowcontrols button.minimize:hover, windowcontrols button.minimize:focus, windowcontrols button.minimize:active, windowcontrols button.minimize:backdrop, windowcontrols button.minimize:backdrop:hover { + background-color: transparent; + border: none; + box-shadow: none; + color: transparent; } +windowcontrols button.close { + background-image: -gtk-scaled(url("../assets/close.png"), url("../assets/close@2.png")); } + windowcontrols button.close:hover, windowcontrols button.close:active { + background-image: -gtk-scaled(url("../assets/close_prelight.png"), url("../assets/close_prelight@2.png")); } +windowcontrols button.maximize { + background-image: -gtk-scaled(url("../assets/maximize.png"), url("../assets/maximize@2.png")); } + windowcontrols button.maximize:hover, windowcontrols button.maximize:active { + background-image: -gtk-scaled(url("../assets/maximize_prelight.png"), url("../assets/maximize_prelight@2.png")); } +windowcontrols button.minimize { + background-image: -gtk-scaled(url("../assets/min.png"), url("../assets/min@2.png")); } + windowcontrols button.minimize:hover, windowcontrols button.minimize:active { + background-image: -gtk-scaled(url("../assets/min_prelight.png"), url("../assets/min_prelight@2.png")); } +windowcontrols button:backdrop { + -gtk-icon-shadow: none; + background-image: -gtk-scaled(url("../assets/close_unfocused.png"), url("../assets/close_unfocused@2.png")); } headerbar.selection-mode button.titlebutton, .titlebar.selection-mode button.titlebutton { @@ -4467,7 +4474,7 @@ popover.background radiobutton:selected, entry selection:focus, entry selection, row:selected, treeview.view:selected:focus, treeview.view:selected { background-color: #c50ed2; } - row:selected label, label:selected, .selection-mode button.titlebutton, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, + row:selected label, label:selected, .selection-mode windowcontrols button, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, .view text:selected:focus, iconview text:selected:focus, textview text:selected:focus, @@ -4482,7 +4489,7 @@ entry selection, row:selected, treeview.view:selected:focus, treeview.view:selec entry selection, row:selected, treeview.view:selected:focus, treeview.view:selected { color: #fefefe; font-weight: normal; } - row:selected label:disabled, label:disabled:selected, .selection-mode button.titlebutton:disabled, iconview:disabled:selected:focus, .view:disabled:selected, iconview:disabled:selected, + row:selected label:disabled, label:disabled:selected, .selection-mode windowcontrols button:disabled, iconview:disabled:selected:focus, .view:disabled:selected, iconview:disabled:selected, iconview text:disabled:selected:focus, textview text:disabled:selected:focus, .view text:disabled:selected, @@ -4493,7 +4500,7 @@ entry selection, row:selected, treeview.view:selected:focus, treeview.view:selec .menuitem.button.flat:disabled:selected, calendar:disabled:selected, spinbutton:not(.vertical) selection:disabled, entry selection:disabled, row:disabled:selected { color: #e286e8; } - row:selected label:backdrop, label:backdrop:selected, .selection-mode button.titlebutton:backdrop, iconview:backdrop:selected:focus, .view:backdrop:selected, iconview:backdrop:selected, + row:selected label:backdrop, label:backdrop:selected, .selection-mode windowcontrols button:backdrop, iconview:backdrop:selected:focus, .view:backdrop:selected, iconview:backdrop:selected, iconview text:backdrop:selected:focus, textview text:backdrop:selected:focus, .view text:backdrop:selected, @@ -4504,7 +4511,7 @@ entry selection, row:selected, treeview.view:selected:focus, treeview.view:selec .menuitem.button.flat:backdrop:selected, calendar:backdrop:selected, spinbutton:not(.vertical) selection:backdrop, entry selection:backdrop, row:backdrop:selected { color: rgba(254, 254, 254, 0.5); } - row:selected label:backdrop:disabled, label:backdrop:disabled:selected, .selection-mode button.titlebutton:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, + row:selected label:backdrop:disabled, label:backdrop:disabled:selected, .selection-mode windowcontrols button:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, .view text:backdrop:disabled:selected, iconview text:backdrop:disabled:selected, textview text:backdrop:disabled:selected, .view text selection:backdrop:disabled, iconview text selection:backdrop:disabled, diff --git a/gtk-4.0/gtk.css b/gtk-4.0/gtk.css index 4d970be..c7a359e 100755 --- a/gtk-4.0/gtk.css +++ b/gtk-4.0/gtk.css @@ -656,7 +656,7 @@ button.suggested-action { color: white; border-radius: 100px; background: linear-gradient(to right, #654ea3 0%, #eaafc8 100%); } - .selection-mode button.titlebutton, button.suggested-action.flat { + .selection-mode windowcontrols button, button.suggested-action.flat { box-shadow: none; color: white; border-radius: 100px; @@ -671,33 +671,33 @@ button.suggested-action { outline-color: rgba(255, 255, 255, 0.3); background-color: #00c1e4; text-shadow: none; } - .selection-mode button.titlebutton:backdrop, button.suggested-action:backdrop, button.suggested-action.flat:backdrop { + .selection-mode windowcontrols button:backdrop, button.suggested-action:backdrop, button.suggested-action.flat:backdrop { color: rgba(255, 255, 255, 0.4); outline-color: rgba(255, 255, 255, 0.3); background-color: #00c1e4; text-shadow: none; } - .selection-mode button.titlebutton:backdrop label, button.suggested-action:backdrop label, button.suggested-action.flat:backdrop label { + .selection-mode windowcontrols button:backdrop label, button.suggested-action:backdrop label, button.suggested-action.flat:backdrop label { color: rgba(255, 255, 255, 0.5); } - .selection-mode button.titlebutton:backdrop:active, .selection-mode button.titlebutton:backdrop:checked, button.suggested-action:backdrop:active, button.suggested-action:backdrop:checked, button.suggested-action.flat:backdrop:active, button.suggested-action.flat:backdrop:checked { + .selection-mode windowcontrols button:backdrop:active, .selection-mode windowcontrols button:backdrop:checked, button.suggested-action:backdrop:active, button.suggested-action:backdrop:checked, button.suggested-action.flat:backdrop:active, button.suggested-action.flat:backdrop:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(255, 255, 255, 0.3); background-color: #c50ed2; text-shadow: none; } - .selection-mode button.titlebutton:backdrop:active label, .selection-mode button.titlebutton:backdrop:checked label, button.suggested-action:backdrop:active label, button.suggested-action:backdrop:checked label, button.suggested-action.flat:backdrop:active label, button.suggested-action.flat:backdrop:checked label { + .selection-mode windowcontrols button:backdrop:active label, .selection-mode windowcontrols button:backdrop:checked label, button.suggested-action:backdrop:active label, button.suggested-action:backdrop:checked label, button.suggested-action.flat:backdrop:active label, button.suggested-action.flat:backdrop:checked label { color: rgba(254, 254, 254, 0.7); } - .selection-mode button.titlebutton:backdrop:disabled, button.suggested-action:backdrop:disabled, button.suggested-action.flat:backdrop:disabled { + .selection-mode windowcontrols button:backdrop:disabled, button.suggested-action:backdrop:disabled, button.suggested-action.flat:backdrop:disabled { color: white; outline-color: rgba(255, 255, 255, 0.3); background-color: #00c1e4; text-shadow: none; } - .selection-mode button.titlebutton:backdrop:disabled label, button.suggested-action:backdrop:disabled label, button.suggested-action.flat:backdrop:disabled label { + .selection-mode windowcontrols button:backdrop:disabled label, button.suggested-action:backdrop:disabled label, button.suggested-action.flat:backdrop:disabled label { color: rgba(255, 255, 255, 0.5); } - .selection-mode button.titlebutton:backdrop:disabled:active, .selection-mode button.titlebutton:backdrop:disabled:checked, button.suggested-action:backdrop:disabled:active, button.suggested-action:backdrop:disabled:checked, button.suggested-action.flat:backdrop:disabled:active, button.suggested-action.flat:backdrop:disabled:checked { + .selection-mode windowcontrols button:backdrop:disabled:active, .selection-mode windowcontrols button:backdrop:disabled:checked, button.suggested-action:backdrop:disabled:active, button.suggested-action:backdrop:disabled:checked, button.suggested-action.flat:backdrop:disabled:active, button.suggested-action.flat:backdrop:disabled:checked { color: rgba(254, 254, 254, 0.7); outline-color: rgba(255, 255, 255, 0.3); background-color: #c50ed2; text-shadow: none; } - .selection-mode button.titlebutton:backdrop, .selection-mode button.titlebutton:disabled, .selection-mode button.titlebutton:backdrop:disabled, button.suggested-action.flat:backdrop, button.suggested-action.flat:disabled, button.suggested-action.flat:backdrop:disabled { + .selection-mode windowcontrols button:backdrop, .selection-mode windowcontrols button:disabled, .selection-mode windowcontrols button:backdrop:disabled, button.suggested-action.flat:backdrop, button.suggested-action.flat:disabled, button.suggested-action.flat:backdrop:disabled { background-color: transparent; background-image: none; border-color: transparent; @@ -4423,27 +4423,34 @@ decoration { border: solid 1px rgba(13, 16, 23, 0.82); box-shadow: none; } -button.titlebutton { - background-repeat: no-repeat; - background-position: center; +windowcontrols button.close, windowcontrols button.maximize, windowcontrols button.minimize { + min-width: 20px; min-height: 20px; + margin: 0; padding: 0 1px; - box-shadow: none; } - button.titlebutton.close { - background-image: -gtk-scaled(url("../assets/close.png"), url("../assets/close@2.png")); } - button.titlebutton.close:hover, button.titlebutton.close:active { - background-image: -gtk-scaled(url("../assets/close_prelight.png"), url("../assets/close_prelight@2.png")); } - button.titlebutton.maximize { - background-image: -gtk-scaled(url("../assets/maximize.png"), url("../assets/maximize@2.png")); } - button.titlebutton.maximize:hover, button.titlebutton.maximize:active { - background-image: -gtk-scaled(url("../assets/maximize_prelight.png"), url("../assets/maximize_prelight@2.png")); } - button.titlebutton.minimize { - background-image: -gtk-scaled(url("../assets/min.png"), url("../assets/min@2.png")); } - button.titlebutton.minimize:hover, button.titlebutton.minimize:active { - background-image: -gtk-scaled(url("../assets/min_prelight.png"), url("../assets/min_prelight@2.png")); } - button.titlebutton:backdrop { - -gtk-icon-shadow: none; - background-image: -gtk-scaled(url("../assets/close_unfocused.png"), url("../assets/close_unfocused@2.png")); } + background-position: center; + background-repeat: no-repeat; + background-size: 16px 16px; } + windowcontrols button.close, windowcontrols button.close:hover, windowcontrols button.close:focus, windowcontrols button.close:active, windowcontrols button.close:backdrop, windowcontrols button.close:backdrop:hover, windowcontrols button.maximize, windowcontrols button.maximize:hover, windowcontrols button.maximize:focus, windowcontrols button.maximize:active, windowcontrols button.maximize:backdrop, windowcontrols button.maximize:backdrop:hover, windowcontrols button.minimize, windowcontrols button.minimize:hover, windowcontrols button.minimize:focus, windowcontrols button.minimize:active, windowcontrols button.minimize:backdrop, windowcontrols button.minimize:backdrop:hover { + background-color: transparent; + border: none; + box-shadow: none; + color: transparent; } +windowcontrols button.close { + background-image: -gtk-scaled(url("../assets/close.png"), url("../assets/close@2.png")); } + windowcontrols button.close:hover, windowcontrols button.close:active { + background-image: -gtk-scaled(url("../assets/close_prelight.png"), url("../assets/close_prelight@2.png")); } +windowcontrols button.maximize { + background-image: -gtk-scaled(url("../assets/maximize.png"), url("../assets/maximize@2.png")); } + windowcontrols button.maximize:hover, windowcontrols button.maximize:active { + background-image: -gtk-scaled(url("../assets/maximize_prelight.png"), url("../assets/maximize_prelight@2.png")); } +windowcontrols button.minimize { + background-image: -gtk-scaled(url("../assets/min.png"), url("../assets/min@2.png")); } + windowcontrols button.minimize:hover, windowcontrols button.minimize:active { + background-image: -gtk-scaled(url("../assets/min_prelight.png"), url("../assets/min_prelight@2.png")); } +windowcontrols button:backdrop { + -gtk-icon-shadow: none; + background-image: -gtk-scaled(url("../assets/close_unfocused.png"), url("../assets/close_unfocused@2.png")); } headerbar.selection-mode button.titlebutton, .titlebar.selection-mode button.titlebutton { @@ -4467,7 +4474,7 @@ popover.background radiobutton:selected, entry selection:focus, entry selection, row:selected, treeview.view:selected:focus, treeview.view:selected { background-color: #c50ed2; } - row:selected label, label:selected, .selection-mode button.titlebutton, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, + row:selected label, label:selected, .selection-mode windowcontrols button, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, .view text:selected:focus, iconview text:selected:focus, textview text:selected:focus, @@ -4482,7 +4489,7 @@ entry selection, row:selected, treeview.view:selected:focus, treeview.view:selec entry selection, row:selected, treeview.view:selected:focus, treeview.view:selected { color: #fefefe; font-weight: normal; } - row:selected label:disabled, label:disabled:selected, .selection-mode button.titlebutton:disabled, iconview:disabled:selected:focus, .view:disabled:selected, iconview:disabled:selected, + row:selected label:disabled, label:disabled:selected, .selection-mode windowcontrols button:disabled, iconview:disabled:selected:focus, .view:disabled:selected, iconview:disabled:selected, iconview text:disabled:selected:focus, textview text:disabled:selected:focus, .view text:disabled:selected, @@ -4493,7 +4500,7 @@ entry selection, row:selected, treeview.view:selected:focus, treeview.view:selec .menuitem.button.flat:disabled:selected, calendar:disabled:selected, spinbutton:not(.vertical) selection:disabled, entry selection:disabled, row:disabled:selected { color: #e286e8; } - row:selected label:backdrop, label:backdrop:selected, .selection-mode button.titlebutton:backdrop, iconview:backdrop:selected:focus, .view:backdrop:selected, iconview:backdrop:selected, + row:selected label:backdrop, label:backdrop:selected, .selection-mode windowcontrols button:backdrop, iconview:backdrop:selected:focus, .view:backdrop:selected, iconview:backdrop:selected, iconview text:backdrop:selected:focus, textview text:backdrop:selected:focus, .view text:backdrop:selected, @@ -4504,7 +4511,7 @@ entry selection, row:selected, treeview.view:selected:focus, treeview.view:selec .menuitem.button.flat:backdrop:selected, calendar:backdrop:selected, spinbutton:not(.vertical) selection:backdrop, entry selection:backdrop, row:backdrop:selected { color: rgba(254, 254, 254, 0.5); } - row:selected label:backdrop:disabled, label:backdrop:disabled:selected, .selection-mode button.titlebutton:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, + row:selected label:backdrop:disabled, label:backdrop:disabled:selected, .selection-mode windowcontrols button:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, .view text:backdrop:disabled:selected, iconview text:backdrop:disabled:selected, textview text:backdrop:disabled:selected, .view text selection:backdrop:disabled, iconview text selection:backdrop:disabled, diff --git a/gtk-4.0/widgets/_windows.scss b/gtk-4.0/widgets/_windows.scss index 03a47dc..f85d912 100644 --- a/gtk-4.0/widgets/_windows.scss +++ b/gtk-4.0/widgets/_windows.scss @@ -66,44 +66,59 @@ decoration { } // Window Close button -button.titlebutton { - background-repeat: no-repeat; - background-position: center; - min-height: 20px; - padding: 0 1px; - box-shadow: none; +windowcontrols { + button { + &.close, &.maximize, &.minimize { + min-width: 20px; + min-height: 20px; + margin: 0; + padding: 0 1px; + background-position: center; + background-repeat: no-repeat; + background-size: 16px 16px; + + &, &:hover, &:focus, &:active, &:backdrop, &:backdrop:hover { + background-color: transparent; + border: none; + box-shadow: none; + color: transparent; + } - &.close { - background-image: -gtk-scaled(url("../assets/close.png"),url("../assets/close@2.png")); - &:hover,&:active { - background-image: -gtk-scaled(url("../assets/close_prelight.png"),url("../assets/close_prelight@2.png")); } - } - &.maximize { - background-image: -gtk-scaled(url("../assets/maximize.png"),url("../assets/maximize@2.png")); - &:hover,&:active { - background-image: -gtk-scaled(url("../assets/maximize_prelight.png"),url("../assets/maximize_prelight@2.png")); + + &.close { + background-image: -gtk-scaled(url("../assets/close.png"),url("../assets/close@2.png")); + &:hover,&:active { + background-image: -gtk-scaled(url("../assets/close_prelight.png"),url("../assets/close_prelight@2.png")); + } } - } - &.minimize { - background-image: -gtk-scaled(url("../assets/min.png"),url("../assets/min@2.png")); - &:hover,&:active { - background-image: -gtk-scaled(url("../assets/min_prelight.png"),url("../assets/min_prelight@2.png")); + &.maximize { + background-image: -gtk-scaled(url("../assets/maximize.png"),url("../assets/maximize@2.png")); + &:hover,&:active { + background-image: -gtk-scaled(url("../assets/maximize_prelight.png"),url("../assets/maximize_prelight@2.png")); + } + } + &.minimize { + background-image: -gtk-scaled(url("../assets/min.png"),url("../assets/min@2.png")); + &:hover,&:active { + background-image: -gtk-scaled(url("../assets/min_prelight.png"),url("../assets/min_prelight@2.png")); + } + } + + .selection-mode & { + @extend %button.flat.suggested-action; + + @extend %nobg_selected_items; + } + + &:backdrop { + -gtk-icon-shadow: none; + background-image: -gtk-scaled(url("../assets/close_unfocused.png"),url("../assets/close_unfocused@2.png")); } - } - - .selection-mode & { - @extend %button.flat.suggested-action; - - @extend %nobg_selected_items; - } - - &:backdrop { - -gtk-icon-shadow: none; - background-image: -gtk-scaled(url("../assets/close_unfocused.png"),url("../assets/close_unfocused@2.png")); } } + headerbar.selection-mode button.titlebutton, .titlebar.selection-mode button.titlebutton { @include _button_text_shadow(white, $selected_bg_color);