110 lines
1.8 KiB
CSS
110 lines
1.8 KiB
CSS
.dm-page {
|
|
--full-height: calc(100vh - 42px - var(--header-padding-tb) - var(--header-padding-tb) - 16px);
|
|
display: grid;
|
|
grid-template-columns: 350px auto;
|
|
height: var(--full-height);
|
|
/* 100vh - header - padding */
|
|
overflow: hidden;
|
|
padding: 4px;
|
|
}
|
|
|
|
.dm-page > div:nth-child(1)::-webkit-scrollbar-track {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* These should match what is in code too */
|
|
@media (max-width: 768px) {
|
|
.dm-page {
|
|
grid-template-columns: 100vw;
|
|
}
|
|
|
|
.dm-page > div:nth-child(1) {
|
|
margin: 0 !important;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1500px) {
|
|
.dm-page {
|
|
grid-template-columns: 400px auto 400px;
|
|
}
|
|
}
|
|
|
|
/* User list */
|
|
.dm-page > div:nth-child(1) {
|
|
overflow-y: auto;
|
|
padding: 0 5px;
|
|
}
|
|
|
|
/* Chat window */
|
|
.dm-page > div:nth-child(2) {
|
|
padding: 0 12px;
|
|
margin: 0 4px;
|
|
height: var(--full-height);
|
|
background-color: var(--gray-superdark);
|
|
border-radius: 16px;
|
|
}
|
|
|
|
/* Profile pannel */
|
|
.dm-page > div:nth-child(3) {
|
|
margin: 16px;
|
|
}
|
|
|
|
.dm-page > div:nth-child(3) .avatar {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.dm-page > div:nth-child(3) .card {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dm-page .new-chat {
|
|
min-width: 100px;
|
|
}
|
|
|
|
.dm-page .chat-list > div.active {
|
|
background-color: var(--gray-superdark);
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.new-chat-modal .user-list {
|
|
max-height: 50vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.new-chat-modal .user-list > div {
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* user in list selected */
|
|
.new-chat-modal .user-list > div.active {
|
|
background-color: var(--gray-dark);
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.new-chat-modal .modal-body {
|
|
padding: 24px 32px;
|
|
}
|
|
|
|
.new-chat-modal h2,
|
|
.new-chat-modal h3,
|
|
.new-chat-modal p {
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
|
|
.new-chat-modal h2 {
|
|
font-size: 21px;
|
|
}
|
|
|
|
.new-chat-modal h3 {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.new-chat-modal p {
|
|
font-size: 11px;
|
|
letter-spacing: 1.21px;
|
|
text-transform: uppercase;
|
|
}
|