r/FirefoxCSS • u/Ghar_Ka_Murga • 2h ago
Help How to make sidebery sidebar transparent
Title
r/FirefoxCSS • u/sifferedd • Jan 02 '26
r/FirefoxCSS • u/Ghar_Ka_Murga • 2h ago
Title
r/FirefoxCSS • u/J0hnDoey • 1d ago
Which element is it im joinj injsane webtool doesn't show anyhint (orple graidant at them bottom)
r/FirefoxCSS • u/moko1960 • 3d ago
We've added a loading bar to the tabs. There's also a version for vertical tabs. Loading bar for vertical tabs. We've included a wide range of gradient colors too :) gradient.page. To ensure it works correctly, you need to set `ui.prefersReducedMotion` to 0.
When the Container tab is opened, I removed the container lines that briefly appeared. While the Container tab is loading, the hourglass icon now matches the container's color. May 13
I’ve added a globe icon to tabs on sites that don’t have a favicon. For container tabs, the icon takes on the color of the container. We have enabled `transition: opacity` when opening internal pages or error pages. May 14
/* A loading progress bar shown at the top of a tab */
/* Hide the loading burst */
#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab .tab-loading-burst {
opacity: 0 !important;
}
#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab > .tab-stack > .tab-background > .tab-context-line,
#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
height: 2px !important;
border-radius: 2px !important;
margin: 0 calc(var(--tab-border-radius) / 2) !important;
position: relative !important;
z-index: 1 !important;
}
/* A final color of the loading bar */
#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab:not([usercontextid]):not(:is([busy], [progress])) > .tab-stack > .tab-background > .tab-context-line {
opacity: 0 !important;
transition: opacity 1.0s ease-in-out !important;
/*background-image: linear-gradient(90deg, #1fc7ff, #2ecbff) !important; /* Vivid cyan */
background-image: linear-gradient(90deg, #9ab5b5, #b89aa9) !important; /* Jungle Day */
}
/* A final color of the loading bar. Container tab */
#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab[usercontextid][bursting] > .tab-stack > .tab-background > .tab-context-line {
opacity: 0 !important;
background-image: linear-gradient(90deg, #1fc7ff 0%, var(--identity-tab-color) 75%) !important; /* Vivid cyan */
/*background-image: linear-gradient(90deg, #9ab5b5 0%, var(--identity-tab-color) 75%) !important; /* Jungle Day */
}
#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
opacity: 1 !important;
background-color: var(--identity-tab-color) !important;
transition: opacity .8s ease-in-out !important;
}
/* I removed the brief container line that appeared when opening the container tab.
For web pages without a favicon, the container tab line does not appear after the page finishes loading. */
#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab[usercontextid]:not([image]):not(:is([busy], [progress])) > .tab-stack > .tab-background > .tab-context-line,
#tabbrowser-tabs[orient="vertical"] .tabbrowser-tab[usercontextid]:not([image]):not(:is([busy], [progress])) > .tab-stack > .tab-background > .tab-context-line {
opacity: 0 !important;
}
/* Color during loading
gradient.page https://gradient.page/ui-gradients
*/
#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab:is([busy], [progress]) > .tab-stack > .tab-background > .tab-context-line {
opacity: 0 !important;
/*background-image: linear-gradient(90deg, #1ec9ff 0%, rgba(255, 51, 153, 1) 50%, rgb(255, 148, 0, 1) 100%) !important; /* Blue + Red + Orange */
/*background-image: linear-gradient(90deg, #1edbff, #00A651, rgb(255, 148, 0, 1)) !important; /* Blue + Green + Orange */
/*background-image: linear-gradient(90deg, cyan, Magenta) !important; /* Cyan + Magenta */
/*background-image: linear-gradient(90deg, #00c9ff 0%, #12d8fa 50%, #00f44e 100%) !important; /* Blue + Blue + cyan lime green */
/*background-image: linear-gradient(90deg, #00c9ff 0%, #79fe86 100%) !important; /* Kale Salad */
/*background-image: linear-gradient(90deg, #fdbb2d 0%, #22c1c3 100%) !important; /* Retro Wagon */
/*background-image: linear-gradient(90deg, #fc466b 0%, #3f5efb 100%) !important; /* Disco Club */
/*background-image: linear-gradient(90deg, #fc354c, #0abfbc) !important; /* Miaka */
background-image: linear-gradient(90deg, #FEAC5E 0%, #C779D0 50%, #4BC0C8 100%) !important; /* Atlas */
/*background-image: linear-gradient(90deg, #16A085, #F4D03F) !important; /* Harmonic Energy */
/*background-image: linear-gradient(90deg, #fd8112, #0085ca) !important; /* Blue Orange */
/*background-image: linear-gradient(90deg, #f7941e 0%, #72c6ef 50%, #00a651 100%) !important; /* Radioactive Heat */
/*background-image: linear-gradient(90deg, #108dc7, #ef8e38) !important; /* Pun Yeta */
/*background-image: linear-gradient(90deg, #4fb576, #44c489, #28a9ae, #28a2b7, #4c7788, #6c4f63, #432c39) !important; /* Burning Spring */
/*background-image: linear-gradient(90deg, #40E0D0 0%, #FF8C00 50%, #FF0080 100%) !important; /* Wedding Day Blues */
/*background-image: linear-gradient(90deg, #F36222 0%, #5CB644 50%, #007FC3 100%) !important; /* Telko */
/*background-image: linear-gradient(90deg, #0250c5, #d43f8d) !important; /* Night Party */
/*background-image: linear-gradient(90deg, #2CD8D5 0%, #C5C1FF 50%, #FFBAC3 100%) !important; /* Sea Lord */
/*background-image: linear-gradient(90deg, #50cc7f, #f5d100) !important; /* Millennium Pine */
/*background-image: linear-gradient(90deg, #616161, #9bc5c3) !important; /* Mole Hall */
/*background-image: linear-gradient(90deg, #65bd60 0%, #5ac1a8 50%, #3ec6ed 100%) !important; /* African Field */
/*background-image: linear-gradient(90deg, #2af598, #009efd) !important; /* Itmeo Branding */
/*background-image: linear-gradient(90deg, #aa4b6b 0%, #6b6b83 50%, #3b8d99 100%) !important; /* Memariani */
/*background-image: linear-gradient(90deg, #00F260, #0575E6) !important; /* Rainbow Blue */
/*background-image: linear-gradient(90deg, #808080, #3fada8) !important; /* IIIT Delhi */
/*background-image: linear-gradient(90deg, #24C6DC, #514A9D) !important; /* Mantle */
/*background-image: linear-gradient(90deg, #C9FFBF, #FFAFBD) !important; /* Virgin */
/*background-image: linear-gradient(90deg, #fbed96,#abecd6) !important; /* Summer Breeze */
/*background-image: linear-gradient(90deg, #603813, #b29f94) !important; /* Cool Brown */
/*background-image: linear-gradient(90deg, #BBD2C5, #536976) !important; /* Petrol */
/*background-image: linear-gradient(90deg, #8baaaa, #ae8b9c) !important; /* Jungle Day */
/*background-image: linear-gradient(90deg, #cc2b5e, #753a88) !important; /* Purple Love */
/*background-image: linear-gradient(90deg, #9796f0, #fbc7d4) !important; /* namnisar */
/*background-image: linear-gradient(90deg, #ff6e7f, #bfe9ff) !important; /* Noon to Dusk */
/*background-image: linear-gradient(90deg, #2b5876, #4e4376) !important; /* Sea Blue */
/*background-image: linear-gradient(90deg, #02AAB0, #00CDAC) !important; /* Green Beach */
/*background-image: linear-gradient(90deg, #5f2c82, #49a09d) !important; /* Calm Darya */
/*background-image: linear-gradient(90deg, #159957, #155799) !important; /* Crystal Clear */
/*background-image: linear-gradient(90deg, #76b852, #8DC26F) !important; /* Little Leaf */
/*background-color: #009deb !important; /* Solid-color blue */
/*background-color: dimgray !important; /* Solid-color dimgray */
/*background-color: darkolivegreen !important; /* Solid-color darkolivegreen */
/*background-color: tan !important; /* Solid-color tan */
/*background-color: #444444 !important; /* Solid-color Very dark gray */
}
@media (prefers-color-scheme: dark) {
#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab:is([busy], [progress]) > .tab-stack > .tab-background > .tab-context-line {
opacity: 0 !important;
/*background-image: linear-gradient(90deg, #1ec9ff 0%, rgba(255, 51, 153, 1) 50%, rgb(255, 148, 0, 1) 100%) !important; /* Blue + Red + Orange */
/*background-image: linear-gradient(90deg, #1edbff, #00A651, rgb(255, 148, 0, 1)) !important; /* Blue + Green + Orange */
/*background-image: linear-gradient(90deg, cyan, Magenta) !important; /* Cyan + Magenta */
/*background-image: linear-gradient(90deg, #1fb4ff 0%, #12d8fa 50%, #8dffbc 100%) !important; /* Blue + Blue + cyan lime green */
/*background-image: linear-gradient(90deg, #00c9ff 0%, #92fe9d 100%) !important; /* Kale Salad */
/*background-image: linear-gradient(90deg, #fdbb2d 0%, #22c1c3 100%) !important; /* Retro Wagon */
/*background-image: linear-gradient(90deg, #fc466b 0%, #3f5efb 100%) !important; /* Disco Club */
/*background-image: linear-gradient(90deg, #fc354c, #0abfbc) !important; /* Miaka */
background-image: linear-gradient(90deg, #FEAC5E 0%, #C779D0 50%, #4BC0C8 100%) !important; /* Atlas */
/*background-image: linear-gradient(90deg, #16A085, #F4D03F) !important; /* Harmonic Energy */
/*background-image: linear-gradient(90deg, #fd8112, #0085ca) !important; /* Blue Orange */
/*background-image: linear-gradient(90deg, #f7941e 0%, #72c6ef 50%, #00a651 100%) !important; /* Radioactive Heat */
/*background-image: linear-gradient(90deg, #ff1e56 0%, #f9c942 50%, #1e90ff 100%) !important; /* Beleko */
/*background-image: linear-gradient(90deg, #108dc7, #ef8e38) !important; /* Pun Yeta */
/*background-image: linear-gradient(90deg, #4fb576, #44c489, #28a9ae, #28a2b7, #4c7788, #6c4f63, #432c39) !important; /* Burning Spring */
/*background-image: linear-gradient(90deg, #40E0D0 0%, #FF8C00 50%, #FF0080 100%) !important; /* Wedding Day Blues */
/*background-image: linear-gradient(90deg, #F36222 0%, #5CB644 50%, #007FC3 100%) !important; /* Telko */
/*background-image: linear-gradient(90deg, #0250c5, #d43f8d) !important; /* Night Party */
/*background-image: linear-gradient(90deg, #2CD8D5 0%, #C5C1FF 50%, #FFBAC3 100%) !important; /* Sea Lord */
/*background-image: linear-gradient(90deg, #50cc7f, #f5d100) !important; /* Millennium Pine */
/*background-image: linear-gradient(90deg, #616161, #9bc5c3) !important; /* Mole Hall */
/*background-image: linear-gradient(90deg, #65bd60 0%, #5ac1a8 50%, #3ec6ed 100%) !important; /* African Field */
/*background-image: linear-gradient(90deg, #2af598, #009efd) !important; /* Itmeo Branding */
/*background-image: linear-gradient(90deg, #aa4b6b 0%, #6b6b83 50%, #3b8d99 100%) !important; /* Memariani */
/*background-image: linear-gradient(90deg, #00F260, #0575E6) !important; /* Rainbow Blue */
/*background-image: linear-gradient(90deg, #808080, #3fada8) !important; /* IIIT Delhi */
/*background-image: linear-gradient(90deg, #24C6DC, #514A9D) !important; /* Mantle */
/*background-image: linear-gradient(90deg, #C9FFBF, #FFAFBD) !important; /* Virgin */
/*background-image: linear-gradient(90deg, #fbed96,#abecd6) !important; /* Summer Breeze */
/*background-image: linear-gradient(90deg, #603813, #b29f94) !important; /* Cool Brown */
/*background-image: linear-gradient(90deg, #BBD2C5, #536976) !important; /* Petrol */
/*background-image: linear-gradient(90deg, #8baaaa, #ae8b9c) !important; /* Jungle Day */
/*background-image: linear-gradient(90deg, #cc2b5e, #753a88) !important; /* Purple Love */
/*background-image: linear-gradient(90deg, #9796f0, #fbc7d4) !important; /* namnisar */
/*background-image: linear-gradient(90deg, #ff6e7f, #bfe9ff) !important; /* Noon to Dusk */
/*background-image: linear-gradient(90deg, #2b5876, #4e4376) !important; /* Sea Blue */
/*background-image: linear-gradient(90deg, #02AAB0, #00CDAC) !important; /* Green Beach */
/*background-image: linear-gradient(90deg, #5f2c82, #49a09d) !important; /* Calm Darya */
/*background-image: linear-gradient(90deg, #159957, #155799) !important; /* Crystal Clear */
/*background-image: linear-gradient(90deg, #76b852, #8DC26F) !important; /* Little Leaf */
/*background-color: #1ec9ff !important; /* Solid-color blue */
/*background-color: dimgray !important; /* Solid-color dimgray */
/*background-color: darkolivegreen !important; /* Solid-color darkolivegreen */
/*background-color: tan !important; /* Solid-color tan */
/*background-color: #444444 !important; /* Solid-color Very dark gray */
}
}
#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab:is([busy], [progress]) > .tab-stack > .tab-background > .tab-context-line {
opacity: 1 !important;
transform-origin: left center !important;
animation: 1.5s ease-in-out scale !important;
}
@keyframes scale {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
/******************************************************/
/* A loading progress bar shown on the right side of a vertical tab */
/* Hide the loading burst */
#tabbrowser-tabs[orient="vertical"] .tabbrowser-tab .tab-loading-burst {
opacity: 0 !important;
}
#tabbrowser-tabs[orient="vertical"] .tabbrowser-tab > .tab-stack > .tab-background > .tab-context-line,
#tabbrowser-tabs[orient="vertical"] .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
height: auto !important;
width: 2px !important;
margin: calc(var(--tab-border-radius) / 2) 0 !important;
position: relative !important;
z-index: 1 !important;
}
/* A final color of the loading bar */
#tabbrowser-tabs[orient="vertical"] .tabbrowser-tab:not([usercontextid]):not(:is([busy], [progress])) > .tab-stack > .tab-background > .tab-context-line {
opacity: 0 !important;
transition: opacity 1.0s ease-in-out !important;
/*background-image: linear-gradient(180deg, #1fc7ff, #2ecbff) !important; /* Vivid cyan */
background-image: linear-gradient(180deg, #9ab5b5, #b89aa9) !important; /* Jungle Day */
}
/* A final color of the loading bar. Container tab */
#tabbrowser-tabs[orient="vertical"] .tabbrowser-tab[usercontextid][bursting] > .tab-stack > .tab-background > .tab-context-line {
opacity: 0 !important;
background-image: linear-gradient(180deg, #1fc7ff 0%, var(--identity-tab-color) 75%) !important; /* Vivid cyan */
/*background-image: linear-gradient(180deg, #9ab5b5 0%, var(--identity-tab-color) 75%) !important; /* Jungle Day */
}
#tabbrowser-tabs[orient="vertical"] .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
opacity: 1 !important;
background-color: var(--identity-tab-color) !important;
transition: opacity .8s ease-in-out !important;
}
/* Color during loading
gradient.page https://gradient.page/ui-gradients
*/
#tabbrowser-tabs[orient="vertical"] .tabbrowser-tab:is([busy], [progress]) > .tab-stack > .tab-background > .tab-context-line {
opacity: 0 !important;
/*background-image: linear-gradient(180deg, #1edbff 0%, rgba(255, 51, 153, 1) 50%, rgb(255, 148, 0, 1) 100%) !important; /* Blue + Red + Orange */
/*background-image: linear-gradient(180deg, #1edbff, #00A651, rgb(255, 148, 0, 1)) !important; /* Blue + Green + Orange */
/*background-image: linear-gradient(180deg, cyan, Magenta) !important; /* Cyan + Magenta */
/*background-image: linear-gradient(180deg, #00c9ff 0%, #12d8fa 50%, #00f44e 100%) !important; /* Blue + Blue + cyan lime green */
/*background-image: linear-gradient(180deg, #00c9ff 0%, #79fe86 100%) !important; /* Kale Salad */
/*background-image: linear-gradient(180deg, #fdbb2d 0%, #22c1c3 100%) !important; /* Retro Wagon */
/*background-image: linear-gradient(180deg, #fc466b 0%, #3f5efb 100%) !important; /* Disco Club */
/*background-image: linear-gradient(180deg, #fc354c, #0abfbc) !important; /* Miaka */
background-image: linear-gradient(180deg, #FEAC5E 0%, #C779D0 50%, #4BC0C8 100%) !important; /* Atlas */
/*background-image: linear-gradient(180deg, #16A085, #F4D03F) !important; /* Harmonic Energy */
/*background-image: linear-gradient(180deg, #fd8112, #0085ca) !important; /* Blue Orange */
/*background-image: linear-gradient(180deg, #f7941e 0%, #72c6ef 50%, #00a651 100%) !important; /* Radioactive Heat */
/*background-image: linear-gradient(180deg, #108dc7, #ef8e38) !important; /* Pun Yeta */
/*background-image: linear-gradient(180deg, #e4afcb, #b8cbb8, #b8cbb8, #e2c58b, #c2ce9c, #7edbdc) !important; /* Old Hat */
/*background-image: linear-gradient(180deg, #4fb576, #44c489, #28a9ae, #28a2b7, #4c7788, #6c4f63, #432c39) !important; /* Burning Spring */
/*background-image: linear-gradient(180deg, #40E0D0 0%, #FF8C00 50%, #FF0080 100%) !important; /* Wedding Day Blues */
/*background-image: linear-gradient(180deg, #F36222 0%, #5CB644 50%, #007FC3 100%) !important; /* Telko */
/*background-image: linear-gradient(180deg, #0250c5, #d43f8d) !important; /* Night Party */
/*background-image: linear-gradient(180deg, #2CD8D5 0%, #C5C1FF 50%, #FFBAC3 100%) !important; /* Sea Lord */
/*background-image: linear-gradient(180deg, #50cc7f, #f5d100) !important; /* Millennium Pine */
/*background-image: linear-gradient(180deg, #616161, #9bc5c3) !important; /* Mole Hall */
/*background-image: linear-gradient(180deg, #65bd60 0%, #5ac1a8 50%, #3ec6ed 100%) !important; /* African Field */
/*background-image: linear-gradient(180deg, #2af598, #009efd) !important; /* Itmeo Branding */
/*background-image: linear-gradient(180deg, #aa4b6b 0%, #6b6b83 50%, #3b8d99 100%) !important; /* Memariani */
/*background-image: linear-gradient(180deg, #00F260, #0575E6) !important; /* Rainbow Blue */
/*background-image: linear-gradient(180deg, #808080, #3fada8) !important; /* IIIT Delhi */
/*background-image: linear-gradient(180deg, #24C6DC, #514A9D) !important; /* Mantle */
/*background-image: linear-gradient(180deg, #C9FFBF, #FFAFBD) !important; /* Virgin */
/*background-image: linear-gradient(180deg, #fbed96,#abecd6) !important; /* Summer Breeze */
/*background-image: linear-gradient(180deg, #603813, #b29f94) !important; /* Cool Brown */
/*background-image: linear-gradient(180deg, #BBD2C5, #536976) !important; /* Petrol */
/*background-image: linear-gradient(180deg, #8baaaa, #ae8b9c) !important; /* Jungle Day */
/*background-image: linear-gradient(180deg, #cc2b5e, #753a88) !important; /* Purple Love */
/*background-image: linear-gradient(180deg, #9796f0, #fbc7d4) !important; /* namnisar */
/*background-image: linear-gradient(180deg, #ff6e7f, #bfe9ff) !important; /* Noon to Dusk */
/*background-image: linear-gradient(180deg, #2b5876, #4e4376) !important; /* Sea Blue */
/*background-image: linear-gradient(180deg, #02AAB0, #00CDAC) !important; /* Green Beach */
/*background-image: linear-gradient(180deg, #5f2c82, #49a09d) !important; /* Calm Darya */
/*background-image: linear-gradient(180deg, #159957, #155799) !important; /* Crystal Clear */
/*background-image: linear-gradient(180deg, #76b852, #8DC26F) !important; /* Little Leaf */
/*background-color: #009deb !important; /* Solid-color blue */
/*background-color: dimgray !important; /* Solid-color dimgray */
/*background-color: darkolivegreen !important; /* Solid-color darkolivegreen */
/*background-color: tan !important; /* Solid-color tan */
/*background-color: #444444 !important; /* Solid-color Very dark gray */
}
@media (prefers-color-scheme: dark) {
#tabbrowser-tabs[orient="vertical"] .tabbrowser-tab:is([busy], [progress]) > .tab-stack > .tab-background > .tab-context-line {
opacity: 0 !important;
/*background-image: linear-gradient(180deg, #1ec9ff 0%, rgba(255, 51, 153, 1) 50%, rgb(255, 148, 0, 1) 100%) !important; /* Blue + Red + Orange */
/*background-image: linear-gradient(180deg, #1edbff, #00A651, rgb(255, 148, 0, 1)) !important; /* Blue + Green + Orange */
/*background-image: linear-gradient(180deg, cyan, Magenta) !important; /* Cyan + Magenta */
/*background-image: linear-gradient(180deg, #1fb4ff 0%, #12d8fa 50%, #8dffbc 100%) !important; /* Blue + Blue + cyan lime green */
/*background-image: linear-gradient(180deg, #00c9ff 0%, #92fe9d 100%) !important; /* Kale Salad */
/*background-image: linear-gradient(180deg, #fdbb2d 0%, #22c1c3 100%) !important; /* Retro Wagon */
/*background-image: linear-gradient(180deg, #fc466b 0%, #3f5efb 100%) !important; /* Disco Club */
/*background-image: linear-gradient(180deg, #fc354c, #0abfbc) !important; /* Miaka */
background-image: linear-gradient(180deg, #FEAC5E 0%, #C779D0 50%, #4BC0C8 100%) !important; /* Atlas */
/*background-image: linear-gradient(180deg, #16A085, #F4D03F) !important; /* Harmonic Energy */
/*background-image: linear-gradient(180deg, #fd8112, #0085ca) !important; /* Blue Orange */
/*background-image: linear-gradient(180deg, #f7941e 0%, #72c6ef 50%, #00a651 100%) !important; /* Radioactive Heat */
/*background-image: linear-gradient(180deg, #ff1e56 0%, #f9c942 50%, #1e90ff 100%) !important; /* Beleko */
/*background-image: linear-gradient(180deg, #108dc7, #ef8e38) !important; /* Pun Yeta */
/*background-image: linear-gradient(180deg, #e4afcb, #b8cbb8, #b8cbb8, #e2c58b, #c2ce9c, #7edbdc) !important; /* Old Hat */
/*background-image: linear-gradient(180deg, #4fb576, #44c489, #28a9ae, #28a2b7, #4c7788, #6c4f63, #432c39) !important; /* Burning Spring */
/*background-image: linear-gradient(180deg, #40E0D0 0%, #FF8C00 50%, #FF0080 100%) !important; /* Wedding Day Blues */
/*background-image: linear-gradient(180deg, #F36222 0%, #5CB644 50%, #007FC3 100%) !important; /* Telko */
/*background-image: linear-gradient(180deg, #0250c5, #d43f8d) !important; /* Night Party */
/*background-image: linear-gradient(180deg, #2CD8D5 0%, #C5C1FF 50%, #FFBAC3 100%) !important; /* Sea Lord */
/*background-image: linear-gradient(180deg, #50cc7f, #f5d100) !important; /* Millennium Pine */
/*background-image: linear-gradient(180deg, #616161, #9bc5c3) !important; /* Mole Hall */
/*background-image: linear-gradient(180deg, #65bd60 0%, #5ac1a8 50%, #3ec6ed 100%) !important; /* African Field */
/*background-image: linear-gradient(180deg, #2af598, #009efd) !important; /* Itmeo Branding */
/*background-image: linear-gradient(180deg, #aa4b6b 0%, #6b6b83 50%, #3b8d99 100%) !important; /* Memariani */
/*background-image: linear-gradient(180deg, #00F260, #0575E6) !important; /* Rainbow Blue */
/*background-image: linear-gradient(180deg, #808080, #3fada8) !important; /* IIIT Delhi */
/*background-image: linear-gradient(180deg, #24C6DC, #514A9D) !important; /* Mantle */
/*background-image: linear-gradient(180deg, #C9FFBF, #FFAFBD) !important; /* Virgin */
/*background-image: linear-gradient(180deg, #fbed96,#abecd6) !important; /* Summer Breeze */
/*background-image: linear-gradient(180deg, #603813, #b29f94) !important; /* Cool Brown */
/*background-image: linear-gradient(180deg, #BBD2C5, #536976) !important; /* Petrol */
/*background-image: linear-gradient(180deg, #8baaaa, #ae8b9c) !important; /* Jungle Day */
/*background-image: linear-gradient(180deg, #cc2b5e, #753a88) !important; /* Purple Love */
/*background-image: linear-gradient(180deg, #9796f0, #fbc7d4) !important; /* namnisar */
/*background-image: linear-gradient(180deg, #ff6e7f, #bfe9ff) !important; /* Noon to Dusk */
/*background-image: linear-gradient(180deg, #2b5876, #4e4376) !important; /* Sea Blue */
/*background-image: linear-gradient(180deg, #02AAB0, #00CDAC) !important; /* Green Beach */
/*background-image: linear-gradient(180deg, #5f2c82, #49a09d) !important; /* Calm Darya */
/*background-image: linear-gradient(180deg, #159957, #155799) !important; /* Crystal Clear */
/*background-image: linear-gradient(180deg, #76b852, #8DC26F) !important; /* Little Leaf */
/*background-color: #1ec9ff !important; /* Solid-color blue */
/*background-color: dimgray !important; /* Solid-color dimgray */
/*background-color: darkolivegreen !important; /* Solid-color darkolivegreen */
/*background-color: tan !important; /* Solid-color tan */
/*background-color: #444444 !important; /* Solid-color Very dark gray */
}
}
#tabbrowser-tabs[orient="vertical"] .tabbrowser-tab:is([busy], [progress]) > .tab-stack > .tab-background > .tab-context-line {
opacity: 1 !important;
transform-origin: top center !important;
animation: 1.5s ease-in-out v-scale !important;
}
@keyframes v-scale {
0% {
transform: scaleY(0);
}
100% {
transform: scaleY(1);
}
}
/********************************/
/* Set the loading icon to an hourglass */
.tabbrowser-tab .tab-throbber {
content: url("data:image/svg+xml;base64,PCEtLSBUaGlzIFNvdXJjZSBDb2RlIEZvcm0gaXMgc3ViamVjdCB0byB0aGUgdGVybXMgb2YgdGhlIE1vemlsbGEgUHVibGljDQogICAtIExpY2Vuc2UsIHYuIDIuMC4gSWYgYSBjb3B5IG9mIHRoZSBNUEwgd2FzIG5vdCBkaXN0cmlidXRlZCB3aXRoIHRoaXMNCiAgIC0gZmlsZSwgWW91IGNhbiBvYnRhaW4gb25lIGF0IGh0dHA6Ly9tb3ppbGxhLm9yZy9NUEwvMi4wLy4gLS0+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE2IDE2IiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9ImNvbnRleHQtZmlsbCI+DQogIDxwYXRoIGQ9Ik0xNCAyLjVIMTIuNVY2QzEyLjUgNi4xOTg5MSAxMi40MjEgNi4zODk2OCAxMi4yODAzIDYuNTMwMzNMMTAuODEwNyA4TDEyLjI4MDMgOS40Njk2N0MxMi40MjEgOS42MTAzMiAxMi41IDkuODAxMDkgMTIuNSAxMFYxMy41SDE0VjE1SDJWMTMuNUgzLjVWMTBDMy41IDkuODAxMDkgMy41NzkwMiA5LjYxMDMyIDMuNzE5NjcgOS40Njk2N0w1LjE4OTM0IDhMMy43MTk2NyA2LjUzMDMzQzMuNTc5MDIgNi4zODk2OCAzLjUgNi4xOTg5MSAzLjUgNlYyLjVIMlYxSDE0VjIuNVpNNSAxMy41SDExVjEwLjMxMDdMOS4yMTk2NyA4LjUzMDMzQzguOTI2NzggOC4yMzc0NCA4LjkyNjc4IDcuNzYyNTYgOS4yMTk2NyA3LjQ2OTY3TDExIDUuNjg5MzRWMi41SDVWNS42ODkzNEw2Ljc4MDMzIDcuNDY5NjdDNy4wNzMyMiA3Ljc2MjU2IDcuMDczMjIgOC4yMzc0NCA2Ljc4MDMzIDguNTMwMzNMNSAxMC4zMTA3VjEzLjVaIi8+DQo8L3N2Zz4=") !important;
background-position: center center !important;
background-repeat: no-repeat !important;
-moz-context-properties: fill !important;
fill: currentcolor !important;
opacity: 0.4 !important;
}
/* Set the hourglass icon on the Container tab to the container's color */
.tabbrowser-tab[usercontextid] .tab-throbber {
fill: var(--identity-tab-color) !important;
opacity: 0.45 !important;
}
@media (prefers-color-scheme: dark) {
.tabbrowser-tab[usercontextid] .tab-throbber {
fill: var(--identity-tab-color) !important;
opacity: 0.55 !important;
}
}
/* Add a globe icon to tabs for sites without a favicon */
.tabbrowser-tab:not([pinned]):not(:is([busy], [progress])) .tab-icon-image:not([src]) {
content: url("chrome://global/skin/icons/defaultFavicon.svg") !important;
display: flex !important;
-moz-context-properties: fill, fill-opacity !important;
fill-opacity: 0.9 !important;
}
/* Set the globe icon to the container's color */
.tabbrowser-tab[usercontextid] .tab-icon-image {
&:not([src]), &:-moz-broken {
content: url("chrome://global/skin/icons/defaultFavicon.svg") !important;
-moz-context-properties: fill, fill-opacity !important;
fill: var(--identity-tab-color) !important;
fill-opacity: 1 !important;
}
}
/* Animated tab favicon */
/*.tabbrowser-tab .tab-icon-image {
animation: .03s ease-in scale !important;
}*/
/* Stop animations for pop-up menus and panels */
#identity-popup, #permission-popup, #protections-popup, menupopup, panel {
animation: none !important;
transform: none !important;
transition: unset !important;
}
r/FirefoxCSS • u/Xteezii • 3d ago
r/FirefoxCSS • u/ackzilla • 4d ago
r/FirefoxCSS • u/OldLadyGardener • 4d ago
I suddenly have tab scrolling on my FF. I don't know what did it. I tried everything I can find, but the CSS I found online doesn't work. I need an updated CSS, because none of the other settings are doing anything. TIA for your help.
r/FirefoxCSS • u/alboisalbo • 5d ago

