Any way to force extending post notices beyond a post?

support
1

We’ve been messing with the CSS regarding post width, and have landed on the following (based on this code by @Alex_P), which works for very nearly everything:

/*Alternates topic post backgrounds and increases post width*/

//Adjust color sizes for screen space less than 1260px wide by 60px
@media screen and (max-width: 1150px)
{
    //Add color to even-numbered posts plus 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}));
        
    } 
    
    //Add color to odd-numbered posts plus 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}));
        
    }
    
    //adjust action size by 61px
    div.small-action
    { 
        max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{61px});
    }
    
    //adjust notice size by 61px
    div.post-notice
    { 
        max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{61px});
    }
}

//Adjust color sizes for screen space greater than 1260px wide by 180px, adjust other elements by 120px
@media screen and (min-width: 1150px)
{
    //unused legacy command
    .topic-post:not(.d-toc-post)
    {
        //width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{120px});
    }
    
    //adjust screen size by 120px
    .topic-body
    {
        width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{120px});
    }
    
    //adjust status size by 120px
    .topic-status-info, .onscreen-post
    {
        max-width: calc(758px + #{120px});
    }
    
    //adjust reply size by 120px*2
    #reply-control
    {
        max-width: calc(1475px + (#{120px} * 2));
    }

    //adjust composer popup size by 120px*2
    .composer-popup-container
    {
        max-width: calc(1500px + (#{120px} * 2));
    }

    //adjust composer size by 120px (note that it won't exactly match, but neither does default)
    .composer-popup
    {
        max-width: calc(724px + #{120px});
    }
    
    //adjust action size by 135px
    div.small-action
    { 
        max-width: calc(758px + #{135px});
    }
    
    //adjust notice size by 135px
    div.post-notice
    { 
        max-width: calc(758px + #{135px});
    }
    
    //Add color to even-numbered posts plus 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}));
        
    } 
    
    //Add color to odd-numbered posts plus 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}));
        
    }
    
    //Add color to even-numbered actions plus 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}));
    } 
    
    //Add color to odd-numbered actions plus 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}));
    }
}

However, there are two things that don’t work: the blue glow animation on new posts, which we’ve simply disabled, and post notices, or the blue boxes that appear when something special happens (such as a user’s first post on the site or in a long time).

Thus, we also added the following code to test independently before combining it into our above wide and compressed cases:

/* Post notices need special attention and still kinda break */

//Adjust post notice sizes for screens less than 1150px
@media screen and (max-width: 1150px)
{
    //adjust notice size by 35px
    .post-notice
    {
        max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{35px});
    }
}

//Adjust post notice sizes for screens greater than 1150px
@media screen and (min-width: 1150px)
{
    //adjust notice size by 180px
    .post-notice
    {
        max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{180px});
    }
}

This mostly works as intended - however, we can’t extend the post notices beyond the rest of the post, as can be seen here:

image
image1146×741 33.4 KB

Everything else is made our desired width, but the post notices are prevented from extending any further (the rightmost edge of the “post” itself is where they stop - this is easily visible if you look at the orange border on the post below).

While this behavior, with the post contents stopping a bit short of the edge of the colored box, is exactly what we want, it does leave an ugly bit of the background color visible next to the blue post notices, and we can’t figure out any good way to have this singular element extend beyond the post itself.

Any tips on how we may best accomplish this would be greatly appreciated!

(Bonus points if you have an easy suggestion to add similar colored padding to the left side of the post, left of the avatar - we have too much other stuff to even look into this right now but if it’d be trivial to do, a pointer where to start would really help.)