natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

line alignment fixes

This commit is contained in:
Freeplay 2023-02-23 18:22:51 -05:00
parent eb30b8460d
commit 42532ce168
1 changed files with 29 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
packages/client/src/components/MkNoteSub.vue
View File

@ -66,7 +66,6 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
.wrpstxzv { .wrpstxzv {
padding: 16px 32px; padding: 16px 32px;
content-visibility: auto; content-visibility: auto;
&.children { &.children {
padding: 10px 0 0 var(--indent); padding: 10px 0 0 var(--indent);
padding-left: var(--indent) !important; padding-left: var(--indent) !important;
@ -141,6 +140,9 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
margin-top: 10px; margin-top: 10px;
&.single { &.single {
padding: 0 !important; padding: 0 !important;
> .line {
display: none;
}
} }
} }
@ -160,7 +162,7 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
// Reply Lines // Reply Lines
&.reply, &.reply-to, &.reply-to-more { &.reply, &.reply-to, &.reply-to-more {
--indent: var(--avatarSize); --indent: calc(var(--avatarSize) - 5px);
> .main { > .main {
> .avatar-container { > .avatar-container {
display: flex; display: flex;
@ -176,20 +178,30 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
} }
} }
.line { .line {
position: relative;
width: var(--avatarSize); width: var(--avatarSize);
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
margin-bottom: -10px;
&::before { &::before {
content: ""; content: "";
display: block; position: absolute;
border-left: 2px solid var(--accent); border-left: 2px solid var(--divider);
margin-inline: auto; margin-left: calc((var(--avatarSize) / 2) - 1px);
width: calc(var(--indent) / 2);
inset-block: 0;
min-height: 8px;
} }
} }
} }
&.reply-to, &.reply-to-more {
> .main > .avatar-container > .line {
margin-bottom: 0px !important;
}
}
&.single, &.singleStart { &.single, &.singleStart {
> .main > .avatar-container > .line::before { > .main > .avatar-container > .line {
margin-bottom: -10px; margin-bottom: -10px !important;
} }
} }
.reply.children:not(:last-child) { // Line that goes through multiple replies .reply.children:not(:last-child) { // Line that goes through multiple replies
@ -199,9 +211,6 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
top: 0; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
&::before {
margin-top: -10px;
}
} }
} }
// Reply line connectors // Reply line connectors
@ -210,18 +219,23 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
> .line { > .line {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0;
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
border-left: 2px solid var(--accent); border-left: 2px solid var(--divider);
border-bottom: 2px solid var(--accent); border-bottom: 2px solid var(--divider);
margin-left: calc((var(--avatarSize) / 2) - 1px); margin-left: calc((var(--avatarSize) / 2) - 1px);
margin-top: -20px;
width: calc(var(--indent) / 2); width: calc(var(--indent) / 2);
height: calc((var(--avatarSize) / 2) + 20px); height: calc((var(--avatarSize) / 2));
border-bottom-left-radius: calc(var(--indent) / 3); border-bottom-left-radius: calc(var(--indent) / 2);
top: 8px;
} }
} }
&:not(:last-child) > .line::after {
mask: linear-gradient(to right, transparent 2px, black 2px);
-webkit-mask: linear-gradient(to right, transparent 2px, black 2px);
}
} }
&.max-width_450px { &.max-width_450px {