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.

[–] [S] 1 point 5 months ago

I solved adding the next code in userChrome.css, instead of using userContent.css, or maybe is neccessary to use both codes in each file:

:root:is([privatebrowsingmode="temporary"]) {
  --tabpanel-background-color: transparent !important;
}
  • source
  •  

    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.

    [–] [S] 1 point 7 months ago* (last edited 7 months ago) (2 children)

    First try and seem doesn't work.

    I will try it without my theme soon. Seems like doesn't work, maybe is a change in Firefox beta, I test the code always in there to update my theme for the next version.

  • source
  • parent
  • context
  •  

    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'

    [–] [S] 1 point 1 year ago

    hi, I notice the issue happens when the #sidebar-main is 'expanded', when collapsed the problem doesn't appear, I removed the code gap: 0px !important; and that solve the issue, but that space between the buttons makes me nervous jeje I tried delete too that 'overflow' button to remove the 'flickering' but the problem persist.

  • source
  • parent
  • context
  •  

    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.