1
0
Fork 1
mirror of https://github.com/zen-browser/desktop.git synced 2025-07-14 07:03:52 +02:00
zen-desktop/src/browser/base/content/zen-styles/zen-compact-mode.css

160 lines
4.7 KiB
CSS

/* All overrides for compact mode go here */
@media not (-moz-bool-pref: "zen.view.compact") {
#sidebar-box {
margin-top: 0 !important;
}
}
@media (-moz-bool-pref: "zen.view.compact") {
:root[sizemode="fullscreen"],
#navigator-toolbox[inFullscreen]{ margin-top: 0 !important; }
#navigator-toolbox {
--zen-compact-toolbox-margin-single: 15px;
--zen-compact-toolbox-margin: var(--zen-compact-toolbox-margin-single);
position: absolute;
display: block;
transition: 200ms ease-in-out !important;
transform: translateX(calc(-100% + var(--zen-compact-toolbox-margin-single) + 2px));
opacity: 0;
line-height: 0;
z-index: 1;
height: 100%;
margin: 0;
padding: var(--zen-compact-toolbox-margin) !important;
padding-top: calc(var(--zen-compact-toolbox-margin-single) - 5px) !important;
& #titlebar {
border: 1px solid var(--zen-colors-border);
transition-delay: 200ms;
background: var(--zen-colors-tertiary) !important;
padding: 0 5px;
border-radius: var(--zen-panel-radius);
}
}
@media not (-moz-bool-pref: "zen.view.sidebar-expanded") {
#navigator-toolbox {
width: fit-content !important;
}
}
@media (-moz-bool-pref: "zen.view.sidebar-expanded") {
#navigator-toolbox {
min-width: calc(var(--zen-navigation-toolbar-min-width) + var(--zen-compact-toolbox-margin-single) * 2) !important;
}
}
#zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel[hidden="true"])),
#sidebar-box:not([positionend="true"]) {
margin-right: 0 !important;
margin-left: var(--zen-sidebar-web-panel-spacing) !important;
}
#sidebar-box[positionend="true"] {
margin-left: 0 !important;
margin-right: var(--zen-sidebar-web-panel-spacing) !important;
}
#sidebar-splitter {
margin: 0 !important;
}
@media not (-moz-bool-pref: "zen.view.compact.hide-toolbar") {
#navigator-toolbox {
/* Remove the top margin */
--zen-compact-toolbox-margin: calc(var(--zen-compact-toolbox-margin-single) / 3) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single);
}
#zen-sidebar-web-panel-wrapper,
#sidebar-box {
margin-top: 0 !important;
}
}
#navigator-toolbox:hover,
#navigator-toolbox:focus-within,
#navigator-toolbox[zen-user-show],
#mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
#navigator-toolbox:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)) {
transition-delay: 33ms !important;
transform: none !important;
opacity: 1;
& #titlebar {
min-width: calc(var(--zen-navigation-toolbar-min-width) + var(--zen-compact-toolbox-margin-single) * 4) !important;
}
}
#navigator-toolbox > *{ line-height: normal; pointer-events: auto }
#navigator-toolbox,
#navigator-toolbox > *{
-moz-appearance: none !important;
}
#zen-sidebar-splitter {
display: none !important;
}
/* Don't apply transform before window has been fully created */
:root:not([sessionrestored]) #navigator-toolbox{ transform:none !important }
:root[customizing] #navigator-toolbox{
position: relative !important;
transform: none !important;
opacity: 1 !important;
}
#navigator-toolbox[inFullscreen] > #PersonalToolbar,
#PersonalToolbar[collapsed="true"]{ display: none }
:root:not([inDOMFullscreen="true"]) #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
margin-left: var(--zen-element-separation) !important;
}
@media (-moz-bool-pref: "zen.view.compact.hide-toolbar") {
#navigator-toolbox {
padding-top: var(--zen-compact-toolbox-margin);
}
#zen-appcontent-navbar-container {
--urlbar-height: unset;
transition: .2s ease-in-out;
transform: translateY(calc(-100% + 5px));
opacity: 0;
position: absolute;
width: 100%;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom: 1px solid var(--zen-colors-border);
top: 0;
background: var(--zen-colors-tertiary);
z-index: 2;
transition: .2s ease-in-out;
}
#zen-appcontent-navbar-container:hover,
#zen-appcontent-navbar-container:focus-within,
#zen-appcontent-navbar-container[zen-user-show],
#mainPopupSet:has(> #appMenu-popup:hover) ~ #zen-appcontent-navbar-container,
#zen-appcontent-navbar-container:has(*[open="true"]) {
transform: translateY(0);
opacity: 1;
}
:root:not([inDOMFullscreen="true"]) #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
margin-top: var(--zen-element-separation) !important;
}
#titlebar {
padding-top: 5px !important;
}
#zen-sidebar-web-panel-wrapper {
margin-top: 10px !important;
}
}
}