Hemos estado modificando el CSS con respecto al ancho de las publicaciones y hemos llegado a lo siguiente (basado en este código de @Alex_P), que funciona para casi todo:
/*Alterna los fondos de las publicaciones del tema y aumenta el ancho de las publicaciones*/
// Ajusta los tamaños de color para un espacio de pantalla inferior a 1260px de ancho en 60px
@media screen and (max-width: 1150px)
{
// Añade color a las publicaciones de número par más 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}));
}
// Añade color a las publicaciones de número impar más 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 el tamaño de la acción en 61px
div.small-action
{
max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{61px});
}
// Ajusta el tamaño del aviso en 61px
div.post-notice
{
max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{61px});
}
}
// Ajusta los tamaños de color para un espacio de pantalla superior a 1260px en 180px, ajusta otros elementos en 120px
@media screen and (min-width: 1150px)
{
// comando heredado no utilizado
.topic-post:not(.d-toc-post)
{
//width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{120px});
}
// Ajusta el tamaño de la pantalla en 120px
.topic-body
{
width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{120px});
}
// Ajusta el tamaño del estado en 120px
.topic-status-info, .onscreen-post
{
max-width: calc(758px + #{120px});
}
// Ajusta el tamaño de la respuesta en 120px*2
#reply-control
{
max-width: calc(1475px + (#{120px} * 2));
}
// Ajusta el tamaño emergente del compositor en 120px*2
.composer-popup-container
{
max-width: calc(1500px + (#{120px} * 2));
}
// Ajusta el tamaño emergente del compositor en 120px (nota que no coincidirá exactamente, pero tampoco lo hace el predeterminado)
.composer-popup
{
max-width: calc(724px + #{120px});
}
// Ajusta el tamaño de la acción en 135px
div.small-action
{
max-width: calc(758px + #{135px});
}
// Ajusta el tamaño del aviso en 135px
div.post-notice
{
max-width: calc(758px + #{135px});
}
// Añade color a las publicaciones de número par más 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}));
}
// Añade color a las publicaciones de número impar más 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}));
}
// Añade color a las acciones de número par más 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}));
}
// Añade color a las acciones de número impar más 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}));
}
}
Sin embargo, hay dos cosas que no funcionan: la animación de brillo azul en las publicaciones nuevas, que simplemente hemos deshabilitado, y los avisos de publicación, o las cajas azules que aparecen cuando sucede algo especial (como la primera publicación de un usuario en el sitio o después de mucho tiempo).
Por lo tanto, también agregamos el siguiente código para probarlo de forma independiente antes de combinarlo en nuestros casos amplios y comprimidos anteriores:
/* Los avisos de publicación necesitan atención especial y todavía se rompen un poco */
// Ajusta los tamaños de los avisos de publicación para pantallas de menos de 1150px
@media screen and (max-width: 1150px)
{
// ajusta el tamaño del aviso en 35px
.post-notice
{
max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{35px});
}
}
// Ajusta los tamaños de los avisos de publicación para pantallas de más de 1150px
@media screen and (min-width: 1150px)
{
// ajusta el tamaño del aviso en 180px
.post-notice
{
max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{180px});
}
}
Esto funciona en su mayor parte según lo previsto; sin embargo, no podemos extender los avisos de publicación más allá del resto de la publicación, como se puede ver aquí:
Todo lo demás tiene el ancho deseado, pero se impide que los avisos de publicación se extiendan más allá (el borde derecho de la “publicación” en sí es donde se detienen; esto es fácilmente visible si se mira el borde naranja de la publicación de abajo).
Si bien este comportamiento, con el contenido de la publicación deteniéndose un poco antes del borde de la caja de color, es exactamente lo que queremos, deja una fea parte del color de fondo visible junto a los avisos de publicación azules, y no podemos encontrar una buena manera de hacer que este elemento singular se extienda más allá de la publicación.
¡Cualquier consejo sobre cómo podríamos lograr esto mejor sería muy apreciado!
(Puntos extra si tienes una sugerencia fácil para agregar un relleno de color similar al lado izquierdo de la publicación, a la izquierda del avatar; tenemos demasiado trabajo como para investigarlo ahora, pero si fuera trivial de hacer, un puntero por dónde empezar realmente ayudaría.)