fenix-fox/chrome/vertical_bookmarks_toolbar.css
MrOtherGuy f12eed50a9 Don't restyle separators unless they are actually inside PersonalToolbar
Someone might use this style to make the bookmarks toolbar itself
vertical housing buttons etc. but have bookmarks-toolbar-items in some
other horizontal toolbar.
2022-10-04 08:54:38 +03:00

48 lines
No EOL
1.6 KiB
CSS

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/vertical_bookmarks_toolbar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Makes bookmarks toolbar appear vertically at the left side of the window */
@-moz-document url(chrome://browser/content/browser.xhtml){
:root:not([inDOMFullscreen]){
--uc-vertical-toolbar-width: 60px;
}
#PersonalToolbar{
position: fixed;
display: flex;
flex-direction: column;
left: 0;
width: var(--uc-vertical-toolbar-width,0);
/* These create a empty area to the bottom of the toolbar, which is to mask a fact that we don't know exactly how high the toolbar should be */
height: 100vh;
max-height: 100vh !important;
padding-bottom: 120px !important;
}
#personal-bookmarks{ overflow-y: auto; scrollbar-width: none;}
#PersonalToolbar > #personal-bookmarks > #PlacesToolbar > hbox{ -moz-box-orient: vertical !important; }
#PersonalToolbar #PlacesToolbarItems{
display: flex;
flex-direction: column;
}
#PersonalToolbar #PlacesToolbarItems > toolbarseparator{
height: 7px;
background-color: currentColor;
background-clip: padding-box;
border-block: 3px solid transparent !important;
}
#PersonalToolbar .toolbarbutton-1{ padding-block: 10px !important }
#PersonalToolbar #PlacesToolbarItems > .bookmark-item{ padding-block: 4px !important; }
body > #browser,
body > #browser-bottombox,
#customization-container{
margin-left: var(--uc-vertical-toolbar-width,0);
}
}