diff --git a/l10n b/l10n index 706b3333..7435b28b 160000 --- a/l10n +++ b/l10n @@ -1 +1 @@ -Subproject commit 706b33337345e4231e18313463259703b3fbc50d +Subproject commit 7435b28bdf962406f7e0ec54ed1774ede5b490a9 diff --git a/src/browser/app/profile/features/theme.inc b/src/browser/app/profile/features/theme.inc index b03c3c40..576c1bb1 100644 --- a/src/browser/app/profile/features/theme.inc +++ b/src/browser/app/profile/features/theme.inc @@ -7,6 +7,7 @@ pref('zen.theme.content-element-separation', 8); // In pixels pref('zen.theme.gradient', true); pref('zen.theme.gradient.show-custom-colors', false); pref('zen.theme.essentials-favicon-bg', true); +pref('zen.theme.window.scheme', 'auto'); // auto, light, dark #ifdef XP_MACOSX pref('zen.theme.border-radius', 10); // In pixels diff --git a/src/browser/app/profile/macos.inc b/src/browser/app/profile/macos.inc index 67c540dc..e237e401 100644 --- a/src/browser/app/profile/macos.inc +++ b/src/browser/app/profile/macos.inc @@ -11,4 +11,4 @@ pref('widget.macos.sidebar-blend-mode.behind-window', true); // 5. toolTip // 6. headerView // 7. underlay -pref('zen.widget.macos.window-material', 3); +pref('zen.widget.macos.window-material', 1); diff --git a/src/browser/base/content/zen-assets.jar.inc.mn b/src/browser/base/content/zen-assets.jar.inc.mn index c0b5488d..7e0ef36d 100644 --- a/src/browser/base/content/zen-assets.jar.inc.mn +++ b/src/browser/base/content/zen-assets.jar.inc.mn @@ -76,7 +76,6 @@ # Images - content/browser/zen-images/gradient.png (../../zen/images/gradient.png) content/browser/zen-images/brand-header.svg (../../zen/images/brand-header.svg) content/browser/zen-images/layouts/collapsed.png (../../zen/images/layouts/collapsed.png) content/browser/zen-images/layouts/multiple-toolbar.png (../../zen/images/layouts/multiple-toolbar.png) diff --git a/src/browser/base/content/zen-panels/gradient-generator.inc b/src/browser/base/content/zen-panels/gradient-generator.inc index e73cb20a..0fd734c0 100644 --- a/src/browser/base/content/zen-panels/gradient-generator.inc +++ b/src/browser/base/content/zen-panels/gradient-generator.inc @@ -5,39 +5,66 @@ - - - - - - - - - - - - - - - - - + + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + + + + + + + + + + + + + + diff --git a/src/browser/themes/shared/preferences/zen-preferences.css b/src/browser/themes/shared/preferences/zen-preferences.css index fecc4fce..5f350375 100644 --- a/src/browser/themes/shared/preferences/zen-preferences.css +++ b/src/browser/themes/shared/preferences/zen-preferences.css @@ -249,37 +249,6 @@ groupbox h2 { } } -.zenLooksAndFeelColorOption { - width: 60px; - height: 60px; - border-radius: 50%; - background: var(--zen-primary-color); - position: relative; - overflow: hidden; -} - -.zenLooksAndFeelColorOption::before { - content: ''; - display: block; - width: 50%; - height: 50%; - bottom: 0; - left: 0; - position: absolute; - background: var(--zen-colors-secondary); -} - -.zenLooksAndFeelColorOption::after { - content: ''; - display: block; - width: 50%; - height: 50%; - bottom: 0; - right: 0; - position: absolute; - background: var(--zen-colors-tertiary); -} - /* Workspace */ #category-zen-tabs-management > .category-icon { diff --git a/src/browser/themes/shared/zen-icons/icons.css b/src/browser/themes/shared/zen-icons/icons.css index af7cd472..b8df66f5 100644 --- a/src/browser/themes/shared/zen-icons/icons.css +++ b/src/browser/themes/shared/zen-icons/icons.css @@ -47,10 +47,6 @@ list-style-image: url('reload.svg') !important; } -#PanelUI-zen-gradient-generator-color-toggle-algo { - list-style-image: url('palette.svg'); -} - .tab-reset-button, #PanelUI-zen-gradient-generator-color-remove { list-style-image: url('unpin.svg') !important; @@ -101,7 +97,8 @@ list-style-image: url('chevron.svg') !important; } -#zen-rice-share-options .options-header { +#zen-rice-share-options .options-header, +#PanelUI-zen-gradient-generator-color-page-right { list-style-image: url('arrow-right.svg'); } @@ -400,7 +397,8 @@ list-style-image: url('expand-sidebar.svg') !important; } -.panel-header > .subviewbutton-back { +.panel-header > .subviewbutton-back, +#PanelUI-zen-gradient-generator-color-page-left { list-style-image: url('arrow-left.svg') !important; } @@ -768,3 +766,33 @@ background: transparent !important; } } + +#PanelUI-zen-gradient-generator-scheme-auto { + list-style-image: url('sparkles.svg'); +} + +@media -moz-pref('zen.theme.window.scheme', 'auto') { + #PanelUI-zen-gradient-generator-scheme-auto { + background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)); + } +} + +#PanelUI-zen-gradient-generator-scheme-dark { + list-style-image: url('moon-stars.svg'); +} + +@media -moz-pref('zen.theme.window.scheme', 'dark') { + #PanelUI-zen-gradient-generator-scheme-dark { + background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)); + } +} + +#PanelUI-zen-gradient-generator-scheme-light { + list-style-image: url('face-sun.svg'); +} + +@media -moz-pref('zen.theme.window.scheme', 'light') { + #PanelUI-zen-gradient-generator-scheme-light { + background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)); + } +} diff --git a/src/browser/themes/shared/zen-icons/jar.inc.mn b/src/browser/themes/shared/zen-icons/jar.inc.mn index 41218fa7..4986753b 100644 --- a/src/browser/themes/shared/zen-icons/jar.inc.mn +++ b/src/browser/themes/shared/zen-icons/jar.inc.mn @@ -35,15 +35,16 @@ skin/classic/browser/zen-icons/edit-paste.svg (../shared/zen-icons/lin/edit-paste.svg) skin/classic/browser/zen-icons/edit-redo.svg (../shared/zen-icons/lin/edit-redo.svg) skin/classic/browser/zen-icons/edit-select-all.svg (../shared/zen-icons/lin/edit-select-all.svg) - skin/classic/browser/zen-icons/edit.svg (../shared/zen-icons/lin/edit.svg) skin/classic/browser/zen-icons/edit-theme.svg (../shared/zen-icons/lin/edit-theme.svg) skin/classic/browser/zen-icons/edit-undo.svg (../shared/zen-icons/lin/edit-undo.svg) + skin/classic/browser/zen-icons/edit.svg (../shared/zen-icons/lin/edit.svg) skin/classic/browser/zen-icons/essential-add.svg (../shared/zen-icons/lin/essential-add.svg) skin/classic/browser/zen-icons/essential-remove.svg (../shared/zen-icons/lin/essential-remove.svg) skin/classic/browser/zen-icons/expand-sidebar.svg (../shared/zen-icons/lin/expand-sidebar.svg) + skin/classic/browser/zen-icons/ext-link.svg (../shared/zen-icons/lin/ext-link.svg) skin/classic/browser/zen-icons/extension-blocked.svg (../shared/zen-icons/lin/extension-blocked.svg) skin/classic/browser/zen-icons/extension.svg (../shared/zen-icons/lin/extension.svg) - skin/classic/browser/zen-icons/ext-link.svg (../shared/zen-icons/lin/ext-link.svg) + skin/classic/browser/zen-icons/face-sun.svg (../shared/zen-icons/lin/face-sun.svg) skin/classic/browser/zen-icons/firefox.svg (../shared/zen-icons/lin/firefox.svg) skin/classic/browser/zen-icons/folder.svg (../shared/zen-icons/lin/folder.svg) skin/classic/browser/zen-icons/forget.svg (../shared/zen-icons/lin/forget.svg) @@ -80,6 +81,7 @@ skin/classic/browser/zen-icons/microphone-fill.svg (../shared/zen-icons/lin/microphone-fill.svg) skin/classic/browser/zen-icons/microphone.svg (../shared/zen-icons/lin/microphone.svg) skin/classic/browser/zen-icons/midi.svg (../shared/zen-icons/lin/midi.svg) + skin/classic/browser/zen-icons/moon-stars.svg (../shared/zen-icons/lin/moon-stars.svg) skin/classic/browser/zen-icons/move-tab.svg (../shared/zen-icons/lin/move-tab.svg) skin/classic/browser/zen-icons/new-tab-image.svg (../shared/zen-icons/lin/new-tab-image.svg) skin/classic/browser/zen-icons/open.svg (../shared/zen-icons/lin/open.svg) @@ -95,27 +97,28 @@ skin/classic/browser/zen-icons/pocket-outline.svg (../shared/zen-icons/lin/pocket-outline.svg) skin/classic/browser/zen-icons/popup.svg (../shared/zen-icons/lin/popup.svg) skin/classic/browser/zen-icons/print.svg (../shared/zen-icons/lin/print.svg) - skin/classic/browser/zen-icons/privateBrowsing.svg (../shared/zen-icons/lin/privateBrowsing.svg) skin/classic/browser/zen-icons/private-window.svg (../shared/zen-icons/lin/private-window.svg) + skin/classic/browser/zen-icons/privateBrowsing.svg (../shared/zen-icons/lin/privateBrowsing.svg) skin/classic/browser/zen-icons/reader-mode.svg (../shared/zen-icons/lin/reader-mode.svg) - skin/classic/browser/zen-icons/reload.svg (../shared/zen-icons/lin/reload.svg) skin/classic/browser/zen-icons/reload-to-stop.svg (../shared/zen-icons/lin/reload-to-stop.svg) + skin/classic/browser/zen-icons/reload.svg (../shared/zen-icons/lin/reload.svg) skin/classic/browser/zen-icons/report.svg (../shared/zen-icons/lin/report.svg) skin/classic/browser/zen-icons/save.svg (../shared/zen-icons/lin/save.svg) skin/classic/browser/zen-icons/screen-blocked.svg (../shared/zen-icons/lin/screen-blocked.svg) - skin/classic/browser/zen-icons/screenshot.svg (../shared/zen-icons/lin/screenshot.svg) skin/classic/browser/zen-icons/screen.svg (../shared/zen-icons/lin/screen.svg) + skin/classic/browser/zen-icons/screenshot.svg (../shared/zen-icons/lin/screenshot.svg) skin/classic/browser/zen-icons/search-glass.svg (../shared/zen-icons/lin/search-glass.svg) skin/classic/browser/zen-icons/search-page.svg (../shared/zen-icons/lin/search-page.svg) skin/classic/browser/zen-icons/security-broken.svg (../shared/zen-icons/lin/security-broken.svg) - skin/classic/browser/zen-icons/security.svg (../shared/zen-icons/lin/security.svg) skin/classic/browser/zen-icons/security-warning.svg (../shared/zen-icons/lin/security-warning.svg) + skin/classic/browser/zen-icons/security.svg (../shared/zen-icons/lin/security.svg) skin/classic/browser/zen-icons/send-to-device.svg (../shared/zen-icons/lin/send-to-device.svg) skin/classic/browser/zen-icons/settings.svg (../shared/zen-icons/lin/settings.svg) skin/classic/browser/zen-icons/share.svg (../shared/zen-icons/lin/share.svg) - skin/classic/browser/zen-icons/sidebars-right.svg (../shared/zen-icons/lin/sidebars-right.svg) skin/classic/browser/zen-icons/sidebar.svg (../shared/zen-icons/lin/sidebar.svg) + skin/classic/browser/zen-icons/sidebars-right.svg (../shared/zen-icons/lin/sidebars-right.svg) skin/classic/browser/zen-icons/source-code.svg (../shared/zen-icons/lin/source-code.svg) + skin/classic/browser/zen-icons/sparkles.svg (../shared/zen-icons/lin/sparkles.svg) skin/classic/browser/zen-icons/spell-check.svg (../shared/zen-icons/lin/spell-check.svg) skin/classic/browser/zen-icons/split.svg (../shared/zen-icons/lin/split.svg) skin/classic/browser/zen-icons/stop-to-reload.svg (../shared/zen-icons/lin/stop-to-reload.svg) @@ -174,15 +177,16 @@ skin/classic/browser/zen-icons/edit-paste.svg (../shared/zen-icons/lin/edit-paste.svg) skin/classic/browser/zen-icons/edit-redo.svg (../shared/zen-icons/lin/edit-redo.svg) skin/classic/browser/zen-icons/edit-select-all.svg (../shared/zen-icons/lin/edit-select-all.svg) - skin/classic/browser/zen-icons/edit.svg (../shared/zen-icons/lin/edit.svg) skin/classic/browser/zen-icons/edit-theme.svg (../shared/zen-icons/lin/edit-theme.svg) skin/classic/browser/zen-icons/edit-undo.svg (../shared/zen-icons/lin/edit-undo.svg) + skin/classic/browser/zen-icons/edit.svg (../shared/zen-icons/lin/edit.svg) skin/classic/browser/zen-icons/essential-add.svg (../shared/zen-icons/lin/essential-add.svg) skin/classic/browser/zen-icons/essential-remove.svg (../shared/zen-icons/lin/essential-remove.svg) skin/classic/browser/zen-icons/expand-sidebar.svg (../shared/zen-icons/lin/expand-sidebar.svg) + skin/classic/browser/zen-icons/ext-link.svg (../shared/zen-icons/lin/ext-link.svg) skin/classic/browser/zen-icons/extension-blocked.svg (../shared/zen-icons/lin/extension-blocked.svg) skin/classic/browser/zen-icons/extension.svg (../shared/zen-icons/lin/extension.svg) - skin/classic/browser/zen-icons/ext-link.svg (../shared/zen-icons/lin/ext-link.svg) + skin/classic/browser/zen-icons/face-sun.svg (../shared/zen-icons/lin/face-sun.svg) skin/classic/browser/zen-icons/firefox.svg (../shared/zen-icons/lin/firefox.svg) skin/classic/browser/zen-icons/folder.svg (../shared/zen-icons/lin/folder.svg) skin/classic/browser/zen-icons/forget.svg (../shared/zen-icons/lin/forget.svg) @@ -219,6 +223,7 @@ skin/classic/browser/zen-icons/microphone-fill.svg (../shared/zen-icons/lin/microphone-fill.svg) skin/classic/browser/zen-icons/microphone.svg (../shared/zen-icons/lin/microphone.svg) skin/classic/browser/zen-icons/midi.svg (../shared/zen-icons/lin/midi.svg) + skin/classic/browser/zen-icons/moon-stars.svg (../shared/zen-icons/lin/moon-stars.svg) skin/classic/browser/zen-icons/move-tab.svg (../shared/zen-icons/lin/move-tab.svg) skin/classic/browser/zen-icons/new-tab-image.svg (../shared/zen-icons/lin/new-tab-image.svg) skin/classic/browser/zen-icons/open.svg (../shared/zen-icons/lin/open.svg) @@ -234,27 +239,28 @@ skin/classic/browser/zen-icons/pocket-outline.svg (../shared/zen-icons/lin/pocket-outline.svg) skin/classic/browser/zen-icons/popup.svg (../shared/zen-icons/lin/popup.svg) skin/classic/browser/zen-icons/print.svg (../shared/zen-icons/lin/print.svg) - skin/classic/browser/zen-icons/privateBrowsing.svg (../shared/zen-icons/lin/privateBrowsing.svg) skin/classic/browser/zen-icons/private-window.svg (../shared/zen-icons/lin/private-window.svg) + skin/classic/browser/zen-icons/privateBrowsing.svg (../shared/zen-icons/lin/privateBrowsing.svg) skin/classic/browser/zen-icons/reader-mode.svg (../shared/zen-icons/lin/reader-mode.svg) - skin/classic/browser/zen-icons/reload.svg (../shared/zen-icons/lin/reload.svg) skin/classic/browser/zen-icons/reload-to-stop.svg (../shared/zen-icons/lin/reload-to-stop.svg) + skin/classic/browser/zen-icons/reload.svg (../shared/zen-icons/lin/reload.svg) skin/classic/browser/zen-icons/report.svg (../shared/zen-icons/lin/report.svg) skin/classic/browser/zen-icons/save.svg (../shared/zen-icons/lin/save.svg) skin/classic/browser/zen-icons/screen-blocked.svg (../shared/zen-icons/lin/screen-blocked.svg) - skin/classic/browser/zen-icons/screenshot.svg (../shared/zen-icons/lin/screenshot.svg) skin/classic/browser/zen-icons/screen.svg (../shared/zen-icons/lin/screen.svg) + skin/classic/browser/zen-icons/screenshot.svg (../shared/zen-icons/lin/screenshot.svg) skin/classic/browser/zen-icons/search-glass.svg (../shared/zen-icons/lin/search-glass.svg) skin/classic/browser/zen-icons/search-page.svg (../shared/zen-icons/lin/search-page.svg) skin/classic/browser/zen-icons/security-broken.svg (../shared/zen-icons/lin/security-broken.svg) - skin/classic/browser/zen-icons/security.svg (../shared/zen-icons/lin/security.svg) skin/classic/browser/zen-icons/security-warning.svg (../shared/zen-icons/lin/security-warning.svg) + skin/classic/browser/zen-icons/security.svg (../shared/zen-icons/lin/security.svg) skin/classic/browser/zen-icons/send-to-device.svg (../shared/zen-icons/lin/send-to-device.svg) skin/classic/browser/zen-icons/settings.svg (../shared/zen-icons/lin/settings.svg) skin/classic/browser/zen-icons/share.svg (../shared/zen-icons/lin/share.svg) - skin/classic/browser/zen-icons/sidebars-right.svg (../shared/zen-icons/lin/sidebars-right.svg) skin/classic/browser/zen-icons/sidebar.svg (../shared/zen-icons/lin/sidebar.svg) + skin/classic/browser/zen-icons/sidebars-right.svg (../shared/zen-icons/lin/sidebars-right.svg) skin/classic/browser/zen-icons/source-code.svg (../shared/zen-icons/lin/source-code.svg) + skin/classic/browser/zen-icons/sparkles.svg (../shared/zen-icons/lin/sparkles.svg) skin/classic/browser/zen-icons/spell-check.svg (../shared/zen-icons/lin/spell-check.svg) skin/classic/browser/zen-icons/split.svg (../shared/zen-icons/lin/split.svg) skin/classic/browser/zen-icons/stop-to-reload.svg (../shared/zen-icons/lin/stop-to-reload.svg) @@ -313,15 +319,16 @@ skin/classic/browser/zen-icons/edit-paste.svg (../shared/zen-icons/lin/edit-paste.svg) skin/classic/browser/zen-icons/edit-redo.svg (../shared/zen-icons/lin/edit-redo.svg) skin/classic/browser/zen-icons/edit-select-all.svg (../shared/zen-icons/lin/edit-select-all.svg) - skin/classic/browser/zen-icons/edit.svg (../shared/zen-icons/lin/edit.svg) skin/classic/browser/zen-icons/edit-theme.svg (../shared/zen-icons/lin/edit-theme.svg) skin/classic/browser/zen-icons/edit-undo.svg (../shared/zen-icons/lin/edit-undo.svg) + skin/classic/browser/zen-icons/edit.svg (../shared/zen-icons/lin/edit.svg) skin/classic/browser/zen-icons/essential-add.svg (../shared/zen-icons/lin/essential-add.svg) skin/classic/browser/zen-icons/essential-remove.svg (../shared/zen-icons/lin/essential-remove.svg) skin/classic/browser/zen-icons/expand-sidebar.svg (../shared/zen-icons/lin/expand-sidebar.svg) + skin/classic/browser/zen-icons/ext-link.svg (../shared/zen-icons/lin/ext-link.svg) skin/classic/browser/zen-icons/extension-blocked.svg (../shared/zen-icons/lin/extension-blocked.svg) skin/classic/browser/zen-icons/extension.svg (../shared/zen-icons/lin/extension.svg) - skin/classic/browser/zen-icons/ext-link.svg (../shared/zen-icons/lin/ext-link.svg) + skin/classic/browser/zen-icons/face-sun.svg (../shared/zen-icons/lin/face-sun.svg) skin/classic/browser/zen-icons/firefox.svg (../shared/zen-icons/lin/firefox.svg) skin/classic/browser/zen-icons/folder.svg (../shared/zen-icons/lin/folder.svg) skin/classic/browser/zen-icons/forget.svg (../shared/zen-icons/lin/forget.svg) @@ -358,6 +365,7 @@ skin/classic/browser/zen-icons/microphone-fill.svg (../shared/zen-icons/lin/microphone-fill.svg) skin/classic/browser/zen-icons/microphone.svg (../shared/zen-icons/lin/microphone.svg) skin/classic/browser/zen-icons/midi.svg (../shared/zen-icons/lin/midi.svg) + skin/classic/browser/zen-icons/moon-stars.svg (../shared/zen-icons/lin/moon-stars.svg) skin/classic/browser/zen-icons/move-tab.svg (../shared/zen-icons/lin/move-tab.svg) skin/classic/browser/zen-icons/new-tab-image.svg (../shared/zen-icons/lin/new-tab-image.svg) skin/classic/browser/zen-icons/open.svg (../shared/zen-icons/lin/open.svg) @@ -373,27 +381,28 @@ skin/classic/browser/zen-icons/pocket-outline.svg (../shared/zen-icons/lin/pocket-outline.svg) skin/classic/browser/zen-icons/popup.svg (../shared/zen-icons/lin/popup.svg) skin/classic/browser/zen-icons/print.svg (../shared/zen-icons/lin/print.svg) - skin/classic/browser/zen-icons/privateBrowsing.svg (../shared/zen-icons/lin/privateBrowsing.svg) skin/classic/browser/zen-icons/private-window.svg (../shared/zen-icons/lin/private-window.svg) + skin/classic/browser/zen-icons/privateBrowsing.svg (../shared/zen-icons/lin/privateBrowsing.svg) skin/classic/browser/zen-icons/reader-mode.svg (../shared/zen-icons/lin/reader-mode.svg) - skin/classic/browser/zen-icons/reload.svg (../shared/zen-icons/lin/reload.svg) skin/classic/browser/zen-icons/reload-to-stop.svg (../shared/zen-icons/lin/reload-to-stop.svg) + skin/classic/browser/zen-icons/reload.svg (../shared/zen-icons/lin/reload.svg) skin/classic/browser/zen-icons/report.svg (../shared/zen-icons/lin/report.svg) skin/classic/browser/zen-icons/save.svg (../shared/zen-icons/lin/save.svg) skin/classic/browser/zen-icons/screen-blocked.svg (../shared/zen-icons/lin/screen-blocked.svg) - skin/classic/browser/zen-icons/screenshot.svg (../shared/zen-icons/lin/screenshot.svg) skin/classic/browser/zen-icons/screen.svg (../shared/zen-icons/lin/screen.svg) + skin/classic/browser/zen-icons/screenshot.svg (../shared/zen-icons/lin/screenshot.svg) skin/classic/browser/zen-icons/search-glass.svg (../shared/zen-icons/lin/search-glass.svg) skin/classic/browser/zen-icons/search-page.svg (../shared/zen-icons/lin/search-page.svg) skin/classic/browser/zen-icons/security-broken.svg (../shared/zen-icons/lin/security-broken.svg) - skin/classic/browser/zen-icons/security.svg (../shared/zen-icons/lin/security.svg) skin/classic/browser/zen-icons/security-warning.svg (../shared/zen-icons/lin/security-warning.svg) + skin/classic/browser/zen-icons/security.svg (../shared/zen-icons/lin/security.svg) skin/classic/browser/zen-icons/send-to-device.svg (../shared/zen-icons/lin/send-to-device.svg) skin/classic/browser/zen-icons/settings.svg (../shared/zen-icons/lin/settings.svg) skin/classic/browser/zen-icons/share.svg (../shared/zen-icons/lin/share.svg) - skin/classic/browser/zen-icons/sidebars-right.svg (../shared/zen-icons/lin/sidebars-right.svg) skin/classic/browser/zen-icons/sidebar.svg (../shared/zen-icons/lin/sidebar.svg) + skin/classic/browser/zen-icons/sidebars-right.svg (../shared/zen-icons/lin/sidebars-right.svg) skin/classic/browser/zen-icons/source-code.svg (../shared/zen-icons/lin/source-code.svg) + skin/classic/browser/zen-icons/sparkles.svg (../shared/zen-icons/lin/sparkles.svg) skin/classic/browser/zen-icons/spell-check.svg (../shared/zen-icons/lin/spell-check.svg) skin/classic/browser/zen-icons/split.svg (../shared/zen-icons/lin/split.svg) skin/classic/browser/zen-icons/stop-to-reload.svg (../shared/zen-icons/lin/stop-to-reload.svg) diff --git a/src/browser/themes/shared/zen-icons/lin/face-sun.svg b/src/browser/themes/shared/zen-icons/lin/face-sun.svg new file mode 100644 index 00000000..20461bcf --- /dev/null +++ b/src/browser/themes/shared/zen-icons/lin/face-sun.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/browser/themes/shared/zen-icons/lin/moon-stars.svg b/src/browser/themes/shared/zen-icons/lin/moon-stars.svg new file mode 100644 index 00000000..7e3698dc --- /dev/null +++ b/src/browser/themes/shared/zen-icons/lin/moon-stars.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/browser/themes/shared/zen-icons/lin/sparkles.svg b/src/browser/themes/shared/zen-icons/lin/sparkles.svg new file mode 100644 index 00000000..9c0828bd --- /dev/null +++ b/src/browser/themes/shared/zen-icons/lin/sparkles.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/dom/base/Document-cpp.patch b/src/dom/base/Document-cpp.patch index 04aa8afd..c324fda3 100644 --- a/src/dom/base/Document-cpp.patch +++ b/src/dom/base/Document-cpp.patch @@ -1,13 +1,13 @@ diff --git a/dom/base/Document.cpp b/dom/base/Document.cpp -index a16bef739fcde0f14ba7e53e0acfa3aa2ee1dd3a..78b9d112a56b3d909e31eb4351ee9f3b06c4ef92 100644 +index a16bef739fcde0f14ba7e53e0acfa3aa2ee1dd3a..f928c0f1df4e86bd344ab7e57dab112234fb92e8 100644 --- a/dom/base/Document.cpp +++ b/dom/base/Document.cpp @@ -3332,6 +3332,15 @@ void Document::FillStyleSetUserAndUASheets() { ServoStyleSet& styleSet = EnsureStyleSet(); for (StyleSheet* sheet : *sheetService->UserStyleSheets()) { -+ // If the url starts with "chrome://" and ends with 'zen-themes.css', then -+ // skip it if the document is in a chrome docshell. ++ // If the url starts with "file://" and ends with 'zen-themes.css', then ++ // skip it if the document is not in a chrome docshell. + // This is to avoid loading the user chrome stylesheet in the content + // process, which is not allowed. + auto spec = sheet->GetSheetURI()->GetSpecOrDefault(); diff --git a/src/widget/cocoa/nsCocoaWindow-mm.patch b/src/widget/cocoa/nsCocoaWindow-mm.patch new file mode 100644 index 00000000..ce10d5cd --- /dev/null +++ b/src/widget/cocoa/nsCocoaWindow-mm.patch @@ -0,0 +1,13 @@ +diff --git a/widget/cocoa/nsCocoaWindow.mm b/widget/cocoa/nsCocoaWindow.mm +index c4627621344d35081f11a7b0e03d02eca2097609..d2e5fe429aaac8b701a03380a67f4ea978d566b3 100644 +--- a/widget/cocoa/nsCocoaWindow.mm ++++ b/widget/cocoa/nsCocoaWindow.mm +@@ -7376,7 +7376,7 @@ - (id)initWithContentRect:(NSRect)aContentRect + + // Returns an autoreleased NSImage. + static NSImage* GetMenuMaskImage() { +- const CGFloat radius = 6.0f; ++ const CGFloat radius = 14.0f; + const NSSize maskSize = {radius * 3.0f, radius * 3.0f}; + NSImage* maskImage = [NSImage imageWithSize:maskSize + flipped:FALSE diff --git a/src/zen/common/styles/zen-browser-container.css b/src/zen/common/styles/zen-browser-container.css index 933bc985..abf632bd 100644 --- a/src/zen/common/styles/zen-browser-container.css +++ b/src/zen/common/styles/zen-browser-container.css @@ -17,7 +17,7 @@ } & browser[transparent='true'] { - background: rgba(255, 255, 255, 0.1); + background: light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)); } } } diff --git a/src/zen/common/styles/zen-browser-ui.css b/src/zen/common/styles/zen-browser-ui.css index a8bdeda1..30fdd4b0 100644 --- a/src/zen/common/styles/zen-browser-ui.css +++ b/src/zen/common/styles/zen-browser-ui.css @@ -46,6 +46,8 @@ pointer-events: none; isolation: isolate; + background: var(--zen-themed-toolbar-bg-transparent); + transition: background-color var(--inactive-window-transition); &::after, &::before { @@ -100,7 +102,7 @@ border: none; } -@supports (-moz-osx-font-smoothing: auto) { +@media (-moz-platform: macos) { #zen-main-app-wrapper, #zen-appcontent-wrapper, #zen-sidebar-splitter { @@ -118,7 +120,7 @@ } #zen-main-app-wrapper { - background: var(--zen-themed-toolbar-bg-transparent); + background: transparent; /* See bug #8814, don't an overflow here as it causes issues * with firefox's rendering of the tab bar */ diff --git a/src/zen/common/styles/zen-popup.css b/src/zen/common/styles/zen-popup.css index 774f5e4c..35b51684 100644 --- a/src/zen/common/styles/zen-popup.css +++ b/src/zen/common/styles/zen-popup.css @@ -394,7 +394,6 @@ menuseparator { } & button { - color-scheme: dark; width: min-content; padding: 0 10px !important; min-width: unset !important; @@ -402,6 +401,7 @@ menuseparator { border-radius: calc(var(--zen-native-inner-radius) + 2px) !important; background: light-dark(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)) !important; border: 1px solid light-dark(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.15)) !important; + color: var(--toolbar-color); :root[zen-right-side='true'] & { order: -1; diff --git a/src/zen/common/styles/zen-theme.css b/src/zen/common/styles/zen-theme.css index e3a226fc..bc2970f0 100644 --- a/src/zen/common/styles/zen-theme.css +++ b/src/zen/common/styles/zen-theme.css @@ -9,12 +9,7 @@ */ :host(:is(.anonymous-content-host, notification-message)), -:root, -.zenLooksAndFeelColorOption { - /** We also add `.zenLooksAndFeelColorOption` so that it recalculates the colors when the theme changes - * in the preferences page. - */ - +:root { /* Default values */ --zen-border-radius: 7px; --zen-primary-color: #ffb787; @@ -92,7 +87,7 @@ --focus-outline-color: var(--button-bgcolor) !important; --toolbarbutton-icon-fill-attention: var(--zen-primary-color) !important; - --toolbarbutton-icon-fill: light-dark(rgba(57, 57, 58, 0.6), rgba(251, 251, 254, 0.6)) !important; + --toolbarbutton-icon-fill: currentColor !important; --button-primary-bgcolor: var(--in-content-primary-button-background) !important; --button-primary-hover-bgcolor: var(--in-content-primary-button-background-hover) !important; @@ -121,7 +116,10 @@ --zen-button-border-radius: 5px; --zen-button-padding: 0.6rem 1.2rem; - --zen-toolbar-element-bg: light-dark(rgba(89, 89, 89, 0.1), rgba(255, 255, 255, 0.1)); + --zen-toolbar-element-bg: light-dark( + color-mix(in srgb, currentColor 5%, transparent 5%), + color-mix(in srgb, currentColor 10%, transparent 90%) + ) !important; /* Toolbar */ --zen-toolbar-height: 38px; @@ -162,27 +160,11 @@ --input-bgcolor: var(--zen-colors-tertiary) !important; --input-border-color: var(--zen-input-border-color) !important; - --zen-themed-toolbar-bg: light-dark(rgb(240, 240, 244), #171717); --zen-themed-toolbar-bg-transparent: light-dark(var(--zen-branding-bg), #171717); --zen-workspace-indicator-height: 48px; - @media (-moz-windows-mica) or (-moz-platform: macos) { - background: transparent; - --zen-themed-toolbar-bg-transparent: transparent; - @media -moz-pref('widget.windows.mica.toplevel-backdrop', 2) { - --zen-themed-toolbar-bg-transparent: color-mix( - in srgb, - var(--zen-themed-toolbar-bg) 35%, - transparent 65% - ); - } - } - - @media (-moz-platform: linux) and -moz-pref('zen.widget.linux.transparency') { - background: transparent; - --zen-themed-toolbar-bg-transparent: transparent; - } + --toolbar-field-color: var(--toolbox-textcolor) !important; &[zen-private-window='true'] { --zen-main-browser-background: linear-gradient( @@ -239,6 +221,52 @@ #main-window:not([chromehidden~='toolbar']) { min-height: 495px !important; + + @media (-moz-windows-mica) or (-moz-platform: macos) { + background: transparent; + --zen-themed-toolbar-bg-transparent: transparent; + &[zen-should-be-dark-mode] { + --zen-themed-toolbar-bg-transparent: var(--zen-themed-browser-overlay-bg); + } + } + + @media (-moz-platform: linux) and -moz-pref('zen.widget.linux.transparency') { + background: transparent; + --zen-themed-toolbar-bg-transparent: transparent; + &[zen-should-be-dark-mode] { + --zen-themed-toolbar-bg-transparent: var(--zen-themed-browser-overlay-bg); + } + } + + &[zen-should-be-dark-mode='true'] #browser { + color-scheme: dark; + --tab-selected-color-scheme: dark; + } + + &[zen-should-be-dark-mode='false'] #browser { + color-scheme: light; + --tab-selected-color-scheme: light; + } + + &, + & #tabbrowser-tabpanels, + & panel, + & menupopup { + @media -moz-pref('zen.theme.window.scheme', 'dark') { + color-scheme: dark; + } + + @media -moz-pref('zen.theme.window.scheme', 'light') { + color-scheme: light; + } + + @media -moz-pref('zen.theme.window.scheme', 'auto') { + color-scheme: light; + @media (-moz-system-dark-theme) { + color-scheme: dark; + } + } + } } @media (prefers-color-scheme: dark) { diff --git a/src/zen/images/gradient.png b/src/zen/images/gradient.png deleted file mode 100644 index b65f34ae..00000000 Binary files a/src/zen/images/gradient.png and /dev/null differ diff --git a/src/zen/mods/ZenMods.mjs b/src/zen/mods/ZenMods.mjs index aebaf0a3..92fafd59 100644 --- a/src/zen/mods/ZenMods.mjs +++ b/src/zen/mods/ZenMods.mjs @@ -49,7 +49,11 @@ } async #insertStylesheet() { - this.#modsBackend.rebuildModsStyles(); + try { + this.#modsBackend.rebuildModsStyles(); + } catch (e) { + console.warn('[ZenMods]: Error rebuilding mods styles:', e); + } } async #rebuildModsStylesheet() { diff --git a/src/zen/workspaces/ZenGradientGenerator.mjs b/src/zen/workspaces/ZenGradientGenerator.mjs index 8143250c..68a3619d 100644 --- a/src/zen/workspaces/ZenGradientGenerator.mjs +++ b/src/zen/workspaces/ZenGradientGenerator.mjs @@ -3,17 +3,60 @@ // file, You can obtain one at http://mozilla.org/MPL/2.0/. { - class ZenThemePicker extends ZenMultiWindowFeature { - static GRADIENT_IMAGE_URL = 'chrome://browser/content/zen-images/gradient.png'; + function parseSinePath(pathStr) { + const points = []; + const commands = pathStr.match(/[MCL]\s*[\d\s\.\-,]+/g); + if (!commands) return points; + + commands.forEach((command) => { + const type = command.charAt(0); + const coordsStr = command.slice(1).trim(); + const coords = coordsStr.split(/[\s,]+/).map(Number); + + switch (type) { + case 'M': + points.push({ x: coords[0], y: coords[1], type: 'M' }); + break; + case 'C': + if (coords.length >= 6 && coords.length % 6 === 0) { + for (let i = 0; i < coords.length; i += 6) { + points.push({ + x1: coords[i], + y1: coords[i + 1], + x2: coords[i + 2], + y2: coords[i + 3], + x: coords[i + 4], + y: coords[i + 5], + type: 'C', + }); + } + } + break; + case 'L': + points.push({ x: coords[0], y: coords[1], type: 'L' }); + break; + } + }); + return points; + } + + class nsZenThemePicker extends ZenMultiWindowFeature { static MAX_DOTS = 3; currentOpacity = 0.5; - currentRotation = -45; dots = []; useAlgo = ''; + #currentLightness = 50; #allowTransparencyOnSidebar = Services.prefs.getBoolPref('zen.theme.acrylic-elements', false); + #linePath = `M 51.373 27.395 L 367.037 27.395`; + #sinePath = `M 51.373 27.395 C 60.14 -8.503 68.906 -8.503 77.671 27.395 C 86.438 63.293 95.205 63.293 103.971 27.395 C 112.738 -8.503 121.504 -8.503 130.271 27.395 C 139.037 63.293 147.803 63.293 156.57 27.395 C 165.335 -8.503 174.101 -8.503 182.868 27.395 C 191.634 63.293 200.4 63.293 209.167 27.395 C 217.933 -8.503 226.7 -8.503 235.467 27.395 C 244.233 63.293 252.999 63.293 261.765 27.395 C 270.531 -8.503 279.297 -8.503 288.064 27.395 C 296.83 63.293 305.596 63.293 314.363 27.395 C 323.13 -8.503 331.896 -8.503 340.662 27.395 M 314.438 27.395 C 323.204 -8.503 331.97 -8.503 340.737 27.395 C 349.503 63.293 358.27 63.293 367.037 27.395`; + + #sinePoints = parseSinePath(this.#sinePath); + + #colorPage = 0; + constructor() { super(); if ( @@ -39,6 +82,10 @@ document.getElementById('PanelUI-zen-gradient-generator-custom-list') ); + ChromeUtils.defineLazyGetter(this, 'sliderWavePath', () => + document.getElementById('PanelUI-zen-gradient-slider-wave').querySelector('path') + ); + this.panel.addEventListener('popupshowing', this.handlePanelOpen.bind(this)); this.panel.addEventListener('popuphidden', this.handlePanelClose.bind(this)); this.panel.addEventListener('command', this.handlePanelCommand.bind(this)); @@ -47,23 +94,53 @@ .getElementById('PanelUI-zen-gradient-generator-opacity') .addEventListener('input', this.onOpacityChange.bind(this)); - this.initCanvas(); + // Call the rest of the initialization + this.initContextMenu(); + this.initPredefinedColors(); + + this._resolveInitialized(); + delete this._resolveInitialized; + this.initCustomColorInput(); this.initTextureInput(); - this.initRotationInput(); + this.initSchemeButtons(); + this.initColorPages(); - window - .matchMedia('(prefers-color-scheme: dark)') - .addListener(this.onDarkModeChange.bind(this)); + const darkModeChange = this.handleDarkModeChange.bind(this); + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', darkModeChange); + + XPCOMUtils.defineLazyPreferenceGetter( + this, + 'windowSchemeType', + 'zen.theme.window.scheme', + true, + darkModeChange + ); + } + + handleDarkModeChange(event) { + this.updateCurrentWorkspace(); } get isDarkMode() { + switch (this.windowSchemeType) { + case 'dark': + return true; + case 'light': + return false; + default: + } return window.matchMedia('(prefers-color-scheme: dark)').matches; } - async onDarkModeChange(event, skipUpdate = false) { - const currentWorkspace = await gZenWorkspaces.getActiveWorkspace(); - this.onWorkspaceChange(currentWorkspace, skipUpdate); + get colorHarmonies() { + return [ + { type: 'complementary', angles: [180] }, + { type: 'splitComplementary', angles: [150, 210] }, + { type: 'analogous', angles: [50, 310] }, + { type: 'triadic', angles: [120, 240] }, + { type: 'floating', angles: [] }, + ]; } initContextMenu() { @@ -86,43 +163,9 @@ }); } - initCanvas() { - this.image = new Image(); - this.image.src = ZenThemePicker.GRADIENT_IMAGE_URL; - - this.canvas = document.createElement('canvas'); - this.panel.appendChild(this.canvas); - this.canvasCtx = this.canvas.getContext('2d'); - - // wait for the image to load - this.image.onload = this.onImageLoad.bind(this); - } - - onImageLoad() { - // resize the image to fit the panel - const imageSize = 350 - 20; // 20 is the padding (10px) - const scale = imageSize / Math.max(this.image.width, this.image.height); - this.image.width *= scale; - this.image.height *= scale; - - this.canvas.width = this.image.width; - this.canvas.height = this.image.height; - this.canvasCtx.drawImage(this.image, 0, 0); - - this.canvas.setAttribute('hidden', 'true'); - - // Call the rest of the initialization - this.initContextMenu(); - this.initPredefinedColors(); - - this._resolveInitialized(); - delete this._resolveInitialized; - this.onDarkModeChange(null); - } - initPredefinedColors() { document - .getElementById('PanelUI-zen-gradient-generator-predefined') + .getElementById('PanelUI-zen-gradient-generator-color-pages') .addEventListener('click', async (event) => { const target = event.target; const rawPosition = target.getAttribute('data-position'); @@ -130,6 +173,7 @@ return; } const algo = target.getAttribute('data-algo'); + const lightness = target.getAttribute('data-lightness'); const numDots = parseInt(target.getAttribute('data-num-dots')); if (algo == 'float') { for (const dot of this.dots) { @@ -157,6 +201,7 @@ }); } this.useAlgo = algo; + this.#currentLightness = lightness; dots = this.calculateCompliments(dots, 'update', this.useAlgo); if (algo == 'float') { for (const dot of dots) { @@ -173,49 +218,52 @@ this.customColorInput.addEventListener('keydown', this.onCustomColorKeydown.bind(this)); } - initRotationInput() { - const rotationInput = document.getElementById('PanelUI-zen-gradient-generator-rotation-dot'); - this._onRotationMouseDown = this.onRotationMouseDown.bind(this); - this._onRotationMouseMove = this.onRotationMouseMove.bind(this); - this._onRotationMouseUp = this.onRotationMouseUp.bind(this); - rotationInput.addEventListener('mousedown', this._onRotationMouseDown); - } - - onRotationMouseDown(event) { - event.preventDefault(); - event.stopPropagation(); - this._rotating = true; - document.addEventListener('mousemove', this._onRotationMouseMove); - document.addEventListener('mouseup', this._onRotationMouseUp); - } - - onRotationMouseMove(event) { - event.preventDefault(); - event.stopPropagation(); - const rotationInput = document.getElementById('PanelUI-zen-gradient-generator-rotation-dot'); - const containerRect = rotationInput.parentElement.getBoundingClientRect(); - // We calculate the angle based on the mouse position and the center of the container - const rotation = Math.atan2( - event.clientY - containerRect.top - containerRect.height / 2, - event.clientX - containerRect.left - containerRect.width / 2 + initColorPages() { + const leftButton = document.getElementById('PanelUI-zen-gradient-generator-color-page-left'); + const rightButton = document.getElementById( + 'PanelUI-zen-gradient-generator-color-page-right' ); - const endRotation = (rotation * 180) / Math.PI; - // Between 150 and 50, we don't update the rotation - if (!(endRotation < 45 || endRotation > 130)) { - return; - } - this.currentRotation = endRotation; - this.updateCurrentWorkspace(); + const pagesWrapper = document.getElementById('PanelUI-zen-gradient-generator-color-pages'); + const pages = pagesWrapper.children; + pagesWrapper.addEventListener('wheel', (event) => { + event.preventDefault(); + event.stopPropagation(); + }); + leftButton.addEventListener('command', () => { + this.#colorPage = (this.#colorPage - 1 + pages.length) % pages.length; + // Scroll to the next page, by using scrollLeft + pagesWrapper.scrollLeft = (this.#colorPage * pagesWrapper.scrollWidth) / pages.length; + rightButton.disabled = false; + leftButton.disabled = this.#colorPage === 0; + }); + rightButton.addEventListener('command', () => { + this.#colorPage = (this.#colorPage + 1) % pages.length; + // Scroll to the next page, by using scrollLeft + pagesWrapper.scrollLeft = (this.#colorPage * pagesWrapper.scrollWidth) / pages.length; + leftButton.disabled = false; + rightButton.disabled = this.#colorPage === pages.length - 1; + }); } - onRotationMouseUp(event) { - event.preventDefault(); - event.stopPropagation(); - document.removeEventListener('mousemove', this._onRotationMouseMove); - document.removeEventListener('mouseup', this._onRotationMouseUp); - setTimeout(() => { - this._rotating = false; - }, 100); + initSchemeButtons() { + const buttons = document.getElementById('PanelUI-zen-gradient-generator-scheme'); + buttons.addEventListener('click', (event) => { + const target = event.target.closest('.subviewbutton'); + if (!target) { + return; + } + event.preventDefault(); + event.stopPropagation(); + const scheme = target.id.replace('PanelUI-zen-gradient-generator-scheme-', ''); + if (!scheme) { + return; + } + if (this.currentScheme === scheme) { + return; + } + this.currentScheme = scheme; + Services.prefs.setStringPref('zen.theme.window.scheme', scheme); + }); } initTextureInput() { @@ -312,39 +360,110 @@ this._onThemePickerClick = null; } - calculateInitialPosition(color) { - const [r, g, b] = color.c; - const imageData = this.canvasCtx.getImageData(0, 0, this.canvas.width, this.canvas.height); - // Find all pixels that are at least 90% similar to the color - const similarPixels = []; - for (let i = 0; i < imageData.data.length; i += 4) { - const pixelR = imageData.data[i]; - const pixelG = imageData.data[i + 1]; - const pixelB = imageData.data[i + 2]; - if (Math.abs(r - pixelR) < 25 && Math.abs(g - pixelG) < 25 && Math.abs(b - pixelB) < 25) { - similarPixels.push(i); - } + /** + * Converts an HSL color value to RGB. Conversion formula + * adapted from https://en.wikipedia.org/wiki/HSL_color_space. + * Assumes h, s, and l are contained in the set [0, 1] and + * returns r, g, and b in the set [0, 255]. + * + * @param {number} h The hue + * @param {number} s The saturation + * @param {number} l The lightness + * @return {Array} The RGB representation + */ + hslToRgb(h, s, l) { + const { abs, min, max, round } = Math; + let r, g, b; + + if (s === 0) { + r = g = b = l; // achromatic + } else { + const q = l < 0.5 ? l * (1 + s) : l + s - l * s; + const p = 2 * l - q; + r = this.hueToRgb(p, q, h + 1 / 3); + g = this.hueToRgb(p, q, h); + b = this.hueToRgb(p, q, h - 1 / 3); } - // Check if there's an exact match - for (const pixel of similarPixels) { - const x = (pixel / 4) % this.canvas.width; - const y = Math.floor(pixel / 4 / this.canvas.width); - const pixelColor = this.getColorFromPosition(x, y); - if (pixelColor[0] === r && pixelColor[1] === g && pixelColor[2] === b) { - return { x: x / this.canvas.width, y: y / this.canvas.height }; - } - } - // If there's no exact match, return the first similar pixel - const pixel = similarPixels[0]; - const x = (pixel / 4) % this.canvas.width; - const y = Math.floor(pixel / 4 / this.canvas.width); - return { x: x / this.canvas.width, y: y / this.canvas.height }; + + return [round(r * 255), round(g * 255), round(b * 255)]; + } + + rgbToHsl(r, g, b) { + r /= 255; + g /= 255; + b /= 255; + let max = Math.max(r, g, b); + let min = Math.min(r, g, b); + let d = max - min; + let h; + if (d === 0) h = 0; + else if (max === r) h = ((g - b) / d) % 6; + else if (max === g) h = (b - r) / d + 2; + else if (max === b) h = (r - g) / d + 4; + let l = (min + max) / 2; + let s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1)); + return [h * 60, s, l]; + } + + hueToRgb(p, q, t) { + if (t < 0) t += 1; + if (t > 1) t -= 1; + if (t < 1 / 6) return p + (q - p) * 6 * t; + if (t < 1 / 2) return q; + if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; + return p; + } + + calculateInitialPosition([r, g, b]) { + // This function is called before the picker is even rendered, so we hard code the dimensions + // important: If any sort of sizing is changed, make sure changes are reflected here + const padding = 20; + const rect = { + width: 318, + height: 318, + }; + const centerX = rect.width / 2; + const centerY = rect.height / 2; + const radius = (rect.width - padding) / 2; + const [hue, saturation] = this.rgbToHsl(r, g, b); + const angle = (hue / 360) * 2 * Math.PI; // Convert to radians + const normalizedSaturation = saturation / 100; // Convert to [0, 1] + const x = centerX + radius * normalizedSaturation * Math.cos(angle) - padding; + const y = centerY + radius * normalizedSaturation * Math.sin(angle) - padding; + return { x, y }; } getColorFromPosition(x, y) { - // get the color from the x and y from the image - const imageData = this.canvasCtx.getImageData(x, y, 1, 1); - return imageData.data; + // Return a color as hsl based on the position in the gradient + const gradient = this.panel.querySelector('.zen-theme-picker-gradient'); + const rect = gradient.getBoundingClientRect(); + const padding = 20; // each side + rect.width += padding * 2; + rect.height += padding * 2; + const centerX = rect.width / 2; + const centerY = rect.height / 2; + const radius = (rect.width - padding) / 2; + const distance = Math.sqrt((x - centerX) ** 2 + (y - centerY) ** 2); + let angle = Math.atan2(y - centerY, x - centerX); + angle = (angle * 180) / Math.PI; // Convert to degrees + if (angle < 0) { + angle += 360; // Normalize to [0, 360) + } + const normalizedDistance = 1 - Math.min(distance / radius, 1); // Normalize distance to [0, 1] + const hue = (angle / 360) * 360; // Normalize angle to [0, 360) + const saturation = normalizedDistance * 100; // Scale distance to [0, 100] + const lightness = this.#currentLightness; // Fixed lightness for simplicity + const [r, g, b] = this.hslToRgb(hue / 360, saturation / 100, lightness / 100); + return [ + Math.min(255, Math.max(0, r)), + Math.min(255, Math.max(0, g)), + Math.min(255, Math.max(0, b)), + ]; + } + + getJSONPos(x, y) { + // Return a JSON string with the position + return JSON.stringify({ x: Math.round(x), y: Math.round(y) }); } createDot(color, fromWorkspace = false) { @@ -361,13 +480,13 @@ dot.style.opacity = 0; dot.style.setProperty('--zen-theme-picker-dot-color', color.c); } else { - const { x, y } = this.calculateInitialPosition(color); + const { x, y } = color.position || this.calculateInitialPosition([r, g, b]); const dotPad = this.panel.querySelector('.zen-theme-picker-gradient'); dot.classList.add('zen-theme-picker-dot'); - dot.style.left = `${x * 100}%`; - dot.style.top = `${y * 100}%`; + dot.style.left = `${x}px`; + dot.style.top = `${y}px`; if (this.dots.length < 1) { dot.classList.add('primary'); @@ -377,6 +496,7 @@ let id = this.dots.length; dot.style.setProperty('--zen-theme-picker-dot-color', `rgb(${r}, ${g}, ${b})`); + dot.setAttribute('data-position', this.getJSONPos(x, y)); this.dots.push({ ID: id, @@ -474,6 +594,7 @@ '--zen-theme-picker-dot-color', `rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})` ); + dot.setAttribute('data-position', this.getJSONPos(relativePosition.x, relativePosition.y)); this.dots.push({ ID: id, @@ -483,13 +604,7 @@ } calculateCompliments(dots, action = 'update', useHarmony = '') { - const colorHarmonies = [ - { type: 'complementary', angles: [180] }, - { type: 'splitComplementary', angles: [150, 210] }, - { type: 'analogous', angles: [30, 330] }, - { type: 'triadic', angles: [120, 240] }, - { type: 'floating', angles: [] }, - ]; + const colorHarmonies = this.colorHarmonies; if (dots.length === 0) { return []; @@ -614,6 +729,8 @@ '--zen-theme-picker-dot-color', `rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})` ); + + dot.element.setAttribute('data-position', this.getJSONPos(pixelX, pixelY)); }); return; @@ -630,6 +747,10 @@ '--zen-theme-picker-dot-color', `rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})` ); + existingPrimaryDot.element.setAttribute( + 'data-position', + this.getJSONPos(existingPrimaryDot.position.x, existingPrimaryDot.position.y) + ); } colorPositions.forEach((dotPosition) => { @@ -645,6 +766,10 @@ '--zen-theme-picker-dot-color', `rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})` ); + existingDot.element.setAttribute( + 'data-position', + this.getJSONPos(dotPosition.position.x, dotPosition.position.y) + ); if (!this.dragging) { gZenUIManager.motion.animate( @@ -673,10 +798,13 @@ if (this._rotating) { return; } + if (event.target.closest('#PanelUI-zen-gradient-generator-scheme')) { + return; + } event.preventDefault(); const target = event.target; if (target.id === 'PanelUI-zen-gradient-generator-color-add') { - if (this.dots.length >= ZenThemePicker.MAX_DOTS) return; + if (this.dots.length >= nsZenThemePicker.MAX_DOTS) return; let colorPositions = this.calculateCompliments(this.dots, 'add', this.useAlgo); this.handleColorPositions(colorPositions); @@ -702,30 +830,6 @@ this.handleColorPositions(colorPositions); this.updateCurrentWorkspace(); return; - } else if (target.id === 'PanelUI-zen-gradient-generator-color-toggle-algo') { - const colorHarmonies = [ - { type: 'complementary', angles: [180] }, - { type: 'splitComplementary', angles: [150, 210] }, - { type: 'analogous', angles: [30, 330] }, - { type: 'triadic', angles: [120, 240] }, - { type: 'floating', angles: [] }, - ]; - - const applicableHarmonies = colorHarmonies.filter( - (harmony) => harmony.angles.length + 1 === this.dots.length || harmony.type === 'floating' - ); - - let currentIndex = applicableHarmonies.findIndex( - (harmony) => harmony.type === this.useAlgo - ); - - let nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % applicableHarmonies.length; - this.useAlgo = applicableHarmonies[nextIndex].type; - - let colorPositions = this.calculateCompliments(this.dots, 'update', this.useAlgo); - this.handleColorPositions(colorPositions); - this.updateCurrentWorkspace(); - return; } if (event.button !== 0 || this.dragging || this.recentlyDragged) return; @@ -905,76 +1009,164 @@ } themedColors(colors) { - const isDarkMode = this.isDarkMode; - const factor = isDarkMode ? 0.5 : 1.1; - return colors.map((color) => ({ c: color.isCustom ? color.c - : [ - Math.min(255, color.c[0] * factor), - Math.min(255, color.c[1] * factor), - Math.min(255, color.c[2] * factor), - ], + : [Math.min(255, color.c[0]), Math.min(255, color.c[1]), Math.min(255, color.c[2])], isCustom: color.isCustom, algorithm: color.algorithm, + lightness: color.lightness, + position: color.position, })); } onOpacityChange(event) { - this.currentOpacity = event.target.value; + this.currentOpacity = parseFloat(event.target.value); + // If we reached a whole number (e.g., 0.1, 0.2, etc.), send a haptic feedback + if ((this.currentOpacity * 10) % 1 === 0) { + Services.zen.playHapticFeedback(); + } this.updateCurrentWorkspace(); } - getToolbarModifiedBase() { + getToolbarModifiedBaseRaw() { const opacity = this.#allowTransparencyOnSidebar ? 0.6 : 1; - return this.isDarkMode - ? `color-mix(in srgb, var(--zen-themed-toolbar-bg) 96%, rgba(255,255,255,${opacity}) 4%)` - : `color-mix(in srgb, var(--zen-themed-toolbar-bg) 96%, rgba(0,0,0,${opacity}) 4%)`; + return this.isDarkMode ? [23, 23, 26, opacity] : [240, 240, 244, opacity]; + } + + getToolbarModifiedBase() { + const baseColor = this.getToolbarModifiedBaseRaw(); + return `rgba(${baseColor[0]}, ${baseColor[1]}, ${baseColor[2]}, ${baseColor[3]})`; + } + + get canBeTransparent() { + return window.matchMedia( + '(-moz-windows-mica) or (-moz-platform: macos) or ((-moz-platform: linux) and -moz-pref("zen.widget.linux.transparency"))' + ).matches; } getSingleRGBColor(color, forToolbar = false) { if (color.isCustom) { return color.c; } + const opacity = this.currentOpacity; if (forToolbar) { const toolbarBg = this.getToolbarModifiedBase(); - return `color-mix(in srgb, rgb(${color.c[0]}, ${color.c[1]}, ${color.c[2]}) ${this.currentOpacity * 100}%, ${toolbarBg} ${(1 - this.currentOpacity) * 100}%)`; + return `color-mix(in srgb, rgb(${color.c[0]}, ${color.c[1]}, ${color.c[2]}) ${opacity * 100}%, ${toolbarBg} ${(1 - opacity) * 100}%)`; } - return `rgba(${color.c[0]}, ${color.c[1]}, ${color.c[2]}, ${this.currentOpacity})`; + return `rgba(${color.c[0]}, ${color.c[1]}, ${color.c[2]}, ${opacity})`; + } + + luminance([r, g, b]) { + const a = [r, g, b].map((v) => { + v /= 255; + return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); + }); + return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722; + } + + contrastRatio(rgb1, rgb2) { + const lum1 = this.luminance(rgb1); + const lum2 = this.luminance(rgb2); + const brightest = Math.max(lum1, lum2); + const darkest = Math.min(lum1, lum2); + return (brightest + 0.05) / (darkest + 0.05); + } + + blendColorsRaw(rgb1, rgb2, percentage) { + const p = percentage / 100; + return [ + Math.round(rgb1[0] * p + rgb2[0] * (1 - p)), + Math.round(rgb1[1] * p + rgb2[1] * (1 - p)), + Math.round(rgb1[2] * p + rgb2[2] * (1 - p)), + ]; + } + + findOptimalBlend(dominantColor, blendTarget, minContrast = 4.5) { + let low = 0; + let high = 100; + let bestMatch = null; + + for (let i = 0; i < 10; i++) { + const mid = (low + high) / 2; + const blended = this.blendColorsRaw(dominantColor, blendTarget, mid); + const contrast = this.contrastRatio(blended, blendTarget); + + if (contrast >= minContrast) { + bestMatch = blended; + high = mid; + } else { + low = mid; + } + } + + return bestMatch || this.blendColorsRaw(dominantColor, blendTarget, 10); // fallback } getGradient(colors, forToolbar = false) { const themedColors = this.themedColors(colors); this.useAlgo = themedColors[0]?.algorithm ?? ''; + this.#currentLightness = themedColors[0]?.lightness ?? 70; + const rotation = -45; // TODO: Detect rotation based on the accent color if (themedColors.length === 0) { return forToolbar - ? 'var(--zen-themed-toolbar-bg)' + ? this.getToolbarModifiedBase() : 'var(--zen-themed-toolbar-bg-transparent)'; } else if (themedColors.length === 1) { return this.getSingleRGBColor(themedColors[0], forToolbar); - } else if (themedColors.length !== 3) { - return `linear-gradient(${this.currentRotation}deg, ${themedColors.map((color) => this.getSingleRGBColor(color, forToolbar)).join(', ')})`; - } else { + } else if (themedColors.length === 2) { + return [ + `linear-gradient(${rotation}deg, ${this.getSingleRGBColor(themedColors[0], forToolbar)} -25%, transparent 100%)`, + `linear-gradient(${rotation + 180}deg, ${this.getSingleRGBColor(themedColors[1], forToolbar)} -25%, transparent 100%)`, + ].join(', '); + } else if (themedColors.length === 3) { let color1 = this.getSingleRGBColor(themedColors[2], forToolbar); let color2 = this.getSingleRGBColor(themedColors[0], forToolbar); let color3 = this.getSingleRGBColor(themedColors[1], forToolbar); - return `linear-gradient(${this.currentRotation}deg, ${color1}, ${color2}, ${color3})`; + if (!forToolbar) { + return [ + `radial-gradient(circle at -30% -30%, ${color1}, transparent 100%)`, + `radial-gradient(circle at 130% -30%, ${color2}, transparent 100%)`, + `linear-gradient(to top, ${color3} -30%, transparent 60%)`, + ].join(', '); + } + return [`linear-gradient(${rotation}deg, ${color1} -30%, ${color3} 100%)`].join(', '); + } else { + // Just return a linear gradient with all colors + const gradientColors = themedColors.map((color) => + this.getSingleRGBColor(color, forToolbar) + ); + return `linear-gradient(${rotation}deg, ${gradientColors.join(', ')})`; } } - static getTheme(colors = [], opacity = 0.5, rotation = -45, texture = 0) { + shouldBeDarkMode(accentColor) { + let minimalLum = this.isDarkMode ? 0.6 : 0.5; + if (!this.canBeTransparent) { + // Blend the color with the toolbar background + const toolbarBg = this.getToolbarModifiedBaseRaw(); + accentColor = this.blendColorsRaw( + toolbarBg.slice(0, 3), + accentColor, + (1 - this.currentOpacity) * 100 + ); + minimalLum = this.isDarkMode ? 0.3 : 0.2; + } + const lum = this.luminance(accentColor); + // Return true if background is dark enough that white text is preferred + return lum < minimalLum; + } + + static getTheme(colors = [], opacity = 0.5, texture = 0) { return { type: 'gradient', gradientColors: colors ? colors.filter((color) => color) : [], // remove undefined opacity, - rotation, texture, }; } - //TODO: add a better noise system that adds noise not just changes transparency updateNoise(texture) { document.documentElement.style.setProperty('--zen-grainy-background-opacity', texture); document.documentElement.setAttribute( @@ -1101,6 +1293,11 @@ return color; } + blendColors(rgb1, rgb2, percentage) { + const blended = this.blendColorsRaw(rgb1, rgb2, percentage); + return `rgb(${blended[0]}, ${blended[1]}, ${blended[2]})`; + } + async onWorkspaceChange(workspace, skipUpdate = false, theme = null) { const uuid = workspace.uuid; // Use theme from workspace object or passed theme @@ -1132,7 +1329,18 @@ } } - const appBackground = browser.document.getElementById('zen-browser-background'); + if (this.isDarkMode) { + browser.document.documentElement.style.setProperty( + '--zen-themed-browser-overlay-bg', + 'rgba(255, 255, 255, 0.3)' + ); + } else { + browser.document.documentElement.style.setProperty( + '--zen-themed-browser-overlay-bg', + 'rgba(0, 0, 0, 0.2)' + ); + } + if (!skipUpdate) { browser.document.documentElement.style.setProperty( '--zen-main-browser-background-old', @@ -1140,7 +1348,7 @@ ); browser.document.documentElement.style.setProperty( '--zen-background-opacity', - browser.gZenThemePicker.previousBackgroundOpacity + browser.gZenThemePicker.previousBackgroundOpacity ?? 1 ); if (browser.gZenThemePicker.previousBackgroundResolve) { browser.gZenThemePicker.previousBackgroundResolve(); @@ -1148,18 +1356,6 @@ delete browser.gZenThemePicker.previousBackgroundOpacity; } - const button = browser.document.getElementById( - 'PanelUI-zen-gradient-generator-color-toggle-algo' - ); - if (browser.gZenThemePicker.useAlgo) { - document.l10n.setAttributes( - button, - `zen-panel-ui-gradient-generator-algo-${browser.gZenThemePicker.useAlgo}` - ); - } else { - button.removeAttribute('data-l10n-id'); - } - browser.gZenThemePicker.resetCustomColorList(); if (!workspaceTheme || workspaceTheme.type !== 'gradient') { const gradient = browser.gZenThemePicker.getGradient([]); @@ -1177,13 +1373,48 @@ '--zen-primary-color', this.getNativeAccentColor() ); + browser.document.documentElement.removeAttribute('zen-should-be-dark-mode'); return; } browser.gZenThemePicker.currentOpacity = workspaceTheme.opacity ?? 0.5; - browser.gZenThemePicker.currentRotation = workspaceTheme.rotation ?? -45; browser.gZenThemePicker.currentTexture = workspaceTheme.texture ?? 0; + const opacitySlider = browser.document.getElementById( + 'PanelUI-zen-gradient-generator-opacity' + ); + + { + let opacity = browser.gZenThemePicker.currentOpacity; + const svg = browser.gZenThemePicker.sliderWavePath; + const [_, secondStop, thirdStop] = document.querySelectorAll( + '#PanelUI-zen-gradient-generator-slider-wave-gradient stop' + ); + // Opacity can only be between 0.15 to 0.85. Make opacity relative to that range + // So 0.15 becomes 0, and 0.85 becomes 1. + if (opacity < 0.15) { + opacity = 0; + } else if (opacity > 0.85) { + opacity = 1; + } else { + opacity = (opacity - 0.15) / (0.85 - 0.15); + } + // Since it's sine waves, we can't just set the offset to the opacity, we need to calculate it + // The offset is the percentage of the wave that is visible, so we need to multiply + // the opacity by 100 to get the percentage. + // Set the offset of the stops + secondStop.setAttribute('offset', `${opacity * 100}%`); + thirdStop.setAttribute('offset', `${opacity * 100}%`); + const interpolatedPath = this.#interpolateWavePath(opacity); + svg.setAttribute('d', interpolatedPath); + opacitySlider.style.setProperty('--zen-thumb-height', `${40 + opacity * 12}px`); + opacitySlider.style.setProperty('--zen-thumb-width', `${10 + opacity * 10}px`); + svg.style.stroke = + interpolatedPath === this.#linePath + ? thirdStop.getAttribute('stop-color') + : 'url(#PanelUI-zen-gradient-generator-slider-wave-gradient)'; + } + for (const button of browser.document.querySelectorAll( '#PanelUI-zen-gradient-generator-color-actions button' )) { @@ -1191,15 +1422,14 @@ button.disabled = workspaceTheme.gradientColors.length === 0 || (button.id === 'PanelUI-zen-gradient-generator-color-add' - ? workspaceTheme.gradientColors.length >= ZenThemePicker.MAX_DOTS + ? workspaceTheme.gradientColors.length >= nsZenThemePicker.MAX_DOTS : false); } document .getElementById('PanelUI-zen-gradient-generator-color-click-to-add') .toggleAttribute('hidden', workspaceTheme.gradientColors.length > 0); - browser.document.getElementById('PanelUI-zen-gradient-generator-opacity').value = - browser.gZenThemePicker.currentOpacity; + opacitySlider.value = browser.gZenThemePicker.currentOpacity; const textureSelectWrapper = browser.document.getElementById( 'PanelUI-zen-gradient-generator-texture-wrapper' ); @@ -1228,35 +1458,6 @@ i = 0; } } - - const numberOfColors = workspaceTheme.gradientColors?.length; - const rotationDot = browser.document.getElementById( - 'PanelUI-zen-gradient-generator-rotation-dot' - ); - const rotationLine = browser.document.getElementById( - 'PanelUI-zen-gradient-generator-rotation-line' - ); - if (numberOfColors > 1) { - rotationDot.style.opacity = 1; - rotationLine.style.opacity = 1; - rotationDot.style.removeProperty('pointer-events'); - const rotationPadding = 20; - const rotationParentWidth = rotationDot.parentElement.getBoundingClientRect().width; - const rotationDotPosition = this.currentRotation; - const rotationDotWidth = 30; - const rotationDotX = - Math.cos((rotationDotPosition * Math.PI) / 180) * - (rotationParentWidth / 2 - rotationDotWidth / 2); - const rotationDotY = - Math.sin((rotationDotPosition * Math.PI) / 180) * - (rotationParentWidth / 2 - rotationDotWidth / 2); - rotationDot.style.left = `${rotationParentWidth / 2 + rotationDotX - rotationPadding + rotationDotWidth / 4}px`; - rotationDot.style.top = `${rotationParentWidth / 2 + rotationDotY - rotationPadding + rotationDotWidth / 4}px`; - } else { - rotationDot.style.opacity = 0; - rotationLine.style.opacity = 0; - rotationDot.style.pointerEvents = 'none'; - } } const gradient = browser.gZenThemePicker.getGradient(workspaceTheme.gradientColors); @@ -1290,6 +1491,25 @@ ? dominantColor : `rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})` ); + let isDarkMode = this.isDarkMode; + if (dominantColor !== this.getNativeAccentColor()) { + isDarkMode = browser.gZenThemePicker.shouldBeDarkMode(dominantColor); + browser.document.documentElement.setAttribute('zen-should-be-dark-mode', isDarkMode); + } else { + browser.document.documentElement.removeAttribute('zen-should-be-dark-mode'); + } + // Set `--toolbox-textcolor` to have a contrast with the primary color + const blendTarget = isDarkMode ? [255, 255, 255] : [0, 0, 0]; + const blendedColor = this.blendColors(dominantColor, blendTarget, 15); // 15% dominantColor, 85% target + await gZenUIManager.motion.animate( + browser.document.documentElement, + { + '--toolbox-textcolor': blendedColor, + }, + { + duration: 0.05, + } + ); } if (!skipUpdate) { @@ -1364,19 +1584,18 @@ } const isCustom = dot.classList.contains('custom'); const algorithm = this.useAlgo; + const position = + dot.getAttribute('data-position') && JSON.parse(dot.getAttribute('data-position')); return { c: isCustom ? color : color.match(/\d+/g).map(Number), isCustom, algorithm, isPrimary, + lightness: this.#currentLightness, + position, }; }); - const gradient = ZenThemePicker.getTheme( - colors, - this.currentOpacity, - this.currentRotation, - this.currentTexture - ); + const gradient = nsZenThemePicker.getTheme(colors, this.currentOpacity, this.currentTexture); let currentWorkspace = await gZenWorkspaces.getActiveWorkspace(); if (!skipSave) { @@ -1402,7 +1621,38 @@ this.updateCurrentWorkspace(); }, 200); } + + #interpolateWavePath(progress) { + const linePath = this.#linePath; + const sinePath = this.#sinePath; + const referenceY = 27.3; + if (this.#sinePoints.length === 0) { + return progress < 0.5 ? linePath : sinePath; + } + if (progress <= 0.001) return linePath; + if (progress >= 0.999) return sinePath; + const t = progress; + let newPathData = ''; + this.#sinePoints.forEach((p) => { + switch (p.type) { + case 'M': + const interpolatedY = referenceY + (p.y - referenceY) * t; + newPathData += `M ${p.x} ${interpolatedY} `; + break; + case 'C': + const y1 = referenceY + (p.y1 - referenceY) * t; + const y2 = referenceY + (p.y2 - referenceY) * t; + const y = referenceY + (p.y - referenceY) * t; + newPathData += `C ${p.x1} ${y1} ${p.x2} ${y2} ${p.x} ${y} `; + break; + case 'L': + newPathData += `L ${p.x} ${p.y} `; + break; + } + }); + return newPathData.trim(); + } } - window.ZenThemePicker = ZenThemePicker; + window.nsZenThemePicker = nsZenThemePicker; } diff --git a/src/zen/workspaces/ZenWorkspaceIcons.mjs b/src/zen/workspaces/ZenWorkspaceIcons.mjs index b512fbe4..f04c41b6 100644 --- a/src/zen/workspaces/ZenWorkspaceIcons.mjs +++ b/src/zen/workspaces/ZenWorkspaceIcons.mjs @@ -145,6 +145,7 @@ i++; } buttons[selected].setAttribute('active', true); + this.scrollLeft = buttons[selected].offsetLeft - 10; this.setAttribute('selected', selected); } diff --git a/src/zen/workspaces/ZenWorkspaces.mjs b/src/zen/workspaces/ZenWorkspaces.mjs index 37a0c396..2bc0a62b 100644 --- a/src/zen/workspaces/ZenWorkspaces.mjs +++ b/src/zen/workspaces/ZenWorkspaces.mjs @@ -885,7 +885,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature { this.activeWorkspace = activeWorkspace?.uuid; try { if (activeWorkspace) { - window.gZenThemePicker = new ZenThemePicker(); + window.gZenThemePicker = new nsZenThemePicker(); await gZenThemePicker.onWorkspaceChange(activeWorkspace); } } catch (e) { @@ -2179,7 +2179,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature { uuid: gZenUIManager.generateUuidv4(), icon: icon, name: name, - theme: ZenThemePicker.getTheme([]), + theme: nsZenThemePicker.getTheme([]), containerTabId, }; if (moveTabs) { diff --git a/src/zen/workspaces/overflow-icons.inc.css b/src/zen/workspaces/overflow-icons.inc.css index 7d966fdd..930290bd 100644 --- a/src/zen/workspaces/overflow-icons.inc.css +++ b/src/zen/workspaces/overflow-icons.inc.css @@ -6,6 +6,8 @@ &:not(:hover) { width: min(var(--zen-overflowed-workspace-button-width), 25px); + min-width: 10px; + &::after { content: ''; position: absolute; diff --git a/src/zen/workspaces/zen-gradient-generator.css b/src/zen/workspaces/zen-gradient-generator.css index 24564c89..fff9923d 100644 --- a/src/zen/workspaces/zen-gradient-generator.css +++ b/src/zen/workspaces/zen-gradient-generator.css @@ -5,7 +5,7 @@ */ #PanelUI-zen-gradient-generator { - --panel-width: 320px; + --panel-width: 340px; --panel-padding: 10px; min-width: var(--panel-width); } @@ -20,6 +20,7 @@ #PanelUI-zen-gradient-generator-controls { align-items: center; gap: var(--panel-padding); + padding-top: 10px; } #zen-theme-picker-color { @@ -62,7 +63,11 @@ padding: 0 var(--panel-padding); @media (-moz-platform: macos) { - gap: 3rem; + gap: 2rem; + } + + #PanelUI-zen-gradient-opacity-wrapper { + position: relative; } & label { @@ -76,46 +81,58 @@ } } -#PanelUI-zen-gradient-generator-predefined { +#PanelUI-zen-gradient-generator-color-pages-wrapper { + align-items: center; +} + +#PanelUI-zen-gradient-generator-color-pages { display: flex; justify-content: space-around; + margin: 0 10px; align-items: center; - margin: 5px auto 10px auto; width: 100%; + overflow: auto; + scrollbar-width: none; + scroll-behavior: smooth; - & > box { - width: 18px; - height: 18px; - border-radius: 50%; - cursor: pointer; - position: relative; - transition: transform 0.1s; - &::after { - content: ''; - position: absolute; + & > hbox { + justify-content: space-around; + min-width: 100%; + + & > box { width: 18px; height: 18px; - top: 0; - left: 0; - outline: 2px solid var(--zen-toolbar-element-bg); border-radius: 50%; - pointer-events: none; + cursor: pointer; + position: relative; transition: transform 0.1s; - } - - &:hover { - transform: scale(1.05); - &::after { - transform: scale(1.05); + content: ''; + position: absolute; + width: 18px; + height: 18px; + top: 0; + left: 0; + outline: 2px solid var(--zen-toolbar-element-bg); + border-radius: 50%; + pointer-events: none; + transition: transform 0.1s; } - } - &:hover:active { - transform: scale(0.95); + &:hover { + transform: scale(1.05); - &::after { + &::after { + transform: scale(1.05); + } + } + + &:hover:active { transform: scale(0.95); + + &::after { + transform: scale(0.95); + } } } } @@ -164,46 +181,72 @@ } } -#PanelUI-zen-gradient-generator-opacity, -#PanelUI-zen-gradient-generator-texture { +#PanelUI-zen-gradient-slider-wave { + position: absolute; + top: 3px; + left: -3px; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 1; + display: flex; + align-items: center; + justify-content: flex-start; + scale: 1.2; + + &::before { + content: ''; + position: absolute; + width: 100%; + height: 16px; + background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)); + border-radius: 999px; + pointer-events: none; + z-index: -1; + top: -1px; + left: 4px; + scale: 0.85; + } + + & svg { + overflow: visible; + min-width: calc(100% + 2.5rem); + } +} + +#PanelUI-zen-gradient-generator-opacity { margin: 0 !important; - margin-top: 5px !important; background: transparent; + z-index: 2; &::-moz-range-thumb { - background: var(--zen-colors-tertiary); - border: 2px solid var(--zen-colors-border); - border-radius: 12px; - height: 25px; - width: 13px; + background: light-dark(black, white); + border-radius: 999px; + height: var(--zen-thumb-height); + width: var(--zen-thumb-width); cursor: pointer; + border: none; } &::-moz-range-track { - background: light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.3)); border-radius: 999px; - height: 6px; + height: 18px; } &::-moz-range-progress { - background: var(--zen-primary-color); - border-radius: 999px; - height: 8px; + background: transparent; } } .zen-theme-picker-gradient { position: relative; - border-radius: calc(var(--zen-border-radius) - 2px); overflow: hidden; border-radius: var(--zen-border-radius); - min-height: calc(var(--panel-width) - var(--panel-padding) * 2); - margin-bottom: 20px; - - background: var(--zen-toolbar-element-bg); + min-height: calc(var(--panel-width) - var(--panel-padding) * 2 - 2px); + background: color-mix(in srgb, var(--zen-toolbar-element-bg) 60%, transparent 40%); background-image: radial-gradient( - light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.4)) 1px, + light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1)) 1px, transparent 0 ); background-position: -19px -19px; @@ -220,7 +263,7 @@ box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); } cursor: pointer; - border: 2px solid #ffffff; + border: 3px solid #ffffff; animation: zen-theme-picker-dot-animation 0.5s; transform: translate(-50%, -50%); @@ -229,7 +272,7 @@ height: 36px; border-width: 4px; z-index: 2; - transition: transform 0.1s; + transition: transform 0.2s; &:hover { transform: scale(1.05) translate(-50%, -50%); } @@ -241,6 +284,10 @@ } } +#PanelUI-zen-gradient-generator-view { + gap: 10px; +} + #PanelUI-zen-gradient-generator-color-click-to-add { position: absolute; font-weight: 600; @@ -255,17 +302,15 @@ } } -#PanelUI-zen-gradient-generator-color-actions { +#PanelUI-zen-gradient-generator-color-actions, +#PanelUI-zen-gradient-generator-scheme { display: flex; position: absolute; - bottom: 8px; + bottom: 12px; left: 50%; z-index: 1; transform: translateX(-50%); - & .separator, - & #PanelUI-zen-gradient-generator-color-toggle-algo { - background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.15)); - } + gap: 5px; & button { border: none !important; @@ -273,17 +318,20 @@ min-width: fit-content !important; transition: background 0.2s; appearance: none; + max-height: 26px; + max-width: 26px; + color: light-dark(rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.9)); & .button-box { gap: 0.1rem; } - &:not(#PanelUI-zen-gradient-generator-color-toggle-algo) .button-text { + & .button-text { display: none; } &:hover { - background: light-dark(#cfcfcf, #313131); + background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)); } &[disabled] { @@ -291,12 +339,11 @@ cursor: not-allowed; } } +} - & .separator { - width: 1px; - margin: 0 0.5rem; - height: 30px; - } +#PanelUI-zen-gradient-generator-scheme { + top: 15px; + max-height: 32px; } @media not -moz-pref('zen.theme.gradient.show-custom-colors') { @@ -311,9 +358,8 @@ position: relative; @media (-moz-platform: macos) { - width: 25%; - aspect-ratio: 1; - height: unset; + width: 5rem; + height: 5rem; } &::after { @@ -381,32 +427,9 @@ } } -#PanelUI-zen-gradient-generator-rotation-line { - border: 1px solid var(--zen-colors-border); - position: absolute; - --rotation-padding: 15px; - width: calc(100% - var(--rotation-padding) * 2); - border-bottom-color: transparent; - height: calc(100% - var(--rotation-padding) * 2); - top: var(--rotation-padding); - left: var(--rotation-padding); - border-radius: 50%; - opacity: 0; - pointer-events: none; -} - -#PanelUI-zen-gradient-generator-rotation-dot { - position: absolute; - width: 25px; - height: 25px; - border-radius: 50%; - border: 1px solid var(--zen-colors-border); - background: var(--zen-colors-tertiary); - opacity: 0; - cursor: pointer; - z-index: 2; - transition: transform 0.1s; - &:hover { - transform: scale(1.1); - } +#PanelUI-zen-gradient-generator-color-page-left, +#PanelUI-zen-gradient-generator-color-page-right { + max-width: 28px; + max-height: 28px; + margin: 0 !important; }