mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-14 05:46:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Gradient hue revamp (#9093)

Browse Source
This commit is contained in:
mr. m
2025-06-24 14:08:40 +02:00
committed by GitHub
parent ba7eff60ef
commit b735567504
24 changed files with 799 additions and 440 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/browser/base/content/zen-assets.jar.inc.mn
View File

@@ -76,7 +76,6 @@
# Images
content/browser/zen-images/gradient.png (../../zen/images/gradient.png)
content/browser/zen-images/brand-header.svg (../../zen/images/brand-header.svg)
content/browser/zen-images/layouts/collapsed.png (../../zen/images/layouts/collapsed.png)
content/browser/zen-images/layouts/multiple-toolbar.png (../../zen/images/layouts/multiple-toolbar.png)

75
src/browser/base/content/zen-panels/gradient-generator.inc
View File

@@ -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">
<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">
<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">
<box id="PanelUI-zen-gradient-generator-rotation-dot"></box>
<box id="PanelUI-zen-gradient-generator-rotation-line"></box>
<box id="PanelUI-zen-gradient-generator-color-actions">
<hbox id="PanelUI-zen-gradient-generator-scheme">
<button id="PanelUI-zen-gradient-generator-scheme-auto" class="subviewbutton"/>
<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>
<button id="PanelUI-zen-gradient-generator-color-remove" class="subviewbutton">
</button>
<html:div class="separator"></html:div>
<button id="PanelUI-zen-gradient-generator-color-toggle-algo" class="subviewbutton" data-l10n-id="zen-panel-ui-gradient-generator-algo-floating">
</button>
</box>
</hbox>
<label data-l10n-id="zen-panel-ui-gradient-click-to-add" id="PanelUI-zen-gradient-generator-color-click-to-add"></label>
</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-colors-wrapper">
<vbox flex="1">
<label data-l10n-id="zen-panel-ui-gradient-generator-opacity-text"></label>
<html:input type="range" min="0" max="1" value="0.5" step="0.05" id="PanelUI-zen-gradient-generator-opacity" />
<vbox flex="1" id="PanelUI-zen-gradient-opacity-wrapper">
<box id="PanelUI-zen-gradient-slider-wave">
<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 id="PanelUI-zen-gradient-generator-texture-wrapper">
</vbox>