Last active
June 7, 2022 03:13
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*** 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