mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-01-17 10:27:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Improved dialog UI and colors, b=no-bug, c=common, workspaces

Browse Source
This commit is contained in:
mr. m
2026-01-15 18:13:01 +01:00
parent 74826ea91d
commit 391cb1424a
12 changed files with 67 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/browser/base/content/zen-assets.inc.xhtml
View File

@@ -8,7 +8,6 @@
<linkset>
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-animations.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-sidebar.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-buttons.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-toolbar.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-tabs.css" />
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-browser-ui.css" />

11
src/browser/themes/shared/tabbrowser/content-area-css.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/themes/shared/tabbrowser/content-area.css b/browser/themes/shared/tabbrowser/content-area.css
index b00139d7af878326ff303c08d5ddd47501b8c7db..dbd8a9124fb159fa59012a6c06899a8ec74a1f27 100644
index b00139d7af878326ff303c08d5ddd47501b8c7db..52bad3e978004f3322f3d504cbd663e7b620b69f 100644
--- a/browser/themes/shared/tabbrowser/content-area.css
+++ b/browser/themes/shared/tabbrowser/content-area.css
@@ -90,7 +90,6 @@
@@ -27,3 +27,12 @@ index b00139d7af878326ff303c08d5ddd47501b8c7db..dbd8a9124fb159fa59012a6c06899a8e
inset: 0;
/* Hide tab-modal dialogs when a window-modal one is up. */
@@ -553,7 +551,7 @@ split-view-footer {
.dialogOverlay[topmost="true"],
#window-modal-dialog::backdrop {
- background-color: var(--dialog-backdrop-color);
+ background-color: light-dark(rgba(255, 255, 255, .2), rgba(0, 0, 0, .2));
}
.dialogOverlay[hideContent="true"][topmost="true"] {

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

@@ -1,13 +1,23 @@
diff --git a/toolkit/components/prompts/content/commonDialog.css b/toolkit/components/prompts/content/commonDialog.css
index d811fb62d502cf6fc0bf8163f11e1d264dee9e82..a34363a6a8bf5db6826738dbad0ec6b75b633474 100644
index d811fb62d502cf6fc0bf8163f11e1d264dee9e82..9aa4dc90c73e2f1e2fdcb6bdc26a505402a5c28f 100644
--- a/toolkit/components/prompts/content/commonDialog.css
+++ b/toolkit/components/prompts/content/commonDialog.css
@@ -91,7 +91,7 @@ dialog[insecureauth] {
@@ -3,7 +3,8 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
:root {
- min-width: 29em;
+ min-width: 32em;
+ min-height: 12rem;
}
dialog[insecureauth] {
@@ -91,7 +92,7 @@ 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: 24px 20px;
+ padding: 26px 22px;
&::part(dialog-button) {
/* Adjust vertical margins for buttons in subdialogs. */

11
src/toolkit/themes/shared/in-content/common-shared-css.patch
View File

@@ -1,5 +1,5 @@
diff --git a/toolkit/themes/shared/in-content/common-shared.css b/toolkit/themes/shared/in-content/common-shared.css
index c1acf2d6ab3c9a260e73d43af027f34a807e01dc..dbef9778a1582881dd83f4a1dde455308719b2be 100644
index c1acf2d6ab3c9a260e73d43af027f34a807e01dc..af2b4c430a7101af1fb8a3bc0e2959626cf04bfb 100644
--- a/toolkit/themes/shared/in-content/common-shared.css
+++ b/toolkit/themes/shared/in-content/common-shared.css
@@ -63,7 +63,7 @@
@@ -11,6 +11,15 @@ index c1acf2d6ab3c9a260e73d43af027f34a807e01dc..dbef9778a1582881dd83f4a1dde45530
}
}
@@ -177,7 +177,7 @@ xul|menulist {
border-radius: var(--button-border-radius);
background-color: var(--button-background-color);
font-weight: normal;
- padding: 0.45em 1em;
+ padding: 0.6em 1em;
text-decoration: none;
margin: 4px 8px;
/* Ensure font-size isn't overridden by widget styling (e.g. in forms.css) */
@@ -696,7 +696,7 @@ html|*#categories[last-input-type="mouse"] > html|button.category:focus-visible
fill-opacity: 1;
}

4
src/zen/common/styles/zen-browser-ui.css
View File

@@ -265,7 +265,7 @@
&::before {
height: 50px;
width: 2px;
background: var(--button-primary-bgcolor);
background: var(--button-background-color-primary);
border-radius: 2px;
content: "";
position: absolute;
@@ -284,7 +284,7 @@
&::before {
height: 2px;
width: 50px;
background: var(--button-primary-bgcolor);
background: var(--button-background-color-primary);
border-radius: 2px;
content: "";
position: absolute;

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

@@ -13,27 +13,25 @@
xul|button {
--size-item-large: 34px;
border-radius: var(--zen-button-border-radius) !important;
padding: var(--zen-button-padding) !important;
transition: 0.1s;
min-width: 100px !important;
font-weight: 500 !important;
border: 1px solid var(--zen-colors-border);
border-bottom-width: 2px;
}
button:not(#zen-workspaces-button):active {
button[dlgtype] {
--button-background-color: light-dark(white, #302f63);
--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-hover: color-mix(in srgb, var(--button-background-color-primary) 95%, transparent);
--in-content-primary-button-text-color: white;
border-color: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2)) !important;
border-bottom-width: 2px !important;
}
xul|button:not(#zen-workspaces-button):active {
transform: scale(0.98);
}
html|button:not(:is(.tab-button, .ghost-button, .button-toggle, .button-edit, .button-add, )),
xul|button:is(.expander-down) {
transition: 0.2s;
min-width: unset !important;
border-radius: 6px !important;
}
.footer-button {
transition: scale 0.2s;
&:active {

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

@@ -5,12 +5,9 @@
*/
.dialogBox {
border: none;
outline: 1px solid #a8a8a9;
outline: 1px solid light-dark(transparent, #646464);
animation: zen-dialog-fade-in 0.3s ease-out;
border-radius: 12px !important;
@media (prefers-color-scheme: dark) {
outline-color: #44495a;
outline-offset: -2px;
border: 1px solid black;
}
border: 1px solid light-dark(#a8a8a9, black);
outline-offset: -1.5px;
}

4
src/zen/common/styles/zen-single-components.css
View File

@@ -435,7 +435,7 @@
border-radius: 99px;
width: 32px;
height: 32px;
background: var(--button-primary-bgcolor);
background: var(--button-background-color-primary);
opacity: 0.6;
transition:
transform 0.12s ease-in-out,
@@ -554,7 +554,7 @@
color: var(--button-primary-color);
&::before {
background: var(--button-primary-bgcolor);
background: var(--button-background-color-primary);
}
}

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

@@ -83,7 +83,6 @@
var(--zen-primary-color) 40%,
var(--zen-branding-bg-reverse) 60%
) !important;
--button-text-color-primary: var(--zen-branding-bg) !important;
--in-content-primary-button-text-color: var(--zen-branding-bg) !important;
--in-content-primary-button-border-color: transparent !important;
--in-content-primary-button-border-hover: transparent !important;
@@ -100,27 +99,27 @@
currentColor,
transparent 85%
) !important;
--button-bgcolor: var(--in-content-button-background) !important;
--button-hover-bgcolor: var(--in-content-button-background-hover) !important;
--button-hover-color: var(--in-content-button-text-color-hover) !important;
--focus-outline-color: var(--color-accent-primary) !important;
--toolbarbutton-icon-fill-attention: var(--toolbar-color) !important;
--toolbarbutton-icon-fill: currentColor !important;
--button-primary-bgcolor: var(--in-content-primary-button-background) !important;
--button-background-color-primary: var(--in-content-primary-button-background) !important;
--button-primary-hover-bgcolor: var(--in-content-primary-button-background-hover) !important;
--button-primary-active-bgcolor: var(--in-content-primary-button-background-active) !important;
--button-primary-color: var(--in-content-primary-button-text-color) !important;
--button-border-color-primary: var(--in-content-primary-button-border-color) !important;
/* For dialogs / modals */
--button-background-color-primary: var(--button-primary-bgcolor) !important;
--button-border-color: var(--in-content-primary-button-border-color) !important;
--button-border-radius: 6px;
--button-text-color-primary: var(--in-content-primary-button-text-color) !important;
--button-background-color: var(--in-content-button-background) !important;
--button-background-color-hover: var(--in-content-button-background-hover) !important;
--button-background-color-active: color-mix(in srgb, currentColor 5%, transparent 95%) !important;
--button-background-color-hover: color-mix(in srgb, var(--button-background-color) 95%, transparent) !important;
--button-background-color-active: color-mix(in srgb, var(--button-background-color) 90%, transparent) !important;
--color-accent-primary: var(--button-primary-bgcolor) !important;
--color-accent-primary: var(--button-background-color-primary) !important;
--color-accent-primary-hover: var(--button-primary-hover-bgcolor) !important;
--color-accent-primary-active: var(--button-primary-active-bgcolor) !important;
@@ -138,7 +137,6 @@
var(--zen-branding-bg)
);
--zen-button-border-radius: 5px;
--zen-button-padding: 0.6rem 1.2rem;
--zen-toolbar-element-bg: light-dark(
@@ -344,3 +342,5 @@
%include schemes/light.inc.css
}
}
%include zen-buttons.css

10
src/zen/drag-and-drop/ZenDragAndDrop.js
View File

@@ -109,16 +109,15 @@
}
const draggingTabs = tab.multiselected ? gBrowser.selectedTabs : [tab];
const { offsetX, offsetY } = this.#getDragImageOffset(event, tab, draggingTabs);
const dragImage = this.#createDragImageForTabs(tab, draggingTabs);
const dragImage = this.#createDragImageForTabs(draggingTabs);
this.originalDragImageArgs = [dragImage, offsetX, offsetY];
dt.updateDragImage(...this.originalDragImageArgs);
}
#createDragImageForTabs(draggedTab, movingTabs) {
#createDragImageForTabs(movingTabs) {
const periphery = gZenWorkspaces.activeWorkspaceElement.querySelector(
"#tabbrowser-arrowscrollbox-periphery"
);
const dragData = draggedTab._dragData;
const tabRect = window.windowUtils.getBoundsWithoutFlushing(movingTabs[0]);
const wrapper = document.createElement("div");
wrapper.style.width = tabRect.width + "px";
@@ -140,11 +139,6 @@
tabClone.style.opacity = "0.2";
tabClone.style.zIndex = `${-i}`;
}
// Apply a transform translate to the tab in order to center it within the drag image
// based on the event coordinates.
if (!movingTabs.length > 1) {
tabClone.style.transform = `translate(${(tabRect.width - dragData.offsetX) / 2}px, ${(tabRect.height - dragData.offsetY) / 2}px)`;
}
tabClone.setAttribute("drag-image", "true");
wrapper.appendChild(tabClone);
if (isTab(tabClone)) {

1
src/zen/workspaces/create-workspace-form.css
View File

@@ -138,6 +138,7 @@ zen-workspace-creation {
background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
margin-left: auto;
min-width: unset !important;
border-radius: 6px;
}
}

2
src/zen/workspaces/zen-workspaces.css
View File

@@ -22,7 +22,7 @@
display: none !important;
}
border-radius: var(--zen-button-border-radius) !important;
border-radius: var(--button-border-radius) !important;
background: transparent;
appearance: unset !important;
height: fit-content;