From daaff92e6ad222767ea2f2502dc653a0fafa3a70 Mon Sep 17 00:00:00 2001 From: MrOtherGuy Date: Wed, 2 Jun 2021 23:38:06 +0300 Subject: [PATCH] add photon like tab top line onhover animation --- chrome/non_floating_sharp_tabs.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/chrome/non_floating_sharp_tabs.css b/chrome/non_floating_sharp_tabs.css index d3178ce..8660d30 100644 --- a/chrome/non_floating_sharp_tabs.css +++ b/chrome/non_floating_sharp_tabs.css @@ -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; } \ No newline at end of file