Personalizzazione dell'aspetto della chat

Sto cercando di personalizzare la nuova finestra di chat (modalità a schermo intero) sul desktop.

Ho il CSS che vorrei utilizzare, ma non riesco a capire dove inserirlo nel mio tema per farlo avere effetto.

Ho provato…

my_theme/desktop/chat.scss
my_theme/desktop/chat_desktop.scss
my_theme/common/chat.scss
my_theme/common/chat_desktop.scss

Nessuno di questi sembra sovrascrivere il CSS predefinito.

Per completezza, ecco il CSS che sto cercando di iniettare.

// Regola l'aspetto della chat a schermo intero

.full-page-chat .chat-full-page-header {
	background: var(--primary-very-low);
}

.full-page-chat .chat-full-page-header {
	border-top: 0px;
}

:root {
	--d-max-width: 2000px;
}

.has-full-page-chat:not(.discourse-sidebar) {
	--max-chat-width: 2000px;
}

#main-outlet-wrapper {
	padding: 0 0px;
}

La struttura del nome della cartella/file non è corretta.

Dai un’occhiata a: Developing Discourse Themes & Theme Components

Mi sfugge qualcosa. Cosa c’è di sbagliato?

Questa è la struttura della mia cartella.

È diverso da quello che hai condiviso nell’OP:

Se vuoi chiamare i moderatori della chat in modo diverso, devi fare riferimento a loro nel file principale.

Mi scuso per la confusione. Nell’OP stavo cercando di comunicare quali file ho provato a creare e in quali posizioni li ho inseriti. Non voglio nominare la modalità chat in modo diverso, sto solo cercando di capire in quale file scss dovrei inserire il css per influenzare solo la chat in modalità desktop a schermo intero.

Puoi inserire il tuo CSS in theme/desktop/desktop.scss — per influenzare la chat non deve essere in un file specifico per la chat, devi solo selezionare le classi pertinenti.

Puoi usare @import "chat" o l’equivalente per importarli nel tuo file principale.