mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-04-24 08:15:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added a working workspaces gradient chooser!

Browse Source
This commit is contained in:
mr. M
2024-10-25 21:50:15 +02:00
parent 5b51aa2b78
commit 4997786b9f
12 changed files with 104 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -103,7 +103,7 @@ Special thanks to... EVERYONE 🎉! Checkout the team and contributors page [her
Zen couldn't be in its current state without the help of these amazing projects! 🙏
- Zen's default preferences are based on [BetterFox](https://github.com/yokoffing/Betterfox)
- Icon Pack provided by [Microsoft's FluentUI System Icons](https://github.com/microsoft/fluentui-system-icons)
- Gradient image extracted from [Arc Palette](https://github.com/neurokitti/Arc_Palette)
### 🖥️ Comparison with other browsers

2
l10n

Submodule l10n updated: 4af2d205f0...bb6c7ce7a8

1
src/browser/base/content/zen-assets.jar.inc.mn
View File

@@ -49,6 +49,7 @@
# Images
content/browser/zen-images/gradient.png (content/zen-images/gradient.png)
content/browser/zen-images/gradient-display.png (content/zen-images/gradient-display.png)
# Actors
content/browser/zen-components/actors/ZenThemeMarketplaceParent.sys.mjs (content/zen-components/src/actors/ZenThemeMarketplaceParent.sys.mjs)

2
src/browser/base/content/zen-components

Submodule src/browser/base/content/zen-components updated: 5ce7d24842...649b22bbe3

BIN
src/browser/base/content/zen-images/gradient-display.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 422 KiB

10
src/browser/base/content/zen-popupset.inc.xhtml
View File

@@ -105,6 +105,16 @@
<panelmultiview id="PanelUI-zen-gradient-generator-multiview" mainViewId="PanelUI-zen-gradient-generator-view">
<panelview id="PanelUI-zen-gradient-generator-view" class="PanelUI-subView zen-theme-picker" role="document" mainview-with-header="true" has-custom-header="true">
<hbox class="zen-theme-picker-gradient"></hbox>
<hbox id="PanelUI-zen-gradient-generator-controls">
<hbox id="PanelUI-zen-gradient-degrees">
<box class="dot"></box>
<box class="text"></box>
</hbox>
<vbox id="PanelUI-zen-gradient-colors-wrapper">
<label data-l10n-id="zen-panel-ui-gradient-generator-opacity-text"></label>
<html:input type="range" min="0" max="1" value="0.5" step="0.05" oninput="gZenThemePicker.onOpacityChange(event);" id="PanelUI-zen-gradient-generator-opacity" />
</vbox>
</hbox>
</panelview>
</panelmultiview>
</panel>

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

@@ -15,23 +15,22 @@
@keyframes zen-theme-picker-dot-animation {
from {
transform: scale(0.8);
transform: scale(0.8) translate(-50%, -50%);
}
50% {
transform: scale(1.2);
transform: scale(1.2) translate(-50%, -50%);
}
to {
transform: scale(1);
transform: scale(1) translate(-50%, -50%);
}
}
@keyframes zen-main-app-wrapper-animation {
from {
transform: translate(0, 0);
opacity: 1;
}
to {
transform: translate(50%, 100%);
opacity: 0;
}
}

23
src/browser/base/content/zen-styles/zen-browser-container.css
View File

@@ -5,26 +5,9 @@
transform: translate3d(0, 0, 0);
position: relative;
--uc-tweak-rounded-corners-shadow-color: var(--zen-colors-border);
--uc-tweak-rounded-corners-shadow: 0 0 0 1px var(--uc-tweak-rounded-corners-shadow-color);
box-shadow: var(--uc-tweak-rounded-corners-shadow) !important;
/* Use pseudo element overlay to simulate rounded corners, similar to the
* tab corners, fixes bug with backdrop-filter. */
&::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
/* Draw toolbar background on the negative corner space, then draw the
* same shadow from the browser window on top. */
box-shadow:
var(--uc-tweak-rounded-corners-shadow, 0 0 transparent),
0 0 0 16px var(--zen-main-browser-background) !important;
clip-path: inset(0);
pointer-events: none;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
& browser {
border-radius: var(--zen-webview-border-radius, var(--zen-border-radius));
}
}
}

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

@@ -51,7 +51,7 @@
bottom: 0;
background: var(--zen-main-browser-background-old);
backdrop-filter: blur(5px);
animation: zen-main-app-wrapper-animation 1s ease-in-out forwards;
animation: zen-main-app-wrapper-animation .5s ease-in-out forwards;
}
}

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

