summaryrefslogtreecommitdiffstats
path: root/browser/themes/linux
diff options
context:
space:
mode:
Diffstat (limited to 'browser/themes/linux')
-rw-r--r--browser/themes/linux/browser.css115
1 files changed, 58 insertions, 57 deletions
diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css
index eb46a22222..89df26a2f0 100644
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -214,64 +214,73 @@
* can swallow those events. */
.titlebar-buttonbox {
z-index: 1;
- align-items: center;
+ align-items: stretch;
}
-/* When using lightweight themes, use our own buttons since native ones might
- * assume a native background in order to be visible. */
-.titlebar-button:-moz-lwtheme {
+@media (-moz-gtk-csd-reversed-placement) {
+ .titlebar-buttonbox-container {
+ order: -1;
+ }
+}
+
+.titlebar-button {
appearance: none;
- border-radius: 100%;
+ align-items: center;
+ padding: 0;
+ padding-inline: calc(env(-moz-gtk-csd-titlebar-button-spacing) / 2);
+
+ > .toolbarbutton-icon {
+ appearance: auto;
+ }
+
+ /* stylelint-disable-next-line media-query-no-invalid */
+ @media (-moz-bool-pref: "widget.gtk.non-native-titlebar-buttons.enabled") {
+ /* When using lightweight themes, use our own buttons since native ones might
+ * assume a native background in order to be visible. */
+ &:-moz-lwtheme {
+ padding-inline: 3px;
+
+ > .toolbarbutton-icon {
+ appearance: none;
+ border-radius: 100%;
+ background-position: center center;
+ background-repeat: no-repeat;
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+ /* Roughly the Adwaita size */
+ width: 24px;
+ height: 24px;
+ }
+ }
+ }
- &:hover {
+ &:hover > .toolbarbutton-icon {
background-color: color-mix(in srgb, currentColor 12%, transparent);
}
- &:hover:active {
+ &:hover:active > .toolbarbutton-icon {
background-color: color-mix(in srgb, currentColor 20%, transparent);
}
- &:focus-visible {
+ &:focus-visible > .toolbarbutton-icon {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-inset);
}
-
- > .toolbarbutton-icon {
- padding: 6px;
- -moz-context-properties: stroke;
- stroke: currentColor;
- }
}
-/* Render titlebar command buttons according to system config.
- * Use full scale icons here as the Gtk+ does. */
.titlebar-max {
- appearance: auto;
- -moz-default-appearance: -moz-window-button-maximize;
order: env(-moz-gtk-csd-maximize-button-position);
-
- &:-moz-lwtheme {
- list-style-image: url(chrome://browser/skin/window-controls/maximize.svg);
+ > .toolbarbutton-icon {
+ -moz-default-appearance: -moz-window-button-maximize;
+ background-image: url(chrome://browser/skin/window-controls/maximize.svg);
}
}
.titlebar-restore {
- appearance: auto;
- -moz-default-appearance: -moz-window-button-restore;
order: env(-moz-gtk-csd-maximize-button-position);
-
- &:-moz-lwtheme {
- list-style-image: url(chrome://browser/skin/window-controls/restore.svg);
- }
-}
-
-@media not (-moz-gtk-csd-minimize-button) {
- .titlebar-min {
- display: none;
-
- &:-moz-lwtheme {
- list-style-image: url(chrome://browser/skin/window-controls/restore.svg);
- }
+ > .toolbarbutton-icon {
+ -moz-default-appearance: -moz-window-button-restore;
+ background-image: url(chrome://browser/skin/window-controls/restore.svg);
}
}
@@ -283,21 +292,20 @@
}
.titlebar-close {
- appearance: auto;
- -moz-default-appearance: -moz-window-button-close;
order: env(-moz-gtk-csd-close-button-position);
- &:-moz-lwtheme {
- list-style-image: url(chrome://browser/skin/window-controls/close.svg);
+ > .toolbarbutton-icon {
+ -moz-default-appearance: -moz-window-button-close;
+ background-image: url(chrome://browser/skin/window-controls/close.svg);
+ }
- &:hover {
- background-color: #d70022;
- color: white;
- }
+ &:hover > .toolbarbutton-icon {
+ background-color: #d70022;
+ color: white;
+ }
- &:hover:active {
- background-color: #ff0039;
- }
+ &:hover:active > .toolbarbutton-icon {
+ background-color: #ff0039;
}
@media not (-moz-gtk-csd-close-button) {
@@ -306,21 +314,14 @@
}
.titlebar-min {
- appearance: auto;
- -moz-default-appearance: -moz-window-button-minimize;
order: env(-moz-gtk-csd-minimize-button-position);
- &:-moz-lwtheme {
- list-style-image: url(chrome://browser/skin/window-controls/minimize.svg);
+ > .toolbarbutton-icon {
+ -moz-default-appearance: -moz-window-button-minimize;
+ background-image: url(chrome://browser/skin/window-controls/minimize.svg);
}
@media not (-moz-gtk-csd-minimize-button) {
display: none;
}
}
-
-@media (-moz-gtk-csd-reversed-placement) {
- .titlebar-buttonbox-container {
- order: -1;
- }
-}