From f82220edddbedeae87751d8789ad7841eeaffb07 Mon Sep 17 00:00:00 2001 From: vinceliuice Date: Tue, 3 Oct 2023 20:56:41 +0800 Subject: [PATCH] Fixed #943 --- src/other/firefox/Monterey/colors/dark.css | 10 +- src/other/firefox/Monterey/colors/light.css | 12 +- .../Monterey/parts/headerbar-urlbar.css | 34 +++ src/other/firefox/Monterey/theme-alt.css | 1 + src/other/firefox/Monterey/theme.css | 1 + src/other/firefox/WhiteSur/colors/dark.css | 10 +- src/other/firefox/WhiteSur/colors/light.css | 12 +- .../WhiteSur/parts/headerbar-urlbar.css | 34 +++ src/other/firefox/WhiteSur/theme.css | 2 +- .../firefox/common/icons/translations.svg | 3 + src/other/firefox/common/parts/buttons.css | 1 + src/other/firefox/common/parts/controls.css | 78 ++++--- src/other/firefox/common/parts/icons.css | 6 + .../firefox/common/parts/notification.css | 202 ++++++++++++++++++ 14 files changed, 351 insertions(+), 55 deletions(-) create mode 100644 src/other/firefox/common/icons/translations.svg create mode 100644 src/other/firefox/common/parts/notification.css diff --git a/src/other/firefox/Monterey/colors/dark.css b/src/other/firefox/Monterey/colors/dark.css index e822c1e0..f11a382f 100644 --- a/src/other/firefox/Monterey/colors/dark.css +++ b/src/other/firefox/Monterey/colors/dark.css @@ -115,12 +115,16 @@ --gnome-tab-attention-icon-color: #718be8; /* Switch */ - --gnome-switch-background: #282828; - --gnome-switch-border-color: #1b1b1b; + --gnome-switch-background: #464646; + --gnome-switch-hover-background: #525252; + --gnome-switch-active-background: #606060; + --gnome-switch-border-color: transparent; --gnome-switch-slider-background: linear-gradient(to bottom, #3c3c3c 20%, #353535 90%); --gnome-switch-slider-border-color: #111111; --gnome-switch-slider-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); - --gnome-switch-active-background: #15539e; + --gnome-switch-pressed-background: #315bef; + --gnome-switch-pressed-hover-background: #5073f1; + --gnome-switch-pressed-active-background: #6584f3; --gnome-switch-active-border-color: #030c17; --gnome-switch-active-slider-border-color: #030c17; diff --git a/src/other/firefox/Monterey/colors/light.css b/src/other/firefox/Monterey/colors/light.css index 56a541d2..77bddd1c 100644 --- a/src/other/firefox/Monterey/colors/light.css +++ b/src/other/firefox/Monterey/colors/light.css @@ -114,14 +114,18 @@ --gnome-tab-attention-icon-color: #718be8; /* Switch */ - --gnome-switch-background: #e1dedb; - --gnome-switch-border-color: #cdc7c2; + --gnome-switch-background: #b2b2b2; + --gnome-switch-hover-background: #a0a0a0; + --gnome-switch-active-background: #929292; + --gnome-switch-border-color: transparent; --gnome-switch-slider-background: linear-gradient(to bottom, white 10%, white 90%); - --gnome-switch-slider-border-color: #bfb8b1; + --gnome-switch-slider-border-color: #b8b8b8; --gnome-switch-slider-box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); - --gnome-switch-active-background: #3584e4; --gnome-switch-active-border-color: #185fb4; --gnome-switch-active-slider-border-color: #185fb4; + --gnome-switch-pressed-background: #315bef; + --gnome-switch-pressed-hover-background: #5073f1; + --gnome-switch-pressed-active-background: #6584f3; /* Dirty hacks for replaced symbolic icons, they load from * /usr/share/icons// and on some systems they need to be diff --git a/src/other/firefox/Monterey/parts/headerbar-urlbar.css b/src/other/firefox/Monterey/parts/headerbar-urlbar.css index 6bf2f356..85843f83 100644 --- a/src/other/firefox/Monterey/parts/headerbar-urlbar.css +++ b/src/other/firefox/Monterey/parts/headerbar-urlbar.css @@ -219,3 +219,37 @@ toolbarspring { opacity: 0.8 !important; fill: var(--gnome-toolbar-color) !important; } + +/*translations-button*/ +#translations-button[translationsactive] > #translations-button-icon { + fill: var(--theme-primary-active-color) !important; + fill-opacity: 1; +} + +#translations-button-circle-arrows { + height: 16px; + width: 16px; + list-style-image: url("chrome://browser/skin/sync.svg"); + fill: var(--theme-primary-active-color) !important; + fill-opacity: 1; + margin-inline: 1px; +} + +#translations-button-locale { + background-color: var(--theme-primary-active-color) !important; + color: white !important; + border-radius: 4px; + font-size: 0.8em; + height: 20px; + min-width: 20px; + text-align: center; + padding-top: 3px; + padding-inline: 1px; + box-sizing: border-box; + margin-inline: 2px -2px; + margin-block: -2px; +} + +#translations-button[translationsactive="true"] { + width: auto !important; +} diff --git a/src/other/firefox/Monterey/theme-alt.css b/src/other/firefox/Monterey/theme-alt.css index f29e3d23..251260ea 100644 --- a/src/other/firefox/Monterey/theme-alt.css +++ b/src/other/firefox/Monterey/theme-alt.css @@ -12,6 +12,7 @@ @import "parts/tabsbar-alt.css"; @import "parts/findbar.css"; @import "parts/dialogs.css"; +@import "parts/notification.css"; @import "parts/video-player.css"; @import "parts/remove-white-flash.css"; @import "parts/custom-icons.css"; diff --git a/src/other/firefox/Monterey/theme.css b/src/other/firefox/Monterey/theme.css index d76ec8a4..1fcf53fb 100644 --- a/src/other/firefox/Monterey/theme.css +++ b/src/other/firefox/Monterey/theme.css @@ -12,6 +12,7 @@ @import "parts/tabsbar.css"; @import "parts/findbar.css"; @import "parts/dialogs.css"; +@import "parts/notification.css"; @import "parts/video-player.css"; @import "parts/remove-white-flash.css"; @import "parts/custom-icons.css"; diff --git a/src/other/firefox/WhiteSur/colors/dark.css b/src/other/firefox/WhiteSur/colors/dark.css index 18d3ee04..74d743d1 100644 --- a/src/other/firefox/WhiteSur/colors/dark.css +++ b/src/other/firefox/WhiteSur/colors/dark.css @@ -114,12 +114,16 @@ --gnome-tab-attention-icon-color: #718be8; /* Switch */ - --gnome-switch-background: #282828; - --gnome-switch-border-color: #1b1b1b; + --gnome-switch-background: #464646; + --gnome-switch-hover-background: #525252; + --gnome-switch-active-background: #606060; + --gnome-switch-border-color: transparent; --gnome-switch-slider-background: linear-gradient(to bottom, #3c3c3c 20%, #353535 90%); --gnome-switch-slider-border-color: #111111; --gnome-switch-slider-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); - --gnome-switch-active-background: #15539e; + --gnome-switch-pressed-background: #315bef; + --gnome-switch-pressed-hover-background: #5073f1; + --gnome-switch-pressed-active-background: #6584f3; --gnome-switch-active-border-color: #030c17; --gnome-switch-active-slider-border-color: #030c17; diff --git a/src/other/firefox/WhiteSur/colors/light.css b/src/other/firefox/WhiteSur/colors/light.css index c2a2c369..642b8add 100644 --- a/src/other/firefox/WhiteSur/colors/light.css +++ b/src/other/firefox/WhiteSur/colors/light.css @@ -112,14 +112,18 @@ --gnome-tab-attention-icon-color: #718be8; /* Switch */ - --gnome-switch-background: #e1dedb; - --gnome-switch-border-color: #cdc7c2; + --gnome-switch-background: #b2b2b2; + --gnome-switch-hover-background: #a0a0a0; + --gnome-switch-active-background: #929292; + --gnome-switch-border-color: transparent; --gnome-switch-slider-background: linear-gradient(to bottom, white 10%, white 90%); - --gnome-switch-slider-border-color: #bfb8b1; + --gnome-switch-slider-border-color: #b8b8b8; --gnome-switch-slider-box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); - --gnome-switch-active-background: #3584e4; --gnome-switch-active-border-color: #185fb4; --gnome-switch-active-slider-border-color: #185fb4; + --gnome-switch-pressed-background: #315bef; + --gnome-switch-pressed-hover-background: #5073f1; + --gnome-switch-pressed-active-background: #6584f3; /* Dirty hacks for replaced symbolic icons, they load from * /usr/share/icons// and on some systems they need to be diff --git a/src/other/firefox/WhiteSur/parts/headerbar-urlbar.css b/src/other/firefox/WhiteSur/parts/headerbar-urlbar.css index 72f17da1..ebbc5077 100644 --- a/src/other/firefox/WhiteSur/parts/headerbar-urlbar.css +++ b/src/other/firefox/WhiteSur/parts/headerbar-urlbar.css @@ -235,3 +235,37 @@ toolbarspring { opacity: 0.8 !important; fill: var(--gnome-toolbar-color) !important; } + +/*translations-button*/ +#translations-button[translationsactive] > #translations-button-icon { + fill: var(--theme-primary-active-color) !important; + fill-opacity: 1; +} + +#translations-button-circle-arrows { + height: 16px; + width: 16px; + list-style-image: url("chrome://browser/skin/sync.svg"); + fill: var(--theme-primary-active-color) !important; + fill-opacity: 1; + margin-inline: 1px; +} + +#translations-button-locale { + background-color: var(--theme-primary-active-color) !important; + color: white !important; + border-radius: 4px; + font-size: 0.8em; + height: 20px; + min-width: 20px; + text-align: center; + padding-top: 3px; + padding-inline: 1px; + box-sizing: border-box; + margin-inline: 2px -2px; + margin-block: -2px; +} + +#translations-button[translationsactive="true"] { + width: auto !important; +} diff --git a/src/other/firefox/WhiteSur/theme.css b/src/other/firefox/WhiteSur/theme.css index a07d187c..d575b2b0 100644 --- a/src/other/firefox/WhiteSur/theme.css +++ b/src/other/firefox/WhiteSur/theme.css @@ -12,11 +12,11 @@ @import "parts/tabsbar.css"; @import "parts/findbar.css"; @import "parts/dialogs.css"; +@import "parts/notification.css"; @import "parts/video-player.css"; @import "parts/remove-white-flash.css"; @import "parts/custom-icons.css"; @import "parts/icons.css"; -@import "parts/video-player.css"; @import "colors/light.css"; @import "colors/dark.css"; @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; diff --git a/src/other/firefox/common/icons/translations.svg b/src/other/firefox/common/icons/translations.svg new file mode 100644 index 00000000..cef414b8 --- /dev/null +++ b/src/other/firefox/common/icons/translations.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/other/firefox/common/parts/buttons.css b/src/other/firefox/common/parts/buttons.css index 79408941..cabc6cad 100644 --- a/src/other/firefox/common/parts/buttons.css +++ b/src/other/firefox/common/parts/buttons.css @@ -60,6 +60,7 @@ button.customizationmode-button { .permission-popup-permission-remove-button { padding: 2px 4px !important; + align-items: center !important; } menulist { diff --git a/src/other/firefox/common/parts/controls.css b/src/other/firefox/common/parts/controls.css index bb3917ff..cb9c39e9 100644 --- a/src/other/firefox/common/parts/controls.css +++ b/src/other/firefox/common/parts/controls.css @@ -4,50 +4,48 @@ @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; /* Switchers */ -.protections-popup-tp-switch-box { - padding: 0 !important; - -moz-box-pack: start !important; +.toggle-button { + --toggle-height: 26px !important; + --toggle-width: 48px !important; + --toggle-border-radius: 24px !important; + --toggle-border-color: var(--gnome-switch-border-color) !important; + --toggle-background-color: var(--gnome-switch-background) !important; + --toggle-background-color-hover: var(--gnome-switch-hover-background) !important; + --toggle-background-color-active: var(--gnome-switch-active-background) !important; + --toggle-background-color-pressed: var(--gnome-switch-pressed-background) !important; + --toggle-background-color-pressed-hover: var(--gnome-switch-pressed-hover-background) !important; + --toggle-background-color-pressed-active: var(--gnome-switch-pressed-active-background) !important; + --toggle-dot-height: 22px !important; + --toggle-dot-background-color: #ffffff !important; + --toggle-dot-background-color-on-pressed: #ffffff !important; + --toggle-dot-margin: 1px !important/* border: 0 !important;*/ } -#protections-popup-tp-switch:not([enabled])[showdotindicator]::after { - display: none !important; + +.toggle-button:enabled:hover { + background: var(--toggle-background-color-hover); + border-color: var(--toggle-border-color); } -#protections-popup-tp-switch { - background: var(--gnome-switch-background) !important; - border: 1px solid var(--gnome-switch-border-color) !important; - border-radius: 24px !important; - min-width: 50px !important; - width: 50px !important; - min-height: 26px !important; - padding: 0 !important; - position: relative !important; - display: block !important; - margin: 0 !important; + +.toggle-button:enabled:active { + background: var(--toggle-background-color-active); + border-color: var(--toggle-border-color); } -#protections-popup-tp-switch:hover { - border-color: var(--gnome-switch-border-color) !important; + +.toggle-button[aria-pressed="true"] { + background: var(--toggle-background-color-pressed); + border-color: transparent; } -#protections-popup-tp-switch::before { - position: absolute !important; - top: -1px; - left: -1px; - background: var(--gnome-switch-slider-background) !important; - border: 1px solid var(--gnome-switch-slider-border-color) !important; - box-shadow: var(--gnome-switch-slider-box-shadow); - border-radius: 24px !important; - height: 24px !important; - width: 24px !important; - transition: left .2s ease; - outline: 0 !important; + +.toggle-button[aria-pressed="true"]:enabled:hover { + background: var(--toggle-background-color-pressed-hover); + border-color: transparent; } -#protections-popup-tp-switch[enabled] { - background: var(--gnome-switch-active-background) !important; - border-color: var(--gnome-switch-active-border-color) !important; - padding-inline-start: 24px !important; + +.toggle-button[aria-pressed="true"]:enabled:active { + background: var(--toggle-background-color-pressed-active); + border-color: transparent; } -#protections-popup-tp-switch[enabled]:hover { - border-color: var(--gnome-switch-active-border-color) !important; -} -#protections-popup-tp-switch[enabled]::before { - border-color: var(--gnome-switch-active-slider-border-color) !important; - left: 24px; + +.toggle-button::before { + box-shadow: 0 2px 4px rgba(0, 0, 0, .2); } diff --git a/src/other/firefox/common/parts/icons.css b/src/other/firefox/common/parts/icons.css index a2e30e68..d7e19c5f 100644 --- a/src/other/firefox/common/parts/icons.css +++ b/src/other/firefox/common/parts/icons.css @@ -108,6 +108,12 @@ arrowscrollbox[orient="horizontal"] { margin: 2px 0; } +/*translations-button*/ +#translations-button-icon { + list-style-image: url("../icons/translations.svg") !important; + margin-right: 0 !important; +} + /* Tree views */ treechildren::-moz-tree-twisty { list-style-image: url("../icons/pan-end-symbolic.svg") !important; diff --git a/src/other/firefox/common/parts/notification.css b/src/other/firefox/common/parts/notification.css new file mode 100644 index 00000000..819655a8 --- /dev/null +++ b/src/other/firefox/common/parts/notification.css @@ -0,0 +1,202 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html "http://www.w3.org/1999/xhtml"; + +.notificationbox-stack { + /* Prevent the animation from overlapping the navigation toolbar */ + overflow: clip; +} + +.notificationbox-stack[notificationside="top"] { + /* Create a stacking context for the box-shadow */ + position: relative; + z-index: 1; +} + +notification { + min-height: 32px; + padding-inline-start: 16px; + color: var(--gnome-toolbar-color); + background: var(--gnome-toolbar-background) !important; + border-color: var(--gnome-toolbar-border-color) !important; + border-style: solid; + border-width: 1px 0; + text-shadow: none; + font-size: 1.15em; + align-items: center !important; + vertical-align: middle !important; + + --notification-background: var(--gnome-toolbar-background); + --notification-text: var(--gnome-toolbar-color); + --notification-border: var(--gnome-toolbar-border-color); + --notification-button-background: var(--gnome-button-background); + --notification-button-background-hover: var(--gnome-button-hover-background); + --notification-button-background-active: var(--gnome-button-active-background); + --notification-button-text: inherit; + --notification-primary-button-background: #0060df; + --notification-primary-button-background-hover: #003eaa; + --notification-primary-button-background-active: #002275; + --notification-primary-button-text: var(--gnome-toolbar-color); +} + +notification:-moz-window-inactive { + background: var(--gnome-inactive-toolbar-background) !important; +} + +notification description { + margin-bottom: 0 !important; +} + +notification element { + vertical-align: middle !important; + margin-top: 0 !important; + margin-right: 0 !important; +} + +@media (prefers-color-scheme: dark) { + notification[type="info"]:-moz-lwtheme { + --notification-background: var(--gnome-toolbar-background); + --notification-text: var(--gnome-toolbar-color); + } + + notification[type="info"] { + --notification-button-background: var(--gnome-button-background); + --notification-button-background-hover: var(--gnome-button-hover-background); + --notification-button-background-active: var(--gnome-button-active-background); + } +} + +.notificationbox-stack[notificationside="top"] > notification { + border-top-style: none; +} + +.notificationbox-stack[notificationside="bottom"] > notification { + border-bottom-style: none; +} + +notification[type="warning"] { + --notification-background: #ffe900; + --notification-text: #0c0c0d; +} + +notification[type="critical"] { + --notification-background: #d70022; + --notification-text: #fff; +} + +notification[type="critical"] > .close-icon:hover { + background-color: color-mix(in srgb, currentColor 20%, transparent); +} + +notification[type="critical"] > .close-icon:hover:active { + background-color: color-mix(in srgb, currentColor 30%, transparent); +} + +.messageText { + margin-inline-start: 12px !important; + margin-block: 0; +} + +.messageText > .text-link { + text-decoration: underline; + margin-block: 0; +} + +.messageText > .text-link:not(.notification-link) { + color: inherit !important; + margin-inline: 0; +} + +.messageImage { + width: 24px; + margin: 0; + -moz-context-properties: fill; + fill: currentColor; + vertical-align: middle !important; +} + +notification[type="info"] > hbox > .messageImage { + list-style-image: url("chrome://global/skin/icons/help.svg"); +} + +notification[type="warning"] > hbox > .messageImage { + list-style-image: url("chrome://global/skin/icons/warning.svg"); +} + +notification[type="critical"] > hbox > .messageImage { + list-style-image: url("chrome://global/skin/icons/error.svg"); +} + +.messageCloseButton { + margin: 0 6px !important; + padding: 0; +} + +.messageCloseButton > .toolbarbutton-icon { + padding: 6px; + width: 32px; + /* Close button needs to be clickable from the edge of the window */ + margin-inline-end: 8px; +} + +.messageCloseButton:focus-visible { + /* Override the dotted outline from button.css */ + outline: none; +} + +.messageCloseButton:focus-visible > .toolbarbutton-icon { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); + border-radius: var(--toolbarbutton-border-radius, 4px); +} + +.notification-button { + appearance: none; + border: 1px solid transparent; + border-radius: 4px; + background-color: var(--notification-button-background); + color: var(--notification-button-text); + padding: 0 6px; + margin: 4px 6px; + height: 24px; + vertical-align: middle !important; +} + +.notification-button[disabled] { + opacity: 0.5; +} + +.notification-button:not([disabled]):hover { + background-color: var(--notification-button-background-hover); +} + +.notification-button:not([disabled]):hover:active { + background-color: var(--notification-button-background-active); +} + +.notification-button:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); +} + +.notification-button.primary { + background-color: var(--notification-primary-button-background); + color: var(--notification-primary-button-text); +} + +.notification-button.primary:not([disabled]):hover { + background-color: var(--notification-primary-button-background-hover); +} + +.notification-button.primary:not([disabled]):hover:active { + background-color: var(--notification-primary-button-background-active); +} + +.notificationbox-stack { + background-color: var(--toolbar-bgcolor); + width: 100%; +} +