From bf365f804355a7db4ee0369289bc48530626c644 Mon Sep 17 00:00:00 2001 From: Ashvin Jangid <142579833+ashvwinn@users.noreply.github.com> Date: Tue, 2 Jun 2026 19:17:37 +0530 Subject: [PATCH] gh-13439: Implement dark mode boosts panel (gh-13979) --- locales/ar/browser/browser/zen-boosts.ftl | 6 +- locales/bg/browser/browser/zen-boosts.ftl | 6 +- locales/bs/browser/browser/zen-boosts.ftl | 6 +- locales/ca/browser/browser/zen-boosts.ftl | 6 +- locales/cs/browser/browser/zen-boosts.ftl | 6 +- locales/cy/browser/browser/zen-boosts.ftl | 6 +- locales/da/browser/browser/zen-boosts.ftl | 6 +- locales/de/browser/browser/zen-boosts.ftl | 6 +- locales/el/browser/browser/zen-boosts.ftl | 6 +- locales/en-GB/browser/browser/zen-boosts.ftl | 6 +- locales/en-US/browser/browser/zen-boosts.ftl | 6 +- locales/es-ES/browser/browser/zen-boosts.ftl | 6 +- locales/et/browser/browser/zen-boosts.ftl | 6 +- locales/eu/browser/browser/zen-boosts.ftl | 6 +- locales/fa/browser/browser/zen-boosts.ftl | 6 +- locales/fi/browser/browser/zen-boosts.ftl | 6 +- locales/fr/browser/browser/zen-boosts.ftl | 6 +- locales/ga-IE/browser/browser/zen-boosts.ftl | 6 +- locales/he/browser/browser/zen-boosts.ftl | 6 +- locales/hu/browser/browser/zen-boosts.ftl | 6 +- locales/id/browser/browser/zen-boosts.ftl | 6 +- locales/is/browser/browser/zen-boosts.ftl | 6 +- locales/it/browser/browser/zen-boosts.ftl | 6 +- locales/ja/browser/browser/zen-boosts.ftl | 6 +- locales/ko/browser/browser/zen-boosts.ftl | 6 +- locales/lt/browser/browser/zen-boosts.ftl | 6 +- locales/nb/browser/browser/zen-boosts.ftl | 6 +- locales/nl/browser/browser/zen-boosts.ftl | 6 +- locales/nn-NO/browser/browser/zen-boosts.ftl | 6 +- locales/pl/browser/browser/zen-boosts.ftl | 6 +- locales/pt-BR/browser/browser/zen-boosts.ftl | 6 +- locales/pt-PT/browser/browser/zen-boosts.ftl | 6 +- locales/ro/browser/browser/zen-boosts.ftl | 6 +- locales/ru/browser/browser/zen-boosts.ftl | 6 +- locales/sk/browser/browser/zen-boosts.ftl | 6 +- locales/sv-SE/browser/browser/zen-boosts.ftl | 6 +- locales/th/browser/browser/zen-boosts.ftl | 6 +- locales/tr/browser/browser/zen-boosts.ftl | 6 +- locales/uk/browser/browser/zen-boosts.ftl | 6 +- locales/vi/browser/browser/zen-boosts.ftl | 6 +- locales/zh-CN/browser/browser/zen-boosts.ftl | 6 +- locales/zh-TW/browser/browser/zen-boosts.ftl | 6 +- src/browser/themes/shared/zen-icons/icons.css | 4 +- src/zen/boosts/ZenBoostsEditor.mjs | 21 ++-- src/zen/boosts/zen-advanced-color-options.css | 3 +- src/zen/boosts/zen-boost-editor.inc.xhtml | 19 ++- src/zen/boosts/zen-boosts.css | 116 +++++++++++------- src/zen/boosts/zen-selector.css | 54 +++++--- 48 files changed, 264 insertions(+), 205 deletions(-) diff --git a/locales/ar/browser/browser/zen-boosts.ftl b/locales/ar/browser/browser/zen-boosts.ftl index 7211fa124..eb42026a7 100644 --- a/locales/ar/browser/browser/zen-boosts.ftl +++ b/locales/ar/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Pick Selector zen-boost-css-inspector = .tooltiptext = Open Inspector -zen-bootst-color-contrast = Contrast -zen-bootst-color-brightness = Brightness -zen-bootst-color-original-saturation = Original Saturation +zen-boost-color-contrast = Contrast +zen-boost-color-brightness = Brightness +zen-boost-color-original-saturation = Original Saturation zen-add-zap-helper = Click elements on the page to Zap them zen-remove-zap-helper = ← Click to Unzap zen-select-this = Insert selector for this diff --git a/locales/bg/browser/browser/zen-boosts.ftl b/locales/bg/browser/browser/zen-boosts.ftl index 7211fa124..eb42026a7 100644 --- a/locales/bg/browser/browser/zen-boosts.ftl +++ b/locales/bg/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Pick Selector zen-boost-css-inspector = .tooltiptext = Open Inspector -zen-bootst-color-contrast = Contrast -zen-bootst-color-brightness = Brightness -zen-bootst-color-original-saturation = Original Saturation +zen-boost-color-contrast = Contrast +zen-boost-color-brightness = Brightness +zen-boost-color-original-saturation = Original Saturation zen-add-zap-helper = Click elements on the page to Zap them zen-remove-zap-helper = ← Click to Unzap zen-select-this = Insert selector for this diff --git a/locales/bs/browser/browser/zen-boosts.ftl b/locales/bs/browser/browser/zen-boosts.ftl index 7211fa124..eb42026a7 100644 --- a/locales/bs/browser/browser/zen-boosts.ftl +++ b/locales/bs/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Pick Selector zen-boost-css-inspector = .tooltiptext = Open Inspector -zen-bootst-color-contrast = Contrast -zen-bootst-color-brightness = Brightness -zen-bootst-color-original-saturation = Original Saturation +zen-boost-color-contrast = Contrast +zen-boost-color-brightness = Brightness +zen-boost-color-original-saturation = Original Saturation zen-add-zap-helper = Click elements on the page to Zap them zen-remove-zap-helper = ← Click to Unzap zen-select-this = Insert selector for this diff --git a/locales/ca/browser/browser/zen-boosts.ftl b/locales/ca/browser/browser/zen-boosts.ftl index 588c417b0..80e72030a 100644 --- a/locales/ca/browser/browser/zen-boosts.ftl +++ b/locales/ca/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Trieu el selector zen-boost-css-inspector = .tooltiptext = Obre l'inspector -zen-bootst-color-contrast = Contrast -zen-bootst-color-brightness = Brillantor -zen-bootst-color-original-saturation = Saturació original +zen-boost-color-contrast = Contrast +zen-boost-color-brightness = Brillantor +zen-boost-color-original-saturation = Saturació original zen-add-zap-helper = Feu clic als elements de la pàgina per amagar-los zen-remove-zap-helper = ← Feu clic per mostrar zen-select-this = Insereix un selector per a això diff --git a/locales/cs/browser/browser/zen-boosts.ftl b/locales/cs/browser/browser/zen-boosts.ftl index 7211fa124..eb42026a7 100644 --- a/locales/cs/browser/browser/zen-boosts.ftl +++ b/locales/cs/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Pick Selector zen-boost-css-inspector = .tooltiptext = Open Inspector -zen-bootst-color-contrast = Contrast -zen-bootst-color-brightness = Brightness -zen-bootst-color-original-saturation = Original Saturation +zen-boost-color-contrast = Contrast +zen-boost-color-brightness = Brightness +zen-boost-color-original-saturation = Original Saturation zen-add-zap-helper = Click elements on the page to Zap them zen-remove-zap-helper = ← Click to Unzap zen-select-this = Insert selector for this diff --git a/locales/cy/browser/browser/zen-boosts.ftl b/locales/cy/browser/browser/zen-boosts.ftl index 7211fa124..eb42026a7 100644 --- a/locales/cy/browser/browser/zen-boosts.ftl +++ b/locales/cy/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Pick Selector zen-boost-css-inspector = .tooltiptext = Open Inspector -zen-bootst-color-contrast = Contrast -zen-bootst-color-brightness = Brightness -zen-bootst-color-original-saturation = Original Saturation +zen-boost-color-contrast = Contrast +zen-boost-color-brightness = Brightness +zen-boost-color-original-saturation = Original Saturation zen-add-zap-helper = Click elements on the page to Zap them zen-remove-zap-helper = ← Click to Unzap zen-select-this = Insert selector for this diff --git a/locales/da/browser/browser/zen-boosts.ftl b/locales/da/browser/browser/zen-boosts.ftl index 7211fa124..eb42026a7 100644 --- a/locales/da/browser/browser/zen-boosts.ftl +++ b/locales/da/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Pick Selector zen-boost-css-inspector = .tooltiptext = Open Inspector -zen-bootst-color-contrast = Contrast -zen-bootst-color-brightness = Brightness -zen-bootst-color-original-saturation = Original Saturation +zen-boost-color-contrast = Contrast +zen-boost-color-brightness = Brightness +zen-boost-color-original-saturation = Original Saturation zen-add-zap-helper = Click elements on the page to Zap them zen-remove-zap-helper = ← Click to Unzap zen-select-this = Insert selector for this diff --git a/locales/de/browser/browser/zen-boosts.ftl b/locales/de/browser/browser/zen-boosts.ftl index 21d9907ab..3dc0465ed 100644 --- a/locales/de/browser/browser/zen-boosts.ftl +++ b/locales/de/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Selektor auswählen zen-boost-css-inspector = .tooltiptext = Inspektor öffnen -zen-bootst-color-contrast = Kontrast -zen-bootst-color-brightness = Helligkeit -zen-bootst-color-original-saturation = Ausgangssättigung +zen-boost-color-contrast = Kontrast +zen-boost-color-brightness = Helligkeit +zen-boost-color-original-saturation = Ausgangssättigung zen-add-zap-helper = Klicke auf Elemente auf der Seite, um sie mit Zap zu markieren zen-remove-zap-helper = ← Erneut klicken zum Wiederherstellen zen-select-this = Selektor für dieses Element einfügen diff --git a/locales/el/browser/browser/zen-boosts.ftl b/locales/el/browser/browser/zen-boosts.ftl index 7211fa124..eb42026a7 100644 --- a/locales/el/browser/browser/zen-boosts.ftl +++ b/locales/el/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Pick Selector zen-boost-css-inspector = .tooltiptext = Open Inspector -zen-bootst-color-contrast = Contrast -zen-bootst-color-brightness = Brightness -zen-bootst-color-original-saturation = Original Saturation +zen-boost-color-contrast = Contrast +zen-boost-color-brightness = Brightness +zen-boost-color-original-saturation = Original Saturation zen-add-zap-helper = Click elements on the page to Zap them zen-remove-zap-helper = ← Click to Unzap zen-select-this = Insert selector for this diff --git a/locales/en-GB/browser/browser/zen-boosts.ftl b/locales/en-GB/browser/browser/zen-boosts.ftl index 7211fa124..eb42026a7 100644 --- a/locales/en-GB/browser/browser/zen-boosts.ftl +++ b/locales/en-GB/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Pick Selector zen-boost-css-inspector = .tooltiptext = Open Inspector -zen-bootst-color-contrast = Contrast -zen-bootst-color-brightness = Brightness -zen-bootst-color-original-saturation = Original Saturation +zen-boost-color-contrast = Contrast +zen-boost-color-brightness = Brightness +zen-boost-color-original-saturation = Original Saturation zen-add-zap-helper = Click elements on the page to Zap them zen-remove-zap-helper = ← Click to Unzap zen-select-this = Insert selector for this diff --git a/locales/en-US/browser/browser/zen-boosts.ftl b/locales/en-US/browser/browser/zen-boosts.ftl index 07e32431c..55da47677 100644 --- a/locales/en-US/browser/browser/zen-boosts.ftl +++ b/locales/en-US/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Pick Selector zen-boost-css-inspector = .tooltiptext = Open Inspector -zen-bootst-color-contrast = Contrast -zen-bootst-color-brightness = Brightness -zen-bootst-color-original-saturation = Original Saturation +zen-boost-color-contrast = Contrast +zen-boost-color-brightness = Brightness +zen-boost-color-original-saturation = Original Saturation zen-add-zap-helper = Click elements on the page to Zap them zen-remove-zap-helper = ← Click to Unzap zen-select-this = Insert selector for this diff --git a/locales/es-ES/browser/browser/zen-boosts.ftl b/locales/es-ES/browser/browser/zen-boosts.ftl index 3af79691b..1542ac34f 100644 --- a/locales/es-ES/browser/browser/zen-boosts.ftl +++ b/locales/es-ES/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Escoger selector zen-boost-css-inspector = .tooltiptext = Abrir inspector -zen-bootst-color-contrast = Contraste -zen-bootst-color-brightness = Brillo -zen-bootst-color-original-saturation = Saturación original +zen-boost-color-contrast = Contraste +zen-boost-color-brightness = Brillo +zen-boost-color-original-saturation = Saturación original zen-add-zap-helper = Haga clic en los elementos de la página para borrarlos zen-remove-zap-helper = ← Clic para deshacer zen-select-this = Insertar selector para esto diff --git a/locales/et/browser/browser/zen-boosts.ftl b/locales/et/browser/browser/zen-boosts.ftl index 7211fa124..eb42026a7 100644 --- a/locales/et/browser/browser/zen-boosts.ftl +++ b/locales/et/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Pick Selector zen-boost-css-inspector = .tooltiptext = Open Inspector -zen-bootst-color-contrast = Contrast -zen-bootst-color-brightness = Brightness -zen-bootst-color-original-saturation = Original Saturation +zen-boost-color-contrast = Contrast +zen-boost-color-brightness = Brightness +zen-boost-color-original-saturation = Original Saturation zen-add-zap-helper = Click elements on the page to Zap them zen-remove-zap-helper = ← Click to Unzap zen-select-this = Insert selector for this diff --git a/locales/eu/browser/browser/zen-boosts.ftl b/locales/eu/browser/browser/zen-boosts.ftl index 7211fa124..eb42026a7 100644 --- a/locales/eu/browser/browser/zen-boosts.ftl +++ b/locales/eu/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Pick Selector zen-boost-css-inspector = .tooltiptext = Open Inspector -zen-bootst-color-contrast = Contrast -zen-bootst-color-brightness = Brightness -zen-bootst-color-original-saturation = Original Saturation +zen-boost-color-contrast = Contrast +zen-boost-color-brightness = Brightness +zen-boost-color-original-saturation = Original Saturation zen-add-zap-helper = Click elements on the page to Zap them zen-remove-zap-helper = ← Click to Unzap zen-select-this = Insert selector for this diff --git a/locales/fa/browser/browser/zen-boosts.ftl b/locales/fa/browser/browser/zen-boosts.ftl index 7211fa124..eb42026a7 100644 --- a/locales/fa/browser/browser/zen-boosts.ftl +++ b/locales/fa/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Pick Selector zen-boost-css-inspector = .tooltiptext = Open Inspector -zen-bootst-color-contrast = Contrast -zen-bootst-color-brightness = Brightness -zen-bootst-color-original-saturation = Original Saturation +zen-boost-color-contrast = Contrast +zen-boost-color-brightness = Brightness +zen-boost-color-original-saturation = Original Saturation zen-add-zap-helper = Click elements on the page to Zap them zen-remove-zap-helper = ← Click to Unzap zen-select-this = Insert selector for this diff --git a/locales/fi/browser/browser/zen-boosts.ftl b/locales/fi/browser/browser/zen-boosts.ftl index 7211fa124..eb42026a7 100644 --- a/locales/fi/browser/browser/zen-boosts.ftl +++ b/locales/fi/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Pick Selector zen-boost-css-inspector = .tooltiptext = Open Inspector -zen-bootst-color-contrast = Contrast -zen-bootst-color-brightness = Brightness -zen-bootst-color-original-saturation = Original Saturation +zen-boost-color-contrast = Contrast +zen-boost-color-brightness = Brightness +zen-boost-color-original-saturation = Original Saturation zen-add-zap-helper = Click elements on the page to Zap them zen-remove-zap-helper = ← Click to Unzap zen-select-this = Insert selector for this diff --git a/locales/fr/browser/browser/zen-boosts.ftl b/locales/fr/browser/browser/zen-boosts.ftl index d06ad7610..0cae8d22a 100644 --- a/locales/fr/browser/browser/zen-boosts.ftl +++ b/locales/fr/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Choisir le sélecteur zen-boost-css-inspector = .tooltiptext = Ouvrir l'inspecteur -zen-bootst-color-contrast = Contraste -zen-bootst-color-brightness = Luminosité -zen-bootst-color-original-saturation = Saturation originale +zen-boost-color-contrast = Contraste +zen-boost-color-brightness = Luminosité +zen-boost-color-original-saturation = Saturation originale zen-add-zap-helper = Cliquez sur des éléments de la page pour les zapper zen-remove-zap-helper = ← Cliquez pour démasquer zen-select-this = Insérer un sélecteur pour ceci diff --git a/locales/ga-IE/browser/browser/zen-boosts.ftl b/locales/ga-IE/browser/browser/zen-boosts.ftl index 2491bae48..7477614f0 100644 --- a/locales/ga-IE/browser/browser/zen-boosts.ftl +++ b/locales/ga-IE/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Roghnóir Roghnaigh zen-boost-css-inspector = .tooltiptext = Oscail an Cigire -zen-bootst-color-contrast = Codarsnacht -zen-bootst-color-brightness = Gile -zen-bootst-color-original-saturation = Sáithiú Bunaidh +zen-boost-color-contrast = Codarsnacht +zen-boost-color-brightness = Gile +zen-boost-color-original-saturation = Sáithiú Bunaidh zen-add-zap-helper = Cliceáil ar eilimintí ar an leathanach chun iad a Zapáil zen-remove-zap-helper = ← Cliceáil chun Dízipáil zen-select-this = Cuir roghnóir isteach don seo diff --git a/locales/he/browser/browser/zen-boosts.ftl b/locales/he/browser/browser/zen-boosts.ftl index 3f9d31f62..66a825ec5 100644 --- a/locales/he/browser/browser/zen-boosts.ftl +++ b/locales/he/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Pick Selector zen-boost-css-inspector = .tooltiptext = Open Inspector -zen-bootst-color-contrast = ניגודיות -zen-bootst-color-brightness = בהירות -zen-bootst-color-original-saturation = Original Saturation +zen-boost-color-contrast = ניגודיות +zen-boost-color-brightness = בהירות +zen-boost-color-original-saturation = Original Saturation zen-add-zap-helper = Click elements on the page to Zap them zen-remove-zap-helper = ← Click to Unzap zen-select-this = Insert selector for this diff --git a/locales/hu/browser/browser/zen-boosts.ftl b/locales/hu/browser/browser/zen-boosts.ftl index 0437ff86a..30caaedb0 100644 --- a/locales/hu/browser/browser/zen-boosts.ftl +++ b/locales/hu/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Pick Selector zen-boost-css-inspector = .tooltiptext = Vizsgáló megnyitása -zen-bootst-color-contrast = Kontraszt -zen-bootst-color-brightness = Fényerő -zen-bootst-color-original-saturation = Eredeti szaturáció +zen-boost-color-contrast = Kontraszt +zen-boost-color-brightness = Fényerő +zen-boost-color-original-saturation = Eredeti szaturáció zen-add-zap-helper = Click elements on the page to Zap them zen-remove-zap-helper = ← Click to Unzap zen-select-this = Insert selector for this diff --git a/locales/id/browser/browser/zen-boosts.ftl b/locales/id/browser/browser/zen-boosts.ftl index 7211fa124..eb42026a7 100644 --- a/locales/id/browser/browser/zen-boosts.ftl +++ b/locales/id/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Pick Selector zen-boost-css-inspector = .tooltiptext = Open Inspector -zen-bootst-color-contrast = Contrast -zen-bootst-color-brightness = Brightness -zen-bootst-color-original-saturation = Original Saturation +zen-boost-color-contrast = Contrast +zen-boost-color-brightness = Brightness +zen-boost-color-original-saturation = Original Saturation zen-add-zap-helper = Click elements on the page to Zap them zen-remove-zap-helper = ← Click to Unzap zen-select-this = Insert selector for this diff --git a/locales/is/browser/browser/zen-boosts.ftl b/locales/is/browser/browser/zen-boosts.ftl index 52a18cd59..7cc8d4b91 100644 --- a/locales/is/browser/browser/zen-boosts.ftl +++ b/locales/is/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Veljari zen-boost-css-inspector = .tooltiptext = Opna rýni -zen-bootst-color-contrast = Birtuskil -zen-bootst-color-brightness = Birtustig -zen-bootst-color-original-saturation = Upprunaleg litmettun +zen-boost-color-contrast = Birtuskil +zen-boost-color-brightness = Birtustig +zen-boost-color-original-saturation = Upprunaleg litmettun zen-add-zap-helper = Smelltu á atriði á síðunni til að einangra þau (zap) zen-remove-zap-helper = ← Smelltu til að taka úr einangrun zen-select-this = Setja inn veljara fyrir þetta diff --git a/locales/it/browser/browser/zen-boosts.ftl b/locales/it/browser/browser/zen-boosts.ftl index 7211fa124..eb42026a7 100644 --- a/locales/it/browser/browser/zen-boosts.ftl +++ b/locales/it/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Pick Selector zen-boost-css-inspector = .tooltiptext = Open Inspector -zen-bootst-color-contrast = Contrast -zen-bootst-color-brightness = Brightness -zen-bootst-color-original-saturation = Original Saturation +zen-boost-color-contrast = Contrast +zen-boost-color-brightness = Brightness +zen-boost-color-original-saturation = Original Saturation zen-add-zap-helper = Click elements on the page to Zap them zen-remove-zap-helper = ← Click to Unzap zen-select-this = Insert selector for this diff --git a/locales/ja/browser/browser/zen-boosts.ftl b/locales/ja/browser/browser/zen-boosts.ftl index 5a5586994..6172b8b53 100644 --- a/locales/ja/browser/browser/zen-boosts.ftl +++ b/locales/ja/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = セレクターを選択 zen-boost-css-inspector = .tooltiptext = インスペクタを開く -zen-bootst-color-contrast = コントラスト -zen-bootst-color-brightness = 明るさ -zen-bootst-color-original-saturation = 元の彩度 +zen-boost-color-contrast = コントラスト +zen-boost-color-brightness = 明るさ +zen-boost-color-original-saturation = 元の彩度 zen-add-zap-helper = Zap にページ上の要素をクリックします zen-remove-zap-helper = ←クリックして解除 zen-select-this = このセレクターを挿入 diff --git a/locales/ko/browser/browser/zen-boosts.ftl b/locales/ko/browser/browser/zen-boosts.ftl index 1b49b35d9..057fbe3b0 100644 --- a/locales/ko/browser/browser/zen-boosts.ftl +++ b/locales/ko/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = 선택자 선택 zen-boost-css-inspector = .tooltiptext = 검사기 열기 -zen-bootst-color-contrast = 대비 -zen-bootst-color-brightness = 밝기 -zen-bootst-color-original-saturation = 원본 채도 +zen-boost-color-contrast = 대비 +zen-boost-color-brightness = 밝기 +zen-boost-color-original-saturation = 원본 채도 zen-add-zap-helper = 페이지 내의 요소를 클릭해서 날려버리세요 zen-remove-zap-helper = ← 클릭하여 되살리기 zen-select-this = 이 요소의 선택자 삽입 diff --git a/locales/lt/browser/browser/zen-boosts.ftl b/locales/lt/browser/browser/zen-boosts.ftl index 8a1c758ec..60b7619e8 100644 --- a/locales/lt/browser/browser/zen-boosts.ftl +++ b/locales/lt/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Pick Selector zen-boost-css-inspector = .tooltiptext = Open Inspector -zen-bootst-color-contrast = Kontrastas -zen-bootst-color-brightness = Šviesumas -zen-bootst-color-original-saturation = Original Saturation +zen-boost-color-contrast = Kontrastas +zen-boost-color-brightness = Šviesumas +zen-boost-color-original-saturation = Original Saturation zen-add-zap-helper = Click elements on the page to Zap them zen-remove-zap-helper = ← Click to Unzap zen-select-this = Insert selector for this diff --git a/locales/nb/browser/browser/zen-boosts.ftl b/locales/nb/browser/browser/zen-boosts.ftl index 658411d08..6831beb05 100644 --- a/locales/nb/browser/browser/zen-boosts.ftl +++ b/locales/nb/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Velgselektor zen-boost-css-inspector = .tooltiptext = Åpne inspektør -zen-bootst-color-contrast = Kontrast -zen-bootst-color-brightness = Lysstyrke -zen-bootst-color-original-saturation = Opprinnelig fargemetning +zen-boost-color-contrast = Kontrast +zen-boost-color-brightness = Lysstyrke +zen-boost-color-original-saturation = Opprinnelig fargemetning zen-add-zap-helper = Klikk elementer på siden for å Zappe dem zen-remove-zap-helper = ← Klikk for å avzappe zen-select-this = Sett inn slektor for dette diff --git a/locales/nl/browser/browser/zen-boosts.ftl b/locales/nl/browser/browser/zen-boosts.ftl index 7211fa124..eb42026a7 100644 --- a/locales/nl/browser/browser/zen-boosts.ftl +++ b/locales/nl/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Pick Selector zen-boost-css-inspector = .tooltiptext = Open Inspector -zen-bootst-color-contrast = Contrast -zen-bootst-color-brightness = Brightness -zen-bootst-color-original-saturation = Original Saturation +zen-boost-color-contrast = Contrast +zen-boost-color-brightness = Brightness +zen-boost-color-original-saturation = Original Saturation zen-add-zap-helper = Click elements on the page to Zap them zen-remove-zap-helper = ← Click to Unzap zen-select-this = Insert selector for this diff --git a/locales/nn-NO/browser/browser/zen-boosts.ftl b/locales/nn-NO/browser/browser/zen-boosts.ftl index 7211fa124..eb42026a7 100644 --- a/locales/nn-NO/browser/browser/zen-boosts.ftl +++ b/locales/nn-NO/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Pick Selector zen-boost-css-inspector = .tooltiptext = Open Inspector -zen-bootst-color-contrast = Contrast -zen-bootst-color-brightness = Brightness -zen-bootst-color-original-saturation = Original Saturation +zen-boost-color-contrast = Contrast +zen-boost-color-brightness = Brightness +zen-boost-color-original-saturation = Original Saturation zen-add-zap-helper = Click elements on the page to Zap them zen-remove-zap-helper = ← Click to Unzap zen-select-this = Insert selector for this diff --git a/locales/pl/browser/browser/zen-boosts.ftl b/locales/pl/browser/browser/zen-boosts.ftl index 7d1e3f33a..c2d9a4519 100644 --- a/locales/pl/browser/browser/zen-boosts.ftl +++ b/locales/pl/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Wybierz selektor zen-boost-css-inspector = .tooltiptext = Otwórz Inspektor -zen-bootst-color-contrast = Kontrast -zen-bootst-color-brightness = Jasność -zen-bootst-color-original-saturation = Oryginalne nasycenie +zen-boost-color-contrast = Kontrast +zen-boost-color-brightness = Jasność +zen-boost-color-original-saturation = Oryginalne nasycenie zen-add-zap-helper = Kliknij elementy na stronie, aby je ukryć zen-remove-zap-helper = ← Kliknij, aby cofnąć ukrycie zen-select-this = Wstaw selektor dla tego elementu diff --git a/locales/pt-BR/browser/browser/zen-boosts.ftl b/locales/pt-BR/browser/browser/zen-boosts.ftl index 6ae7e53e6..cf906da64 100644 --- a/locales/pt-BR/browser/browser/zen-boosts.ftl +++ b/locales/pt-BR/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Ferramenta de Seleção zen-boost-css-inspector = .tooltiptext = Abrir Inspetor -zen-bootst-color-contrast = Contraste -zen-bootst-color-brightness = Brilho -zen-bootst-color-original-saturation = Saturação Original +zen-boost-color-contrast = Contraste +zen-boost-color-brightness = Brilho +zen-boost-color-original-saturation = Saturação Original zen-add-zap-helper = Clique em elementos da página para dar um Zap neles zen-remove-zap-helper = Clique para Deszapar zen-select-this = Inserir seletor para isto diff --git a/locales/pt-PT/browser/browser/zen-boosts.ftl b/locales/pt-PT/browser/browser/zen-boosts.ftl index 7211fa124..eb42026a7 100644 --- a/locales/pt-PT/browser/browser/zen-boosts.ftl +++ b/locales/pt-PT/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Pick Selector zen-boost-css-inspector = .tooltiptext = Open Inspector -zen-bootst-color-contrast = Contrast -zen-bootst-color-brightness = Brightness -zen-bootst-color-original-saturation = Original Saturation +zen-boost-color-contrast = Contrast +zen-boost-color-brightness = Brightness +zen-boost-color-original-saturation = Original Saturation zen-add-zap-helper = Click elements on the page to Zap them zen-remove-zap-helper = ← Click to Unzap zen-select-this = Insert selector for this diff --git a/locales/ro/browser/browser/zen-boosts.ftl b/locales/ro/browser/browser/zen-boosts.ftl index 7211fa124..eb42026a7 100644 --- a/locales/ro/browser/browser/zen-boosts.ftl +++ b/locales/ro/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Pick Selector zen-boost-css-inspector = .tooltiptext = Open Inspector -zen-bootst-color-contrast = Contrast -zen-bootst-color-brightness = Brightness -zen-bootst-color-original-saturation = Original Saturation +zen-boost-color-contrast = Contrast +zen-boost-color-brightness = Brightness +zen-boost-color-original-saturation = Original Saturation zen-add-zap-helper = Click elements on the page to Zap them zen-remove-zap-helper = ← Click to Unzap zen-select-this = Insert selector for this diff --git a/locales/ru/browser/browser/zen-boosts.ftl b/locales/ru/browser/browser/zen-boosts.ftl index 7211fa124..eb42026a7 100644 --- a/locales/ru/browser/browser/zen-boosts.ftl +++ b/locales/ru/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Pick Selector zen-boost-css-inspector = .tooltiptext = Open Inspector -zen-bootst-color-contrast = Contrast -zen-bootst-color-brightness = Brightness -zen-bootst-color-original-saturation = Original Saturation +zen-boost-color-contrast = Contrast +zen-boost-color-brightness = Brightness +zen-boost-color-original-saturation = Original Saturation zen-add-zap-helper = Click elements on the page to Zap them zen-remove-zap-helper = ← Click to Unzap zen-select-this = Insert selector for this diff --git a/locales/sk/browser/browser/zen-boosts.ftl b/locales/sk/browser/browser/zen-boosts.ftl index 7211fa124..eb42026a7 100644 --- a/locales/sk/browser/browser/zen-boosts.ftl +++ b/locales/sk/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Pick Selector zen-boost-css-inspector = .tooltiptext = Open Inspector -zen-bootst-color-contrast = Contrast -zen-bootst-color-brightness = Brightness -zen-bootst-color-original-saturation = Original Saturation +zen-boost-color-contrast = Contrast +zen-boost-color-brightness = Brightness +zen-boost-color-original-saturation = Original Saturation zen-add-zap-helper = Click elements on the page to Zap them zen-remove-zap-helper = ← Click to Unzap zen-select-this = Insert selector for this diff --git a/locales/sv-SE/browser/browser/zen-boosts.ftl b/locales/sv-SE/browser/browser/zen-boosts.ftl index c010d0a98..ac1f44bc4 100644 --- a/locales/sv-SE/browser/browser/zen-boosts.ftl +++ b/locales/sv-SE/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Välj väljare zen-boost-css-inspector = .tooltiptext = Öppna inspektör -zen-bootst-color-contrast = Kontrast -zen-bootst-color-brightness = Ljusstyrka -zen-bootst-color-original-saturation = Ursprunglig mättnad +zen-boost-color-contrast = Kontrast +zen-boost-color-brightness = Ljusstyrka +zen-boost-color-original-saturation = Ursprunglig mättnad zen-add-zap-helper = Klicka på element på sidan för att zappa dem zen-remove-zap-helper = ← Klicka för att avzappa zen-select-this = Infoga väljare för detta diff --git a/locales/th/browser/browser/zen-boosts.ftl b/locales/th/browser/browser/zen-boosts.ftl index 7211fa124..eb42026a7 100644 --- a/locales/th/browser/browser/zen-boosts.ftl +++ b/locales/th/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Pick Selector zen-boost-css-inspector = .tooltiptext = Open Inspector -zen-bootst-color-contrast = Contrast -zen-bootst-color-brightness = Brightness -zen-bootst-color-original-saturation = Original Saturation +zen-boost-color-contrast = Contrast +zen-boost-color-brightness = Brightness +zen-boost-color-original-saturation = Original Saturation zen-add-zap-helper = Click elements on the page to Zap them zen-remove-zap-helper = ← Click to Unzap zen-select-this = Insert selector for this diff --git a/locales/tr/browser/browser/zen-boosts.ftl b/locales/tr/browser/browser/zen-boosts.ftl index 7c78e7c03..5e5e94f13 100644 --- a/locales/tr/browser/browser/zen-boosts.ftl +++ b/locales/tr/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Seçici seç zen-boost-css-inspector = .tooltiptext = Denetleyiciyi aç -zen-bootst-color-contrast = Kontrast -zen-bootst-color-brightness = Parlaklık -zen-bootst-color-original-saturation = Orijinal doygunluk +zen-boost-color-contrast = Kontrast +zen-boost-color-brightness = Parlaklık +zen-boost-color-original-saturation = Orijinal doygunluk zen-add-zap-helper = Sayfadaki ögelere tıklayarak onları Zap ile kaldırın zen-remove-zap-helper = ← Unzap için tıklayın zen-select-this = Bu öge için seçici ekle diff --git a/locales/uk/browser/browser/zen-boosts.ftl b/locales/uk/browser/browser/zen-boosts.ftl index 3e5c35c98..37e88193d 100644 --- a/locales/uk/browser/browser/zen-boosts.ftl +++ b/locales/uk/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Вибір селектора zen-boost-css-inspector = .tooltiptext = Відкрити інспектора -zen-bootst-color-contrast = Контраст -zen-bootst-color-brightness = Яскравість -zen-bootst-color-original-saturation = Оригінальна насиченість +zen-boost-color-contrast = Контраст +zen-boost-color-brightness = Яскравість +zen-boost-color-original-saturation = Оригінальна насиченість zen-add-zap-helper = Клацніть на елементи на сторінці, щоби сховати їх zen-remove-zap-helper = ← Клацніть, аби знову показати zen-select-this = Вставити селектор для цього diff --git a/locales/vi/browser/browser/zen-boosts.ftl b/locales/vi/browser/browser/zen-boosts.ftl index 734f49741..a29a84583 100644 --- a/locales/vi/browser/browser/zen-boosts.ftl +++ b/locales/vi/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = Chọn phần tử zen-boost-css-inspector = .tooltiptext = Mở trình kiểm tra -zen-bootst-color-contrast = Độ tương phản -zen-bootst-color-brightness = Độ sáng -zen-bootst-color-original-saturation = Độ bão hòa gốc +zen-boost-color-contrast = Độ tương phản +zen-boost-color-brightness = Độ sáng +zen-boost-color-original-saturation = Độ bão hòa gốc zen-add-zap-helper = Nhấp vào các phần tử trên trang để Khử chúng zen-remove-zap-helper = ← Nhấp để khôi phục zen-select-this = Nhập bộ chọn cho phần tử này diff --git a/locales/zh-CN/browser/browser/zen-boosts.ftl b/locales/zh-CN/browser/browser/zen-boosts.ftl index be617b8c7..650ea1dc6 100644 --- a/locales/zh-CN/browser/browser/zen-boosts.ftl +++ b/locales/zh-CN/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = 选取选择器 zen-boost-css-inspector = .tooltiptext = 打开查看器 -zen-bootst-color-contrast = 对比度 -zen-bootst-color-brightness = 亮度 -zen-bootst-color-original-saturation = 初始饱和度 +zen-boost-color-contrast = 对比度 +zen-boost-color-brightness = 亮度 +zen-boost-color-original-saturation = 初始饱和度 zen-add-zap-helper = 点击页面上的元素以将其屏蔽 zen-remove-zap-helper = ← 点击以取消屏蔽 zen-select-this = 插入此元素的选择器 diff --git a/locales/zh-TW/browser/browser/zen-boosts.ftl b/locales/zh-TW/browser/browser/zen-boosts.ftl index d9fefbb04..a195f6411 100644 --- a/locales/zh-TW/browser/browser/zen-boosts.ftl +++ b/locales/zh-TW/browser/browser/zen-boosts.ftl @@ -29,9 +29,9 @@ zen-boost-css-picker = .tooltiptext = 汲取選擇器 zen-boost-css-inspector = .tooltiptext = 開啟檢測器 -zen-bootst-color-contrast = 對比 -zen-bootst-color-brightness = 亮度 -zen-bootst-color-original-saturation = 飽和度 +zen-boost-color-contrast = 對比 +zen-boost-color-brightness = 亮度 +zen-boost-color-original-saturation = 飽和度 zen-add-zap-helper = 選擇要 Zap的元素 zen-remove-zap-helper = ← 按此取消zap zen-select-this = 加入此元素的選擇器 diff --git a/src/browser/themes/shared/zen-icons/icons.css b/src/browser/themes/shared/zen-icons/icons.css index bf563df95..918a36ec1 100644 --- a/src/browser/themes/shared/zen-icons/icons.css +++ b/src/browser/themes/shared/zen-icons/icons.css @@ -538,7 +538,9 @@ display: flex; width: 100%; height: 100%; - color: var(--color-accent-primary); + color: var(--zen-sidebar-themed-icon-fill); + -moz-context-properties: fill; + fill: currentColor; list-style-image: url("chrome://browser/content/zen-images/boost-indicator.svg"); transform: translateX(-20%); z-index: 0; diff --git a/src/zen/boosts/ZenBoostsEditor.mjs b/src/zen/boosts/ZenBoostsEditor.mjs index 6956c124a..c40a541d7 100644 --- a/src/zen/boosts/ZenBoostsEditor.mjs +++ b/src/zen/boosts/ZenBoostsEditor.mjs @@ -44,6 +44,7 @@ export class nsZenBoostEditor { this.lastDotSetPos = { x: 0, y: 0 }; this.currentBoostData = null; this.boostInfo = null; + this.isDarkMode = this.openerWindow.gZenThemePicker.isDarkMode; this.killOtherEditorInstances(); @@ -52,6 +53,7 @@ export class nsZenBoostEditor { }); this.init(); + this.initColorScheme(); this.initColorPicker(); this.initFonts(); this.loadBoost(domain); @@ -184,6 +186,17 @@ export class nsZenBoostEditor { } } + /** + * Initializes the color scheme of the editor window based on the current theme (dark or light mode) + */ + initColorScheme() { + if (this.isDarkMode) { + this.doc.documentElement.style.colorScheme = "dark"; + } else { + this.doc.documentElement.style.colorScheme = "light"; + } + } + /** * Initializes the code editor for the css editor */ @@ -205,7 +218,7 @@ export class nsZenBoostEditor { const editor = new Editor({ mode: Editor.modes.css, lineNumbers: true, - theme: "default", // default is light theme + theme: "mozilla", readOnly: false, gutters: ["CodeMirror-linenumbers"], }); @@ -1166,12 +1179,6 @@ ${cssSelector} { invertButton.classList.remove("zen-boost-button-active"); } - if (this.currentBoostData.smartInvert) { - invertButton.classList.add("zen-boost-button-active"); - } else { - invertButton.classList.remove("zen-boost-button-active"); - } - if (!this.currentBoostData.enableColorBoost) { disableButton.classList.add("zen-boost-button-active-transparent"); } else { diff --git a/src/zen/boosts/zen-advanced-color-options.css b/src/zen/boosts/zen-advanced-color-options.css index 4cc651de8..385d075ab 100644 --- a/src/zen/boosts/zen-advanced-color-options.css +++ b/src/zen/boosts/zen-advanced-color-options.css @@ -5,11 +5,10 @@ */ #zen-boost-advanced-color-options-panel { - color-scheme: light; --panel-padding: 15px; & p { - color: #3a3a3b; + color: var(--zen-boosts-primary-color); } & input { diff --git a/src/zen/boosts/zen-boost-editor.inc.xhtml b/src/zen/boosts/zen-boost-editor.inc.xhtml index 15c75f57c..9cd64e411 100644 --- a/src/zen/boosts/zen-boost-editor.inc.xhtml +++ b/src/zen/boosts/zen-boost-editor.inc.xhtml @@ -34,14 +34,6 @@ - - - @@ -120,15 +112,15 @@ -

+

-

+

-

+

@@ -164,5 +156,10 @@ + + diff --git a/src/zen/boosts/zen-boosts.css b/src/zen/boosts/zen-boosts.css index f0b3c43ba..ba3e57b3c 100644 --- a/src/zen/boosts/zen-boosts.css +++ b/src/zen/boosts/zen-boosts.css @@ -5,10 +5,33 @@ */ #zenBoostWindow { - /* For the mica effect we want a white tint */ - @media not (-moz-platform: linux) { - color-scheme: light; - } + --zen-boosts-primary-background: light-dark(#fcfcfe, #171717); + --zen-boosts-secondary-background: light-dark(#f6f6f8, #1c1c1e); + --zen-boosts-mica-background: light-dark(#f6f6f8c0, #1c1c1ec0); + + --zen-boosts-primary-color: light-dark(#3a3a3b, #f3f3f3); + --zen-boosts-secondary-color: light-dark(#727272, #b1b1b1); + + --zen-boosts-button-background: light-dark(#ebebed, #262626); + + --mod-button-c1: light-dark(#ebebed, #262626); + --mod-button-c2: light-dark(#ebebed, #262626); + + --zen-boosts-active-button-background: light-dark(#3a3a3a, #cccccc); + --zen-boosts-active-button-hover-background: light-dark(#5b5b5c, #c9c9c9); + --zen-boosts-active-button-color: light-dark(#fcfcfe, #1c1c1e); + --zen-boosts-back-button-hover-background: light-dark(#e3e3e6, #3a3a3a); + + --zen-boosts-magic-theme-background: light-dark(white, #3a3a3a); + --zen-boosts-magic-theme-active-background: light-dark(#3a3a3a, white); + + --zen-boosts-font-wrapper-background: light-dark(white, #262626); + + --zen-boosts-primary-border-color: light-dark(#ededef, #3a3a3a); + + --zen-boosts-color-picker-background: light-dark(#fbfbfdea, #1c1c1eea); + --zen-boosts-color-picker-pattern-color: light-dark(#e3e9e4, #3a3a3a); + appearance: none; border: none; @@ -40,12 +63,12 @@ width: 100%; height: 40px; - background-color: #f6f6f8; + background-color: var(--zen-boosts-secondary-background); @media (-moz-windows-mica) { - background-color: #f6f6f8c0; + background-color: var(--zen-boosts-mica-background); } - border: solid 0 #ededef; + border: solid 0 var(--zen-boosts-primary-border-color); border-bottom-width: 1px; } @@ -58,6 +81,9 @@ margin-left: 4px; border-radius: 8px; + -moz-context-properties: fill; + fill: var(--zen-boosts-primary-color); + opacity: 0.75; background-color: transparent; @@ -79,12 +105,12 @@ width: 100%; height: 60px; - background-color: #f6f6f8; + background-color: var(--zen-boosts-secondary-background); @media (-moz-windows-mica) { - background-color: #f6f6f8c0; + background-color: var(--zen-boosts-mica-background); } - border: solid 0 #ededef; + border: solid 0 var(--zen-boosts-primary-border-color); border-top-width: 1px; display: flex; @@ -148,7 +174,7 @@ body { } .subviewbutton { - color: #3a3a3b; + color: var(--zen-boosts-primary-color); } #zen-boost-editor-view { @@ -166,11 +192,11 @@ body { min-height: 40px; max-height: 40px; align-items: center; - background-color: #f6f6f8; - border: solid 1px #e7e7e7ab; + background-color: var(--zen-boosts-secondary-background); + border: solid 1px var(--zen-boosts-primary-border-color); @media (-moz-windows-mica) { - background-color: #f6f6f8c0; + background-color: var(--zen-boosts-mica-background); border: none; } @@ -232,6 +258,7 @@ body { padding: 2px; & button { + color: var(--zen-boosts-primary-color) !important; padding: auto; margin: auto; background-color: transparent; @@ -243,7 +270,7 @@ body { gap: 14px; padding-top: 6px; - background-color: #fcfcfe; + background-color: var(--zen-boosts-primary-background); -moz-window-dragging: drag; & > * { @@ -328,7 +355,7 @@ body { border-radius: 12px; } - background-color: #ebebed; + background-color: var(--zen-boosts-button-background); transition: 0.4s background-color cubic-bezier(0.075, 0.82, 0.165, 1), @@ -348,7 +375,7 @@ body { } #zen-boost-case:not([case-mode="none"]) { - background-color: #ebebed; + background-color: var(--zen-boosts-button-background); font-weight: 600 !important; } @@ -373,7 +400,7 @@ body { font-size: 8pt; text-indent: 2px; vertical-align: middle; - color: #3a3a3b; + color: var(--zen-boosts-primary-color); justify-content: center; } @@ -397,12 +424,16 @@ body { } .zen-boost-button-active { - background-color: #3a3a3a; - color: #fcfcfe; + background-color: var(--zen-boosts-active-button-background); + color: var(--zen-boosts-active-button-color); + + &#zen-boost-magic-theme { + background-color: var(--zen-boosts-magic-theme-active-background); + } } .zen-boost-button-active:hover { - background-color: #5b5b5c; + background-color: var(--zen-boosts-active-button-hover-background); } .zen-boost-button-active-transparent { @@ -430,12 +461,13 @@ body { } &:not(.zen-boost-button-active) { - background: white; + background: var(--zen-boosts-magic-theme-background); + color: var(--zen-boosts-primary-color); } } .footer { - background-color: #F6F6F8; + background-color: var(--zen-boosts-secondary-background); padding: 20px; } @@ -471,7 +503,7 @@ body { transition: 0.2s opacity ease-in-out; - color: #727272; + color: var(--zen-boosts-secondary-color); background: none; font-size: 9pt; @@ -490,7 +522,7 @@ body { &[has-selection="true"] { opacity: 1; - background-color: #ebebed; + background-color: var(--zen-boosts-button-background); } } @@ -513,7 +545,7 @@ body { #zen-boost-font-wrapper { box-shadow: 0 2px 6px rgba(0,0,0,.15); - background-color: #ffffff; + background-color: var(--zen-boosts-font-wrapper-background); border-radius: 6px; @media (-moz-platform: macos) { @@ -564,35 +596,35 @@ body { @property --mod-button-c1 { syntax: ""; - inherits: false; - initial-value: #ebebed; + inherits: true; + initial-value: transparent; } @property --mod-button-c2 { syntax: ""; - inherits: false; - initial-value: #ebebed; + inherits: true; + initial-value: transparent; } .mod-button[mode="orange"] { color: #e3e9e4; - --mod-button-c1: #ffbb5d; - --mod-button-c2: #ffa01d; + --mod-button-c1: light-dark(#ffbb5d, #c37a3f); + --mod-button-c2: light-dark(#ffa01d, #9f5a2a); } .mod-button[mode="orange-red"] { color: #e3e9e4; - --mod-button-c1: #ff8758; - --mod-button-c2: #ff5b1b; + --mod-button-c1: light-dark(#ff8758, #bd6048); + --mod-button-c2: light-dark(#ff5b1b, #9b422b); } .mod-button[mode="red"] { color: #e3e9e4; - --mod-button-c1: #ff595f; - --mod-button-c2: #ff121b; + --mod-button-c1: light-dark(#ff595f, #b94a50); + --mod-button-c2: light-dark(#ff121b, #95272e); } .mod-button[mode="blue"] { color: #e3e9e4; - --mod-button-c1: #6650fc; - --mod-button-c2: #4125ff; + --mod-button-c1: light-dark(#6650fc, #5d56ca); + --mod-button-c2: light-dark(#4125ff, #453aa9); } .mod-button[mode] { background: linear-gradient(180deg, var(--mod-button-c1) 0%, var(--mod-button-c2) 100%) border-box; @@ -608,7 +640,7 @@ body { background-color: transparent; &:hover { - background-color: #e3e3e6; + background-color: var(--zen-boosts-back-button-hover-background); } } @@ -635,17 +667,17 @@ body { z-index: 2; - background: #fbfbfdea; + background: var(--zen-boosts-color-picker-background); background-position: -23px -23px; backdrop-filter: saturate(2) blur(15px); background-size: 6px 6px; - background-image: radial-gradient(#e3e9e4, 1px, transparent 0); + background-image: radial-gradient(var(--zen-boosts-color-picker-pattern-color), 1px, transparent 0); @media (-moz-platform: macos) { background-size: 4px 4px; - background-image: radial-gradient(#e3e9e4 0.5px, transparent 0); + background-image: radial-gradient(var(--zen-boosts-color-picker-pattern-color) 0.5px, transparent 0); } } diff --git a/src/zen/boosts/zen-selector.css b/src/zen/boosts/zen-selector.css index 7e7cde34e..13fff3f75 100644 --- a/src/zen/boosts/zen-selector.css +++ b/src/zen/boosts/zen-selector.css @@ -16,6 +16,12 @@ } #select-component { + --zen-boosts-selector-background: light-dark(#f5f7fb, #27272a); + --zen-boosts-selector-preview-background: light-dark(#e0e2e63d, #27272a3d); + --zen-boosts-selector-preview-color: light-dark(rgb(76, 78, 80), rgb(207, 200, 200)); + --zen-boosts-selector-button-color: light-dark(#dadada, #f1f1f1); + --zen-boosts-selector-outline-color: light-dark(#e0e2e6ae, #474749); + width: min-content; font-family: system-ui; @@ -29,7 +35,7 @@ position: fixed; z-index: 9999; - background-color: #f5f7fb; + background-color: var(--zen-boosts-selector-background); margin: 4px; border-radius: 12px; @@ -126,17 +132,29 @@ width: 250px !important; --related-elements-value: 100%; - background: linear-gradient(to top, rgb(247, 66, 0), rgb(245, 134, 86)); + background: linear-gradient( + to top, + light-dark(#ff5b1b, #9b422b), + light-dark(#ff8758, #bd6048) + ); border: none; - color: #dadada; + color: var(--zen-boosts-selector-button-color); box-shadow: 0 0 15px #00000052; &:hover { box-shadow: 0 0 14px #00000066; background: - linear-gradient(to right, transparent var(--related-elements-value), gray var(--related-elements-value)), - linear-gradient(to top, rgb(247, 66, 0), rgb(245, 134, 86)); + linear-gradient( + to right, + transparent var(--related-elements-value), + light-dark(gray, #363636) var(--related-elements-value) + ), + linear-gradient( + to top, + light-dark(#ff5b1b, #9b422b), + light-dark(#ff8758, #bd6048) + ); @media not (-moz-platform: windows) { box-shadow: 0 0 20px #00000077; @@ -147,30 +165,34 @@ #select-this { appearance: none; - background: linear-gradient(0deg, rgba(246, 27, 25, 1) 0%, rgba(254, 67, 59, 1) 100%); + background: linear-gradient( + 0deg, + light-dark(#ff121b, #95272e), + light-dark(#ff595f, #b94a50) + ); border: none; - color: #dadada; + color: var(--zen-boosts-selector-button-color); box-shadow: 0 0 15px #00000052; } #select-cancel { appearance: none; - - background: rgb(90, 94, 100); - @media (-moz-platform: macos) { - background: linear-gradient(0deg, rgba(81, 83, 85, 1) 0%, rgba(108, 110, 112, 1) 100%); - } + background: linear-gradient( + 0deg, + light-dark(#525355, #373739) 0%, + light-dark(#6c6e70, #4b4c4e) 100% + ); border: none; - color: #dadada; + color: var(--zen-boosts-selector-button-color); box-shadow: 0 0 15px #00000052; } #selector-preview { - background-color: #e0e2e63d; - outline: 1px solid #e0e2e6ae; + background-color: var(--zen-boosts-selector-preview-background); + outline: 1px solid var(--zen-boosts-selector-outline-color); width: 100%; height: 34px; text-indent: 18px; @@ -182,7 +204,7 @@ #selector-element-preview-text { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; - color: rgb(76, 78, 80); + color: var(--zen-boosts-selector-preview-color); } #hover-div {