Padding & alignment improvements

This commit is contained in:
Freeplay 2023-01-28 16:10:45 -05:00
parent 41bfd0cc8c
commit fb33687157
3 changed files with 19 additions and 14 deletions

View file

@ -351,7 +351,7 @@ function readPromo() {
.line::before {
content: "";
display: block;
margin-bottom: -15px;
margin-bottom: -10px;
width: 2px;
background-color: var(--accentDarken);
margin-inline: auto;
@ -442,7 +442,7 @@ function readPromo() {
}
& + .article {
padding-top: 10px;
padding-top: 10px !important;
}
}

View file

@ -336,7 +336,6 @@ if (appearNote.replyId) {
&:hover > .article > .main > .footer > .button {
opacity: 1;
}
> .reply-to {
margin-bottom: -16px;
}
@ -344,9 +343,6 @@ if (appearNote.replyId) {
> .reply-to-more {
// opacity: 0.7;
cursor: pointer;
&:first-child {
padding-top: 30px;
}
@media (pointer: coarse) {
cursor: default;
@ -562,7 +558,7 @@ if (appearNote.replyId) {
> .reply, .reply-to, .reply-to-more {
transition: background-color 0.25s ease-in-out;
&:hover {
background-color: var(--panelHighlight);
}

View file

@ -89,7 +89,6 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
flex: 1;
min-width: 0;
cursor: pointer;
@media (pointer: coarse) {
cursor: default;
}
@ -131,10 +130,11 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
padding: 10px 0 0 16px;
}
&.reply-to:first-child {
padding-top: 30px;
}
&.reply-to, &.reply-to-more {
padding-bottom: 0;
&:first-child {
padding-top: 30px;
}
.avatar-container {
display: flex;
flex-direction: column;
@ -153,18 +153,27 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
&::before {
content: "";
display: block;
margin-bottom: -30px;
width: 2px;
background-color: var(--accentDarken);
margin-inline: auto;
.note > & {
margin-bottom: -16px;
}
}
}
}
> .main > .body {
padding-bottom: 16px;
}
}
&.max-width_450px {
padding: 14px 16px !important;
margin-bottom: 0 !important;
padding: 14px 16px;
&.reply-to, &.reply-to-more {
padding-top: 14px !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
> .main > .avatar-container {
margin-right: 10px;
}