discourse/plugins/chat/assets/stylesheets/common/base-common.scss
chapoi eb8549e527
UX: Chat footer unread indicator (#27244)
A few follup changes after changing to the chat footer split for drawer:
* Fixing a bug that stretched the unread indicator on mobile
* Minor style changes in hover/focus behaviour for chat drawer
* Repositioning of unread indicator so it has more space at the top of the footer
* Using the `c-unread-indicator` mixin
2024-05-29 17:16:03 +02:00

293 lines
5.3 KiB
SCSS

:root {
--message-left-width: 42px;
--full-page-border-radius: 12px;
--full-page-sidebar-width: 275px;
--channel-list-avatar-size: 30px;
--chat-header-offset: 45px;
--chat-header-expanded-offset: 0px;
}
// Very specific hack to ensure the contextual menu (copy/paste/...) is
// not completely over the textarea, the rules to position this menu are quite obscure
// and under DiscourseHUB the space between the textarea and the keyboard is so small that
// it sometimes prefer to appear on top of the textarea, making any gesture very complicated
html.ios-device.keyboard-visible body #main-outlet .full-page-chat {
padding-bottom: 0.2rem;
}
.uppy-is-drag-over .chat-composer .drop-a-file {
display: flex;
position: absolute;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.75);
z-index: z("header");
&-content {
width: max-content;
display: flex;
flex-direction: column;
align-items: center;
padding: 2em;
background-color: #1d1d1d;
border-radius: 0.25em;
&-images {
.d-icon {
height: 3em;
width: 3em;
color: var(--secondary-or-primary);
&:first-of-type {
transform: rotate(-5deg);
}
&:nth-of-type(2) {
height: 4em;
width: 4em;
}
&:last-of-type {
transform: rotate(5deg);
}
}
}
&-text {
margin: 1.5em 0 0 0;
font-size: var(--font-up-1);
color: var(--secondary-or-primary);
.d-icon-upload {
padding-right: 0.25em;
position: relative;
bottom: 2px;
color: var(--secondary-or-primary);
}
}
}
}
.header-dropdown-toggle.chat-header-icon .icon {
.chat-channel-unread-indicator {
@include chat-unread-indicator;
border: 2px solid var(--header_background);
position: absolute;
top: 0;
right: 2px;
&.-urgent {
display: flex;
align-items: center;
justify-content: center;
width: auto;
height: 1em;
min-width: 0.6em;
padding: 0.21em 0.42em;
top: -1px;
right: 0;
}
}
span.icon {
cursor: auto;
&:hover {
.d-icon {
color: var(--header_primary-low-mid);
}
background: none;
}
}
a.icon {
&.active {
.d-icon-comment {
color: var(--primary-medium);
}
}
&:hover {
.chat-channel-unread-indicator {
border-color: var(--primary-low);
}
}
}
}
.chat-messages-container {
word-wrap: break-word;
white-space: normal;
position: relative;
.chat-message-container {
display: grid;
&.-selectable {
grid-template-columns: 1.5em 1fr;
}
.chat-message-selector {
align-self: center;
justify-self: end;
margin: 0;
}
}
.chat-time {
color: var(--primary-high);
font-size: var(--font-down-2);
vertical-align: bottom;
}
.emoji-picker {
position: fixed;
}
&:hover {
.chat-.chat-message-react-btn {
display: inline-block;
}
}
}
.chat-emoji-avatar {
width: var(--message-left-width);
align-items: center;
img {
display: block;
margin-left: auto;
margin-right: auto;
}
}
.avatar {
box-sizing: border-box;
.is-online & {
padding: 2px;
box-shadow: inset 0px 0px 0px 1px var(--success),
inset 0px 0px 0px 2px var(--secondary);
}
}
body.has-sidebar-page.has-full-page-chat #main-outlet-wrapper {
gap: 0;
}
body.has-full-page-chat {
.alert-error,
.alert-info,
.alert-success,
.alert-warning {
margin: 0;
border-bottom: 1px solid var(--primary-low);
}
}
.full-page-chat {
display: grid;
grid-template-columns: var(--full-page-sidebar-width) 1fr;
background: var(--d-content-background);
.c-navbar-container {
position: sticky;
top: var(--header-offset);
}
.chat-messages-scroller {
box-sizing: border-box;
height: 100%;
}
}
.user-preferences .chat-setting .controls {
margin-bottom: 0;
}
.chat-message-collapser,
.chat-message-text {
> p {
margin: 0.5em 0 0.5em;
}
> p:first-of-type {
margin-top: 0.1em;
}
> p:last-of-type {
margin-bottom: 0.1em;
}
}
.reviewable-chat-message {
.chat-channel-title {
max-width: 100%;
}
}
.chat-channel-dm-title {
display: flex;
align-items: center;
justify-content: space-between;
.channel-name {
font-weight: 700;
font-size: var(--font-up-1);
line-height: var(--font-up-1);
}
}
.chat-channel-status {
background: var(--secondary);
padding: 0.5rem 1rem;
border-bottom: 1px solid var(--primary-low);
}
html.has-full-page-chat {
height: 100%;
width: 100%;
&.footer-nav-ipad {
height: calc(100% - var(--footer-nav-height, 0px));
}
body {
height: 100%;
width: 100%;
#main-outlet {
display: flex;
flex-direction: column;
.full-page-chat {
height: 100%;
min-height: 0;
}
.main-chat-outlet {
min-height: 0;
max-width: 100vw;
}
}
}
&.mobile-view {
#main-outlet-wrapper {
padding: 0;
}
}
// these need to apply to desktop too, because iPads
&.discourse-touch {
.full-page-chat,
.chat-channel,
#main-outlet {
// allows containers to shrink to fit
min-height: 0;
}
}
[data-popper-reference-hidden] {
visibility: hidden;
}
}