heartles
/
egirlskey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

🎨

This commit is contained in:
syuilo 2023-03-01 10:56:51 +09:00
parent 1c5291f818
commit 064a6bf065
1 changed files with 32 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/frontend/src/components/MkNote.vue
View File

@ -451,6 +451,7 @@ function showReactions(): void {
top: 12px; top: 12px;
right: 12px; right: 12px;
padding: 0 4px; padding: 0 4px;
margin-bottom: 0 !important;
background: var(--popup); background: var(--popup);
border-radius: 6px; border-radius: 6px;
box-shadow: 0px 4px 32px var(--shadow); box-shadow: 0px 4px 32px var(--shadow);
@ -460,7 +461,7 @@ function showReactions(): void {
font-size: 80%; font-size: 80%;
&:not(:last-child) { &:not(:last-child) {
margin-right: 6px; margin-right: 0;
} }
} }
} }
@ -568,14 +569,15 @@ function showReactions(): void {
} }
.article { .article {
position: relative;
display: flex; display: flex;
padding: 28px 32px 18px; padding: 28px 32px;
} }
.avatar { .avatar {
flex-shrink: 0; flex-shrink: 0;
display: block !important; display: block !important;
margin: 0 14px 8px 0; margin: 0 14px 0 0;
width: 58px; width: 58px;
height: 58px; height: 58px;
position: sticky !important; position: sticky !important;
@ -680,6 +682,10 @@ function showReactions(): void {
font-size: 80%; font-size: 80%;
} }
.footer {
margin-bottom: -14px;
}
.footerButton { .footerButton {
margin: 0; margin: 0;
padding: 8px; padding: 8px;
@ -710,7 +716,7 @@ function showReactions(): void {
} }
.article { .article {
padding: 24px 26px 14px; padding: 24px 26px;
} }
.avatar { .avatar {
@ -729,7 +735,11 @@ function showReactions(): void {
} }
.article { .article {
padding: 20px 22px 12px; padding: 20px 22px;
}
.footer {
margin-bottom: -8px;
} }
} }
@ -748,13 +758,13 @@ function showReactions(): void {
} }
.article { .article {
padding: 14px 16px 9px; padding: 14px 16px;
} }
} }
@container (max-width: 450px) { @container (max-width: 450px) {
.avatar { .avatar {
margin: 0 10px 8px 0; margin: 0 10px 0 0;
width: 46px; width: 46px;
height: 46px; height: 46px;
top: calc(14px + var(--stickyTop, 0px)); top: calc(14px + var(--stickyTop, 0px));
@ -762,19 +772,23 @@ function showReactions(): void {
} }
@container (max-width: 400px) { @container (max-width: 400px) {
.root:not(.showActionsOnlyHover) {
.footerButton { .footerButton {
&:not(:last-child) { &:not(:last-child) {
margin-right: 18px; margin-right: 18px;
} }
} }
}
} }
@container (max-width: 350px) { @container (max-width: 350px) {
.root:not(.showActionsOnlyHover) {
.footerButton { .footerButton {
&:not(:last-child) { &:not(:last-child) {
margin-right: 12px; margin-right: 12px;
} }
} }
}
} }
@container (max-width: 300px) { @container (max-width: 300px) {
@ -783,11 +797,13 @@ function showReactions(): void {
height: 44px; height: 44px;
} }
.root:not(.showActionsOnlyHover) {
.footerButton { .footerButton {
&:not(:last-child) { &:not(:last-child) {
margin-right: 8px; margin-right: 8px;
} }
} }
}
} }
@container (max-width: 250px) { @container (max-width: 250px) {