discourse/plugins/chat/assets/stylesheets/mobile/base-mobile.scss
David Battersby 67d736a045
FEATURE: chat header redesign on mobile (#24938)
This change simplifies the layout of our header when chat is open on mobile. The search icon and hamburger menu icons are also hidden and the Discourse logo is replaced by a ← Forum link to make it easier to continue where you left off within the forum (prior to this update the user could only go back to the forum index page).
2023-12-26 17:36:26 +08:00

87 lines
1.3 KiB
SCSS

:root {
--channel-list-avatar-size: 38px;
}
.chat-message-container:not(.-user-info-hidden) {
.chat-message {
padding-top: 0.75em;
}
}
html.has-full-page-chat {
.footer-nav {
display: none !important;
}
body #main-outlet {
padding: 0;
.main-chat-outlet {
.chat-channel {
min-width: 0;
}
&.has-side-panel-expanded {
grid-template-columns: 1fr;
grid-template-areas: "threads";
.c-routes-channel {
display: none;
}
}
}
}
}
.full-page-chat {
grid-template-columns: 100%;
width: 100%;
.btn:active,
.btn:hover {
background: var(--secondary-very-high);
.d-icon {
color: var(--primary-medium);
}
}
.chat-channel {
border-radius: 0;
padding: 0;
}
.chat-drawer {
width: 100%;
}
}
.sidebar-container .channels-list .chat-channel-divider {
padding-left: 1em;
}
.sidebar-container .channels-list .chat-channel-row {
padding: 0.5em;
}
.create-channel-modal {
.modal-inner-container {
width: 95%;
}
}
.chat-message-separator {
margin-left: 0;
}
.header-dropdown-toggle.chat-header-icon {
.icon {
&.active .d-icon {
color: var(--primary-medium);
}
.chat-channel-unread-indicator {
border-color: var(--primary-very-low);
}
}
}