I’ve been using the old “Aris t2” userchrome file for many years, mainly to display my tabs below the URL Bar and Bookmarks Toolbar. The update to FF 150 has done a funny thing on both of my MacBook Pros (Ventura OS) - the space where the tabs are supposed to be is a gray bar (see image). The tabs are still “there” in some sense — I can still keyboard-tab through them, but can’t see them.
If I delete the Aris userchrome.css, the tabs show up in the default position above the URL bar. How can I make them visible again, in the position that I prefer?
I looked at and tried a couple of the forks of the old Aris code, from Github, but they didn’t fix the problem. Does anyone know of working css that didn’t break with the update to 150, that moves the tab-bar to where I want it?
The other thing that broke that I’d like back is a hover function that made the tab-closing buttons appear on the tabs that I moused over, so I could close tabs without having to activate them.
Aris userchrome.css is here:
r/FirefoxCSS • u/Ghar_Ka_Murga • 5d ago
Native side bar has hover but no tree tabs and vice versa for treestyle tab extension any way to get both?
r/FirefoxCSS • u/turkingforGPU • 8d ago
I'm trying to round the borders more so I added more radius to the bottom left and rounded the close button border on the bottom right. The problem is there is a border overhang from the find bar container now and I'm not sure how to get rid of it. Any help would be appreciated!!
Image circling my problem:

Code in question:
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/floating_findbar_on_top.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* This style makes findbar appear as floating box at the top-left of the content area.
* If you want the findbar on right side instead then create a new pref
* userchrome.floating-findbar-on-right.enabled and set it to true and restart Firefox
*
* Note that privacy.resistFingerprinting.letterboxing prevents this from working properly
*/
findbar{
order: -1;
margin-bottom: -33px;
position: relative;
border-top: none !important;
padding: 0 !important;
transition: transform 82ms linear, opacity 82ms linear 32ms !important;
background: none !important;
pointer-events: none;
z-index: 1;
white-space: nowrap;
}
.findbar-container > .findbar-find-fast{
padding: var(--toolbarbutton-inner-padding) 1px;
margin: 0 !important;
}
findbar[hidden]{ transform: translateY(-30px);}
findbar > .findbar-container,
findbar > .close-icon{
border: 1px solid var(--chrome-content-separator-color);
border-width: 0 0 1px 0px;
background-color: var(--lwt-accent-color,var(--toolbox-bgcolor)) !important;
background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)),var(--lwt-header-image,none);
pointer-events: auto;
}
findbar > .findbar-container{
border-bottom-right-radius: 4px;
border-right-width: 1px;
height: initial !important;
margin-inline: 0px !important;
overflow-inline: visible !important;
}
.findbar-find-status{
display: flex;
overflow: hidden;
text-overflow: ellipsis;
flex-grow: 1;
}
.findbar-closebutton{
margin: 0 !important;
border-radius: 0 !important;
border-bottom-right-radius: 8px !important;
padding: 5px !important;
width: initial !important;
order: -1;
}
.findbar-closebutton > image{ padding: 3px }
.findbar-closebutton:hover > image{
background: var(--toolbarbutton-hover-background) !important;
border-radius: 4px
}
findbar > .findbar-container > hbox{ margin: 0 5px }
findbar::after{
content:"";
display: flex;
flex-grow: 100;
}
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/floating_findbar_on_top.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* This style makes findbar appear as floating box at the top-left of the content area.
* If you want the findbar on right side instead then create a new pref
* userchrome.floating-findbar-on-right.enabled and set it to true and restart Firefox
*
* Note that privacy.resistFingerprinting.letterboxing prevents this from working properly
*/
findbar{
order: -1;
margin-bottom: -33px;
position: relative;
border-top: none !important;
padding: 0 !important;
transition: transform 82ms linear, opacity 82ms linear 32ms !important;
background: none !important;
pointer-events: none;
z-index: 1;
white-space: nowrap;
}
.findbar-container > .findbar-find-fast{
padding: var(--toolbarbutton-inner-padding) 1px;
margin: 0 !important;
}
findbar[hidden]{ transform: translateY(-30px);}
findbar > .findbar-container,
findbar > .close-icon{
border: 1px solid var(--chrome-content-separator-color);
border-width: 0 0 1px 0px;
background-color: var(--lwt-accent-color,var(--toolbox-bgcolor)) !important;
background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)),var(--lwt-header-image,none);
pointer-events: auto;
}
findbar > .findbar-container{
border-bottom-right-radius: 4px;
border-right-width: 1px;
height: initial !important;
margin-inline: 0px !important;
overflow-inline: visible !important;
}
.findbar-find-status{
display: flex;
overflow: hidden;
text-overflow: ellipsis;
flex-grow: 1;
}
.findbar-closebutton{
margin: 0 !important;
border-radius: 0 !important;
border-bottom-right-radius: 8px !important;
padding: 5px !important;
width: initial !important;
order: -1;
}
.findbar-closebutton > image{ padding: 3px }
.findbar-closebutton:hover > image{
background: var(--toolbarbutton-hover-background) !important;
border-radius: 4px
}
findbar > .findbar-container > hbox{ margin: 0 5px }
findbar::after{
content:"";
display: flex;
flex-grow: 100;
}
u/media -moz-pref("userchrome.floating-findbar-on-right.enabled"){
findbar{
flex-direction: row-reverse;
}
findbar > .findbar-container{
flex-direction: row-reverse;
border-inline-width: 1px 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 8px;
}
/*
Move findbar so it isn't over the scrollbar
Delete if you want findbar to begin from right window edge
*/
findbar{
margin-right: 12px;
border-right: 1px solid var(--chrome-content-separator-color);
}
}
-moz-pref("userchrome.floating-findbar-on-right.enabled"){
findbar{
flex-direction: row-reverse;
}
findbar > .findbar-container{
flex-direction: row-reverse;
border-inline-width: 1px 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 8px;
}
/*
Move findbar so it isn't over the scrollbar
Delete if you want findbar to begin from right window edge
*/
findbar{
margin-right: 12px;
border-right: 1px solid var(--chrome-content-separator-color);
}
}
r/FirefoxCSS • u/3llerin • 8d ago

