Hi, I'm having a problem with 'selected text' style, using userContent.css file with recent Firefox update the next code stop working, seems like Firefox change that behavior:

::selection {
    color: red !important;
    box-shadow: none !important;
    text-shadow: none !important;
    background: blue !important;
}

That code doesn't work in userChrome.css either. Still is possible to change that style? I appreciate any help, thanks.

Using Firefox Beta

Hi, I'm trying to remove the gradient in 'Private mode' new-tab page, I'm trying the next code but without success.

@-moz-document url-prefix(about:privatebrowsing) {
html.private {
        background-color: transparent !important;
        background-image: none !important;
        background: linear-gradient(45deg, transparent, transparent) !important;
    }
}

I also tried:

@media -moz-pref("browser.privatebrowsing.felt-privacy-v1") {
  @media not (prefers-contrast) {
    html.private {
      background: none !important;
    }
  }
}

But with all the gradient don't disappear.

Hi, I could not identify this element to be able to change its color, it appears when you try to move a bookmark, I appreciate any help. 💙

I found a rare variable?: SelectedItem , and I wonder if it is possible to set a new value for it or I should change in every place that variable is used?

/* Autofill (example: login page) focus item background */

.autocomplete-richlistitem {
    &[selected] {
        background-color: var(--button-hover-bgcolor) !important;
    }
}

Testing in Firefox Beta Hi, I had the code to make 'about:' pages (preferences, add-ons) background 'transparent', but with new Firefox changes that code don't work anymore, and I can't find the way to make transparent again, I tried with all the selectors I can but don't work. I enabled browser.tabs.allow_transparent_browser for this purpose, I made them transparent to show the image behind. I would like to solve this issue or maybe is a issue of 'browser.tabs.allow_transparent_browser'

hi, I have the next code to set a smooth transition from the bottom up, of 'tools and extensions', when I set 0px to 'gap' rule, the CPU reach 100% and the PC just die until I remove the code, I think it is caused for the transform rule, I changed the rule: transform: translateY(10px) !important; to a negative value and that solve the issue, but the transition is different, and I want to keep it.

The code is just this:

/* Hide tools except for the last one 'configuration' */

.actions-list[orientation="vertical"]:not(:hover) moz-button[type="icon ghost"]:not(:last-child),
.actions-list[orientation="horizontal"]:not(:hover) moz-button[type="icon ghost"]:not(:first-child) {
    opacity: 0 !important;
    transform: translateY(10px) !important;
    visibility: collapse !important;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease, transform 0.4s ease;
}

/* Show all tools when 'hover' */

.actions-list[orientation="vertical"]:is(:hover) moz-button[type="icon ghost"]:not(:last-child),
.actions-list[orientation="horizontal"]:is(:hover) moz-button[type="icon ghost"]:not(:first-child) {
    opacity: 1 !important;
    transform: translateY(0px) !important;
    visibility: visible !important;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease, transform 0.4s ease;
}

.tools-and-extensions[orientation="horizontal"] {
    gap: 0px !important;       
}

Test it in Firefox-developer-edition Using just this code:

#tabbrowser-arrowscrollbox[orient="horizontal"] {

    /* Horizontal tab size */        
    &>.tabbrowser-tab[fadein]:not([style^="max-width"]),
    &>tab-group:not([collapsed]) .tabbrowser-tab[fadein]:not([style^="max-width"]) {
        max-width: 200px !important;
    }
}

For some reason, after some steps, the tab with 'sound-muted-blocked' becomes larger when moving other tab, I made a video showing the problem, hope someone can share a better code or a solution, the problem was in the previous developer version but with an update the problem didn't appear anymore, I guess the developers remove some change but with the new developer-version v.142.b2 those changes were added again.

Video showing the problem: https://imgur.com/a/jeR2zN7 don't pay attention when the YouTube page is loading, my pc is a potato.

Using Firefox-developer-edition hi, I need help with this new Firefox Feature, seems like the sound tabs get larger when the user is moving any tab. I tried to reach the code, but I can't, I want the 'sound-Tab' to keep the width.

Update: Seems like this code is causing it, maybe there is another way to set a max width?

@media not -moz-pref("sidebar.verticalTabs") {

    #tabbrowser-arrowscrollbox[orient="horizontal"] {

        /* Horizontal tab size for ungrouped tabs */

        &>.tabbrowser-tab[fadein]:not([style^="max-width"]) {
            max-width: 168px !important;
        }

        /* Horizontal tab size for grouped tabs */

        &>tab-group:not([collapsed]) .tabbrowser-tab[fadein]:not([style^="max-width"]) {
            max-width: 168px !important;
        }
   }
}

Hi, By default, I set the tab-close-button always visible, to use it like a tab-separator, but I would like to remove the tab-close-button when the tab gets smaller than some specific size. For example, in the image I attached, I would like to remove the close button but when the tab gets a little bigger the close button should appear. I used this code to make the tabs smaller that default:

