tm24fan8/firefox-csshacks
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Make multi-row_tabs patch depend on window_cotrol support style

Browse Source 
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.
This commit is contained in:
MrOtherGuy
2024-03-22 12:49:05 +02:00
parent 0936153495
commit 6e37932a8c
1 changed files with 44 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
chrome/multi-row_tabs_window_control_patch.css
View File

@@ -2,12 +2,24 @@
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 */
/* 20px wide space on left and right to be able to drag the window */
#TabsToolbar{ margin: 0 20px; }
/* 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;
@@ -16,26 +28,43 @@ See the above repository for updates as well as full license text. */
#toolbar-menubar{
height: 40px;
margin-bottom: -40px;
background-color: var(--toolbar-bgcolor);
display: flex;
}
:root[uidensity="compact"] #toolbar-menubar{ height: 32px; margin-bottom: -32px }
:root[tabsintitlebar] #nav-bar{ padding-right: 138px; margin-left: 30px; }
#toolbar-menubar > #menubar-items{
: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;
background-image: linear-gradient( to left,transparent,var(--toolbar-bgcolor) 35px);
color: var(--toolbar-color);
}
#main-menubar:not(:has(>[_moz-menuactive])){
#main-menubar > menu{
opacity: 0;
}
#main-menubar:last-child{ padding-inline-end: 40px }
#toolbar-menubar > #menubar-items:hover{z-index: 2;}
#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
}
}