mirror of
https://github.com/thelounge/thelounge.git
synced 2024-06-04 14:52:19 +02:00
156 lines
3.1 KiB
CSS
156 lines
3.1 KiB
CSS
|
|
#chat .time,
|
|
#chat .from,
|
|
#chat .content {
|
|
padding: 3px 0;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
#chat .msg {
|
|
word-wrap: break-word;
|
|
word-break: break-word; /* Webkit-specific */
|
|
display: flex;
|
|
align-items: flex-start;
|
|
position: relative;
|
|
}
|
|
|
|
#chat .user {
|
|
color: #50a656;
|
|
}
|
|
|
|
#chat .self .content {
|
|
color: var(--body-color-muted);
|
|
}
|
|
|
|
#chat .time {
|
|
color: var(--body-color-muted);
|
|
padding-left: 10px;
|
|
width: 55px;
|
|
font-variant-numeric: tabular-nums;
|
|
box-sizing: content-box; /* highlights have a border-left */
|
|
}
|
|
|
|
#chat .from {
|
|
padding-right: 10px;
|
|
text-align: right;
|
|
width: 134px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
position: relative;
|
|
}
|
|
|
|
#chat .content {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
padding-left: 10px;
|
|
padding-right: 6px;
|
|
border-left: 1px solid #f6f6f6;
|
|
overflow: hidden; /* Prevents Zalgo text to expand beyond messages */
|
|
text-align: left; /* so RTL text will still be aligned left, not right */
|
|
}
|
|
|
|
#chat .msg[data-type="condensed"] .content,
|
|
#chat .msg[data-type="away"] .content,
|
|
#chat .msg[data-type="back"] .content,
|
|
#chat .msg[data-type="join"] .content,
|
|
#chat .msg[data-type="kick"] .content,
|
|
#chat .msg[data-type="mode"] .content,
|
|
#chat .msg[data-type="nick"] .content,
|
|
#chat .msg[data-type="part"] .content,
|
|
#chat .msg[data-type="quit"] .content,
|
|
#chat .msg[data-type="topic"] .content,
|
|
#chat .msg[data-type="topic_set_by"] .content {
|
|
color: var(--body-color-muted);
|
|
}
|
|
|
|
#chat .msg[data-type="action"] .from,
|
|
#chat .msg[data-type="action"] .content,
|
|
#chat .msg[data-type="action"] .user {
|
|
color: #f39c12;
|
|
}
|
|
|
|
#chat .msg[data-type="notice"] .time,
|
|
#chat .msg[data-type="wallops"] .time,
|
|
#chat .msg[data-type="notice"] .content,
|
|
#chat .msg[data-type="wallops"] .content,
|
|
#chat .msg[data-type="notice"] .user,
|
|
#chat .msg[data-type="wallops"] .user {
|
|
color: #0074d9;
|
|
}
|
|
|
|
#chat .msg[data-type="monospace_block"] .text {
|
|
background: #f6f6f6;
|
|
display: inline-block;
|
|
border-radius: 4px;
|
|
padding: 6px;
|
|
}
|
|
|
|
#chat .msg[data-type="notice"] .from .user::before {
|
|
content: "Notice: ";
|
|
}
|
|
|
|
#chat .msg[data-type="wallops"] .from .user::before {
|
|
content: "Wallops: ";
|
|
}
|
|
|
|
#chat .msg[data-type="error"],
|
|
#chat .msg[data-type="error"] .from {
|
|
color: #e74c3c;
|
|
}
|
|
|
|
|
|
#chat .chat-view[data-type="channel"] .msg.highlight .time {
|
|
padding-left: 5px;
|
|
color: #696969;
|
|
}
|
|
|
|
#chat .chat-view[data-type="channel"] .msg.highlight .content {
|
|
border-left: 1px solid var(--highlight-bg-color);
|
|
}
|
|
|
|
#chat .chat-view:not([data-type="special"]) .messages {
|
|
margin-top: auto;
|
|
}
|
|
|
|
#chat .msg[data-type="unhandled"] .from {
|
|
color: var(--body-color-muted);
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
/* Fade out for long usernames */
|
|
#chat .from {
|
|
padding-left: 10px;
|
|
mask-image: var(--fade-long-text);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 479px) {
|
|
#chat .msg {
|
|
display: block;
|
|
padding: 2px 10px;
|
|
}
|
|
|
|
#chat .time,
|
|
#chat .from,
|
|
#chat .content {
|
|
border: 0;
|
|
display: inline;
|
|
padding: 0;
|
|
}
|
|
|
|
#chat .from::after {
|
|
/* Add a space because mobile view changes to block display without paddings */
|
|
content: " ";
|
|
white-space: pre;
|
|
}
|
|
|
|
#chat .chat-view[data-type="channel"] .msg.highlight {
|
|
padding-left: 5px;
|
|
}
|
|
|
|
#chat .chat-view[data-type="channel"] .msg.highlight .time {
|
|
padding-left: 0;
|
|
}
|
|
|
|
}
|