/* ============================================================================= v6.373.0: 下請け催促 設定ページ（R1・受信と可視化） ============================================================================= 承認済みサンプル docs/samples/shitauke_staff_map_sample.html の配置に準拠。 ⚠️ サンプルの生スタイル（.btn / border-radius:6px / 固定色）はそのまま採らない: ・ボタンは DESIGN.md §2 のピル型（9999px）= gs-btn / gs-btn-pill / gs-btn-primary を使う ・色は CSS 変数（--color-*）に寄せてダークモードで破綻させない ここに書くのは**このページ固有のレイアウト**（カード・統計・タグ）だけ。 */ /* 🩹 v6.387.0: **判定グループの表に横スクロールバーが常に出ていた**（1265px でも）。 原因は幅の不足（`overflow` の設定ではない）。実測: .sh-wrap の内側 1080 − 左右 padding 32 = 1048 → .sh-card-body の内側 1046 − 左右 padding 36 = **1010px** → 表は `min-width: 1040px`（v6.385.0 に「全欄 1440 + アラート −60 を合成して 1023px 必要」と 実測した値）なので **30px 足りず**、`.sh-table-wrap { overflow-x: auto }` がバーを出していた。 ⚠️ **`overflow: hidden` では直さない**（バーは消えても中身が見えなくなり、はみ出しに気づけなくなる）。 ⚠️ **表の min-width も下げない**（1040 は「潰れない最小幅」として実測した値なので、 下げると数値の入力欄が潰れる）。 → **枠のほうを広げる**。1080 → 1140 で表の置き場が 1010 → **1070px**（30px の余裕つき）。 */ .sh-wrap { max-width: 1140px; margin: 0 auto; padding: 20px 16px 64px; } /* ⚠️ v6.387.0: `.sh-head h1` / `.sh-lead` は**この変更で使われなくなったので削除した** （ページ上部の見出しと説明文を除去したため）。このファイルを読むのは alsok-renkei-settings.html **だけ**なので、他の画面への影響は無い。 */ /* ---------- トースト ---------- */ /* 🩹 v6.380.0: **この設定ページにも .toast の CSS が無かった**（ALSOK連携ページと同じ欠落）。 `#toast` の要素はあり common.js の toast() も動いていたが、素の
のままなので 保存メッセージが出っぱなしになっていた。⚠️ 信介さんの報告は ALSOK連携ページだったが、 **並列箇所を grep して同時に直す** #92。 ⚠️ `.toast` は style.css に無く、ページごとの CSS に並列定義されている。 ここは dashboard.css:2630 の値をそのままコピーして揃える。 */ .toast { position: fixed; top: 72px; left: 50%; transform: translateX(-50%); padding: 10px 18px; border-radius: 9999px; z-index: 800; color: #fff; font-size: 13px; font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,0.2); background: #202124; opacity: 0; pointer-events: none; } .toast.show { opacity: 1; } .toast.success { background: var(--color-green, #1e8e3e); } .toast.error { background: var(--color-red, #c5221f); } .toast.info { background: var(--color-primary, #1a73e8); } /* ---------- カード ---------- */ .sh-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; margin-bottom: 20px; overflow: hidden; } .sh-card-head { font-size: var(--text-sm, 15px); font-weight: 600; margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--color-divider, var(--color-border)); background: var(--color-surface-2); display: flex; align-items: center; gap: 10px; color: var(--color-text); } .sh-card-body { padding: 18px; } .sh-head-count { font-size: var(--text-xs, 12px); color: var(--color-text-muted); font-weight: 500; } /* 未登録カードだけ注意色の枠（サンプル準拠・アンバー系）。 DESIGN.md §0-2 のアンバー＝「警告・保留」に対応。 */ .sh-card-alert { border-color: var(--color-amber, #f29900); } .sh-card-alert .sh-card-head { background: rgba(242, 153, 0, 0.10); border-bottom-color: rgba(242, 153, 0, 0.35); } [data-theme="dark"] .sh-card-alert .sh-card-head { background: rgba(242, 153, 0, 0.16); } .sh-count-badge { background: #B45309; color: #fff; font-size: 12px; font-weight: 700; border-radius: 9999px; padding: 2px 10px; } /* ---------- §1 受信状況 ---------- */ .sh-status-row { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; } .sh-stat { min-width: 150px; } .sh-stat-label { font-size: var(--text-xs, 12px); color: var(--color-text-muted); margin-bottom: 4px; } .sh-stat-value { font-size: 19px; font-weight: 600; color: var(--color-text); } .sh-stat-sub { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; } .sh-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; } .sh-dot.ok { background: var(--color-green, #188038); } .sh-dot.ng { background: var(--color-red, #c5221f); } .sh-state-ok { color: var(--color-green, #188038); } .sh-state-ng { color: var(--color-red, #c5221f); } /* v6.374.0: 監視 OFF のときの「停止中」に添える注記（赤いだけだと「管制に伝わっている」と誤解される） */ .sh-state-note { display: block; font-size: 11px; color: var(--color-text-muted); font-weight: 500; margin-top: 2px; } /* ---------- §1.5 受信の死活監視（v6.374.0 R2） ---------- */ /* トグルは DESIGN.md §2「単一フラグの ON/OFF はトグルスイッチ」の標準実装をそのまま置く。 ⚠️ **共通化しに行かない**: 同じ 5 ルールが既に 8 ファイルに並んでおり（users / sites / customers / departments / order / monthly-shifts / syukan / dashboard）、 #92「並列定義は意図された複製」の運用が確立している。ここだけ共通化すると 「同じ部品なのに参照先が 2 通り」になるため、同じ値をコピーして揃える。 */ .toggle-with-label { display: inline-flex; align-items: center; gap: 10px; height: 44px; } .toggle-with-label .label-text { font-size: var(--text-sm, 14px); color: var(--color-text); cursor: pointer; user-select: none; font-weight: 500; } .toggle-switch { position: relative; width: 36px; height: 20px; display: inline-block; flex-shrink: 0; cursor: pointer; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; inset: 0; background: var(--gray-300, #c7c9cc); border-radius: 9999px; transition: background 180ms; } .toggle-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 2px; bottom: 2px; background: #fff; border-radius: 50%; transition: transform 180ms; box-shadow: 0 1px 2px rgba(0,0,0,0.15); } .toggle-switch input:checked + .toggle-slider { background: var(--color-primary, #1a73e8); } .toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); } .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--color-primary, #1a73e8); outline-offset: 2px; } /* 見出し右の ON / OFF バッジ。**一目で分かること**が要件なので、 OFF は「止まっている設定」だと分かるグレー、ON は緑にする。 */ .sh-hb-state { font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 9999px; white-space: nowrap; background: rgba(60, 64, 67, 0.10); color: var(--color-text-muted); } .sh-hb-state.is-on { background: rgba(24, 128, 56, 0.12); color: #17784f; } [data-theme="dark"] .sh-hb-state { background: rgba(255, 255, 255, 0.12); } [data-theme="dark"] .sh-hb-state.is-on { background: rgba(129, 201, 149, 0.18); color: #81c995; } .sh-hb-row { margin-bottom: 6px; } /* v6.374.0: ON にできない理由をその場に出す（押せないだけだと「壊れている」と読まれる）。 通常は説明色、ON のまま通知先を外した状態だけアンバー（DESIGN.md §0-2「警告・保留」）。 */ .sh-hb-guard { font-size: 12px; color: var(--color-text-muted); line-height: 1.7; margin-top: 2px; } .sh-hb-guard.is-warn { color: #B45309; font-weight: 600; } [data-theme="dark"] .sh-hb-guard.is-warn { color: #f0b429; } /* 押せないトグルは見た目でも分かるようにする（クリックは input の disabled が止める） */ .toggle-switch.is-disabled { cursor: not-allowed; opacity: 0.55; } .sh-hb-fields { display: flex; flex-wrap: wrap; gap: 18px 24px; align-items: flex-start; } /* ⚠️ min-width:0 を付ける（親が flex なので、無いと中の select / input ではみ出す） */ .sh-hb-field { min-width: 0; flex: 0 1 auto; } .sh-hb-field.sh-hb-actions { align-self: center; padding-top: 18px; } .sh-hb-label { display: block; font-size: 12px; color: var(--color-text-muted); margin-bottom: 6px; } .sh-hb-hint { font-size: 11px; color: var(--color-text-muted); margin-top: 5px; line-height: 1.6; } .sh-hb-num { width: 150px; } .sh-hb-num input { border: none; background: transparent; height: 100%; width: 100%; min-width: 0; font-size: var(--text-sm, 14px); font-family: inherit; font-weight: 500; outline: none; color: var(--color-text); } .sh-hb-unit { font-size: 12px; color: var(--color-text-muted); flex: 0 0 auto; } #shHbChannel { min-width: 200px; } /* 現在の状態の 1 行表示。途絶中はアンバー（DESIGN.md §0-2「警告・保留」）。 */ .sh-hb-status { margin-top: 16px; padding: 10px 14px; border-radius: 8px; font-size: var(--text-sm, 13px); line-height: 1.7; background: var(--color-surface-2); color: var(--color-text); } .sh-hb-status.is-lost { background: rgba(242, 153, 0, 0.10); border: 1px solid rgba(242, 153, 0, 0.35); } [data-theme="dark"] .sh-hb-status.is-lost { background: rgba(242, 153, 0, 0.16); } .sh-hb-status .sh-hb-sub { display: block; font-size: 12px; color: var(--color-text-muted); margin-top: 3px; } /* ---------- §1.6 催促の通知（v6.376.0 R3） ---------- */ /* 3 段階のスイッチ。⚠️ **今どの段階かが一目で分かること**が要件なので、 トグル（2 値）ではなく**選ばれている 1 つが塗られる**形にする（DESIGN.md §2 の 「単一フラグ = トグル / 複数から選ぶ = それ以外」の使い分け）。 */ .sh-rem-stages { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; } .sh-stage-btn { flex: 1 1 200px; min-width: 0; text-align: left; cursor: pointer; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); padding: 12px 14px; font-family: inherit; color: var(--color-text); transition: background 150ms, border-color 150ms; } .sh-stage-btn:hover:not(.is-active):not(:disabled) { background: var(--color-surface-2); } .sh-stage-btn .sh-stage-name { display: block; font-size: var(--text-sm, 14px); font-weight: 700; } .sh-stage-btn .sh-stage-desc { display: block; font-size: 11px; color: var(--color-text-muted); margin-top: 3px; line-height: 1.6; } .sh-stage-btn:disabled { opacity: .5; cursor: not-allowed; } /* 選択中。⚠️ 段階ごとに色を変える（停止=中立 / 試験運用=アンバー「保留」/ 本番運用=緑「稼働」）。 DESIGN.md §0-2 の意味色に合わせる。 */ .sh-stage-btn.is-active { border-width: 2px; padding: 11px 13px; font-weight: 700; } .sh-stage-btn.is-active[data-stage="off"] { border-color: var(--color-text-muted); background: rgba(60,64,67,.06); } .sh-stage-btn.is-active[data-stage="trial"] { border-color: var(--color-amber, #f29900); background: rgba(242,153,0,.10); } .sh-stage-btn.is-active[data-stage="live"] { border-color: var(--color-green, #188038); background: rgba(24,128,56,.10); } [data-theme="dark"] .sh-stage-btn.is-active[data-stage="off"] { background: rgba(255,255,255,.08); } [data-theme="dark"] .sh-stage-btn.is-active[data-stage="trial"] { background: rgba(242,153,0,.16); } [data-theme="dark"] .sh-stage-btn.is-active[data-stage="live"] { background: rgba(24,128,56,.18); } /* 見出し右のバッジ（停止 / 試験運用 / 本番運用）。.sh-hb-state を流用して色だけ足す */ .sh-hb-state.is-trial { background: rgba(242,153,0,.14); color: #B45309; } .sh-hb-state.is-live { background: rgba(24,128,56,.12); color: #17784f; } [data-theme="dark"] .sh-hb-state.is-trial { background: rgba(242,153,0,.20); color: #f0b429; } [data-theme="dark"] .sh-hb-state.is-live { background: rgba(129,201,149,.18); color: #81c995; } .sh-rem-table-wrap { margin-top: 16px; } .sh-rem-table { min-width: 700px; } .sh-rem-table td { vertical-align: middle; } .sh-rem-cond { font-size: 12px; color: var(--color-text-muted); } /* ⚠️ 表の中の数値入力は幅を固定する（可変にすると列がガタつく） v6.385.0: 同じ欄にチップ 2 つが入ったので **104 → 72px に狭めた**（信介さん指示）。 ⚠️ `-60`（3 文字）が入り切ること。右寄せにして桁を揃える。 🩹 **`.sh-select-pill` との複合セレクタで書く**（#96 詳細度・ソース順序の罠）。 `.sh-select-pill { width: 100% }` はこのファイルの**後ろ**にあり、単独クラス同士だと ソース順で向こうが勝つ。実測したら箱は 72px ではなく **202px** になっていた （旧 104px も同じ理由で効いていなかった＝列幅いっぱいに広がっていた）。 */ .sh-select-pill.sh-rem-num { width: 72px; height: 36px; padding: 0 10px; flex: none; } .sh-rem-num input { border: none; background: transparent; height: 100%; width: 100%; min-width: 0; font-size: var(--text-sm, 14px); font-family: inherit; font-weight: 500; outline: none; color: var(--color-text); text-align: right; font-variant-numeric: tabular-nums; } .sh-rem-actions { margin-top: 16px; } /* ---------- v6.385.0 通知先チップ（本人 / 管制） ---------- 🚩 色は**報告状況の画面と同じ**にする（管制担当者は両方を見るので、 同じ意味の表示は同じ色であるべき・v6.384.0 の「次：下番」で確立した作法 #92）。 本人 = #188038（報告済みの緑 `.ar-step.is-done`）／ 管制 = #6D28D9（`.ar-band.is-attention` の紫） ⚠️ CSS は共有せず**同値をコピー**する（alsok-renkei.css は日々見る画面・こちらは設定画面）。 */ .sh-tg-cell { display: flex; align-items: center; gap: 7px; } .sh-tg-chips { display: flex; gap: 4px; flex: none; } .sh-tg-chip { display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 0 11px; border-radius: 9999px; font-size: 11px; font-weight: 700; white-space: nowrap; cursor: pointer; border: 1.5px solid var(--color-border); background: var(--color-surface); color: var(--color-text-faint, var(--color-text-muted)); font-family: inherit; transition: background .12s, color .12s, border-color .12s; flex: none; } .sh-tg-chip:hover { border-color: var(--color-text-faint, var(--color-text-muted)); } .sh-tg-chip.is-h.is-on { background: rgba(24,128,56,.12); border-color: transparent; color: #188038; } .sh-tg-chip.is-k.is-on { background: rgba(109,40,217,.12); border-color: transparent; color: #6D28D9; } [data-theme="dark"] .sh-tg-chip.is-h.is-on { background: rgba(129,201,149,.18); color: #81c995; } [data-theme="dark"] .sh-tg-chip.is-k.is-on { background: rgba(167,139,250,.20); color: #c4b5fd; } /* 押せないチップ（前日確認（会社）の「本人」）。⚠️ 押せないことが**押す前に**分かる見た目にする */ .sh-tg-chip.is-locked { background: var(--color-surface-2); border-color: var(--color-divider, var(--color-border)); color: var(--color-text-faint, var(--color-text-muted)); opacity: .55; cursor: not-allowed; } .sh-tg-chip.is-locked:hover { border-color: var(--color-divider, var(--color-border)); } /* 両方とも押していない欄 = 送らない。**欄ごと沈ませて一目で分かるようにする** */ .sh-rem-table td.is-off { background: var(--color-surface-2); } .sh-rem-table td.is-off .sh-rem-unit { opacity: .45; } .sh-rem-num input:disabled { color: var(--color-text-faint, var(--color-text-muted)); cursor: not-allowed; } /* ⚠️ こちらも複合セレクタ（`.sh-select-pill` の background / border に勝つため・#96） */ .sh-select-pill.sh-rem-num.is-off { background: var(--color-surface-2); border-color: var(--color-divider, var(--color-border)); } .sh-rem-unit { font-size: 11px; color: var(--color-text-muted); flex: none; } /* ---------- v6.387.0 設定例ブロック（表の**直下**・信介さんのサンプル準拠） ---------- 🚩 v6.385.0 は同じ内容を「凡例」として**表の上**に置いていたが、 同じ形のチップが表の上にあると**説明ではなく本当の設定項目に見える**（信介さん指摘）。 → 表の下へ移し、**点線枠 + 背景色 + 「設定例」バッジ**で本体と見た目を変える。 ⚠️ **操作できないことは見た目ではなく構造で担保する**（下記 pointer-events + span 要素）。 */ .sh-tg-example { border: 1px dashed var(--color-border); border-radius: 10px; background: var(--color-surface-2); padding: 14px 15px; margin-top: 16px; /* 🚩 **クリックが要素に届かない**（見た目だけ無効にしない）。 ⚠️ 中のチップは `` なので**キーボードの焦点も入らない**（`