diff --git a/src/browser/base/content/zen-components b/src/browser/base/content/zen-components index 2572fb55..b2f80fb7 160000 --- a/src/browser/base/content/zen-components +++ b/src/browser/base/content/zen-components @@ -1 +1 @@ -Subproject commit 2572fb55f62fa91e6ce726b12587043640a2e419 +Subproject commit b2f80fb7e11d0faf84083b23aa8114e870988073 diff --git a/src/browser/base/content/zen-styles/zen-compact-mode.css b/src/browser/base/content/zen-styles/zen-compact-mode.css index b0fc0b75..c334a2fd 100644 --- a/src/browser/base/content/zen-styles/zen-compact-mode.css +++ b/src/browser/base/content/zen-styles/zen-compact-mode.css @@ -49,10 +49,11 @@ } #titlebar { - background: var(--zen-themed-toolbar-bg) !important; - box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1); + background: var(--zen-main-browser-background) !important; + background-attachment: fixed !important; + background-size: 2000px !important; /* Dont ask me why */ + box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2); border-radius: calc(var(--zen-border-radius) + 2px); - border: 1px solid var(--zen-colors-border); padding: var(--zen-toolbox-padding) !important; position: relative; } @@ -60,6 +61,11 @@ #zen-tabbox-wrapper > #navigator-toolbox:not(#navigator-toolbox:is(#navigator-toolbox[zen-expanded='true'])) { max-width: calc(var(--zen-toolbox-max-width) + var(--zen-compact-float)) !important; min-width: calc(var(--zen-toolbox-max-width) + var(--zen-compact-float)) !important; + + & #titlebar { + padding-left: 0 !important; + padding-right: 0 !important; + } } @media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') { 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 e5678f18..6ef59652 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 @@ -155,12 +155,15 @@ } & .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: rgba(255, 255, 255, 0.075); @media not (prefers-color-scheme: dark) { - --zen-pinned-tabs-bgcolor: color-mix(in srgb, #e7e7e7 30%, transparent 70%); + --zen-pinned-tabs-bgcolor: rgba(1, 1, 1, 0.075); } background: var(--zen-pinned-tabs-bgcolor) !important; backdrop-filter: blur(10px); + } + + &[selected] { box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05); } @@ -212,9 +215,7 @@ content: ''; display: block; height: 1px; - background: var(--zen-main-browser-background); - opacity: 0.5; - filter: invert(0.4); + background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.075)); width: 99%; left: 50%; transform: translateX(-50%); @@ -364,6 +365,17 @@ display: none !important; } + & #tabbrowser-arrowscrollbox-periphery { + & > toolbarbutton { + margin: 0 auto !important; + padding: 0 !important; + } + + &::before { + width: 60% !important; + } + } + & #vertical-pinned-tabs-container:has(tab:not([hidden])) { margin-bottom: 12px; position: relative; @@ -373,9 +385,7 @@ content: ''; display: block; height: 1px; - background: var(--zen-main-browser-background); - opacity: 0.5; - filter: invert(0.4); + background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.075)); width: 70%; left: 50%; transform: translateX(-50%); @@ -695,9 +705,7 @@ content: ''; display: block; height: 1px; - background: var(--zen-main-browser-background); - opacity: 0.5; - filter: invert(0.4); + background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.075)); width: 96%; position: absolute; top: -5px;