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

MrOtherGuy Mod , 5 months ago

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:

<span style="color:#323232;">@-moz-document url-prefix("about:preferences"){
</span><span style="color:#323232;">  slot[part="content"]:only-child{
</span><span style="color:#323232;">    background-color: #f00 !important;
</span><span style="color:#323232;">  }
</span><span style="color:#323232;">}
</span>

Zethasu OP , 5 months ago

It kinda works, but now it looks like this:

https://imgur.com/a/o7Z7JkF

So there's still a gray part around it

MrOtherGuy Mod , 5 months ago

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:

<span style="color:#323232;">  panel-list[inxulpanel]{
</span><span style="color:#323232;">    background: transparent !important;
</span><span style="color:#323232;">    box-shadow: none !important;
</span><span style="color:#323232;">  }
</span>

Put that also inside that about:preferences -moz-document block so it won’t accidentally affect any other pages than preferences.

Zethasu OP , 5 months ago

Perfect!!!

Thanks a lot!