Theme colors are updated to main window now

This commit is contained in:
Mauro Balades
2024-04-12 16:25:49 +02:00
parent 70908da525
commit 05cacec743
12 changed files with 132 additions and 26 deletions

View File

@@ -1,12 +1,10 @@
diff --git a/toolkit/themes/shared/desktop-jar.inc.mn b/toolkit/themes/shared/desktop-jar.inc.mn
index 6f504132c2459a0a476a7a440beef6794d52097e..8ca4e84048f4dc04f385f827a8053a636fdbbe22 100644
index 6f504132c2459a0a476a7a440beef6794d52097e..627f4f72db90bed03ef135e2ac0ad09e53bb9fef 100644
--- a/toolkit/themes/shared/desktop-jar.inc.mn
+++ b/toolkit/themes/shared/desktop-jar.inc.mn
@@ -151,3 +151,7 @@
@@ -151,3 +151,5 @@
skin/classic/global/reader/RM-Content-Width-Plus-44x16.svg (../../shared/reader/RM-Content-Width-Plus-44x16.svg)
skin/classic/global/reader/RM-Line-Height-Minus-38x14.svg (../../shared/reader/RM-Line-Height-Minus-38x14.svg)
skin/classic/global/reader/RM-Line-Height-Plus-38x24.svg (../../shared/reader/RM-Line-Height-Plus-38x24.svg)
+
+ skin/classic/global/in-content/zen-common-shared.css (../../shared/in-content/zen-common-shared.css)
+ skin/classic/global/zen-global-shared.css (../../shared/zen-global-shared.css)
+ skin/classic/global/zen-popup.css (../../shared/zen-popup.css)
+#include zen-desktop.jar.inc.mn

View File

@@ -0,0 +1,11 @@
@namespace html "http://www.w3.org/1999/xhtml";
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
/** This file is used to override UI inside "common-shared.css" */
/** These types of buttons look INSAINELY bad in the preferences page */
xul|button {
border-radius: var(--zen-button-border-radius) !important;
padding: var(--zen-button-padding) !important;
}

View File

@@ -1,3 +1,6 @@
@import url("zen-common-shared-ui-override.css");
:host(:is(.anonymous-content-host, notification-message)),
:root {
/** Primary colors examples:
@@ -6,23 +9,26 @@
* - yellow: #F8BC48;
*/
/** Primary color will be injected by the theme as `--zen-primary-color` */
/** Zen colors are generated automatically from the primary color */
--zen-primary-color: #0b57d0;
--zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%);
--zen-colors-secondary: color-mix(in srgb, var(--zen-primary-color) 20%, white 80%);
--zen-colors-tertiary: color-mix(in srgb, var(--zen-primary-color) 4%, white 96%);
--zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 30%, white 70%);
--zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, white 10%);
--zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, black 20%);
--zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 40%, black 60%);
--zen-colors-shadow-color: color-mix(in srgb, var(--zen-primary-color) 30%, white 70%);
--zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 10%, white 90%);
--in-content-primary-button-background: var(--zen-colors-secondary) !important;
--zen-dialog-background: color-mix(in srgb, var(--zen-primary-color) 1.5%, white 98.5%);
--in-content-primary-button-background: var(--zen-primary-color) !important;
--in-content-primary-button-background-hover: var(--zen-colors-hover-bg) !important;
--in-content-primary-button-background-active: var(--zen-colors-hover-bg) !important;
--in-content-primary-button-text-color: var(--zen-colors-primary-foreground) !important;
--in-content-primary-button-text-color: light-dark(white, black) !important;
--in-content-primary-button-border-color: transparent !important;
--in-content-primary-button-border-hover: transparent !important;
--in-content-primary-button-border-active: var(--zen-colors-border) !important;
@@ -30,6 +36,13 @@
--in-content-accent-color: var(--zen-colors-primary) !important;
/* This is like the secondary button */
--in-content-button-background: var(--zen-colors-secondary) !important;
--button-bgcolor: var(--in-content-button-background) !important;
--zen-secondary-btn-color: var(--zen-colors-primary-foreground);
--focus-outline-color: var(--button-bgcolor) !important;
--in-content-button-text-color: var(--zen-secondary-btn-color) !important;
--button-primary-bgcolor: 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;
@@ -38,6 +51,9 @@
--in-content-page-background: var(--zen-colors-tertiary) !important;
--zen-in-content-dialog-background: var(--zen-colors-tertiary);
--zen-button-border-radius: 999px;
--zen-button-padding: 0.7em 2.3em;
/* TODO: Support dark themes! */
}

