mirror of
https://github.com/zen-browser/desktop.git
synced 2025-07-07 11:25:31 +02:00
feat: Finished gradient predefined colors, b=no-bug, c=common, tabs, workspaces
This commit is contained in:
mr. m
parent
08947fd4a1
commit
7d7e57d6ee
8 changed files with 82 additions and 100 deletions
|
|
@ -23,24 +23,44 @@
|
|||
<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>
|
||||
<box data-lightness="90" data-algo="float" data-num-dots="1" data-position="240,240" style="background: #f4efdf;"></box>
|
||||
<box data-lightness="80" data-algo="float" data-num-dots="1" data-position="233,157" style="background: #f0b8cd;"></box>
|
||||
<box data-lightness="80" data-algo="float" data-num-dots="1" data-position="236,111" style="background: #e9c3e3;"></box>
|
||||
<box data-lightness="70" data-algo="float" data-num-dots="1" data-position="234,173" style="background: #da7682;"></box>
|
||||
<box data-lightness="70" data-algo="float" data-num-dots="1" data-position="220,187" style="background: #eb8570;"></box>
|
||||
<box data-lightness="60" data-algo="float" data-num-dots="1" data-position="225,237" style="background: #dcce7f;"></box>
|
||||
<box data-lightness="60" data-algo="float" data-num-dots="1" data-position="147,195" style="background: #5becad;"></box>
|
||||
<box data-lightness="50" data-algo="float" data-num-dots="1" data-position="81,84" style="background: #919bb5;"></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>
|
||||
<box data-lightness="90" data-algo="analogous" data-num-dots="3" data-position="240,240" style="background: linear-gradient(135deg, #f4efdf, rgb(244, 223, 244));"></box>
|
||||
<box data-lightness="85" data-algo="analogous" data-num-dots="3" data-position="233,157" style="background: linear-gradient(135deg, #f0b8cd,rgb(244, 237, 224));"></box>
|
||||
<box data-lightness="80" data-algo="analogous" data-num-dots="3" data-position="236,111" style="background: linear-gradient(135deg, #e9c3e3,rgb(144, 97, 116));"></box>
|
||||
<box data-lightness="70" data-algo="analogous" data-num-dots="3" data-position="234,173" style="background: linear-gradient(135deg, #da7682,rgb(242, 197, 160));"></box>
|
||||
<box data-lightness="70" data-algo="analogous" data-num-dots="3" data-position="220,187" style="background: linear-gradient(135deg, #eb8570,rgb(229, 244, 164));"></box>
|
||||
<box data-lightness="60" data-algo="analogous" data-num-dots="3" data-position="225,237" style="background: linear-gradient(135deg, #dcce7f,rgb(115, 195, 128));"></box>
|
||||
<box data-lightness="60" data-algo="analogous" data-num-dots="3" data-position="147,195" style="background: linear-gradient(135deg, #5becad,rgb(195, 248, 207));"></box>
|
||||
<box data-lightness="55" data-algo="analogous" data-num-dots="3" data-position="81,84" style="background: linear-gradient(135deg, #919bb5,rgb(179, 176, 223));"></box>
|
||||
</hbox>
|
||||
<hbox>
|
||||
<box data-lightness="10" data-algo="float" data-num-dots="1" data-position="171,72" style="background:rgb(93, 86, 106);"></box>
|
||||
<box data-lightness="40" data-algo="float" data-num-dots="1" data-position="265,79" style="background: #997096;"></box>
|
||||
<box data-lightness="35" data-algo="float" data-num-dots="1" data-position="301,176" style="background: #956066;"></box>
|
||||
<box data-lightness="30" data-algo="float" data-num-dots="1" data-position="237,210" style="background: #9c6645;"></box>
|
||||
<box data-lightness="30" data-algo="float" data-num-dots="1" data-position="91,228" style="background: #517b6c;"></box>
|
||||
<box data-lightness="25" data-algo="float" data-num-dots="1" data-position="67,159" style="background: #576e75;"></box>
|
||||
<box data-lightness="20" data-algo="float" data-num-dots="1" data-position="314,235" style="background:rgb(131, 109, 95);"></box>
|
||||
<box data-lightness="20" data-algo="float" data-num-dots="1" data-position="118,215" style="background: #447464;"></box>
|
||||
</hbox>
|
||||
<hbox>
|
||||
<box data-lightness="10" data-algo="analogous" data-num-dots="3" data-position="171,72" style="background: linear-gradient(135deg, #584e69,rgb(32, 27, 41));"></box>
|
||||
<box data-lightness="40" data-algo="analogous" data-num-dots="3" data-position="265,79" style="background: linear-gradient(135deg, #997096,rgb(125, 62, 88));"></box>
|
||||
<box data-lightness="35" data-algo="analogous" data-num-dots="3" data-position="301,176" style="background: linear-gradient(135deg, #956066,rgb(116, 82, 131));"></box>
|
||||
<box data-lightness="30" data-algo="analogous" data-num-dots="3" data-position="237,210" style="background: linear-gradient(135deg, #9c6645,rgb(171, 195, 109));"></box>
|
||||
<box data-lightness="30" data-algo="analogous" data-num-dots="3" data-position="91,228" style="background: linear-gradient(135deg, #517b6c,rgb(118, 141, 164));"></box>
|
||||
<box data-lightness="25" data-algo="analogous" data-num-dots="3" data-position="67,159" style="background: linear-gradient(135deg, #576e75,rgb(67, 66, 92));"></box>
|
||||
<box data-lightness="20" data-algo="analogous" data-num-dots="3" data-position="314,235" style="background: linear-gradient(135deg, #665951,rgb(81, 67, 59));"></box>
|
||||
<box data-lightness="20" data-algo="analogous" data-num-dots="3" data-position="118,215" style="background: linear-gradient(135deg, #447464,rgb(109, 129, 168));"></box>
|
||||
</hbox>
|
||||
</hbox>
|
||||
<toolbarbutton id="PanelUI-zen-gradient-generator-color-page-right" class="toolbarbutton-1" />
|
||||
|
|
@ -64,7 +84,7 @@
|
|||
</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" />
|
||||
<html:input type="range" min="0.15" max="0.8" value="0.4" step="0.01" id="PanelUI-zen-gradient-generator-opacity" />
|
||||
</vbox>
|
||||
<vbox id="PanelUI-zen-gradient-generator-texture-wrapper">
|
||||
</vbox>
|
||||
|
|
|
|||
|
|
@ -190,6 +190,7 @@
|
|||
|
||||
@media -moz-pref('zen.widget.mac.mono-window-controls') {
|
||||
.titlebar-buttonbox-container {
|
||||
color: var(--toolbox-textcolor);
|
||||
/* Draw 3 dots as background to represent the window controls,
|
||||
all with the same cololr as the titlebar */
|
||||
background-image: radial-gradient(
|
||||
|
|
|
|||
|
|
@ -98,3 +98,22 @@ body > #confetti {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbarbutton-1 {
|
||||
--tab-border-radius: 6px;
|
||||
--toolbarbutton-border-radius: var(--tab-border-radius);
|
||||
--toolbarbutton-inner-padding: 7px;
|
||||
|
||||
&,
|
||||
& stack {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
transition:
|
||||
background-color 0.1s,
|
||||
scale 0.2s;
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -117,7 +117,7 @@
|
|||
--zen-button-padding: 0.6rem 1.2rem;
|
||||
|
||||
--zen-toolbar-element-bg: light-dark(
|
||||
color-mix(in srgb, currentColor 5%, transparent 5%),
|
||||
color-mix(in srgb, currentColor 6%, transparent 94%),
|
||||
color-mix(in srgb, currentColor 10%, transparent 90%)
|
||||
) !important;
|
||||
|
||||
|
|
@ -126,6 +126,8 @@
|
|||
--zen-toolbar-button-inner-padding: 6px;
|
||||
--toolbarbutton-outer-padding: 4px;
|
||||
|
||||
--toolbarbutton-inner-padding: 5px !important;
|
||||
|
||||
--toolbarbutton-hover-background: color-mix(
|
||||
in srgb,
|
||||
var(--zen-branding-bg-reverse) 10%,
|
||||
|
|
|
|||
|
|
@ -42,11 +42,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* Adjust padding for top sidebar buttons */
|
||||
& #zen-sidebar-top-buttons .toolbarbutton-1 > .toolbarbutton-icon {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
/* Make the separator take full width */
|
||||
& #zen-sidebar-top-buttons-separator {
|
||||
width: 100%;
|
||||
|
|
@ -428,7 +423,6 @@
|
|||
gap: 5px;
|
||||
align-items: center;
|
||||
padding-top: var(--zen-element-separation);
|
||||
--toolbarbutton-inner-padding: 5px;
|
||||
|
||||
& > toolbarbutton:not(#zen-workspaces-button) {
|
||||
padding: 0 !important;
|
||||
|
|
@ -1174,14 +1168,6 @@
|
|||
padding-inline-end: var(--zen-toolbox-padding); /* Add end padding for right sidebar */
|
||||
}
|
||||
|
||||
/* Standardize height and padding for toolbar buttons (excluding titlebar buttons) */
|
||||
& toolbarbutton:not(.titlebar-button) {
|
||||
height: calc(
|
||||
2 * var(--toolbarbutton-inner-padding) + 16px
|
||||
); /* Calculate height based on padding + icon */
|
||||
padding: 0 var(--toolbarbutton-outer-padding) !important; /* Apply outer padding */
|
||||
}
|
||||
|
||||
/* Hide flexible space when collapsed */
|
||||
:root:not([zen-sidebar-expanded='true']) & toolbarspring {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -175,12 +175,7 @@
|
|||
const algo = target.getAttribute('data-algo');
|
||||
const lightness = target.getAttribute('data-lightness');
|
||||
const numDots = parseInt(target.getAttribute('data-num-dots'));
|
||||
if (algo == 'float') {
|
||||
for (const dot of this.dots) {
|
||||
dot.element.remove();
|
||||
}
|
||||
this.dots = [];
|
||||
} else if (numDots < this.dots.length) {
|
||||
if (numDots < this.dots.length) {
|
||||
for (let i = numDots; i < this.dots.length; i++) {
|
||||
this.dots[i].element.remove();
|
||||
}
|
||||
|
|
@ -192,6 +187,7 @@
|
|||
{
|
||||
ID: 0,
|
||||
position: { x, y },
|
||||
isPrimary: true,
|
||||
},
|
||||
];
|
||||
for (let i = 1; i < numDots; i++) {
|
||||
|
|
@ -203,12 +199,6 @@
|
|||
this.useAlgo = algo;
|
||||
this.#currentLightness = lightness;
|
||||
dots = this.calculateCompliments(dots, 'update', this.useAlgo);
|
||||
if (algo == 'float') {
|
||||
for (const dot of dots) {
|
||||
this.spawnDot(dot.position);
|
||||
}
|
||||
this.dots[0].element.classList.add('primary');
|
||||
}
|
||||
this.handleColorPositions(dots);
|
||||
this.updateCurrentWorkspace();
|
||||
});
|
||||
|
|
@ -419,8 +409,8 @@
|
|||
// important: If any sort of sizing is changed, make sure changes are reflected here
|
||||
const padding = 20;
|
||||
const rect = {
|
||||
width: 318,
|
||||
height: 318,
|
||||
width: 338,
|
||||
height: 338,
|
||||
};
|
||||
const centerX = rect.width / 2;
|
||||
const centerY = rect.height / 2;
|
||||
|
|
@ -705,36 +695,6 @@
|
|||
|
||||
handleColorPositions(colorPositions) {
|
||||
colorPositions.sort((a, b) => a.ID - b.ID);
|
||||
if (this.useAlgo === 'floating') {
|
||||
const dotPad = this.panel.querySelector('.zen-theme-picker-gradient');
|
||||
const rect = dotPad.getBoundingClientRect();
|
||||
this.dots.forEach((dot) => {
|
||||
dot.element.style.zIndex = 999;
|
||||
|
||||
let pixelX, pixelY;
|
||||
if (dot.position.x === null) {
|
||||
const leftPercentage = parseFloat(dot.element.style.left) / 100;
|
||||
const topPercentage = parseFloat(dot.element.style.top) / 100;
|
||||
|
||||
pixelX = leftPercentage * rect.width;
|
||||
pixelY = topPercentage * rect.height;
|
||||
} else {
|
||||
pixelX = dot.position.x;
|
||||
pixelY = dot.position.y;
|
||||
}
|
||||
|
||||
const colorFromPos = this.getColorFromPosition(pixelX, pixelY);
|
||||
|
||||
dot.element.style.setProperty(
|
||||
'--zen-theme-picker-dot-color',
|
||||
`rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})`
|
||||
);
|
||||
|
||||
dot.element.setAttribute('data-position', this.getJSONPos(pixelX, pixelY));
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
const existingPrimaryDot = this.dots.find((d) => d.ID === 0);
|
||||
|
||||
if (existingPrimaryDot) {
|
||||
|
|
@ -1124,9 +1084,9 @@
|
|||
let color3 = this.getSingleRGBColor(themedColors[1], forToolbar);
|
||||
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%)`,
|
||||
`radial-gradient(circle at -30% -30%, ${color2}, transparent 100%)`,
|
||||
`radial-gradient(circle at 130% -30%, ${color3}, transparent 100%)`,
|
||||
`linear-gradient(to top, ${color1} -30%, transparent 60%)`,
|
||||
].join(', ');
|
||||
}
|
||||
return [`linear-gradient(120deg, ${color1} -30%, ${color3} 100%)`].join(', ');
|
||||
|
|
@ -1395,14 +1355,14 @@
|
|||
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.
|
||||
// Opacity can only be between 0.15 to 0.80. Make opacity relative to that range
|
||||
// So 0.15 becomes 0, and 0.80 becomes 1.
|
||||
if (opacity < 0.15) {
|
||||
opacity = 0;
|
||||
} else if (opacity > 0.85) {
|
||||
} else if (opacity > 0.8) {
|
||||
opacity = 1;
|
||||
} else {
|
||||
opacity = (opacity - 0.15) / (0.85 - 0.15);
|
||||
opacity = (opacity - 0.15) / (0.8 - 0.15);
|
||||
}
|
||||
if (isDefaultTheme) {
|
||||
opacity = 1; // If it's the default theme, we want the wave to be
|
||||
|
|
@ -1416,7 +1376,7 @@
|
|||
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`);
|
||||
opacitySlider.style.setProperty('--zen-thumb-width', `${10 + opacity * 12}px`);
|
||||
svg.style.stroke =
|
||||
interpolatedPath === this.#linePath
|
||||
? thirdStop.getAttribute('stop-color')
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
*/
|
||||
|
||||
#PanelUI-zen-gradient-generator {
|
||||
--panel-width: 340px;
|
||||
--panel-width: 360px;
|
||||
--panel-padding: 10px;
|
||||
min-width: var(--panel-width);
|
||||
}
|
||||
|
|
@ -100,8 +100,8 @@
|
|||
min-width: 100%;
|
||||
|
||||
& > box {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
|
@ -109,8 +109,8 @@
|
|||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
outline: 2px solid var(--zen-toolbar-element-bg);
|
||||
|
|
@ -241,7 +241,7 @@
|
|||
.zen-theme-picker-gradient {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: var(--zen-border-radius);
|
||||
border-radius: var(--zen-native-content-radius);
|
||||
|
||||
min-height: calc(var(--panel-width) - var(--panel-padding) * 2 - 2px);
|
||||
background: light-dark(
|
||||
|
|
@ -360,13 +360,13 @@
|
|||
}
|
||||
|
||||
#PanelUI-zen-gradient-generator-texture-wrapper {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
position: relative;
|
||||
|
||||
@media (-moz-platform: macos) {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
}
|
||||
|
||||
&::after {
|
||||
|
|
|
|||
|
|
@ -71,11 +71,6 @@
|
|||
&[dragged='true']{
|
||||
background-color: var(--zen-toolbar-element-bg);
|
||||
}
|
||||
|
||||
&[dragged='true'] {
|
||||
outline: 1px solid var(--zen-colors-primary);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
&[reorder-mode='true'] toolbarbutton:not([dragged='true']) {
|
||||
|
|
@ -208,7 +203,6 @@
|
|||
}
|
||||
|
||||
.zen-workspaces-actions {
|
||||
--toolbarbutton-inner-padding: 4px;
|
||||
margin-left: auto !important;
|
||||
opacity: 0;
|
||||
visibility: collapse;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue