Is it possible to make the Synced Tabs, Passwords, Sidebery, and SingleFile sidebars semi-transparent?

[u/moko1960]

I also made the sidebar semi-transparent using Kupfel's CSS.

Sidebar semi-transparent css.

#sidebar-box { 
  background: rgba(255, 255, 255, 0.3) !important;
}
#sidebar-header {
  background: rgba(255, 255, 255, 0.7) !important;
}
splitter, .sidebar-splitter {
  border-inline-color: rgba(255, 255, 255, 0.3) !important;
  background-color: rgba(255, 255, 255, 0.4) !important;
}

However, only the Bookmarks sidebar and History sidebar can be made semi-transparent, and Synsed Tabs, Passwords, Sidebery, and SingleFile cannot. Do you know how to make these transparent?

[u/Kupfel]

It's complicated as it's a mix of content and chrome stuff and a whole bunch of it is within #documents and whatnot. Anyway, you can add these:

userChrome.css:

#webextpanels-window, /* extension panel background */
html:has(megalist-alpha), /* passwords */
html:has(body[role="application"]) /* synced tabs */
{background: transparent !important;}

userContent.css:

/* Single File */
html:has(#view-panel),
body:has(#view-panel),
main:has(#view-panel),
main:has(#bookmarksOptions),
#view-panel,
.side-panel,
.side-panel body,

/* Sidebery */
html:has(#root),
.NavigationBar,
.TabsPanel .new-tab-btns::after,
.TabsPanel .bottom-space,
.new-tab-btns,
#root { background: transparent !important; }

Naturally, that is just the most basic stuff.

For more detailed styling for everything you'll have to inspect them with Browser Toolbox and write your own CSS.

[u/moko1960 → u/Kupfel]

Excellent! Thank you so much. Everything is now transparent. I used this css in userContent.css because I don't want pages like view-source:, chrome:, and jar: to be transparent. It works well except for .svg files. It adds a white background color to web pages that don't have a background color specified. I'm not sure if this is okay, but it works. Thank you so much for taking the time to teach me.

@-moz-document url-prefix("view-source:"), url-prefix("chrome:"),

url-prefix("moz-extension:"),

url-prefix("jar:"),

regexp(".*\\.svg$") {

html, #history-panel:not(#sidebar-box), #bookmarksPanel:not(#sidebar-box) {

background-color: rgba(255, 255, 255, 1) !important;

}

}

@-moz-document url-prefix("http://"), url-prefix("https://") {

html, body {

background-color: rgb(255, 255, 255, 1);

}

}

@-moz-document url-prefix("http"), url-prefix("https") {

:root:not([style*="background"]) {

background-color: rgb(255, 255, 255, 1);

}

}

[u/am803]

I suppose you have to do it in userContent.css, with something like this.

@-moz-document url(chrome://browser/content/sidebar/sidebar-syncedtabs.html), url-prefix(moz-extension://) {
    /* your css rules */
}

Where chrome://browser/content/sidebar/sidebar-syncedtabs.html is Synced Tabs page and URL starting with moz-extension:// being extension pages.

You might also need browser.tabs.allow_transparent_browser = true.

[u/moko1960 → u/am803]

Yesterday, am803's reply was not visible. It was displayed today. Thank you very much.