From 1ca0cd727e3fc14e88f4cc2c60472a2616bf9efa Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 3 Jan 2024 14:42:51 +0100 Subject: Hover effect for conversation notes (like Firefish) --- packages/frontend/src/components/SkNoteSub.vue | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) (limited to 'packages/frontend/src/components/SkNoteSub.vue') diff --git a/packages/frontend/src/components/SkNoteSub.vue b/packages/frontend/src/components/SkNoteSub.vue index 79e171f34c..c0c50670d1 100644 --- a/packages/frontend/src/components/SkNoteSub.vue +++ b/packages/frontend/src/components/SkNoteSub.vue @@ -461,7 +461,26 @@ if (props.detail) { } .main { - display: flex; + position: relative; + display: flex; + + &::after { + content: ""; + position: absolute; + top: -12px; + right: -12px; + left: -12px; + bottom: -12px; + background: var(--panelHighlight); + border-radius: var(--radius); + opacity: 0; + transition: opacity .2s, background .2s; + z-index: -1; + } + + &:hover::after { + opacity: 1; + } } .colorBar { -- cgit v1.2.3-freya