Hello!

As you can see in the image, the notification bar is quite tall. But I can't seem to make it any smaller.

The infobar.css file in the Firefox source code contains the following code:

:host(.infobar) {
  .container {
    /* Don't let lwthemes set a text-shadow. */
    text-shadow: none;
    padding-block: 3px;
    align-items: center;
  }
  .text-container {
    padding-block: calc(1lh - var(--icon-size) / 2);
  }
  .content {
    gap: 0 12px;
    height: fit-content;
  }
  .close {
    margin-block: 4px;
    margin-inline-start: 8px;
    align-self: flex-start;
  }
}

Despite this, I can't seem to reduce the paddings/margins to lower the height of this bar (regardless of its content: pop-up notification, DRM notification, etc.).

I'd also like to remove the icon (the "i" inside a circle, before the text "Firefox prevented...").

You can try out this type of bar by visiting this website, for example.

Thank you very much in advance for any help you can provide!

you are viewing a single comment's thread
view the rest of the comments
[–] 1 point 4 months ago* (1 child)
div.text-container { padding-block: var(--uc-container-block-padding, initial) !important }

Sure, if padding-block isn't set then initial should be alright. I'm guessing the initial value would be 0px so it's probably ok to not set any fallback value.

But there's actually a rather recent value that you could use in place of initial - that is revert-rule. Whereas initial makes the property use it's "browser default" value, using revert-rule as a fallback makes it use whatever it would have been without that custom style rule - so it would in this case revert to calc((var(--message-bar-container-min-height) - 1lh) / 2).

  • source
  • parent
  • hideshow 1 child comment