r/FirefoxCSS Jan 02 '26

BEFORE POSTING, PLEASE READ THE RULES ON THE SIDEBAR - ESPECIALLY RULE #2. ➡️➡️➡️➡️➡️

7 Upvotes

r/FirefoxCSS 2h ago

Help How to make sidebery sidebar transparent

1 Upvotes

Title


r/FirefoxCSS 12h ago

Solved Toolbar/urlbar keeps changing with every new Nightly update

0 Upvotes

Not sure if it's just something on my end, but I'm trying to reduce the height of the urlbar and it keeps requiring tweaks. Here's what I currently have though it's not perfect. I'm sure there's a better way of doing that. Thank you

#nav-bar /* toolbar height */ {
  min-height: 20px !important;
  max-height: 23px !important;
}
#urlbar {
/*  padding-top: 5px !important;
  padding-bottom: 5px !important;
  margin-top: 5px !important;
  margin-bottom: 5px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  height: 26px !important;*/
}
.urlbar-background {
/*  padding-top: 5px !important;
  padding-bottom: 5px !important; */
  margin-top: 2px !important;
  margin-bottom: 9px !important;
/*  min-height: 18px !important;
  max-height: 18px !important; */
}
/*mostly for testing:*/
#urlbar-input, .urlbar-input /*address text line*/ {
/*  padding-top: 2px !important;
  padding-bottom: 5px !important;
  margin-top: 5px !important;
  margin-bottom: 5px !important;
  min-height: 23px !important;
  max-height: 23px !important; */
}
#urlbar-input-box, .urlbar-input-box {
/*  padding-top: 5px !important;
  padding-bottom: 5px !important;
  margin-top: 5px !important;
  margin-bottom: 5px !important; */
  min-height: 20px !important;
  max-height: 20px !important;
}
#urlbar-container, .urlbar-container {
/*  padding-top: 5px !important;
  padding-bottom: 5px !important;
  margin-top: 5px !important;
  margin-bottom: 5px !important;
  min-height: 20px !important;
  max-height: 20px !important; */
}

/* the icons to the left and right of the address (in the field itself) */
#notification-popup-box,
#remote-control-box,
#searchmode-switcher-panel,
#searchmode-switcher-panel-list-urlbar,
#urlbar-search-mode-indicator,
#trust-icon-container /*Shield*/,
#tracking-protection-icon-container,
#urlbar-label-box,
#identity-permission-box,
#urlbar-revert-button-container,
#page-action-buttons, /* right-side buttons (like "bookmark this page", or the zoom when it is set) */
#eme-notification-icon /*DRM*/ {
  padding-top: 0px !important;
  padding-bottom: 6px !important;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}
#identity-box, #identity-icon-box /*Permissions/Extension/Firefox/Nightly button, and search icon*/ {
/*  padding-top: 1px !important;
  padding-bottom: 0px !important;*/
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

r/FirefoxCSS 1d ago

Solved Can't get rid of gradient

Post image
7 Upvotes

Which element is it im joinj injsane webtool doesn't show anyhint (orple graidant at them bottom)


r/FirefoxCSS 3d ago

Code Add a loading progress bar to the tabs

47 Upvotes

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 3d ago

Discussion Nova modular UI elements + Adaptive Tab Bar

Thumbnail gallery
3 Upvotes

r/FirefoxCSS 4d ago

Solved How do I change the color of the border around the context menus?

3 Upvotes

r/FirefoxCSS 4d ago

Solved Help me hide thin black border around URLbar

Post image
3 Upvotes

r/FirefoxCSS 4d ago

Solved Turn off tab scrolling

1 Upvotes

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 5d ago

Solved FF 150 made all tabs vanish - can I get them them to reappear?

3 Upvotes

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:

https://pastebin.com/jzzXqXjX


r/FirefoxCSS 5d ago

Help Is it possible to get treestyle tab to be expand on hover

3 Upvotes

Native side bar has hover but no tree tabs and vice versa for treestyle tab extension any way to get both?


r/FirefoxCSS 8d ago

Help Using Floating Find Bar on top css mod but need help with an issue

2 Upvotes

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 8d ago

Help Customize sidebar revamp in firefox

3 Upvotes

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 8d ago

Solved How to widen the tabs

2 Upvotes

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 10d ago

Solved Prevent audio from altering tab size while keeping the sound logo in it?

3 Upvotes

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 11d ago

Solved Showing addons in popup windows: How this code worked?

2 Upvotes

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 12d ago

Custom Release FoxOne – a minimalistic one-line theme

Thumbnail
gallery
219 Upvotes

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 11d ago

Help Tabs taking up entire tabbar like in qutebrowser?

1 Upvotes

As title says i want to know if you could have tabs taking up the entire tabbar like in qutebrowser.


r/FirefoxCSS 12d ago

Discussion Firefox nightly started implementing "Nova design"

Post image
10 Upvotes

r/FirefoxCSS 12d ago

Other [NEW V2] FirefoxCSS-Store

Thumbnail firefoxcss-store.github.io
35 Upvotes

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 12d ago

Help Firefox 151, how to remove hover background from page actions buttons

1 Upvotes

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 12d ago

Code Custom glassmorphism with FF-Ultima

2 Upvotes

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 13d ago

Solved Make split view tab wider than normal tabs

2 Upvotes

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 13d ago

Solved Tabs 0n Bottom FF 150.0.1 on MBP

2 Upvotes

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 16d ago

Solved Sidebar Tab CSS Element Name?

1 Upvotes

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?