thelounge/client/css/chat-and-search.css
2022-02-23 18:13:28 -08:00

100 lines
1.5 KiB
CSS

/*
* The search results page is currently a basic copy of the chat page,
* so certain styles are here instead of in each component.
*/
#chat {
overflow: hidden;
flex: 1 0 auto;
position: relative;
}
#chat .chat-view {
display: flex;
flex-direction: column;
}
#chat .show-more {
padding: 10px;
padding-top: 15px;
padding-bottom: 0;
width: 100%;
}
#chat .show-more .btn {
width: 100%;
margin: 0;
}
#chat .messages {
padding: 10px 0;
touch-action: pan-y;
}
.header .topic {
color: var(--body-color-muted);
margin-left: 8px;
word-break: break-all;
flex-grow: 1;
overflow: hidden;
font-size: 14px;
flex-shrink: 99999999;
min-width: 25px;
mask-image: var(--fade-long-text);
}
#chat .header {
border-bottom: 1px solid #e7e7e7;
}
.header .title {
font-size: 15px;
padding-left: 6px;
flex-shrink: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#chat .chat-content {
display: flex;
flex-direction: row-reverse;
flex-grow: 1;
overflow: hidden;
position: relative;
}
#chat .chat {
overflow: auto;
overflow-x: hidden;
display: flex;
flex-grow: 1;
flex-direction: column;
scrollbar-width: thin;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
outline: none;
}
#chat.time-12h .time,
#chat.time-seconds .time {
width: 75px;
}
#chat.time-seconds.time-12h .time {
width: 90px;
}
@media (max-width: 479px) {
#chat .messages {
display: block;
padding: 5px 0;
}
}
@media (max-width: 768px) {
#chat .header .title {
padding-left: 6px;
}
}