- Archiviert
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) slightl… (Lesen Sie mehr)
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; }