From aa97271f307721461b196c87ae1407b2d7caa7ed Mon Sep 17 00:00:00 2001 From: ThatOneCalculator Date: Sun, 6 Nov 2022 19:18:27 -0800 Subject: [PATCH] only apply hover effect to link --- CALCKEY.md | 3 ++- packages/client/src/style.scss | 36 +++++++++++++++++----------------- 2 files changed, 20 insertions(+), 19 deletions(-) diff --git a/CALCKEY.md b/CALCKEY.md index 7f74e77e09..400cafd3ce 100644 --- a/CALCKEY.md +++ b/CALCKEY.md @@ -48,7 +48,6 @@ - Star as default reaction - Like/star button - Rosé Pine by default (+ non-themable elements made Rosé Pine) -- Phosphor icons instead of FontAwesome - Better sidebar/navbar - Add back groups - Integrate groups UI into chats UI @@ -81,6 +80,8 @@ - Update notifier - Allow admins to set logo URL via admin settings - Allow importing follows from Pixelfed +- Phosphor icons instead of FontAwesome +- Cool link hover effect - Obliteration of Ai-chan - [Make showing ads optional](https://github.com/misskey-dev/misskey/pull/8996) - [Tapping avatar in mobile opens account modal](https://github.com/misskey-dev/misskey/pull/9056) diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss index 37867d2c31..03e1d15ecc 100644 --- a/packages/client/src/style.scss +++ b/packages/client/src/style.scss @@ -96,24 +96,6 @@ a { color: inherit; tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; - - &::after { - content: ''; - position: absolute; - width: 100%; - transform: scaleX(0); - height: 2px; - bottom: 0; - left: 0; - background-color: var(--link); - transform-origin: bottom right; - transition: transform 0.25s ease-out; - } - - &:hover::after { - transform: scaleX(1); - transform-origin: bottom left; - } } i { @@ -500,6 +482,24 @@ hr { ._link { color: var(--link); + + &::after { + content: ''; + position: absolute; + width: 100%; + transform: scaleX(0); + height: 2px; + bottom: 0; + left: 0; + background-color: var(--link); + transform-origin: bottom right; + transition: transform 0.25s ease-out; +} + +&:hover::after { + transform: scaleX(1); + transform-origin: bottom left; +} } ._caption {