mirror of
https://github.com/discourse/discourse.git
synced 2025-05-26 11:42:14 +08:00
DEV: Introduce stylelint (#29852)
Stylelint is a css linter: https://stylelint.io/ As part of this change we have added two javascript scripts: ``` pnpm lint:css pnpm lint:css:fix ``` Look at `.vscode/settings.json.sample` and `.vscode/extensions.json` for configuration in VSCode. --------- Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
This commit is contained in:
David Taylor
@ -27,6 +27,7 @@ html.ios-device.keyboard-visible body #main-outlet .full-page-chat {
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
z-index: z("header");
|
||||
pointer-events: none;
|
||||
|
||||
&-content {
|
||||
width: max-content;
|
||||
display: flex;
|
||||
@ -35,27 +36,33 @@ html.ios-device.keyboard-visible body #main-outlet .full-page-chat {
|
||||
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;
|
||||
@ -94,7 +101,6 @@ html.ios-device.keyboard-visible body #main-outlet .full-page-chat {
|
||||
.d-icon {
|
||||
color: var(--header_primary-low-mid);
|
||||
}
|
||||
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
@ -155,8 +161,7 @@ html.ios-device.keyboard-visible body #main-outlet .full-page-chat {
|
||||
|
||||
.is-online & {
|
||||
padding: 2px;
|
||||
box-shadow: inset 0px 0px 0px 1px var(--success),
|
||||
inset 0px 0px 0px 2px var(--secondary);
|
||||
box-shadow: inset 0 0 0 1px var(--success), inset 0 0 0 2px var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -277,6 +282,7 @@ html.has-full-page-chat {
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
[data-popper-reference-hidden] {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@ -63,7 +63,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
&:before {
|
||||
|
||||
&::before {
|
||||
content: none; //there is a strange thing applied on nav-pills and this resets it
|
||||
}
|
||||
}
|
||||
|
||||
@ -31,9 +31,11 @@
|
||||
&__muted {
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
&__read-restricted {
|
||||
font-size: var(--font-down-2-rem);
|
||||
}
|
||||
|
||||
&__muted {
|
||||
font-size: var(--font-down-1-rem);
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
.chat-channel-icon {
|
||||
flex-shrink: 0;
|
||||
|
||||
&.--users-count {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
overflow: hidden;
|
||||
grid-area: main;
|
||||
min-width: 250px;
|
||||
@include chat-height(var(--chat-header-offset, 0px));
|
||||
@include chat-height(var(--chat-header-offset, 0));
|
||||
|
||||
.join-channel-btn.in-float {
|
||||
position: absolute;
|
||||
|
||||
@ -44,9 +44,11 @@
|
||||
0% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
@ -83,6 +85,7 @@
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.d-icon {
|
||||
.is-focused & {
|
||||
color: var(--tertiary);
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
|
||||
.d-icon {
|
||||
padding: 5px;
|
||||
|
||||
background: var(--primary-low);
|
||||
border-radius: 100%;
|
||||
}
|
||||
@ -14,7 +13,6 @@
|
||||
.d-icon {
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
background: none !important;
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
@ -91,7 +91,7 @@
|
||||
margin: 5px 0;
|
||||
text-overflow: ellipsis;
|
||||
cursor: inherit;
|
||||
@include chat-scrollbar();
|
||||
@include chat-scrollbar;
|
||||
white-space: pre-wrap !important;
|
||||
min-width: 20px;
|
||||
|
||||
|
||||
@ -66,7 +66,7 @@ html.rtl {
|
||||
border-bottom: 0;
|
||||
border-top-left-radius: var(--d-border-radius-large);
|
||||
border-top-right-radius: var(--d-border-radius-large);
|
||||
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.125);
|
||||
box-shadow: 0 0 4px rgba(0, 0, 0, 0.125);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -94,7 +94,7 @@ html.rtl {
|
||||
}
|
||||
|
||||
.chat-drawer-content {
|
||||
@include chat-scrollbar();
|
||||
@include chat-scrollbar;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
|
||||
@ -35,6 +35,7 @@
|
||||
color: var(--d-nav-color--active);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
.discourse-no-touch &,
|
||||
@ -67,12 +68,14 @@
|
||||
right: unset;
|
||||
left: 50%;
|
||||
margin-left: 0.75rem;
|
||||
|
||||
&.-urgent {
|
||||
height: 1em;
|
||||
width: min-content;
|
||||
min-width: 0.6em;
|
||||
padding: 0.21em 0.42em;
|
||||
}
|
||||
|
||||
&:not(.-urgent) {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
@mixin chat-height($inset: 0px) {
|
||||
@mixin chat-height($inset: 0) {
|
||||
// desktop and mobile
|
||||
// -1px is for the bottom border of the chat navbar
|
||||
$base-height: calc(
|
||||
var(--composer-vh, 1vh) * 100 - var(--main-outlet-offset, 0px) - 1px -
|
||||
$inset
|
||||
);
|
||||
|
||||
height: calc($base-height - var(--composer-height, 0px));
|
||||
|
||||
// mobile with keyboard opened
|
||||
|
||||
@ -8,14 +8,14 @@
|
||||
padding: 0.5rem;
|
||||
transition: transform 0.25s ease, box-shadow 0.25s ease;
|
||||
z-index: z("usercard");
|
||||
box-shadow: 0px 5px 5px -1px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0 5px 5px -1px rgba(0, 0, 0, 0.25);
|
||||
|
||||
.d-icon {
|
||||
color: var(--primary-very-low);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.25);
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
@ -29,12 +29,12 @@
|
||||
.channels-list,
|
||||
.channels-list-container {
|
||||
position: relative;
|
||||
@include chat-scrollbar();
|
||||
@include chat-scrollbar;
|
||||
height: 100%;
|
||||
padding-bottom: 1rem;
|
||||
|
||||
@include breakpoint(mobile-large) {
|
||||
@include chat-scrollbar();
|
||||
@include chat-scrollbar;
|
||||
}
|
||||
|
||||
.open-browse-page-btn,
|
||||
@ -46,7 +46,7 @@
|
||||
color: var(--primary-medium);
|
||||
font-size: var(--font-0-rem);
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
|
||||
@ -74,8 +74,8 @@
|
||||
width: 2.5em;
|
||||
transition: var(--d-button-transition);
|
||||
border-radius: var(--d-border-radius);
|
||||
border-top-left-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--primary-300);
|
||||
@ -128,7 +128,6 @@
|
||||
|
||||
.chat-message-reaction {
|
||||
@include chat-reaction;
|
||||
|
||||
align-items: center;
|
||||
border-radius: 0;
|
||||
border-left-color: transparent;
|
||||
|
||||
@ -33,6 +33,7 @@
|
||||
.-group & {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
|
||||
.d-icon-user-group {
|
||||
padding: 5px 5px;
|
||||
box-sizing: border-box;
|
||||
@ -225,6 +226,7 @@
|
||||
.user-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.fk-d-tooltip__trigger-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -234,6 +236,7 @@
|
||||
width: var(--font-down-2-rem);
|
||||
height: var(--font-down-2-rem);
|
||||
}
|
||||
|
||||
.user-status-message-description {
|
||||
@include ellipsis;
|
||||
font-size: var(--font-down-2-rem);
|
||||
@ -290,7 +293,7 @@
|
||||
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
@include default-focus();
|
||||
@include default-focus;
|
||||
}
|
||||
|
||||
&-container {
|
||||
|
||||
@ -43,9 +43,11 @@ $max_image_height: 150px;
|
||||
.thumbnail.onebox-avatar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.aspect-image {
|
||||
margin-right: 0;
|
||||
max-width: 100%;
|
||||
|
||||
+ h3 {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
@ -54,6 +56,7 @@ $max_image_height: 150px;
|
||||
h3 {
|
||||
margin-block: 0.75rem 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
@ -78,6 +81,7 @@ $max_image_height: 150px;
|
||||
object-fit: contain;
|
||||
max-height: $max_image_height;
|
||||
max-width: calc(#{$max_image_height} / 9 * 16);
|
||||
|
||||
&:has(div[data-provider-name="tiktok"]) {
|
||||
max-height: unset;
|
||||
}
|
||||
|
||||
@ -92,6 +92,7 @@
|
||||
height: 0.9em;
|
||||
width: 0.9em;
|
||||
}
|
||||
|
||||
&__restricted-category-icon {
|
||||
background: var(--tertiary-very-low);
|
||||
height: 0.355em;
|
||||
@ -99,6 +100,7 @@
|
||||
margin-right: 0.4em;
|
||||
padding: 1px 1px 2px 1px;
|
||||
}
|
||||
|
||||
&:has(.--users-count) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -115,7 +115,7 @@
|
||||
|
||||
.react-btn {
|
||||
vertical-align: top;
|
||||
padding: 0em 0.25em;
|
||||
padding: 0 0.25em;
|
||||
background: none;
|
||||
border: none;
|
||||
will-change: scale;
|
||||
@ -178,6 +178,7 @@
|
||||
|
||||
&.-deleted {
|
||||
background-color: var(--danger-low);
|
||||
|
||||
.chat-message-expand {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
z-index: 1;
|
||||
margin: 0 1px 0 0;
|
||||
will-change: transform;
|
||||
@include chat-scrollbar();
|
||||
@include chat-scrollbar;
|
||||
min-height: 1px;
|
||||
box-sizing: border-box;
|
||||
transition: padding-top 0.2s ease-in-out;
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.category-chooser {
|
||||
.select-kit-selected-name.selected-name.choice {
|
||||
color: var(
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
.chat-modal-move-message-to-channel {
|
||||
&__channel-chooser {
|
||||
width: 100%;
|
||||
|
||||
.category-chat-badge {
|
||||
.d-icon {
|
||||
color: inherit;
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
}
|
||||
|
||||
&__toggle-drawer-button {
|
||||
&:after {
|
||||
&::after {
|
||||
@container (inline-size) {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -56,7 +56,7 @@
|
||||
}
|
||||
|
||||
.c-navbar__channel-title {
|
||||
@include ellipsis();
|
||||
@include ellipsis;
|
||||
font-weight: 700;
|
||||
height: var(--chat-header-offset);
|
||||
display: flex;
|
||||
@ -66,11 +66,11 @@
|
||||
.c-navbar__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@include ellipsis();
|
||||
@include ellipsis;
|
||||
height: var(--chat-header-offset);
|
||||
|
||||
&-text {
|
||||
@include ellipsis();
|
||||
@include ellipsis;
|
||||
font-weight: 700;
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
@ -108,6 +108,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: var(--chat-header-offset);
|
||||
|
||||
.d-icon {
|
||||
color: var(--primary-low-mid);
|
||||
}
|
||||
|
||||
@ -30,6 +30,7 @@
|
||||
.chat-onebox-images.onebox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
max-height: 150px;
|
||||
|
||||
@ -43,6 +43,7 @@
|
||||
margin-top: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
> p {
|
||||
margin-top: 0.35em;
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
// unicode zero width space character
|
||||
// Ensures the span height is consistent even when empty
|
||||
content: "\200b";
|
||||
@ -27,9 +27,11 @@
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
animation: chat-replying-indicator__wave 1.8s linear infinite;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: -1.6s;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
animation-delay: -1.4s;
|
||||
}
|
||||
@ -41,6 +43,7 @@
|
||||
100% {
|
||||
transform: initial;
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translateY(-0.2em);
|
||||
}
|
||||
|
||||
@ -41,6 +41,7 @@
|
||||
&:active,
|
||||
&:focus {
|
||||
background: none !important;
|
||||
|
||||
.d-icon {
|
||||
color: var(--secondary) !important;
|
||||
}
|
||||
|
||||
@ -34,6 +34,7 @@
|
||||
@keyframes chat-quote-message-background-fade-highlight {
|
||||
0% {
|
||||
}
|
||||
|
||||
100% {
|
||||
background-color: transparent;
|
||||
color: transparent;
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
". content";
|
||||
grid-template-columns: auto 1fr;
|
||||
|
||||
&:not(:first-of-type):not(:last-of-type) {
|
||||
&:not(:first-of-type, :last-of-type) {
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
@ -29,6 +29,7 @@
|
||||
.chat-skeleton__body:nth-of-type(odd) & {
|
||||
background-color: var(--primary-100);
|
||||
}
|
||||
|
||||
.chat-skeleton__body:nth-of-type(even) & {
|
||||
background-color: var(--primary-200);
|
||||
}
|
||||
@ -45,6 +46,7 @@
|
||||
.chat-skeleton__body:nth-of-type(odd) & {
|
||||
background-color: var(--primary-100);
|
||||
}
|
||||
|
||||
.chat-skeleton__body:nth-of-type(even) & {
|
||||
background-color: var(--primary-200);
|
||||
}
|
||||
@ -86,6 +88,7 @@
|
||||
.chat-skeleton__body:nth-of-type(odd) & {
|
||||
background-color: var(--primary-100);
|
||||
}
|
||||
|
||||
.chat-skeleton__body:nth-of-type(even) & {
|
||||
background-color: var(--primary-200);
|
||||
}
|
||||
@ -109,10 +112,10 @@
|
||||
overflow: hidden;
|
||||
|
||||
*[class^="chat-skeleton__message-"]:not(
|
||||
.chat-skeleton__message-content
|
||||
):not(.chat-skeleton__message-text):not(
|
||||
.chat-skeleton__message-content,
|
||||
.chat-skeleton__message-text,
|
||||
.chat-skeleton__message-reactions
|
||||
):after {
|
||||
)::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
@ -73,12 +73,14 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
.chat-user-avatar {
|
||||
cursor: pointer;
|
||||
|
||||
&__container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
border: 2px solid var(--primary-very-low);
|
||||
padding: 0;
|
||||
@ -92,6 +94,7 @@
|
||||
margin-right: -6px;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-thread-participants__avatar-group {
|
||||
overflow: hidden;
|
||||
justify-content: flex-start;
|
||||
|
||||
@ -35,6 +35,7 @@
|
||||
&:not(:last-child) {
|
||||
margin-right: -10px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
border: 1px solid var(--primary-very-low);
|
||||
}
|
||||
|
||||
@ -2,5 +2,5 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
@include chat-height(var(--chat-header-expanded-offset, 0px));
|
||||
@include chat-height(var(--chat-header-expanded-offset, 0));
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
&__items {
|
||||
overflow-y: scroll;
|
||||
@include chat-scrollbar();
|
||||
@include chat-scrollbar;
|
||||
box-sizing: border-box;
|
||||
flex-grow: 1;
|
||||
overscroll-behavior: contain;
|
||||
@ -18,6 +18,6 @@
|
||||
|
||||
&__no-threads {
|
||||
@include thread-list-item;
|
||||
margin: 0.5rem 0rem 0.5rem 0.5rem;
|
||||
margin: 0.5rem 0 0.5rem 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -78,6 +78,7 @@
|
||||
|
||||
.chat-transcript-thread {
|
||||
min-width: 0;
|
||||
|
||||
&-header {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
@ -106,7 +107,6 @@
|
||||
|
||||
.chat-transcript-reaction {
|
||||
@include chat-reaction;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
@ -114,6 +114,7 @@
|
||||
.chat-transcript-images.onebox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
max-height: 150px;
|
||||
|
||||
@ -32,7 +32,6 @@
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: calc(50% - 100px / 2);
|
||||
@ -49,7 +48,6 @@
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: calc(50% - 100px / 2);
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
&.is-online {
|
||||
.avatar {
|
||||
padding: 2px;
|
||||
box-shadow: inset 0px 0px 0px 1px var(--success),
|
||||
inset 0px 0px 0px 2px var(--secondary);
|
||||
box-shadow: inset 0 0 0 1px var(--success),
|
||||
inset 0 0 0 2px var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,8 +22,8 @@
|
||||
.chat-message & {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.chat-channel-title & {
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
.chat-message-thread-indicator {
|
||||
margin-left: 0;
|
||||
margin-top: 1rem;
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
@ -59,9 +60,11 @@
|
||||
//sidebar
|
||||
#sidebar-section-content-user-threads {
|
||||
padding-bottom: 0.35em;
|
||||
|
||||
.sidebar-section-link-content-text {
|
||||
color: var(--d-sidebar-link-color);
|
||||
}
|
||||
|
||||
.active .sidebar-section-link-content-text {
|
||||
color: var(--d-sidebar-active-color);
|
||||
}
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
|
||||
li.user-profile-controls-outlet.chat-button {
|
||||
order: -1;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -36,7 +36,6 @@
|
||||
|
||||
.selected-user {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 1px 0.25rem 0.25rem 1px;
|
||||
padding: 0.25rem 0.5rem 0.25rem 0.25rem;
|
||||
background: var(--primary-very-low);
|
||||
@ -166,6 +165,7 @@
|
||||
|
||||
.btn {
|
||||
padding: 0.25em;
|
||||
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -19,6 +19,7 @@
|
||||
font-size: var(--font-up-1);
|
||||
}
|
||||
}
|
||||
|
||||
&--controls {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
||||
@ -56,7 +56,6 @@
|
||||
@import "chat-modal-archive-channel";
|
||||
@import "chat-modal-edit-channel-description";
|
||||
@import "chat-modal-create-channel";
|
||||
@import "chat-modal-create-channel";
|
||||
@import "chat-modal-channel-summary";
|
||||
@import "chat-modal-move-message-to-channel";
|
||||
@import "chat-scroll-to-bottom";
|
||||
|
||||
@ -27,10 +27,12 @@
|
||||
|
||||
&.--threads {
|
||||
margin-top: 0.25rem;
|
||||
|
||||
.c-unread-indicator {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.chat-channel-title {
|
||||
gap: 0.5rem;
|
||||
color: var(--primary);
|
||||
|
||||
@ -32,9 +32,11 @@
|
||||
height: 2.5em;
|
||||
padding: 0 0.5rem;
|
||||
margin: 0 0.5rem 0.125rem 0.5rem;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background-color: var(--primary-low);
|
||||
|
||||
.chat-channel-title {
|
||||
.category-chat-name,
|
||||
.chat-name,
|
||||
@ -51,9 +53,11 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.channels-list-container {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.channels-list-container.center-empty-channels-list {
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
@ -15,11 +15,13 @@
|
||||
grid-template-areas:
|
||||
"avatar info info participants"
|
||||
"excerpt excerpt excerpt replies";
|
||||
|
||||
&__replies-count {
|
||||
align-self: center;
|
||||
grid-area: replies;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&__last-reply-excerpt {
|
||||
white-space: wrap;
|
||||
display: -webkit-box;
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
--scrollbarBg: transparent;
|
||||
--scrollbarThumbBg: var(--primary-low);
|
||||
--scrollbarWidth: 10px;
|
||||
|
||||
scrollbar-color: transparent var(--scrollbarBg);
|
||||
transition: scrollbar-color 0.25s ease-in-out;
|
||||
|
||||
|
||||
@ -67,6 +67,7 @@ html.has-full-page-chat {
|
||||
&.active .d-icon {
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
.chat-channel-unread-indicator {
|
||||
border-color: var(--primary-very-low);
|
||||
}
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.c-channel-members {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
:root {
|
||||
--channel-list-avatar-size: 43px;
|
||||
}
|
||||
|
||||
.chat-channel-row {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
@ -15,7 +16,6 @@
|
||||
.chat-channel-row__content {
|
||||
background-color: var(--danger-low);
|
||||
}
|
||||
|
||||
height: 0 !important;
|
||||
overflow: hidden;
|
||||
opacity: 0.5 !important;
|
||||
@ -27,14 +27,16 @@
|
||||
z-index: 2;
|
||||
box-sizing: border-box;
|
||||
transition: border-radius 0.25s ease-in-out;
|
||||
|
||||
//for sliding delete animation
|
||||
background: var(--primary-very-low);
|
||||
height: 100%;
|
||||
|
||||
&.-animate-reset {
|
||||
transition: margin-right 0.15s ease-out;
|
||||
margin-right: 0px !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
&:not(.-animate-reset) {
|
||||
border-top-right-radius: 0.25rem;
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
@ -48,6 +50,7 @@
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.is-dm & {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
@ -55,6 +58,7 @@
|
||||
"msg msg";
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
|
||||
&:has(.chat-channel-unread-indicator) {
|
||||
grid-template-areas:
|
||||
"name metadata"
|
||||
@ -69,10 +73,10 @@
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
left: 0px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
background: var(--danger);
|
||||
color: var(--primary-very-low);
|
||||
|
||||
@ -101,16 +105,20 @@
|
||||
&__channel-info {
|
||||
grid-area: name;
|
||||
}
|
||||
|
||||
&__metadata {
|
||||
grid-area: metadata;
|
||||
|
||||
.chat-channel-unread-indicator {
|
||||
font-size: var(--font-down-2);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__metadata-date {
|
||||
font-size: var(--font-down-2);
|
||||
}
|
||||
|
||||
&__last-message {
|
||||
@include ellipsis;
|
||||
grid-area: msg;
|
||||
|
||||
@ -2,10 +2,12 @@
|
||||
&__wrapper {
|
||||
padding-top: 0.75rem;
|
||||
background: none;
|
||||
|
||||
.chat-replying-indicator {
|
||||
padding-left: calc(1rem + (2 * 5px) + 0.2rem + (2 * 0.65rem) + 1px);
|
||||
}
|
||||
}
|
||||
|
||||
&__outer-container {
|
||||
padding: 0;
|
||||
align-items: flex-end;
|
||||
@ -14,22 +16,27 @@
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__inner-container {
|
||||
align-self: stretch;
|
||||
min-height: unset;
|
||||
}
|
||||
|
||||
&__input-container {
|
||||
padding: 0.15em 0.5em;
|
||||
background: var(--primary-very-low);
|
||||
}
|
||||
|
||||
&__input {
|
||||
.ios-device & {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&-button__wrapper {
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
|
||||
&-button.-send {
|
||||
height: auto;
|
||||
width: auto;
|
||||
@ -42,6 +49,7 @@
|
||||
.is-send-enabled & {
|
||||
background-color: var(--tertiary-high);
|
||||
color: var(--secondary);
|
||||
|
||||
.d-icon {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@ -14,11 +14,13 @@
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__section-title {
|
||||
.chat-form__section:not(:first-of-type) & {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__row-content {
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
margin-top: 0.5rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
&__replies-count {
|
||||
grid-area: replies;
|
||||
}
|
||||
|
||||
@ -36,9 +36,11 @@
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
@ -42,8 +42,10 @@
|
||||
.chat__thread-title-container {
|
||||
display: flex;
|
||||
grid-area: title;
|
||||
|
||||
.chat__thread-title {
|
||||
@include ellipsis;
|
||||
|
||||
&__name {
|
||||
@include ellipsis;
|
||||
}
|
||||
|
||||
@ -9,7 +9,6 @@
|
||||
@import "chat-thread";
|
||||
@import "chat-threads-list";
|
||||
@import "chat-message-thread-indicator";
|
||||
@import "chat-message-creator";
|
||||
@import "chat-channel-row";
|
||||
@import "chat-channel-members";
|
||||
@import "chat-channel-settings";
|
||||
|
||||
Reference in New Issue
Block a user