- You can enable it from about:config
- Paste this "browser.nova.enabled"
- Switch the value from false to true
u/CommunityWhole8744 — 10 days ago
r/FirefoxCSS
▲ 40 r/FirefoxCSS
Add a loading progress bar to the tabs
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.
/* 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;
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;
}
/* 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, #1edbff, #ea00ff) !important; /* Blue + 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 */
}
(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, #1edbff, #ea00ff) !important; /* Blue + 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;
}
#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab[bursting] > .tab-stack > .tab-background > .tab-context-line {
transition: opacity 1.0s ease-out !important;
}
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;
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, #1edbff, #ea00ff) !important; /* Blue + 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 */
}
(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, #1edbff, #ea00ff) !important; /* Blue + 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;
}
#tabbrowser-tabs[orient="vertical"] .tabbrowser-tab[bursting] > .tab-stack > .tab-background > .tab-context-line {
transition: opacity 1.0s ease-out !important;
}
u/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;
}
/* 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;
}
u/moko1960 — 1 day 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!
u/f1rn — 9 days ago
Nova modular UI elements + Adaptive Tab Bar
I wanted to try the new Nova design in Firefox Nightly. However, it does not work well with the Adaptive Tab Bar extension at all, which is a must for me. It's one of the best extensions I've ever used.
I don't particularly like that everything have to be excessively round these days, but the real problem is the separate modular UI elements. That's truly what kills it. I wanted to make this post to see if there is any way to use the Nova redesign without the separate modular UI elements? I like the UI elements to be connected, like it is currently.
Firefox developers, there has to be a setting for disabling separate modular UI elements.
I have included some pictures for comparison.
- Picture 1 is Nova
- Picture 2 is the current design
- Picture 3 is Nova settings in about:config
- Picture 4 is Nova on new tab
u/Xteezii — 1 day ago
▲ 3 r/FirefoxCSS
How do I change the color of the border around the context menus?
reddit.comu/ackzilla — 2 days ago
just changed my new tab page to have momo fox on it!
Here's the userContent css:
@-moz-document url("about:newtab"), url("about:home") {
.logo {
background-image: url("./momo.svg") !important;
background-size: contain !important;
background-repeat: no-repeat;
}
}
I got the icon from here: https://github.com/LangerFox/momo_Firefox_icon/tree/main
u/lucasorigami — 12 days ago
▲ 1 r/FirefoxCSS
Turn off tab scrolling
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.
u/OldLadyGardener — 3 days ago
FF 150 made all tabs vanish - can I get them them to reappear?
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:
u/alboisalbo — 4 days 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/
u/Neikon66 — 11 days ago
▲ 2 r/FirefoxCSS
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?
u/1withmanyquestions — 9 days ago
▲ 2 r/FirefoxCSS
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?
u/turkingforGPU — 12 days ago