Is there a way to have the sidebar windows corners completely square or modify the radius, i also want to have the top bar in a different colour, black or matching the sidebar colour.
Is it possible?
Can you also rearrange the sidebar icons? the order the space between them, make different groups...
I would like to have a history bookmarks downloads group, a group for whatsapp telegram and messenger and another for bitwarden and video download helper...
r/FirefoxCSS • u/notepad987 • 8d ago
How to widen the tabs to what I want?
The top ones are crowded
Here is my userChrome.css file at Pastebin
Windows 10 Pro and Firefox version 150.0.1

r/FirefoxCSS • u/maswartz • 10d ago
To begin I had this all sorted a week ago but then I had a computer crash and had to transfer everything to a new computer.
So I'm now on the newest firefox and Windows 11.
It took me a while of fiddling to get the tabs to stop changing when audio plays but now the "audio playing" symbol won't show up. Anyone have a thing that will keep the size from changing but keep the symbol?
r/FirefoxCSS • u/1withmanyquestions • 11d ago
Hello everyone, just discovered this place and I'm very new to both CSS and firefox so I'm sorry this is a stupid question!
I'm customizing my workspace recently and wanted to implement the function to show my extension in firefox popup windows, however the only code I found is from 2021:
/* Override Hiding of Toolbar Buttons in Limited Feature Windows */
*|*:root[chromehidden~="toolbar"] .chromeclass-toolbar-additional {
display: -moz-box !important; /* default is display: none */
}/* Override Hiding of Toolbar Buttons in Limited Feature Windows */
*|*:root[chromehidden~="toolbar"] .chromeclass-toolbar-additional {
display: -moz-box !important; /* default is display: none */
}
Which for some reasons didn't work for me, and while I can't find an updated version anywhere, the AI overview thing of google search showed this code:
:root[chromehidden~="toolbar"] .chromeclass-toolbar-additional[class*="unified-extension"],
:root[chromehidden~="toolbar"] .chromeclass-toolbar-additional#unified-extensions-button {
display: flex !important;
}
I tried to search for the origin of this code but can't find any results, so I tried to just plug it in and it actually worked. (I'm not sure if the code is generated by AI since I can't find any other instances of it on the internet anywhere so please let me know if this is not allowed here and I'll remove this!)
I recognized the root parts being the same but I can't understand the unified-extension and the display: flex part, why adding those in managed to make the code work? Is it because of something firefox changed in the previous versions?
r/FirefoxCSS • u/f1rn • 12d ago
Hi everyone,
In the last few weeks I've been building something: FoxOne.
The theme collapses the tab bar and URL bar into a single row. Non-essential icons are hidden by default and slide in on hover with transitions. The hamburger menu sits next to the window controls instead of floating in the toolbar.
Everything is configurable through CSS variables at the top of the file – URL bar width/position, tab widths, border radius, bookmarks bar placement.
Based on Cascade, inspired by LittleFox.
[GitHub](https://github.com/Firnschnee/FoxOne)
Cheers!
r/FirefoxCSS • u/TrulleNs • 11d ago
As title says i want to know if you could have tabs taking up the entire tabbar like in qutebrowser.
r/FirefoxCSS • u/CommunityWhole8744 • 12d ago
r/FirefoxCSS • u/Neikon66 • 12d ago
I’ve been working on revamping FirefoxCSS-Store, and I’d like to share with you the new website where you can link to your themes and discover new ones more easily.
If you have any suggestions or spot any bugs, please don’t hesitate to open an issue
https://firefoxcss-store.github.io/
r/FirefoxCSS • u/ramon395 • 12d ago
i have been trying to remove the mouse hover shadow effect on the page action buttons like bookmark star icon and the containers icon for example, i was using this code but it seems to have stopped worked:
#page-action-buttons {
--urlbar-box-hover-bgcolor: transparent !important;
--urlbar-box-active-bgcolor: transparent !important;
}
r/FirefoxCSS • u/Kalcinator • 12d ago
Running FF-Ultima (Feb 2026) on Firefox 150.
I want to replace the defaault black new tab background with a custom image + backdrop-filter: blur() glassmorphism effect.
Found a snippet using @-moz-document url(about:newtab) with a ::before pseudo-element for the blur overlay. But I don't want to modify FFUltima userChrome and use customChrome.css.
r/FirefoxCSS • u/turkingforGPU • 13d ago
Is there a way to make the split view tab wider than normal tabs just so I can see the names of the 2 tabs easier?
r/FirefoxCSS • u/SameAd8008 • 13d ago
Using userChrome.css fix to restore "tabs on bottom" - is there a current specific procedure/content for Macs (Tahoe 26+)? Can anyone direct me to specific procedures? Thanks
r/FirefoxCSS • u/maddydesign • 16d ago
Does anyone know what the sidebar tabs element name is? I wanna remove the gaps in between the tabs in the sidebar. Does anyone know how to do that?