Onde a barra “última visita” não conte como um filho para fins de nth-child ao determinar a cor de fundo.
Minha primeira ideia foi usar JavaScript para simplesmente adicionar uma nova div após quaisquer barras de última visita, o que de fato funciona como desejado:
<script type="text/discourse-plugin" version="0.8">
var addedElement;
api.onPageChange(() =>{
addedElement = false;
//window.onload = lastPostFix();
});
async function lastPostFix()
{
var elements = document.getElementsByClassName('topic-post-visited');
var newElement = document.createElement("div");
newElement.classList.add('small-action');
while(elements.length > 0 && !addedElement)
{
elements[0].parentNode.insertBefore(newElement, elements[0].nextSibling);
addedElement = true;
}
}
</script>
No entanto, ao rolar para cima ou para baixo, há um monte de problemas que isso parece causar, desde postagens que simplesmente se recusam a carregar até espaços em branco enormes ou o que quer que esteja acontecendo na terceira imagem:
Embora isso o torne mais fino, esse não é realmente o problema aqui - o exemplo que dei como nosso ideal foi feito com a edição do CSS, o que é basicamente trivial - o problema é que a coloração de fundo de nossas postagens é feita por meio de um seletor nth-child e o elemento .small-action.topic-post-visited conta como um filho e, portanto, alterna o nth-child quando não queremos que ele o faça.
Onde a cor clara é usada como fundo para o último elemento de visita, fazendo com que a postagem diretamente acima e abaixo sejam ambas de nossa cor mais escura.
Contraste com nosso ideal, onde a alternância de cores ignora este novo elemento:
Assim, também obtemos um comportamento divertido quando você rola o suficiente para que a barra seja descarregada - as postagens piscam em cores alternadamente enquanto o site decide novamente o que deve ser colorido como o quê quando a barra de “última visita” desaparece.
Isso é incrivelmente indesejável e, considerando que as cores alternadas valem mais para nós do que o indicador de última visita, gostaríamos muito de alguma forma de lidar com isso adequadamente ou simplesmente desativar o recurso completamente.
Sim, isso não funcionará com :nth-child ou :nth-of-type. Eles apenas contam os elementos filhos, portanto, não são específicos de classe e não há como filtrar por classe.
O que você realmente precisará é de :nth-child(2n of .topic-post), mas isso ainda é suportado apenas pelo Safari.
Mas você pode tentar algo assim.
Cabeçalho
Isso adicionará esta classe .every-second a cada segundo post, excluindo pequenas ações, então apenas posts do tópico. Então você pode facilmente direcioná-lo com CSS.
É possível conseguir o mesmo efeito usando apenas CSS, mas é meio gambiarra e só funcionará no fluxo de posts. Não funcionará na lista de tópicos. Será necessário Javascript, já que apenas o Safary seleciona a sintaxe :nth-child( de <seletor>) e, pelo que pude apurar, não há atributos que possam ser direcionados para aplicar o efeito.
@orangeandblack5, você tem que direcionar o elemento article dentro dos posts. Note que o atributo id segue o padrão id=post_N onde N é o número do post no fluxo.
Fato interessante: nem todas as pequenas ações são criadas igualmente!
Decidi tentar a ideia de CSS puro e, infelizmente, embora algumas pequenas ações (como bloquear, desbloquear ou fixar um tópico) contem como uma postagem completa e recebam seu próprio ID exclusivo que poderíamos usar para colorir, nem todas o fazem.
Observe que isso também afeta a correção de JS dada por @Don - verei se consigo encontrar uma maneira de contornar isso, mas meu conhecimento de JS é muito mais rudimentar do que o de CSS.
