0ff12e01fe
Flexbox model will replace old xul box as the default display model so this patch adds support for that in a whole bunch of styles. A lot of style rules are marked as "Fx < 112 compatibility" rules and those can be removed when 112 hits release.
67 lines
No EOL
2.2 KiB
CSS
67 lines
No EOL
2.2 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;
|
|
}
|
|
|
|
:root:not([customizing]) #titlebar{
|
|
position: fixed;
|
|
display: flex;
|
|
z-index: 1;
|
|
-moz-appearance: none !important;
|
|
right: 0px;
|
|
height: 100vh;
|
|
width: var(--uc-vertical-menubar-width);
|
|
}
|
|
:root:not([customizing]) #navigator-toolbox{ padding-top: calc(2* var(--tab-block-margin) + var(--tab-min-height)) }
|
|
|
|
#TabsToolbar:not([customizing]){
|
|
position: fixed;
|
|
display: flex;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100vw;
|
|
}
|
|
|
|
:root[sizemode="normal"] :where(.titlebar-spacer){ display: flex !important; }
|
|
|
|
#TabsToolbar > .toolbar-items{ max-width: calc(100vw - 138px); flex-grow: 1 }
|
|
#TabsToolbar > .titlebar-buttonbox-container{
|
|
display: flex !important;
|
|
}
|
|
|
|
#toolbar-menubar:not([customizing]){
|
|
margin-top: 40px; /* This needs to be bigger if bookmarks toolbar is shown */
|
|
width: var(--uc-vertical-menubar-width);
|
|
-moz-box-orient: vertical;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
background-color: var(--lwt-accent-color);
|
|
}
|
|
|
|
#toolbar-menubar > .titlebar-buttonbox-container,
|
|
#toolbar-menubar > spacer{ display: none !important; }
|
|
|
|
#toolbar-menubar > #menubar-items{ visibility: collapse }
|
|
|
|
#toolbar-menubar > .toolbarbutton-1:first-child:hover + #menubar-items,
|
|
#toolbar-menubar > #menubar-items:hover{ visibility: visible }
|
|
|
|
#toolbar-menubar:not([customizing]) #main-menubar{
|
|
-moz-box-orient: vertical;
|
|
flex-direction: column;
|
|
margin-left: -40px;
|
|
background-color: var(--lwt-accent-color);
|
|
}
|
|
|
|
:root:not([inDOMFullscreen]) #browser{ margin-right: var(--uc-vertical-menubar-width) }
|
|
|
|
} |