diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js
index 307c329a0..d0fef7aae 100644
--- a/src/browser/app/profile/zen-browser.js
+++ b/src/browser/app/profile/zen-browser.js
@@ -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);
diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
index b001fd0ee..2fecd401d 100644
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -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,8 +275,12 @@
& .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 {
@@ -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;
}
}
}
diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css
index 7132d5423..8cd259278 100644
--- a/src/browser/base/content/zen-styles/zen-theme.css
+++ b/src/browser/base/content/zen-styles/zen-theme.css
@@ -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;
diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css
index a4afcd949..a74c364c9 100644
--- a/src/browser/base/content/zen-styles/zen-urlbar.css
+++ b/src/browser/base/content/zen-styles/zen-urlbar.css
@@ -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;
}
diff --git a/src/browser/base/content/zen-styles/zen-workspaces.css b/src/browser/base/content/zen-styles/zen-workspaces.css
index 209a7f91c..6ceeb67bf 100644
--- a/src/browser/base/content/zen-styles/zen-workspaces.css
+++ b/src/browser/base/content/zen-styles/zen-workspaces.css
@@ -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%);
}
diff --git a/src/browser/components/preferences/zen-settings.js b/src/browser/components/preferences/zen-settings.js
index 58fba4415..e94d6a8f2 100644
--- a/src/browser/components/preferences/zen-settings.js
+++ b/src/browser/components/preferences/zen-settings.js
@@ -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();
},
diff --git a/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml b/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
index 8c91ecdbc..45d2a8e11 100644
--- a/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
+++ b/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
@@ -167,6 +167,9 @@
+
+
+
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);
}
}
diff --git a/src/browser/themes/shared/zen-icons/icons.css b/src/browser/themes/shared/zen-icons/icons.css
index d396e52d3..1cd766438 100644
--- a/src/browser/themes/shared/zen-icons/icons.css
+++ b/src/browser/themes/shared/zen-icons/icons.css
@@ -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;
}
diff --git a/src/browser/themes/shared/zen-icons/jar.inc.mn b/src/browser/themes/shared/zen-icons/jar.inc.mn
index ecd47c4d2..80635275d 100644
--- a/src/browser/themes/shared/zen-icons/jar.inc.mn
+++ b/src/browser/themes/shared/zen-icons/jar.inc.mn
@@ -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)
diff --git a/src/browser/themes/shared/zen-icons/sidebars.svg b/src/browser/themes/shared/zen-icons/sidebars.svg
index 967b395c6..72eca38a0 100644
--- a/src/browser/themes/shared/zen-icons/sidebars.svg
+++ b/src/browser/themes/shared/zen-icons/sidebars.svg
@@ -1,8 +1,3 @@
-
-
+
\ No newline at end of file
diff --git a/src/browser/themes/shared/zen-icons/split.svg b/src/browser/themes/shared/zen-icons/split.svg
new file mode 100644
index 000000000..e6fe73fef
--- /dev/null
+++ b/src/browser/themes/shared/zen-icons/split.svg
@@ -0,0 +1,11 @@
+
\ No newline at end of file