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

Refactor toolbar background handling and improve tab styling in compact mode

Browse Source
This commit is contained in:
mr. M
2024-11-06 19:46:21 +01:00
parent 9042baf13d
commit a2ca9361e1
5 changed files with 31 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/browser/base/content/zen-styles/zen-compact-mode.css
View File

@@ -58,8 +58,7 @@
outline: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
@media (-moz-bool-pref: 'zen.view.compact.color-sidebar') {
--zen-themed-toolbar-bg-transparency: 1 !important;
background: var(--zen-main-browser-background) !important;
background: var(--zen-main-browser-background-toolbar) !important;
background-attachment: fixed !important;
background-size: 2000px !important; /* Dont ask me why */
backdrop-filter: blur(5px) !important;
@@ -135,10 +134,9 @@
background: var(--zen-dialog-background);
@media (-moz-bool-pref: 'zen.view.compact.color-toolbar') {
--zen-themed-toolbar-bg-transparency: 1 !important;
background-attachment: fixed;
backdrop-filter: blur(5px);
background: var(--zen-main-browser-background);
background: var(--zen-main-browser-background-toolbar);
background-size: 100% 2000px;
border-bottom: 1px solid var(--zen-colors-border);
}

9
src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
View File

@@ -20,7 +20,7 @@
}
#vertical-pinned-tabs-container-separator {
background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.18));
background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
margin: 8px auto;
border: none;
height: 1px;
@@ -264,7 +264,7 @@
}
& #zen-essentials-container {
--tab-min-height: 40px;
--tab-min-height: 38px;
}
/* Mark: Fix separator paddings */
@@ -608,8 +608,7 @@
z-index: 100 !important;
width: 250px !important;
--zen-themed-toolbar-bg-transparency: 1 !important;
background: var(--zen-main-browser-background) !important;
background: var(--zen-main-browser-background-toolbar) !important;
background-attachment: fixed !important;
background-size: 2000px !important; /* Dont ask me why */
@@ -744,7 +743,7 @@
content: '';
display: block;
height: 1px;
background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.18));
background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
width: 98%;
position: absolute;
top: -8px;

6
src/browser/base/content/zen-styles/zen-theme.css
View File

