gomuks/web/src/ui/timeline/TimelineEvent.css
2024-10-12 00:29:40 +03:00

85 lines
1.1 KiB
CSS

div.timeline-event {
width: 100%;
max-width: 100%;
overflow: hidden;
display: grid;
margin-top: .25rem;
grid-template:
"avatar gap sender" auto
"avatar gap content" auto
/ 40px .25rem 1fr;
> div.sender-avatar {
grid-area: avatar;
width: 40px;
height: 40px;
margin-top: 2px;
> img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
}
> div.event-sender-and-time {
grid-area: sender;
display: flex;
align-items: center;
gap: .5rem;
span.event-sender {
font-weight: bold;
}
span.event-time {
font-size: .8rem;
}
}
> div.event-content {
grid-area: content;
overflow: hidden;
}
}
div.html-body {
overflow: hidden;
img[data-mx-emoticon] {
vertical-align: middle;
}
blockquote {
border-left: 2px solid #ccc;
padding-left: .5rem;
}
pre {
width: 100%;
max-height: max(50vh, 400px);
overflow: auto;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 .5rem;
}
p, ul, ol, dl, table, pre, blockquote {
&:not(:last-child) {
margin: 0 0 .25rem;
}
&:last-child {
margin: 0;
}
}
}
div.media-container {
> img {
max-width: 100%;
max-height: 100%;
}
}