Customizing Proton design
I was quite unhappy with the new Firefox Proton design, so I made a CSS file and copied the following code from a website. However, I don't know what to do to (1) slightly reduce the tab height, (2) get back tab borders for inactive tabs and (3) remove the small gaps between tabs. How exactly do I have to change the following code to do so (ideally, for convenience, please just complete the code accordingly)? Thanks in advance for any support!
/*** Tighten up drop-down/context/popup menu spacing (8 Sep 2021) ***/ menupopup:not(.in-menulist) > menuitem, menupopup:not(.in-menulist) > menu { padding-block: 2px !important; /* reduce to 3px, 2px, 1px or 0px as needed */ min-height: unset !important; /* v92.0 - for padding below 4px */ } :root { --arrowpanel-menuitem-padding: 4px 8px !important; } /*** Proton Tabs Tweaks ***/ /* Adjust tab corner shape, optionally remove space below tabs */ #tabbrowser-tabs { --user-tab-rounding: 6px; } .tab-background { border-radius: var(--user-tab-rounding) var(--user-tab-rounding) 0px 0px !important; margin-block: 1px 0 !important; } #scrollbutton-up, #scrollbutton-down { /* 6/10/2021 */ border-top-width: 1px !important; border-bottom-width: 0 !important; } /* Container color bar visibility */ .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line { margin: 0px max(calc(var(--user-tab-rounding) - 3px), 0px) !important; }
Athraithe ag cor-el ar
All Replies (10)
Hi laudesimperiales, it's possible you were using code from my site.
For the part after --
/*** Proton Tabs Tweaks ***/
-- do you want to re-run the code generator with some of the other options selected? There's a simulated tab bar for previewing each option:
https://www.userchrome.org/firefox-89-styling-proton-ui.html#tabstyler
jscher2000 said
Hi laudesimperiales, it's possible you were using code from my site. For the part after -- /*** Proton Tabs Tweaks ***/ -- do you want to re-run the code generator with some of the other options selected? There's a simulated tab bar for previewing each option: https://www.userchrome.org/firefox-89-styling-proton-ui.html#tabstyler
Thanks a lot for commenting. Apart from the three desired changes mentioned above, I would like to keep the rounded corners as they already are, and, I guess, connected (?), not floating (?) tabs. Or did you mean something else? Sorry for my ignorance.
Athraithe ag laudesimperiales ar
Hi laudesimperiales, your reply contained a URL so it's temporarily held in the moderation queue. It should become visible soon. Meanwhile, please use any options you like.
jscher2000 said
Hi laudesimperiales, your reply contained a URL so it's temporarily held in the moderation queue. It should become visible soon. Meanwhile, please use any options you like.
Sorry, but I don't know how exactly to modify the given code of my CSS to make the said adjustments without compromising the rest. Can you help me?
Athraithe ag laudesimperiales ar
Hi laudesimperiales, the newly generated rules replace the rules after this line in your current file:
/*** Proton Tabs Tweaks ***/
After the preview bar looks the way you want, scroll down a bit to the section with the generated rules where you can select and copy, and then paste into your file.
For example:
/*** Tighten up drop-down/context/popup menu spacing (8 Sep 2021) ***/ menupopup:not(.in-menulist) > menuitem, menupopup:not(.in-menulist) > menu { padding-block: 2px !important; /* reduce to 3px, 2px, 1px or 0px as needed */ min-height: unset !important; /* v92.0 - for padding below 4px */ } :root { --arrowpanel-menuitem-padding: 4px 8px !important; } /*** Proton Tabs Tweaks ***/ /* Adjust tab corner shape, optionally remove space below tabs */ #tabbrowser-tabs { --user-tab-rounding: 6px; } .tab-background { border-radius: var(--user-tab-rounding) !important; } /* Override Normal Density height to Compact Density height only for tabs */ #TabsToolbar, #tabbrowser-tabs { --tab-min-height: 29px !important; } /* Tweak for covering a line at the bottom of the active tab on some themes 8/11/2021 */ #main-window[sizemode="normal"] #toolbar-menubar[autohide="true"] + #TabsToolbar, #main-window[sizemode="normal"] #toolbar-menubar[autohide="true"] + #TabsToolbar #tabbrowser-tabs { --tab-min-height: 30px !important; } #scrollbutton-up, #scrollbutton-down { border-top-width: 0 !important; border-bottom-width: 0 !important; } /* Inactive tabs: Separator line style */ .tabbrowser-tab:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) .tab-background { border-right: 1px solid var(--lwt-background-tab-separator-color, rgba(0, 0, 0, .20)) !important; } /* For dark backgrounds */ [brighttext="true"] .tabbrowser-tab:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) .tab-background { border-right: 1px solid var(--lwt-background-tab-separator-color, var(--lwt-selected-tab-background-color, rgba(255, 255, 255, .20))) !important; } .tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background { border-radius: 0 !important; } /* Remove padding between tabs */ .tabbrowser-tab { padding-left: 0 !important; padding-right: 0 !important; } /* Move container color bar to bottom of tab */ .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line { margin-top: calc(var(--tab-min-height) - 2px) !important; } /* Tweak Options as of 8/13/2021; Generated Wed Sep 15 2021 09:50:01 GMT-0700 (Pacific Daylight Time) */
Hey, jscher2000. A heartfelt thank you, once again. I tried your previewer, and I found some settings I would really like. However, except for "Use Compact height", I cannot reduce the tab height in a customized way, and there are still those gaps between tabs. What do I have to do to include these adjustments to the output of your generator?
Athraithe ag laudesimperiales ar
> I cannot reduce the tab height in a customized way, and there are still those gaps between tabs.
On the first one, I have not tested other methods to reduce the tab height.
On the second one, what do you mean by "gaps between tabs"? The rules remove the extra padding and show a single line border between the background tabs. There may be other spacing, but I have not explored it.
If you don't get adjustments here, you also can post on https://www.reddit.com/r/FirefoxCSS/
Thanks a lot for that hint! Indeed, on Reddit I just found the following for the height:
/* ---Tabs/Tab Bar height--- */ :root { --tab-min-height: 26px !important; }
And by "gaps" I mean a spacing of about 1 mm between the tab buttons, which didn't use to be there in older FF versions, and which I'd love to get rid of ...
Athraithe ag laudesimperiales ar
@ jscher2000: I found it (again on Reddit)! This removed the padding between tabs I was talking about:
/* Remove extra padding between tabs */ .tabbrowser-tab:not(:first-of-type) { padding-left: 0 !important; }
Thank you once more for your very kind support!
Is it possible to remove the rounded corners on the contextmenus of version 92? to look like the good minimal square corners of version 88.