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;}