:root {
--tab-curve-width: 30px;
--tabs-border: transparent !important;
--tab-border-radius: 0 !important;
}
.tabbrowser-arrowscrollbox .arrowscrollbox-scrollbox {
padding-inline-start: 10px !important;
}
/* To be able to see the top border of the tab */
.tab-stack {
margin-top: 2px !important;
}
/* To prevent tab label appearing on pinned tab in compact mode. */
.tab-content {
padding: 0 20px !important;
}
/* When the window is maximized, the first pinned tab is properly displayed. */
#TabsToolbar {
padding-inline-start: 15px !important;
min-height: 33px !important;
max-height: 33px !important;
}
.tabbrowser-tab[first-visible-tab="true"] {
padding-left: 12px !important;
}
#tabbrowser-tabs {
margin-left: -15px !important;
}
.titlebar-placeholder {
border: none !important;
}
.titlebar-spacer {
border: none !important;
}
/* Styles to account for when tab scrollbar is visible, and margin-inline-start kicks in */
.tabbrowser-tab[pinned="true"] {
width: 44px !important; /* Actual photon pinned tab is 41px, but 40px removes pixelated artifact from pinned tab favicon */
}
.tabbrowser-tab[pinned="true"][style^="margin-inline-start"] {
padding-left: 12px !important;
}
/* Remove unneeded styles from Photon */
.tabbrowser-tab::before,
.tabbrowser-tab::after {
border: none !important;
}
/* Remove uneeded styles from Proton */
.tabbrowser-tab {
padding-inline: 0px !important;
}
.tab-background {
margin-bottom: 0 !important;
display: flex !important;
}
.tab-background > .tab-context-line {
flex: 1 !important;
}
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
margin-inline-start: 0px !important;
}
.tabbrowser-tab {
margin-inline-start: -16px !important;
}
/* Remove container colors */
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
background-color: rgba(0,0,0,0) !important;
height: inherit !important;
border-radius: 0px !important;
margin: 0px !important;
}
/* Default theme customization: Vibrant (transparent, dark) titlebar for mac */
:root:is([inFullscreen], [tabsintitlebar]) #TabsToolbar:not(:-moz-lwtheme) {
appearance: auto !important;
-moz-default-appearance: -moz-mac-vibrant-titlebar-dark !important;
-moz-font-smoothing-background-color: -moz-mac-vibrant-titlebar-dark !important;
background-color: #232323 !important;
color: hsl(240, 9%, 98%) !important;
text-shadow: none !important;
}
#navigator-toolbox {
background-color: transparent !important;
}
#new-tab-button > .toolbarbutton-icon,
#tabs-newtab-button > .toolbarbutton-icon {
fill: rgb(249,249,250) !important;
}
/* End default theme customizations */
/* Windows 7 specific */
@media (-moz-os-version: windows-win7) {
.tabbrowser-tab {
background-color: transparent !important;
border: none !important;
}
@media (-moz-windows-default-theme) {
.tabbrowser-tab:not(:-moz-lwtheme) {
background-color: transparent !important;
border: none !important;
}
}
}
.tabbrowser-tab > .tab-stack > .tab-background {
background-image: none !important;
-moz-box-orient: horizontal !important;
background-color: transparent !important;
margin-top: 1px !important;
}
.tab-background[selected="true"] {
border: none !important;
}
.tab-background {
pointer-events: none !important;
}
.tab-line {
display: none !important;
}
.tab-bottom-line {
display: none !important;
}
/* Match height of new tab button (right svg) on hover */
#tabs-newtab-button {
margin: 0 !important;
}
/* overlap the tab curves */
.tab-background {
-moz-margin-end: -15px !important;
-moz-margin-start: -15px !important;
}
/* Remove blue animation on tab on page load complete */
.tab-loading-burst {
display: none !important;
}
/* Begin tab background customizations */
.tab-background[selected="true"]::before {
border: none !important;
content: "" !important;
width: 38px !important;
min-height: 30px !important;
display: -moz-box !important;
background-repeat: no-repeat !important;
}
tabbrowser-tab[pinned="true"][first-visible-tab="true"] .tab-background::before,
.tabbrowser-tab[pinned="true"][first-visible-tab="true"]:hover > .tab-stack > .tab-background:not([selected=true])::before {
width: 42px !important;
}
.tabbrowser-tab[pinned="true"][first-visible-tab="true"] .tab-content {
padding: 0px 18px 0px 22px !important;
}
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
margin-inline-start: -16px !important;
}
.tab-background[selected="true"]::after {
border: none !important;
content: "" !important;
width: 38px !important;
min-height: 30px !important;
display: -moz-box !important;
background-repeat: no-repeat !important;
}
.tab-background[selected="true"] > spacer {
margin-top: 0px !important;
}
#new-tab-button,
#tabs-newtab-button {
width: calc(36px + 30px) !important;
margin-inline-start: -15px !important;
margin-top: 1px !important;
}
/* Tab hover customizations */
.close-icon:hover {
border-radius: 50% !important;
}
/* Regular tabs */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
display: -moz-box !important;
background-repeat: no-repeat !important;
content: "" !important;
width: 38px !important;
max-height: 30px !important;
background-color: transparent !important;
}
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after {
display: -moz-box !important;
background-repeat: no-repeat !important;
content: "" !important;
width: 38px !important;
max-height: 30px !important;
background-color: transparent !important;
}
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
margin-top: 0px !important;
}
#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]),
#tabs-newtab-button:hover,
#tabs-newtab-button:hover::before,
#tabs-newtab-button:hover::after {
background-color: transparent !important;
}
/* New tab hover customizations */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]), #tabs-newtab-button:hover {
background-position: 0px 2px, 30px 4px , 36px 2px !important;
background-repeat: no-repeat !important;
background-size: 30px 30px, calc(100% - (2 * 30px)) 30px, 30px !important;
}
#tabs-newtab-button:hover > .toolbarbutton-icon {
background: none !important;
background-color: transparent !important;
}
/* Color specific customizations */
:root {
--svg-selected-before: url("data:image/svg+xml;utf8,");
--svg-selected-after: url("data:image/svg+xml;utf8,");
--background-selected-middle:
linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
linear-gradient(
transparent
2px,
rgb(249,249,255) 2px,
rgb(249,249,255)
),
none;
--svg-hover-before: url("data:image/svg+xml;utf8,");
--svg-hover-after: url("data:image/svg+xml;utf8,");
--background-hover-middle:
linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
linear-gradient(
transparent
2px,
rgba(255,255,255,.1) 2px,
rgba(255,255,255,.1)
),
none;
--newtab-hover: url("data:image/svg+xml;utf8,"),
linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1)),
url("data:image/svg+xml;utf8,");
}
/* OS-specific color variables */
@media screen and (-moz-windows-theme) {
:root {
}
}
@media not screen and (-moz-windows-theme) {
:root {
}
}
.tab-background[selected="true"]::before {
background-image: var(--svg-selected-before) !important;
background-position: right top;
}
.tab-background[selected="true"]::after {
background-image: var(--svg-selected-after) !important;
}
.tab-background[selected="true"] > .tab-context-line {
background-image: var(--background-selected-middle) !important;
}
.tabbrowser-tab[visuallyselected="true"] > .tab-stack > .tab-background {
box-shadow: none !important;
}
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
background-image: var(--svg-hover-before) !important;
background-position: right top;
}
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after {
background-image: var(--svg-hover-after) !important;
}
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > .tab-context-line {
background-image: var(--background-hover-middle) !important;
}
#tabs-newtab-button:hover {
background-image: var(--newtab-hover) !important;
margin-inline-start: -16px !important;
}