mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-04-04 22:59:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Improved UI and spacings for toasts, b=no-bug, c=common

Browse Source
This commit is contained in:
mr. m
2025-10-14 03:22:53 +02:00
parent bd7df38310
commit 2ba0b8ccdf
4 changed files with 25 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
locales/en-US/browser/browser/zen-general.ftl
View File

@@ -31,7 +31,7 @@ pictureinpicture-minimize-btn =
zen-panel-ui-gradient-generator-custom-color = Custom Color
zen-panel-ui-gradient-generator-saved-message = Successfully saved the gradient!
zen-copy-current-url-confirmation = The URL has been copied to the clipboard.
zen-copy-current-url-confirmation = Copied Current URL!
zen-general-cancel-label =
.label = Cancel

2
src/browser/base/content/zen-tabbrowser-elements.inc.xhtml
View File

@@ -2,7 +2,7 @@
# 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/.
<vbox id="zen-toast-container"></vbox>
<vbox id="zen-toast-container" />
#include ../../../zen/split-view/zen-splitview-overlay.inc.xhtml
#include ../../../zen/glance/zen-glance.inc.xhtml

6
src/browser/themes/shared/zen-icons/icons.css
View File

@@ -133,7 +133,8 @@
#sync-button,
.urlbarView-row[source='tabs'] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon,
#urlbar-engine-one-off-item-tabs {
#urlbar-engine-one-off-item-tabs,
#zen-open-background-tab-button {
list-style-image: url('tab.svg') !important;
}
@@ -177,8 +178,7 @@
list-style-image: url('search-page.svg') !important;
}
#open-file-button,
#zen-open-background-tab-button {
#open-file-button {
list-style-image: url('open.svg') !important;
}

31
src/zen/common/styles/zen-popup.css
View File

@@ -345,20 +345,20 @@ menuseparator {
--zen-toast-padding: 6px;
--zen-toast-max-height: 46px;
@media (-moz-platform: macos) {
--zen-toast-padding: 10px;
--zen-toast-max-height: 52px;
--zen-toast-padding: 8px;
--zen-toast-max-height: 48px;
}
gap: 10px;
gap: 8px;
z-index: 1000;
padding: var(--zen-toast-padding);
border-radius: calc(var(--zen-native-inner-radius) + 6px);
border-radius: 10px;
background: linear-gradient(
170deg,
to bottom,
var(--zen-primary-color) -40%,
color-mix(in srgb, var(--zen-primary-color) 85%, #0f0f0f 15%)
color-mix(in srgb, var(--zen-primary-color), #0f0f0f 20%)
);
box-shadow: 0 0 14px 3px rgba(0, 0, 0, 0.05);
box-shadow: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4)) 0px 0px 22px 2px;
border: none;
display: flex;
font-weight: 600;
@@ -382,14 +382,18 @@ menuseparator {
& button {
width: min-content;
padding: 0 10px !important;
padding: 0px 8px !important;
min-width: unset !important;
min-height: 28px;
margin: 0px !important;
border-radius: calc(var(--zen-native-inner-radius) + 2px) !important;
background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05)) !important;
border: 1px solid light-dark(rgba(0, 0, 0, 0.01), rgba(255, 255, 255, 0.01)) !important;
border-radius: 6px !important;
background: light-dark(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1)) !important;
border-top: 2px solid light-dark(transparent, rgba(255, 255, 255, 0.1));
color: light-dark(rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.8)) !important;
outline: 0.5px solid light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.02));
outline-offset: -0.5px;
:root[zen-right-side='true'] & {
order: -1;
}
@@ -397,6 +401,11 @@ menuseparator {
& .button-text {
display: none;
}
& .button-icon {
width: 14px;
opacity: 0.6;
}
}
}
}