有办法强制将帖子通知扩展到帖子之外吗？

支持
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 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

其他一切都达到了我们想要的宽度，但帖子通知被阻止进一步扩展（它们停止在“帖子”本身的右边缘——如果查看下面帖子的橙色边框，很容易看到这一点）。

虽然这种行为——帖子内容比彩色框边缘短一点——正是我们想要的，但它确实在蓝色帖子通知旁边留下了一块难看的背景色，而且我们找不到任何好的方法来让这个单独的元素扩展到帖子之外。

如果您有任何关于如何最好地实现这一目标的建议，我们将不胜感激！

（如果您有简单的建议在帖子左侧（头像左侧）添加类似的彩色填充，将不胜感激——我们现在没有时间研究这个问题，但如果这很容易做到，请指明方向将非常有帮助。）