@@ -99,6 +99,7 @@
/* XUL */
--zen-main-browser-background: light-dark(rgb(235, 235, 235), #1b1b1b);
--zen-main-browser-background-toolbar: var(--zen-main-browser-background);
--zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 50%, white 50%);
--zen-appcontent-border: 1px solid var(--zen-colors-border);
@@ -127,10 +128,11 @@
--input-bgcolor: var(--zen-colors-tertiary) !important;
--input-border-color: var(--zen-input-border-color) !important;
--zen-themed-toolbar-bg: light-dark(#f7f7f7, var(--zen-colors-tertiary));
--zen-themed-toolbar-bg-transparent: light-dark(#f7f7f7, var(--zen-colors-tertiary));
@supports (-moz-osx-font-smoothing: auto) {
--zen-themed-toolbar-bg-transparency: 0.2;
--zen-themed-toolbar-bg: light-dark(rgba(255, 255, 255, var(--zen-themed-toolbar-bg-transparency)), rgba(0, 0, 0, var(--zen-themed-toolbar-bg-transparency)));
--zen-themed-toolbar-bg-transparency: 0.05;
--zen-themed-toolbar-bg-transparent: light-dark(rgba(255, 255, 255, var(--zen-themed-toolbar-bg-transparency)), rgba(0, 0, 0, var(--zen-themed-toolbar-bg-transparency)));
}
--toolbar-field-background-color: var(--zen-colors-input-bg) !important;

19
src/browser/base/zen-components/ZenGradientGenerator.mjs
View File

@@ -497,22 +497,22 @@
this.updateCurrentWorkspace();
}
getSingleRGBColor(color) {
getSingleRGBColor(color, forToolbar = false) {
if (color.isCustom) {
return color.c;
}
return `color-mix(in srgb, rgb(${color.c[0]}, ${color.c[1]}, ${color.c[2]}) ${this.currentOpacity * 100}%, var(--zen-themed-toolbar-bg) ${(1 - this.currentOpacity) * 100}%)`;
const toolbarBg = forToolbar ? 'var(--zen-themed-toolbar-bg)' : 'var(--zen-themed-toolbar-bg-transparent)';
return `color-mix(in srgb, rgb(${color.c[0]}, ${color.c[1]}, ${color.c[2]}) ${this.currentOpacity * 100}%, ${toolbarBg} ${(1 - this.currentOpacity) * 100}%)`;
}
getGradient(colors) {
getGradient(colors, forToolbar = false) {
const themedColors = this.themedColors(colors);
if (themedColors.length === 0) {
return "var(--zen-themed-toolbar-bg)";
return forToolbar ? "var(--zen-themed-toolbar-bg)" : "var(--zen-themed-toolbar-bg-transparent)";
} else if (themedColors.length === 1) {
return this.getSingleRGBColor(themedColors[0]);
return this.getSingleRGBColor(themedColors[0], forToolbar);
}
return `linear-gradient(${this.currentRotation}deg, ${themedColors.map(color => this.getSingleRGBColor(color)).join(', ')})`;
return `linear-gradient(${this.currentRotation}deg, ${themedColors.map(color => this.getSingleRGBColor(color, forToolbar)).join(', ')})`;
}
getTheme(colors, opacity = 0.5, rotation = 45, texture = 0) {
@@ -586,7 +586,7 @@
}
}
const result = this.pSBC(
this.isDarkMode ? 0.5 : -0.5,
this.isDarkMode ? 0.2 : -0.5,
`rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})`);
return result?.match(/\d+/g).map(Number);
}
@@ -634,6 +634,7 @@
browser.gZenThemePicker.resetCustomColorList();
if (!workspaceTheme || workspaceTheme.type !== 'gradient') {
browser.document.documentElement.style.removeProperty('--zen-main-browser-background');
browser.document.documentElement.style.removeProperty('--zen-main-browser-background-toolbar');
browser.gZenThemePicker.updateNoise(0);
browser.document.documentElement.style.setProperty('--zen-primary-color', this.getNativeAccentColor());
return;
@@ -650,6 +651,7 @@
browser.gZenThemePicker.setRotationInput(browser.gZenThemePicker.currentRotation);
const gradient = browser.gZenThemePicker.getGradient(workspaceTheme.gradientColors);
const gradientToolbar = browser.gZenThemePicker.getGradient(workspaceTheme.gradientColors, true);
browser.gZenThemePicker.updateNoise(workspaceTheme.texture);
for (const dot of workspaceTheme.gradientColors) {
@@ -659,6 +661,7 @@
}
browser.document.documentElement.style.setProperty('--zen-main-browser-background', gradient);
browser.document.documentElement.style.setProperty('--zen-main-browser-background-toolbar', gradientToolbar);
const dominantColor = this.getMostDominantColor(workspaceTheme.gradientColors);
if (dominantColor) {

13
src/browser/base/zen-components/ZenPinnedTabManager.mjs
View File

@@ -357,14 +357,21 @@
if (pin) {
const tabState = SessionStore.getTabState(tab);
const state = JSON.parse(tabState);
const icon = await PlacesUtils.promiseFaviconData(pin.url);
let icon = undefined;
try {
icon = await PlacesUtils.promiseFaviconData(pin.url);
} catch (e) {
console.warn("Error trying to get favicon for pinned tab", e);
}
state.entries = [{
url: pin.url,
title: pin.title,
triggeringPrincipal_base64: lazy.E10SUtils.SERIALIZED_SYSTEMPRINCIPAL
}];
state.image = icon;
if (icon) {
state.image = icon;
}
state.index = 0;
SessionStore.setTabState(tab, state);
@@ -438,7 +445,7 @@
const isVisible = contextTab.pinned && !contextTab.multiselected;
document.getElementById("context_zen-reset-pinned-tab").hidden = !isVisible || !contextTab.getAttribute("zen-pin-id");
document.getElementById("context_zen-replace-pinned-url-with-current").hidden = !isVisible;
document.getElementById("context_zen-add-essential").hidden = contextTab.pinned;
document.getElementById("context_zen-add-essential").hidden = contextTab.getAttribute("zen-essential");
document.getElementById("context_zen-remove-essential").hidden = !contextTab.getAttribute("zen-essential");
document.getElementById("context_unpinTab").hidden = document.getElementById("context_unpinTab").hidden || contextTab.getAttribute("zen-essential");
document.getElementById("context_unpinSelectedTabs").hidden = document.getElementById("context_unpinSelectedTabs").hidden || contextTab.getAttribute("zen-essential");