mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-05 09:26:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Changed light theme and added new split view icon

Browse Source
This commit is contained in:
mr. M
2024-10-17 19:19:28 +02:00
parent 019efd6db7
commit d6c4c3c66a
12 changed files with 52 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -132,7 +132,7 @@ pref('zen.splitView.rearrange-hover-size', 24);
// Zen Workspaces
pref('zen.workspaces.enabled', true);
pref('zen.workspaces.hide-deactivated-workspaces', true);
pref('zen.workspaces.hide-deactivated-workspaces', false);
pref('zen.workspaces.hide-default-container-indicator', true);
pref('zen.workspaces.individual-pinned-tabs', true);
pref('zen.workspaces.show-icon-strip', true);

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

@@ -85,7 +85,7 @@
border-bottom: 0px solid transparent !important;
--tab-block-margin: 2px;
--tab-selected-bgcolor: var(--zen-colors-primary);
--tab-selected-bgcolor: light-dark(color-mix(in srgb, var(--zen-colors-primary) 1%, white 99%), var(--zen-colors-secondary));
grid-gap: 0 !important;
& .tabbrowser-tab {
@@ -104,12 +104,6 @@
& .tab-background {
overflow: hidden;
&:is([selected], [multiselected]) {
@media not (prefers-color-scheme: dark) {
border: 1px solid color-mix(in srgb, var(--zen-colors-primary) 60%, transparent 40%) !important;
}
}
& .tab-context-line {
margin: 0 0px !important;
width: 3px !important;
@@ -155,7 +149,7 @@
& .tab-background:not(:hover):not([selected]):not([multiselected]) {
--zen-pinned-tabs-bgcolor: color-mix(in srgb, var(--zen-colors-secondary) 10%, transparent 90%);
@media not (prefers-color-scheme: dark) {
--zen-pinned-tabs-bgcolor: color-mix(in srgb, var(--zen-colors-secondary) 50%, transparent 50%);
--zen-pinned-tabs-bgcolor: color-mix(in srgb, var(--zen-colors-primary) 10%, transparent 90%);
}
background: var(--zen-pinned-tabs-bgcolor) !important;
backdrop-filter: blur(5px);
@@ -281,9 +275,13 @@
& .tabbrowser-tab {
& .tab-background {
@media not (prefers-color-scheme: dark) {
box-shadow: none !important;
&:is([selected], [multiselected]) {
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1) !important;
}
}
margin-inline: var(--tab-block-margin);
--border-radius-medium: 10px; /* Terrible, I know */
}
&:not([pinned]):is(:hover, [visuallyselected]) .tab-close-button {
display: block !important;
@@ -407,7 +405,7 @@
& .tab-background:is([selected], [multiselected]) {
@media not (prefers-color-scheme: dark) {
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05) !important;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.12) !important;
}
}
@@ -631,7 +629,6 @@
&[selected] .tab-background {
border-color: transparent;
background: var(--zen-colors-secondary) !important;
}
}
}

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

@@ -21,7 +21,7 @@
--zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, white 10%);
--zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, black 20%);
--zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 98%, black 2%);
--zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 97%, black 3%);
--zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-colors-tertiary) 99%);
@@ -95,6 +95,7 @@
--zen-panel-radius: var(--zen-border-radius);
--toolbarbutton-border-radius: 6px;
--urlbar-margin-inline: 1px !important;
--fp-contextmenu-border-radius: 8px;
--fp-contextmenu-padding: calc(4px - var(--fp-contextmenu-menuitem-border-width)) 0;
@@ -115,7 +116,7 @@
--input-bgcolor: var(--zen-colors-tertiary) !important;
--input-border-color: var(--zen-input-border-color) !important;
--zen-themed-toolbar-bg: light-dark(#fdfdfd, var(--zen-colors-tertiary)) !important;
--zen-themed-toolbar-bg: light-dark(#f7f7f7, var(--zen-colors-tertiary)) !important;
--toolbar-field-background-color: var(--zen-colors-input-bg) !important;
--arrowpanel-background: var(--zen-dialog-background) !important;

4
src/browser/base/content/zen-styles/zen-urlbar.css
View File

@@ -27,6 +27,10 @@
box-shadow: var(--panel-shadow) !important;
}
#urlbar-background {
background: transparent;
}
#urlbar[focused='true'] > #urlbar-background {
background: var(--zen-dialog-background) !important;
}

3
src/browser/base/content/zen-styles/zen-workspaces.css
View File

