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

Update CSS styles for gradient generator and welcome screen; adjust dimensions and improve layout

Browse Source
This commit is contained in:
mr. M
2025-02-18 20:37:35 +01:00
parent bd5f52b4e2
commit c3585ed714
4 changed files with 18 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
l10n

Submodule l10n updated: 3df11464be...e5f3fe7336

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

@@ -5,7 +5,7 @@
*/
#PanelUI-zen-gradient-generator {
--panel-width: 325px;
--panel-width: 300px;
--panel-padding: 10px;
min-width: var(--panel-width);
}
@@ -121,53 +121,48 @@
&::-moz-range-track {
background: var(--zen-colors-border);
border-radius: 999px;
height: 4px;
height: 6px;
}
&::-moz-range-progress {
background: var(--zen-primary-color);
border-radius: 999px;
height: 4px;
height: 6px;
}
}
.zen-theme-picker-gradient {
position: relative;
border-radius: calc(var(--zen-border-radius) + 5px);
border-radius: calc(var(--zen-border-radius) - 2px);
overflow: hidden;
border: 1px solid var(--zen-colors-border);
border-radius: var(--zen-border-radius);
min-height: calc(var(--panel-width) - var(--panel-padding) * 2);
min-width: calc(var(--panel-width) - var(--panel-padding) * 2);
margin-bottom: 15px;
margin-bottom: 20px;
background: var(--zen-theme-picker-gradient-image) center center / cover no-repeat;
&::before {
background: light-dark(
color-mix(in srgb, var(--zen-themed-toolbar-bg) 60%, transparent 40%),
color-mix(in srgb, var(--zen-themed-toolbar-bg) 80%, transparent 20%)
);
backdrop-filter: blur(5px);
background: color-mix(in srgb, var(--zen-themed-toolbar-bg) 70%, transparent 30%);
backdrop-filter: blur(10px);
content: '';
position: absolute;
top: 0;
left: 0;
pointer-events: none;
margin: var(--panel-padding);
box-shadow: 0 0 0 1px 1px var(--zen-colors-border);
width: calc(100% - var(--panel-padding) * 2);
height: calc(100% - var(--panel-padding) * 2);
border-radius: var(--zen-border-radius);
width: 100%;
height: 100%;
}
&::after {
z-index: 0;
position: absolute;
inset: 0;
background-image: linear-gradient(to right, var(--zen-primary-color) 1px, transparent 1px),
linear-gradient(to bottom, var(--zen-primary-color) 1px, transparent 1px);
--zen-theme-picker-lines-color: light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));
background-image: linear-gradient(to right, var(--zen-theme-picker-lines-color) 1px, transparent 1px),
linear-gradient(to bottom, var(--zen-theme-picker-lines-color) 1px, transparent 1px);
background-size: 20px 20px;
content: '';
position: absolute;
@@ -207,7 +202,7 @@
#PanelUI-zen-gradient-generator-color-actions {
display: flex;
position: absolute;
bottom: 20px;
bottom: 8px;
left: 50%;
z-index: 1;
transform: translateX(-50%);
@@ -221,6 +216,7 @@
padding: 0.4rem !important;
min-width: fit-content !important;
transition: background 0.2s;
gap: 0.3rem;
&:not(#PanelUI-zen-gradient-generator-color-toggle-algo) .button-text {
display: none;
}

2
src/browser/base/content/zen-styles/zen-welcome.css
View File

@@ -148,7 +148,7 @@
#zen-welcome-workspace-colors-anchor {
width: 1px;
height: 1px;
margin: 10% auto auto 30%;
margin: 20% auto auto 28%;
}
#zen-welcome-initial-essentials-browser {

2
src/browser/base/zen-components/ZenWelcome.mjs
View File

@@ -51,7 +51,7 @@
document.getElementById('zen-welcome-pages').style.display = 'flex';
document.getElementById('zen-welcome-start').remove();
window.maximize();
animate('#zen-welcome-pages', { opacity: [0, 1] }, { delay: 0.1 });
animate('#zen-welcome-pages', { opacity: [0, 1] }, { delay: 0.2, duration: 0.2 });
}
async fadeInTitles(page) {