mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-06-13 15:03:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

no-bug: New popup layout and stylings (gh-13245)

Browse Source
This commit is contained in:
mr. m
2026-04-14 11:17:41 +02:00
committed by GitHub
parent 7ed7b63b08
commit 826f1f355f
5 changed files with 30 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/toolkit/components/prompts/content/commonDialog-css.patch
View File

@@ -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. */

4
src/zen/common/styles/zen-animations.css
View File

@@ -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%);
}
}

32
src/zen/common/styles/zen-buttons.css
View File

@@ -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;

6
src/zen/common/styles/zen-panels/dialog.css
View File

@@ -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%);
}

4
src/zen/common/styles/zen-theme.css
View File

@@ -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;