diff --git a/src/toolkit/components/prompts/content/commonDialog-css.patch b/src/toolkit/components/prompts/content/commonDialog-css.patch index ad3ab9c8c..3a55f9f89 100644 --- a/src/toolkit/components/prompts/content/commonDialog-css.patch +++ b/src/toolkit/components/prompts/content/commonDialog-css.patch @@ -1,5 +1,5 @@ diff --git a/toolkit/components/prompts/content/commonDialog.css b/toolkit/components/prompts/content/commonDialog.css -index d811fb62d502cf6fc0bf8163f11e1d264dee9e82..9aa4dc90c73e2f1e2fdcb6bdc26a505402a5c28f 100644 +index d811fb62d502cf6fc0bf8163f11e1d264dee9e82..88e9a4f508f3d640bdbb3a31928e777629afcd80 100644 --- a/toolkit/components/prompts/content/commonDialog.css +++ b/toolkit/components/prompts/content/commonDialog.css @@ -3,7 +3,8 @@ @@ -12,12 +12,13 @@ index d811fb62d502cf6fc0bf8163f11e1d264dee9e82..9aa4dc90c73e2f1e2fdcb6bdc26a5054 } dialog[insecureauth] { -@@ -91,7 +92,7 @@ dialog[insecureauth] { +@@ -91,7 +92,8 @@ dialog[insecureauth] { --grid-padding: 16px; /* All the inner items should have 4px inline margin, leading to 1.16em spacing * between the dialog and its contents, and 8px horizontal spacing between items. */ - padding: var(--grid-padding) calc(var(--grid-padding) - 4px); -+ padding: 26px 22px; ++ padding: 30px 26px; ++ gap: 4px; &::part(dialog-button) { /* Adjust vertical margins for buttons in subdialogs. */ diff --git a/src/zen/common/styles/zen-animations.css b/src/zen/common/styles/zen-animations.css index 7f08377be..9756f8894 100644 --- a/src/zen/common/styles/zen-animations.css +++ b/src/zen/common/styles/zen-animations.css @@ -39,12 +39,12 @@ @keyframes zen-dialog-fade-in { from { opacity: 0; - transform: translateY(-10px); + transform: translateY(calc(-10% - 10px)); } to { opacity: 1; - transform: translateY(0); + transform: translateY(-10%); } } diff --git a/src/zen/common/styles/zen-buttons.css b/src/zen/common/styles/zen-buttons.css index 0c1f6afde..d94c2c367 100644 --- a/src/zen/common/styles/zen-buttons.css +++ b/src/zen/common/styles/zen-buttons.css @@ -18,21 +18,22 @@ xul|button { } dialog::part(dialog-button) { - --button-background-color: light-dark(white, #302f63); + --button-background-color: light-dark(rgba(28, 28, 28, 0.1), rgba(255, 255, 255, .1)) !important; --button-background-color-hover: color-mix(in srgb, var(--button-background-color) 90%, transparent); --button-background-color-active: color-mix(in srgb, var(--button-background-color) 80%, transparent); - --button-background-color-primary: #3138fc; + --button-background-color-primary: light-dark(#1c1c1c, #dddddd); --button-background-color-primary-hover: color-mix(in srgb, var(--button-background-color-primary) 95%, transparent); - --button-text-color-primary: white; - --button-text-color-primary-hover: var(--button-text-color-primary); - border-color: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2)) !important; - border-bottom-width: 2px !important; + --button-background-color-primary-active: color-mix(in srgb, var(--button-background-color-primary) 90%, transparent); + position: relative; + border: none; + border-radius: 10px; } dialog[defaultButton="accept"]::part(dialog-button) { &:is([dlgtype="accept"], [dlgtype="cancel"]) { padding-inline-end: 3.7em; + @media (-moz-platform: windows) { padding-inline-end: 4em; } @@ -41,25 +42,27 @@ dialog[defaultButton="accept"]::part(dialog-button) { border-radius: 4px; font-weight: 600; position: absolute; - right: 0.6em; padding: 3px 0; top: 50%; transform: translateY(-50%); - font-size: 12px; - width: 34px; text-align: center; } &[dlgtype="accept"]::after { content: "⏎"; - background: rgba(255, 255, 255, 0.1); - outline: 2px solid color-mix(in srgb, currentColor 20%, transparent); - outline-offset: -2px; + right: 0.6em; + font-size: 12px; + width: 36px; + color: light-dark(rgba(255, 255, 255, 0.80), rgba(0, 0, 0, 0.60)); } &[dlgtype="cancel"]::after { content: "ESC"; - background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)); + right: 1em; + font-size: 8px; + width: 30px; + color: light-dark(rgba(28, 28, 28, 0.7), rgba(255, 255, 255, 0.6)) !important; + outline: 1px solid light-dark(rgba(28, 28, 28, 0.1), rgba(255, 255, 255, 0.1)) !important; } } } @@ -68,7 +71,8 @@ xul|button:not(#zen-workspaces-button):active { transform: scale(0.98); } -.footer-button { +.footer-button, +dialog::part(dialog-button) { font-weight: 500 !important; transition: scale 0.2s; diff --git a/src/zen/common/styles/zen-panels/dialog.css b/src/zen/common/styles/zen-panels/dialog.css index 4b41dd0dc..d149f6648 100644 --- a/src/zen/common/styles/zen-panels/dialog.css +++ b/src/zen/common/styles/zen-panels/dialog.css @@ -4,9 +4,11 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ .dialogBox { - outline: 1px solid light-dark(transparent, #646464); animation: zen-dialog-fade-in 0.3s ease-out; border-radius: 12px !important; - border: 1px solid light-dark(#a8a8a9, black); + border: 1px solid light-dark(rgba(168, 168, 169, 0.50), var(--zen-dialog-background)) !important; + outline: 1px solid light-dark(transparent, rgba(168, 168, 169, 0.50)) !important; + box-shadow: 0 10px 8px rgba(0, 0 , 0, 0.15) !important; outline-offset: -1.5px; + transform: translateY(-10%); } diff --git a/src/zen/common/styles/zen-theme.css b/src/zen/common/styles/zen-theme.css index 7b333d1db..85abf3bc3 100644 --- a/src/zen/common/styles/zen-theme.css +++ b/src/zen/common/styles/zen-theme.css @@ -59,7 +59,7 @@ color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-branding-bg) 99%) ); - --zen-dialog-background: light-dark(#FAFBFF, #161C31); + --zen-dialog-background: light-dark(#fafbff, #1c1c1c); --zen-urlbar-background: light-dark( color-mix(in srgb, var(--zen-primary-color) 3%, #f4f4f4 97%), color-mix(in srgb, var(--zen-primary-color) 4%, rgb(24, 24, 24) 96%) @@ -113,7 +113,7 @@ --button-border-color: var(--in-content-primary-button-border-color) !important; --button-font-weight: 500 !important; - --button-border-radius: 6px; + --button-border-radius: 8px; --button-text-color-primary: var(--in-content-primary-button-text-color) !important; --button-background-color: var(--in-content-button-background) !important;