discourse/plugins/chat/assets/stylesheets/common/chat-notices.scss
chapoi 7b3f9dc86b
UX: different way of centering chat notice to accommodate longer texts (#22779)
* UX: different way of centering chat notice to accommodate longer

* linting

* UX: keep close button in top right corner
2023-07-27 15:53:43 +02:00

50 lines
878 B
SCSS

.chat-notices {
display: flex;
flex-direction: column;
gap: 0.5em;
position: absolute;
top: 0;
z-index: 10;
width: 100%;
.full-page-chat & {
padding-inline: 1rem;
box-sizing: border-box;
}
&__notice,
.chat-retention-reminder {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--tertiary-low);
padding: 0.5em 0 0.5em 1em;
color: var(--primary);
padding: 0.5em 0 0.5em 1em;
min-width: 280px;
margin-left: auto;
margin-right: auto;
}
.dismiss-btn {
margin: 0 0.25em;
color: var(--primary-medium);
align-self: flex-start;
&:hover,
&:focus {
background-color: transparent;
.d-icon {
color: var(--primary);
}
}
.d-icon {
color: var(--primary-medium);
}
}
}
.full-page-chat .chat-notices {
top: 4rem;
}