forked from Mirrors/gomuks
124 lines
2.7 KiB
CSS
124 lines
2.7 KiB
CSS
blockquote.reply-body {
|
|
margin: 0 0 .25rem;
|
|
border-left: 2px solid var(--reply-border-color);
|
|
padding: .25rem .5rem;
|
|
|
|
&.sender-color-null { --reply-border-color: var(--blockquote-border-color); }
|
|
&.sender-color-0 { --reply-border-color: var(--sender-color-0); }
|
|
&.sender-color-1 { --reply-border-color: var(--sender-color-1); }
|
|
&.sender-color-2 { --reply-border-color: var(--sender-color-2); }
|
|
&.sender-color-3 { --reply-border-color: var(--sender-color-3); }
|
|
&.sender-color-4 { --reply-border-color: var(--sender-color-4); }
|
|
&.sender-color-5 { --reply-border-color: var(--sender-color-5); }
|
|
&.sender-color-6 { --reply-border-color: var(--sender-color-6); }
|
|
&.sender-color-7 { --reply-border-color: var(--sender-color-7); }
|
|
&.sender-color-8 { --reply-border-color: var(--sender-color-8); }
|
|
&.sender-color-9 { --reply-border-color: var(--sender-color-9); }
|
|
|
|
&.small {
|
|
grid-area: reply;
|
|
display: flex;
|
|
gap: .25rem;
|
|
font-size: var(--small-font-size);
|
|
height: calc(var(--small-font-size) * 1.5);
|
|
border-left: none;
|
|
padding: 0;
|
|
|
|
> div.reply-spine {
|
|
margin-top: calc(var(--small-font-size) * 0.75 - 1px);
|
|
margin-left: calc(var(--timeline-avatar-size) / 2 - 1px);
|
|
width: calc(var(--timeline-avatar-size)/2 + var(--timeline-avatar-gap));
|
|
border-left: 2px solid var(--reply-border-color);
|
|
border-top: 2px solid var(--reply-border-color);
|
|
border-top-left-radius: .5rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
> div.message-text {
|
|
-webkit-line-clamp: 1;
|
|
font-size: var(--small-font-size);
|
|
}
|
|
}
|
|
|
|
pre {
|
|
display: inline;
|
|
|
|
&.chroma .line {
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
&.composer {
|
|
margin: .5rem .5rem 0;
|
|
}
|
|
|
|
&:hover, &.composer {
|
|
> div.message-text {
|
|
color: var(--text-color);
|
|
}
|
|
}
|
|
|
|
> div.message-text {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
color: var(--semisecondary-text-color);
|
|
user-select: none;
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-size: 1em;
|
|
}
|
|
|
|
img {
|
|
vertical-align: baseline;
|
|
height: 1em;
|
|
}
|
|
}
|
|
|
|
&.thread > div.reply-sender > span.event-sender::after {
|
|
content: " (thread)";
|
|
font-size: .75rem;
|
|
color: var(--secondary-text-color);
|
|
}
|
|
|
|
&.editing > div.reply-sender > span.event-sender::after {
|
|
content: " (editing message)";
|
|
color: var(--secondary-text-color);
|
|
}
|
|
|
|
> div.reply-sender {
|
|
display: flex;
|
|
align-items: center;
|
|
text-wrap: nowrap;
|
|
|
|
> div.sender-avatar {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
margin-right: .25rem;
|
|
|
|
> img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
> div.buttons {
|
|
margin-left: auto;
|
|
display: flex;
|
|
gap: .25rem;
|
|
|
|
> button {
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: .25rem;
|
|
padding: 0;
|
|
|
|
> svg {
|
|
height: 24px;
|
|
width: 24px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|