/* ══════════════════════════════════════════════════════════════════════════ kmk-playstation.css — PlayStation 風デザインシステムの「テスト適用」レイヤー ---------------------------------------------------------------------------- 方針: - 既存コンポーネント CSS は一切書き換えず、このファイルを「最後」に読み込む ことだけで全体トーンを PlayStation 風に切り替える上書きレイヤー。 - 主機構は CSS 変数 (--c-accent / --c-text / --r-* 等) の再マップ。 var() を使っている既存スタイルは自動的に新トーンになる。 - cutting_detail / machine_detail は body.cutting-detail-page で独自トークンを 高詳細度設定しているため、この :root 上書きの影響を受けない(作業指示書UIは保護)。 - レイアウト(寸法・グリッド・余白)は変更しない。色 / 角丸 / 影 / 文字ウェイトのみ。 - タブレット最優先: pointer:coarse でタッチ領域とコントラストを担保。 リバート方法 (元に戻す): 1) base.html と fm_menu_layout.html の から kmk-playstation.css の 行を削除する (または .design_backup/playstation_test_20260612 から両ファイルを復元) 2) このファイルは追加物なので残しても無害(読み込まれなければ何も起きない) ══════════════════════════════════════════════════════════════════════════ */ /* ── PlayStation カラートークン (出典: DESIGN.md) ────────────────────────── primary #0070d1 / pressed #0064b7 / active #004d8d canvas-light #fff / soft #f3f3f3 / surface-card #f5f7fa ink #000 / body rgba(0,0,0,.6) / mute #6b6b6b / ash #ccc */ :root, body[data-app="kmk"] { /* サーフェス (ライトキャンバスモード) */ --c-bg: #ffffff; --c-bg-soft: #f3f3f3; --c-bg-deep: #f5f7fa; --c-card: #ffffff; --c-input-bg: #ffffff; --c-border: #f3f3f3; /* hairline-light */ --c-border-2: rgba(0, 0, 0, 0.12); --c-border-3: rgba(0, 0, 0, 0.22); /* テキスト (on light canvas) */ --c-text: #000000; /* ink */ --c-text-2: rgba(0, 0, 0, 0.6); /* body-light */ --c-text-3: #6b6b6b; /* mute-light */ --c-text-4: #cccccc; /* ash-light */ /* PlayStation Blue を唯一のプライマリに */ --c-accent: #0070d1; --c-accent-2: #0064b7; --c-accent-3: #004d8d; --c-accent-tint: #f5f7fa; --c-accent-soft: #e6f0fb; /* 既存 kmk.css サイドバーのアクセント(元: オレンジ ea580c)を PS Blue に */ --kmk-theme: #0070d1; --kmk-deep: #004d8d; --kmk-soft: #53b1ff; --kmk-bg: #f5f7fa; /* 角丸: 入力 4px / カード 8px / CTA は pill(個別指定)。spec の 4-8-pill 体系 */ --r-xs: 4px; --r-sm: 8px; --r-md: 8px; /* 影: 平面が基本(カードは canvas にフラット)。押下時のみ持ち上げ */ --shadow-xs: none; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-card: none; --shadow: 0 4px 12px rgba(0, 0, 0, 0.16); /* active/pressed */ --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.16); /* 表示見出し用フォント(Roboto Light が来れば使用、無ければ Inter にフォールバック) */ --font-display: "Roboto", "Inter", "Pretendard", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif; } /* ══════════════════════════════════════════════════════════════ CTA — すべてのボタンは fully-rounded pill (rounded.full = 9999px) ══════════════════════════════════════════════════════════════ */ body[data-app="kmk"] .kbtn, body[data-app="kmk"] .kbtn-toggle, body[data-app="kmk"] .kbtn-sm, body[data-app="kmk"] .btn, body[data-app="kmk"] .btn-primary, body[data-app="kmk"] button.kbtn { border-radius: 9999px !important; /* letter-spacing は付けない: 密度の高い指示書画面で「× 割当解除」等が 微妙に幅超過して 1 行→2 行に折り返す原因になるため。 */ } /* プライマリ CTA = PlayStation Blue pill */ body[data-app="kmk"] .kbtn-blue, body[data-app="kmk"] .btn-primary { background: var(--c-accent) !important; border-color: var(--c-accent) !important; color: #ffffff !important; font-weight: 700; } body[data-app="kmk"] .kbtn-blue:active, body[data-app="kmk"] .btn-primary:active { background: var(--c-accent-2) !important; border-color: var(--c-accent-2) !important; } /* セカンダリ(light)= 透明 + ash 枠の pill */ body[data-app="kmk"] .kbtn-light { background: #ffffff !important; border: 1px solid var(--c-text-4) !important; color: var(--c-text) !important; } /* ══════════════════════════════════════════════════════════════ カード — 8px 角丸 / フラット(影なし)/ ヘアライン枠。押下/ホバーで持ち上げ ══════════════════════════════════════════════════════════════ */ body[data-app="kmk"] .card, body[data-app="kmk"] .md-card { border-radius: 8px; box-shadow: none; border: 1px solid var(--c-border); } body[data-app="kmk"] .card:hover, body[data-app="kmk"] .md-card:hover { box-shadow: var(--shadow); } /* ステータスバッジ・情報バッジは pill 化 */ body[data-app="kmk"] .status-badge, body[data-app="kmk"] .fm-card-badge { border-radius: 9999px !important; } /* ══════════════════════════════════════════════════════════════ タイポグラフィ — 大見出しは weight 300(PlayStation SST の「軽くて空気感のある」声) ※ 日本語の可読性のため本文は据え置き、サイズの大きい見出しだけ 300 にする ══════════════════════════════════════════════════════════════ */ body[data-app="kmk"] .topbar-title, body[data-app="kmk"] .fm-page-title, body[data-app="kmk"] .ih-card-title, body[data-app="kmk"] .fm-title { font-weight: 300; letter-spacing: 0.01em; } /* ══════════════════════════════════════════════════════════════ 入力 — 4px 角丸、フォーカスは PS Blue の枠(ハロー無し→枠の太さで合図) ══════════════════════════════════════════════════════════════ */ body[data-app="kmk"] .rr-input, body[data-app="kmk"] .lp-qb-select, body[data-app="kmk"] .lp-cutdate-input, body[data-app="kmk"] input[type="text"], body[data-app="kmk"] input[type="date"], body[data-app="kmk"] input[type="number"], body[data-app="kmk"] select, body[data-app="kmk"] textarea { border-radius: 4px; } body[data-app="kmk"] .rr-input:focus, body[data-app="kmk"] input:focus, body[data-app="kmk"] select:focus, body[data-app="kmk"] textarea:focus { border-color: var(--c-accent) !important; box-shadow: 0 0 0 2px rgba(0, 112, 209, 0.18) !important; outline: none; } /* ══════════════════════════════════════════════════════════════ 現場情報メニュー (fm_menu_layout.html — 独立キオスク画面) の PS 化 ・サイドバー = primary-nav の canvas-dark (黒) ・カード = 白 / 8px / フラット。色分けアクセントは導線のため温存 ══════════════════════════════════════════════════════════════ */ .fm-side { background: linear-gradient(180deg, #000000 0%, #121314 100%) !important; } .fm-card { border-radius: 8px !important; box-shadow: none !important; } .fm-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10) !important; } .fm-card-title { font-weight: 300; } .fm-card-badge { background: var(--c-accent, #0070d1) !important; color: #fff !important; border-radius: 9999px !important; } /* ══════════════════════════════════════════════════════════════ タブレット最優先 — タッチ領域 ≥44px、CTA は 48px 高さ pill を担保 ══════════════════════════════════════════════════════════════ */ @media (pointer: coarse) { /* タッチ操作の主要ページのみ CTA を 48px に拡大する。 ただし密度の高い作業指示書/機械別画面 (body.app-fullheight) と 小型ボタン (.kbtn-sm) は既存の詰めた寸法を尊重し拡大しない。 ── これをやらないと「× 割当解除」(元 min-height 20px) が 44-48px に膨らみ、 隣の「作業日」と重なる / 全体が縦長になる。 */ body[data-app="kmk"]:not(.app-fullheight) .kbtn:not(.kbtn-sm), body[data-app="kmk"]:not(.app-fullheight) .btn-primary:not(.kbtn-sm) { min-height: 48px; padding-left: 22px; padding-right: 22px; } } /* 空欄フィールドの非表示(上詰め)はテーマ非依存の恒久改善のため tablet.css 側へ移動済み (このテーマを外しても残す)。 */