mirror of
https://github.com/zen-browser/desktop
synced 2026-04-25 17:15:00 +02:00
235 lines
7.5 KiB
CSS
235 lines
7.5 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/.
|
|
*/
|
|
/* All overrides for compact mode go here */
|
|
|
|
@media (-moz-bool-pref: 'zen.view.compact') {
|
|
:root:not([customizing]):not([inDOMFullscreen='true']) {
|
|
#zen-sidebar-top-buttons:has(#zen-sidebar-top-buttons-customization-target:empty) {
|
|
max-height: 0 !important;
|
|
min-height: 0 !important;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@media (-moz-bool-pref: 'zen.view.compact.hide-tabbar') or (-moz-bool-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: 0 !important;
|
|
}
|
|
|
|
#zen-appcontent-wrapper {
|
|
margin-left: var(--zen-element-separation) !important;
|
|
|
|
& #tabbrowser-tabbox {
|
|
margin-left: 0 !important;
|
|
}
|
|
}
|
|
|
|
#zen-sidebar-top-buttons-customization-target {
|
|
padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
|
|
}
|
|
|
|
#zen-sidebar-splitter {
|
|
display: none !important;
|
|
}
|
|
|
|
#navigator-toolbox {
|
|
--zen-toolbox-max-width: 64px !important;
|
|
--zen-compact-float: var(--zen-element-separation);
|
|
|
|
&:not([animate='true']) {
|
|
position: absolute;
|
|
z-index: 10;
|
|
transition:
|
|
left 0.25s ease,
|
|
right 0.25s ease,
|
|
opacity 1.5s ease;
|
|
top: 0;
|
|
bottom: var(--zen-element-separation);
|
|
opacity: 0;
|
|
padding: 0 var(--zen-compact-float) !important;
|
|
|
|
:root[zen-single-toolbar='true'] & {
|
|
top: var(--zen-element-separation);
|
|
|
|
& #nav-bar {
|
|
margin-left: calc(var(--zen-toolbox-padding) / 2) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
& #urlbar[open] {
|
|
top: 0 !important;
|
|
}
|
|
}
|
|
|
|
&:not([zen-right-side='true']) #navigator-toolbox {
|
|
left: calc(-1 * var(--zen-sidebar-width) + var(--zen-element-separation));
|
|
}
|
|
|
|
/* 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-bool-pref: 'zen.view.compact.hide-toolbar') {
|
|
&:not([zen-single-toolbar='true']) #navigator-toolbox:not([animate='true']) {
|
|
margin-top: var(--zen-toolbar-height) !important;
|
|
}
|
|
}
|
|
|
|
&[zen-right-side='true'] {
|
|
& #navigator-toolbox {
|
|
--zen-compact-float: calc(var(--zen-element-separation) + 1px);
|
|
|
|
&:not([animate='true']) {
|
|
right: calc(-1 * var(--zen-sidebar-width) + var(--zen-element-separation));
|
|
}
|
|
}
|
|
|
|
& .browserSidebarContainer {
|
|
margin-left: 0 !important;
|
|
margin-right: var(--zen-element-separation) !important;
|
|
}
|
|
}
|
|
|
|
#navigator-toolbox:not([animate='true']) #titlebar {
|
|
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
|
|
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;
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
@media (-moz-bool-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 */
|
|
backdrop-filter: blur(5px) !important;
|
|
}
|
|
}
|
|
|
|
#navigator-toolbox:hover,
|
|
#navigator-toolbox[zen-has-hover],
|
|
#navigator-toolbox[zen-user-show],
|
|
#navigator-toolbox[flash-popup],
|
|
#navigator-toolbox[has-popup-menu],
|
|
#navigator-toolbox[movingtab],
|
|
#navigator-toolbox:has(.tabbrowser-tab:active),
|
|
#navigator-toolbox:has(
|
|
*:is([panelopen='true'], [open='true'], #nav-bar:focus-within):not(tab):not(.zen-compact-mode-ignore)
|
|
) {
|
|
&:not([animate='true']) {
|
|
transition:
|
|
left 0.25s ease,
|
|
right 0.25s ease;
|
|
opacity: 1;
|
|
|
|
left: -1px;
|
|
:root[zen-right-side='true'] & {
|
|
right: -1px;
|
|
left: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
|
|
&:not([zen-single-toolbar='true']) {
|
|
& #navigator-toolbox {
|
|
top: 0;
|
|
}
|
|
|
|
& #navigator-toolbox {
|
|
--zen-toolbox-top-align: var(--zen-element-separation);
|
|
}
|
|
|
|
& #sidebar-box,
|
|
& #titlebar,
|
|
& #zen-appcontent-wrapper,
|
|
& #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel:not([pinned='true'])) {
|
|
margin-top: var(--zen-element-separation) !important;
|
|
}
|
|
|
|
& #zen-appcontent-wrapper {
|
|
z-index: 3 !important;
|
|
}
|
|
|
|
& #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
|
|
margin-top: calc(var(--zen-element-separation) * 2) !important;
|
|
}
|
|
|
|
& #zen-appcontent-navbar-container {
|
|
--zen-compact-toolbar-offset: 5px;
|
|
position: absolute;
|
|
top: calc((-1 * var(--zen-toolbar-height)) + var(--zen-element-separation) + 1px);
|
|
left: 0;
|
|
z-index: 20;
|
|
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3) !important;
|
|
border-bottom-left-radius: var(--zen-border-radius);
|
|
border-bottom-right-radius: var(--zen-border-radius);
|
|
border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
|
|
border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
|
|
transition: all 0.15s ease;
|
|
width: 100%;
|
|
opacity: 0;
|
|
background: var(--zen-dialog-background);
|
|
|
|
max-height: var(--zen-toolbar-height);
|
|
overflow: hidden;
|
|
|
|
& > * {
|
|
position: relative !important;
|
|
}
|
|
|
|
& #urlbar {
|
|
transform: translateY(-50%);
|
|
transition: transform 0.1s ease-in-out;
|
|
}
|
|
|
|
@media (-moz-bool-pref: 'zen.view.compact.color-toolbar') {
|
|
background-attachment: fixed;
|
|
backdrop-filter: blur(5px);
|
|
background: var(--zen-main-browser-background-toolbar);
|
|
background-size: 100% 2000px;
|
|
border-bottom: 1px solid var(--zen-colors-border);
|
|
}
|
|
}
|
|
|
|
& #zen-appcontent-navbar-container:hover,
|
|
& #zen-appcontent-navbar-container[zen-has-hover],
|
|
& #zen-appcontent-navbar-container:focus-within,
|
|
& #zen-appcontent-navbar-container[zen-user-show],
|
|
& #zen-appcontent-navbar-container[has-popup-menu],
|
|
& #zen-appcontent-navbar-container:has(*[panelopen='true'], [open='true']) {
|
|
opacity: 1;
|
|
border-top-width: 1px;
|
|
|
|
top: -1px;
|
|
overflow: initial;
|
|
max-height: unset;
|
|
|
|
& #urlbar {
|
|
transform: translateY(0);
|
|
|
|
&[open]:not([zen-floating-urlbar='true']) {
|
|
top: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|