diff --git a/src/browser/base/content/zen-panels/gradient-generator.inc b/src/browser/base/content/zen-panels/gradient-generator.inc
index 6e1f9948f..7c508ac11 100644
--- a/src/browser/base/content/zen-panels/gradient-generator.inc
+++ b/src/browser/base/content/zen-panels/gradient-generator.inc
@@ -23,24 +23,44 @@
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -64,7 +84,7 @@
-
+
diff --git a/src/zen/common/styles/zen-browser-ui.css b/src/zen/common/styles/zen-browser-ui.css
index 67b83b271..f2ec1fdfe 100644
--- a/src/zen/common/styles/zen-browser-ui.css
+++ b/src/zen/common/styles/zen-browser-ui.css
@@ -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(
diff --git a/src/zen/common/styles/zen-single-components.css b/src/zen/common/styles/zen-single-components.css
index 3b76231d3..cd64255af 100644
--- a/src/zen/common/styles/zen-single-components.css
+++ b/src/zen/common/styles/zen-single-components.css
@@ -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);
+ }
+}
diff --git a/src/zen/common/styles/zen-theme.css b/src/zen/common/styles/zen-theme.css
index 872691c9d..953cc476e 100644
--- a/src/zen/common/styles/zen-theme.css
+++ b/src/zen/common/styles/zen-theme.css
@@ -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%,
diff --git a/src/zen/tabs/zen-tabs/vertical-tabs.css b/src/zen/tabs/zen-tabs/vertical-tabs.css
index 1117f1593..bb429b996 100644
--- a/src/zen/tabs/zen-tabs/vertical-tabs.css
+++ b/src/zen/tabs/zen-tabs/vertical-tabs.css
@@ -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;
diff --git a/src/zen/workspaces/ZenGradientGenerator.mjs b/src/zen/workspaces/ZenGradientGenerator.mjs
index 4535513be..43176161a 100644
--- a/src/zen/workspaces/ZenGradientGenerator.mjs
+++ b/src/zen/workspaces/ZenGradientGenerator.mjs
@@ -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')
diff --git a/src/zen/workspaces/zen-gradient-generator.css b/src/zen/workspaces/zen-gradient-generator.css
index 53abfee68..4a17c3a12 100644
--- a/src/zen/workspaces/zen-gradient-generator.css
+++ b/src/zen/workspaces/zen-gradient-generator.css
@@ -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 {
diff --git a/src/zen/workspaces/zen-workspaces.css b/src/zen/workspaces/zen-workspaces.css
index 4714fc1e1..567c9026d 100644
--- a/src/zen/workspaces/zen-workspaces.css
+++ b/src/zen/workspaces/zen-workspaces.css
@@ -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;