Jason Zimdars
ca1b8e03e7
- Nicer responsive type for comments threads - Improved responsive layout for bubbles index lists, too - Polished hover state on bubbles list
66 lines
1.3 KiB
CSS
66 lines
1.3 KiB
CSS
.comments {
|
|
--avatar-size: 2.33em;
|
|
--comment-padding-block: 1.2em;
|
|
--comment-padding-inline: 1.5em;
|
|
|
|
font-size: clamp(1rem, 1.6cqi, 2rem);
|
|
max-inline-size: 70ch;
|
|
row-gap: var(--comment-padding-block);
|
|
}
|
|
|
|
.comment__avatar {
|
|
margin-block-start: calc(var(--comment-padding-block) * 0.5);
|
|
margin-inline: auto calc(var(--comment-padding-inline) * -0.75);
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
.comment--mine & {
|
|
margin-inline: calc(var(--comment-padding-inline) * -0.75) auto;
|
|
}
|
|
}
|
|
|
|
.comment__body {
|
|
p {
|
|
&:first-child {
|
|
margin-block-start: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-block-end: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.comment__content {
|
|
margin-inline: 0 var(--avatar-size);
|
|
padding: var(--comment-padding-block) var(--comment-padding-inline);
|
|
|
|
.comment--mine & {
|
|
background-color: var(--color-selected);
|
|
margin-inline: var(--avatar-size) 0;
|
|
}
|
|
|
|
.comment:has(+ .comment--upvotes) & {
|
|
padding-block-end: calc(var(--comment-padding-block) * 1.5);
|
|
}
|
|
}
|
|
|
|
.comment--mine {
|
|
flex-direction: row-reverse;
|
|
|
|
.comment__author {
|
|
flex-direction: row-reverse;
|
|
}
|
|
}
|
|
|
|
.comment__timestamp {
|
|
color: var(--color-ink);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.comment--upvotes {
|
|
font-weight: 600;
|
|
margin-block: calc(var(--comment-padding-block) * -1);
|
|
padding: calc(var(--comment-padding-block) * 0.5) var(--comment-padding-inline);
|
|
}
|