Skip to content

Instantly share code, notes, and snippets.

@szupie
Last active June 7, 2022 03:13
Show Gist options
  • Save szupie/f2edb08761e4d3aaed02859fed1f6ad8 to your computer and use it in GitHub Desktop.
Save szupie/f2edb08761e4d3aaed02859fed1f6ad8 to your computer and use it in GitHub Desktop.
Styles to revert Firefox Proton tabs appearance, where the active tab is attached to the page below. Active tab is indicated by a line at the top, and background tabs are separated by a thin stroke.
/*** Proton Tabs Tweaks ***/
/* Modified from https://www.userchrome.org/firefox-89-styling-proton-ui.html#tabstyler
to previous tabs appearance with colour line over selected tab
*/
/* Adjust tab corner shape, optionally remove space below tabs */
#tabbrowser-tabs {
--user-tab-rounding: 0px;
}
.tab-background {
border-radius: var(--user-tab-rounding) var(--user-tab-rounding) 0px 0px !important;
margin-block: 1px 0 !important;
}
/* for >= v102 */
.tab-background[selected]:-moz-lwtheme {
outline: none !important;
}
.tab-background:is([selected], [multiselected]):-moz-lwtheme {
border-color: var(--lwt-tab-line-color, var(--lwt-tabs-border-color, currentColor));
border-style: solid;
}
#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;
}
/* Inactive tabs: Separator line style */
.tabbrowser-tab .tab-background {
border-right: 1px solid var(--lwt-background-tab-separator-color, rgba(0, 0, 0, .20)) !important;
}
.tabbrowser-tab:first-child .tab-background {
border-left: 1px solid var(--lwt-background-tab-separator-color, rgba(0, 0, 0, .20)) !important;
}
/* For dark backgrounds */
[brighttext="true"] .tabbrowser-tab .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;
}
.tabbrowser-tab:is([visuallyselected="true"], [multiselected]) .tab-background {
box-shadow: -0.5px -2px 0 -0.5px var(--tab-line-color, var(--tabs-border-color, rgba(128,128,142,0.9))), 0 0 4px rgba(128,128,142,0.5) !important;
/* Tweak Options as of 6/12/2021; Generated Mon Jun 14 2021 17:48:55 GMT-0400 (Eastern Daylight Time) */
/* Adjustments for v96+ */
border-top-width: 2px !important;
border-bottom: none !important;
border-left: none !important;
border-right: none !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment