Firefox 89 Proton-to-Photon square-style tab adaptation

userChrome.css

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/**
 * Firefox 89 Proton-to-Photon square-style tab adaptation.
 *
 * Set browser.compactmode.show = true in about:config, since I only tested this with it on.
 *
 * This will probably break at some point, but we'll worry about that when the time comes.
 */

#navigator-toolbox {
    &:not(:-moz-lwtheme) {
        /* Give regular tab bar distinct colors from those of Private Browsing. */
        background-color: -moz-Dialog !important;
        color: -moz-DialogText !important;
    }
}

#titlebar, #titlebar:-moz-window-inactive {
    /* Put a tiny 1px gap between the top of the tab bar and the window title decoration. */
    margin-top: 1px !important;
}

.tab-background {
    /* Remove the round bubble effect for selected tabs. */
    border-radius: unset !important;
    /* Add tab separators between all tabs. */
    box-shadow: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) !important;
    /* Remove margins, which in particular merges the selected tab with the address bar. */
    margin: 0 !important;
}

.tabbrowser-tab {
    /* Remove padding between tabs so tab separators are evenly spaced. */
    padding-inline: unset !important;
}

.tab-content[pinned] {
    /* Give pinned tabs some horizontal breathing room (was 8px). */
    padding: 0 12px !important;
}

#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
    /* Remove gap between pinned tabs and first regular tab. */
    margin-inline-start: unset !important;
}

.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
    /* Pull pinned tab attention blip down so it doesn't overlap the favicon. */
    background-position: center bottom calc(2px + var(--tabs-navbar-shadow-size));
}

/* Add top line accent to selected tabs. */
.tabbrowser-tab[selected="true"] .tab-context-line,
.tabbrowser-tab[multiselected="true"] .tab-context-line {
    background-color: AccentColor;
    height: 2px;
}

.tabbrowser-tab[multiselected="true"]:not([selected="true"]) > .tab-stack > .tab-background {
    /* Darken multiselected tabs that aren't the selected tab. */
    background-color: color-mix(in srgb, currentColor 11%, transparent) !important;
}

#TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background {
    /* Remove box shadow for multiselected tabs... */
    box-shadow: unset !important;
}

#TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests], [multiselected]) .tabbrowser-tab:is([visuallyselected="true"]) > .tab-stack > .tab-background {
    /* .. and restore the box shadow solely for the visually selected tab.  */
    box-shadow: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) !important;;
}

#scrollbutton-up, #scrollbutton-down {
    /* Remove borders from tab overflow arrows to match height of tabs with removed margins. */
    border-top: 0 !important;
    border-bottom: 0 !important;
}

#tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container {
    /* Undo tab bar height increase introduced by Firefox 97. */
    height: 2.3em !important;
}

#private-browsing-indicator-with-label > label {
    /* Hide "Private browsing" text label, but keep the icon. */
    display: none;
}