▲ 6 r/FirefoxCSS
How to hide the engine icon in front of the address bar on 151 version?
u/AmphibianOutside3939 — 18 hours ago
r/FirefoxCSS
▲ 4 r/FirefoxCSS
change round edges ?
firefox 151.0 on windows 11 .. is there a way to make the round edges not round ? im visually impaired and the round edges make everything blurry :( makes firefox migrainetown and hard to use :( the little customize button being round doesnt Really matter its just round Now so i included it
u/colliequeer — 1 day ago
▲ 0 r/FirefoxCSS
Favorite websites icons on new tabs page no longer vertically centered, prefer old customise icon on bottom right of new tabs page.
Windows 11, Firefox 151.0 (64 bit)
Issue 1: Can we bring back the old customise icon in the bottom right corner or just remove it? There are other ways to get to the Firefox Settings page so I don't need it.
Issue 2: I've previously used code to remove the Firefox logo and that automatically vertically centered the icons without any further code being necessary but now the new updates have messed that up. Anyone know how to fix that? Code below.
UserContent:
/*This removes the Firefox logo on the new tabs page.*/
@-moz-document url("about:newtab"), url("about:home") {
.logo-and-wordmark {
display:none !important;
}
/*This changes the scale of the pinned/recent websites icons on the new tabs page.*/
.top-sites-list .top-site-outer .top-site-button {
transform: scale(1.2,1.2) !important;
}
}
/*This governs the space between the pinned/recent websites icons on the new tabs page. Unforntunately, altering this alone uncenters the buttons and can make the "..." button overlap.*/
.top-site-outer {
width: 100px !important; /* 120 is default value */
}
/*This changes the length and width of the inner colorful portion of the pinned/recent websites icons.*/
.top-site-outer .tile .icon-wrapper {
width: 30px !important; /* 40 is default value */
height: 30px !important; /* 40 is default value */
}
/*Makes the rounding of the pinned websites tiles on the new tabs page less ugly.*/
@-moz-document url(chrome://browser/content/browser.xul), url(about:newtab), url(about:home) {
.top-site-outer .tile {
border-radius: 10px !important;
}
}```
u/Azreal_DuCain1 — 2 days ago
▲ 1 r/FirefoxCSS
How do I remove the gear icon in the sidebar?
How do I remove the gear icon in the sidebar (the one that I circled in red)? I really don't like it and it seems like out of place.
u/hrpavi — 1 day ago
▲ 6 r/FirefoxCSS
Is it possible to restore the old show sidebars icon?
The new one's okay but I liked the old one better. It was a slightly better design by being slightly less attention grabbing.
Windows, Firefox version 151.0 (64 bit)
u/Azreal_DuCain1 — 2 days ago
remove the new firefox logo from the new tab screen?
u/hospitalcottonswab — 2 days ago
▲ 4 r/FirefoxCSS
Firefox 151: How to make Firefox menus compact again using userChrome.css?
With the new Firefox 151 update, I lost the compact line spacing in the main Firefox menu (the hamburger menu) and its submenus (like History).
Strangely, the CSS I used for the bookmarks menu still works perfectly, and those items remained tightly spaced.
Could anyone help me with the correct CSS code for version 151 to bring back the compact layout for all Firefox menus, without enabling the native compact mode?
u/sabestorn — 3 days ago
▲ 8 r/FirefoxCSS
Ever since the new update, the menu and tabs are no longer solid. Does anyone know a fix? I’m using Firefox GX.
u/SteveMemeChamp — 2 days ago
▲ 1 r/FirefoxCSS
Firefox 151: Decrease margin between items on the tabs list?
Upon loading the new update this morning, I noticed that the margin between items on the tabs list (the downward arrow in the top right) has increased. Does anyone know what code is necessary to alter the margin size?
EDIT: I found another post that lead me to the correct code to use: https://www.reddit.com/r/FirefoxCSS/comments/n1p7cc/reduce_whitespacefont_size_of_list_all_tabs_items/
I found that this value is a good spacing for me:
:is(.all-tabs-button, .all-tabs-secondary-button) {
padding-block: 0 !important;
min-height: 25px !important;
}
u/El_Specifico — 2 days ago
▲ 4 r/FirefoxCSS
Firefox 151: how to increase the horizontal spacing between new tab page shortcuts?
I have tried a few things, without success.
How can I add more space between shortcuts (tiles) in each row?
Bonus points for a solution to increase the size of the shortcut tiles as well.
Thanks in advance!
PS. Is there a way to load userChrome.css again without restarting the browser?
Through the Browser Toolbox or console maybe?
u/CalQL8or — 2 days ago
▲ 1 r/FirefoxCSS
Translucency no longer functioning FF150
I have been using a very simple CSS to make the top "ribbon" of firefox translucent. It was working fine until the update to FF150.
Here is my code.
:root {
--bg: #00000066;
}
tab.tabbrowser-tab[selected="true"] stack.tab-stack vbox.tab-background {
background: #FFFFFF28 !important;
}
toolbar {
background: transparent !important;
}
/* window transparencies */
#main-window {
background: var(--bg) !important;
}
/* navbar / tabbar / titlebar */
#nav-bar {
background: transparent !important;
}
#navigator-toolbox {
background: transparent !important;
}
hbox#urlbar[open="true"] hbox#urlbar-background {
background: #000000E0 !important;
}
#urlbar-background {
background: transparent !important;
}
I am running endeavourOS with SwayWM.
Has something changed about the transparent rule? I have tried other more complex files with transparency, such as the transparentFox from the CSS store and it also does not work. I have checked that toolkit.legacyUserProfileCustomizations.stylesheets is still true.
Is there anything wrong with the my code due to the update?
u/ZetaJolt — 4 days ago
▲ 0 r/FirefoxCSS
Toolbar/urlbar keeps changing with every new Nightly update
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;
}
u/001Guy001 — 7 days ago
▲ 52 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 — 10 days ago
▲ 6 r/FirefoxCSS
Can't get rid of gradient
Which element is it im joinj injsane webtool doesn't show anyhint (orple graidant at them bottom)
u/J0hnDoey — 7 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 — 10 days ago
▲ 3 r/FirefoxCSS
How do I change the color of the border around the context menus?
reddit.comu/ackzilla — 11 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 — 11 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 — 12 days ago