mirror of
https://github.com/zen-browser/desktop.git
synced 2025-07-07 16:05:31 +02:00
Gradient hue revamp (#9093)
This commit is contained in:
parent
ba7eff60ef
commit
b735567504
24 changed files with 799 additions and 440 deletions
2
l10n
2
l10n
|
@ -1 +1 @@
|
||||||
Subproject commit 706b33337345e4231e18313463259703b3fbc50d
|
Subproject commit 7435b28bdf962406f7e0ec54ed1774ede5b490a9
|
|
@ -7,6 +7,7 @@ pref('zen.theme.content-element-separation', 8); // In pixels
|
||||||
pref('zen.theme.gradient', true);
|
pref('zen.theme.gradient', true);
|
||||||
pref('zen.theme.gradient.show-custom-colors', false);
|
pref('zen.theme.gradient.show-custom-colors', false);
|
||||||
pref('zen.theme.essentials-favicon-bg', true);
|
pref('zen.theme.essentials-favicon-bg', true);
|
||||||
|
pref('zen.theme.window.scheme', 'auto'); // auto, light, dark
|
||||||
|
|
||||||
#ifdef XP_MACOSX
|
#ifdef XP_MACOSX
|
||||||
pref('zen.theme.border-radius', 10); // In pixels
|
pref('zen.theme.border-radius', 10); // In pixels
|
||||||
|
|
|
@ -11,4 +11,4 @@ pref('widget.macos.sidebar-blend-mode.behind-window', true);
|
||||||
// 5. toolTip
|
// 5. toolTip
|
||||||
// 6. headerView
|
// 6. headerView
|
||||||
// 7. underlay
|
// 7. underlay
|
||||||
pref('zen.widget.macos.window-material', 3);
|
pref('zen.widget.macos.window-material', 1);
|
||||||
|
|
|
@ -76,7 +76,6 @@
|
||||||
|
|
||||||
|
|
||||||
# Images
|
# 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/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/collapsed.png (../../zen/images/layouts/collapsed.png)
|
||||||
content/browser/zen-images/layouts/multiple-toolbar.png (../../zen/images/layouts/multiple-toolbar.png)
|
content/browser/zen-images/layouts/multiple-toolbar.png (../../zen/images/layouts/multiple-toolbar.png)
|
||||||
|
|
|
@ -5,39 +5,66 @@
|
||||||
<panel flip="side" type="arrow" popupalign="center" orient="vertical" id="PanelUI-zen-gradient-generator" position="bottomright topright" mainview="true" side="left">
|
<panel flip="side" type="arrow" popupalign="center" orient="vertical" id="PanelUI-zen-gradient-generator" position="bottomright topright" mainview="true" side="left">
|
||||||
<panelmultiview id="PanelUI-zen-gradient-generator-multiview" mainViewId="PanelUI-zen-gradient-generator-view">
|
<panelmultiview id="PanelUI-zen-gradient-generator-multiview" mainViewId="PanelUI-zen-gradient-generator-view">
|
||||||
<panelview id="PanelUI-zen-gradient-generator-view" class="PanelUI-subView zen-theme-picker" role="document" mainview-with-header="true" has-custom-header="true">
|
<panelview id="PanelUI-zen-gradient-generator-view" class="PanelUI-subView zen-theme-picker" role="document" mainview-with-header="true" has-custom-header="true">
|
||||||
<hbox>
|
|
||||||
<hbox id="PanelUI-zen-gradient-generator-predefined">
|
|
||||||
<box data-algo="analogous" data-num-dots="3" data-position="219,99" style="background: linear-gradient(135deg, rgb(117, 255, 136), rgb(60, 66, 58));"></box>
|
|
||||||
<box data-algo="analogous" data-num-dots="3" data-position="167,201" style="background: linear-gradient(135deg, #a03fe0, #382b5c);"></box>
|
|
||||||
<box data-algo="analogous" data-num-dots="3" data-position="90,170" style="background: linear-gradient(135deg, #c57aa3, #af824f);"></box>
|
|
||||||
<box data-algo="splitComplementary" data-num-dots="3" data-position="83,103" style="background: linear-gradient(135deg, #1e90ff, #968a4a);"></box>
|
|
||||||
<box data-algo="analogous" data-num-dots="3" data-position="186,186" style="background: linear-gradient(135deg, #a07a48, #ab80e4);"></box>
|
|
||||||
<box data-algo="float" data-num-dots="1" data-position="196,176" style="background: #7bcbda;"></box>
|
|
||||||
<box data-algo="float" data-num-dots="1" data-position="116,167" style="background: #be9ac9;"></box>
|
|
||||||
<box data-algo="float" data-num-dots="1" data-position="122,110" style="background: #cdcea1;"></box>
|
|
||||||
<box data-algo="float" data-num-dots="1" data-position="181,83" style="background: #6ac593;"></box>
|
|
||||||
<box data-algo="complementary" data-num-dots="2" data-position="82,112" style="background: linear-gradient(135deg, #1e90ff, #cfb179);"></box>
|
|
||||||
</hbox>
|
|
||||||
</hbox>
|
|
||||||
<hbox class="zen-theme-picker-gradient">
|
<hbox class="zen-theme-picker-gradient">
|
||||||
<box id="PanelUI-zen-gradient-generator-rotation-dot"></box>
|
<hbox id="PanelUI-zen-gradient-generator-scheme">
|
||||||
<box id="PanelUI-zen-gradient-generator-rotation-line"></box>
|
<button id="PanelUI-zen-gradient-generator-scheme-auto" class="subviewbutton"/>
|
||||||
<box id="PanelUI-zen-gradient-generator-color-actions">
|
<button id="PanelUI-zen-gradient-generator-scheme-light" class="subviewbutton"/>
|
||||||
|
<button id="PanelUI-zen-gradient-generator-scheme-dark" class="subviewbutton"/>
|
||||||
|
</hbox>
|
||||||
|
<hbox id="PanelUI-zen-gradient-generator-color-actions">
|
||||||
<button id="PanelUI-zen-gradient-generator-color-add" class="subviewbutton">
|
<button id="PanelUI-zen-gradient-generator-color-add" class="subviewbutton">
|
||||||
</button>
|
</button>
|
||||||
<button id="PanelUI-zen-gradient-generator-color-remove" class="subviewbutton">
|
<button id="PanelUI-zen-gradient-generator-color-remove" class="subviewbutton">
|
||||||
</button>
|
</button>
|
||||||
<html:div class="separator"></html:div>
|
</hbox>
|
||||||
<button id="PanelUI-zen-gradient-generator-color-toggle-algo" class="subviewbutton" data-l10n-id="zen-panel-ui-gradient-generator-algo-floating">
|
|
||||||
</button>
|
|
||||||
</box>
|
|
||||||
<label data-l10n-id="zen-panel-ui-gradient-click-to-add" id="PanelUI-zen-gradient-generator-color-click-to-add"></label>
|
<label data-l10n-id="zen-panel-ui-gradient-click-to-add" id="PanelUI-zen-gradient-generator-color-click-to-add"></label>
|
||||||
</hbox>
|
</hbox>
|
||||||
|
<hbox>
|
||||||
|
<toolbarbutton id="PanelUI-zen-gradient-generator-color-page-left" class="toolbarbutton-1" disabled="true" />
|
||||||
|
<hbox id="PanelUI-zen-gradient-generator-color-pages">
|
||||||
|
<hbox>
|
||||||
|
<box data-lightness="90" data-algo="float" data-num-dots="1" data-position="196,176" style="background: #7bcbda;"></box>
|
||||||
|
<box data-lightness="80" data-algo="float" data-num-dots="1" data-position="116,167" style="background: #be9ac9;"></box>
|
||||||
|
<box data-lightness="70" data-algo="float" data-num-dots="1" data-position="122,110" style="background: #cdcea1;"></box>
|
||||||
|
<box data-lightness="60" data-algo="float" data-num-dots="1" data-position="181,83" style="background: #6ac593;"></box>
|
||||||
|
<box data-lightness="50" data-algo="analogous" data-num-dots="3" data-position="219,99" style="background: linear-gradient(135deg, rgb(117, 255, 136), rgb(60, 66, 58));"></box>
|
||||||
|
<box data-lightness="40" data-algo="analogous" data-num-dots="3" data-position="167,201" style="background: linear-gradient(135deg, #a03fe0, #382b5c);"></box>
|
||||||
|
<box data-lightness="30" data-algo="analogous" data-num-dots="3" data-position="90,170" style="background: linear-gradient(135deg, #c57aa3, #af824f);"></box>
|
||||||
|
<box data-lightness="20" data-algo="splitComplementary" data-num-dots="3" data-position="83,103" style="background: linear-gradient(135deg, #1e90ff, #968a4a);"></box>
|
||||||
|
</hbox>
|
||||||
|
<hbox>
|
||||||
|
<box data-lightness="90" data-algo="float" data-num-dots="1" data-position="196,176" style="background: red;"></box>
|
||||||
|
<box data-lightness="80" data-algo="float" data-num-dots="1" data-position="116,167" style="background: #be9ac9;"></box>
|
||||||
|
<box data-lightness="70" data-algo="float" data-num-dots="1" data-position="122,110" style="background: #cdcea1;"></box>
|
||||||
|
<box data-lightness="60" data-algo="float" data-num-dots="1" data-position="181,83" style="background: #6ac593;"></box>
|
||||||
|
<box data-lightness="50" data-algo="analogous" data-num-dots="3" data-position="219,99" style="background: linear-gradient(135deg, rgb(117, 255, 136), rgb(60, 66, 58));"></box>
|
||||||
|
<box data-lightness="40" data-algo="analogous" data-num-dots="3" data-position="167,201" style="background: linear-gradient(135deg, #a03fe0, #382b5c);"></box>
|
||||||
|
<box data-lightness="30" data-algo="analogous" data-num-dots="3" data-position="90,170" style="background: linear-gradient(135deg, #c57aa3, #af824f);"></box>
|
||||||
|
<box data-lightness="20" data-algo="splitComplementary" data-num-dots="3" data-position="83,103" style="background: linear-gradient(135deg, #1e90ff, #968a4a);"></box>
|
||||||
|
</hbox>
|
||||||
|
</hbox>
|
||||||
|
<toolbarbutton id="PanelUI-zen-gradient-generator-color-page-right" class="toolbarbutton-1" />
|
||||||
|
</hbox>
|
||||||
<hbox id="PanelUI-zen-gradient-generator-controls">
|
<hbox id="PanelUI-zen-gradient-generator-controls">
|
||||||
<hbox id="PanelUI-zen-gradient-colors-wrapper">
|
<hbox id="PanelUI-zen-gradient-colors-wrapper">
|
||||||
<vbox flex="1">
|
<vbox flex="1" id="PanelUI-zen-gradient-opacity-wrapper">
|
||||||
<label data-l10n-id="zen-panel-ui-gradient-generator-opacity-text"></label>
|
<box id="PanelUI-zen-gradient-slider-wave">
|
||||||
<html:input type="range" min="0" max="1" value="0.5" step="0.05" id="PanelUI-zen-gradient-generator-opacity" />
|
<svg viewBox="0 -7.605 455 70" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMid meet">
|
||||||
|
<path d="M 51.373 27.395 L 419.634 27.395"
|
||||||
|
fill="none"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
style="stroke-width: 8px;"/>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="PanelUI-zen-gradient-generator-slider-wave-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" stop-color="light-dark(rgb(77, 77, 77), rgb(161, 161, 161))"/>
|
||||||
|
<stop offset="0%" stop-color="light-dark(rgba(77, 77, 77), rgba(161, 161, 161))"/>
|
||||||
|
<stop offset="100%" stop-color="light-dark(rgba(77, 77, 77, 0.5), rgba(161, 161, 161, 0.5))"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
</box>
|
||||||
|
<html:input type="range" min="0.15" max="0.85" value="0.5" step="0.01" id="PanelUI-zen-gradient-generator-opacity" />
|
||||||
</vbox>
|
</vbox>
|
||||||
<vbox id="PanelUI-zen-gradient-generator-texture-wrapper">
|
<vbox id="PanelUI-zen-gradient-generator-texture-wrapper">
|
||||||
</vbox>
|
</vbox>
|
||||||
|
|
|
@ -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 */
|
/* Workspace */
|
||||||
|
|
||||||
#category-zen-tabs-management > .category-icon {
|
#category-zen-tabs-management > .category-icon {
|
||||||
|
|
|
@ -47,10 +47,6 @@
|
||||||
list-style-image: url('reload.svg') !important;
|
list-style-image: url('reload.svg') !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#PanelUI-zen-gradient-generator-color-toggle-algo {
|
|
||||||
list-style-image: url('palette.svg');
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-reset-button,
|
.tab-reset-button,
|
||||||
#PanelUI-zen-gradient-generator-color-remove {
|
#PanelUI-zen-gradient-generator-color-remove {
|
||||||
list-style-image: url('unpin.svg') !important;
|
list-style-image: url('unpin.svg') !important;
|
||||||
|
@ -101,7 +97,8 @@
|
||||||
list-style-image: url('chevron.svg') !important;
|
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');
|
list-style-image: url('arrow-right.svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -400,7 +397,8 @@
|
||||||
list-style-image: url('expand-sidebar.svg') !important;
|
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;
|
list-style-image: url('arrow-left.svg') !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -768,3 +766,33 @@
|
||||||
background: transparent !important;
|
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));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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-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-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-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-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-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-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/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/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-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/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/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/folder.svg (../shared/zen-icons/lin/folder.svg)
|
||||||
skin/classic/browser/zen-icons/forget.svg (../shared/zen-icons/lin/forget.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-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/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/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/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/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)
|
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/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/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/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/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/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-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/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/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/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/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-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/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-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-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/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/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/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/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/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/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/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)
|
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-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-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-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-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-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-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/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/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-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/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/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/folder.svg (../shared/zen-icons/lin/folder.svg)
|
||||||
skin/classic/browser/zen-icons/forget.svg (../shared/zen-icons/lin/forget.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-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/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/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/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/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)
|
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/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/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/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/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/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-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/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/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/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/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-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/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-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-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/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/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/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/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/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/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/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)
|
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-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-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-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-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-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-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/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/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-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/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/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/folder.svg (../shared/zen-icons/lin/folder.svg)
|
||||||
skin/classic/browser/zen-icons/forget.svg (../shared/zen-icons/lin/forget.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-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/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/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/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/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)
|
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/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/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/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/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/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-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/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/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/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/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-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/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-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-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/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/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/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/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/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/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/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)
|
skin/classic/browser/zen-icons/stop-to-reload.svg (../shared/zen-icons/lin/stop-to-reload.svg)
|
||||||
|
|
1
src/browser/themes/shared/zen-icons/lin/face-sun.svg
Normal file
1
src/browser/themes/shared/zen-icons/lin/face-sun.svg
Normal file
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M17.25,8.25h-1.292c-.146-1.369-.69-2.619-1.512-3.637l1.583-1.583c.293-.293,.293-.768,0-1.061s-.767-.294-1.061,0l-1.583,1.583c-1.018-.821-2.268-1.365-3.636-1.511V.75c0-.414-.336-.75-.75-.75s-.75,.336-.75,.75v1.292c-1.368,.146-2.618,.69-3.636,1.511l-1.583-1.583c-.293-.293-.768-.293-1.061,0s-.293,.768,0,1.061l1.583,1.583c-.821,1.018-1.365,2.268-1.511,3.637H.75c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75h1.292c.146,1.369,.69,2.619,1.511,3.637l-1.583,1.583c-.293,.293-.293,.768,0,1.061,.146,.146,.338,.22,.53,.22,.191,0,.384-.073,.53-.22l1.583-1.583c1.018,.821,2.268,1.365,3.636,1.511v1.292c0,.414,.336,.75,.75,.75s.75-.336,.75-.75v-1.292c1.368-.146,2.618-.69,3.636-1.511l1.583,1.583c.146,.146,.338,.22,.53,.22s.384-.073,.53-.22c.293-.293,.293-.768,0-1.061l-1.583-1.583c.821-1.018,1.365-2.268,1.512-3.637h1.292c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75Zm-11.25,1.75c-.552,0-1-.448-1-1s.448-1,1-1,1,.448,1,1-.448,1-1,1Zm3,2c-.828,0-1.5-.672-1.5-1.5,0-.276,.224-.5,.5-.5h2c.276,0,.5,.224,.5,.5,0,.828-.672,1.5-1.5,1.5Zm2-3c0-.552,.448-1,1-1s1,.448,1,1-.448,1-1,1-1-.448-1-1Z" fill="currentColor"></path></svg>
|
After Width: | Height: | Size: 1.2 KiB |
1
src/browser/themes/shared/zen-icons/lin/moon-stars.svg
Normal file
1
src/browser/themes/shared/zen-icons/lin/moon-stars.svg
Normal file
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M16.705,10.223c-.246-.183-.578-.197-.838-.037-.868,.532-1.859,.813-2.867,.813-3.033,0-5.5-2.467-5.5-5.5,0-1.146,.354-2.247,1.023-3.186,.177-.249,.186-.581,.021-.839-.164-.258-.467-.386-.77-.334C3.994,1.847,1.25,5.152,1.25,9c0,4.411,3.589,8,8,8,3.638,0,6.819-2.461,7.735-5.986,.077-.296-.034-.609-.28-.791Z" fill="currentColor"></path><path d="M12.743,4.492l-.946-.315-.316-.947c-.102-.306-.609-.306-.711,0l-.316,.947-.946,.315c-.153,.051-.257,.194-.257,.356s.104,.305,.257,.356l.946,.315,.316,.947c.051,.153,.194,.256,.355,.256s.305-.104,.355-.256l.316-.947,.946-.315c.153-.051,.257-.194,.257-.356s-.104-.305-.257-.356Z" fill="currentColor" data-color="color-2"></path><circle cx="14.25" cy="7.75" r=".75" fill="currentColor" data-color="color-2"></circle></svg>
|
After Width: | Height: | Size: 917 B |
1
src/browser/themes/shared/zen-icons/lin/sparkles.svg
Normal file
1
src/browser/themes/shared/zen-icons/lin/sparkles.svg
Normal file
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M3.025,5.623c.068,.204,.26,.342,.475,.342s.406-.138,.475-.342l.421-1.263,1.263-.421c.204-.068,.342-.259,.342-.474s-.138-.406-.342-.474l-1.263-.421-.421-1.263c-.137-.408-.812-.408-.949,0l-.421,1.263-1.263,.421c-.204,.068-.342,.259-.342,.474s.138,.406,.342,.474l1.263,.421,.421,1.263Z" fill="currentColor" data-color="color-2"></path><path d="M16.525,8.803l-4.535-1.793-1.793-4.535c-.227-.572-1.168-.572-1.395,0l-1.793,4.535-4.535,1.793c-.286,.113-.475,.39-.475,.697s.188,.584,.475,.697l4.535,1.793,1.793,4.535c.113,.286,.39,.474,.697,.474s.584-.188,.697-.474l1.793-4.535,4.535-1.793c.286-.113,.475-.39,.475-.697s-.188-.584-.475-.697Z" fill="currentColor"></path></svg>
|
After Width: | Height: | Size: 822 B |
|
@ -1,13 +1,13 @@
|
||||||
diff --git a/dom/base/Document.cpp b/dom/base/Document.cpp
|
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
|
--- a/dom/base/Document.cpp
|
||||||
+++ b/dom/base/Document.cpp
|
+++ b/dom/base/Document.cpp
|
||||||
@@ -3332,6 +3332,15 @@ void Document::FillStyleSetUserAndUASheets() {
|
@@ -3332,6 +3332,15 @@ void Document::FillStyleSetUserAndUASheets() {
|
||||||
|
|
||||||
ServoStyleSet& styleSet = EnsureStyleSet();
|
ServoStyleSet& styleSet = EnsureStyleSet();
|
||||||
for (StyleSheet* sheet : *sheetService->UserStyleSheets()) {
|
for (StyleSheet* sheet : *sheetService->UserStyleSheets()) {
|
||||||
+ // If the url starts with "chrome://" and ends with 'zen-themes.css', then
|
+ // If the url starts with "file://" and ends with 'zen-themes.css', then
|
||||||
+ // skip it if the document is in a chrome docshell.
|
+ // skip it if the document is not in a chrome docshell.
|
||||||
+ // This is to avoid loading the user chrome stylesheet in the content
|
+ // This is to avoid loading the user chrome stylesheet in the content
|
||||||
+ // process, which is not allowed.
|
+ // process, which is not allowed.
|
||||||
+ auto spec = sheet->GetSheetURI()->GetSpecOrDefault();
|
+ auto spec = sheet->GetSheetURI()->GetSpecOrDefault();
|
||||||
|
|
13
src/widget/cocoa/nsCocoaWindow-mm.patch
Normal file
13
src/widget/cocoa/nsCocoaWindow-mm.patch
Normal file
|
@ -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
|
|
@ -17,7 +17,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
& browser[transparent='true'] {
|
& 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));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -46,6 +46,8 @@
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
||||||
isolation: isolate;
|
isolation: isolate;
|
||||||
|
background: var(--zen-themed-toolbar-bg-transparent);
|
||||||
|
transition: background-color var(--inactive-window-transition);
|
||||||
|
|
||||||
&::after,
|
&::after,
|
||||||
&::before {
|
&::before {
|
||||||
|
@ -100,7 +102,7 @@
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@supports (-moz-osx-font-smoothing: auto) {
|
@media (-moz-platform: macos) {
|
||||||
#zen-main-app-wrapper,
|
#zen-main-app-wrapper,
|
||||||
#zen-appcontent-wrapper,
|
#zen-appcontent-wrapper,
|
||||||
#zen-sidebar-splitter {
|
#zen-sidebar-splitter {
|
||||||
|
@ -118,7 +120,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#zen-main-app-wrapper {
|
#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
|
/* See bug #8814, don't an overflow here as it causes issues
|
||||||
* with firefox's rendering of the tab bar */
|
* with firefox's rendering of the tab bar */
|
||||||
|
|
||||||
|
|
|
@ -394,7 +394,6 @@ menuseparator {
|
||||||
}
|
}
|
||||||
|
|
||||||
& button {
|
& button {
|
||||||
color-scheme: dark;
|
|
||||||
width: min-content;
|
width: min-content;
|
||||||
padding: 0 10px !important;
|
padding: 0 10px !important;
|
||||||
min-width: unset !important;
|
min-width: unset !important;
|
||||||
|
@ -402,6 +401,7 @@ menuseparator {
|
||||||
border-radius: calc(var(--zen-native-inner-radius) + 2px) !important;
|
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;
|
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;
|
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'] & {
|
:root[zen-right-side='true'] & {
|
||||||
order: -1;
|
order: -1;
|
||||||
|
|
|
@ -9,12 +9,7 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
:host(:is(.anonymous-content-host, notification-message)),
|
:host(:is(.anonymous-content-host, notification-message)),
|
||||||
:root,
|
:root {
|
||||||
.zenLooksAndFeelColorOption {
|
|
||||||
/** We also add `.zenLooksAndFeelColorOption` so that it recalculates the colors when the theme changes
|
|
||||||
* in the preferences page.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* Default values */
|
/* Default values */
|
||||||
--zen-border-radius: 7px;
|
--zen-border-radius: 7px;
|
||||||
--zen-primary-color: #ffb787;
|
--zen-primary-color: #ffb787;
|
||||||
|
@ -92,7 +87,7 @@
|
||||||
--focus-outline-color: var(--button-bgcolor) !important;
|
--focus-outline-color: var(--button-bgcolor) !important;
|
||||||
|
|
||||||
--toolbarbutton-icon-fill-attention: var(--zen-primary-color) !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-bgcolor: var(--in-content-primary-button-background) !important;
|
||||||
--button-primary-hover-bgcolor: var(--in-content-primary-button-background-hover) !important;
|
--button-primary-hover-bgcolor: var(--in-content-primary-button-background-hover) !important;
|
||||||
|
@ -121,7 +116,10 @@
|
||||||
--zen-button-border-radius: 5px;
|
--zen-button-border-radius: 5px;
|
||||||
--zen-button-padding: 0.6rem 1.2rem;
|
--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 */
|
/* Toolbar */
|
||||||
--zen-toolbar-height: 38px;
|
--zen-toolbar-height: 38px;
|
||||||
|
@ -162,27 +160,11 @@
|
||||||
|
|
||||||
--input-bgcolor: var(--zen-colors-tertiary) !important;
|
--input-bgcolor: var(--zen-colors-tertiary) !important;
|
||||||
--input-border-color: var(--zen-input-border-color) !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-themed-toolbar-bg-transparent: light-dark(var(--zen-branding-bg), #171717);
|
||||||
|
|
||||||
--zen-workspace-indicator-height: 48px;
|
--zen-workspace-indicator-height: 48px;
|
||||||
|
|
||||||
@media (-moz-windows-mica) or (-moz-platform: macos) {
|
--toolbar-field-color: var(--toolbox-textcolor) !important;
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[zen-private-window='true'] {
|
&[zen-private-window='true'] {
|
||||||
--zen-main-browser-background: linear-gradient(
|
--zen-main-browser-background: linear-gradient(
|
||||||
|
@ -239,6 +221,52 @@
|
||||||
|
|
||||||
#main-window:not([chromehidden~='toolbar']) {
|
#main-window:not([chromehidden~='toolbar']) {
|
||||||
min-height: 495px !important;
|
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) {
|
@media (prefers-color-scheme: dark) {
|
||||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 67 KiB |
|
@ -49,7 +49,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
async #insertStylesheet() {
|
async #insertStylesheet() {
|
||||||
|
try {
|
||||||
this.#modsBackend.rebuildModsStyles();
|
this.#modsBackend.rebuildModsStyles();
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('[ZenMods]: Error rebuilding mods styles:', e);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async #rebuildModsStylesheet() {
|
async #rebuildModsStylesheet() {
|
||||||
|
|
|
@ -3,17 +3,60 @@
|
||||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||||
|
|
||||||
{
|
{
|
||||||
class ZenThemePicker extends ZenMultiWindowFeature {
|
function parseSinePath(pathStr) {
|
||||||
static GRADIENT_IMAGE_URL = 'chrome://browser/content/zen-images/gradient.png';
|
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;
|
static MAX_DOTS = 3;
|
||||||
|
|
||||||
currentOpacity = 0.5;
|
currentOpacity = 0.5;
|
||||||
currentRotation = -45;
|
|
||||||
dots = [];
|
dots = [];
|
||||||
useAlgo = '';
|
useAlgo = '';
|
||||||
|
#currentLightness = 50;
|
||||||
|
|
||||||
#allowTransparencyOnSidebar = Services.prefs.getBoolPref('zen.theme.acrylic-elements', false);
|
#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() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
if (
|
if (
|
||||||
|
@ -39,6 +82,10 @@
|
||||||
document.getElementById('PanelUI-zen-gradient-generator-custom-list')
|
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('popupshowing', this.handlePanelOpen.bind(this));
|
||||||
this.panel.addEventListener('popuphidden', this.handlePanelClose.bind(this));
|
this.panel.addEventListener('popuphidden', this.handlePanelClose.bind(this));
|
||||||
this.panel.addEventListener('command', this.handlePanelCommand.bind(this));
|
this.panel.addEventListener('command', this.handlePanelCommand.bind(this));
|
||||||
|
@ -47,23 +94,53 @@
|
||||||
.getElementById('PanelUI-zen-gradient-generator-opacity')
|
.getElementById('PanelUI-zen-gradient-generator-opacity')
|
||||||
.addEventListener('input', this.onOpacityChange.bind(this));
|
.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.initCustomColorInput();
|
||||||
this.initTextureInput();
|
this.initTextureInput();
|
||||||
this.initRotationInput();
|
this.initSchemeButtons();
|
||||||
|
this.initColorPages();
|
||||||
|
|
||||||
window
|
const darkModeChange = this.handleDarkModeChange.bind(this);
|
||||||
.matchMedia('(prefers-color-scheme: dark)')
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', darkModeChange);
|
||||||
.addListener(this.onDarkModeChange.bind(this));
|
|
||||||
|
XPCOMUtils.defineLazyPreferenceGetter(
|
||||||
|
this,
|
||||||
|
'windowSchemeType',
|
||||||
|
'zen.theme.window.scheme',
|
||||||
|
true,
|
||||||
|
darkModeChange
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
handleDarkModeChange(event) {
|
||||||
|
this.updateCurrentWorkspace();
|
||||||
}
|
}
|
||||||
|
|
||||||
get isDarkMode() {
|
get isDarkMode() {
|
||||||
|
switch (this.windowSchemeType) {
|
||||||
|
case 'dark':
|
||||||
|
return true;
|
||||||
|
case 'light':
|
||||||
|
return false;
|
||||||
|
default:
|
||||||
|
}
|
||||||
return window.matchMedia('(prefers-color-scheme: dark)').matches;
|
return window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||||
}
|
}
|
||||||
|
|
||||||
async onDarkModeChange(event, skipUpdate = false) {
|
get colorHarmonies() {
|
||||||
const currentWorkspace = await gZenWorkspaces.getActiveWorkspace();
|
return [
|
||||||
this.onWorkspaceChange(currentWorkspace, skipUpdate);
|
{ type: 'complementary', angles: [180] },
|
||||||
|
{ type: 'splitComplementary', angles: [150, 210] },
|
||||||
|
{ type: 'analogous', angles: [50, 310] },
|
||||||
|
{ type: 'triadic', angles: [120, 240] },
|
||||||
|
{ type: 'floating', angles: [] },
|
||||||
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
initContextMenu() {
|
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() {
|
initPredefinedColors() {
|
||||||
document
|
document
|
||||||
.getElementById('PanelUI-zen-gradient-generator-predefined')
|
.getElementById('PanelUI-zen-gradient-generator-color-pages')
|
||||||
.addEventListener('click', async (event) => {
|
.addEventListener('click', async (event) => {
|
||||||
const target = event.target;
|
const target = event.target;
|
||||||
const rawPosition = target.getAttribute('data-position');
|
const rawPosition = target.getAttribute('data-position');
|
||||||
|
@ -130,6 +173,7 @@
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const algo = target.getAttribute('data-algo');
|
const algo = target.getAttribute('data-algo');
|
||||||
|
const lightness = target.getAttribute('data-lightness');
|
||||||
const numDots = parseInt(target.getAttribute('data-num-dots'));
|
const numDots = parseInt(target.getAttribute('data-num-dots'));
|
||||||
if (algo == 'float') {
|
if (algo == 'float') {
|
||||||
for (const dot of this.dots) {
|
for (const dot of this.dots) {
|
||||||
|
@ -157,6 +201,7 @@
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
this.useAlgo = algo;
|
this.useAlgo = algo;
|
||||||
|
this.#currentLightness = lightness;
|
||||||
dots = this.calculateCompliments(dots, 'update', this.useAlgo);
|
dots = this.calculateCompliments(dots, 'update', this.useAlgo);
|
||||||
if (algo == 'float') {
|
if (algo == 'float') {
|
||||||
for (const dot of dots) {
|
for (const dot of dots) {
|
||||||
|
@ -173,49 +218,52 @@
|
||||||
this.customColorInput.addEventListener('keydown', this.onCustomColorKeydown.bind(this));
|
this.customColorInput.addEventListener('keydown', this.onCustomColorKeydown.bind(this));
|
||||||
}
|
}
|
||||||
|
|
||||||
initRotationInput() {
|
initColorPages() {
|
||||||
const rotationInput = document.getElementById('PanelUI-zen-gradient-generator-rotation-dot');
|
const leftButton = document.getElementById('PanelUI-zen-gradient-generator-color-page-left');
|
||||||
this._onRotationMouseDown = this.onRotationMouseDown.bind(this);
|
const rightButton = document.getElementById(
|
||||||
this._onRotationMouseMove = this.onRotationMouseMove.bind(this);
|
'PanelUI-zen-gradient-generator-color-page-right'
|
||||||
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
|
|
||||||
);
|
);
|
||||||
const endRotation = (rotation * 180) / Math.PI;
|
const pagesWrapper = document.getElementById('PanelUI-zen-gradient-generator-color-pages');
|
||||||
// Between 150 and 50, we don't update the rotation
|
const pages = pagesWrapper.children;
|
||||||
if (!(endRotation < 45 || endRotation > 130)) {
|
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;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
initSchemeButtons() {
|
||||||
|
const buttons = document.getElementById('PanelUI-zen-gradient-generator-scheme');
|
||||||
|
buttons.addEventListener('click', (event) => {
|
||||||
|
const target = event.target.closest('.subviewbutton');
|
||||||
|
if (!target) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.currentRotation = endRotation;
|
|
||||||
this.updateCurrentWorkspace();
|
|
||||||
}
|
|
||||||
|
|
||||||
onRotationMouseUp(event) {
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
document.removeEventListener('mousemove', this._onRotationMouseMove);
|
const scheme = target.id.replace('PanelUI-zen-gradient-generator-scheme-', '');
|
||||||
document.removeEventListener('mouseup', this._onRotationMouseUp);
|
if (!scheme) {
|
||||||
setTimeout(() => {
|
return;
|
||||||
this._rotating = false;
|
}
|
||||||
}, 100);
|
if (this.currentScheme === scheme) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.currentScheme = scheme;
|
||||||
|
Services.prefs.setStringPref('zen.theme.window.scheme', scheme);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
initTextureInput() {
|
initTextureInput() {
|
||||||
|
@ -312,39 +360,110 @@
|
||||||
this._onThemePickerClick = null;
|
this._onThemePickerClick = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
calculateInitialPosition(color) {
|
/**
|
||||||
const [r, g, b] = color.c;
|
* Converts an HSL color value to RGB. Conversion formula
|
||||||
const imageData = this.canvasCtx.getImageData(0, 0, this.canvas.width, this.canvas.height);
|
* adapted from https://en.wikipedia.org/wiki/HSL_color_space.
|
||||||
// Find all pixels that are at least 90% similar to the color
|
* Assumes h, s, and l are contained in the set [0, 1] and
|
||||||
const similarPixels = [];
|
* returns r, g, and b in the set [0, 255].
|
||||||
for (let i = 0; i < imageData.data.length; i += 4) {
|
*
|
||||||
const pixelR = imageData.data[i];
|
* @param {number} h The hue
|
||||||
const pixelG = imageData.data[i + 1];
|
* @param {number} s The saturation
|
||||||
const pixelB = imageData.data[i + 2];
|
* @param {number} l The lightness
|
||||||
if (Math.abs(r - pixelR) < 25 && Math.abs(g - pixelG) < 25 && Math.abs(b - pixelB) < 25) {
|
* @return {Array} The RGB representation
|
||||||
similarPixels.push(i);
|
*/
|
||||||
|
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return [round(r * 255), round(g * 255), round(b * 255)];
|
||||||
}
|
}
|
||||||
// Check if there's an exact match
|
|
||||||
for (const pixel of similarPixels) {
|
rgbToHsl(r, g, b) {
|
||||||
const x = (pixel / 4) % this.canvas.width;
|
r /= 255;
|
||||||
const y = Math.floor(pixel / 4 / this.canvas.width);
|
g /= 255;
|
||||||
const pixelColor = this.getColorFromPosition(x, y);
|
b /= 255;
|
||||||
if (pixelColor[0] === r && pixelColor[1] === g && pixelColor[2] === b) {
|
let max = Math.max(r, g, b);
|
||||||
return { x: x / this.canvas.width, y: y / this.canvas.height };
|
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;
|
||||||
}
|
}
|
||||||
// If there's no exact match, return the first similar pixel
|
|
||||||
const pixel = similarPixels[0];
|
calculateInitialPosition([r, g, b]) {
|
||||||
const x = (pixel / 4) % this.canvas.width;
|
// This function is called before the picker is even rendered, so we hard code the dimensions
|
||||||
const y = Math.floor(pixel / 4 / this.canvas.width);
|
// important: If any sort of sizing is changed, make sure changes are reflected here
|
||||||
return { x: x / this.canvas.width, y: y / this.canvas.height };
|
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) {
|
getColorFromPosition(x, y) {
|
||||||
// get the color from the x and y from the image
|
// Return a color as hsl based on the position in the gradient
|
||||||
const imageData = this.canvasCtx.getImageData(x, y, 1, 1);
|
const gradient = this.panel.querySelector('.zen-theme-picker-gradient');
|
||||||
return imageData.data;
|
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) {
|
createDot(color, fromWorkspace = false) {
|
||||||
|
@ -361,13 +480,13 @@
|
||||||
dot.style.opacity = 0;
|
dot.style.opacity = 0;
|
||||||
dot.style.setProperty('--zen-theme-picker-dot-color', color.c);
|
dot.style.setProperty('--zen-theme-picker-dot-color', color.c);
|
||||||
} else {
|
} 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');
|
const dotPad = this.panel.querySelector('.zen-theme-picker-gradient');
|
||||||
|
|
||||||
dot.classList.add('zen-theme-picker-dot');
|
dot.classList.add('zen-theme-picker-dot');
|
||||||
|
|
||||||
dot.style.left = `${x * 100}%`;
|
dot.style.left = `${x}px`;
|
||||||
dot.style.top = `${y * 100}%`;
|
dot.style.top = `${y}px`;
|
||||||
|
|
||||||
if (this.dots.length < 1) {
|
if (this.dots.length < 1) {
|
||||||
dot.classList.add('primary');
|
dot.classList.add('primary');
|
||||||
|
@ -377,6 +496,7 @@
|
||||||
let id = this.dots.length;
|
let id = this.dots.length;
|
||||||
|
|
||||||
dot.style.setProperty('--zen-theme-picker-dot-color', `rgb(${r}, ${g}, ${b})`);
|
dot.style.setProperty('--zen-theme-picker-dot-color', `rgb(${r}, ${g}, ${b})`);
|
||||||
|
dot.setAttribute('data-position', this.getJSONPos(x, y));
|
||||||
|
|
||||||
this.dots.push({
|
this.dots.push({
|
||||||
ID: id,
|
ID: id,
|
||||||
|
@ -474,6 +594,7 @@
|
||||||
'--zen-theme-picker-dot-color',
|
'--zen-theme-picker-dot-color',
|
||||||
`rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})`
|
`rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})`
|
||||||
);
|
);
|
||||||
|
dot.setAttribute('data-position', this.getJSONPos(relativePosition.x, relativePosition.y));
|
||||||
|
|
||||||
this.dots.push({
|
this.dots.push({
|
||||||
ID: id,
|
ID: id,
|
||||||
|
@ -483,13 +604,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
calculateCompliments(dots, action = 'update', useHarmony = '') {
|
calculateCompliments(dots, action = 'update', useHarmony = '') {
|
||||||
const colorHarmonies = [
|
const colorHarmonies = this.colorHarmonies;
|
||||||
{ type: 'complementary', angles: [180] },
|
|
||||||
{ type: 'splitComplementary', angles: [150, 210] },
|
|
||||||
{ type: 'analogous', angles: [30, 330] },
|
|
||||||
{ type: 'triadic', angles: [120, 240] },
|
|
||||||
{ type: 'floating', angles: [] },
|
|
||||||
];
|
|
||||||
|
|
||||||
if (dots.length === 0) {
|
if (dots.length === 0) {
|
||||||
return [];
|
return [];
|
||||||
|
@ -614,6 +729,8 @@
|
||||||
'--zen-theme-picker-dot-color',
|
'--zen-theme-picker-dot-color',
|
||||||
`rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})`
|
`rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})`
|
||||||
);
|
);
|
||||||
|
|
||||||
|
dot.element.setAttribute('data-position', this.getJSONPos(pixelX, pixelY));
|
||||||
});
|
});
|
||||||
|
|
||||||
return;
|
return;
|
||||||
|
@ -630,6 +747,10 @@
|
||||||
'--zen-theme-picker-dot-color',
|
'--zen-theme-picker-dot-color',
|
||||||
`rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})`
|
`rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})`
|
||||||
);
|
);
|
||||||
|
existingPrimaryDot.element.setAttribute(
|
||||||
|
'data-position',
|
||||||
|
this.getJSONPos(existingPrimaryDot.position.x, existingPrimaryDot.position.y)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
colorPositions.forEach((dotPosition) => {
|
colorPositions.forEach((dotPosition) => {
|
||||||
|
@ -645,6 +766,10 @@
|
||||||
'--zen-theme-picker-dot-color',
|
'--zen-theme-picker-dot-color',
|
||||||
`rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})`
|
`rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})`
|
||||||
);
|
);
|
||||||
|
existingDot.element.setAttribute(
|
||||||
|
'data-position',
|
||||||
|
this.getJSONPos(dotPosition.position.x, dotPosition.position.y)
|
||||||
|
);
|
||||||
|
|
||||||
if (!this.dragging) {
|
if (!this.dragging) {
|
||||||
gZenUIManager.motion.animate(
|
gZenUIManager.motion.animate(
|
||||||
|
@ -673,10 +798,13 @@
|
||||||
if (this._rotating) {
|
if (this._rotating) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if (event.target.closest('#PanelUI-zen-gradient-generator-scheme')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
const target = event.target;
|
const target = event.target;
|
||||||
if (target.id === 'PanelUI-zen-gradient-generator-color-add') {
|
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);
|
let colorPositions = this.calculateCompliments(this.dots, 'add', this.useAlgo);
|
||||||
|
|
||||||
this.handleColorPositions(colorPositions);
|
this.handleColorPositions(colorPositions);
|
||||||
|
@ -702,30 +830,6 @@
|
||||||
this.handleColorPositions(colorPositions);
|
this.handleColorPositions(colorPositions);
|
||||||
this.updateCurrentWorkspace();
|
this.updateCurrentWorkspace();
|
||||||
return;
|
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;
|
if (event.button !== 0 || this.dragging || this.recentlyDragged) return;
|
||||||
|
@ -905,76 +1009,164 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
themedColors(colors) {
|
themedColors(colors) {
|
||||||
const isDarkMode = this.isDarkMode;
|
|
||||||
const factor = isDarkMode ? 0.5 : 1.1;
|
|
||||||
|
|
||||||
return colors.map((color) => ({
|
return colors.map((color) => ({
|
||||||
c: color.isCustom
|
c: color.isCustom
|
||||||
? color.c
|
? color.c
|
||||||
: [
|
: [Math.min(255, color.c[0]), Math.min(255, color.c[1]), Math.min(255, color.c[2])],
|
||||||
Math.min(255, color.c[0] * factor),
|
|
||||||
Math.min(255, color.c[1] * factor),
|
|
||||||
Math.min(255, color.c[2] * factor),
|
|
||||||
],
|
|
||||||
isCustom: color.isCustom,
|
isCustom: color.isCustom,
|
||||||
algorithm: color.algorithm,
|
algorithm: color.algorithm,
|
||||||
|
lightness: color.lightness,
|
||||||
|
position: color.position,
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
|
|
||||||
onOpacityChange(event) {
|
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();
|
this.updateCurrentWorkspace();
|
||||||
}
|
}
|
||||||
|
|
||||||
getToolbarModifiedBase() {
|
getToolbarModifiedBaseRaw() {
|
||||||
const opacity = this.#allowTransparencyOnSidebar ? 0.6 : 1;
|
const opacity = this.#allowTransparencyOnSidebar ? 0.6 : 1;
|
||||||
return this.isDarkMode
|
return this.isDarkMode ? [23, 23, 26, opacity] : [240, 240, 244, opacity];
|
||||||
? `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%)`;
|
|
||||||
|
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) {
|
getSingleRGBColor(color, forToolbar = false) {
|
||||||
if (color.isCustom) {
|
if (color.isCustom) {
|
||||||
return color.c;
|
return color.c;
|
||||||
}
|
}
|
||||||
|
const opacity = this.currentOpacity;
|
||||||
if (forToolbar) {
|
if (forToolbar) {
|
||||||
const toolbarBg = this.getToolbarModifiedBase();
|
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) {
|
getGradient(colors, forToolbar = false) {
|
||||||
const themedColors = this.themedColors(colors);
|
const themedColors = this.themedColors(colors);
|
||||||
this.useAlgo = themedColors[0]?.algorithm ?? '';
|
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) {
|
if (themedColors.length === 0) {
|
||||||
return forToolbar
|
return forToolbar
|
||||||
? 'var(--zen-themed-toolbar-bg)'
|
? this.getToolbarModifiedBase()
|
||||||
: 'var(--zen-themed-toolbar-bg-transparent)';
|
: 'var(--zen-themed-toolbar-bg-transparent)';
|
||||||
} else if (themedColors.length === 1) {
|
} else if (themedColors.length === 1) {
|
||||||
return this.getSingleRGBColor(themedColors[0], forToolbar);
|
return this.getSingleRGBColor(themedColors[0], forToolbar);
|
||||||
} else if (themedColors.length !== 3) {
|
} else if (themedColors.length === 2) {
|
||||||
return `linear-gradient(${this.currentRotation}deg, ${themedColors.map((color) => this.getSingleRGBColor(color, forToolbar)).join(', ')})`;
|
return [
|
||||||
} else {
|
`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 color1 = this.getSingleRGBColor(themedColors[2], forToolbar);
|
||||||
let color2 = this.getSingleRGBColor(themedColors[0], forToolbar);
|
let color2 = this.getSingleRGBColor(themedColors[0], forToolbar);
|
||||||
let color3 = this.getSingleRGBColor(themedColors[1], 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 {
|
return {
|
||||||
type: 'gradient',
|
type: 'gradient',
|
||||||
gradientColors: colors ? colors.filter((color) => color) : [], // remove undefined
|
gradientColors: colors ? colors.filter((color) => color) : [], // remove undefined
|
||||||
opacity,
|
opacity,
|
||||||
rotation,
|
|
||||||
texture,
|
texture,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
//TODO: add a better noise system that adds noise not just changes transparency
|
|
||||||
updateNoise(texture) {
|
updateNoise(texture) {
|
||||||
document.documentElement.style.setProperty('--zen-grainy-background-opacity', texture);
|
document.documentElement.style.setProperty('--zen-grainy-background-opacity', texture);
|
||||||
document.documentElement.setAttribute(
|
document.documentElement.setAttribute(
|
||||||
|
@ -1101,6 +1293,11 @@
|
||||||
return color;
|
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) {
|
async onWorkspaceChange(workspace, skipUpdate = false, theme = null) {
|
||||||
const uuid = workspace.uuid;
|
const uuid = workspace.uuid;
|
||||||
// Use theme from workspace object or passed theme
|
// 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) {
|
if (!skipUpdate) {
|
||||||
browser.document.documentElement.style.setProperty(
|
browser.document.documentElement.style.setProperty(
|
||||||
'--zen-main-browser-background-old',
|
'--zen-main-browser-background-old',
|
||||||
|
@ -1140,7 +1348,7 @@
|
||||||
);
|
);
|
||||||
browser.document.documentElement.style.setProperty(
|
browser.document.documentElement.style.setProperty(
|
||||||
'--zen-background-opacity',
|
'--zen-background-opacity',
|
||||||
browser.gZenThemePicker.previousBackgroundOpacity
|
browser.gZenThemePicker.previousBackgroundOpacity ?? 1
|
||||||
);
|
);
|
||||||
if (browser.gZenThemePicker.previousBackgroundResolve) {
|
if (browser.gZenThemePicker.previousBackgroundResolve) {
|
||||||
browser.gZenThemePicker.previousBackgroundResolve();
|
browser.gZenThemePicker.previousBackgroundResolve();
|
||||||
|
@ -1148,18 +1356,6 @@
|
||||||
delete browser.gZenThemePicker.previousBackgroundOpacity;
|
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();
|
browser.gZenThemePicker.resetCustomColorList();
|
||||||
if (!workspaceTheme || workspaceTheme.type !== 'gradient') {
|
if (!workspaceTheme || workspaceTheme.type !== 'gradient') {
|
||||||
const gradient = browser.gZenThemePicker.getGradient([]);
|
const gradient = browser.gZenThemePicker.getGradient([]);
|
||||||
|
@ -1177,13 +1373,48 @@
|
||||||
'--zen-primary-color',
|
'--zen-primary-color',
|
||||||
this.getNativeAccentColor()
|
this.getNativeAccentColor()
|
||||||
);
|
);
|
||||||
|
browser.document.documentElement.removeAttribute('zen-should-be-dark-mode');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
browser.gZenThemePicker.currentOpacity = workspaceTheme.opacity ?? 0.5;
|
browser.gZenThemePicker.currentOpacity = workspaceTheme.opacity ?? 0.5;
|
||||||
browser.gZenThemePicker.currentRotation = workspaceTheme.rotation ?? -45;
|
|
||||||
browser.gZenThemePicker.currentTexture = workspaceTheme.texture ?? 0;
|
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(
|
for (const button of browser.document.querySelectorAll(
|
||||||
'#PanelUI-zen-gradient-generator-color-actions button'
|
'#PanelUI-zen-gradient-generator-color-actions button'
|
||||||
)) {
|
)) {
|
||||||
|
@ -1191,15 +1422,14 @@
|
||||||
button.disabled =
|
button.disabled =
|
||||||
workspaceTheme.gradientColors.length === 0 ||
|
workspaceTheme.gradientColors.length === 0 ||
|
||||||
(button.id === 'PanelUI-zen-gradient-generator-color-add'
|
(button.id === 'PanelUI-zen-gradient-generator-color-add'
|
||||||
? workspaceTheme.gradientColors.length >= ZenThemePicker.MAX_DOTS
|
? workspaceTheme.gradientColors.length >= nsZenThemePicker.MAX_DOTS
|
||||||
: false);
|
: false);
|
||||||
}
|
}
|
||||||
document
|
document
|
||||||
.getElementById('PanelUI-zen-gradient-generator-color-click-to-add')
|
.getElementById('PanelUI-zen-gradient-generator-color-click-to-add')
|
||||||
.toggleAttribute('hidden', workspaceTheme.gradientColors.length > 0);
|
.toggleAttribute('hidden', workspaceTheme.gradientColors.length > 0);
|
||||||
|
|
||||||
browser.document.getElementById('PanelUI-zen-gradient-generator-opacity').value =
|
opacitySlider.value = browser.gZenThemePicker.currentOpacity;
|
||||||
browser.gZenThemePicker.currentOpacity;
|
|
||||||
const textureSelectWrapper = browser.document.getElementById(
|
const textureSelectWrapper = browser.document.getElementById(
|
||||||
'PanelUI-zen-gradient-generator-texture-wrapper'
|
'PanelUI-zen-gradient-generator-texture-wrapper'
|
||||||
);
|
);
|
||||||
|
@ -1228,35 +1458,6 @@
|
||||||
i = 0;
|
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);
|
const gradient = browser.gZenThemePicker.getGradient(workspaceTheme.gradientColors);
|
||||||
|
@ -1290,6 +1491,25 @@
|
||||||
? dominantColor
|
? dominantColor
|
||||||
: `rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})`
|
: `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) {
|
if (!skipUpdate) {
|
||||||
|
@ -1364,19 +1584,18 @@
|
||||||
}
|
}
|
||||||
const isCustom = dot.classList.contains('custom');
|
const isCustom = dot.classList.contains('custom');
|
||||||
const algorithm = this.useAlgo;
|
const algorithm = this.useAlgo;
|
||||||
|
const position =
|
||||||
|
dot.getAttribute('data-position') && JSON.parse(dot.getAttribute('data-position'));
|
||||||
return {
|
return {
|
||||||
c: isCustom ? color : color.match(/\d+/g).map(Number),
|
c: isCustom ? color : color.match(/\d+/g).map(Number),
|
||||||
isCustom,
|
isCustom,
|
||||||
algorithm,
|
algorithm,
|
||||||
isPrimary,
|
isPrimary,
|
||||||
|
lightness: this.#currentLightness,
|
||||||
|
position,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
const gradient = ZenThemePicker.getTheme(
|
const gradient = nsZenThemePicker.getTheme(colors, this.currentOpacity, this.currentTexture);
|
||||||
colors,
|
|
||||||
this.currentOpacity,
|
|
||||||
this.currentRotation,
|
|
||||||
this.currentTexture
|
|
||||||
);
|
|
||||||
let currentWorkspace = await gZenWorkspaces.getActiveWorkspace();
|
let currentWorkspace = await gZenWorkspaces.getActiveWorkspace();
|
||||||
|
|
||||||
if (!skipSave) {
|
if (!skipSave) {
|
||||||
|
@ -1402,7 +1621,38 @@
|
||||||
this.updateCurrentWorkspace();
|
this.updateCurrentWorkspace();
|
||||||
}, 200);
|
}, 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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -145,6 +145,7 @@
|
||||||
i++;
|
i++;
|
||||||
}
|
}
|
||||||
buttons[selected].setAttribute('active', true);
|
buttons[selected].setAttribute('active', true);
|
||||||
|
this.scrollLeft = buttons[selected].offsetLeft - 10;
|
||||||
this.setAttribute('selected', selected);
|
this.setAttribute('selected', selected);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -885,7 +885,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||||
this.activeWorkspace = activeWorkspace?.uuid;
|
this.activeWorkspace = activeWorkspace?.uuid;
|
||||||
try {
|
try {
|
||||||
if (activeWorkspace) {
|
if (activeWorkspace) {
|
||||||
window.gZenThemePicker = new ZenThemePicker();
|
window.gZenThemePicker = new nsZenThemePicker();
|
||||||
await gZenThemePicker.onWorkspaceChange(activeWorkspace);
|
await gZenThemePicker.onWorkspaceChange(activeWorkspace);
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
@ -2179,7 +2179,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||||
uuid: gZenUIManager.generateUuidv4(),
|
uuid: gZenUIManager.generateUuidv4(),
|
||||||
icon: icon,
|
icon: icon,
|
||||||
name: name,
|
name: name,
|
||||||
theme: ZenThemePicker.getTheme([]),
|
theme: nsZenThemePicker.getTheme([]),
|
||||||
containerTabId,
|
containerTabId,
|
||||||
};
|
};
|
||||||
if (moveTabs) {
|
if (moveTabs) {
|
||||||
|
|
|
@ -6,6 +6,8 @@
|
||||||
|
|
||||||
&:not(:hover) {
|
&:not(:hover) {
|
||||||
width: min(var(--zen-overflowed-workspace-button-width), 25px);
|
width: min(var(--zen-overflowed-workspace-button-width), 25px);
|
||||||
|
min-width: 10px;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
#PanelUI-zen-gradient-generator {
|
#PanelUI-zen-gradient-generator {
|
||||||
--panel-width: 320px;
|
--panel-width: 340px;
|
||||||
--panel-padding: 10px;
|
--panel-padding: 10px;
|
||||||
min-width: var(--panel-width);
|
min-width: var(--panel-width);
|
||||||
}
|
}
|
||||||
|
@ -20,6 +20,7 @@
|
||||||
#PanelUI-zen-gradient-generator-controls {
|
#PanelUI-zen-gradient-generator-controls {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--panel-padding);
|
gap: var(--panel-padding);
|
||||||
|
padding-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#zen-theme-picker-color {
|
#zen-theme-picker-color {
|
||||||
|
@ -62,7 +63,11 @@
|
||||||
padding: 0 var(--panel-padding);
|
padding: 0 var(--panel-padding);
|
||||||
|
|
||||||
@media (-moz-platform: macos) {
|
@media (-moz-platform: macos) {
|
||||||
gap: 3rem;
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#PanelUI-zen-gradient-opacity-wrapper {
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
& label {
|
& label {
|
||||||
|
@ -76,12 +81,23 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#PanelUI-zen-gradient-generator-predefined {
|
#PanelUI-zen-gradient-generator-color-pages-wrapper {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#PanelUI-zen-gradient-generator-color-pages {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
|
margin: 0 10px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin: 5px auto 10px auto;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
scrollbar-width: none;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
|
||||||
|
& > hbox {
|
||||||
|
justify-content: space-around;
|
||||||
|
min-width: 100%;
|
||||||
|
|
||||||
& > box {
|
& > box {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
|
@ -120,6 +136,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#PanelUI-zen-gradient-generator-custom-list {
|
#PanelUI-zen-gradient-generator-custom-list {
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
|
@ -164,46 +181,72 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#PanelUI-zen-gradient-generator-opacity,
|
#PanelUI-zen-gradient-slider-wave {
|
||||||
#PanelUI-zen-gradient-generator-texture {
|
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: 0 !important;
|
||||||
margin-top: 5px !important;
|
|
||||||
background: transparent;
|
background: transparent;
|
||||||
|
z-index: 2;
|
||||||
|
|
||||||
&::-moz-range-thumb {
|
&::-moz-range-thumb {
|
||||||
background: var(--zen-colors-tertiary);
|
background: light-dark(black, white);
|
||||||
border: 2px solid var(--zen-colors-border);
|
border-radius: 999px;
|
||||||
border-radius: 12px;
|
height: var(--zen-thumb-height);
|
||||||
height: 25px;
|
width: var(--zen-thumb-width);
|
||||||
width: 13px;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-moz-range-track {
|
&::-moz-range-track {
|
||||||
background: light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.3));
|
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
height: 6px;
|
height: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-moz-range-progress {
|
&::-moz-range-progress {
|
||||||
background: var(--zen-primary-color);
|
background: transparent;
|
||||||
border-radius: 999px;
|
|
||||||
height: 8px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.zen-theme-picker-gradient {
|
.zen-theme-picker-gradient {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: calc(var(--zen-border-radius) - 2px);
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: var(--zen-border-radius);
|
border-radius: var(--zen-border-radius);
|
||||||
|
|
||||||
min-height: calc(var(--panel-width) - var(--panel-padding) * 2);
|
min-height: calc(var(--panel-width) - var(--panel-padding) * 2 - 2px);
|
||||||
margin-bottom: 20px;
|
background: color-mix(in srgb, var(--zen-toolbar-element-bg) 60%, transparent 40%);
|
||||||
|
|
||||||
background: var(--zen-toolbar-element-bg);
|
|
||||||
background-image: radial-gradient(
|
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
|
transparent 0
|
||||||
);
|
);
|
||||||
background-position: -19px -19px;
|
background-position: -19px -19px;
|
||||||
|
@ -220,7 +263,7 @@
|
||||||
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: 2px solid #ffffff;
|
border: 3px solid #ffffff;
|
||||||
animation: zen-theme-picker-dot-animation 0.5s;
|
animation: zen-theme-picker-dot-animation 0.5s;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
|
|
||||||
|
@ -229,7 +272,7 @@
|
||||||
height: 36px;
|
height: 36px;
|
||||||
border-width: 4px;
|
border-width: 4px;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
transition: transform 0.1s;
|
transition: transform 0.2s;
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: scale(1.05) translate(-50%, -50%);
|
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 {
|
#PanelUI-zen-gradient-generator-color-click-to-add {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-weight: 600;
|
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;
|
display: flex;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 8px;
|
bottom: 12px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
& .separator,
|
gap: 5px;
|
||||||
& #PanelUI-zen-gradient-generator-color-toggle-algo {
|
|
||||||
background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.15));
|
|
||||||
}
|
|
||||||
|
|
||||||
& button {
|
& button {
|
||||||
border: none !important;
|
border: none !important;
|
||||||
|
@ -273,17 +318,20 @@
|
||||||
min-width: fit-content !important;
|
min-width: fit-content !important;
|
||||||
transition: background 0.2s;
|
transition: background 0.2s;
|
||||||
appearance: none;
|
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 {
|
& .button-box {
|
||||||
gap: 0.1rem;
|
gap: 0.1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(#PanelUI-zen-gradient-generator-color-toggle-algo) .button-text {
|
& .button-text {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: light-dark(#cfcfcf, #313131);
|
background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
|
||||||
}
|
}
|
||||||
|
|
||||||
&[disabled] {
|
&[disabled] {
|
||||||
|
@ -291,12 +339,11 @@
|
||||||
cursor: not-allowed;
|
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') {
|
@media not -moz-pref('zen.theme.gradient.show-custom-colors') {
|
||||||
|
@ -311,9 +358,8 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
@media (-moz-platform: macos) {
|
@media (-moz-platform: macos) {
|
||||||
width: 25%;
|
width: 5rem;
|
||||||
aspect-ratio: 1;
|
height: 5rem;
|
||||||
height: unset;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
|
@ -381,32 +427,9 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#PanelUI-zen-gradient-generator-rotation-line {
|
#PanelUI-zen-gradient-generator-color-page-left,
|
||||||
border: 1px solid var(--zen-colors-border);
|
#PanelUI-zen-gradient-generator-color-page-right {
|
||||||
position: absolute;
|
max-width: 28px;
|
||||||
--rotation-padding: 15px;
|
max-height: 28px;
|
||||||
width: calc(100% - var(--rotation-padding) * 2);
|
margin: 0 !important;
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue