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

Refactor button hover styles and enhance animation effects in ZenWelcome component for improved UI responsiveness

Browse Source
This commit is contained in:
mr. M
2025-02-15 12:51:48 +01:00
parent d5516fae89
commit a0da6da320
3 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/browser/base/content/zen-styles/zen-theme.css
View File

@@ -72,7 +72,7 @@
/* This is like the secondary button */
--in-content-button-background: transparent !important;
--in-content-button-text-color: var(--zen-secondary-btn-color) !important;
--in-content-button-background-hover: color-mix(in srgb, var(--zen-primary-color) 5%, var(--zen-branding-bg) 60%) !important;
--in-content-button-background-hover: color-mix(in srgb, currentColor 3%, transparent 97%) !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;
@@ -88,7 +88,7 @@
--button-background-color: var(--in-content-button-background) !important;
--button-background-color-hover: var(--in-content-button-background-hover) !important;
--button-background-color-active: var(--in-content-primary-button-background-active) !important;
--button-background-color-active: color-mix(in srgb, currentColor 5%, transparent 95%) !important;
--color-accent-primary: var(--button-primary-bgcolor) !important;
--color-accent-primary-hover: var(--button-primary-hover-bgcolor) !important;

1
src/browser/base/content/zen-styles/zen-welcome.css
View File

@@ -118,6 +118,7 @@
border: 2px solid var(--zen-colors-border);
box-shadow: var(--zen-big-shadow);
background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
align-items: center;
&:hover {
scale: 1.015;

8
src/browser/base/zen-components/ZenWelcome.mjs
View File

@@ -62,7 +62,7 @@
+ (description2 ? `<html:p>${description2}</html:p>` : '');
await animate(
'#zen-welcome-page-sidebar-content > *',
{ opacity: [0, 1], x: [50, 0], filter: ['blur(2px)', 'blur(0px)'] },
{ opacity: [0, 1], x: [100, 0], filter: ['blur(2px)', 'blur(0px)'] },
{
delay: getMotion().stagger(0.05, { startDelay: 0.3 }),
type: 'spring',
@@ -91,7 +91,7 @@
}
await animate(
'#zen-welcome-page-sidebar-buttons button',
{ opacity: [0, 1], x: [50, 0], filter: ['blur(2px)', 'blur(0px)'] },
{ opacity: [0, 1], x: [100, 0], filter: ['blur(2px)', 'blur(0px)'] },
{
delay: getMotion().stagger(0.1, { startDelay: 0.4 }),
type: 'spring',
@@ -115,7 +115,7 @@
async fadeOutButtons() {
await animate(
'#zen-welcome-page-sidebar-buttons button',
{ opacity: [1, 0], x: [0, -50], filter: ['blur(0px)', 'blur(2px)'] },
{ opacity: [1, 0], x: [0, -100], filter: ['blur(0px)', 'blur(2px)'] },
{
type: 'spring',
bounce: 0,
@@ -129,7 +129,7 @@
async fadeOutTitles() {
await animate(
'#zen-welcome-page-sidebar-content > *',
{ opacity: [1, 0], x: [0, -50], filter: ['blur(0px)', 'blur(2px)'] },
{ opacity: [1, 0], x: [0, -100], filter: ['blur(0px)', 'blur(2px)'] },
{
delay: getMotion().stagger(0.05, { startDelay: 0.3 }),
type: 'spring',