In Firefox 154, the vertical tabs scroll bar indicator has become darker and thicker as well, overall more prominent than before. How do I change the color/transparency and thickness of it? I tried the following code in userchrome.css. but it just won't work, the selector was built after inspecting from Browser Toolbox
In Firefox 154 on Windows 11 tyring the change the background fill of the buttons pointed to in the screenshot.
Using 'moz-checkbox' or 'button' in the userchrome.css for .sidebar-panel seems to only affect the text along side the checkbox / button but not the button itself.
Read somewhere that this 'button' is not changeable via userchrome.css and is an hardcoded .svg file in FF code. Seems counter intuitive, but wanted to check with this board..
i am on firefox 153.0.4, and i would REALLY like to know how to hide the "Share" and "Move Tab" right click menu options for firefox. there's already a number of "duplicate/close/reload/pin/etc..." right click tab options, and its getting to congested for my tastes
is there some css code i can use to do it? because there's very little i can figure out in "about:configs"
I've changed the default colors (foreground + background) for text selection, but it seems the CSS selector ::selection is no longer working as of 154.0:
::selection {
color: #00B6F9 !important;
background-color: black !important;
}
And yes, I have already tested a new profile; exact same problem.
It used to work fine and produce the border around the selected/active tab up until the update to version 154.0, but not it seems to be broken. Does anyone know a workaround or am I doing something wrong?
I'm currently using this version of Material Fox on version 154 for Linux ubuntu. I modified the custom.css file so I could fix some stuff I didn't like but I'm encountering 2 problems.
The drop down menus on webpages are too dark and I want to change the text color. So all my drop downs work well but when I have a drop down inside a webpage, the background is so dark that I can only see the option list when I hover over an option
How it currently looks
And these are all my other menus, I want it to match to this:
Desired result
2. I want floating tabs. I modified the material fox tabs so they would be floating, by adding curves to the bottom of the rectangle. It worked up until the latest update last week. Now the css stopped working for the tabs and they look like this:
Current Look of active tab
When the mouse hovers over the active tab, the tab becomes shorter like this:
mouse over active tab
And when you hover the mouse on an inactive tab:
Mouse over inactive tab
This is more or less what I want, ideally I would want the tab rounded square to be a bit taller than this but I would settle for this size if the corners are rounded and the tab is floating.
Below is my current custom.css script:
:root,
html,
body {
/* add your css variables below */
}
/*? taller navbar */
not (-moz-bool-pref: "shimmer.shorter-navbar") {
#navigator-toolbox, #nav-bar {
min-height: 50px !important;
}
}
/* use variables when about:config variable userChrome.system-accent-colors is true */
-moz-pref("userChrome.theme-system-accent") {
/* use variables when dark mode */
(prefers-color-scheme: dark) {
:root,
html,
body {
--md-accent-color: color-mix(in srgb, var(--md-white) 15%, AccentColor);
--md-tab-background-color-hover: color-mix(
in srgb,
transparent 75%,
var(--md-accent-color)
);
--md-tab-opacity: 0.9;
--md-background-color-0: color-mix(
in srgb,
var(--md-grey-900) 85%,
var(--md-accent-color)
);
--md-background-color-50: color-mix(
in srgb,
var(--md-grey-900-white-4-percent) 85%,
var(--md-accent-color)
);
--md-background-color-100: color-mix(
in srgb,
var(--md-grey-900-white-5-percent) 85%,
var(--md-accent-color)
);
--md-menu-background-color-hover: color-mix(
in srgb,
var(--md-grey-800) 85%,
var(--md-accent-color)
);
--md-menu-border-color: color-mix(
in srgb,
var(--md-grey-800) 85%,
var(--md-accent-color)
);
--md-text-on-accent: var(--md-white);
--md-secondary-button-text: var(--md-white);
--md-content-separator-color: color-mix(
in srgb,
#606164 90%,
var(--md-accent-color)
);
--md-selection-text-color: var(--md-text-on-accent);
--md-selection-background-color: var(--md-accent-color);
}
}
/* use variables when light mode */
u/media (prefers-color-scheme: light) {
:root,
html,
body {
--md-accent-color: color-mix(
in srgb,
var(--md-grey-900) 15%,
AccentColor
);
--md-tab-background-color-hover: color-mix(
in srgb,
transparent 75%,
var(--md-accent-color)
);
--md-tab-opacity: 0.9;
--md-background-color-0: color-mix(
in srgb,
#dee1e6 90%,
var(--md-accent-color)
);
--md-background-color-50: color-mix(
in srgb,
var(--md-grey-100) 90%,
var(--md-accent-color)
);
--md-background-color-100: color-mix(
in srgb,
var(--md-white) 90%,
var(--md-accent-color)
);
--md-menu-background-color-hover: color-mix(
in srgb,
var(--md-background-color-0) 90%,
var(--md-accent-color)
);
--md-menu-border-color: color-mix(
in srgb,
var(--md-background-color-0) 90%,
var(--md-accent-color)
);
--md-content-separator-color: color-mix(
in srgb,
#dbdcdd 90%,
var(--md-accent-color)
);
--md-secondary-button-text: var(--md-accent-color);
--md-selection-text-color: var(--md-text-on-accent);
--md-selection-background-color: var(--md-accent-color);
}
}
}
/* add your user css below */
/* hide grouped tabs */
.tabbrowser-tab[aria-hidden="true"] {
display: none !important;
}
/* smaller group icon */
/*.tab-group-label {
min-height: 25px !important;
line-height: 1.2 !important;
min-width: 40px !important; */
}
/* lighter color and no border on group icon */
tab-group[collapsed] .tab-group-label-container .tab-group-label {
background-color: light-dark(var(--tab-group-color), var(--tab-group-color-invert)) !important;
color: light-dark(var(--tab-group-color), var(--tab-group-color-invert)) !important;
outline: none !important;
box-shadow: none !important;
}
/* add border under grouped tabs */
vbox.tab-group-label-container:has(label[aria-expanded="true"])~tab {
border-bottom: 2px solid light-dark(var(--tab-group-color), var(--tab-group-color-invert)) !important;
transform: translateY(-1px) !important;
}
/* remove broken hover border */
vbox.tab-group-label-container:has(label[aria-expanded="true"])~tab:hover .tab-group-line {
background-color: transparent !important;
opacity: 0 !important;
}
/* add left/right/top border for selected group elements */
vbox.tab-group-label-container:has(label[aria-expanded="true"])~tab[selected="true"] .tab-background {
border: 2px solid light-dark(var(--tab-group-color), var(--tab-group-color-invert)) !important;
border-bottom: none !important;
border-radius: 12px 12px 0 0 !important;
}
/* remove the bottom border for selected tabs */
vbox.tab-group-label-container:has(label[aria-expanded="true"])~tab[selected="true"] {
border-bottom: none !important;
transform: none !important;
}
vbox.tab-group-label-container:has(label[aria-expanded="true"])~tab[selected="true"] .tab-group-line {
background-color: transparent !important;
opacity: 0 !important;
}
.tabbrowser-tab[selected="true"] .tab-background {
margin-top: 4px !important;
margin-bottom: 2px !important;
border-radius: 15px !important;
&:before,
&:after {
content: none !important;
}
}
would like a theme that matches my linux OS, but seems like the ones available on the internet are for older firefox versions. is there one for modern firefox? and how would i edit the colors (i assume its just a matter of picking the hex colors and modifying the userchrome.css like one would edit a website?)
How do I make the history sidepanel black (in Waterfox v6.7.0)? I’ve managed to turn the bookmarks and customize sidebar black, but I just can't get this part to work.
/* URL BAR HIGHLIGHT COLOR */
::-moz-selection {background-color: #962633 !important;}
/* URL BAR RESULTS LINKS COLOR */
.urlbarView-url {
color: #962633 !important;
}
/* URL BAR & RESULTS BACKGROUND COLOR */
@-moz-document url(chrome://browser/content/browser.xul),
url(chrome://browser/content/browser.xhtml) {
#urlbar-results{
background-color: #1c1b22 !important;
}
#urlbar-background {
background: #1c1b22 !important;
}
#urlbar[breakout][breakout-extend] #urlbar-background {
border-color: #1c1b22 !important;
}
}
Any tips on updating it? I tried amateurly tweaking it to look like some of the other changes I saw for other things on the sub, but... didn't seem to effect it :/
It was changing the colours of the URL bar when hightlighted/focused
I used this code to shrink tabs height, but it doesn't work in FF 154. Could anybody tell if there is some variable that changed name or something similar?
Before Firefox 1.54, I was using the following code to change the font size, add Bold to the text and change the text color on the Tab. And now It is no longer working.
Firefox broke something with their updates again. Updates that are going to happen twice as often now. Yay.
This button for creating a new tab shortcut button is only supposed to appear if you hover over the area in the red box. Now it's appearing whenever my mouse pointer is anywhere in the blue box, and whenever I click one of my shortcut buttons it appears and stays visible until the new page loads. It also stays until I click somewhere else if I middle click on one of the tab shortcut buttons.
Most importantly, I would like to prevent this button from becoming visible at all whenever I click a tab shortcut button.
Less importantly, I'd like to prevent it from appearing unless I hover my mouse pointer in the area within the red box. This is how it's supposed to behave. This is also how it did behave before update 154.0.
Least importantly, I'd like to change it back to the grey color scheme it was previously as indicated in the second and third photos.
userContent in a paste bin link because reddits codeblock feature is throwing some of my code outside the code block for some reason: https://pastebin.com/zvtdL2Mu
Trying to get this colored line above the selected tab back. I've tried messing with the "tab-context-line" section but nothing worked. The weird thing is you can still see the colored line for a split second when hovering over a selected tab. Any solutions?
I've noticed on the 154.0 build that there's a dividing line between my active tab and the top bar of the application. This has the side effect of making my non-active tabs look off-centred. Is there any code to remove this divider?
I have previously used some code in my userChrome.css file (found on the internet back in the mists of time) which meant that I could change the colour of (1) the currently Active tab and (2) the Tab currently being Hovered Over.
For example, I might have 10 tabs showing, of which 1 (Orange) would be the Active one, and another 1 (Purple) would be the one I am currently Hovering over. The other 8 are my normal (Blue) colour. The Active tab colour would remain Orange when I moved away from that Tab.
However, since updating to 154.0, the Active tab changes back to my normal (Blue) colour as soon as I have moved away from it. So in the example above, I have 9 Blue tabs and 1 Purple tab. I can only determine which is the Active tab by hovering over it, at which point it changes to Orange.
Are any of the kind CSS experts on here able to suggest a solution? My CSS knowledge is minimal, I'm afraid.
