add photon like tab top line onhover animation

This commit is contained in:
MrOtherGuy 2021-06-02 23:38:06 +03:00
parent 025cc33886
commit daaff92e6a

View file

@ -78,5 +78,13 @@ See the above repository for updates as well as full license text. */
background-color: highlight;
background-image: linear-gradient(var(--tab-line-color),var(--tab-line-color));
}
/* Photon-like tab on hover animation for the top line */
@keyframes tab-line-anim{ from{ margin-inline: 20px } to { margin-inline: 0 } }
.tab-background::before{ animation: tab-line-anim 160ms }
/* Disable animation for selected and pinned tabs */
.tabbrowser-tab[pinned] > .tab-stack > .tab-background::before,
.tab-background[selected]{ animation: none }
/* moves context-line to the bottom */
.tab-context-line{ -moz-box-ordinal-group: 2; margin-inline: 10px !important; }