Firefox Customs @fedia.io Zethasu @fedia.io 10mo ago

Change this gray color in the popup in about:preferences in import data from another browser

Hey

I want to change this gray background in about:preferences in import data from another browser, I've tried but cant seem to get it to work, I don't know if it's the popup "shadow" or what could it be.

Thanks!

4 comments

It isn't a shadow or anything, it's just the background-color of that panel box. What you have as black background is (likely) the background of the list that is drawn over that background-color. But, the panel is part of a content document so you would use userContent.css to style it. There isn't any great selector to use though since you can't use ::part() selector in userContent but I suppose this might work well enough:

@-moz-document url-prefix("about:preferences"){ slot[part="content"]:only-child{ background-color: #f00 !important; } }
- It kinda works, but now it looks like this:
  
  https://imgur.com/a/o7Z7JkF
  
  So there's still a gray part around it
  
  In that case I think that you must have initially made the individual panel list items have black background. But the panel list itself is grey, and the the panel behind it is now red. I would recommend you don't set any background to the individual panel items (unless hovered, in case you want the to have custom hovered background), but rather only to the list or even make the list also have transparent so that the panel background is seen - that might go like this:
  
  panel-list[inxulpanel]{ background: transparent !important; box-shadow: none !important; }
  
  Put that also inside that about:preferences -moz-document block so it won't accidentally affect any other pages than preferences.