본 사이트는 여러분의 사용자 경험을 개선하기 위해 유지 보수를 진행하는 동안 기능이 제한됩니다. 도움말로 문제가 해결되지 않고 질문을 하고 싶다면 Twitter의 @FirefoxSupport 및 Reddit의 /r/firefox 채널을 활용하세요.

Mozilla 도움말 검색

고객 지원 사기를 피하세요. 저희는 여러분께 절대로 전화를 걸거나 문자를 보내거나 개인 정보를 공유하도록 요청하지 않습니다. "악용 사례 신고"옵션을 사용하여 의심스러운 활동을 신고해 주세요.

자세히 살펴보기

Customizing Proton design

  • 10 답장
  • 1 이 문제를 만남
  • 11 보기
  • 최종 답변자: 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>

글쓴이 cor-el 수정일시

모든 댓글 (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.

글쓴이 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?

글쓴이 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?

글쓴이 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 ...

글쓴이 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.