Skip to content

Instantly share code, notes, and snippets.

@mmis1000
Last active June 8, 2021 00:30
Show Gist options
  • Select an option

  • Save mmis1000/08d8de4bbe70c04423f0b966bcc286b1 to your computer and use it in GitHub Desktop.

Select an option

Save mmis1000/08d8de4bbe70c04423f0b966bcc286b1 to your computer and use it in GitHub Desktop.
Add the tab seperator of Edge browser 89 to Firefox directly
/**
* Copyright 2021 Mmis1000 ([email protected])
*
* Use of this source code is governed by an MIT-style
* license that can be found in the LICENSE file or at
* https://opensource.org/licenses/MIT.
*/
/*
Selections:
[multiselected],
[visuallyselected],
:hover
*/
:root {
--mmis-pin-unpin-edge-padding-length: 1px;
}
@-moz-document url(chrome://browser/content/browser.xul),
url(chrome://browser/content/browser.xhtml) {
#tabbrowser-arrowscrollbox:not([overflowing]) tab.tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before,
tab.tabbrowser-tab:not(:hover):not([visuallyselected]):not([multiselected]):not(:first-child) .tab-background::before {
background: rgba(255, 255, 255, 0.3);
content: "";
font-size: 0;
display: block;
width: 1px;
height: 20px;
overflow: hidden;
position: absolute;
left: -2px;
top: 50%;
transform: translateX(-0.5px) translateY(calc(-50% + 1px));
box-shadow: 1px 1px 1.5px 0px rgba(0, 0, 0, 0.3);
opacity: 1;
}
#tabbrowser-arrowscrollbox:not([overflowing]) tab.tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before {
height: 44px;
opacity: 1 !important;
transform: translateX(calc(-0.5px - var(--mmis-pin-unpin-edge-padding-length))) translateY(-50%);
background: rgba(160, 160, 160, 0.5);
}
@media only screen and (min-resolution: 200dpi) {
tab.tabbrowser-tab:not(:hover):not([visuallyselected]):not([multiselected]):not(:first-child) .tab-background::before {
transform: translateX(-0.5px) scaleX(0.5) translateY(calc(-50% + 1px));
}
#tabbrowser-arrowscrollbox:not([overflowing]) tab.tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before {
transform: translateX(calc(-0.5px - var(--mmis-pin-unpin-edge-padding-length))) scaleX(0.5) translateY(-50%);
}
}
tab.tabbrowser-tab[visuallyselected] + tab.tabbrowser-tab .tab-background::before,
tab.tabbrowser-tab[multiselected] + tab.tabbrowser-tab .tab-background::before,
tab.tabbrowser-tab:hover + tab.tabbrowser-tab .tab-background::before {
opacity: 0 !important;
}
#tabbrowser-arrowscrollbox[overflowing] tab.tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before {
opacity: 0 !important;
}
#tabbrowser-arrowscrollbox:not([overflowing]) tab.tabbrowser-tab[first-visible-unpinned-tab] {
margin-inline-start: calc(var(--mmis-pin-unpin-edge-padding-length) * 2) !important;
}
}
@-moz-document url(chrome://browser/content/browser.xul),
url(chrome://browser/content/browser.xhtml) {
#tabbrowser-tabs[secondarytext-unsupported] .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
transform: scale(0.8) translate(10px, -6px);
fill-opacity: 1 !important;
opacity: 1 !important;
filter: drop-shadow(-1px 1px 2px #0000005f);
animation-duration: 1s;
animation-direction: alternate;
animation-name: media-icon-blink;
animation-iteration-count: infinite;
}
@keyframes media-icon-blink {
0% {
opacity: 1 !important;
}
100% {
opacity: 0.2 !important;
}
}
#tabbrowser-tabs[secondarytext-unsupported] .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) > :not(.tab-icon-overlay),
#toolbar-menubar:not(:hover) + #TabsToolbar:not(:hover) #tabbrowser-tabs:not([secondarytext-unsupported]) .tab-icon-image[src] ~ .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]),
:is(#toolbar-menubar:hover + #TabsToolbar, #TabsToolbar:hover) .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) > :not(.tab-icon-overlay) {
opacity: 1 !important;
}
}
@black7375
Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment