Temos mexido no CSS em relação à largura das postagens e chegamos ao seguinte (baseado neste código de @Alex_P), que funciona para quase tudo:
/*Alterna os fundos das postagens do tópico e aumenta a largura das postagens*/
//Ajusta os tamanhos das cores para espaço de tela menor que 1260px de largura em 60px
@media screen and (max-width: 1150px)
{
//Adiciona cor às postagens de número par mais 60px
div.topic-post:nth-child(2n), div.small-action:nth-child(2n)
{
background: linear-gradient(90deg, #F8F8FA calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{60px}), #FFFFFF calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{60px}));
}
//Adiciona cor às postagens de número ímpar mais 60px
div.topic-post:nth-child(2n+1), div.small-action:nth-child(2n+1)
{
background: linear-gradient(90deg, #EBECEE calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{60px}), #FFFFFF calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{60px}));
}
//ajusta o tamanho da ação em 61px
div.small-action
{
max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{61px});
}
//ajusta o tamanho da notificação em 61px
div.post-notice
{
max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{61px});
}
}
//Ajusta os tamanhos das cores para espaço de tela maior que 1260px em 180px, ajusta outros elementos em 120px
@media screen and (min-width: 1150px)
{
//comando legado não utilizado
.topic-post:not(.d-toc-post)
{
//width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{120px});
}
//ajusta o tamanho da tela em 120px
.topic-body
{
width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{120px});
}
//ajusta o tamanho do status em 120px
.topic-status-info, .onscreen-post
{
max-width: calc(758px + #{120px});
}
//ajusta o tamanho da resposta em 120px*2
#reply-control
{
max-width: calc(1475px + (#{120px} * 2));
}
//ajusta o tamanho do contêiner do pop-up do compositor em 120px*2
.composer-popup-container
{
max-width: calc(1500px + (#{120px} * 2));
}
//ajusta o tamanho do pop-up do compositor em 120px (note que não corresponderá exatamente, mas o padrão também não)
.composer-popup
{
max-width: calc(724px + #{120px});
}
//ajusta o tamanho da ação em 135px
div.small-action
{
max-width: calc(758px + #{135px});
}
//ajusta o tamanho da notificação em 135px
div.post-notice
{
max-width: calc(758px + #{135px});
}
//Adiciona cor às ações de número par mais 180px
div.topic-post:nth-child(2n)
{
background: linear-gradient(90deg, #F8F8FA calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{180px}), #FFFFFF calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{180px}));
}
//Adiciona cor às ações de número ímpar mais 180px
div.topic-post:nth-child(2n+1)
{
background: linear-gradient(90deg, #EBECEE calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{180px}), #FFFFFF calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{180px}));
}
//Adiciona cor às ações de número par mais 180px
div.small-action:nth-child(2n)
{
background: linear-gradient(90deg, #F8F8FA calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{600px}), #FFFFFF calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{600px}));
}
//Adiciona cor às ações de número ímpar mais 180px
div.small-action:nth-child(2n+1)
{
background: linear-gradient(90deg, #EBECEE calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{600px}), #FFFFFF calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{600px}));
}
}
No entanto, há duas coisas que não funcionam: o brilho azul em novas postagens, que simplesmente desativamos, e os avisos de postagem, ou as caixas azuis que aparecem quando algo especial acontece (como a primeira postagem de um usuário no site ou após um longo tempo).
Assim, também adicionamos o seguinte código para testar independentemente antes de combiná-lo em nossos casos amplos e compactados acima:
/* Avisos de postagem precisam de atenção especial e ainda meio que quebram */
//Ajusta os tamanhos dos avisos de postagem para telas menores que 1150px
@media screen and (max-width: 1150px)
{
//ajusta o tamanho da notificação em 35px
.post-notice
{
max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{35px});
}
}
//Ajusta os tamanhos dos avisos de postagem para telas maiores que 1150px
@media screen and (min-width: 1150px)
{
//ajusta o tamanho da notificação em 180px
.post-notice
{
max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{180px});
}
}
Isso funciona na maior parte como pretendido - no entanto, não conseguimos estender os avisos de postagem além do resto da postagem, como pode ser visto aqui:
Todo o resto foi feito na largura desejada, mas os avisos de postagem são impedidos de se estenderem mais (a borda mais à direita da “postagem” em si é onde eles param - isso é facilmente visível se você olhar a borda laranja na postagem abaixo).
Embora esse comportamento, com o conteúdo da postagem parando um pouco antes da borda da caixa colorida, seja exatamente o que queremos, ele deixa uma parte feia da cor de fundo visível ao lado dos avisos de postagem azuis, e não conseguimos encontrar nenhuma maneira boa de fazer este elemento singular se estender além da postagem.
Qualquer dica sobre como podemos realizar isso da melhor forma seria muito apreciada!
(Pontos bônus se você tiver uma sugestão fácil para adicionar um preenchimento colorido semelhante ao lado esquerdo da postagem, à esquerda do avatar - temos muita coisa para sequer olhar isso agora, mas se for trivial de fazer, um ponteiro onde começar realmente ajudaria.)