Pop-up Window Blocked Notification Message CSS styling
I noticed that after the recent updates, the pop-up notification for blocked pop-ups has changed from yellow to white.. This makes it very difficult to see and I almost missed it. Is there a way to revert this change using userChrome.css?
I don't understand why this unnecessary change was made. I already have my own userChrome style for the entire Firefox because it was frustrating to constantly change it back after each update.
I would appreciate any information on how to revert this change.
Thanks.
All Replies (3)
Add CSS code to the userChrome.css file in the chrome folder in the Firefox profile folder, best is probably above a possible @namespace line.
notification-message[message-bar-type="infobar"]{
background: #ffe900 !important;
color: #0c0c0d !important;
}
Your code didn't help me directly, but thanks to its content I found other examples and it took me a while to put it all together and test it. It's nothing fancy, but it looks better already.
.infobar {
background: #ffe423 !important; color: #0c0c0d !important; border-radius: 4px !important; /*border: none !important;*/ padding: 5px 8px !important; margin: 0 !important;
}
.container.infobar::before {
/*display: none !important;*/ content: "" !important; display: block !important; width: 3px !important; position: absolute !important; background: #000000 !important; top: 0 !important; inset-inline-start: 0 !important; height: 100% !important; border-start-start-radius: 4px !important; border-end-start-radius: 4px !important;
}
.infobar > .icon {
margin-block: var(--infobar-vertical-margin, 11px) !important;
}
.notification-message {
padding-block: var(--infobar-vertical-margin, 2px) !important; font-size: 13px !important;
}
.notification-button-container > .notification-button {
margin-block: var(--infobar-button-vertical-margin, 6px) !important; background: #ffffff !important; border: 1px solid #ffffff !important;
}
.notification-button-container > .notification-button:hover {
border: 1px solid #dadada !important; background: #f7f7f7 !important;
}
.notification-close {
margin: var(--infobar-button-vertical-margin, 4px) 8px !important;
}
Sorry about the mix up for posting CSS code from Firefox 78 when trying to find the yellow color used in that version.
I meant to post this code for 115:
notification-message{background: #ffe900 !important; color: #0c0c0d !important;}