View File

@@ -1,5 +1,5 @@
diff --git a/toolkit/themes/shared/popup.css b/toolkit/themes/shared/popup.css
index ddc41a66ed0e3688ce34052652bef1fe33a08d49..ee6acc414a86626ac15b5a744ebcb867c85fe536 100644
index ddc41a66ed0e3688ce34052652bef1fe33a08d49..53575e1af10d764b131ac20648f1fdd84b652d60 100644
--- a/toolkit/themes/shared/popup.css
+++ b/toolkit/themes/shared/popup.css
@@ -2,6 +2,8 @@
@@ -22,12 +22,12 @@ index ddc41a66ed0e3688ce34052652bef1fe33a08d49..ee6acc414a86626ac15b5a744ebcb867
--panel-padding: var(--panel-padding-block) 0;
--panel-border-radius: 4px;
- --panel-border-color: ThreeDShadow;
+ --panel-border-color: light-dark(rgba(0,0,0,.2), rgba(255,255,255,.1)) /* var(--arrowpanel-border-color) */ !important;
+ --panel-border-color: transparent /* var(--arrowpanel-border-color) */ !important;
--panel-width: initial;
--panel-shadow-margin: 0px;
- --panel-shadow: 0 0 var(--panel-shadow-margin) hsla(0,0%,0%,.2);
+ --panel-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;;
+ --panel-shadow: rgba(0, 0, 0, 0.15) 0px 4px 10px;
-moz-window-input-region-margin: var(--panel-shadow-margin);
margin: calc(-1 * var(--panel-shadow-margin));

View File

@@ -0,0 +1,5 @@
skin/classic/global/in-content/zen-common-shared.css (../../shared/in-content/zen-common-shared.css)
skin/classic/global/zen-global-shared.css (../../shared/zen-global-shared.css)
skin/classic/global/zen-popup.css (../../shared/zen-popup.css)
skin/classic/global/in-content/zen-common-shared-ui-override.css (../../shared/in-content/zen-common-shared-ui-override.css)

View File

@@ -2,13 +2,11 @@
@import url("./in-content/zen-common-shared.css");
:root {
--zen-dialog-background: Field;
--zen-dialog-border-color: rgba(0,0,0,.2);
--zen-panel-radius: 15px;
--arrowpanel-background: var(--zen-dialog-background) !important;
--arrowpanel-border-color: var(--zen-dialog-border-color) !important;
--arrowpanel-border-radius: 7px !important;
--arrowpanel-border-radius: 15px !important;
&:-moz-lwtheme {
color: var(--lwt-text-color);
@@ -22,7 +20,6 @@
@media (prefers-color-scheme: dark) {
:root {
--zen-dialog-background: rgba(28, 27, 34);
--zen-dialog-border-color: rgba(255,255,255,.1);
}
}

View File

@@ -1,7 +1,6 @@
:root {
--panel-subview-body-padding: 2px 0 !important;
--arrowpanel-border-radius: 8px !important;
--arrowpanel-menuitem-border-radius: 5px !important;
--arrowpanel-menuitem-margin: var(--uc-arrowpanel-menuitem-margin-block) var(--uc-arrowpanel-menuitem-margin-inline) !important;
--arrowpanel-menuitem-padding-block: 8px !important;
@@ -225,12 +224,10 @@
menupopup::part(content),
panel::part(content) {
--panel-shadow: var(--zen-colors-shadow-color) 0px 1px 4px !important;
border: transparent !important;
}
menupopup,
panel {
--panel-shadow: none !important;
box-shadow: none;
}