add reply connectors, a
This commit is contained in:
parent
66c3ac0654
commit
e32bab700d
2 changed files with 37 additions and 12 deletions
|
@ -126,7 +126,6 @@ function blur() {
|
|||
.footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
// margin-top: .4em;
|
||||
pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post
|
||||
|
||||
> .button {
|
||||
|
|
|
@ -65,10 +65,11 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
|
|||
<style lang="scss" scoped>
|
||||
.wrpstxzv {
|
||||
padding: 16px 32px;
|
||||
|
||||
--divider: rgba(255,255,255,0.5); // for now
|
||||
|
||||
&.children {
|
||||
padding: 10px 0 0 var(--avatarSize);
|
||||
padding: 10px 0 0 var(--indent);
|
||||
padding-left: var(--indent) !important;
|
||||
font-size: 1em;
|
||||
cursor: auto;
|
||||
|
||||
|
@ -127,8 +128,10 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
|
|||
}
|
||||
}
|
||||
|
||||
&.reply :deep(.footer) {
|
||||
font-size: .9em;
|
||||
}
|
||||
> .reply, > .more {
|
||||
// border-left: solid 0.5px var(--divider);
|
||||
margin-top: 10px;
|
||||
&.single {
|
||||
padding: 0 !important;
|
||||
|
@ -144,13 +147,14 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
|
|||
&:first-child {
|
||||
padding-top: 30px;
|
||||
}
|
||||
> .main > .body {
|
||||
padding-bottom: 16px;
|
||||
.line::before {
|
||||
margin-bottom: -16px;
|
||||
}
|
||||
}
|
||||
|
||||
// Reply Lines
|
||||
&.reply, &.reply-to, &.reply-to-more {
|
||||
--indent: var(--avatarSize);
|
||||
> .main {
|
||||
> .avatar-container {
|
||||
display: flex;
|
||||
|
@ -172,16 +176,16 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
|
|||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 2px;
|
||||
background-color: var(--divider);
|
||||
background-color: white; // FOr now
|
||||
border-left: 2px solid var(--divider);
|
||||
margin-inline: auto;
|
||||
.note > & {
|
||||
margin-bottom: -16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.single, &.singleStart {
|
||||
> .main > .avatar-container > .line::before {
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
}
|
||||
.reply:last-child, &.reply:not(.children) { // Hide line in last reply of thread
|
||||
> .main:last-child > .avatar-container > .line {
|
||||
display: none;
|
||||
|
@ -194,11 +198,33 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
|
|||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
&::before {
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
&:not(.single):not(.singleStart) > .main > .avatar-container > .line {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
// Reply line connectors
|
||||
.reply.children:not(.single) {
|
||||
position: relative;
|
||||
> .line {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-left: 2px solid var(--divider);
|
||||
border-bottom: 2px solid var(--divider);
|
||||
margin-left: calc(var(--avatarSize) / 2 - 1px);
|
||||
margin-top: -20px;
|
||||
width: calc(var(--indent) / 3);
|
||||
height: calc((var(--avatarSize) / 2) + 20px);
|
||||
border-bottom-left-radius: calc(var(--indent) / 3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.max-width_450px {
|
||||
padding: 14px 16px;
|
||||
|
|
Loading…
Reference in a new issue