@@ -44,7 +44,7 @@
}
#tabbrowser-tabpanels[zen-split-view='true'] .browserSidebarContainer.deck-selected {
--uc-tweak-rounded-corners-shadow-color: var(--zen-primary-color) !important;
border: 2px solid var(--zen-primary-color) !important;
}
#tabbrowser-tabbox {

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

@@ -1,9 +1,78 @@
#PanelUI-zen-gradient-generator {
--panel-width: 300px;
--panel-padding: 10px;
min-width: var(--panel-width);
}
#PanelUI-zen-gradient-degrees {
position: relative;
border-radius: 999px;
min-height: 50px;
min-width: 50px;
max-height: 50px;
max-width: 50px;
border: 1px solid var(--zen-colors-border);
display: flex;
justify-items: center;
align-items: center;
margin-left: 5px;
margin-right: 25px;
z-index: 1;
& .dot {
position: absolute;
z-index: 2;
width: 50px;
height: 50px;
top: 0;
left: 0;
&::after {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--zen-colors-tertiary);
box-shadow: 0 0 0 2px var(--zen-themed-toolbar-bg);
cursor: grab;
content: '';
position: absolute;
bottom: 2px;
right: 0;
border: 2px solid var(--zen-colors-border);
animation: zen-theme-picker-dot-animation .5s;
transition: transform .2s;
}
&[dragging='true']::after {
transform: scale(1.2);
}
}
& .text {
margin: 0 auto;
}
}
#PanelUI-zen-gradient-generator-controls {
padding-top: 15px;
margin-bottom: 5px;
border-top: 1px solid color-mix(in srgb, var(--zen-colors-border) 50%, transparent 50%);
}
#PanelUI-zen-gradient-colors-wrapper {
& label {
font-size: 12px;
font-weight: 600;
margin-top: 5px;
}
}
#PanelUI-zen-gradient-generator-opacity {
margin-right: 5px;
width: 100%;
}
.zen-theme-picker-gradient {
position: relative;
border-radius: var(--zen-border-radius);
@@ -12,10 +81,12 @@
min-height: calc(var(--panel-width) - var(--panel-padding) * 2);
min-width: calc(var(--panel-width) - var(--panel-padding) * 2);
margin-bottom: 15px;
background: var(--zen-theme-picker-gradient-image) center center / cover no-repeat;
&::before {
background: color-mix(in srgb, var(--zen-themed-toolbar-bg) 50%, transparent 50%);
background: color-mix(in srgb, var(--zen-themed-toolbar-bg) 20%, transparent 80%);
backdrop-filter: blur(5px);
content: '';
position: absolute;
@@ -38,9 +109,10 @@
border: 2px solid #fff;
animation: zen-theme-picker-dot-animation .5s;
transition: transform .2s;
transform: translate(-50%, -50%);
&[dragging='true'] {
transform: scale(1.2);
transform: scale(1.2) translate(-50%, -50%);
}
}
}

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

@@ -146,13 +146,17 @@
max-height: unset !important;
overflow: visible !important;
@media not (prefers-color-scheme: dark) {
--zen-colors-border: var(--zen-colors-tertiary);
}
& .tab-background:not(:hover):not([selected]):not([multiselected]) {
--zen-pinned-tabs-bgcolor: color-mix(in srgb, var(--zen-colors-secondary) 10%, transparent 90%);
--zen-pinned-tabs-bgcolor: color-mix(in srgb, var(--zen-colors-tertiary) 10%, transparent 90%);
@media not (prefers-color-scheme: dark) {
--zen-pinned-tabs-bgcolor: color-mix(in srgb, var(--zen-colors-primary) 10%, transparent 90%);
--zen-pinned-tabs-bgcolor: color-mix(in srgb, #fff 30%, transparent 70%);
}
background: var(--zen-pinned-tabs-bgcolor) !important;
backdrop-filter: blur(5px);
backdrop-filter: blur(10px) invert(0.05);
}
& .tabbrowser-tab .tab-content {
@@ -288,7 +292,6 @@
}
}
margin-inline: var(--tab-block-margin);
--border-radius-medium: 10px; /* Terrible, I know */
}
&:not([pinned]):is(:hover, [visuallyselected]) .tab-close-button {