Skip to content

Instantly share code, notes, and snippets.

@tung
Last active October 31, 2023 04:35
Show Gist options
  • Save tung/439935f55cc83af20defd7867ec89c82 to your computer and use it in GitHub Desktop.
Save tung/439935f55cc83af20defd7867ec89c82 to your computer and use it in GitHub Desktop.
Firefox 89 Proton-to-Photon square-style tab adaptation
@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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment