mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-09-05 19:08:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improved UI for gradient generator

Browse Source
This commit is contained in:
mr. M
2024-10-26 00:08:27 +02:00
parent e7a52289c8
commit 5d0c22c374
3 changed files with 31 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

Submodule src/browser/base/content/zen-components updated: 649b22bbe3...4a5809f950

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

@@ -106,14 +106,14 @@
<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 id="PanelUI-zen-gradient-generator-controls">
<hbox id="PanelUI-zen-gradient-degrees">
<box class="dot"></box>
<box class="text"></box>
</hbox>
<vbox id="PanelUI-zen-gradient-colors-wrapper">
<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" />
</vbox>
<hbox id="PanelUI-zen-gradient-degrees">
<box class="dot"></box>
<box class="text"></box>
</hbox>
</hbox>
</panelview>
</panelmultiview>

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

@@ -12,12 +12,12 @@
min-width: 50px;
max-height: 50px;
max-width: 50px;
border: 1px solid var(--zen-colors-border);
border: 2px solid var(--zen-primary-color);
display: flex;
justify-items: center;
align-items: center;
margin-left: 5px;
margin-right: 25px;
margin-right: 10px;
margin-left: auto;
z-index: 1;
& .dot {
@@ -71,11 +71,32 @@
#PanelUI-zen-gradient-generator-opacity {
margin-right: 5px;
width: 100%;
&::-moz-range-thumb {
background: var(--zen-colors-tertiary);
border: 2px solid var(--zen-colors-border);
border-radius: 50%;
height: 13px;
width: 13px;
}
&::-moz-range-track {
background: var(--zen-colors-border);
border-radius: 999px;
height: 4px;
}
&::-moz-range-progress {
background: var(--zen-primary-color);
border-radius: 999px;
height: 4px;
}
}
.zen-theme-picker-gradient {
position: relative;
border-radius: var(--zen-border-radius);
border-radius: calc(var(--zen-border-radius) + 5px);
overflow: hidden;
border: 1px solid var(--zen-colors-border);
min-height: calc(var(--panel-width) - var(--panel-padding) * 2);
@@ -95,6 +116,7 @@
pointer-events: none;
width: 100%;
height: 100%;
border-radius: calc(var(--zen-border-radius) + 5px);
}
& .zen-theme-picker-dot {