mirror of
https://github.com/zen-browser/desktop.git
synced 2025-10-15 14:26:12 +00:00
fix: streamline style clearing in ZenGlanceManager and update version numbers in surfer.json
This commit is contained in:
mr. M
@@ -83,8 +83,6 @@
|
||||
|
||||
_changeSidebarLocation() {
|
||||
const kElementsToAppend = ['sidebar-splitter', 'sidebar-box'];
|
||||
const appWrapepr = document.getElementById('zen-sidebar-box-container');
|
||||
appWrapepr.setAttribute('hidden', 'true');
|
||||
|
||||
const browser = document.getElementById('browser');
|
||||
const toolbox = document.getElementById('navigator-toolbox');
|
||||
|
||||
@@ -657,10 +657,10 @@ var gZenVerticalTabsManager = {
|
||||
this.navigatorToolbox.after(document.getElementById('zen-sidebar-splitter'));
|
||||
window.dispatchEvent(new Event('resize'));
|
||||
gZenCompactModeManager.getAndApplySidebarWidth();
|
||||
gZenUIManager.updateTabsToolbar();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
gZenUIManager.updateTabsToolbar();
|
||||
this._isUpdating = false;
|
||||
},
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
diff --git a/browser/base/content/browser.xhtml b/browser/base/content/browser.xhtml
|
||||
index 0d0a559a6473149b50f4bf18d059e86907c4acd3..a5a48ba1d50b3bf74dec3f3d371a76228e246a9e 100644
|
||||
index 0d0a559a6473149b50f4bf18d059e86907c4acd3..25ad798eb26f04262d069fdaf1f3fb00adec9807 100644
|
||||
--- a/browser/base/content/browser.xhtml
|
||||
+++ b/browser/base/content/browser.xhtml
|
||||
@@ -26,6 +26,7 @@
|
||||
@@ -27,7 +27,7 @@ index 0d0a559a6473149b50f4bf18d059e86907c4acd3..a5a48ba1d50b3bf74dec3f3d371a7622
|
||||
</head>
|
||||
<html:body xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
# All sets except for popupsets (commands, keys, and stringbundles)
|
||||
@@ -169,9 +173,13 @@
|
||||
@@ -169,9 +173,11 @@
|
||||
</vbox>
|
||||
</html:template>
|
||||
|
||||
@@ -37,8 +37,6 @@ index 0d0a559a6473149b50f4bf18d059e86907c4acd3..a5a48ba1d50b3bf74dec3f3d371a7622
|
||||
+ <hbox id="zen-main-app-wrapper" flex="1" persist="zen-compact-mode">
|
||||
+ <vbox id="zen-toast-container"></vbox>
|
||||
+ #include navigator-toolbox.inc.xhtml
|
||||
+ <html:span id="zen-sidebar-box-container">
|
||||
+ </html:span>
|
||||
+ #include browser-box.inc.xhtml
|
||||
+ </hbox>
|
||||
|
||||
|
||||
@@ -19,7 +19,6 @@
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-decks.css" />
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-folders.css" />
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-glance.css" />
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-sidebar-panels.css" />
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-popup.css" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-compact-mode.css" />
|
||||
|
||||
@@ -45,7 +45,6 @@
|
||||
content/browser/zen-styles/zen-workspaces.css (content/zen-styles/zen-workspaces.css)
|
||||
content/browser/zen-styles/zen-urlbar.css (content/zen-styles/zen-urlbar.css)
|
||||
content/browser/zen-styles/zen-popup.css (content/zen-styles/zen-popup.css)
|
||||
content/browser/zen-styles/zen-sidebar-panels.css (content/zen-styles/zen-sidebar-panels.css)
|
||||
content/browser/zen-styles/zen-gradient-generator.css (content/zen-styles/zen-gradient-generator.css)
|
||||
content/browser/zen-styles/zen-rices.css (content/zen-styles/zen-rices.css)
|
||||
content/browser/zen-styles/zen-branding.css (content/zen-styles/zen-branding.css)
|
||||
|
||||
@@ -191,3 +191,42 @@
|
||||
:root[zen-window-buttons-reversed='true'][zen-right-side='true'] .titlebar-buttonbox-container {
|
||||
margin-inline-start: calc(var(--zen-element-separation) - 3px);
|
||||
}
|
||||
|
||||
.zen-split-view-splitter[orient='vertical'],
|
||||
#zen-sidebar-splitter {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: var(--zen-element-separation);
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: ew-resize;
|
||||
z-index: 3;
|
||||
|
||||
&:is(.zen-split-view-splitter[orient='vertical']) {
|
||||
/* Bit of a hacky solution, but it works */
|
||||
width: var(--zen-split-row-gap);
|
||||
margin-left: calc(var(--zen-element-separation) * -1 - 1px);
|
||||
height: unset;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
&::before {
|
||||
height: 50px;
|
||||
width: 2px;
|
||||
background: var(--button-primary-bgcolor);
|
||||
border-radius: 2px;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s ease-in-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,287 +7,288 @@
|
||||
|
||||
:root[zen-compact-mode='true']:not([customizing]):not([inDOMFullscreen='true']) {
|
||||
%include zen-tabs/vertical-tabs-topbuttons-fix.css
|
||||
|
||||
@media -moz-pref('zen.view.compact.hide-tabbar') or -moz-pref('zen.view.use-single-toolbar') {
|
||||
#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
|
||||
margin-left: var(--zen-sidebar-web-panel-spacing) !important;
|
||||
}
|
||||
|
||||
#zen-tabbox-wrapper {
|
||||
/* Remove extra 1px of margine we have to add to the tabbox */
|
||||
margin-left: var(--zen-element-separation) !important;
|
||||
margin-right: var(--zen-element-separation) !important;
|
||||
}
|
||||
|
||||
#zen-appcontent-wrapper {
|
||||
& #tabbrowser-tabbox {
|
||||
margin-left: 0 !important;
|
||||
&:not([zen-compact-animating]) {
|
||||
& #zen-sidebar-splitter {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
#zen-sidebar-top-buttons-customization-target {
|
||||
padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
|
||||
}
|
||||
#zen-tabbox-wrapper {
|
||||
/* Remove extra 1px of margine we have to add to the tabbox */
|
||||
margin-left: var(--zen-element-separation) !important;
|
||||
margin-right: var(--zen-element-separation) !important;
|
||||
}
|
||||
|
||||
#zen-sidebar-splitter {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&:not([zen-window-buttons-reversed='true']) #zen-appcontent-navbar-container #nav-bar {
|
||||
margin-left: var(--zen-element-separation) !important;
|
||||
}
|
||||
|
||||
&[zen-window-buttons-reversed='true'] #zen-appcontent-navbar-container #nav-bar {
|
||||
margin-right: var(--zen-element-separation) !important;
|
||||
margin-left: calc(var(--zen-element-separation) - 3px) !important;
|
||||
}
|
||||
|
||||
#navigator-toolbox {
|
||||
--zen-toolbox-max-width: 64px !important;
|
||||
--zen-compact-float: var(--zen-element-separation);
|
||||
|
||||
/* Initial padding for when we are animating */
|
||||
padding: 0 0 0 var(--zen-toolbox-padding) !important;
|
||||
|
||||
&:not([animate='true']) {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
transition:
|
||||
left 0.15s ease,
|
||||
right 0.15s ease,
|
||||
opacity 1.5s ease;
|
||||
top: 0;
|
||||
bottom: var(--zen-element-separation);
|
||||
padding: 0 var(--zen-compact-float) !important;
|
||||
opacity: 0;
|
||||
|
||||
:root[zen-single-toolbar='true'] & {
|
||||
top: calc(var(--zen-element-separation) / 2);
|
||||
height: calc(100% - var(--zen-element-separation));
|
||||
}
|
||||
|
||||
& #zen-sidebar-top-buttons {
|
||||
margin: 0 0 calc(var(--zen-toolbox-padding) / 2) 0;
|
||||
#zen-appcontent-wrapper {
|
||||
& #tabbrowser-tabbox {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:not([zen-right-side='true']) #nav-bar {
|
||||
margin-left: 0 !important;
|
||||
#zen-sidebar-splitter {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:not([zen-right-side='true']) #navigator-toolbox {
|
||||
left: calc(-1 * var(--actual-zen-sidebar-width) + 1px);
|
||||
}
|
||||
|
||||
/* When we have multiple toolbars and the top-toolbar is NOT being hidden,
|
||||
* we need to adjust the top-padding of the toolbox to account for the
|
||||
* extra toolbar height. */
|
||||
@media not -moz-pref('zen.view.compact.hide-toolbar') {
|
||||
&:not([zen-single-toolbar='true']) {
|
||||
#navigator-toolbox:not([animate='true']) {
|
||||
margin-top: var(--zen-toolbar-height) !important;
|
||||
}
|
||||
#zen-sidebar-top-buttons-customization-target {
|
||||
padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&[zen-right-side='true'] {
|
||||
& #navigator-toolbox {
|
||||
--zen-compact-float: calc(var(--zen-element-separation) + 1px);
|
||||
&:not([zen-window-buttons-reversed='true']) #zen-appcontent-navbar-container #nav-bar {
|
||||
margin-left: var(--zen-element-separation) !important;
|
||||
}
|
||||
|
||||
&[zen-window-buttons-reversed='true'] #zen-appcontent-navbar-container #nav-bar {
|
||||
margin-right: var(--zen-element-separation) !important;
|
||||
margin-left: calc(var(--zen-element-separation) - 3px) !important;
|
||||
}
|
||||
|
||||
#navigator-toolbox {
|
||||
--zen-toolbox-max-width: 64px !important;
|
||||
--zen-compact-float: var(--zen-element-separation);
|
||||
|
||||
/* Initial padding for when we are animating */
|
||||
padding: 0 0 0 var(--zen-toolbox-padding) !important;
|
||||
|
||||
&:not([animate='true']) {
|
||||
right: calc(-1 * var(--actual-zen-sidebar-width) + 1px);
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
transition:
|
||||
left 0.15s ease,
|
||||
right 0.15s ease,
|
||||
opacity 1.5s ease;
|
||||
top: 0;
|
||||
bottom: var(--zen-element-separation);
|
||||
padding: 0 var(--zen-compact-float) !important;
|
||||
opacity: 0;
|
||||
|
||||
:root[zen-single-toolbar='true'] & {
|
||||
top: calc(var(--zen-element-separation) / 2);
|
||||
height: calc(100% - var(--zen-element-separation));
|
||||
}
|
||||
|
||||
& #zen-sidebar-top-buttons {
|
||||
margin: 0 0 calc(var(--zen-toolbox-padding) / 2) 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:not([zen-right-side='true']) #nav-bar {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
& .browserSidebarContainer {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
&:not([zen-right-side='true']) #navigator-toolbox {
|
||||
left: calc(-1 * var(--actual-zen-sidebar-width) + 1px);
|
||||
}
|
||||
}
|
||||
|
||||
#navigator-toolbox:not([animate='true']) #titlebar {
|
||||
box-shadow: var(--zen-big-shadow);
|
||||
border-radius: calc(var(--zen-native-inner-radius) + var(--zen-element-separation) / 4);
|
||||
padding: var(--zen-toolbox-padding) !important;
|
||||
position: relative;
|
||||
background: var(--zen-dialog-background);
|
||||
outline: 1px solid var(--zen-colors-border-contrast);
|
||||
outline-offset: -1px;
|
||||
/* times 4 because we have the inner padding and the outter padding to consider */
|
||||
:root[zen-sidebar-expanded='true'] & {
|
||||
&[has-animated-padding='true'] {
|
||||
width: calc(var(--zen-sidebar-width) + var(--zen-toolbox-padding));
|
||||
}
|
||||
|
||||
&:not([has-animated-padding='true']) {
|
||||
width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding));
|
||||
/* When we have multiple toolbars and the top-toolbar is NOT being hidden,
|
||||
* we need to adjust the top-padding of the toolbox to account for the
|
||||
* extra toolbar height. */
|
||||
@media not -moz-pref('zen.view.compact.hide-toolbar') {
|
||||
&:not([zen-single-toolbar='true']) {
|
||||
#navigator-toolbox:not([animate='true']) {
|
||||
margin-top: var(--zen-toolbar-height) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:root[zen-single-toolbar='true'] {
|
||||
padding-top: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
&[zen-right-side='true'] {
|
||||
& #navigator-toolbox {
|
||||
--zen-compact-float: calc(var(--zen-element-separation) + 1px);
|
||||
|
||||
&:not([animate='true']) {
|
||||
right: calc(-1 * var(--actual-zen-sidebar-width) + 1px);
|
||||
}
|
||||
}
|
||||
|
||||
& .browserSidebarContainer {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media -moz-pref('zen.view.compact.color-sidebar') {
|
||||
background: var(--zen-main-browser-background-toolbar) !important;
|
||||
background-attachment: fixed !important;
|
||||
background-size: 2000px !important; /* Dont ask me why */
|
||||
/* NOTE: We MUST not add a backdrop-filter if we want the URL
|
||||
* bar to be floating correctly:
|
||||
* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Containing_block#identifying_the_containing_block */
|
||||
#navigator-toolbox:not([animate='true']) #titlebar {
|
||||
box-shadow: var(--zen-big-shadow);
|
||||
border-radius: calc(var(--zen-native-inner-radius) + var(--zen-element-separation) / 4);
|
||||
padding: var(--zen-toolbox-padding) !important;
|
||||
position: relative;
|
||||
background: var(--zen-dialog-background);
|
||||
outline: 1px solid var(--zen-colors-border-contrast);
|
||||
outline-offset: -1px;
|
||||
/* times 4 because we have the inner padding and the outter padding to consider */
|
||||
:root[zen-sidebar-expanded='true'] & {
|
||||
&[has-animated-padding='true'] {
|
||||
width: calc(var(--zen-sidebar-width) + var(--zen-toolbox-padding));
|
||||
}
|
||||
|
||||
&:not([has-animated-padding='true']) {
|
||||
width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding));
|
||||
}
|
||||
}
|
||||
|
||||
:root[zen-single-toolbar='true'] {
|
||||
padding-top: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
@media -moz-pref('zen.view.compact.color-sidebar') {
|
||||
background: var(--zen-main-browser-background-toolbar) !important;
|
||||
background-attachment: fixed !important;
|
||||
background-size: 2000px !important; /* Dont ask me why */
|
||||
/* NOTE: We MUST not add a backdrop-filter if we want the URL
|
||||
* bar to be floating correctly:
|
||||
* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Containing_block#identifying_the_containing_block */
|
||||
}
|
||||
|
||||
& #urlbar[open][zen-floating-urlbar='true'] {
|
||||
transition: left 0.05s ease;
|
||||
visibility: visible;
|
||||
|
||||
#navigator-toolbox:has(&) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: url(chrome://browser/content/zen-images/grain-bg.png);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
opacity: var(--zen-grainy-background-opacity, 0);
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
}
|
||||
|
||||
& #urlbar[open][zen-floating-urlbar='true'] {
|
||||
transition: left 0.05s ease;
|
||||
visibility: visible;
|
||||
|
||||
#navigator-toolbox:has(&) {
|
||||
#navigator-toolbox[zen-has-hover]:not(:has(#urlbar[zen-floating-urlbar='true']:hover)),
|
||||
#navigator-toolbox[zen-user-show],
|
||||
#navigator-toolbox[zen-has-empty-tab],
|
||||
#navigator-toolbox[flash-popup],
|
||||
#navigator-toolbox[has-popup-menu],
|
||||
#navigator-toolbox[movingtab],
|
||||
#navigator-toolbox:has(.tabbrowser-tab:active),
|
||||
&[zen-renaming-tab='true'] #navigator-toolbox,
|
||||
#navigator-toolbox:has(
|
||||
*:is([panelopen='true'], [open='true'], #urlbar:focus-within):not(#urlbar[zen-floating-urlbar='true']):not(tab):not(.zen-compact-mode-ignore)
|
||||
) {
|
||||
&:not([animate='true']) {
|
||||
--zen-compact-mode-func: linear(
|
||||
0 0%,
|
||||
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.25s var(--zen-compact-mode-func),
|
||||
right 0.25s var(--zen-compact-mode-func);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: url(chrome://browser/content/zen-images/grain-bg.png);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
opacity: var(--zen-grainy-background-opacity, 0);
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
}
|
||||
|
||||
#navigator-toolbox[zen-has-hover]:not(:has(#urlbar[zen-floating-urlbar='true']:hover)),
|
||||
#navigator-toolbox[zen-user-show],
|
||||
#navigator-toolbox[zen-has-empty-tab],
|
||||
#navigator-toolbox[flash-popup],
|
||||
#navigator-toolbox[has-popup-menu],
|
||||
#navigator-toolbox[movingtab],
|
||||
#navigator-toolbox:has(.tabbrowser-tab:active),
|
||||
&[zen-renaming-tab='true'] #navigator-toolbox,
|
||||
#navigator-toolbox:has(
|
||||
*:is([panelopen='true'], [open='true'], #urlbar:focus-within):not(#urlbar[zen-floating-urlbar='true']):not(tab):not(.zen-compact-mode-ignore)
|
||||
) {
|
||||
&:not([animate='true']) {
|
||||
--zen-compact-mode-func: linear(
|
||||
0 0%,
|
||||
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.25s var(--zen-compact-mode-func),
|
||||
right 0.25s var(--zen-compact-mode-func);
|
||||
opacity: 1;
|
||||
|
||||
&:not([supress-primary-adjustment='true']) {
|
||||
left: calc(var(--zen-element-separation) / -2);
|
||||
:root[zen-right-side='true'] & {
|
||||
right: calc(var(--zen-element-separation) / -2);
|
||||
left: auto;
|
||||
&:not([supress-primary-adjustment='true']) {
|
||||
left: calc(var(--zen-element-separation) / -2);
|
||||
:root[zen-right-side='true'] & {
|
||||
right: calc(var(--zen-element-separation) / -2);
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -133,7 +133,7 @@
|
||||
padding: 5px;
|
||||
position: relative;
|
||||
|
||||
& .zen-theme-picker-dot-custom {
|
||||
& .zen-theme-picker-dot.custom {
|
||||
background: var(--zen-theme-picker-dot-color);
|
||||
border: 1px solid var(--zen-colors-border);
|
||||
border-radius: 5px;
|
||||
|
||||
@@ -1,306 +0,0 @@
|
||||
/*
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
#zen-sidebar-panels-wrapper {
|
||||
/*min-height: 500px;*/
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
#zen-sidebar-panels-sites {
|
||||
background: transparent;
|
||||
max-width: 1px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#zen-sidebar-add-panel-button:not(:hover) image,
|
||||
.zen-sidebar-panel-button:not([selected='true'], #zen-sidebar-add-panel-button) image {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.zen-sidebar-panel-button {
|
||||
width: var(--zen-sidebar-action-button-width);
|
||||
height: var(--zen-sidebar-action-button-width);
|
||||
max-height: var(--zen-sidebar-action-button-width);
|
||||
padding: 0 3px !important;
|
||||
margin: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.zen-sidebar-panel-button image {
|
||||
border-radius: 10px !important;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.zen-sidebar-panel-button:hover image {
|
||||
background: color-mix(in srgb, var(--toolbarbutton-hover-background) 12%, transparent);
|
||||
}
|
||||
|
||||
.zen-sidebar-panel-button[selected='true'] image {
|
||||
border-color: var(--zen-primary-color);
|
||||
}
|
||||
|
||||
/** Sidebar view */
|
||||
|
||||
#zen-sidebar-web-panel-wrapper {
|
||||
--zen-default-sidebar-width: 300px;
|
||||
--zen-sidebar-web-panel-spacing: var(--zen-element-separation);
|
||||
position: relative;
|
||||
margin-right: 0;
|
||||
display: flex;
|
||||
pointer-events: none;
|
||||
transition: width 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[hidden='true']) {
|
||||
max-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: calc(100% - var(--zen-sidebar-web-panel-spacing) * 3);
|
||||
margin: var(--zen-sidebar-web-panel-spacing);
|
||||
/* Why times 3?
|
||||
* + 1 for the top margin, making the element overflow the view.
|
||||
* + 1 for the margin we want to add at the bottom
|
||||
* + 1 so that the panel can be correctly spaced from the border of the webview
|
||||
*/
|
||||
height: calc(100% - var(--zen-sidebar-web-panel-spacing) * 4);
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel {
|
||||
border-radius: var(--zen-native-inner-radius);
|
||||
z-index: 2;
|
||||
box-shadow: var(--zen-big-shadow);
|
||||
background: var(--zen-colors-tertiary);
|
||||
opacity: 0;
|
||||
animation-delay: 0.1s;
|
||||
flex-direction: column;
|
||||
min-width: var(--zen-default-sidebar-width);
|
||||
max-width: 720px;
|
||||
min-height: var(--zen-default-sidebar-width);
|
||||
width: calc(var(--zen-default-sidebar-width) + 200px);
|
||||
pointer-events: all;
|
||||
height: calc(100% - 20px);
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel:not([pinned='true']) {
|
||||
/* We need to always override the height */
|
||||
height: unset !important;
|
||||
}
|
||||
|
||||
.zen-sidebar-web-panel-splitter,
|
||||
.zen-split-view-splitter[orient='vertical'],
|
||||
#zen-sidebar-splitter {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: var(--zen-element-separation);
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: ew-resize;
|
||||
z-index: 3;
|
||||
|
||||
&:is(.zen-split-view-splitter[orient='vertical']) {
|
||||
/* Bit of a hacky solution, but it works */
|
||||
width: var(--zen-split-row-gap);
|
||||
margin-left: calc(var(--zen-element-separation) * -1 - 1px);
|
||||
height: unset;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
&::before {
|
||||
height: 50px;
|
||||
width: 2px;
|
||||
background: var(--button-primary-bgcolor);
|
||||
border-radius: 2px;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s ease-in-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.zen-sidebar-web-panel-splitter[side='right'] {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.zen-sidebar-web-panel-splitter[side='left'] {
|
||||
right: 100%;
|
||||
}
|
||||
|
||||
.zen-sidebar-web-panel-splitter[orient='horizontal'] {
|
||||
width: 100%;
|
||||
height: 7px;
|
||||
cursor: ns-resize;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.zen-sidebar-web-panel-splitter[side='bottom'] {
|
||||
top: initial;
|
||||
bottom: -2px;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel[hidden='true'] .zen-sidebar-web-panel-splitter,
|
||||
#zen-sidebar-web-panel-wrapper[hidden='true'] + .zen-sidebar-web-panel-splitter,
|
||||
#zen-sidebar-web-panel:not([pinned='true']) .zen-sidebar-web-panel-splitter[orient='horizontal'],
|
||||
#zen-sidebar-web-panel:not([pinned='true']) .zen-sidebar-web-panel-splitter[side='left'] {
|
||||
display: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#main-window[customizing='true'] #zen-sidebar-web-panel-wrapper {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel:not([hidden='true']) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel[pinned='true'] {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel[hidden='true'][pinned='true'] {
|
||||
display: flex;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-header,
|
||||
#zen-sidebar-panels-wrapper {
|
||||
width: 100%;
|
||||
min-height: var(--zen-toolbar-height) !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 5px;
|
||||
border: var(--zen-appcontent-border);
|
||||
border-width: 0 !important;
|
||||
border-bottom-width: 1px !important;
|
||||
background: transparent;
|
||||
position: relative;
|
||||
color-scheme: var(--toolbar-color-scheme);
|
||||
-moz-window-dragging: no-drag;
|
||||
|
||||
--toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-header {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-header toolbarbutton {
|
||||
fill: color-mix(in srgb, var(--toolbarbutton-icon-fill) 70%, transparent);
|
||||
}
|
||||
|
||||
#zen-sidebar-panels-wrapper {
|
||||
border-top-width: 1px !important;
|
||||
border-bottom-width: 0px !important;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel-browser-containers {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#zen-sidebar-introduction-panel {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
#zen-sidebar-introduction-panel[hidden='true'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#zen-sidebar-introduction-panel h1 {
|
||||
font-size: 1.5em;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
#zen-sidebar-introduction-panel p {
|
||||
opacity: 0.7;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel browser[zen-sidebar-id] {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel-title {
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
margin: 0 10px;
|
||||
padding: 0;
|
||||
color: var(--text-color-deemphasized);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: -moz-available;
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel[pinned] {
|
||||
transform-origin: 50% 20%;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel[pinned]:not([hidden]) {
|
||||
animation: better-sidebar-pinned-show 0.15s ease-in-out forwards !important;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel[pinned][hidden] {
|
||||
animation: better-sidebar-pinned-hide 0.15s ease-in-out forwards !important;
|
||||
}
|
||||
|
||||
/** UNPINNED **/
|
||||
#zen-sidebar-web-panel {
|
||||
/* Sets perspective */
|
||||
transform-origin: 50% 20%;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel:not([hidden]) #zen-sidebar-introduction-panel * {
|
||||
opacity: 0;
|
||||
animation: better-sidebar-intro-show 0.5s 0.4s ease-out forwards !important;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel:not([hidden]) #zen-sidebar-introduction-panel p {
|
||||
animation: better-sidebar-intro-show 0.5s 0.8s ease-out forwards !important;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel:not([hidden]) {
|
||||
animation: better-sidebar-show 0.15s ease-in-out forwards !important;
|
||||
}
|
||||
|
||||
#zen-sidebar-web-panel[hidden] {
|
||||
animation: better-sidebar-hide 0.15s ease-in-out forwards !important;
|
||||
}
|
||||
Reference in New Issue
Block a user