mirror of
https://github.com/zen-browser/desktop.git
synced 2025-07-14 07:03:52 +02:00
201 lines
6.3 KiB
CSS
201 lines
6.3 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: calc(var(--zen-element-separation) * 2);
|
|
--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) / 2)));
|
|
opacity: 0;
|
|
line-height: 0;
|
|
z-index: 2;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: var(--zen-compact-toolbox-margin) !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);
|
|
}
|
|
|
|
& > * {
|
|
pointer-events: none;
|
|
}
|
|
|
|
&, & #titlebar {
|
|
min-width: calc(var(--zen-navigation-toolbar-min-width) + var(--zen-compact-toolbox-margin-single) * 4) !important;
|
|
}
|
|
}
|
|
|
|
@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 */
|
|
/* The toolbox isn't relative to the webview anymore, meaning we can't just add a static value and call it a day...
|
|
* The top margin is calculated by taking the following factors into account:
|
|
* 1. Element separation
|
|
* 2. Extra margin to separate from the webview
|
|
* 3. Add element separation variable, to avoid overlaping with the toolbar
|
|
* 4. Calculate toolbar height, taken from zen-urlbar.css
|
|
*/
|
|
--zen-compact-toolbox-margin: calc(var(--zen-compact-toolbox-margin-single) + .15rem + var(--zen-element-separation) + (18px + (var(--toolbarbutton-inner-padding) * 2))) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single);
|
|
|
|
:root[zen-sidebar-legacy="true"] & {
|
|
--zen-compact-toolbox-margin: calc(var(--zen-compact-toolbox-margin-single) / 2) 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],
|
|
#navigator-toolbox[movingtab],
|
|
#mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
|
|
#navigator-toolbox:has(.tabbrowser-tab:active),
|
|
#navigator-toolbox:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)) {
|
|
transform: none !important;
|
|
opacity: 1;
|
|
|
|
& > * {
|
|
pointer-events: all;
|
|
}
|
|
}
|
|
|
|
#navigator-toolbox > *{ line-height: normal; }
|
|
|
|
#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") {
|
|
#zen-appcontent-navbar-container {
|
|
--urlbar-height: unset;
|
|
transition: .2s ease-in-out;
|
|
transform: translateY(calc(-100% + var(--zen-element-separation)));
|
|
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;
|
|
}
|
|
}
|
|
|
|
@media (-moz-bool-pref: "zen.tabs.vertical.right-side") {
|
|
#navigator-toolbox {
|
|
right: 0 !important;
|
|
transform: translateX(calc(100% - (var(--zen-compact-toolbox-margin-single) / 2))) !important;;
|
|
}
|
|
|
|
#navigator-toolbox > vbox {
|
|
float: right;
|
|
}
|
|
|
|
#navigator-toolbox:hover,
|
|
#navigator-toolbox:focus-within,
|
|
#navigator-toolbox[zen-user-show],
|
|
#navigator-toolbox[movingtab],
|
|
#mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
|
|
#navigator-toolbox:has(.tabbrowser-tab:active),
|
|
#navigator-toolbox:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)) {
|
|
transform: none !important;
|
|
opacity: 1;
|
|
|
|
& > * {
|
|
pointer-events: all;
|
|
}
|
|
}
|
|
}
|
|
}
|