Firefox CSS file that shows icons in the bookmarks toolbar and auto-hides it when not hovering

userChrome.css

/* --- Some code borrowed from /u/Trustadz --- */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once in userChrome.css */

/*  
1. Add this for no text in the bookmark bar. Adjust the margins if you want more or less space around the icons. 
*/
.bookmark-item{
    margin-left: 2px !important;
    margin-right: 2px !important;
    padding-right: 0 !important;
    padding-left: 0 !important; 
}
toolbarbutton.bookmark-item .toolbarbutton-text{
    display: none !important;
}
toolbarbutton.bookmark-item .toolbarbutton-icon{
    margin-left: 2px !important;
}

#PlacesToolbarItems > .bookmark-item > .toolbarbutton-icon[label]:not([label=""]) {
    margin-inline-end: 2px !important;
}
toolbarbutton.subviewbutton.subviewbutton-iconic .toolbarbutton-text{
    display: -moz-box !important;
}

/* 
2. Add this if you want to center the items in the bookmarks bar 
*/

#PlacesToolbarItems {
	-moz-box-pack: center
}

/* 
3. Add this if you want the text to show when you hover your mouse over it. 
*/

/* 
toolbarbutton.bookmark-item:hover:not(.subviewbutton):not([disabled="true"]):not([open]) .toolbarbutton-text{
    display: -moz-box !important;
}
 */
 
/*  
4. Add this if you want to see the names of folders in your bookmarkbar 
*/

toolbarbutton.bookmark-item[type="menu"]{
    margin-right: .5em !important
}
toolbarbutton.bookmark-item[type="menu"] .toolbarbutton-text{
    display: -moz-box !important;
}

/*  
5. Add this if you don't want folder to have icons. (so text only)  
*/

/* 
toolbarbutton.bookmark-item[type="menu"] .toolbarbutton-icon{
    display: none !important;
}
 */

/*  
6. Add this to auto hide the bookmarks bar  
*/

/* 
#PersonalToolbar{
    height: 3px !important;
    min-height: 3px !important;
    max-height: 3px !important;
    padding: 0;
}
#PersonalToolbar #personal-bookmarks{
    opacity: 0;
}
#PersonalToolbar:hover{
    height: 2em !important;
    min-height: 2em !important;
    max-height: 2em !important;
    padding: 0 6px 2px;
}
#PersonalToolbar:hover #personal-bookmarks{
    opacity: 1;
}
#PersonalToolbar, #PersonalToolbar #personal-bookmarks{
    transition-delay: 1s !important;    Change the 1s to change how long the bookmark toolbar stays visible 
} 
#PersonalToolbar:hover, #PersonalToolbar:hover #personal-bookmarks{
    transition-delay: 0s !important;
}
 */