Para constar, entrar no modo de segurança para realizar as ações em massa pode ser uma alternativa a desabilitar o componente do tema para todos. Obviamente, ainda é uma complicação extra, mas possivelmente com menos impacto nos demais?
Sim, foi isso que descobri depois de aprender sobre o modo de segurança…
1 curtida
Olá,
Obrigado pelo seu componente! Notamos um problema ao usar seu componente no fórum https://community.escapecollective.com/. Se você clicar no título do tópico, o SPA é recarregado (anexei um gif com este problema), mas se você clicar no card fora do título, tudo funciona bem. O problema foi descoberto porque o componente Guest Gate não estava funcionando corretamente devido ao recarregamento da página.
Aqui está uma sugestão: Guest Gate Theme Component - #154 by Don
Você poderia, por favor, dar uma olhada neste problema?
Obrigado,
Denis D.
2 curtidas
Então, parece que algo mudou com a última rodada de atualizações do Discourse.
Apenas a borda mais à esquerda dos meus cartões de tópico agora está respeitando este CSS, tenho pesquisado para tentar encontrar o que o corrigirá, mas até agora não tive sucesso.
Alguém mais pode confirmar e ver se consegue rastrear as alterações necessárias?
O problema é a variável adicionada recentemente para a cor de fundo em tópicos que você leu.
Não acho que haja um dev-news sobre essa mudança. Mas você pode encontrar algumas informações aqui:
Existe uma maneira de suprimir esse CSS? Isso destruiu a aparência do meu site e, como não sou programador de forma alguma, não sei como contornar isso.
Eu olhei pelo inspetor de elementos e vejo a palavra ‘visited’ em todos os tópicos quebrados e vejo que ela está faltando no que ainda parece certo.
Como eu conserto isso?
Tópico que ainda não visitei (sem passar o mouse):
E com um mouseover:
E os outros estão quebrados.
Isso foi mais difícil de rastrear do que deveria ter sido. (Tenho certeza de que é devido às minhas deficiências, mas ainda assim…)
Parece que adicionar:
.topic-list-item-background-color--visited {
background: none
}
Corrigiu isso sem quaisquer efeitos colaterais indesejados.
Em seus estilos, agora você só precisa alterar essas duas variáveis:
--topic-list-item-background-color
--topic-list-item-background-color--visited
Portanto, algo como isto deve funcionar:
:root {
--topic-list-item-background-color: SUA COR AQUI;
--topic-list-item-background-color--visited: SUA COR AQUI;
}
Como isso explicaria as diferenças ao alternar entre claro e escuro?
Você pode usar a função CSS light-dark()
--nome-da-variável: light-dark(#efedea, #223a2c);
Você pode definir ambos para a mesma coisa.
Nada foi feito para :hover no núcleo. Você só precisa garantir que a variável seja definida para o que você deseja ao passar o mouse.
1 curtida
Isso ainda não está funcionando para mim.
Isso é o que originalmente funcionou:
// Mistura as cores dos cards de tópico com o tema
@media (prefers-color-scheme: dark) {
.topic-card.has-max-height {
background: #223c44 !important;
}
.topic-card.has-max-height:hover {
background: #163d51 !important;
}
}
@media (prefers-color-scheme: light) {
.topic-card.has-max-height {
background: #e6ecf2 !important;
}
.topic-card.has-max-height:hover {
background: #ddecf7 !important;
}
}
Depois da última atualização, adicionei isso e pareceu funcionar, mas depois parou:
.topic-list-item-background-color--visited {
background: none
}
Então, com base no que você disse aqui, tentei adicionar ao atual e substituir tudo por isso:
:root {
--topic-list-item-background-color: light-dark(#e6ecf2, #223c44);
--topic-list-item-background-color--visited: light-dark(#e6ecf2, #223c44);
--topic-list-item-background-color--hover: light-dark(#ddecf7, #163d51);
}
Deve haver outra variável que preciso cobrir hover-visited, porque os tópicos não lidos funcionam corretamente, mas os visitados estão quebrados.
Esta variável não existe.
.topic-card.has-max-height:hover {
--topic-list-item-background-color: ADD COLOR HERE
--topic-list-item-background-color--visited: ADD COLOR HERE
}
Isso deve ser o que você precisa, espero que ajude!
Este é o menor número de linhas que consegui criar que parece estar funcionando corretamente.
// Mistura as cores do cartão do tópico com o tema
.topic-card.has-max-height {
--topic-list-item-background-color: light-dark(#e6ecf2, #223c44);
--topic-list-item-background-color--visited: light-dark(none, none);
}
.topic-card.has-max-height:hover {
--topic-list-item-background-color: light-dark(#ddecf7, #163d51);
--topic-list-item-background-color--visited: light-dark(none, none);
}
@media (prefers-color-scheme: dark) {
.topic-card.has-max-height {
background: #223c44 !important;
}
.topic-card.has-max-height:hover {
background: #163d51 !important;
}
}
@media (prefers-color-scheme: light) {
.topic-card.has-max-height {
background: #e6ecf2 !important;
}
.topic-card.has-max-height:hover {
background: #ddecf7 !important;
}
}
Fiz um PR para este componente de tema com duas adições:
Recurso: Chave de tópicos sugeridos
Adiciona a configuração Mostrar para tópicos sugeridos
Torna o uso de cartões de tópico para tópicos sugeridos opcional (conforme descrito em esta solicitação de recurso)
Recurso: Limitar a categorias
Adiciona a configuração Mostrar em categorias
Se não estiver vazio, usa cartões de tópico apenas em categorias selecionadas.
5 curtidas
Excelente adição @RGJ, testamos em nossa instância e funcionou perfeitamente, na minha opinião deve ser definitivamente mesclado.
1 curtida
Encontrado outro pequeno bug de CSS com este tc no discourse 3.5.0:
Uma borda é adicionada em torno de vários elementos da interface do usuário, como histórico de edição e elementos de citação de expansão.
Isso se deve à falta das classes btn no-text nos elementos de botão.
Revisado e mesclado, obrigado pela adição!
2 curtidas
Sinceramente, não consegui fazer funcionar, veja como fica muito feio. Uso o tema Horizon, me ajude.
Este componente não está listado como compatível com o tema Horizon.
Não acho que será fácil mudar isso porque ambos personalizam a lista de tópicos e, como afirmado na primeira postagem:
2 curtidas
Como posso adicionar o CSS, que vejo aqui os tópicos, muito CSS