mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-09-05 19:08:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor CSS variables for button backgrounds and text colors to enhance theme consistency and improve hover effects

Browse Source
This commit is contained in:
mr. M
2025-02-15 13:01:09 +01:00
committed by mr. m
parent 47cb4e488f
commit a6ec05da49
1 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,8 +12,8 @@
:root, :root,
.zenLooksAndFeelColorOption { .zenLooksAndFeelColorOption {
/** We also add `.zenLooksAndFeelColorOption` so that it recalculates the colors when the theme changes /** We also add `.zenLooksAndFeelColorOption` so that it recalculates the colors when the theme changes
* in the preferences page. * in the preferences page.
*/ */
/* Default values */ /* Default values */
--zen-border-radius: 7px; --zen-border-radius: 7px;
@@ -46,21 +46,21 @@
--in-content-primary-button-background: color-mix( --in-content-primary-button-background: color-mix(
in srgb, in srgb,
var(--zen-primary-color) 10%, var(--zen-primary-color) 30%,
var(--zen-branding-bg) 90% var(--zen-branding-bg-reverse) 70%
) !important; ) !important;
--in-content-primary-button-background-hover: color-mix( --in-content-primary-button-background-hover: color-mix(
in srgb, in srgb,
var(--zen-primary-color) 15%, var(--zen-primary-color) 35%,
var(--zen-branding-bg) 85% var(--zen-branding-bg-reverse) 65%
) !important; ) !important;
--in-content-primary-button-background-active: color-mix( --in-content-primary-button-background-active: color-mix(
in srgb, in srgb,
var(--zen-primary-color) 20%, var(--zen-primary-color) 40%,
var(--zen-branding-bg) 80% var(--zen-branding-bg-reverse) 60%
) !important; ) !important;
--button-text-color-primary: var(--zen-branding-bg-reverse) !important; --button-text-color-primary: var(--zen-branding-bg) !important;
--in-content-primary-button-text-color: var(--zen-colors-primary-foreground) !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-color: transparent !important;
--in-content-primary-button-border-hover: transparent !important; --in-content-primary-button-border-hover: transparent !important;
--in-content-primary-button-border-active: var(--zen-colors-border) !important; --in-content-primary-button-border-active: var(--zen-colors-border) !important;
@@ -72,7 +72,7 @@
/* This is like the secondary button */ /* This is like the secondary button */
--in-content-button-background: transparent !important; --in-content-button-background: transparent !important;
--in-content-button-text-color: var(--zen-secondary-btn-color) !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-bgcolor: var(--in-content-button-background) !important;
--button-hover-bgcolor: var(--in-content-button-background-hover) !important; --button-hover-bgcolor: var(--in-content-button-background-hover) !important;
--button-hover-color: var(--in-content-button-text-color-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: var(--in-content-button-background) !important;
--button-background-color-hover: var(--in-content-button-background-hover) !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: var(--button-primary-bgcolor) !important;
--color-accent-primary-hover: var(--button-primary-hover-bgcolor) !important; --color-accent-primary-hover: var(--button-primary-hover-bgcolor) !important;
@@ -180,9 +180,9 @@
--zen-native-inner-radius: var( --zen-native-inner-radius: var(
--zen-webview-border-radius, --zen-webview-border-radius,
/* Inner radius calculation: /* Inner radius calculation:
* 1. If the native radius - the separation is less than 4px, use 4px. * 1. If the native radius - the separation is less than 4px, use 4px.
* 2. Otherwise, use the the calculated value (inner radius = outer radius - separation). * 2. Otherwise, use the the calculated value (inner radius = outer radius - separation).
*/ */
max(5px, calc(var(--zen-native-content-radius) - var(--zen-element-separation) / 2)) max(5px, calc(var(--zen-native-content-radius) - var(--zen-element-separation) / 2))
); );