mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-01-03 20:12:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add support for essentials favicon background in tab styles

Browse Source
This commit is contained in:
mr. M
2025-01-11 23:53:59 +01:00
parent 37092f0359
commit c93263ccea
2 changed files with 29 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/browser/app/profile/zen-browser.js
View File

@@ -85,6 +85,7 @@ pref('zen.theme.accent-color', "#ffb787");
pref('zen.theme.content-element-separation', 6); // In pixels
pref('zen.theme.pill-button', false);
pref('zen.theme.gradient', true);
pref('zen.theme.essentials-favicon-bg', true);
pref('zen.tabs.show-newtab-vertical', true);
pref('zen.view.show-newtab-button-border-top', true);

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

@@ -948,36 +948,38 @@
margin-inline-end: 0 !important;
}
&[selected] .tab-background {
&::after {
content: "";
inset: -50%;
filter: blur(15px);
position: absolute;
background-size: 100% 100%;
background-clip: padding-box;
background-image: var(--zen-tab-icon);
z-index: -1;
@media (-moz-bool-pref: 'zen.theme.essentials-favicon-bg') {
&[selected] .tab-background {
&::after {
content: "";
inset: -50%;
filter: blur(15px);
position: absolute;
background-size: 100% 100%;
background-clip: padding-box;
background-image: var(--zen-tab-icon);
z-index: -1;
}
background: transparent;
overflow: hidden;
&::before {
background: light-dark(rgba(255, 255, 255, 0.8), rgba(68, 64, 64, 0.80));
margin: 2px;
border-radius: calc(var(--tab-border-radius) - 2px);
position: absolute;
inset: 0;
z-index: 0;
content: "";
transition: background 0.2s ease-in-out;
}
}
background: transparent;
overflow: hidden;
&::before {
background: light-dark(rgba(255, 255, 255, 0.8), rgba(68, 64, 64, 0.80));
margin: 2px;
border-radius: calc(var(--tab-border-radius) - 2px);
position: absolute;
inset: 0;
z-index: 0;
content: "";
transition: background 0.2s ease-in-out;
&[selected]:hover .tab-background::before {
background: light-dark(rgba(255, 255, 255, 0.8), rgba(68, 64, 64, 0.85));
}
}
&[selected]:hover .tab-background::before {
background: light-dark(rgba(255, 255, 255, 0.8), rgba(68, 64, 64, 0.85));
}
}