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!

  • MrOtherGuyM
    1·
    4 months ago
    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).

    • PleaseBeKindPleaseOP
      1·
      4 months ago

      That’s exactly what I needed. So, the problem is solved. Once again, thank you so much for your help!