userChrome-proton-tab-tweaks.css

/*** Proton Tabs Tweaks ***/

/* 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; /* Connected */
    margin-block: 1px 0 !important; /* Connected */
}
#scrollbutton-up, #scrollbutton-down { /* 6/10/2021 */
    border-top-width: 1px !important;
    border-bottom-width: 0 !important;
}

/* 1/16/2022 Tone down the Fx96 tab border with add-on themes in certain fallback situations */
.tab-background:is([selected], [multiselected]):-moz-lwtheme {
    --lwt-tabs-border-color: rgba(0, 0, 0, 0.5) !important;
    border-bottom-color: transparent !important;
}
[brighttext="true"] .tab-background:is([selected], [multiselected]):-moz-lwtheme {
    --lwt-tabs-border-color: rgba(255, 255, 255, 0.5) !important;
    border-bottom-color: transparent !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;
}

    /* Make sure tab attention dot isn't too high - 10 Dec 2022 */
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]),
#firefox-view-button[attention], .webextension-browser-action[attention="true"] {
  background-position-y: bottom 5px !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;
}

/* Emulate blue tab line from Photon 57-88 UI */

/* Set size and position of the bar relative to background */
.tab-background::before {
  content: "";
  display: block;
  height: 3px;
  margin: -1px var(--user-tab-rounding) 0;
}
/* Set color for active tab */
.tabbrowser-tab[selected] .tab-background::before {
  background-color: #0a84ff;
}
/* Set color for other selected tabs */
.tabbrowser-tab[multiselected]:not([selected]) .tab-background::before {
  background-color: color-mix(in srgb, #0a84ff 66%, transparent);
}
/* Set color for hovering on non-active/non-selected tabs */
.tabbrowser-tab:not([selected], [multiselected]):hover .tab-background::before {
  background-color: color-mix(in srgb, currentColor 33%, transparent);
  transform: none;
}
/* [Optional] Animation when hovering non-active/non-selected tabs */
/*
.tabbrowser-tab:not([selected], [multiselected]) .tab-background::before {
  transform: scaleX(.8);
  transition: transform 100ms linear;
}
*/

/* Adjust margin on blue tab line for squared background tabs */
.tabbrowser-tab:not([selected], [multiselected]) .tab-background::before {
  margin: -1px 0 0 !important;
}

/* Tweak Options as of 12/10/2022; Generated Thu Mar 27 2025 14:05:19 GMT-0500 */

userChrome.css

@import url("userChrome-proton-tab-tweaks.css") screen;

/* multiselect */
.tabbrowser-tab[multiselected]:not([selected]) .tab-background {
	outline: none !important; /* this shouldn't require !important, why does it? */
}

.tabbrowser-tab[multiselected][selected] .tab-background {
	outline-width: 1px !important;
	outline-offset: -1px !important;
}

/** Make current tab appear connected to nav bar **/

:root {
	--jrf-tabs-border: 0.01px var(--tabs-navbar-separator-style) ThreeDShadow;
}

#nav-bar {
	border-top: 0 !important;
}

.tabbrowser-tab:not([selected]) {
	border-bottom: var(--jrf-tabs-border) !important;
}

/* also styles tab scroller buttons more to my liking */
toolbarbutton#scrollbutton-up,
toolbarbutton#scrollbutton-down {
	/* XXX: why the fuck was the original firefox style using transparent borders instead of padding?!? */
	border: 0 !important;
	padding: 0 4px !important;
	border-bottom: var(--jrf-tabs-border) !important;
	background-clip: initial !important;
	border-radius: 0 !important;
}

#TabsToolbar-customization-target > :not(tabs) {
	border-bottom: var(--jrf-tabs-border) !important;
}

/* addon icons are problematic */
#TabsToolbar-customization-target > toolbaritem {
	margin: 0 !important;
	padding-inline: 2px;
}

.titlebar-buttonbox-container {
	border-bottom: var(--jrf-tabs-border) !important;
}

/* FAILED METHOD: trying to eclipse over below bar to overshadow its border to make tab look connected */
/* .tabbrowser-tab[selected="true"]::after {
	content: 'g';
	display: block;
	position: absolute;
    bottom: -5px;
} */