.tabbrowser-tab {
      &:not([pinned]) {
        #tabbrowser-tabs[orient="horizontal"] &[fadein] {
          --tab-min-width-pref: calc(16px + 2 * 10px + 2px) !important; !important;
          --tab-min-width: var(--tab-min-width-pref) !important;
        }
      }
    }

So, It is possible to remove the close button when the tab size is smaller than 50px or something like that?

I am in Firefox-developer-edition and this code: autohide_tabstoolbar_v2.css don't work properly when sidebar is on right side. Could you please verify it?

Using Firefox-Developer-Edition Hi, I would like to know how to apply this code only when sidebar is expanded:

.tools-and-extensions[orientation="vertical"] {
    flex-direction: row !important;
}

I tried to use this before the previous code but didn't work: :root:has(sidebar-main[expanded])

I didn't be able to apply any style conditioning the sidebar expanded or not for any button inside .tools-and-extension, in the original code it seems to use :host but that didn't work, apparently.

I would like to apply the next code only when using X11:

/* Remove unwanted margin of menupopup just in linux */
    
    @media (-moz-platform: linux) {
        #appMenu-popup {
            --panel-shadow-margin: 0px !important;
            --panel-padding-block: 0px !important;
        }
    }

this code when using Wayland makes the popup unaligned.

Hi, I want to change the extensions icons of sidebar-revamp but the image is in the html and I can't get it to work.

hi, in Firefox v.136 the sound button seems totally reworked and I can't get a right way to style that button, or maybe my knowledge is insignificant. I tried this way but works only for English language, I guess I should add an entry for each language ans that seems inefficient:

button[aria-label="Mute tab"] .button-background {
        /* my code */
}

In the firefox code they use ::part(button) and that don't works in userChrome.css:

.tab-audio-button {
  #tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) &:not([pinned]):not([crashed]) {
    &[soundplaying]::part(button) {
   }
  }
}

There is a way to solve this or it is impossible?

Hi, I want to solve this behavior when scrolling in 'about:addons' page. I put a background-image in body using 'userChrome.css' and in 'userContent.css' I set transparency in some elements backgrounds, but when I scroll the #main element goes behind .sticky-container element, so here is my question: Can I make the #main and .sticky-container elements don't cross, I tried to set a margin, clip-path, etc but I couldn't make any progress to solve it.

hi, seem like Firefox removed [tabsintitlebar], I wonder if deleting it is the right way to solve it or that condition was replaced with another and its needed to put that one? I'm using hide_tabs_toolbar_v2.css

hi, with the recent Firefox changes I wonder if this style navbar_tabs_oneliner_menu_buttons_on_right.css could be more simple or still will be necessary the other style of window controls window_control_placeholder_support.css

Tested in Firefox developer edition Hi, I used this two files (window_control_placeholder_support.css + hide_tabs_toolbar.css) for tree-tabs but seems like they will need an update. The window controls only shows when press Alt and the menubar shows behind the urlbar.

Issue in Firefox beta hi, I set a z-index in 2 elements but don't work and I can't solve it. I have this code to move the hamburger menu to left top side:

:root:not([chromehidden~="toolbar"]) #PanelUI-button {
        position: fixed;
        display: flex;
        top: var(--windowed-top-padding, 0px);
        left: 0px !important;
        z-index: 3 !important;
    }

and I have this code to move higher the Firefox Sidebar:

:root:not([sizemode="fullscreen"]):has(sidebar-main:not([expanded])) {
        & #sidebar-main {           
                /* Bakground-color necessary for gradient line color */
            background-color: var(--lwt-frame) !important;
                /* Top-bottom margins */
            padding-top: var(--padding-top-left-sidebar) !important;
                /* Gradient line */
            margin-top: calc( -1px - var(--bookmarksbar-height-personal, 0px) - var(--toolbar-height-personal) - 
                             var(--Space-before-gradient-line)) !important;
            border-inline-end: 1px solid red !important;
            z-index: 2 !important;
        }
    }

the problem is the hamburger menu stay behind the Sidebar, I wonder why the z-index don't work.

hi, I would like to know how to Apply margin to web content but not when a video is in fullscreen? and keep the margin when Firefox is in fullscreen. I mean I would like to apply a margin to web content that not affect when a video is in fullscreen. I used this code:

:root:not([chromehidden~="toolbar"]) {
        
        /* Web content */
        & #appcontent{
            margin-inline-start: var(--my-vertical-toolbar-width) !important;
        }

        /* Sidebar + sidebar content */
        & #sidebar-box[checked="true"] {
            margin-inline-start: var(--my-vertical-toolbar-width) !important;
        }

        /* Sidebar + sidebar content + web content */
        & #sidebar-box[checked="true"] ~ #appcontent {
            margin-inline-start: 0px !important;
        }
    }

but that applies a margin when a video is in fullscreen, I tried too this code but removes the margin when Firefox is in fullscreen:

:root:not([chromehidden~="toolbar"],[sizemode="fullscreen"]) {
     ...
}