Flopstyle: LITE261030 査読

【テーマ更新】Flopstyle: LITE261030の査読。

原語版: https://scp-wiki.wikidot.com/theme:flopstyle rev.510
下書き: https://pseudo-scp-jp.wikidot.com/theme:flopstyle
投稿先: https://scp-jp.wikidot.com/theme:flopstyle

体裁面・クレジット

1.

クレジットの項目を翻訳投稿ガイドに揃えてください。原題・著作権者・元記事リンクの表記が異なるか、欠けています。

2.

クレジットの表記のいくつかが2025年時のものになっています。以下を投稿時のものに更新してください。

  • 翻訳年 (改訳年)
  • CSS 冒頭コメントアウトの Translated in 2025
  • 訳注の「2025/03/09現在」2か所。(内容は現在も正しく、日付のみ古い状態です)


トップバー

1.

sigma-10 側の #search-top-box-input { display: none; } が sigma-9 には指定されておらず、検索バーの表示に差異が出ています。こちらをJP独自の構文として反映してください。

2.

モバイル表示で検索ボタンとサイト名が重なります。以下のように`#search-top-box`のtopの値を大きくするなどして調整してください。

@media (max-width: 767px) {
    #search-top-box {
        top: 97px;
    }
}

3.

SCP-JP ではページ横幅320px時にトップバーが改行されて表示されてしまいます。任意の方法で修正してください。例えば、以下のような指定で修正が可能であることを確認しました。

@media (max-width: 479px) {
     #header, .mobile-top-bar {
        max-width: 100%;
    }
 
     #top-bar li a {
        padding: 1px 6px;
    }
}

4.

また、SCP-JP ではページ横幅320px時に、トップバーをホバーした際に表示されるナビゲーションがページ横幅を右にはみ出します。任意の方法で修正してください。例えば、以下のような指定で修正が可能であることを確認しました。

#top-bar ul > li:nth-last-of-type(-n + 2) > ul {
    right: 0;
}


サイドバー

1.

@media not all and (max-width: 767pxx) { は 767px の誤字です。修正してください。

2.

サイドバーの .close-menu の色表示がPC・モバイル版ともに原語版と異なります。こちらをJP独自の構文として反映してください。

@media (min-width: 768px) {
    #side-bar:target .close-menu {
        opacity: 0;
    }
}
 
@media (max-width: 767px) {
    #side-bar:target .close-menu:hover {
        background: #0000 1px 1px;
    }
}

3.

interwiki の表示位置がずれているので、以下を入れて修正してください。

div.scpnet-interwiki-wrapper {
    margin: 0;
}
 
iframe.scpnet-interwiki-frame {
    box-sizing: border-box;
    margin-left: 0;
}


評価モジュール系

1.

以下の JP独自に追加された箇所での !important は不要です。例えば、.page-rate-widget-box .cancel を上書きするために #page-content .page-rate-widget-box .cancel を用いるなど、より強いセレクタを使用することで !important を用いずにCSSを適用できるかと思います。

.rate-box-with-credit-button .creditButton {
    border-radius: 0 !important;
}

2.

以下の追加構文が、[infoモジュール](https://scp-jp.wikidot.com/info:start) 内評価モジュールの .rate-points の縦幅を1px大きくしてしまっています。

こちらの構文について、特に問題なければ削除をお願いしたいです。おそらくは .modalbox 内の評価モジュールのスタイルを調整するために記述したものかと思いますが、無くても特に問題なく動作するようにみえます。

#page-content .page-rate-widget-box .rate-points {
    padding-top: 1px;
}


諸要素

1.

原文rev.510の内容を反映し、BetterFootnotes の変数 --fnLinger の値を次に修正してください。

:root {
    --fnLinger: 2s;
}

2.

画面横幅が小さいときに .sms-message が横幅をはみ出します。以下のようにして修正してください。

削除:

.sms-message {
    width: 22.4rem;
}

追加:

#page-content .sms-message {
    max-width: 22.4rem;
}

3.

原文の以下の記述が抜けており、.sidebox のモバイル表示に不具合が生じているので、反映させてください。

 @media (max-width: 767.9px) {
     .sidebox,
     .sidebox:hover {
     right: calc(((100vw - (100% - 3rem)) / 2) * -1 + 1.9rem);
    }
}

4.

以下の箇所は原文だと 3px で指定されています。意図した変更でなければ原文と同じスタイルを適用してください。

 @media (max-width: 1199.9px) {
     .sidebox {
        border-left: 8px solid var(--accentColor);
    }
}

5.

原文の以下の記述が抜けており、表示に差異が生じていますので適用してください。

/* == CROQSTYLE PATCH == */
 
 #edit-page-textarea {
    font-family: unset;
}
 
 tt {
    margin: unset;
    padding: unset;
    background: unset;
    border-radius: unset;
    font-size: unset;
}