/* ============================================================ 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)アクセント化: 地色は白/中立に固定し、選んだ色はタブ下線・ボタン等のアクセントだけに出す。 ============================================================ */ /* ──────────────────────────────────────────────────────────── −1. ライト固定 (ダークモード撤去・2026-06) テーマ切替トグルを廃止しライト1本に。保存済み data-theme="dark" が残っていても見た目はライトへ強制（CSSのみで安全に無効化）。 ──────────────────────────────────────────────────────────── */ :root[data-theme="dark"], html[data-theme="dark"], body[data-theme="dark"], .dark, body.dark { color-scheme: light; --sh-bg:#F7F8FB; --sh-bg-2:#EEF1F7; --sh-surface:#FFFFFF; --sh-panel:#F2F4F8; --sh-ink:#0B1426; --sh-ink-2:#344056; --sh-ink-3:#6B7587; --sh-ink-4:#9AA3B2; --sh-ink-5:#C7CCD6; --sh-line:#E5E8EE; --sh-line-soft:#EEF0F4; --sh-line-strong:#CBD0DA; --sh-blue:#2563EB; --sh-blue-2:#1D4ED8; --sh-coral:#E5484D; --sh-coral-tint:#FDECEC; --sh-amber:#D97706; --sh-amber-tint:#FEF3DA; --sh-mint:#0E8C5E; --sh-mint-tint:#E5F5EE; --sh-sh-1:0 1px 2px rgba(11,20,38,.04),0 1px 3px rgba(11,20,38,.06); --sh-sh-2:0 4px 12px rgba(11,20,38,.08),0 2px 4px rgba(11,20,38,.05); --sh-sh-3:0 8px 24px rgba(11,20,38,.10); --sh-sh-4:0 16px 40px rgba(11,20,38,.14); } /* テーマ切替トグル(太陽/月)を撤去 */ .theme-toggle, #themeToggle, [data-theme-toggle], .sh-theme-toggle, .topbar .theme-btn { display: none !important; } /* ──────────────────────────────────────────────────────────── 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, .fb-panel, .fb-canvas, .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); } .tabs .tab.active, .tabbar button.active { color: var(--m); border-bottom-color: var(--m); } /* ──────────────────────────────────────────────────────────── 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; } /* ──────────────────────────────────────────────────────────── 6. テーマカラー機能 = (C)アクセント化 body.mt-on は従来「ページ/箱/テーブルを選択色で塗る」挙動だった。 → 地色・サーフェスを中立(白/トークン)に戻し、選択色(--mt-text)はタブ下線・プライマリボタン・見出しアクセントだけに出す。 ──────────────────────────────────────────────────────────── */ /* 6-1. 塗りつぶしを全部キャンセル → 中立サーフェスへ */ body.mt-on { background: var(--sh-bg) !important; } body.mt-on .sh-layout, body.mt-on .sh-main-col, body.mt-on .sh-content { background: var(--sh-bg) !important; } body.mt-on .container { background: var(--sh-surface) !important; color: var(--sh-ink) !important; border: 1px solid var(--sh-line) !important; border-radius: var(--sh-r-xl) !important; } body.mt-on .summ, body.mt-on .mod-card, body.mt-on .k-item, body.mt-on .rep-day, body.mt-on .cinfo-card, body.mt-on .mt-field, body.mt-on .record-page, body.mt-on .record-page-c, body.mt-on .view-content, body.mt-on .view-meta { background: var(--sh-surface) !important; color: var(--sh-ink) !important; border-color: var(--sh-line) !important; box-shadow: var(--sh-sh-1) !important; } body.mt-on .table-wrap { border-color: var(--sh-line) !important; box-shadow: var(--sh-sh-1) !important; } body.mt-on table.tbl, body.mt-on .job-list-table { background: var(--sh-surface) !important; color: var(--sh-ink) !important; } body.mt-on table.tbl th, body.mt-on .job-list-table th { background: var(--sh-bg-2) !important; color: var(--sh-ink-3) !important; } body.mt-on table.tbl td, body.mt-on .job-list-table td { border-bottom-color: var(--sh-line-soft) !important; } body.mt-on table.tbl tbody tr:hover td, body.mt-on .job-list-table tbody tr:hover td { background: var(--sh-panel) !important; } body.mt-on .sel, body.mt-on .searchbar input, body.mt-on .input, body.mt-on input, body.mt-on select, body.mt-on textarea { background: var(--sh-surface) !important; color: var(--sh-ink) !important; border-color: var(--sh-line-strong) !important; } body.mt-on .dl dt, body.mt-on .dl dd { background: var(--sh-surface) !important; color: var(--sh-ink) !important; border-color: var(--sh-line) !important; } body.mt-on .btn.btn-ghost { background: #fff !important; color: var(--sh-ink) !important; border-color: var(--sh-line-strong) !important; } /* 6-2. 選んだテーマ色(--mt-text)を“アクセント”として活かす --m を選択色に差し替え → 既存の .btn / タブ下線 / アクセントがそのまま選択色で表示される(白サーフェス上のアクセントとして) */ body.mt-on { --m: var(--mt-text, var(--mod, var(--sh-mod-e))); --m-d: var(--mt-text, var(--mod-d, var(--sh-mod-e-d))); --m-l: color-mix(in srgb, var(--mt-text, var(--sh-mod-e)) 12%, transparent); } /* 見出し帯/セクションラベルのアクセント */ body.mt-on .page-head h2, body.mt-on .cinfo-head h2, body.mt-on .tpl-card > h3 { color: var(--sh-ink) !important; } body.mt-on .sec-title, body.mt-on .fld-sectionlabel { border-bottom-color: var(--m) !important; } /* ──────────────────────────────────────────────────────────── 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)); } .fb-shell { grid-template-columns: 1fr !important; } }