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… (tuilleadh eolais)
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;
}