Files
firefox-csshacks/chrome/multi-row_tabs_window_control_patch.css
MrOtherGuy 6e37932a8c Make multi-row_tabs patch depend on window_cotrol support style
This change achieves multiple things:

* The sizing options for placeholder are in one place
* Improves compatibility with other styles
* Improves compatibility with other window control placements
* Makes fullscreen work
* Makes menubar not take any space when disabled

Previously, when Firefox did not have :has selector support, we needed
to create :hover triggered space to activate menubar, this took some
space from toolbar and required special styling to support translucent
toolbar background colors. But it was necessary, because otherwise there
would have been no way to access menubar items.

This still assumes that the user has menubar disabled, but that is fine,
because if menubar is enabled, then there is no reason to use this style
in the first place.
2024-03-22 12:49:05 +02:00

71 lines
2.0 KiB
CSS

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_tabs_window_control_patch.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* This is a supporting style for multi-row_tabs.css*/
/* This depends on window_control_placeholder_support.css to work so get that as well */
/* !! Use customize mode to make menubar permanently enabled !! */
/* You should NOT use this style if you want menubar to just always be visible */
/* space on left and right to be able to drag the window */
:root[sizemode="normal"] #TabsToolbar{
margin-inline: var(--uc-window-drag-space-pre) var(--uc-window-drag-space-post);
}
#nav-bar{
border-left-width: 0px;
}
:root[sizemode="fullscreen"] .titlebar-buttonbox-container{
display: flex !important;
}
:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container{
display: none !important;
}
#titlebar{
flex-direction: column-reverse;
will-change: unset !important;
opacity: 1 !important;
}
#toolbar-menubar{
height: 40px;
margin-bottom: -40px;
display: flex;
}
:root[sizemode="fullscreen"] #toolbar-menubar{
visibility: visible !important;
}
:root[uidensity="compact"] #toolbar-menubar{
height: 32px;
margin-bottom: -32px;
}
#main-menubar{
height: 100%;
position: relative;
justify-content: center !important;
}
#main-menubar > menu{
opacity: 0;
}
#main-menubar:has(>[_moz-menuactive]),
#menubar-items:hover > #main-menubar{
background-image: linear-gradient( to left,transparent,var(--arrowpanel-background) 35px);
color: var(--arrowpanel-color);
background-size: cover;
position: relative;
z-index: 1;
}
#main-menubar:has(>[_moz-menuactive]) > menu{
opacity: 1;
}
#main-menubar:last-child{
padding-inline-end: 40px;
}
#menubar-items:hover{
z-index: 2;
}
#file-menu{
padding-inline-start: 30px;
background: url(chrome://browser/skin/settings.svg) no-repeat 10px;
fill: currentColor;
-moz-context-properties: fill
}