게시글을 넘어 공지사항을 확장하는 방법이 있나요?

제품 지원
1

게시물 폭과 관련된 CSS를 조정해 왔고, @Alex_P의 이 코드를 기반으로 다음과 같은 방식을 채택했습니다. 거의 모든 경우에 잘 작동합니다:

/*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}));
    }
}

하지만 두 가지가 작동하지 않습니다. 새로 작성된 게시물에 나타나는 파란색 글로우 애니메이션은 단순히 비활성화했고, 게시물 공지(post notices)도 마찬가지입니다. 게시물 공지는 특별한 일이 발생했을 때(예: 사용자가 사이트에 처음 글을 올리거나 오랜만에 글을 올릴 때) 나타나는 파란색 상자입니다.

따라서 위 넓은 폭과 압축된 경우와 결합하기 전에 독립적으로 테스트하기 위해 다음 코드를 추가했습니다:

/* 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});
    }
}

이 코드는 대부분 의도대로 작동하지만, 다음에서 볼 수 있듯이 게시물 공지를 게시물의 나머지 부분보다 더 넓게 확장할 수 없습니다:

image
image1146×741 33.4 KB

그 외 모든 요소는 원하는 폭으로 만들어졌지만, 게시물 공지는 더 이상 확장되지 못합니다(아래 게시물의 주황색 테두리를 보면 게시물의 가장자리에서 멈추는 것이 쉽게 보입니다).

게시물 내용이 색상 박스의 가장자리보다 약간 짧게 끝나는 이 동작은 우리가 원하는 바와 정확히 일치하지만, 파란색 게시물 공지 옆에 배경색의 보기 싫은 부분이 드러나게 됩니다. 그리고 이 단일 요소를 게시물 자체보다 더 확장하는 좋은 방법을 찾지 못하고 있습니다.

이를 가장 잘 달성하는 방법에 대한 팁을 주시면 감사하겠습니다!

(보너스: 아바타 왼쪽, 즉 게시물의 왼쪽 측면에도 비슷한 색상 패딩을 추가하는 간단한 제안이 있다면 점수를 드립니다. 현재 다른 할 일이 많아 이것을 살펴볼 여유가 없지만, 간단히 할 수 있다면 어디서 시작해야 하는지 알려주시면 정말 도움이 될 것입니다.)