mirror of
https://github.com/zen-browser/desktop.git
synced 2026-04-24 16:25:47 +00:00
267 lines
7.3 KiB
CSS
267 lines
7.3 KiB
CSS
/*
|
|
* 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/.
|
|
*/
|
|
|
|
&:not([zen-compact-animating]) {
|
|
& #zen-sidebar-splitter {
|
|
display: none !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;
|
|
}
|
|
}
|
|
|
|
#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-window-buttons-reversed='true'] #zen-appcontent-navbar-wrapper #nav-bar {
|
|
margin-right: var(--zen-element-separation) !important;
|
|
margin-left: calc(var(--zen-element-separation) - 3px) !important;
|
|
}
|
|
|
|
#navigator-toolbox {
|
|
--zen-toolbox-max-width: 74px !important;
|
|
--zen-compact-float: var(--zen-element-separation);
|
|
|
|
:root[zen-no-padding='true'] & {
|
|
--zen-compact-float: 10px;
|
|
--zen-compact-top-toolbar-hidden-fix: var(--zen-compact-float);
|
|
--zen-compact-mode-no-padding-radius-fix: 2px;
|
|
}
|
|
|
|
/* 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,
|
|
visibility 0.15s ease;
|
|
bottom: var(--zen-compact-float);
|
|
padding: 0 var(--zen-compact-float) !important;
|
|
:root[zen-single-toolbar='true'] & {
|
|
/* We add an extra offset since windows users have a border top
|
|
* in the window in order to compensate how windows renders the
|
|
* titlebar */
|
|
top: calc(var(--zen-compact-float) / 2 + var(--zen-sidebar-compact-top-offset, 0px));
|
|
height: calc(100% - var(--zen-compact-float));
|
|
}
|
|
:root:not([zen-single-toolbar='true']) & {
|
|
bottom: calc(var(--zen-compact-float) / 2);
|
|
height: calc(100% - var(--zen-toolbar-height-with-bookmarks));
|
|
@media -moz-pref('zen.view.compact.hide-toolbar') {
|
|
height: calc(100% - var(--zen-compact-top-toolbar-hidden-fix, 0px));
|
|
}
|
|
}
|
|
& #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;
|
|
}
|
|
}
|
|
|
|
&:not([zen-right-side='true']) #navigator-toolbox {
|
|
left: calc(-1 * var(--actual-zen-sidebar-width) + var(--zen-element-separation) / 2 + 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-with-bookmarks) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:not([zen-sidebar-expanded='true']) .zen-essentials-container {
|
|
padding: 0;
|
|
}
|
|
|
|
&[zen-right-side='true'] {
|
|
& #navigator-toolbox:not([animate='true']) {
|
|
right: calc(-1 * var(--actual-zen-sidebar-width) + var(--zen-element-separation) / 2 + 1px);
|
|
}
|
|
|
|
& .browserSidebarContainer:not([is-zen-split='true']) {
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
}
|
|
|
|
#navigator-toolbox:not([animate='true']) #titlebar {
|
|
padding: var(--zen-toolbox-padding) !important;
|
|
:root:not([zen-sidebar-expanded='true']) & {
|
|
padding: var(--zen-toolbox-padding) 0 !important;
|
|
max-width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding) * 2);
|
|
width: var(--zen-sidebar-width);
|
|
}
|
|
position: relative;
|
|
min-width: var(--zen-toolbox-min-width);
|
|
transition: visibility 0.15s; /* Same as the toolbox */
|
|
visibility: hidden;
|
|
|
|
:root[zen-sidebar-expanded='true'] & {
|
|
width: calc(var(--zen-sidebar-width) + var(--zen-toolbox-padding));
|
|
}
|
|
|
|
& .zen-toolbar-background {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
#navigator-toolbox:is(
|
|
[zen-has-hover], [zen-user-show],
|
|
[zen-has-empty-tab], [flash-popup],
|
|
[has-popup-menu], [movingtab],
|
|
[zen-compact-mode-active]
|
|
),
|
|
&[zen-renaming-tab='true'] #navigator-toolbox {
|
|
&: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%
|
|
);
|
|
--zen-compact-mode-time: 0.25s;
|
|
transition:
|
|
left var(--zen-compact-mode-time) var(--zen-compact-mode-func),
|
|
right var(--zen-compact-mode-time) var(--zen-compact-mode-func);
|
|
|
|
:root:not([supress-primary-adjustment='true']) & {
|
|
& #titlebar {
|
|
transition: none;
|
|
visibility: visible;
|
|
}
|
|
|
|
left: calc(var(--zen-compact-float) / -2);
|
|
:root[zen-right-side='true'] & {
|
|
right: calc(var(--zen-compact-float) / -2);
|
|
left: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|