From 2b55339ac6f8d9ff3a9853c3e9f86fe7bbdb2762 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 29 Nov 2024 00:32:07 +0200 Subject: [PATCH] Fix broken transition --- src/public/stylesheets/theme-next.css | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css index d6fa51faa..45b89ab17 100644 --- a/src/public/stylesheets/theme-next.css +++ b/src/public/stylesheets/theme-next.css @@ -533,8 +533,10 @@ height: var(--new-tab-button-size); background: var(--new-tab-button-background); border-radius: 50%; - transition: background-color 200ms ease-out, - box-shadow 200ms ease-out; + transition: background-color 300ms ease-out, + box-shadow 300ms ease-out, + transform 300ms ease-in; + will-change: transform; } .tab-row-widget .note-new-tab:hover::before { @@ -558,7 +560,9 @@ font-family: boxicons; font-size: calc(var(--new-tab-button-size) * .75); color: var(--new-tab-button-color); - transition: color 200ms ease-out, + transition: color 300ms ease-out, + transform 300ms ease-in; + will-change: transform; } .tab-row-widget .note-new-tab:hover::after { @@ -566,12 +570,6 @@ transition: color 100ms ease-in, } -.tab-row-widget .note-new-tab:before, -.tab-row-widget .note-new-tab:after { - will-change: transform; - transition: transform 300ms ease-in; -} - .tab-row-widget .note-new-tab:active:before, .tab-row-widget .note-new-tab:active:after { transform: scale(.85);