Wir haben mit dem CSS bezüglich der Beitragbreite experimentiert und sind zu Folgendem gelangt (basierend auf diesem Code von @Alex_P), der für fast alles funktioniert:
/*Ändert die Hintergrundfarben von Beiträgen und erhöht die Beitragbreite*/
//Passt die Farbgrößen für Bildschirme mit einer Breite von weniger als 1260px um 60px an
@media screen and (max-width: 1150px)
{
//Fügt geradzahligen Beiträgen plus 60px Farbe hinzu
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}));
}
//Fügt ungeradzahligen Beiträgen plus 60px Farbe hinzu
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}));
}
//Passt die Aktionsgröße um 61px an
div.small-action
{
max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{61px});
}
//Passt die Hinweisgröße um 61px an
div.post-notice
{
max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{61px});
}
}
//Passt die Farbgrößen für Bildschirme mit einer Breite von mehr als 1260px um 180px an, passt andere Elemente um 120px an
@media screen and (min-width: 1150px)
{
//ungenutzter Legacy-Befehl
.topic-post:not(.d-toc-post)
{
//width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{120px});
}
//Passt die Bildschirmgröße um 120px an
.topic-body
{
width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{120px});
}
//Passt die Statusgröße um 120px an
.topic-status-info, .onscreen-post
{
max-width: calc(758px + #{120px});
}
//Passt die Antwortgröße um 120px*2 an
#reply-control
{
max-width: calc(1475px + (#{120px} * 2));
}
//Passt die Composer-Popup-Größe um 120px*2 an
.composer-popup-container
{
max-width: calc(1500px + (#{120px} * 2));
}
//Passt die Composer-Größe um 120px an (beachten Sie, dass sie nicht genau übereinstimmt, aber das tut auch die Standardeinstellung nicht)
.composer-popup
{
max-width: calc(724px + #{120px});
}
//Passt die Aktionsgröße um 135px an
div.small-action
{
max-width: calc(758px + #{135px});
}
//Passt die Hinweisgröße um 135px an
div.post-notice
{
max-width: calc(758px + #{135px});
}
//Fügt geradzahligen Beiträgen plus 180px Farbe hinzu
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}));
}
//Fügt ungeradzahligen Beiträgen plus 180px Farbe hinzu
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}));
}
//Fügt geradzahligen Aktionen plus 180px Farbe hinzu
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}));
}
//Fügt ungeradzahligen Aktionen plus 180px Farbe hinzu
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}));
}
}
Es gibt jedoch zwei Dinge, die nicht funktionieren: die blaue Leuchtanimation bei neuen Beiträgen, die wir einfach deaktiviert haben, und Beachtenhinweise, oder die blauen Kästen, die erscheinen, wenn etwas Besonderes passiert (wie der erste Beitrag eines Benutzers auf der Website oder nach langer Zeit).
Daher haben wir auch den folgenden Code hinzugefügt, um ihn separat zu testen, bevor wir ihn in unsere oben genannten breiten und komprimierten Fälle integrieren:
/* Beachtenhinweise benötigen besondere Aufmerksamkeit und funktionieren immer noch nicht richtig */
//Passt die Größen von Beachtenhinweisen für Bildschirme unter 1150px an
@media screen and (max-width: 1150px)
{
//Passt die Hinweisgröße um 35px an
.post-notice
{
max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{35px});
}
}
//Passt die Größen von Beachtenhinweisen für Bildschirme über 1150px an
@media screen and (min-width: 1150px)
{
//Passt die Hinweisgröße um 180px an
.post-notice
{
max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{180px});
}
}
Dies funktioniert größtenteils wie beabsichtigt – wir können die Beachtenhinweise jedoch nicht über den Rest des Beitrags hinaus erweitern, wie hier zu sehen ist:
Alles andere hat unsere gewünschte Breite, aber die Beachtenhinweise werden daran gehindert, weiter zu reichen (der rechte Rand des „Beitrags“ selbst ist, wo sie aufhören – dies ist leicht zu erkennen, wenn Sie den orangefarbenen Rand des darunter liegenden Beitrags betrachten).
Während dieses Verhalten, bei dem der Inhalt des Beitrags etwas kürzer als der Rand der farbigen Box ist, genau das ist, was wir wollen, hinterlässt es einen unschönen Teil der Hintergrundfarbe neben den blauen Beachtenhinweisen, und wir können keinen guten Weg finden, dieses einzelne Element über den Beitrag hinaus zu erweitern.
Jeder Tipp, wie wir dies am besten erreichen können, wäre sehr willkommen!
(Bonuspunkte gibt es, wenn Sie einen einfachen Vorschlag haben, ähnliche farbige Abstände auf der linken Seite des Beitrags, links vom Avatar, hinzuzufügen – wir haben im Moment zu viel anderes zu tun, um uns darum zu kümmern, aber wenn es trivial wäre, wäre ein Hinweis, wo wir anfangen können, sehr hilfreich.)