From 2fa95f757d086385d7ac64ac7449fdc32fa25b8a Mon Sep 17 00:00:00 2001 From: cswimr Date: Mon, 28 Oct 2024 15:49:39 -0400 Subject: [PATCH] update zentheme to https://github.com/catppuccin/zen-browser/commit/e33fce92b7c3e48f120399fbce80cd212647a0c1 --- zentheme/userChrome.css | 38 ++++- zentheme/userContent.css | 307 +++++++++++++++++++++++---------------- 2 files changed, 220 insertions(+), 125 deletions(-) diff --git a/zentheme/userChrome.css b/zentheme/userChrome.css index d197b92..c1df650 100644 --- a/zentheme/userChrome.css +++ b/zentheme/userChrome.css @@ -1,9 +1,10 @@ /* Catppuccin Mocha Blue userChrome.css*/ @media (prefers-color-scheme: dark) { - + :root { --zen-colors-primary: #313244 !important; + --zen-primary-color: #89b4fa !important; --zen-colors-secondary: #313244 !important; --zen-colors-tertiary: #181825 !important; --zen-colors-border: #89b4fa !important; @@ -21,6 +22,11 @@ --lwt-sidebar-background-color: #11111b !important; --toolbar-bgcolor: #313244 !important; --newtab-background-color: #1e1e2e !important; + --zen-themed-toolbar-bg: #181825 !important; + } + + #permissions-granted-icon{ + color: #181825 !important; } .sidebar-placesTree { @@ -48,14 +54,26 @@ color: #89b4fa !important; } + #zenEditBookmarkPanelFaviconContainer { + background: #11111b !important; + } + + toolbar .toolbarbutton-1 { + &:not([disabled]) { + &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){ + fill: #11111b; + } + } + } } /* Catppuccin Latte Blue userChrome.css*/ @media (prefers-color-scheme: light) { - + :root { --zen-colors-primary: #ccd0da !important; + --zen-primary-color: #1e66f5 !important; --zen-colors-secondary: #ccd0da !important; --zen-colors-tertiary: #e6e9ef !important; --zen-colors-border: #1e66f5 !important; @@ -73,6 +91,11 @@ --lwt-sidebar-background-color: #dce0e8 !important; --toolbar-bgcolor: #ccd0da !important; --newtab-background-color: #eff1f5 !important; + --zen-themed-toolbar-bg: #e6e9ef !important; + } + + #permissions-granted-icon{ + color: #e6e9ef !important; } .sidebar-placesTree { @@ -100,5 +123,16 @@ color: #1e66f5 !important; } + #zenEditBookmarkPanelFaviconContainer { + background: #dce0e8 !important; + } + + toolbar .toolbarbutton-1 { + &:not([disabled]) { + &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){ + fill: #dce0e8; + } + } + } } diff --git a/zentheme/userContent.css b/zentheme/userContent.css index dd3b5dd..0e8ad0e 100644 --- a/zentheme/userContent.css +++ b/zentheme/userContent.css @@ -1,113 +1,37 @@ /* Catppuccin Mocha Blue userContent.css*/ @media (prefers-color-scheme: dark) { + + /* Common variables affecting all pages */ + @-moz-document url-prefix("about:") { + :root { + --in-content-page-color: #cdd6f4 !important; + --color-accent-primary: #89b4fa !important; + --color-accent-primary-hover: rgb(163, 197, 251) !important; + --color-accent-primary-active: rgb(138, 153, 250) !important; + background-color: #1e1e2e !important; + --in-content-page-background: #1e1e2e !important; + } + + } + + /* Variables and styles specific to about:newtab and about:home */ @-moz-document url("about:newtab"), url("about:home") { - :root{ - --newtab-background-color: #1e1e2e !important; - --newtab-background-color-secondary: #313244 !important; - --newtab-element-hover-color: #313244 !important; - --newtab-text-primary-color: #cdd6f4 !important; - --newtab-wordmark-color: #cdd6f4 !important; + :root { + --newtab-background-color: #1e1e2e !important; + --newtab-background-color-secondary: #313244 !important; + --newtab-element-hover-color: #313244 !important; + --newtab-text-primary-color: #cdd6f4 !important; + --newtab-wordmark-color: #cdd6f4 !important; } - .icon{ - color: #89b4fa !important; - } - - body { - background-color: #1e1e2e !important; - } - - .search-wrapper .logo-and-wordmark .logo { - background: url("zen-logo-mocha.svg") , url("https://raw.githubusercontent.com/IAmJafeth/zen-browser/main/themes/Mocha/Blue/zen-logo-mocha.svg") no-repeat center !important; - display: inline-block !important; - height: 82px !important; - width: 82px !important; - background-size: 82px !important; - } - - @media (max-width: 609px) { - .search-wrapper .logo-and-wordmark .logo { - background-size: 64px !important; - height: 64px !important; - width: 64px !important; - } - } - - .card-outer:is(:hover, :focus, .active):not(.placeholder) .card-title{ + .icon { color: #89b4fa !important; } - .top-site-outer .search-topsite{ - background-color: #89b4fa !important; - } - - .compact-cards .card-outer .card-context .card-context-icon.icon-download{ - fill: #a6e3a1 !important; - } - - } - - - @-moz-document url-prefix("about:preferences"){ - :root{ - --zen-colors-tertiary: #181825 !important; - --in-content-text-color: #cdd6f4 !important; - --link-color: #89b4fa !important; - --link-color-hover: rgb(151, 138, 250) !important; - --color-accent-primary: #89b4fa !important; - --color-accent-primary-hover: rgb(151, 138, 250) !important; - } - - groupbox{ - background: #1e1e2e !important; - } - - groupbox button, groupbox menulist { - background: #313244 !important; - color: #cdd6f4 !important; - } - - .main-content{ - background-color: #11111b !important; - } - } - - @-moz-document url-prefix("about:addons") { - :root{ - --zen-dark-color-mix-base: #181825 !important; - --in-content-page-color: #cdd6f4 !important; - --background-color-box: #1e1e2e !important; - --color-accent-primary: #89b4fa !important; - --color-accent-primary-hover: rgb(151, 138, 250) !important; - } - } -} - -/* Catppuccin Latte Blue userContent.css*/ - -@media (prefers-color-scheme: light) { - @-moz-document url("about:newtab"), url("about:home") { - - :root{ - --newtab-background-color: #eff1f5 !important; - --newtab-background-color-secondary: #ccd0da !important; - --newtab-element-hover-color: #ccd0da !important; - --newtab-text-primary-color: #4c4f69 !important; - --newtab-wordmark-color: #4c4f69 !important; - } - - .icon{ - color: #1e66f5 !important; - } - - body { - background-color: #eff1f5 !important; - } - .search-wrapper .logo-and-wordmark .logo { - background: url("zen-logo-latte.svg") , url("https://raw.githubusercontent.com/IAmJafeth/zen-browser/main/themes/Latte/Blue/zen-logo-latte.svg") no-repeat center !important; + background: url("zen-logo-mocha.svg"), url("https://raw.githubusercontent.com/IAmJafeth/zen-browser/main/themes/Mocha/Blue/zen-logo-mocha.svg") no-repeat center !important; display: inline-block !important; height: 82px !important; width: 82px !important; @@ -122,52 +46,189 @@ } } - .card-outer:is(:hover, :focus, .active):not(.placeholder) .card-title{ + .card-outer:is(:hover, :focus, .active):not(.placeholder) .card-title { + color: #89b4fa !important; + } + + .top-site-outer .search-topsite { + background-color: #89b4fa !important; + } + + .compact-cards .card-outer .card-context .card-context-icon.icon-download { + fill: #a6e3a1 !important; + } + } + + /* Variables and styles specific to about:preferences */ + @-moz-document url-prefix("about:preferences") { + :root { + --zen-colors-tertiary: #181825 !important; + --in-content-text-color: #cdd6f4 !important; + --link-color: #89b4fa !important; + --link-color-hover: rgb(163, 197, 251) !important; + --zen-colors-primary: #313244 !important; + --in-content-box-background: #313244 !important; + --zen-primary-color: #89b4fa !important; + } + + groupbox , moz-card{ + background: #1e1e2e !important; + } + + button, + groupbox menulist { + background: #313244 !important; + color: #cdd6f4 !important; + } + + .main-content { + background-color: #11111b !important; + } + } + + /* Variables and styles specific to about:addons */ + @-moz-document url-prefix("about:addons") { + :root { + --zen-dark-color-mix-base: #181825 !important; + --background-color-box: #1e1e2e !important; + } + } + + /* Variables and styles specific to about:protections */ + @-moz-document url-prefix("about:protections") { + :root { + --zen-primary-color: #1e1e2e !important; + --social-color: #cba6f7 !important; + --coockie-color: #89dceb !important; + --fingerprinter-color: #f9e2af !important; + --cryptominer-color: #b4befe !important; + --tracker-color: #a6e3a1 !important; + --in-content-primary-button-background-hover: rgb(81, 83, 105) !important; + --in-content-primary-button-text-color-hover: #cdd6f4 !important; + --in-content-primary-button-background: #45475a !important; + --in-content-primary-button-text-color: #cdd6f4 !important; + } + + + .card { + background-color: #313244 !important; + } + } +} +/* Catppuccin Latte Blue userContent.css*/ + +@media (prefers-color-scheme: light) { + + /* Common variables affecting all pages */ + @-moz-document url-prefix("about:") { + :root { + --in-content-page-color: #4c4f69 !important; + --color-accent-primary: #1e66f5 !important; + --color-accent-primary-hover: rgb(56, 119, 246) !important; + --color-accent-primary-active: rgb(31, 49, 245) !important; + background-color: #eff1f5 !important; + --in-content-page-background: #eff1f5 !important; + } + + } + + /* Variables and styles specific to about:newtab and about:home */ + @-moz-document url("about:newtab"), url("about:home") { + + :root { + --newtab-background-color: #eff1f5 !important; + --newtab-background-color-secondary: #ccd0da !important; + --newtab-element-hover-color: #ccd0da !important; + --newtab-text-primary-color: #4c4f69 !important; + --newtab-wordmark-color: #4c4f69 !important; + } + + .icon { color: #1e66f5 !important; } - .top-site-outer .search-topsite{ + .search-wrapper .logo-and-wordmark .logo { + background: url("zen-logo-latte.svg"), url("https://raw.githubusercontent.com/IAmJafeth/zen-browser/main/themes/Latte/Blue/zen-logo-latte.svg") no-repeat center !important; + display: inline-block !important; + height: 82px !important; + width: 82px !important; + background-size: 82px !important; + } + + @media (max-width: 609px) { + .search-wrapper .logo-and-wordmark .logo { + background-size: 64px !important; + height: 64px !important; + width: 64px !important; + } + } + + .card-outer:is(:hover, :focus, .active):not(.placeholder) .card-title { + color: #1e66f5 !important; + } + + .top-site-outer .search-topsite { background-color: #1e66f5 !important; } - .compact-cards .card-outer .card-context .card-context-icon.icon-download{ + .compact-cards .card-outer .card-context .card-context-icon.icon-download { fill: #40a02b !important; } - } - - @-moz-document url-prefix("about:preferences"){ - :root{ - --zen-colors-tertiary: #e6e9ef !important; - --in-content-text-color: #4c4f69 !important; - --link-color: #1e66f5 !important; - --link-color-hover: rgb(67, 31, 245) !important; - --color-accent-primary: #1e66f5 !important; - --color-accent-primary-hover: rgb(67, 31, 245) !important; + /* Variables and styles specific to about:preferences */ + @-moz-document url-prefix("about:preferences") { + :root { + --zen-colors-tertiary: #e6e9ef !important; + --in-content-text-color: #4c4f69 !important; + --link-color: #1e66f5 !important; + --link-color-hover: rgb(56, 119, 246) !important; + --zen-colors-primary: #ccd0da !important; + --in-content-box-background: #ccd0da !important; + --zen-primary-color: #1e66f5 !important; } - groupbox{ - background: #eff1f5 !important; + groupbox , moz-card{ + background: #eff1f5 !important; } - groupbox button, groupbox menulist { - background: #ccd0da !important; - color: #4c4f69 !important; + button, + groupbox menulist { + background: #ccd0da !important; + color: #4c4f69 !important; } - .main-content{ - background-color: #dce0e8 !important; + .main-content { + background-color: #dce0e8 !important; } } + /* Variables and styles specific to about:addons */ @-moz-document url-prefix("about:addons") { - :root{ + :root { --zen-dark-color-mix-base: #e6e9ef !important; - --in-content-page-color: #4c4f69 !important; --background-color-box: #eff1f5 !important; - --color-accent-primary: #1e66f5 !important; - --color-accent-primary-hover: rgb(67, 31, 245) !important; + } + } + + /* Variables and styles specific to about:protections */ + @-moz-document url-prefix("about:protections") { + :root { + --zen-primary-color: #eff1f5 !important; + --social-color: #8839ef !important; + --coockie-color: #04a5e5 !important; + --fingerprinter-color: #df8e1d !important; + --cryptominer-color: #7287fd !important; + --tracker-color: #40a02b !important; + --in-content-primary-button-background-hover: rgb(203, 206, 215) !important; + --in-content-primary-button-text-color-hover: #4c4f69 !important; + --in-content-primary-button-background: #bcc0cc !important; + --in-content-primary-button-text-color: #4c4f69 !important; + } + + + .card { + background-color: #ccd0da !important; } } }