Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

Om de ûnderfining foar jo te ferbetterjen is tydlik de funksjonaliteit dan dizze website troch ûnderhâldswurk beheind. Wannear in artikel jo probleem net oplost en jo in fraach stelle wolle, kin ús stipemienskip jo helpe yn @FirefoxSupport op Twitter en /r/firefox op Reddit.

Sykje yn Support

Mij stipescams. Wy sille jo nea freegje in telefoannûmer te beljen, der in sms nei ta te stjoeren of persoanlike gegevens te dielen. Meld fertochte aktiviteit mei de opsje ‘Misbrûk melde’.

Mear ynfo

Dizze konversaasje is argivearre. Stel in nije fraach as jo help nedich hawwe.

Customizing Proton design

  • 10 antwurd
  • 1 hat dit probleem
  • 11 werjeftes
  • Lêste antwurd fan 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>

Bewurke troch cor-el op

Alle antwurden (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.

Bewurke troch laudesimperiales op

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?

Bewurke troch laudesimperiales op

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?

Bewurke troch laudesimperiales op

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

Bewurke troch laudesimperiales op

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.