@@ -30,7 +30,7 @@
}
@media (-moz-bool-pref: 'zen.workspaces.hide-deactivated-workspaces') {
&:not([active='true']) {
&:not([active='true']):not(:hover) {
&::after {
content: '';
position: absolute;
@@ -40,6 +40,7 @@
background: color-mix(in srgb, var(--zen-primary-color) 10%, light-dark(rgba(0,0,0,.4), rgba(255,255,255,.4)) 90%);
left: 50%;
top: 50%;
filter: saturate(140%) brightness(110%) !important;
transform: translate(-50%, -50%);
}

9
src/browser/components/preferences/zen-settings.js
View File

@@ -448,15 +448,6 @@ var gZenLooksAndFeel = {
window.addEventListener('unload', () => {
window.matchMedia('(prefers-color-scheme: dark)').removeListener(onPreferColorSchemeChange);
});
setTimeout(() => {
const group = document.getElementById('zenLooksAndFeelGroup');
const webGroup = document.getElementById('webAppearanceGroup');
webGroup.style.display = 'none';
// Iterate reverse to prepend the elements in the correct order.
for (let child of [...webGroup.children].reverse()) {
group.prepend(child);
}
}, 500);
this.setDarkThemeListener();
this.setCompactModeStyle();
},

3
src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
View File

@@ -167,6 +167,9 @@
</label>
</form>
</html:div>
<html:div data-l10n-id="preferences-web-appearance-footer">
<html:a id="web-appearance-manage-themes-link" class="text-link" data-l10n-name="themes-link" href="about:addons" target="_blank" />
</html:div>
</groupbox>
<hbox id="zenThemeCategory"

18
src/browser/themes/shared/preferences/zen-preferences.css
View File

@@ -238,6 +238,10 @@ groupbox h2 {
border-color: var(--zen-primary-color);
}
#zenLooksAndFeelGroup > html|div:last-of-type {
margin-top: 15px;
}
.zen-compact-mode-styles-browser-wrapper {
width: 55%;
height: 60px;
@@ -246,7 +250,13 @@ groupbox h2 {
border: 1px solid var(--zen-colors-border);
background: var(--zen-colors-tertiary);
position: relative;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
--zen-compact-mode-styles-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
@media not (prefers-color-scheme: dark) {
--zen-compact-mode-styles-shadow: 0 0 .5px .5px rgba(0, 0, 0, 0.1);
}
box-shadow: var(--zen-compact-mode-styles-shadow);
padding: 7px;
@@ -255,7 +265,7 @@ groupbox h2 {
background: var(--zen-primary-color);
border-radius: 5px;
height: 18px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: var(--zen-compact-mode-styles-shadow);
}
&[top] div {
@@ -263,7 +273,7 @@ groupbox h2 {
background: var(--zen-primary-color);
border-radius: 5px;
height: 100%;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: var(--zen-compact-mode-styles-shadow);
}
&[both] div {
@@ -271,7 +281,7 @@ groupbox h2 {
height: 100%;
background: var(--zen-colors-secondary);
border-radius: 5px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: var(--zen-compact-mode-styles-shadow);
}
}

4
src/browser/themes/shared/zen-icons/icons.css
View File

@@ -62,7 +62,7 @@
}
#context-zenSplitLink {
--menu-image: url('link.svg') !important;
--menu-image: url('split.svg') !important;
}
#sidebar-button:-moz-locale-dir(ltr):not([positionend]),
@@ -404,7 +404,7 @@
}
#zen-split-views-button {
list-style-image: url('link.svg') !important;
list-style-image: url('split.svg') !important;
fill: var(--toolbarbutton-icon-fill-attention);
fill-opacity: 1;
}

1
src/browser/themes/shared/zen-icons/jar.inc.mn
View File

@@ -113,6 +113,7 @@
skin/classic/browser/zen-icons/sidebars.svg (../shared/zen-icons/sidebars.svg)
skin/classic/browser/zen-icons/source-code.svg (../shared/zen-icons/source-code.svg)
skin/classic/browser/zen-icons/spell-check.svg (../shared/zen-icons/spell-check.svg)
skin/classic/browser/zen-icons/split.svg (../shared/zen-icons/split.svg)
skin/classic/browser/zen-icons/stop-to-reload.svg (../shared/zen-icons/stop-to-reload.svg)
skin/classic/browser/zen-icons/tab-audio-blocked-small.svg (../shared/zen-icons/tab-audio-blocked-small.svg)
skin/classic/browser/zen-icons/tab-audio-muted-small.svg (../shared/zen-icons/tab-audio-muted-small.svg)

9
src/browser/themes/shared/zen-icons/sidebars.svg
View File

@@ -1,8 +1,3 @@
<!--
- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M14 1c1.099 0 2 .901 2 2v10c0 1.099-.901 2-2 2H2c-1.099 0-2-.901-2-2V3c0-1.099.901-2 2-2zm0 1H7v12h7c.558 0 1-.442 1-1V3c0-.558-.442-1-1-1zM6 2H2c-.558 0-1 .442-1 1v10c0 .558.442 1 1 1h4zM4.5 4a.5.5 0 0 1 .5.5.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5zm0 3a.5.5 0 0 1 .5.5.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5zm0 3a.5.5 0 0 1 .5.5.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5z"/>
<svg width="15" height="13" viewBox="0 0 15 11" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.13525 1.5824H12.7046C13.2569 1.5824 13.7046 2.03011 13.7046 2.5824V8.5824C13.7046 9.13468 13.2569 9.5824 12.7046 9.5824H6.13525V1.5824ZM5.13525 0.582397H6.13525H12.7046C13.8092 0.582397 14.7046 1.47783 14.7046 2.5824V8.5824C14.7046 9.68697 13.8092 10.5824 12.7046 10.5824L6.13525 10.5824H5.13525L2.70459 10.5824C1.60002 10.5824 0.70459 9.68697 0.70459 8.5824V2.5824C0.70459 1.47783 1.60002 0.582397 2.70459 0.582397H5.13525ZM5.13525 9.5824H2.70459C2.15231 9.5824 1.70459 9.13468 1.70459 8.5824V2.5824C1.70459 2.03011 2.15231 1.5824 2.70459 1.5824H5.13525V9.5824Z"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 767 B

After

Width:  |  Height:  |  Size: 764 B

11
src/browser/themes/shared/zen-icons/split.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2002_244)">
<path d="M5.20215 0.582397V10.5824" stroke="context-fill"></path>
</g>
<rect x="0.702148" y="1.0824" width="9" height="9" rx="1.5" stroke="context-fill"></rect>
<defs>
<clipPath id="clip0_2002_244">
<rect x="0.202148" y="0.582397" width="10" height="10" rx="2" fill="context-fill" fill-opacity="context-fill-opacity" />
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 479 B