投稿の投稿通知を投稿外に強制的に拡張する方法はありますか？

サポート
1

投稿の幅を調整するCSSを試行錯誤した結果、以下のコードになりました（@Alex_P氏によるこちらのコードに基づく）が、ほぼすべてのケースで機能します。

/*トピックの投稿背景を交互に表示し、投稿幅を広げます*/

// 画面幅が1260px未満の場合、色サイズを60px調整します
@media screen and (max-width: 1150px)
{
    // 偶数番目の投稿とsmall-actionに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}));

    }

    // 奇数番目の投稿とsmall-actionに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}));

    }

    // actionサイズを61px調整します
    div.small-action
    {
        max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{61px});
    }

    // noticeサイズを61px調整します
    div.post-notice
    {
        max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{61px});
    }
}

// 画面幅が1260pxを超える場合、色サイズを180px調整し、その他の要素を120px調整します
@media screen and (min-width: 1150px)
{
    // 未使用のレガシーコマンド
    .topic-post:not(.d-toc-post)
    {
        //width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{120px});
    }

    // 画面サイズを120px調整します
    .topic-body
    {
        width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{120px});
    }

    // ステータスサイズを120px調整します
    .topic-status-info, .onscreen-post
    {
        max-width: calc(758px + #{120px});
    }

    // 返信サイズを120px*2調整します
    #reply-control
    {
        max-width: calc(1475px + (#{120px} * 2));
    }

    // コンポーザーポップアップサイズを120px*2調整します
    .composer-popup-container
    {
        max-width: calc(1500px + (#{120px} * 2));
    }

    // コンポーザーサイズを120px調整します（デフォルトとは正確には一致しませんが、デフォルトでも同様です）
    .composer-popup
    {
        max-width: calc(724px + #{120px});
    }

    // actionサイズを135px調整します
    div.small-action
    {
        max-width: calc(758px + #{135px});
    }

    // noticeサイズを135px調整します
    div.post-notice
    {
        max-width: calc(758px + #{135px});
    }

    // 偶数番目の投稿に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}));

    }

    // 奇数番目の投稿に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}));

    }

    // 偶数番目のactionに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}));
    }

    // 奇数番目のactionに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}));
    }
}

しかし、2つの問題があります。新しい投稿の青いグローアニメーション（これは単純に無効にしました）と、投稿通知（サイトまたは長期間ぶりのユーザーの最初の投稿などの特別なイベントが発生したときに表示される青いボックス）です。

そのため、上記の幅広および圧縮ケースに結合する前に、個別にテストするために次のコードも追加しました。

/*投稿通知は特別な注意が必要で、まだ少し壊れています*/

// 1150px未満の画面の投稿通知サイズを調整します
@media screen and (max-width: 1150px)
{
    // 通知サイズを35px調整します
    .post-notice
    {
        max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{35px});
    }
}

// 1150pxを超える画面の投稿通知サイズを調整します
@media screen and (min-width: 1150px)
{
    // 通知サイズを180px調整します
    .post-notice
    {
        max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{180px});
    }
}

これはほぼ意図したとおりに機能しますが、投稿通知を投稿の他の部分より拡張することはできません。ここで見られるように：

image
image1146×741 33.4 KB

他のすべては希望の幅になっていますが、投稿通知はそれ以上拡張されません（投稿自体の右端で停止します。下の投稿のオレンジ色の境界線を見ると簡単にわかります）。

この動作は、投稿コンテンツが色のボックスの端から少し短くなるという点で、まさに私たちが望んでいるものですが、青い投稿通知の隣に醜い背景色が残ってしまい、この単一の要素を投稿自体より拡張する良い方法を見つけることができません。

これを最も効果的に達成する方法についてのヒントをいただけると幸いです！

（ボーナスポイントは、アバターの左側、投稿の左側に同様の色付きパディングを追加する簡単な提案があれば提供します。現在、これを確認する時間さえありませんが、もしそれが些細なことであれば、どこから始めればよいか教えていただけると助かります。）
(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.)