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

Choosing colors from the gradient generator now works

Browse Source
This commit is contained in:
mr. M
2024-10-25 12:54:45 +02:00
parent 2ea79db343
commit c4502c2762
5 changed files with 23 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -47,6 +47,9 @@
content/browser/zen-styles/zen-compact-mode.css (content/zen-styles/zen-compact-mode.css)
# Images
content/browser/zen-images/gradient.png (content/zen-images/gradient.png)
# Actors
content/browser/zen-components/actors/ZenThemeMarketplaceParent.sys.mjs (content/zen-components/src/actors/ZenThemeMarketplaceParent.sys.mjs)
content/browser/zen-components/actors/ZenThemeMarketplaceChild.sys.mjs (content/zen-components/src/actors/ZenThemeMarketplaceChild.sys.mjs)

2
src/browser/base/content/zen-components

Submodule src/browser/base/content/zen-components updated: 4c79e99adf...23e6294c9a

BIN
src/browser/base/content/zen-images/gradient.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

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

@@ -104,8 +104,7 @@
<panel flip="side" type="arrow" 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 class="zen-theme-picker-gradient">
</hbox>
<hbox class="zen-theme-picker-gradient"></hbox>
</panelview>
</panelmultiview>
</panel>

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

@@ -8,20 +8,34 @@
position: relative;
border-radius: var(--zen-border-radius);
border: 1px solid var(--zen-colors-border);
background: var(--zen-themed-toolbar-bg);
min-height: calc(var(--panel-width) - var(--panel-padding) * 2);
min-width: calc(var(--panel-width) - var(--panel-padding) * 2);
background: var(--zen-theme-picker-gradient-image) center center / cover no-repeat;
&::before {
background: color-mix(in srgb, var(--zen-themed-toolbar-bg) 50%, transparent 50%);
backdrop-filter: blur(5px);
content: '';
position: absolute;
top: 0;
left: 0;
pointer-events: none;
width: 100%;
height: 100%;
}
& .zen-theme-picker-dot {
position: absolute;
width: 16px;
height: 16px;
z-index: 2;
width: 20px;
height: 20px;
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 var(--zen-colors-border);
border: 2px solid #fff;
animation: zen-theme-picker-dot-animation .5s;
transition: transform .2s;