diff --git a/src/assets/gtk/scalable/close.svg b/src/assets/gtk/scalable/close.svg new file mode 100644 index 00000000..06201c39 --- /dev/null +++ b/src/assets/gtk/scalable/close.svg @@ -0,0 +1,38 @@ + + + + + + diff --git a/src/assets/gtk/scalable/maximize.svg b/src/assets/gtk/scalable/maximize.svg new file mode 100644 index 00000000..39316eba --- /dev/null +++ b/src/assets/gtk/scalable/maximize.svg @@ -0,0 +1,38 @@ + + + + + + diff --git a/src/assets/gtk/scalable/minimize.svg b/src/assets/gtk/scalable/minimize.svg new file mode 100644 index 00000000..f3683b9d --- /dev/null +++ b/src/assets/gtk/scalable/minimize.svg @@ -0,0 +1,43 @@ + + + + + + diff --git a/src/assets/gtk/scalable/unmaximize.svg b/src/assets/gtk/scalable/unmaximize.svg new file mode 100644 index 00000000..492d47a2 --- /dev/null +++ b/src/assets/gtk/scalable/unmaximize.svg @@ -0,0 +1,46 @@ + + + + + + + diff --git a/src/main/gtk-3.0/gtk-dark.css b/src/main/gtk-3.0/gtk-dark.css index 800393fe..8a9ff072 100644 --- a/src/main/gtk-3.0/gtk-dark.css +++ b/src/main/gtk-3.0/gtk-dark.css @@ -4231,6 +4231,35 @@ button.close.titlebutton:active:not(.suggested-action):not(.destructive-action) background-color: #fe877d; } +#MozillaGtkWidget.background headerbar.titlebar.default-decoration button.minimize.titlebutton, .background.csd headerbar.titlebar.default-decoration button.minimize.titlebutton:not(.suggested-action):not(.destructive-action), #MozillaGtkWidget.background headerbar.titlebar.default-decoration button.maximize.titlebutton, .background.csd headerbar.titlebar.default-decoration button.maximize.titlebutton:not(.suggested-action):not(.destructive-action), #MozillaGtkWidget.background headerbar.titlebar.default-decoration button.close.titlebutton, .background.csd headerbar.titlebar.default-decoration button.close.titlebutton:not(.suggested-action):not(.destructive-action) { + background-repeat: no-repeat; + background-size: 16px 16px; + background-position: center; +} + +#MozillaGtkWidget.background headerbar.titlebar.default-decoration button.minimize.titlebutton, .background.csd headerbar.titlebar.default-decoration button.minimize.titlebutton:not(.suggested-action):not(.destructive-action), #MozillaGtkWidget.background headerbar.titlebar.default-decoration button.maximize.titlebutton, .background.csd headerbar.titlebar.default-decoration button.maximize.titlebutton:not(.suggested-action):not(.destructive-action), #MozillaGtkWidget.background headerbar.titlebar.default-decoration button.close.titlebutton, .background.csd headerbar.titlebar.default-decoration button.close.titlebutton:not(.suggested-action):not(.destructive-action) { + box-shadow: none; + color: transparent; + animation: none; + transition: all 75ms cubic-bezier(0, 0, 0.2, 1); +} + +#MozillaGtkWidget.background headerbar.titlebar.default-decoration button.minimize.titlebutton:hover, .background.csd headerbar.titlebar.default-decoration button.minimize.titlebutton:hover:not(.suggested-action):not(.destructive-action), #MozillaGtkWidget.background headerbar.titlebar.default-decoration button.minimize.titlebutton:active, .background.csd headerbar.titlebar.default-decoration button.minimize.titlebutton:active:not(.suggested-action):not(.destructive-action) { + background-image: url("assets/scalable/minimize.svg"); +} + +#MozillaGtkWidget.background headerbar.titlebar.default-decoration button.maximize.titlebutton:hover, .background.csd headerbar.titlebar.default-decoration button.maximize.titlebutton:hover:not(.suggested-action):not(.destructive-action), #MozillaGtkWidget.background headerbar.titlebar.default-decoration button.maximize.titlebutton:active, .background.csd headerbar.titlebar.default-decoration button.maximize.titlebutton:active:not(.suggested-action):not(.destructive-action) { + background-image: url("assets/scalable/maximize.svg"); +} + +#MozillaGtkWidget.background headerbar.titlebar.default-decoration button.close.titlebutton:hover, .background.csd headerbar.titlebar.default-decoration button.close.titlebutton:hover:not(.suggested-action):not(.destructive-action), #MozillaGtkWidget.background headerbar.titlebar.default-decoration button.close.titlebutton:active, .background.csd headerbar.titlebar.default-decoration button.close.titlebutton:active:not(.suggested-action):not(.destructive-action) { + background-image: url("assets/scalable/close.svg"); +} + +.background.csd.maximized headerbar.titlebar.default-decoration button.titlebutton:not(.suggested-action):not(.destructive-action).maximize:hover, .background.csd.maximized headerbar.titlebar.default-decoration button.titlebutton:not(.suggested-action):not(.destructive-action).maximize:active { + background-image: url("assets/scalable/unmaximize.svg"); +} + .monospace { font-family: monospace; } @@ -7999,6 +8028,7 @@ read if you used those and something break with a version upgrade you're on your @define-color wm_title #FFFFFF; @define-color wm_unfocused_title rgba(255, 255, 255, 0.7); @define-color wm_highlight rgba(255, 255, 255, 0.1); +@define-color wm_border #090909; @define-color wm_bg #242424; @define-color wm_unfocused_bg #2C2C2C; @define-color wm_button_icon white; diff --git a/src/main/gtk-3.0/gtk-light.css b/src/main/gtk-3.0/gtk-light.css index 3ffed650..0640c84d 100644 --- a/src/main/gtk-3.0/gtk-light.css +++ b/src/main/gtk-3.0/gtk-light.css @@ -4222,6 +4222,35 @@ button.close.titlebutton:active:not(.suggested-action):not(.destructive-action) background-color: rgba(201, 76, 64, 0.9675); } +#MozillaGtkWidget.background headerbar.titlebar.default-decoration button.minimize.titlebutton, .background.csd headerbar.titlebar.default-decoration button.minimize.titlebutton:not(.suggested-action):not(.destructive-action), #MozillaGtkWidget.background headerbar.titlebar.default-decoration button.maximize.titlebutton, .background.csd headerbar.titlebar.default-decoration button.maximize.titlebutton:not(.suggested-action):not(.destructive-action), #MozillaGtkWidget.background headerbar.titlebar.default-decoration button.close.titlebutton, .background.csd headerbar.titlebar.default-decoration button.close.titlebutton:not(.suggested-action):not(.destructive-action) { + background-repeat: no-repeat; + background-size: 16px 16px; + background-position: center; +} + +#MozillaGtkWidget.background headerbar.titlebar.default-decoration button.minimize.titlebutton, .background.csd headerbar.titlebar.default-decoration button.minimize.titlebutton:not(.suggested-action):not(.destructive-action), #MozillaGtkWidget.background headerbar.titlebar.default-decoration button.maximize.titlebutton, .background.csd headerbar.titlebar.default-decoration button.maximize.titlebutton:not(.suggested-action):not(.destructive-action), #MozillaGtkWidget.background headerbar.titlebar.default-decoration button.close.titlebutton, .background.csd headerbar.titlebar.default-decoration button.close.titlebutton:not(.suggested-action):not(.destructive-action) { + box-shadow: none; + color: transparent; + animation: none; + transition: all 75ms cubic-bezier(0, 0, 0.2, 1); +} + +#MozillaGtkWidget.background headerbar.titlebar.default-decoration button.minimize.titlebutton:hover, .background.csd headerbar.titlebar.default-decoration button.minimize.titlebutton:hover:not(.suggested-action):not(.destructive-action), #MozillaGtkWidget.background headerbar.titlebar.default-decoration button.minimize.titlebutton:active, .background.csd headerbar.titlebar.default-decoration button.minimize.titlebutton:active:not(.suggested-action):not(.destructive-action) { + background-image: url("assets/scalable/minimize.svg"); +} + +#MozillaGtkWidget.background headerbar.titlebar.default-decoration button.maximize.titlebutton:hover, .background.csd headerbar.titlebar.default-decoration button.maximize.titlebutton:hover:not(.suggested-action):not(.destructive-action), #MozillaGtkWidget.background headerbar.titlebar.default-decoration button.maximize.titlebutton:active, .background.csd headerbar.titlebar.default-decoration button.maximize.titlebutton:active:not(.suggested-action):not(.destructive-action) { + background-image: url("assets/scalable/maximize.svg"); +} + +#MozillaGtkWidget.background headerbar.titlebar.default-decoration button.close.titlebutton:hover, .background.csd headerbar.titlebar.default-decoration button.close.titlebutton:hover:not(.suggested-action):not(.destructive-action), #MozillaGtkWidget.background headerbar.titlebar.default-decoration button.close.titlebutton:active, .background.csd headerbar.titlebar.default-decoration button.close.titlebutton:active:not(.suggested-action):not(.destructive-action) { + background-image: url("assets/scalable/close.svg"); +} + +.background.csd.maximized headerbar.titlebar.default-decoration button.titlebutton:not(.suggested-action):not(.destructive-action).maximize:hover, .background.csd.maximized headerbar.titlebar.default-decoration button.titlebutton:not(.suggested-action):not(.destructive-action).maximize:active { + background-image: url("assets/scalable/unmaximize.svg"); +} + .monospace { font-family: monospace; } @@ -7990,6 +8019,7 @@ read if you used those and something break with a version upgrade you're on your @define-color wm_title rgba(0, 0, 0, 0.87); @define-color wm_unfocused_title rgba(0, 0, 0, 0.6); @define-color wm_highlight rgba(255, 255, 255, 0.15); +@define-color wm_border #a6a6a6; @define-color wm_bg #F2F2F2; @define-color wm_unfocused_bg #FAFAFA; @define-color wm_button_icon white; diff --git a/src/main/gtk-3.0/gtk.css b/src/main/gtk-3.0/gtk.css index d6778332..5b7c3f8b 100644 --- a/src/main/gtk-3.0/gtk.css +++ b/src/main/gtk-3.0/gtk.css @@ -4231,6 +4231,35 @@ button.close.titlebutton:active:not(.suggested-action):not(.destructive-action) background-color: #fe877d; } +#MozillaGtkWidget.background headerbar.titlebar.default-decoration button.minimize.titlebutton, .background.csd headerbar.titlebar.default-decoration button.minimize.titlebutton:not(.suggested-action):not(.destructive-action), #MozillaGtkWidget.background headerbar.titlebar.default-decoration button.maximize.titlebutton, .background.csd headerbar.titlebar.default-decoration button.maximize.titlebutton:not(.suggested-action):not(.destructive-action), #MozillaGtkWidget.background headerbar.titlebar.default-decoration button.close.titlebutton, .background.csd headerbar.titlebar.default-decoration button.close.titlebutton:not(.suggested-action):not(.destructive-action) { + background-repeat: no-repeat; + background-size: 16px 16px; + background-position: center; +} + +#MozillaGtkWidget.background headerbar.titlebar.default-decoration button.minimize.titlebutton, .background.csd headerbar.titlebar.default-decoration button.minimize.titlebutton:not(.suggested-action):not(.destructive-action), #MozillaGtkWidget.background headerbar.titlebar.default-decoration button.maximize.titlebutton, .background.csd headerbar.titlebar.default-decoration button.maximize.titlebutton:not(.suggested-action):not(.destructive-action), #MozillaGtkWidget.background headerbar.titlebar.default-decoration button.close.titlebutton, .background.csd headerbar.titlebar.default-decoration button.close.titlebutton:not(.suggested-action):not(.destructive-action) { + box-shadow: none; + color: transparent; + animation: none; + transition: all 75ms cubic-bezier(0, 0, 0.2, 1); +} + +#MozillaGtkWidget.background headerbar.titlebar.default-decoration button.minimize.titlebutton:hover, .background.csd headerbar.titlebar.default-decoration button.minimize.titlebutton:hover:not(.suggested-action):not(.destructive-action), #MozillaGtkWidget.background headerbar.titlebar.default-decoration button.minimize.titlebutton:active, .background.csd headerbar.titlebar.default-decoration button.minimize.titlebutton:active:not(.suggested-action):not(.destructive-action) { + background-image: url("assets/scalable/minimize.svg"); +} + +#MozillaGtkWidget.background headerbar.titlebar.default-decoration button.maximize.titlebutton:hover, .background.csd headerbar.titlebar.default-decoration button.maximize.titlebutton:hover:not(.suggested-action):not(.destructive-action), #MozillaGtkWidget.background headerbar.titlebar.default-decoration button.maximize.titlebutton:active, .background.csd headerbar.titlebar.default-decoration button.maximize.titlebutton:active:not(.suggested-action):not(.destructive-action) { + background-image: url("assets/scalable/maximize.svg"); +} + +#MozillaGtkWidget.background headerbar.titlebar.default-decoration button.close.titlebutton:hover, .background.csd headerbar.titlebar.default-decoration button.close.titlebutton:hover:not(.suggested-action):not(.destructive-action), #MozillaGtkWidget.background headerbar.titlebar.default-decoration button.close.titlebutton:active, .background.csd headerbar.titlebar.default-decoration button.close.titlebutton:active:not(.suggested-action):not(.destructive-action) { + background-image: url("assets/scalable/close.svg"); +} + +.background.csd.maximized headerbar.titlebar.default-decoration button.titlebutton:not(.suggested-action):not(.destructive-action).maximize:hover, .background.csd.maximized headerbar.titlebar.default-decoration button.titlebutton:not(.suggested-action):not(.destructive-action).maximize:active { + background-image: url("assets/scalable/unmaximize.svg"); +} + .monospace { font-family: monospace; } @@ -7999,6 +8028,7 @@ read if you used those and something break with a version upgrade you're on your @define-color wm_title #FFFFFF; @define-color wm_unfocused_title rgba(255, 255, 255, 0.7); @define-color wm_highlight rgba(255, 255, 255, 0.1); +@define-color wm_border #a6a6a6; @define-color wm_bg #242424; @define-color wm_unfocused_bg #2C2C2C; @define-color wm_button_icon white; diff --git a/src/main/gtk-4.0/gtk-dark.css b/src/main/gtk-4.0/gtk-dark.css index 27e3ec02..05cd070e 100644 --- a/src/main/gtk-4.0/gtk-dark.css +++ b/src/main/gtk-4.0/gtk-dark.css @@ -4704,6 +4704,7 @@ read if you used those and something break with a version upgrade you're on your @define-color wm_title #FFFFFF; @define-color wm_unfocused_title rgba(255, 255, 255, 0.7); @define-color wm_highlight rgba(255, 255, 255, 0.1); +@define-color wm_border #090909; @define-color wm_bg #242424; @define-color wm_unfocused_bg #2C2C2C; @define-color wm_button_icon white; diff --git a/src/main/gtk-4.0/gtk-light.css b/src/main/gtk-4.0/gtk-light.css index 37bddc58..304277bf 100644 --- a/src/main/gtk-4.0/gtk-light.css +++ b/src/main/gtk-4.0/gtk-light.css @@ -4712,6 +4712,7 @@ read if you used those and something break with a version upgrade you're on your @define-color wm_title rgba(0, 0, 0, 0.87); @define-color wm_unfocused_title rgba(0, 0, 0, 0.6); @define-color wm_highlight rgba(255, 255, 255, 0.15); +@define-color wm_border #a6a6a6; @define-color wm_bg #F2F2F2; @define-color wm_unfocused_bg #FAFAFA; @define-color wm_button_icon white; diff --git a/src/main/gtk-4.0/gtk.css b/src/main/gtk-4.0/gtk.css index 9da30950..c05e7b7f 100644 --- a/src/main/gtk-4.0/gtk.css +++ b/src/main/gtk-4.0/gtk.css @@ -4721,6 +4721,7 @@ read if you used those and something break with a version upgrade you're on your @define-color wm_title #FFFFFF; @define-color wm_unfocused_title rgba(255, 255, 255, 0.7); @define-color wm_highlight rgba(255, 255, 255, 0.1); +@define-color wm_border #a6a6a6; @define-color wm_bg #242424; @define-color wm_unfocused_bg #2C2C2C; @define-color wm_button_icon white; diff --git a/src/sass/gtk/_common-3.0.scss b/src/sass/gtk/_common-3.0.scss index 5842ded3..ce11e1d1 100644 --- a/src/sass/gtk/_common-3.0.scss +++ b/src/sass/gtk/_common-3.0.scss @@ -3844,6 +3844,39 @@ decoration { } } +%firefox_window_button { + &.minimize, &.maximize, &.close { + background-repeat: no-repeat; + background-size: 16px 16px; + background-position: center; + + &, &:hover, &:active { + box-shadow: none; + color: transparent; + animation: none; + transition: $transition; + } + } + + &.minimize { // Window minimize button + &:hover, &:active { + background-image: url("assets/scalable/minimize.svg"); + } + } + + &.maximize { // Window maximize button + &:hover, &:active { + background-image: url("assets/scalable/maximize.svg"); + } + } + + &.close { // Window close button + &:hover, &:active { + background-image: url("assets/scalable/close.svg"); + } + } +} + button.titlebutton:not(.suggested-action):not(.destructive-action) { @extend %circular-button; @@ -3852,6 +3885,16 @@ button.titlebutton:not(.suggested-action):not(.destructive-action) { } @else { @extend %normal_window_button; } + + .background.csd headerbar.titlebar.default-decoration & { + @extend %firefox_window_button; + } + + .background.csd.maximized headerbar.titlebar.default-decoration &.maximize { + &:hover, &:active { + background-image: url("assets/scalable/unmaximize.svg"); + } + } } .monospace { font-family: monospace; } diff --git a/src/sass/gtk/apps/_misc.scss b/src/sass/gtk/apps/_misc.scss index 7622542a..93506cf4 100644 --- a/src/sass/gtk/apps/_misc.scss +++ b/src/sass/gtk/apps/_misc.scss @@ -121,7 +121,12 @@ tooltip.background.chromium { background-color: rgba($tooltip, 1); } /*********** * Firefox * ***********/ + #MozillaGtkWidget { + &.background headerbar.titlebar.default-decoration button.titlebutton { + @extend %firefox_window_button; + } + > widget { // For popover, entry in toolbar, etc. text { background-color: $surface; }