/** * SMF Extension - ボタンスタイルパターン * * 「ボタンスタイル設定が有効」のときだけ読み込まれる CSS。 * frontend-form.css にはボタン装飾を持たせず（無効時は SMF 標準に戻すため）、 * ボタンのレイアウト・装飾はすべてこのファイルに集約する。 * * に付与されるクラス（SMF_Extension_Admin_Button_Style::get_body_classes）: * smf-btn-on … 有効 * 1. 確認画面を使わないフォーム（送信する・1ボタン） * smf-btn-nc-a-{left|center|right} … 寄せ * smf-btn-nc-d-{styled|minimal} … デザイン * 2-段階1. 入力画面「確認画面へ」ボタン * smf-btn-ci-a-{left|center|right} … 寄せ * smf-btn-ci-d-{styled|minimal} … デザイン * 2-段階2. 確認画面「戻る + 送信」 * smf-btn-cs-p-{default|submit-emphasis|stacked|minimal|minimal-reversed|stacked-minimal} * smf-btn-cs-a-{left|center|right} … 全体の寄せ（横並び系のみ） * * SMF の画面（form[data-screen]）とボタン（data-action）: * input + complete … 確認画面なしフォームの「送信する」 → ケース1 * input + confirm … 確認画面ありフォームの「確認画面へ」 → ケース2-段階1 * confirm + back/complete … 確認画面の「戻る」「送信する」 → ケース2-段階2 * complete … 完了画面（ボタンなし・対象外） * * 重要: SMF の JS（submit.js）は送信結果の method をそのまま data-screen に入れる。 * 入力画面は data-screen が input だけでなく invalid（バリデーションエラー）、 * back（確認画面から戻る）、loading（初期ロード）にも変化する。そのため入力画面の * ボタンは [data-screen="input"] で限定せず、確認画面（confirm）を除外する形で指定する: * - confirm アクションは入力画面専用 → 画面修飾子なし。 * - complete アクションのケース1は :not([data-screen="confirm"]) で確認画面の送信と区別。 * * 注意: .smf-action は .snow-monkey-form の子（.smf-form の兄弟）。 */ /* ============================================ ベースレイアウト（有効時・全画面共通） ============================================ */ body.smf-btn-on .snow-monkey-form .smf-action { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: flex-start; margin-top: 24px; } /* SMF 標準はボタン間隔を margin-left で付けるが、本プラグインは gap で管理する。標準の margin を打ち消さないと、縦積み（スマホ/stacked）で width:100% のボタンが margin 分はみ出してズレるため、ラッパーの margin をリセットする。 */ body.smf-btn-on .snow-monkey-form .smf-action .smf-button-control { margin: 0 !important; } /* ============================================ 送信・確認ボタン（装飾あり・青）ケース1の送信 / ケース2段階1の確認 / 確認画面の default・送信を強調・縦積みの送信 ============================================ */ body.smf-btn-on.smf-btn-nc-d-styled .snow-monkey-form:not([data-screen="confirm"]) .smf-action .smf-button-control__control[data-action="complete"], body.smf-btn-on.smf-btn-ci-d-styled .snow-monkey-form .smf-action .smf-button-control__control[data-action="confirm"], body.smf-btn-on.smf-btn-cs-p-default .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="complete"], body.smf-btn-on.smf-btn-cs-p-submit-emphasis .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="complete"], body.smf-btn-on.smf-btn-cs-p-stacked .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="complete"] { background-color: #2271b1 !important; background-image: none !important; color: #fff !important; font-weight: bold; font-size: 16px; padding: 14px 36px !important; border: 1px solid #2271b1 !important; border-radius: 4px; cursor: pointer; transition: background-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); min-width: 180px; line-height: 1.4; } body.smf-btn-on.smf-btn-nc-d-styled .snow-monkey-form:not([data-screen="confirm"]) .smf-action .smf-button-control__control[data-action="complete"]:hover, body.smf-btn-on.smf-btn-ci-d-styled .snow-monkey-form .smf-action .smf-button-control__control[data-action="confirm"]:hover, body.smf-btn-on.smf-btn-cs-p-default .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="complete"]:hover, body.smf-btn-on.smf-btn-cs-p-submit-emphasis .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="complete"]:hover, body.smf-btn-on.smf-btn-cs-p-stacked .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="complete"]:hover { background-color: #135e96 !important; background-image: none !important; border-color: #135e96 !important; color: #fff !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12); } body.smf-btn-on.smf-btn-nc-d-styled .snow-monkey-form:not([data-screen="confirm"]) .smf-action .smf-button-control__control[data-action="complete"]:active, body.smf-btn-on.smf-btn-ci-d-styled .snow-monkey-form .smf-action .smf-button-control__control[data-action="confirm"]:active, body.smf-btn-on.smf-btn-cs-p-default .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="complete"]:active, body.smf-btn-on.smf-btn-cs-p-submit-emphasis .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="complete"]:active, body.smf-btn-on.smf-btn-cs-p-stacked .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="complete"]:active { background-color: #0a4b7a !important; background-image: none !important; border-color: #0a4b7a !important; transform: translateY(1px); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } body.smf-btn-on.smf-btn-nc-d-styled .snow-monkey-form:not([data-screen="confirm"]) .smf-action .smf-button-control__control[data-action="complete"]:focus, body.smf-btn-on.smf-btn-ci-d-styled .snow-monkey-form .smf-action .smf-button-control__control[data-action="confirm"]:focus, body.smf-btn-on.smf-btn-cs-p-default .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="complete"]:focus, body.smf-btn-on.smf-btn-cs-p-submit-emphasis .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="complete"]:focus, body.smf-btn-on.smf-btn-cs-p-stacked .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="complete"]:focus { outline: 2px solid #2271b1; outline-offset: 2px; } body.smf-btn-on.smf-btn-nc-d-styled .snow-monkey-form:not([data-screen="confirm"]) .smf-action .smf-button-control__control[data-action="complete"]:disabled, body.smf-btn-on.smf-btn-ci-d-styled .snow-monkey-form .smf-action .smf-button-control__control[data-action="confirm"]:disabled, body.smf-btn-on.smf-btn-cs-p-default .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="complete"]:disabled, body.smf-btn-on.smf-btn-cs-p-submit-emphasis .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="complete"]:disabled, body.smf-btn-on.smf-btn-cs-p-stacked .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="complete"]:disabled { background-color: #a0a5aa !important; background-image: none !important; border-color: #a0a5aa !important; color: #fff !important; cursor: not-allowed; box-shadow: none; } /* 送信中スピナー（色付きボタン上で見やすく） */ body.smf-btn-on .snow-monkey-form .smf-action .smf-button-control__control[data-action="complete"] .smf-sending:before, body.smf-btn-on.smf-btn-ci-d-styled .snow-monkey-form .smf-action .smf-button-control__control[data-action="confirm"] .smf-sending:before { border-color: rgba(255, 255, 255, 0.5); border-top-color: transparent; } /* ============================================ 戻るボタン（装飾あり・控えめ）確認画面 default / 送信を強調で使用 ============================================ */ body.smf-btn-on.smf-btn-cs-p-default .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="back"], body.smf-btn-on.smf-btn-cs-p-submit-emphasis .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="back"] { background-color: transparent !important; background-image: none !important; color: #50575e !important; font-weight: normal; font-size: 15px; padding: 12px 28px !important; border: 1px solid #c3c4c7 !important; border-radius: 4px; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } body.smf-btn-on.smf-btn-cs-p-default .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="back"]:hover, body.smf-btn-on.smf-btn-cs-p-submit-emphasis .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="back"]:hover { background-color: #f0f0f1 !important; background-image: none !important; border-color: #8c8f94 !important; color: #1d2327 !important; } body.smf-btn-on.smf-btn-cs-p-default .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="back"]:focus, body.smf-btn-on.smf-btn-cs-p-submit-emphasis .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="back"]:focus { outline: 2px solid #2271b1; outline-offset: 2px; } /* 送信を強調: 戻るをさらに小さく控えめに */ body.smf-btn-on.smf-btn-cs-p-submit-emphasis .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="back"] { font-size: 14px; padding: 10px 20px !important; opacity: 0.85; } /* ============================================ ミニマル（装飾なし・エンジニア向け）ケース1/ケース2段階1 の minimal、確認画面 minimal・並列ミニマル送信左・縦積みミニマル ============================================ */ body.smf-btn-on.smf-btn-nc-d-minimal .snow-monkey-form:not([data-screen="confirm"]) .smf-action .smf-button-control__control[data-action="complete"], body.smf-btn-on.smf-btn-ci-d-minimal .snow-monkey-form .smf-action .smf-button-control__control[data-action="confirm"], body.smf-btn-on.smf-btn-cs-p-minimal .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control, body.smf-btn-on.smf-btn-cs-p-minimal-reversed .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control, body.smf-btn-on.smf-btn-cs-p-stacked-minimal .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control { background: none !important; background-image: none !important; color: inherit !important; font-weight: inherit !important; font-size: inherit !important; padding: 0.3em 1em !important; border: 1px solid currentColor !important; border-radius: 2px !important; box-shadow: none !important; min-width: 0 !important; transition: none !important; line-height: inherit !important; cursor: pointer; } body.smf-btn-on.smf-btn-nc-d-minimal .snow-monkey-form:not([data-screen="confirm"]) .smf-action .smf-button-control__control[data-action="complete"]:hover, body.smf-btn-on.smf-btn-ci-d-minimal .snow-monkey-form .smf-action .smf-button-control__control[data-action="confirm"]:hover, body.smf-btn-on.smf-btn-cs-p-minimal .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control:hover, body.smf-btn-on.smf-btn-cs-p-minimal-reversed .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control:hover, body.smf-btn-on.smf-btn-cs-p-stacked-minimal .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control:hover { background: none !important; background-image: none !important; color: inherit !important; border-color: currentColor !important; box-shadow: none !important; opacity: 0.75; } body.smf-btn-on.smf-btn-nc-d-minimal .snow-monkey-form:not([data-screen="confirm"]) .smf-action .smf-button-control__control[data-action="complete"]:focus, body.smf-btn-on.smf-btn-ci-d-minimal .snow-monkey-form .smf-action .smf-button-control__control[data-action="confirm"]:focus, body.smf-btn-on.smf-btn-cs-p-minimal .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control:focus, body.smf-btn-on.smf-btn-cs-p-minimal-reversed .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control:focus, body.smf-btn-on.smf-btn-cs-p-stacked-minimal .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control:focus { outline: 2px solid currentColor !important; outline-offset: 2px !important; } body.smf-btn-on.smf-btn-nc-d-minimal .snow-monkey-form:not([data-screen="confirm"]) .smf-action .smf-button-control__control[data-action="complete"]:disabled, body.smf-btn-on.smf-btn-ci-d-minimal .snow-monkey-form .smf-action .smf-button-control__control[data-action="confirm"]:disabled, body.smf-btn-on.smf-btn-cs-p-minimal .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control:disabled, body.smf-btn-on.smf-btn-cs-p-minimal-reversed .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control:disabled, body.smf-btn-on.smf-btn-cs-p-stacked-minimal .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control:disabled { opacity: 0.5 !important; cursor: not-allowed !important; } /* ============================================ 入力画面の寄せケース1（送信する=complete）とケース2段階1（確認画面へ=confirm）を :has() でボタン種別ごとに分けて寄せる。 ============================================ */ /* ケース1: 確認画面を使わないフォーム */ body.smf-btn-on.smf-btn-nc-a-left .snow-monkey-form:not([data-screen="confirm"]) .smf-action:has( .smf-button-control__control[data-action="complete"] ) { justify-content: flex-start; } body.smf-btn-on.smf-btn-nc-a-center .snow-monkey-form:not([data-screen="confirm"]) .smf-action:has( .smf-button-control__control[data-action="complete"] ) { justify-content: center; } body.smf-btn-on.smf-btn-nc-a-right .snow-monkey-form:not([data-screen="confirm"]) .smf-action:has( .smf-button-control__control[data-action="complete"] ) { justify-content: flex-end; } /* ケース2-段階1: 確認画面へ */ body.smf-btn-on.smf-btn-ci-a-left .snow-monkey-form .smf-action:has( .smf-button-control__control[data-action="confirm"] ) { justify-content: flex-start; } body.smf-btn-on.smf-btn-ci-a-center .snow-monkey-form .smf-action:has( .smf-button-control__control[data-action="confirm"] ) { justify-content: center; } body.smf-btn-on.smf-btn-ci-a-right .snow-monkey-form .smf-action:has( .smf-button-control__control[data-action="confirm"] ) { justify-content: flex-end; } /* ============================================ 確認画面（段階2）の全体寄せ横並び系（default / 送信を強調 / 並列ミニマル各種）にのみ適用。縦積み系は除外する。 ============================================ */ body.smf-btn-on.smf-btn-cs-a-left:not(.smf-btn-cs-p-stacked):not(.smf-btn-cs-p-stacked-minimal) .snow-monkey-form[data-screen="confirm"] .smf-action { justify-content: flex-start; } body.smf-btn-on.smf-btn-cs-a-center:not(.smf-btn-cs-p-stacked):not(.smf-btn-cs-p-stacked-minimal) .snow-monkey-form[data-screen="confirm"] .smf-action { justify-content: center; } body.smf-btn-on.smf-btn-cs-a-right:not(.smf-btn-cs-p-stacked):not(.smf-btn-cs-p-stacked-minimal) .snow-monkey-form[data-screen="confirm"] .smf-action { justify-content: flex-end; } /* ============================================ 確認画面の並べ替え（送信を先頭へ）送信を強調 / 並列ミニマル送信左 / 縦積み / 縦積みミニマルはいずれも「送信が先（左 or 上）、戻るが後」。 flex アイテムがラッパー/ボタンどちらでも効くよう両方に order を指定。 default / 並列ミニマル戻る左は DOM 順のまま（指定なし）。 ============================================ */ body.smf-btn-on.smf-btn-cs-p-submit-emphasis .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control:has( [data-action="complete"] ), body.smf-btn-on.smf-btn-cs-p-submit-emphasis .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="complete"], body.smf-btn-on.smf-btn-cs-p-minimal-reversed .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control:has( [data-action="complete"] ), body.smf-btn-on.smf-btn-cs-p-minimal-reversed .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="complete"], body.smf-btn-on.smf-btn-cs-p-stacked .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control:has( [data-action="complete"] ), body.smf-btn-on.smf-btn-cs-p-stacked .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="complete"], body.smf-btn-on.smf-btn-cs-p-stacked-minimal .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control:has( [data-action="complete"] ), body.smf-btn-on.smf-btn-cs-p-stacked-minimal .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="complete"] { order: 0 !important; } body.smf-btn-on.smf-btn-cs-p-submit-emphasis .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control:has( [data-action="back"] ), body.smf-btn-on.smf-btn-cs-p-submit-emphasis .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="back"], body.smf-btn-on.smf-btn-cs-p-minimal-reversed .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control:has( [data-action="back"] ), body.smf-btn-on.smf-btn-cs-p-minimal-reversed .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="back"], body.smf-btn-on.smf-btn-cs-p-stacked .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control:has( [data-action="back"] ), body.smf-btn-on.smf-btn-cs-p-stacked .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="back"], body.smf-btn-on.smf-btn-cs-p-stacked-minimal .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control:has( [data-action="back"] ), body.smf-btn-on.smf-btn-cs-p-stacked-minimal .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="back"] { order: 1 !important; } /* ============================================ 確認画面の縦積みレイアウト（stacked / stacked-minimal）送信:上、戻る:下、全幅 ============================================ */ body.smf-btn-on.smf-btn-cs-p-stacked .snow-monkey-form[data-screen="confirm"] .smf-action, body.smf-btn-on.smf-btn-cs-p-stacked-minimal .snow-monkey-form[data-screen="confirm"] .smf-action { flex-direction: column !important; align-items: stretch !important; } body.smf-btn-on.smf-btn-cs-p-stacked .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control, body.smf-btn-on.smf-btn-cs-p-stacked-minimal .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control { width: 100%; } body.smf-btn-on.smf-btn-cs-p-stacked .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control, body.smf-btn-on.smf-btn-cs-p-stacked-minimal .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control { width: 100% !important; min-width: 0; } /* stacked の戻る: テキストリンク風 */ body.smf-btn-on.smf-btn-cs-p-stacked .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="back"] { background-color: transparent !important; background-image: none !important; border: none !important; border-radius: 0; color: #50575e !important; text-align: center; text-decoration: underline; padding: 8px 0 !important; font-size: 14px; box-shadow: none; cursor: pointer; } body.smf-btn-on.smf-btn-cs-p-stacked .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control[data-action="back"]:hover { color: #1d2327 !important; background-color: transparent !important; box-shadow: none; } /* ============================================ モバイル対応（全パターン共通: 縦積み・全幅） ============================================ */ @media (max-width: 600px) { body.smf-btn-on .snow-monkey-form .smf-action { flex-direction: column; align-items: stretch; gap: 8px; } body.smf-btn-on .snow-monkey-form .smf-action .smf-button-control { width: 100%; display: block; } body.smf-btn-on .snow-monkey-form .smf-action .smf-button-control__control { width: 100% !important; min-width: 0; display: block; } /* モバイルでは送信(DOM 2番目)を上に出す（横並び系含む） */ body.smf-btn-on .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control:last-child { order: 0; } body.smf-btn-on .snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control:first-child { order: 1; } }