mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-16 06:46:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: adjust toast animation duration and update styling for improved visibility

Browse Source
This commit is contained in:
mr. m
2025-03-18 12:34:54 +01:00
parent b5c5bd5980
commit ad04961d19
2 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/browser/base/content/ZenUIManager.mjs
View File

@@ -250,7 +250,7 @@ var gZenUIManager = {
const toast = this._createToastElement(messageId, options); const toast = this._createToastElement(messageId, options);
this._toastContainer.removeAttribute('hidden'); this._toastContainer.removeAttribute('hidden');
this._toastContainer.appendChild(toast); this._toastContainer.appendChild(toast);
await this.motion.animate(toast, { opacity: [0, 1], scale: [0.8, 1] }, { type: 'spring', bounce: 0.5, duration: 0.5 }); await this.motion.animate(toast, { opacity: [0, 1], scale: [0.8, 1] }, { type: 'spring', bounce: 0.5, duration: 0.7 });
await new Promise((resolve) => setTimeout(resolve, 3000)); await new Promise((resolve) => setTimeout(resolve, 3000));
await this.motion.animate(toast, { opacity: [1, 0], scale: [1, 0.9] }, { duration: 0.2, bounce: 0 }); await this.motion.animate(toast, { opacity: [1, 0], scale: [1, 0.9] }, { duration: 0.2, bounce: 0 });
const toastHeight = toast.getBoundingClientRect().height; const toastHeight = toast.getBoundingClientRect().height;

5
src/browser/base/content/zen-styles/zen-popup.css
View File

@@ -360,9 +360,10 @@ menuitem {
& .zen-toast { & .zen-toast {
padding: 0.9rem 0.8rem; padding: 0.9rem 0.8rem;
border-radius: 12px; border-radius: 12px;
background: linear-gradient(170deg, light-dark(rgb(187, 187, 187), rgb(240, 240, 240)) -40%, var(--zen-primary-color) 140%); background: linear-gradient(170deg, var(--zen-primary-color) -40%, color-mix(in srgb, var(--zen-primary-color) 85%, #0f0f0f 15%));
color: var(--button-primary-color); color: var(--button-primary-color);
box-shadow: 0 0 16px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 0 14px 3px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.1);
display: flex; display: flex;
font-weight: 500; font-weight: 500;
gap: 5px; gap: 5px;