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

Refactor zen gradient generator: update theme picker initialization and event handling, improve CSS styles, and clean up unused code.

Browse Source
This commit is contained in:
mr. M
2025-02-18 13:29:58 +01:00
parent 82a98b8dd3
commit 0044b0206a
4 changed files with 51 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/browser/base/content/zen-popupset.inc.xhtml
View File

@@ -82,7 +82,7 @@
</panel>
</html:template>
<panel flip="side" type="arrow" orient="vertical" id="PanelUI-zen-gradient-generator" position="bottomright topright" mainview="true" side="left" onpopuphidden="gZenThemePicker.handlePanelClose();">
<panel flip="side" type="arrow" orient="vertical" id="PanelUI-zen-gradient-generator" position="bottomright topright" mainview="true" side="left" onpopuphidden="gZenThemePicker.handlePanelClose();" onpopupshowing="gZenThemePicker.handlePanelOpen();">
<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 class="zen-theme-picker-gradient">
@@ -97,9 +97,7 @@
</div>
</hbox>
<hbox id="PanelUI-zen-gradient-generator-controls">
<vbox id="PanelUI-zen-gradient-generator-options">
</vbox>
<vbox id="PanelUI-zen-gradient-colors-wrapper">
<hbox id="PanelUI-zen-gradient-colors-wrapper">
<vbox>
<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" oninput="gZenThemePicker.onOpacityChange(event);" id="PanelUI-zen-gradient-generator-opacity" />
@@ -108,7 +106,7 @@
<label data-l10n-id="zen-panel-ui-gradient-generator-texture-text"></label>
<html:input type="range" min="0" max="1" value="0.5" step="0.05" oninput="gZenThemePicker.onTextureChange(event);" id="PanelUI-zen-gradient-generator-texture" />
</vbox>
</vbox>
</hbox>
</hbox>
<vbox id="PanelUI-zen-gradient-generator-custom-colors">
<vbox id="zen-theme-picker-color">

25
src/browser/base/content/zen-styles/zen-gradient-generator.css
View File

@@ -62,13 +62,6 @@
gap: 10px;
}
#PanelUI-zen-gradient-generator-options {
align-items: center;
margin: auto;
height: 100%;
justify-content: center;
}
#PanelUI-zen-gradient-generator-custom-list {
margin-top: 15px;
@@ -180,26 +173,31 @@
position: absolute;
top: 0;
left: 0;
margin: var(--panel-padding);
width: calc(100% - var(--panel-padding) * 2);
height: calc(100% - var(--panel-padding) * 2);
width: 100%;
height: 100%;
opacity: 0.1;
}
& .zen-theme-picker-dot {
position: absolute;
z-index: 2;
width: 28px;
height: 28px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--zen-theme-picker-dot-color);
box-shadow: 0 0 0 2px var(--zen-themed-toolbar-bg);
cursor: pointer;
border: 3px solid #fff;
border: 2px solid #fff;
animation: zen-theme-picker-dot-animation 0.5s;
transition: transform 0.2s;
transform: translate(-50%, -50%);
&.primary {
width: 26px;
height: 26px;
border-width: 3px;
}
&[dragging='true'] {
transform: scale(1.2) translate(-50%, -50%) !important;
}
@@ -207,7 +205,6 @@
}
#PanelUI-zen-gradient-generator-color-actions {
color-scheme: dark; /* Always use light colors */
display: flex;
position: absolute;
bottom: 20px;