I'm using a userChrome.css file that works very well with Firefox 158 on Arch Linux. I'm looking for a way to make dark icons stand out better, since I'm also using a dark theme. It seems to me that the following filter might be a good solution:

filter: drop-shadow(1px 0 0 rgba(255, 255, 255, 0.7)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.7)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.7)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.7)) !important;

The problem is that, for one thing, you have to target all the places where favicons appear:

• the tab favicons;
• the Bookmarks Toolbar, as well as its folders and subfolders;
• the "Bookmarks" menu in the menu bar;
• the favicons in the bookmarks within the hamburger menu;
• the bookmarks in the sidebar;
• the bookmarks in the library;
• am I missing any?

On the other hand, this filter must not apply to Firefox’s internal icons (for example, the folder icon, the default globe-shaped favicon, favicons for error pages such as "Server not found" or 404 errors, etc., and favicons for about: pages, etc., etc.).

How can I do this? Thank you very much in advance for any help you can provide!

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!

Hello!

I'm having a few issues—they're quite minor, but I can't seem to figure them out on my own.

1. When a download starts, the download icon displays a (fairly fast) animation; the same happens when the download finishes. Is there a way to disable these animations, or at least shorten the duration of the finish animation?

2. When the Firefox window is maximized, the margin above the tab bar (between the tab bar and the top edge of the window) is narrower than when the window is not maximized (a difference of about 2 pixels). Is there a way to make this margin consistent regardless of the window’s state? Or at least change this margin when the window is maximized?

3. When the Firefox window is not maximized, it is bordered by an outer edge. But there is a 1-pixel margin between this edge and the window itself, which did not exist in previous versions of Firefox. Is there a way to remove this outer margin?

4. Finally, this isn’t directly related to userChrome.css, but I’d appreciate it if someone had the answer: when I start a download, it begins immediately, even before I’ve had a chance to specify where to save the file. Is it possible to start the download only after clicking the "Save As…" button?

I don't know if this matters, but just in case: I'm using Firefox 151 on Arch Linux, and the userChrome.css file I'm using can be viewed here.

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

Edit: I deleted questions 2 and 3; it was an issue with my GTK+ theme, not a problem related to the Firefox theme.

Hello!

In my userChrome.css file, I use the following code to hide the search engine selection button (circled in red in my image):

#urlbar-searchmode-switcher { #urlbar:not([searchmode]) & {
    margin: 0 !important;
    padding: 0 !important;
    width: 8px;
    overflow: hidden;
    opacity: 0;
} }

But in Firefox 151, this code no longer works. Is it possible to remove this button when there is only one (or no) search engine in the submenu? For example, here there is only “Startpage,” so the button to change the search engine serves no purpose. How can I adapt the code above so that it continues to work in Firefox 151?

Also, the “This time search with” menu shown here doesn't respect my usual margins between an element and a separator; for example, in the image, the margin between the "Startpage" search engine name and the separators above and below it should be smaller. How can I modify these elements?

Thank you very much in advance for your help!

Hello!

I use Firefox on Arch Linux, with Openbox as my window manager. I've been experiencing several issues since the release of Firefox 143.0.3, which I didn't have with the previous minor version 143.0.2. However, I haven't made any changes to my Firefox theme for several months; nor have I modified my GTK-4 theme.

First of all, in my custom CSS file (userChrome.css), I defined a section for light themes and a section for dark themes, like this:

@media (prefers-color-scheme: light) {
    ... (some CSS tags are here)...
}
@media (prefers-color-scheme: dark) {
    ... (some CSS tags are here)...
}

My full CSS is available here.

But now, only the light theme is applied. My Firefox theme is the "Systeme theme - auto"; I haven't changed it. I can force the display of dark theme CSS tags by changing the theme in the Firefox settings and selecting the Dark theme, but why has this changed? My GTK-4 theme is still a dark theme, so why does the default theme only apply light theme tags?

On the other hand, the code in my userChrome.css file that relates to the address bar no longer works. This code is as follows:

#urlbar[breakout][breakout-extend] {
    margin-left: 0 !important;
    width: var(--urlbar-width) !important;
    margin-top: calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2) !important;
}
.urlbarView-row { padding: 2px 1px !important; }
#urlbar-background { animation: none !important; }
.urlbar-input-container {
    padding: 1px !important;
    height: var(--urlbar-height) !important;
}
#identity-icon { margin-block: var(--urlbar-icon-padding); }
.urlbarView > .search-one-offs:not([hidden]) { padding-block: 0 !important; }
#urlbar-background, #searchbar, .findbar-textbox { box-shadow: none !important; }
.urlbar-input::placeholder, .searchbar-textbox::placeholder, .findbar-textbox::placeholder { color: color-mix(in srgb, currentColor 70%, transparent) !important; }
#urlbar[open] > #urlbar-background { border-color: Highlight !important; }
#urlbar-results {
    max-height: 239px;
    overflow-y: auto;
    scrollbar-color: color-mix(in srgb, currentColor 26%, transparent) transparent;
    scrollbar-width: thin;
    padding: 0 !important;
    margin: 4px 0 5px 0;
}
.urlbarView-row-inner { padding-block: 1px !important; }
.urlbarView-no-wrap { position: relative; }
#urlbar[searchmode] > .urlbarView { display: none !important; }
.urlbarView-row-inner { flex-wrap: wrap !important; }
.urlbarView-no-wrap {
    max-width: 100% !important;
    flex-basis: 100%;
}
.urlbarView-row[has-url]:not([type="switchtab"]) .urlbarView-title-separator { display: none; }
.urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url:-moz-locale-dir(ltr) { margin-left: var(--urlbarView-second-line-indent); }
.urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url:-moz-locale-dir(rtl) { margin-right: var(--urlbarView-second-line-indent); }

How can I fix it?

Many thanks in advance for your help!