Trang web này sẽ có chức năng hạn chế trong khi chúng tôi trải qua bảo trì để cải thiện trải nghiệm của bạn. Nếu một bài viết không giải quyết được vấn đề của bạn và bạn muốn đặt câu hỏi, chúng tôi có cộng đồng hỗ trợ của chúng tôi đang chờ để giúp bạn tại @FirefoxSupport trên Twitter và /r/firefox trên Reddit.

Tìm kiếm hỗ trợ

Tránh các lừa đảo về hỗ trợ. Chúng tôi sẽ không bao giờ yêu cầu bạn gọi hoặc nhắn tin đến số điện thoại hoặc chia sẻ thông tin cá nhân. Vui lòng báo cáo hoạt động đáng ngờ bằng cách sử dụng tùy chọn "Báo cáo lạm dụng".

Tìm hiểu thêm

Customizing Proton design

  • 10 trả lời
  • 1 gặp vấn đề này
  • 11 lượt xem
  • Trả lời mới nhất được viết bởi 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>

Được chỉnh sửa bởi cor-el vào

Tất cả các câu trả lời (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.

Được chỉnh sửa bởi laudesimperiales vào

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?

Được chỉnh sửa bởi laudesimperiales vào

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?

Được chỉnh sửa bởi laudesimperiales vào

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

Được chỉnh sửa bởi laudesimperiales vào

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.