daf2d17b36
This allows this style to work with several other styles such as tabs_on_bottom.css This patch also introduces a pref with which the side of the vertical strip can be changed - the default is now on left
86 lines
2.8 KiB
CSS
86 lines
2.8 KiB
CSS
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/vertical_menubar.css made available under Mozilla Public License v. 2.0
|
|
See the above repository for updates as well as full license text. */
|
|
|
|
/* Makes menubar appear vertically on the right side of the window */
|
|
|
|
/* The first element in the menubar is used to "toggle" the file-menu & friends */
|
|
/* So, if you want the menu items to be toggleable, just move one button to be before menubar items in the toolbar. If all buttons come after menubar items, then none of those will trigger menubar items. */
|
|
|
|
@-moz-document url(chrome://browser/content/browser.xhtml){
|
|
:root{
|
|
--uc-vertical-menubar-width: 36px;
|
|
}
|
|
#toolbar-menubar{
|
|
--uc-vertical-menubar-top: 76px;
|
|
:root[uidensity="compact"] & {
|
|
--uc-vertical-menubar-top: 72px;
|
|
}
|
|
}
|
|
#navigator-toolbox:has(> #PersonalToolbar[collapsed="false"]) > #titlebar > #toolbar-menubar{
|
|
--uc-vertical-menubar-top: 112px;
|
|
:root[uidensity="compact"] & {
|
|
--uc-vertical-menubar-top: 94px;
|
|
}
|
|
}
|
|
#titlebar{
|
|
opacity: 1 !important;
|
|
will-change: unset !important;
|
|
}
|
|
:root:not([customizing]) #toolbar-menubar{
|
|
position: fixed;
|
|
flex-direction: column;
|
|
top: var(--uc-vertical-menubar-top);
|
|
width: var(--uc-vertical-menubar-width);
|
|
padding-top: 2px !important;
|
|
z-index: 2;
|
|
overflow: visible;
|
|
height: calc(100vh - var(--uc-vertical-menubar-top))
|
|
}
|
|
:root[lwtheme] #toolbar-menubar{
|
|
background-color: var(--arrowpanel-background);
|
|
}
|
|
#main-menubar{
|
|
flex-direction: column;
|
|
align-self: flex-start;
|
|
}
|
|
#main-menubar{
|
|
outline: 1px solid var(--arrowpanel-border-color);
|
|
background-color: light-dark(rgb(235, 235, 239), rgb(31, 30, 37))
|
|
}
|
|
:root[lwtheme] #main-menubar{
|
|
background-color: var(--arrowpanel-background,var(--lwt-accent-color));
|
|
}
|
|
#toolbar-menubar > .titlebar-buttonbox-container{
|
|
display: none;
|
|
}
|
|
#TabsToolbar > .titlebar-buttonbox-container{
|
|
display: flex !important;
|
|
}
|
|
:root:not([sizemode="fullscreen"]) :where(.titlebar-spacer[type="post-tabs"]),
|
|
:root[sizemode="normal"] :where(.titlebar-spacer){
|
|
display: flex !important;
|
|
}
|
|
|
|
#toolbar-menubar > #menubar-items{ visibility: collapse }
|
|
#toolbar-menubar > .toolbarbutton-1:first-child:hover + #menubar-items,
|
|
#toolbar-menubar > #menubar-items:hover{ visibility: visible }
|
|
|
|
:root:not([inDOMFullscreen]) #browser{
|
|
margin-left: var(--uc-vertical-menubar-width);
|
|
}
|
|
|
|
@media (-moz-bool-pref: "userchrome.vertical-menubar.on-right.enabled"){
|
|
:root:not([inDOMFullscreen]) #browser{
|
|
margin-inline: 0 var(--uc-vertical-menubar-width);
|
|
}
|
|
#toolbar-menubar{
|
|
right: 0;
|
|
}
|
|
#toolbar-menubar:not([customizing]) #main-menubar{
|
|
align-self: flex-end;
|
|
}
|
|
}
|
|
:root[sizemode="fullscreen"] #browser{
|
|
margin-inline: 0;
|
|
}
|
|
} |