From 064a6bf06526b2fbf641d10d685f5828527ee4af Mon Sep 17 00:00:00 2001 From: syuilo Date: Wed, 1 Mar 2023 10:56:51 +0900 Subject: [PATCH] :art: --- packages/frontend/src/components/MkNote.vue | 48 ++++++++++++++------- 1 file changed, 32 insertions(+), 16 deletions(-) diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index a3237c5e93..1e78c69601 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -451,6 +451,7 @@ function showReactions(): void { top: 12px; right: 12px; padding: 0 4px; + margin-bottom: 0 !important; background: var(--popup); border-radius: 6px; box-shadow: 0px 4px 32px var(--shadow); @@ -460,7 +461,7 @@ function showReactions(): void { font-size: 80%; &:not(:last-child) { - margin-right: 6px; + margin-right: 0; } } } @@ -568,14 +569,15 @@ function showReactions(): void { } .article { + position: relative; display: flex; - padding: 28px 32px 18px; + padding: 28px 32px; } .avatar { flex-shrink: 0; display: block !important; - margin: 0 14px 8px 0; + margin: 0 14px 0 0; width: 58px; height: 58px; position: sticky !important; @@ -680,6 +682,10 @@ function showReactions(): void { font-size: 80%; } +.footer { + margin-bottom: -14px; +} + .footerButton { margin: 0; padding: 8px; @@ -710,7 +716,7 @@ function showReactions(): void { } .article { - padding: 24px 26px 14px; + padding: 24px 26px; } .avatar { @@ -729,7 +735,11 @@ function showReactions(): void { } .article { - padding: 20px 22px 12px; + padding: 20px 22px; + } + + .footer { + margin-bottom: -8px; } } @@ -748,13 +758,13 @@ function showReactions(): void { } .article { - padding: 14px 16px 9px; + padding: 14px 16px; } } @container (max-width: 450px) { .avatar { - margin: 0 10px 8px 0; + margin: 0 10px 0 0; width: 46px; height: 46px; top: calc(14px + var(--stickyTop, 0px)); @@ -762,17 +772,21 @@ function showReactions(): void { } @container (max-width: 400px) { - .footerButton { - &:not(:last-child) { - margin-right: 18px; + .root:not(.showActionsOnlyHover) { + .footerButton { + &:not(:last-child) { + margin-right: 18px; + } } } } @container (max-width: 350px) { - .footerButton { - &:not(:last-child) { - margin-right: 12px; + .root:not(.showActionsOnlyHover) { + .footerButton { + &:not(:last-child) { + margin-right: 12px; + } } } } @@ -783,9 +797,11 @@ function showReactions(): void { height: 44px; } - .footerButton { - &:not(:last-child) { - margin-right: 8px; + .root:not(.showActionsOnlyHover) { + .footerButton { + &:not(:last-child) { + margin-right: 8px; + } } } }