I have Firefox ver 103.0.2 but want rounded tabs
I have Firefox 103.0.2 and have enabled the use of style sheets in about:config. I have a CSS style sheet userChrome.css that is giving me color at the top heading and in the tabs, except for the active tab (is white)
I'll list the CSS and see if you can give me some guidance in what i need to do to put some roundness in the top corners of the tabs. the UserChrome.css file .titlebar-color{ color: AccentColorText; background-color: AccentColor; } .tab-background{ border-radius: 5px 5px !important; margin-bottom: 0px !important; } .tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background{ background-color: color-mix(in srgb, currentColor 5%, transparent); } menupopup > menu, menupopup > menuitem{ padding-block: 2px !important; min-height: 0px !important; }
- root{
--arrowpanel-menuitem-padding: 2px !important; }
The whole top is solid color (same as Windows color, which is ok by me. However, it would also be nice if there were a dividing line or separation between the menu on top and the "tabs" below. Any ideas would be great! Thanks!! Vern
Chosen solution
THANK YOU, Cor-el !! That worked GREAT!! I have some vision issues due to Ischemic Optical Neuropathy that happened just about 4 years ago. I had nerve damage to the optical nerve sensors in the back of the eye that transmits image from what they pick up to the brain. in other words, my sight, especially seeing things of low contrast, is very affected. I can NOW see the " + " (new tab) on the right of open tabs very clearly! Before it was mostly hidden. You cannot imagine how much better this is for me, and if there are others with vision issues, it will help them as well. Thank you so much. I agree, and understand that Mozilla does not support the userChrom.css style sheets, and it may break in future new releases. But for me, for now, this is a lifesaver. 69 Years old with some mild Glaucoma as well, having better contrast is very important to me. I still struggle with even this text I'm typing, as it appeas (to me) as very light blue/gray text on a subdued blue/white background. If websites would adopt dark black text for white background it would look so much better. Vern
Skaityti atsakymą kartu su kontekstu 👍 0All Replies (4)
I got the curvy part figured out, and changing the percentage helped with making the tabs "more distinct" if one could color the tabs a dark color, like dark brown, with white lettering that would be great for me with my vision loss.
Also, is there a way to make the right (new tab) cross + a more distinct color? it blends in so well I cannot see it unless I really look hard.
Here is the revised code:
.titlebar-color{ color: AccentColorText; background-color: AccentColor; } .tab-background{ border-radius: 8px 5px !important; margin-bottom: 2px !important; margin-top: 1px !important; } .tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background{ background-color: color-mix(in srgb, currentColor 25%, transparent); } menupopup > menu, menupopup > menuitem{ padding-block: 2px !important; min-height: 0px !important; }
- root{
--arrowpanel-menuitem-padding: 2px !important; }
WARNING from the moderator team: userChrome.css scripts are not provided by Mozilla and are not officially supported. Firefox is a work in progress and, to allow for continuous innovation, Mozilla cannot guarantee future updates won’t impact your customizations. For this reason, Mozilla does not officially support style rules customization.
Please read Firefox Advanced Customization and Configuration Options to learn more.
You can use these selectors for the new tab '+' button and choose your preferred fill and background colors.
/* NEWTAB button */
#new-tab-button,
#tabs-newtab-button {
fill: red !important;
background-color: rgba(255,255,255,.7) !important;
}
/* NEWTAB button - hover */
#new-tab-button:hover,
#tabs-newtab-button:hover {
fill: white !important;
background-color: rgba(255,0,0,.7) !important;
}
Chosen Solution
THANK YOU, Cor-el !! That worked GREAT!! I have some vision issues due to Ischemic Optical Neuropathy that happened just about 4 years ago. I had nerve damage to the optical nerve sensors in the back of the eye that transmits image from what they pick up to the brain. in other words, my sight, especially seeing things of low contrast, is very affected. I can NOW see the " + " (new tab) on the right of open tabs very clearly! Before it was mostly hidden. You cannot imagine how much better this is for me, and if there are others with vision issues, it will help them as well. Thank you so much. I agree, and understand that Mozilla does not support the userChrom.css style sheets, and it may break in future new releases. But for me, for now, this is a lifesaver. 69 Years old with some mild Glaucoma as well, having better contrast is very important to me. I still struggle with even this text I'm typing, as it appeas (to me) as very light blue/gray text on a subdued blue/white background. If websites would adopt dark black text for white background it would look so much better. Vern