mirror of
https://github.com/discourse/discourse.git
synced 2024-12-02 18:43:44 +08:00
d5024d96f1
This commit implements a requested feature: resizing the chat drawer. The user can now adjust the drawer size to their liking, and the new size will be stored in localstorage so that it persists across refreshes. In addition to this feature, a bug was fixed where the --composer-right margin was not being correctly computed. This bug could have resulted in incorrectly positioned drawer when the composer was expanded. Note that it includes support for RTL.
136 lines
2.7 KiB
SCSS
136 lines
2.7 KiB
SCSS
.user-card,
|
|
.group-card {
|
|
z-index: z("usercard") + 1; // bump up user card
|
|
}
|
|
|
|
.full-page-chat {
|
|
&.teams-sidebar-on {
|
|
grid-template-columns: 1fr;
|
|
|
|
.chat-live-pane {
|
|
border-radius: var(--full-page-border-radius);
|
|
}
|
|
}
|
|
|
|
.chat-full-page-header {
|
|
padding: 0 1rem;
|
|
height: var(--chat-header-offset);
|
|
min-height: var(--chat-header-offset);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.chat-live-pane {
|
|
.chat-messages-container {
|
|
.chat-message {
|
|
&.is-reply {
|
|
grid-template-columns: var(--message-left-width) 1fr;
|
|
}
|
|
|
|
.chat-user {
|
|
width: var(--message-left-width);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.chat-message:not(.user-info-hidden) {
|
|
padding: 0.65em 1em 0.15em;
|
|
}
|
|
|
|
.chat-message-text {
|
|
img:not(.emoji):not(.avatar) {
|
|
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
border-radius: 5px;
|
|
box-shadow: 0 2px 5px 0 rgba(var(--always-black-rgb), 0.1),
|
|
0 2px 10px 0 rgba(var(--always-black-rgb), 0.1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.chat-message.user-info-hidden {
|
|
padding: 0.15em 1em;
|
|
}
|
|
|
|
// Full Page Styling in Core
|
|
.has-full-page-chat:not(.discourse-sidebar) {
|
|
--max-chat-width: 1200px;
|
|
|
|
#main-outlet {
|
|
max-width: var(--max-chat-width);
|
|
padding: 0;
|
|
}
|
|
|
|
.full-page-chat {
|
|
border-right: 1px solid var(--primary-low);
|
|
border-left: 1px solid var(--primary-low);
|
|
|
|
.chat-live-pane {
|
|
border-radius: unset;
|
|
}
|
|
|
|
.chat-live-pane,
|
|
.chat-messages-scroll,
|
|
.chat-message:not(.highlighted):not(.deleted):not(.chat-message-bookmarked) {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.chat-message:not(.highlighted):not(.deleted):not(.chat-message-bookmarked):hover {
|
|
background-color: var(--primary-very-low);
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: var(--max-chat-width)) {
|
|
#main-outlet {
|
|
max-width: 100%;
|
|
padding: 0;
|
|
}
|
|
|
|
.full-page-chat {
|
|
border: none;
|
|
grid-template-columns: 250px 1fr;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Full page styling with sidebar enabled
|
|
.discourse-sidebar.has-full-page-chat {
|
|
#main-outlet {
|
|
padding: 2em 0 0 0;
|
|
}
|
|
|
|
.full-page-chat.teams-sidebar-on {
|
|
.chat-live-pane {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.chat-live-pane,
|
|
.chat-messages-scroll,
|
|
.chat-message:not(.highlighted):not(.deleted):not(.chat-message-bookmarked) {
|
|
background: transparent;
|
|
}
|
|
|
|
.chat-message {
|
|
padding-left: 1em;
|
|
|
|
&:hover {
|
|
background-color: var(--primary-very-low);
|
|
}
|
|
}
|
|
|
|
.chat-messages-container .chat-message-deleted {
|
|
padding: 0.25em 1em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.chat-form {
|
|
&__description.-autojoin,
|
|
&__description.-channel-wide-mentions {
|
|
max-width: 50%;
|
|
}
|
|
}
|