Closed Acid-Crash closed 5 years ago
Replace the code of the corresponding file with this one:
/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/
/* This code won't work for all buttons the same way. There are still too many different *
** types and button variations out there to catch all of them with general code. ********/
/* compact button mode */
#main-window[uidensity=compact] #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
#main-window[uidensity=compact] #nav-bar .toolbarbutton-1 .toolbarbutton-badge-stack > .toolbarbutton-icon {
width: 32px !important;
height: 26px !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
#main-window[uidensity=compact] #nav-bar .toolbarbutton-1 .toolbarbutton-badge-stack {
width: 32px !important;
height: 26px !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
}
#main-window[uidensity=compact] #nav-bar #fxa-toolbar-menu-button .toolbarbutton-badge-stack {
padding-top: 5px !important;
padding-bottom: 5px !important;
padding-left: 8px !important;
padding-right: 8px !important;
}
#main-window[uidensity=compact] #nav-bar #downloads-button #downloads-indicator-anchor {
margin-left: 2px !important;
margin-right: 2px !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
#main-window[uidensity=compact] #nav-bar .webextension-browser-action .toolbarbutton-icon {
margin-left: 2px !important;
margin-right: 2px !important;
}
#main-window[uidensity=compact] #nav-bar :-moz-any(#add-ons-button,#zoom-out-button,#zoom-in-button) .toolbarbutton-icon {
padding-left: 8px !important;
padding-right: 8px !important;
}
#main-window[uidensity=compact] #nav-bar #stop-reload-button .toolbarbutton-animatable-box,
#main-window[uidensity=compact] #nav-bar #nav-bar-overflow-button .toolbarbutton-animatable-box {
margin-left: 7px !important;
margin-right: 7px !important;
}
#main-window[uidensity=compact] #nav-bar #zoom-reset-button .toolbarbutton-text {
min-height: 26px !important;
}
/* normal button mode */
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar .toolbarbutton-1 .toolbarbutton-badge-stack > .toolbarbutton-icon {
width: 40px !important;
height: 30px !important;
padding-top: 7px !important;
padding-bottom: 7px !important;
}
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar .toolbarbutton-1 .toolbarbutton-badge-stack {
width: 40px !important;
height: 30px !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
}
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #fxa-toolbar-menu-button .toolbarbutton-badge-stack {
padding-top: 7px !important;
padding-bottom: 7px !important;
padding-left: 11px !important;
padding-right: 11px !important;
}
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #downloads-button #downloads-indicator-anchor {
margin-left: 6px !important;
margin-right: 6px !important;
padding-top: 7px !important;
padding-bottom: 7px !important;
}
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar .webextension-browser-action .toolbarbutton-icon {
margin-left: 6px !important;
margin-right: 6px !important;
}
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #back-button .toolbarbutton-icon{
padding: 9px !important;
height: 34px !important;
width: 34px !important;
}
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar :-moz-any(#add-ons-button,#zoom-out-button,#zoom-in-button) .toolbarbutton-icon {
padding-left: 11px !important;
padding-right: 11px !important;
}
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #nav-bar-overflow-button .toolbarbutton-animatable-box,
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #stop-reload-button .toolbarbutton-animatable-box {
margin-left: 11px !important;
margin-right: 11px !important;
}
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #zoom-reset-button .toolbarbutton-text {
min-height: 30px !important;
}
/* touch button mode */
#main-window[uidensity=touch] #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
#main-window[uidensity=touch] #nav-bar .toolbarbutton-1 .toolbarbutton-badge-stack > .toolbarbutton-icon {
width: 46px !important;
height: 32px !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
}
#main-window[uidensity=touch] #nav-bar .toolbarbutton-1 .toolbarbutton-badge-stack {
width: 46px !important;
height: 32px !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
}
#main-window[uidensity=touch] #nav-bar #fxa-toolbar-menu-button .toolbarbutton-badge-stack {
padding-top: 8px !important;
padding-bottom: 8px !important;
padding-left: 14px !important;
padding-right: 14px !important;
}
#main-window[uidensity=touch] #nav-bar #downloads-button #downloads-indicator-anchor {
margin-left: 6px !important;
margin-right: 6px !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
}
#main-window[uidensity=touch] #nav-bar .webextension-browser-action .toolbarbutton-icon {
margin-left: 6px !important;
margin-right: 6px !important;
}
#main-window[uidensity=touch] #nav-bar #back-button .toolbarbutton-icon{
padding: 12px !important;
height: 40px !important;
width: 40px !important;
}
#main-window[uidensity=touch] #nav-bar :-moz-any(#add-ons-button,#zoom-out-button,#zoom-in-button) .toolbarbutton-icon {
padding-left: 14px !important;
padding-right: 14px !important;
}
#main-window[uidensity=touch] #nav-bar #stop-reload-button .toolbarbutton-animatable-box ,
#main-window[uidensity=touch] #nav-bar #nav-bar-overflow-button .toolbarbutton-animatable-box{
margin-left: 14px !important;
margin-right: 14px !important;
}
#main-window[uidensity=touch] #nav-bar #zoom-reset-button .toolbarbutton-text {
min-height: 32px !important;
}
/* fix for toolbar button badges */
#nav-bar .toolbarbutton-1 .toolbarbutton-badge {
margin-top: -1px !important;
}
/**/
I looks a bit better now: the offset is fixed now but the actual icon is still squished. This is most noticeable when switching to Touch Density
I only checked the default icon, which looked fine. Did you add your icon manually or was it added from your account details?
I never used or tested any account or sync features of Firefox.
Yes, I have added picture manually via FxAccounts (Account picture option).
Code updated, seems to work now (for me).
Edit Uploaded 2.4.7 with above code.
Yes, seems to be working now. Closing
Describe the issue Nightly 68 has introduced a new button on the navbar - Firefox Account. This button uses Account avatar for its icon If buttons_on_navbar_squared_buttons.css are enabled Account logo becomes squished
What should have happened instead? Account avatar shouldn't be squished
Steps to reproduce the issue?
SCREENSHOTS with/without this projects files (drag & drop images into this post)
System information