This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Customizing Proton design

  • 10 replies
  • 1 has this problem
  • 2 views
  • Last reply by Paulgi

more options

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;
}

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! <pre><nowiki>/*** 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; }</nowiki></pre><br>

Modified by cor-el

All Replies (10)

more options

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

more options

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.

Modified by laudesimperiales

more options

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.

more options

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?

Modified by laudesimperiales

more options

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) */
more options

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?

Modified by laudesimperiales

more options

> 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/

more options

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 ...

Modified by laudesimperiales

more options

@ 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!

more options

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.