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 d1a754cf9..645bff4e5 100644 --- a/src/browser/base/content/zen-styles/zen-compact-mode.css +++ b/src/browser/base/content/zen-styles/zen-compact-mode.css @@ -100,12 +100,11 @@ } #navigator-toolbox:not([animate='true']) #titlebar { - box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1); + box-shadow: 0 0 9.73px 0px rgba(0, 0, 0, 0.25); border-radius: calc(var(--zen-border-radius) - 2px); padding: var(--zen-toolbox-padding) !important; position: relative; background: var(--zen-dialog-background); - outline: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)); :root[zen-single-toolbar='true'] { padding-top: 0 !important; @@ -133,106 +132,106 @@ &:not([animate='true']) { --zen-compact-mode-func: linear( 0 0%, - 0.002958 1%, - 0.01137 2%, - 0.024581 3%, - 0.041981 4%, - 0.063001 5%, - 0.087118 6%, - 0.113846 7.000000000000001%, - 0.14274 8%, - 0.173391 9%, - 0.205425 10%, - 0.238504 11%, - 0.272318 12%, - 0.30659 13%, - 0.341071 14.000000000000002%, - 0.375535 15%, - 0.409787 16%, - 0.44365 17%, - 0.476971 18%, - 0.509618 19%, - 0.541476 20%, - 0.572448 21%, - 0.602453 22%, - 0.631425 23%, - 0.65931 24%, - 0.686067 25%, - 0.711668 26%, - 0.736092 27%, - 0.759328 28.000000000000004%, - 0.781375 28.999999999999996%, - 0.802235 30%, - 0.821921 31%, - 0.840449 32%, - 0.857841 33%, - 0.874121 34%, - 0.88932 35%, - 0.903469 36%, - 0.916603 37%, - 0.928759 38%, - 0.939975 39%, - 0.950291 40%, - 0.959747 41%, - 0.968385 42%, - 0.976244 43%, - 0.983366 44%, - 0.989792 45%, - 0.995562 46%, - 1.000716 47%, - 1.005292 48%, - 1.009328 49%, - 1.01286 50%, - 1.015925 51%, - 1.018556 52%, - 1.020787 53%, - 1.022648 54%, - 1.024172 55.00000000000001%, - 1.025385 56.00000000000001%, - 1.026316 56.99999999999999%, - 1.026991 57.99999999999999%, - 1.027434 59%, - 1.027669 60%, - 1.027717 61%, - 1.027599 62%, - 1.027334 63%, - 1.02694 64%, - 1.026433 65%, - 1.025829 66%, - 1.025143 67%, - 1.024388 68%, - 1.023575 69%, - 1.022715 70%, - 1.02182 71%, - 1.020898 72%, - 1.019957 73%, - 1.019005 74%, - 1.018048 75%, - 1.017094 76%, - 1.016146 77%, - 1.015211 78%, - 1.014291 79%, - 1.013391 80%, - 1.012513 81%, - 1.01166 82%, - 1.010835 83%, - 1.010039 84%, - 1.009273 85%, - 1.008538 86%, - 1.007836 87%, - 1.007166 88%, - 1.00653 89%, - 1.005926 90%, - 1.005355 91%, - 1.004817 92%, - 1.00431 93%, - 1.003835 94%, - 1.003391 95%, - 1.002976 96%, - 1.002591 97%, - 1.002233 98%, - 1.001902 99%, - 1.001597 100% + 0.002748 1%, + 0.010544 2%, + 0.022757 3%, + 0.038804 4%, + 0.058151 5%, + 0.080308 6%, + 0.104828 7.000000000000001%, + 0.131301 8%, + 0.159358 9%, + 0.188662 10%, + 0.21891 11%, + 0.249828 12%, + 0.281172 13%, + 0.312724 14.000000000000002%, + 0.344288 15%, + 0.375693 16%, + 0.40679 17%, + 0.437447 18%, + 0.467549 19%, + 0.497 20%, + 0.525718 21%, + 0.553633 22%, + 0.580688 23%, + 0.60684 24%, + 0.632052 25%, + 0.656298 26%, + 0.679562 27%, + 0.701831 28.000000000000004%, + 0.723104 28.999999999999996%, + 0.743381 30%, + 0.76267 31%, + 0.780983 32%, + 0.798335 33%, + 0.814744 34%, + 0.830233 35%, + 0.844826 36%, + 0.858549 37%, + 0.87143 38%, + 0.883498 39%, + 0.894782 40%, + 0.905314 41%, + 0.915125 42%, + 0.924247 43%, + 0.93271 44%, + 0.940547 45%, + 0.947787 46%, + 0.954463 47%, + 0.960603 48%, + 0.966239 49%, + 0.971397 50%, + 0.976106 51%, + 0.980394 52%, + 0.984286 53%, + 0.987808 54%, + 0.990984 55.00000000000001%, + 0.993837 56.00000000000001%, + 0.99639 56.99999999999999%, + 0.998664 57.99999999999999%, + 1.000679 59%, + 1.002456 60%, + 1.004011 61%, + 1.005363 62%, + 1.006528 63%, + 1.007522 64%, + 1.008359 65%, + 1.009054 66%, + 1.009618 67%, + 1.010065 68%, + 1.010405 69%, + 1.010649 70%, + 1.010808 71%, + 1.01089 72%, + 1.010904 73%, + 1.010857 74%, + 1.010757 75%, + 1.010611 76%, + 1.010425 77%, + 1.010205 78%, + 1.009955 79%, + 1.009681 80%, + 1.009387 81%, + 1.009077 82%, + 1.008754 83%, + 1.008422 84%, + 1.008083 85%, + 1.00774 86%, + 1.007396 87%, + 1.007052 88%, + 1.00671 89%, + 1.006372 90%, + 1.00604 91%, + 1.005713 92%, + 1.005394 93%, + 1.005083 94%, + 1.004782 95%, + 1.004489 96%, + 1.004207 97%, + 1.003935 98%, + 1.003674 99%, + 1.003423 100% ); transition: left 0.3125s var(--zen-compact-mode-func), diff --git a/src/browser/base/content/zen-styles/zen-decks.css b/src/browser/base/content/zen-styles/zen-decks.css index b6c3dc35a..f63028234 100644 --- a/src/browser/base/content/zen-styles/zen-decks.css +++ b/src/browser/base/content/zen-styles/zen-decks.css @@ -9,7 +9,7 @@ #tabbrowser-tabpanels[zen-split-view='true'] { display: flex; flex-direction: row; - margin-top: calc(var(--zen-split-column-gap) / -2); + margin-top: calc(var(--zen-split-column-gap) * -1); } #tabbrowser-tabpanels[zen-split-view='true'] > *:not([zen-split='true']) { @@ -67,15 +67,9 @@ #zen-splitview-overlay { @media (-moz-bool-pref: 'zen.view.compact') { :root:not([customizing]) & { - @media (-moz-bool-pref: 'zen.view.compact.hide-tabbar') { - & { - margin-left: 1px; - } - } - @media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') { & { - margin-top: calc(var(--zen-split-column-gap) / -2); + margin-top: calc(var(--zen-split-column-gap) * -1); } } } diff --git a/src/browser/base/content/zen-styles/zen-sidebar-panels.css b/src/browser/base/content/zen-styles/zen-sidebar-panels.css index 21f469fcc..2610133e4 100644 --- a/src/browser/base/content/zen-styles/zen-sidebar-panels.css +++ b/src/browser/base/content/zen-styles/zen-sidebar-panels.css @@ -101,7 +101,8 @@ } .zen-sidebar-web-panel-splitter, -.zen-split-view-splitter[orient='vertical'] { +.zen-split-view-splitter[orient='vertical'], +#zen-sidebar-splitter { position: absolute; top: 0; left: 0; @@ -119,9 +120,9 @@ } &::before { - height: 30px; - width: 3px; - background: var(--zen-colors-border); + height: 50px; + width: 4px; + background: var(--zen-colors-primary); border-radius: 2px; content: ''; position: absolute; 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 08d6f61a1..bdcb201aa 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 @@ -696,10 +696,6 @@ transition: opacity 0.2s ease-in-out; background: var(--zen-colors-border); appearance: none; - - &:hover { - opacity: 1; - } } /* Mark: Move sidebar to the right */ diff --git a/src/browser/base/zen-components/ZenCompactMode.mjs b/src/browser/base/zen-components/ZenCompactMode.mjs index 862a4956d..7f3e5f3b8 100644 --- a/src/browser/base/zen-components/ZenCompactMode.mjs +++ b/src/browser/base/zen-components/ZenCompactMode.mjs @@ -147,7 +147,7 @@ var gZenCompactModeManager = { if (canHideSidebar && isCompactMode) { window.requestAnimationFrame(() => { this.sidebar.style.position = 'unset'; - this.sidebar.style.transition = 'margin .4s ease'; + this.sidebar.style.transition = 'margin .3s ease-in-out'; this.sidebar.style.left = '0'; if (!this.sidebarIsOnRight) { this.sidebar.style.marginLeft = `${-1 * sidebarWidth}px`; @@ -188,7 +188,7 @@ var gZenCompactModeManager = { } window.requestAnimationFrame(() => { - this.sidebar.style.transition = 'margin .3s ease, transform .275s ease, opacity .3s ease'; + this.sidebar.style.transition = 'margin .3s ease-in-out, transform .275s ease-in-out, opacity .3s ease'; // we are in compact mode and we are exiting it if (!this.sidebarIsOnRight) { this.sidebar.style.marginLeft = '0'; @@ -274,7 +274,7 @@ var gZenCompactModeManager = { { element: this.sidebar, screenEdge: this.sidebarIsOnRight ? 'right' : 'left', - keepHoverDuration: 100, + keepHoverDuration: 50, }, { element: document.getElementById('zen-appcontent-navbar-container'),