/* ============================================================ shohan-unify.css — SHO-HAN UI統一レイヤー (2026-06) ------------------------------------------------------------ ★ これは「見た目」だけのレイヤーです。JavaScriptには触れません。 - 変えるのは CSS（色・角丸・余白・影・配置）と、 CSS(display)による要素の出す/隠すだけ。 - 新しい挙動・通信・状態管理は追加しません。 - 隠した要素もDOMには残るので、該当CSSを消せば復活します。 ------------------------------------------------------------ 目的: 監査(inconsistencies.md)で判明した「2系統問題」を、既存CSS/HTML/JSを変更せずに“上書きレイヤー1枚”で解消する。読み込み: 各ページで **すべてのCSSの最後** に読む。 ← 末尾ロールバック: この1行を外すだけで完全に元に戻る。方針: - 揃えるのは「形・寸法・コンポーネント実装」。 - モジュールごとの色(indigo/coral/violet…)は設計どおり維持。 - テーマカラー機能(body.mt-on)は (C)アクセント化: 地色は白/中立に固定し、選んだ色はタブ下線・ボタン等のアクセントだけに出す。 ============================================================ */ /* ──────────────────────────────────────────────────────────── 0. 未定義変数の解消 (監査 I-3) koutei.css/jobs-styles.css が参照する --border / --surface-hover は本番に未定義で灰色ハードコードに固定 → 実トークンへ接続。これでダーク/テーマにも追従する。 ──────────────────────────────────────────────────────────── */ :root, :root[data-theme="light"], :root[data-theme="dark"] { --border: var(--sh-line); --border-soft: var(--sh-line-soft); --surface-hover: var(--sh-panel); /* 角丸の“正”を1本化 (監査 I-2): カード=16px */ --radius: var(--sh-r-xl); /* 16px */ --radius-sm: var(--sh-r-md); /* 8px */ --radius-pill: 999px; } /* [Dispatch堅牢化] --m 既定は :where で 0特異度にし、各モジュール色([data-mod]{--m})が必ず勝つようにする(色相維持ガード)。data-mod/--mt-text が無い時のみ indigo フォールバック。 ※ data-mod は付与を実機確認済(customers=F=amber)。 */ :where(:root), :where(:root[data-theme="light"]), :where(:root[data-theme="dark"]) { --m: var(--mod, var(--sh-mod-e, #4F46E5)); --m-d: var(--mod-d, var(--sh-mod-e-d, #4338CA)); --m-l: var(--mod-l, var(--sh-mod-e-l, #EEF0FF)); } /* ──────────────────────────────────────────────────────────── 1. ボタン: ピル → 8px角に統一 (監査 I-4) koutei(jobs-styles)の .btn は 999px ピル + ripple。 comm の 8px角・padding 10/18 に寄せる。色(var(--m))は維持。 ──────────────────────────────────────────────────────────── */ .btn, .btn-primary, .btn-ghost, .btn-danger, .btn-sm, .btn-lg { border-radius: var(--sh-r-md) !important; /* 8px */ } .btn { padding: 10px 18px; font-weight: 600; font-size: 14px; line-height: 1; box-shadow: 0 2px 6px color-mix(in srgb, var(--m) 26%, transparent); transition: background var(--sh-dur-1, .12s) var(--sh-ease, ease), transform var(--sh-dur-1, .12s) var(--sh-ease, ease), box-shadow var(--sh-dur-2, .2s) var(--sh-ease, ease); } .btn-sm { padding: 6px 12px; font-size: 12.5px; } .btn-lg { padding: 13px 22px; font-size: 15px; } /* koutei の ripple/scale 系の派手さを抑える(“じんわり”方針に整合) */ .btn::after, .btn .ripple { display: none !important; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } /* 一覧のリスト/カンバントグルだけは “セグメント” に作り替え (ピルの名残を解消) ※ 2026-06: プロダクト判断によりトグル自体を撤去。CSSで非表示。カンバン廃止＝一覧は常にリスト表示。 */ .view-toggle, .seg-toggle, .koutei-view-toggle, [data-view-toggle] { display: none !important; } /* ──────────────────────────────────────────────────────────── 2. カード: 角丸16 / padding20 / shadow統一 (監査 I-5) koutei の .job-card / .record-page / .fb-panel / .fb-canvas を comm の .card に寄せる。 ──────────────────────────────────────────────────────────── */ .job-card, .record-page, .kcard { border-radius: var(--sh-r-xl) !important; /* 16px */ border: 1px solid var(--sh-line) !important; box-shadow: var(--sh-sh-1) !important; } .record-page { padding: 20px 24px !important; } .job-card { padding: 18px !important; } /* カンバンカードは密度優先で18 */ /* ──────────────────────────────────────────────────────────── 3. タブ: padding 11/16・font14・下線=モジュール色 (監査 I-6) koutei は .tabs > .tab、comm は .tabbar > button。両方に効かせる。 ──────────────────────────────────────────────────────────── */ .tabs { border-bottom: 1px solid var(--sh-line) !important; gap: 2px !important; } .tabs .tab, .tabbar button { padding: 11px 16px !important; font-size: 14px !important; font-weight: 600; border-bottom-width: 2px !important; margin-bottom: -1px; transition: color var(--sh-dur-1, .12s) var(--sh-ease, ease), border-color var(--sh-dur-1, .12s) var(--sh-ease, ease); } .tabs .tab:hover, .tabbar button:hover { color: var(--sh-ink); } /* [theme-unify 2026-06-12] 森さん指示: 選択タブ=黒・候補=グレーに全モジュール統一 (旧: var(--m)=モジュール色。テーマon時の accent 化は末尾の body.mt-on 変種で中和) */ .tabs .tab.active, .tabbar button.active { color: var(--sh-ink, #0B1426) !important; border-bottom-color: var(--sh-ink, #0B1426) !important; } /* ──────────────────────────────────────────────────────────── 4. テーブル: koutei実用機能(ゼブラ/sticky/urgent)を残しつつヘッダ書式を comm に統一 (大文字th/10.5px/letter-spacing) (監査 I-8) ──────────────────────────────────────────────────────────── */ .job-list-table, table.tbl { font-size: 13px; } .job-list-table th, table.tbl th { background: var(--sh-bg-2) !important; color: var(--sh-ink-3) !important; font-size: 10.5px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .06em; padding: 11px 14px !important; border-bottom: 1px solid var(--sh-line) !important; } .job-list-table td, table.tbl td { padding: 12px 14px !important; border-bottom: 1px solid var(--sh-line-soft) !important; } /* ゼブラは hover 強調に置き換え(comm式)。常時ゼブラは off */ .job-list-table tbody tr:nth-child(even) td { background: transparent !important; } .job-list-table tbody tr, table.tbl tbody tr { transition: background var(--sh-dur-1, .12s) var(--sh-ease, ease); } .job-list-table tbody tr:hover td, table.tbl tbody tr:hover td { background: var(--sh-panel) !important; } /* urgent行の赤左ボーダーは “機能的” なので継続(控えめに) */ .job-list-table tr.urgent td:first-child, .job-list-table tr.is-urgent td:first-child { box-shadow: inset 3px 0 0 var(--sh-coral) !important; background: transparent !important; } /* テーブル外枠の角丸を 12px に */ .table-wrap { border-radius: var(--sh-r-lg) !important; border: 1px solid var(--sh-line); } /* ──────────────────────────────────────────────────────────── 5. モーダル: 角丸16・ヘッダは素地+細いアクセント線 (監査 I-7) koutei の 20px + 全面グラデヘッダ → comm寄せ(16px)。グラデは廃し、上辺3pxのモジュール色ストライプだけ残す(アクセント化)。 ──────────────────────────────────────────────────────────── */ .modal { border-radius: var(--sh-r-xl) !important; /* 16px */ overflow: hidden; } .modal > header, .modal .modal-header, .modal h2:first-child { background: var(--sh-surface) !important; color: var(--sh-ink) !important; border-bottom: 1px solid var(--sh-line) !important; position: relative; } .modal > header::before, .modal .modal-header::before, .modal h2:first-child::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--m); } /* チップ: koutei .lc-chip を pill 3/9 に寄せる (監査 I-9) */ .lc-chip, .chip { border-radius: 999px !important; padding: 3px 9px !important; font-size: 11px !important; font-weight: 700; } /* ──────────────────────────────────────────────────────────── 7. 入力・セレクトの統一(角丸8 / focus=モジュール色リング) off-grid(7/9/10/11px)を 8px に丸める (監査 I-11) ──────────────────────────────────────────────────────────── */ .input, .sel, .search input, .searchbar input, .cinfo-field .input, .record-field input[type=text], .record-field input[type=email], .record-field input[type=number], .record-field input[type=date], .record-field select, .record-field textarea { border-radius: var(--sh-r-md) !important; /* 8px */ } .input:focus, .sel:focus, .search input:focus, .searchbar input:focus, .record-field input:focus, .record-field select:focus, .record-field textarea:focus { outline: 0; border-color: var(--m) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--m) 18%, transparent) !important; } /* ──────────────────────────────────────────────────────────── 8. “じんわり”モーション統一(ブリーフ§4/§7) 一覧カード/行の入場を opacity+軽い上リフト 0.3s に。PCは控えめ。 ──────────────────────────────────────────────────────────── */ /* [Dispatch] §8 は森さん指示によりOFF(既存VT遷移フェードとの二重アニメ回避)。下記を無効化: @media (prefers-reduced-motion: no-preference) { .summ, .mod-card, .k-item, .user-card, .set-card { animation: sh-unify-rise var(--sh-dur-3, .32s) var(--sh-ease-out, cubic-bezier(.16,1,.3,1)) both; } } @keyframes sh-unify-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .summ, .mod-card, .k-item, .user-card, .set-card { animation: none; } } */ /* ──────────────────────────────────────────────────────────── 9. モバイル / タブレット (3端末対応・ブリーフ§2/§4) タッチ前提: 最小ヒット44px、余白の破綻防止、テーブル→カード変換の仕上げ。 ──────────────────────────────────────────────────────────── */ @media (max-width: 1023px) { /* 9-1. タッチターゲット 44px 確保 */ .btn, .tabs .tab, .tabbar button, .sel, .view-toggle button, .seg-toggle button, .ico-btn, .btn-icon { min-height: 44px; } .btn-icon, .ico-btn { min-width: 44px; } /* タブは横スクロール可（潰さない） */ .tabs, .tabbar { overflow-x: auto; -webkit-overflow-scrolling: touch; } .tabs::-webkit-scrollbar, .tabbar::-webkit-scrollbar { display: none; } /* 9-2. 入力ズーム防止(iOS): 16px下限 */ .input, .sel, .search input, .searchbar input, .record-field input, .record-field select, .record-field textarea { font-size: 16px !important; } /* 9-3. コンテンツ余白をモバイル向けに */ .sh-content { padding: 16px !important; } .record-page { padding: 16px !important; } } /* 9-4. テーブル → カード変換の統一仕上げ (koutei / customers / mitsumori) */ @media (max-width: 760px) { .job-list-table, .job-list-table thead, .job-list-table tbody, .job-list-table th, .job-list-table td, .job-list-table tr, table.tbl, table.tbl thead, table.tbl tbody, table.tbl th, table.tbl td, table.tbl tr { display: block; } .job-list-table thead, table.tbl thead { display: none; } .job-list-table tr, table.tbl tbody tr { background: var(--sh-surface) !important; border: 1px solid var(--sh-line) !important; border-radius: var(--sh-r-lg) !important; box-shadow: var(--sh-sh-1) !important; margin-bottom: 10px; padding: 4px 2px; overflow: hidden; } .job-list-table td, table.tbl td { border: 0 !important; border-bottom: 1px solid var(--sh-line-soft) !important; display: flex; justify-content: space-between; gap: 12px; white-space: normal; text-align: right; padding: 11px 14px !important; } .job-list-table td::before, table.tbl td::before { content: attr(data-label); font-weight: 700; color: var(--sh-ink-3); font-size: 12px; text-align: left; } /* 先頭セル = カードのヘッダ帯(モジュール色アクセント・淡) */ .job-list-table td:first-child, table.tbl td:first-child { background: var(--m-l) !important; color: var(--m-d, var(--sh-ink)) !important; font-weight: 700; justify-content: flex-start; } .job-list-table td:first-child::before, table.tbl td:first-child::before { display: none; } .job-list-table td:last-child, table.tbl td:last-child { border-bottom: 0 !important; } /* urgent はカード左に赤帯 */ .job-list-table tr.urgent, .job-list-table tr.is-urgent { box-shadow: inset 3px 0 0 var(--sh-coral), var(--sh-sh-1) !important; } } /* 9-5. ボトムタブバー(モバイル) — 既に統一されているが token を明示で固定 */ .sh-tabbar, .mobile-tabbar, nav.bottom-nav { background: var(--sh-surface); border-top: 1px solid var(--sh-line); } .sh-tabbar .fab, .mobile-tabbar .fab { background: var(--m); box-shadow: 0 6px 16px color-mix(in srgb, var(--m) 38%, transparent); } /* 9-5b. モバイルは FAB(＋) が新規作成を担うため、ツールバー内の「＋新規〜」ボタンは重複 → 非表示。FAB の無いタブレットでは表示維持。 ※ 実装の新規ボタンに data-fab-dup を付けると確実。下記は一般的なクラスも先回りで対象化(誤爆時は data-fab-dup 運用に切替)。 */ @media (max-width: 760px) { /* [Dispatch調整] 汎用セレクタ(.btn-newjob/#btnNewJob/.toolbar .btn-new 等)は誤爆でモバイル新規作成を壊す恐れがあるため除去。明示オプトイン [data-fab-dup] のみ非表示。各画面のFAB確認後に該当ボタンへ data-fab-dup を付与して有効化する(Phase2)。 */ [data-fab-dup] { display: none !important; } } /* 9-6. タブレット(768–1023): 2カラムを許容、過剰な余白を圧縮 */ @media (min-width: 768px) and (max-width: 1023px) { .summ-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } } /* ──────────────────────────────────────────────────────────── [unify-lite] フォームビルダー保護 (回帰A対策) §2 のカード枠強制を .fb-panel/.fb-canvas に当てず、§9 の 44px/16px をビルダー密UI(.fb-shell/.fk-shell/.lcset-card)配下に当てない。 ※テーマ色作り替え(§6)・ダーク撤去(§-1)は unify-lite では不適用(整合性維持)。 ──────────────────────────────────────────────────────────── */ .fb-panel, .fb-canvas { border: 0 !important; box-shadow: none !important; border-radius: 10px !important; } @media (max-width: 1023px) { .fb-shell .btn, .fb-shell .sel, .fb-shell .btn-icon, .fb-shell .ico-btn, .fk-shell .btn, .fk-shell .sel, .fk-shell .btn-icon, .fk-shell .ico-btn, .lcset-card .btn, .lcset-card .sel { min-height: auto !important; min-width: auto !important; } .fb-shell .input, .fb-shell .sel, .fk-shell input, .fk-shell select, .lcset-card input, .lcset-card select { font-size: 13px !important; } } /* ──────────────────────────────────────────────────────────── [batch2] トースト統一 (jobs navy pill / comm ink pill → 単一) kintai/shift/koutei は jobs `.toast`(navy 13/26)、comm系は ink 11/22 で割れていた。 SHOHAN.toast が生成する .toast を全ページ comm 基準(ink pill)へ統一。JS無改変。 ──────────────────────────────────────────────────────────── */ .toast { /* G3: 位置決め。home/mypage は comm/jobs/bridge どれも読まず position:static でページ最下部に埋まり視界外だった。comm-styles:244 と同値の fixed 配置を全ページ共通で保証する。 transform は !important にしない(comm の sh-toast-in 入場アニメの transform を殺さないため)。 */ position: fixed !important; left: 50% !important; bottom: 28px !important; transform: translateX(-50%); z-index: 9999 !important; background: var(--sh-ink) !important; color: #fff !important; border-radius: 999px !important; padding: 11px 22px !important; box-shadow: var(--sh-sh-3) !important; font-size: 13.5px !important; font-weight: 600 !important; } .toast.err { background: var(--sh-coral) !important; } .toast.ok { background: var(--sh-mint) !important; } /* ──────────────────────────────────────────────────────────── [theme-unify 2026-06-12] テーマカラー紐づけ統一（森さん指示） 1) タブ: テーマon時も accent 化せず選択=黒/候補=グレー (module-theme.css L254 の !important を同特異度・後読み後勝ちで中和) 2) レコード一覧の項目バー: テーマ色の少し薄い色(--mt-tint) に着色 (--mt-tint は module-theme.js 算出: 淡色=白25%混合/濃色=白88%混合=可読) 確認/詳細ページ内のテーブル(見積明細等)は灰色基調のまま除外 3) mitsumori 帳票切替ピルタブ: navy/テーマ色 → 黒(選択)/グレー(候補) ボタンのテーマ連動は現状維持(本ブロックは btn に一切触れない)。ロールバック: 本ブロック削除＋§3 active を var(--m) に戻すだけ。 ──────────────────────────────────────────────────────────── */ body.mt-on .tabs .tab, body.mt-on .tabbar button { color: var(--sh-ink-3, #6B7587) !important; } body.mt-on .tabs .tab:hover, body.mt-on .tabbar button:hover { color: var(--sh-ink, #0B1426) !important; } body.mt-on .tabs .tab.active, body.mt-on .tabbar button.active { color: var(--sh-ink, #0B1426) !important; border-bottom-color: var(--sh-ink, #0B1426) !important; } body.mt-on table.tbl th, body.mt-on .job-list-table thead th { background: var(--mt-tint, var(--sh-bg-2, #F4F5F8)) !important; color: var(--sh-ink, #0B1426) !important; } /* 確認/詳細ページ(レコード明細等)は一覧バー扱いにしない=灰色のまま */ body.mt-on .record-page-c table.tbl th, body.mt-on .record-page table.tbl th { background: var(--sh-bg-2, #F4F5F8) !important; color: var(--sh-ink-3, #6B7587) !important; } /* mitsumori 確認画面/一覧プレビューの帳票切替ピル */ .list-prev-tabs button.active { background: var(--sh-ink, #0B1426) !important; border-color: var(--sh-ink, #0B1426) !important; color: #fff !important; } /* [theme-unify批2 2026-06-12] 顧客・取引先(.ctab-bar)は独自タブクラスで上の網から漏れていた (森さんFB「タブがまだテーマカラーに紐づいている」)。同じ黒/グレー統一を適用。 */ .ctab-bar button { color: var(--sh-ink-3, #6B7587) !important; } .ctab-bar button:hover { color: var(--sh-ink, #0B1426) !important; } .ctab-bar button.active, body.mt-on .ctab-bar button.active { color: var(--sh-ink, #0B1426) !important; border-bottom-color: var(--sh-ink, #0B1426) !important; } /* [theme-unify批2 2026-06-12] FormKit詳細グリッド(detailHtml)のテーマ連動セル */ body.mt-on .fk-det-grid .fk-det-cell { background: var(--mt-box-bg, #fff); color: var(--mt-box-text, var(--sh-ink)); border: 1px solid var(--mt-box-border, var(--sh-line)); box-shadow: var(--mt-box-shadow, none); }