Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

🎨

Browse source
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;
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,19 +772,23 @@ function showReactions(): void {
}
@container (max-width: 400px) {
.root:not(.showActionsOnlyHover) {
.footerButton {
&:not(:last-child) {
margin-right: 18px;
}
}
}
}
@container (max-width: 350px) {
.root:not(.showActionsOnlyHover) {
.footerButton {
&:not(:last-child) {
margin-right: 12px;
}
}
}
}
@container (max-width: 300px) {
@ -783,11 +797,13 @@ function showReactions(): void {
height: 44px;
}
.root:not(.showActionsOnlyHover) {
.footerButton {
&:not(:last-child) {
margin-right: 8px;
}
}
}
}
@container (max-width: 250px) {