/* /Components/CommonDatePicker.razor.rz.scp.css */ /* 表示専用の曜日サフィックス。 CommonDatePicker は常に Variant.Outlined＋Margin.Dense 固定＝フィールド幾何が一定 （app.css: .mud-input.mud-input-outlined の padding 10.5px・詰めて高さ40px・値は固定幅 yyyy/MM/dd）。 値（左詰め）の直後にオーバーレイで曜日を重ねる。パース対象の Text には触れない（display-only）。 */ .cdp-wrapper[b-rj06j30mcz] { position: relative; } .cdp-weekday[b-rj06j30mcz] { position: absolute; /* ── 縦位置の決定（3ラウンドの帰結・実測で確定）────────────── 曜日オーバーレイの縦中心を「入力値テキストの実測Y中心」に一致させる。 ★前提（両方が揃って初めて成立・片方だけ変えると縦ずれ再発）★ (1) 枠は常に高さ40px 固定（app.css: .cdp-wrapper .mud-input.mud-input-outlined ＝ ×クリアの有無で高さが変わらないための PR#308 の固定）。 (2) その40px 枠の中で入力値テキストは「枠の縦中央より約8px下」に描画される （MudDatePicker outlined+dense のラベル浮き＋app.css の入力縦 padding 0 化の帰結）。 ★実測（申請日フィールド・値あり・deviceScaleFactor2）★ ラッパー上端=148 のとき 入力テキスト中心=176（＝枠中心168＋8）。曜日 box は top:0/height:40 で 148〜188。 - align-items:center → 曜日中心=168（入力より 8px 上＝右肩ずれ・第1ラウンドの不具合） - align-items:flex-end → 曜日中心=180（入力より 4px 下＝第3ラウンドで指摘の下ずれ） - flex-end ＋ padding-bottom:4px → 曜日中心=176（入力と一致・採用） ＝「枠中央基準の center」でも「単純な flex-end」でもなく、flex-end から 4px 引き上げて 入力テキスト中心へ合わせる。40px 枠固定（app.css）と入力の縦中央寄せは対で成立するため、 どちらか片方を変えるときは必ず両者を実測（入力テキスト中心Y と曜日中心Y の差 ±1px 以内）で 再確認すること（推測で align 値を変えない）。 */ top: 0; height: 40px; display: flex; align-items: flex-end; padding-bottom: 4px; /* flex-end（曜日中心=入力+4px）から 4px 引き上げ＝入力テキスト中心に一致（実測 diff 0）。 */ /* 値「yyyy/MM/dd」末尾の直後（+2〜3px 余白）に曜日を置く（2026-07-23 項目2＝ (水)が日付末尾の数字と少し重なる不具合の是正）。実測：入力の左端オフセット≒16px（枠 padding＋ 入力スロットの左）＋値の実幅（≒9.5ch＝数字8＋スラッシュ2）＝日付末尾。旧 10.5px では左端 オフセットを過小評価して曜日が末尾に約2.7px食い込んでいた。16px にして末尾＋約2.8px の余白を確保。 */ left: calc(16px + 9.5ch); font-size: 1rem; line-height: 1; color: var(--mud-palette-text-secondary); /* クリックを妨げない（フィールドクリックでカレンダーを開く）・選択不可の飾り。 */ pointer-events: none; user-select: none; white-space: nowrap; } /* ラベル無し（cdp-no-label＝表組みフォーム等・TH がラベルを担い Label パラメータ未指定）の縦位置変種。 上の 4px はラベル有り前提（浮きラベルが上部を占有し入力テキストが枠中央+約8px下に描画される）の補正量。 ラベル無しでは入力テキストが枠中央+約3.5px（実測: 40px枠 414〜454 中央434・テキスト中心437.5）となり、 4px のままだと曜日中心≒442＝約4.5px 下ずれ。8px へ引き上げて中心437.5±1 に一致させる。 ★変更時は必ずラベル有り（申請状況フィルタの申請日等）とラベル無し（申請登録ダイアログの対象日）の 両文脈で「入力テキスト中心Yと曜日中心Yの差 ±1px 以内」を実測すること（上の前提コメント参照）。 */ .cdp-no-label .cdp-weekday[b-rj06j30mcz] { padding-bottom: 8px; } /* /Components/KintaiCheckBox.razor.rz.scp.css */ /* KintaiCheckBox のスコープ付き CSS＝KintaiCheckList の項目行（kintai-checklist-row）と同一表現。 native checkbox＝Tab/Space がブラウザ実装で効き、MudCheckBox の hover 円・ripple は出ない。 */ label.kintai-checkbox[b-0t13bklcmn] { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 2px 6px; border-radius: var(--mud-default-borderradius); cursor: pointer; user-select: none; } label.kintai-checkbox:hover[b-0t13bklcmn] { background-color: var(--mud-palette-action-default-hover); } label.kintai-checkbox-disabled[b-0t13bklcmn] { cursor: default; color: var(--mud-palette-text-disabled); } label.kintai-checkbox-disabled:hover[b-0t13bklcmn] { background-color: transparent; } /* 見た目は MudCheckBox（Color.Default・mud-icon-size-medium=24px）と同一にする。 CSS border による再現（第3弾）は枠の太さ・角丸・チェック時の色（Mud はチェック済みも同じグレー＝ rgba(0,0,0,0.537) の塗り箱＋白抜きチェック。primary の青では塗らない）が食い違うため （申請承認/勤怠確認・確定の MudCheckBox を実測）、Mud と同じマテリアルアイコン （CheckBoxOutlineBlank／CheckBox）の SVG を置く方式へ。 ⚠ SVG は background-image ではなく mask-image で置く（以前の割り切りはこれで解消）。 data URI 内では CSS 変数が使えないため、以前は色を rgba(0,0,0,0.54) で焼き込んでいた（ライトテーマ専用＝ ダークではチェックボックスが背景と同化して消える）。マスクなら SVG は形だけを与え、色は background-color: var(--mud-palette-text-secondary) がテーマ追従で与える＝data URI は1組のままでよい。 SVG の fill 属性は削除する（マスクはアルファを見るため、既定の不透明な塗りで形どおりに抜ける。 ライトの実効色は --mud-palette-text-secondary = rgba(0,0,0,0.537) ＝ 従来の焼き込み値と同一）。 native input のまま＝Tab フォーカス・Space トグルはブラウザ実装（勤務時間帯変更の設計書 §3.2 のキーボード要件）。 */ .kintai-checkbox input.kintai-checkbox-input[b-0t13bklcmn] { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0; flex: 0 0 auto; border: 0; background-color: var(--mud-palette-text-secondary); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); cursor: inherit; } .kintai-checkbox input.kintai-checkbox-input:checked[b-0t13bklcmn] { /* MudBlazor の CheckBox アイコン（塗り箱＋白抜きチェック）＝チェック済みも同じグレー（Color.Default）。 */ -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } /* 警告表示（呼び出し側が Class="kintai-checkbox-warning" を渡す）＝チェック枠の色だけを警告色トークンに替える。 トークンはライト／ダークで値が切り替わるので、どちらのテーマでも背景に対して読める。 形（マスク）は変えない＝チェック有無は形で区別できる（色だけに頼らない）。 */ label.kintai-checkbox.kintai-checkbox-warning input.kintai-checkbox-input[b-0t13bklcmn] { background-color: var(--kintai-text-warning); } .kintai-checkbox input.kintai-checkbox-input:disabled[b-0t13bklcmn] { /* Mud の disabled（rgba(0,0,0,0.26)）相当＝同アイコンの減光で表す。 */ opacity: 0.48; } /* view-mode（D2 詳細閲覧）: 閲覧時はチェック済み項目の文字も本文色で読ませる（他の入力系と同じ揃え）。 ⚠ 上の .kintai-checkbox-disabled 規則（詳細度 0,2,1＋scoped の [b-xxx] 付与）と同一ファイル内に置き、 .view-mode を足して 0,3,1 へ引き上げることで確実に後勝ちする（KintaiSelect.razor.css の `.view-mode select.kintai-select-native:disabled` と同じ作法）。祖先 .view-mode は ApplicationDialog 側にあり、Blazor scoped は最後の複合セレクタにのみ [b-xxx] を付与するため 祖先マッチはそのまま効く。 */ .view-mode label.kintai-checkbox-disabled[b-0t13bklcmn] { color: var(--mud-palette-text-primary); } /* view-mode（詳細閲覧）: チェックの付いていない項目は行ごと隠す。 app.css の `.view-mode .kintai-check-unchecked { display: none; }`（0,2,0）は、この部品の `label.kintai-checkbox { display: inline-flex; }`（scoped の [b-xxx] 込みで 0,2,1）に負けて効かず、 枠だけが消えて文字が残っていた。同一ファイル内で .view-mode を足して（[b-xxx] 込みで 0,4,1）順序に関係なく勝たせる （上の .view-mode label.kintai-checkbox-disabled と同じ作法・!important は使わない）。 */ .view-mode label.kintai-checkbox.kintai-check-unchecked[b-0t13bklcmn] { display: none; } /* ⚠ キーボードフォーカスのリングを input 自身へ書かないこと（不変条件 F-2）。 この input は上の規則で mask-image を持つ＝マスクは要素の描画全体（背景・outline・box-shadow）を グリフの形で切り抜くため、ここへリングを書いても 1px も表示されない （2026-08-18 まで二重リングを書いていたが実際には出ていなかった＝実害があった）。 リングは「実際に描画される箱」＝親の label へ移した。定義は app.css の共通フォーカス節 label.kintai-checkbox:has(input:focus-visible) にあり、意匠（内＝テーマ色 box-shadow ／外＝text-primary の outline）と理由の正もそちら。 ここへ outline / box-shadow を書き戻すと FocusRingGuardTests が赤化する。 */ /* /Components/KintaiCheckList.razor.rz.scp.css */ /* KintaiCheckList のスコープ付き CSS。 枠・浮きラベル・disabled の表現は MudBlazor の実クラス（mud-input-outlined / mud-input-outlined-border / mud-input-label）＋app.css の共通規則が担い、ここでは 「枠内のスクロール可能なチェックボックスリスト」の差分だけを持つ。 コンテナ（.mud-input.mud-input-outlined）の padding 10.5px は app.css 規約＝リストの外周余白になる。 */ /* リスト本体＝上限高さ≒6行（行高 28px × 6）・超過分は縦スクロール。 ⚠ padding 4px と max-height の +8px はフォーカスリング用（意匠の余白ではない）。 行のリングは outline-offset 2px ＋ 太さ 2px ＝行の外へ 4px はみ出す。overflow-y:auto の箱は はみ出しをそのまま切るため、余白が無いと先頭行・最終行のリングだけ欠ける。 4px の padding を持たせたぶん、6行ぶんの見え方を保つために上限高さも 168px → 176px（+8px＝上下 4px）にする。 */ .kintai-checklist .kintai-checklist-items[b-rg5b79v8h5] { width: 100%; padding: 4px; max-height: 176px; overflow-y: auto; } /* 1行＝native checkbox＋ラベル（label 全体がクリック対象）。hover はネイティブの淡色帯のみ （MudCheckBox の hover 円・ripple は使わない＝KintaiSelect の▼と同じ思想）。 */ .kintai-checklist .kintai-checklist-row[b-rg5b79v8h5] { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 2px 6px; border-radius: var(--mud-default-borderradius); cursor: pointer; user-select: none; } /* 1段字下げ（KintaiSelectItem.Indent）。「見出し行＋その配下」を1つのリストで表すときに使う。 ⚠ 字下げは行の左 padding で与える（ラベル文字列に空白を混ぜない）。行幅は変わらず、字下げたぶん テキスト領域が縮むだけ＝下の .kintai-checklist-text（nowrap + ellipsis）が長い事業所名を省略する ＝折り返しで行高が増える経路は無い（狭い幅でも行高 28px は不変）。 */ .kintai-checklist .kintai-checklist-row-indent[b-rg5b79v8h5] { padding-left: 26px; } .kintai-checklist .kintai-checklist-row:hover[b-rg5b79v8h5] { background-color: var(--mud-palette-action-default-hover); } .kintai-checklist .kintai-checklist-row-disabled[b-rg5b79v8h5] { cursor: default; color: var(--mud-palette-text-disabled); } .kintai-checklist .kintai-checklist-row-disabled:hover[b-rg5b79v8h5] { background-color: transparent; } /* native checkbox＝Tab/Space がブラウザ実装で効く（色は下のマスク＋background-color で与える）。 寸法は単体版 KintaiCheckBox と同値に保つ（同一ダイアログ内で単体とリストが混在する画面がある ＝RoleOverrideEditDialog の「全社」チェック＋会社/事業所リスト。16px→18px に変更）。 */ /* 描画は KintaiCheckBox と同一（MudCheckBox Color.Default のマテリアルアイコン SVG）。 チェック済みも同じグレー（rgba(0,0,0,0.54)＝Mud 実測）＝primary の青では塗らない。 ⚠ SVG は mask-image で置き、色は background-color がテーマ追従で与える（過去の割り切りを解消。 理由と作法の正は KintaiCheckBox.razor.css のコメント＝2箇所で同じ表現を保つ）。 */ .kintai-checklist input.kintai-checklist-checkbox[b-rg5b79v8h5] { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0; flex: 0 0 auto; border: 0; background-color: var(--mud-palette-text-secondary); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); cursor: inherit; } .kintai-checklist input.kintai-checklist-checkbox:checked[b-rg5b79v8h5] { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .kintai-checklist input.kintai-checklist-checkbox:disabled[b-rg5b79v8h5] { opacity: 0.48; } /* ⚠ キーボードフォーカスのリングを input 自身へ書かないこと（不変条件 F-2）。 この input は mask-image でグリフを抜いている＝マスクが outline も box-shadow も切り落とすため、 ここへ書いたリングは表示されない（理由の正は KintaiCheckBox.razor.css の同じ位置のコメント）。 リングは行（.kintai-checklist-row）へ移した。定義は app.css の共通フォーカス節 .kintai-checklist-row:has(input:focus-visible) ＝行1本を囲む形になるので、下の .kintai-checklist-items に padding 4px を持たせて リング（outline-offset 2px ＋ 2px）が上下端で切れないようにしている。 */ .kintai-checklist .kintai-checklist-text[b-rg5b79v8h5] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Disabled（全体無効）＝文字を無効色に（MudSelect Disabled と同じ見え方。枠線は mud-disabled 側の規則）。 */ .kintai-checklist .mud-input.mud-disabled .kintai-checklist-items[b-rg5b79v8h5] { color: var(--mud-palette-text-disabled); } .kintai-checklist .kintai-checklist-empty[b-rg5b79v8h5] { color: var(--mud-palette-text-secondary); padding: 2px 6px; } /* /Components/KintaiPager.razor.rz.scp.css */ /* KintaiPager のスコープ付き CSS。 ページャの骨格（枠線・高さ・font-size・ボタン配置）は MudBlazor 標準の .mud-table-pagination 系が担う ＝ここは「MudSelect ではなく KintaiSelect（ネイティブ select）を使ったことによる差分」だけを持つ。 打ち消す対象: ・KintaiSelect は Outlined（枠 fieldset.mud-input-outlined-border＋コンテナ padding 10.5px）を描く。 MudTablePager の行数セレクタは枠なし・詰めた表示なので、その装飾を外す。 ・.mud-table-pagination .mud-select（0,2,0）の margin-right:-14px が KintaiSelect のルートにも当たるため、 MudTablePager の .mud-table-pagination-select と同じ左右 10px・最小幅 52px に戻す。 ⚠ MudBlazor.min.css は scoped バンドルより後に読み込まれる（index.html）＝同点では負ける。 各規則は打ち消す相手より高い詳細度になるよう、あえて冗長なセレクタで書いている。 */ /* 罫線色の明示継承: .mud-table スコープの上書き（app.css の .mud-table 規則 ＝--mud-palette-table-lines に var(--kintai-table-lines) を流し込む定義）は table の外に置かれる本部品へ届かず、上罫線が MudBlazor 既定（#e0e0e0）に落ちて他画面のページャと Δ6/255 の微差が出る。同じ上書きをここでも行い、MudTable 内蔵ページャと同値に解決させる。 */ .kintai-pager[b-2oxk92i2uj] { --mud-palette-table-lines: var(--kintai-table-lines); } /* 高さ: 一覧共通の 41px 化（app.css の .kintai-list .mud-table-pagination-toolbar＝height:auto＋min-height:41px） が .kintai-list スコープ外の本部品へ届かず、MudBlazor 既定の 52px のままだった（ 「表の下の行に納まっていない」・実測 52px vs 他画面 41px）。同じ上書きをここで行う。 */ .kintai-pager[b-2oxk92i2uj] .mud-table-pagination-toolbar { height: auto; min-height: 41px; } /* ルート（.mud-select kintai-select kintai-pager-select）＝MudTablePager の .mud-table-pagination-select と同値。 */ .kintai-pager[b-2oxk92i2uj] .kintai-pager-select { flex-grow: 0; min-width: 52px; margin: 0 10px; } /* 枠のコンテナ padding（app.css の .mud-input.mud-input-outlined＝10.5px）を落とす。 */ .kintai-pager[b-2oxk92i2uj] .kintai-pager-select .mud-input.mud-input-outlined { padding: 0; } /* 枠そのもの（未フォーカス・hover・disabled では出さない）。 */ .kintai-pager[b-2oxk92i2uj] .kintai-pager-select .mud-input.mud-input-outlined .mud-input-outlined-border { border: 0; } /* フォーカス中だけ枠を戻す。この select は outline:none（KintaiSelect.razor.css）で自前のリングを 持たない＝Outlined の枠 1 本がキーボードフォーカスの唯一の指標（他の入力欄と同じ構造）。 app.css の共通規則（:focus-within 時に border-color だけを --kintai-border-focus へ写す）は border-width/style を持たないため、上の border:0（幅 0）の下では色だけ乗っても見えない。 セレクタへ :focus-within を足して詳細度を1段上げ、フォーカス中は幅・色とも明示的に戻す。 */ .kintai-pager[b-2oxk92i2uj] .kintai-pager-select:focus-within .mud-input.mud-input-outlined .mud-input-outlined-border { border: 2px solid var(--kintai-border-focus); } /* ネイティブ select は「枠いっぱいに広げる」負マージン方式（KintaiSelect scoped）をやめ、 MudTablePager の行数セレクタと同じ詰めた寸法・文字サイズにする。 */ .kintai-pager[b-2oxk92i2uj] .kintai-pager-select select.kintai-select-native { margin: 0; padding: 0 24px 0 7px; height: auto; min-width: 0; font-size: 0.875rem; } /* ▼の位置は詰めた padding（右 24px）に合わせる。 */ .kintai-pager[b-2oxk92i2uj] .kintai-pager-select .kintai-select-arrow { right: 0; } /* /Components/KintaiSelect.razor.rz.scp.css */ /* KintaiSelect のスコープ付き CSS。 枠・ラベル・hover・focus・エラー・disabled の表現は MudBlazor の実クラス （mud-input-outlined / mud-input-outlined-border / mud-input-label）が担うため、ここでは 「ネイティブ select を MudSelect の入力スロットに見せる」差分だけを持つ。 MudBlazor の入力スロット CSS は input/textarea/div 要素限定セレクタのため select には効かない ＝Dense Outlined の実測値（padding 10.5px 14px・line-height 1.1876em）をここで再現する。 */ /* ルートは mud-select クラス（display:flex; flex-grow:1）＝MudSelect と同じくツールバー内で伸びる。 入力スロット（.mud-input）はコントロール幅いっぱいに（MudSelect の input width:100% と同じ見え方）。 */ .kintai-select .mud-input[b-8uwdrjbut0] { width: 100%; } select.kintai-select-native[b-8uwdrjbut0] { appearance: none; -webkit-appearance: none; -moz-appearance: none; display: block; width: 100%; min-width: 0; margin: 0; border: 0; /* ⚠ この outline:none は「MudSelect と同じ見た目にする」ための意図的な打ち消しで、フォーカスの 可視化を捨てているわけではない。この select にとって唯一のフォーカス指標は 親 .mud-input-outlined の枠（:focus-within で 2px＋色が変わる）で、その色は app.css が --kintai-border-focus へ写して 1.4.11（3:1）を担保している。 ＝ここへブラウザ既定のリングを戻すと、枠と二重になって MudSelect と見えが食い違う。 規則そのものは変えない（確認済み）。 */ outline: none; background: none; color: var(--mud-palette-text-primary); font: inherit; /* ⚠ `font: inherit` は line-height も含めて継承するため、親コンテナに付く mud-typography-subtitle1（勤怠確認・確定の一括操作の帯 等）の line-height を そのまま引き継いでしまい、下記 `height:1lh` の計算結果が Dense Outlined の想定値 （このファイル冒頭コメントの実測 line-height 1.1876em）より大きくなる。 他の 40px 系入力（TimeSelector・cdp-wrapper 等）と枠の高さを揃えるため、 ここで明示的に上書きする。 */ line-height: 1.1876em; height: 1lh; box-sizing: content-box; /* 全面被覆（視覚上のフィールドとクリック領域の一致）: コンテナ（.mud-input）は app.css 規約で padding 10.5px（縦）/右 14px を持つ。select を負マージンで その padding 領域まで拡張し、同量を自身の padding として持ち直す＝テキスト位置は不変のまま、 select の当たり判定（cursor:pointer・クリックで開く）がフィールド枠の全域になる。 右 padding 42px ＝ コンテナ右 14px ＋ ▼の逃げ 28px（▼はコンテナ右端から 7〜31px を占める＝ ▼領域を完全に含み、テキスト右端と▼の間に常時 10px 以上の余白）。 */ margin: -10.5px -14px -10.5px 0; padding: 10.5px 42px 10.5px 14px; /* 幅規約: コントロール幅の下限＝最長オプション＋padding＋▼領域（max-content）。 ネイティブ select の開いた OS リストは「コントロール幅と最長項目幅の大きい方」で描画されるため、 コントロール側が最長項目を収めていれば閉状態と開リストの幅が一致する。上限は設けない （候補ラベルは「社員No: 氏名」「コード: 事業所名」で有界）。width:100% は親が広いときに MudSelect 時代（flex-grow で利用可能幅へ拡張）と同じ振る舞いを保つ。 */ min-width: max-content; cursor: pointer; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } select.kintai-select-native:disabled[b-8uwdrjbut0] { color: var(--mud-palette-text-disabled); cursor: default; } /* view-mode（D2 詳細閲覧）: 閲覧時は disabled でも本文色で読ませる。 ⚠上の :disabled 規則（app.css の .view-mode 規則と同一詳細度だが scoped の [b-xxx] 付きで勝つ）を、 同一 scoped css 内に置くことで確実に後勝ちする（.view-mode は ApplicationDialog 側の祖先＝ Blazor scoped は最後の複合セレクタにのみ [b-xxx] を付与するため祖先マッチはそのまま効く）。 */ .view-mode select.kintai-select-native:disabled[b-8uwdrjbut0] { color: var(--mud-palette-text-primary); opacity: 1; } /* kintai-readonly（読み取り専用表示）＝展開は封じる（disabled）が値は通常の文字色で読める。 背景の薄グレーは app.css の .kintai-readonly 共通規約が担う。 ⚠ ▼は app.css には任せられない：共通規約の .kintai-readonly .mud-input-adornment は MudSelect/ MudAutocomplete の▼（MudBlazor が描く adornment）を消すものだが、本コンポーネントの▼は ネイティブ select に重ねた自前描画（.kintai-select-arrow・下記）で adornment ではないため当たらない。 さらに素の .kintai-select-arrow{display:flex} は component-scoped で [b-xxx] が付き詳細度(0,2,0)＝ app.css の .kintai-readonly .mud-input-adornment(0,2,0) と同点になり、読み込み順（app.css→バンドル）で バンドル側が後勝ちする。よって▼の非表示はここで明示する（詳細度(0,3,0)で確実に勝つ）。 */ .kintai-readonly select.kintai-select-native:disabled[b-8uwdrjbut0] { color: var(--mud-palette-text-primary); } .kintai-readonly .kintai-select-arrow[b-8uwdrjbut0] { display: none; } /* ▼（CSS/SVG 描画）＝クリックを select へ透過（hover 円なし・開閉はネイティブ）。 */ .kintai-select-arrow[b-8uwdrjbut0] { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; pointer-events: none; } /* 開いた OS リストの文字色はネイティブ既定に戻す（select の text-primary を継がせない環境向けの保険）。 */ select.kintai-select-native option[b-8uwdrjbut0] { color: initial; } /* /Components/TimeSelector.razor.rz.scp.css */ /* TimeSelector（1つの入力欄 ＋ 時／分の2列リスト）用のスコープ付き CSS。 枠・ラベル・hover・focus・エラーの表現は MudBlazor 実クラスが担い、ここでは 「入力欄1つ」と「自前のリスト」を Dense Outlined の入力スロットに見せる差分だけを持つ。 ■ 寸法の出所（Figma 219-4040・原寸 1100×880 のスクリーンショットからの実測） 入力欄 120px 幅（幅クラス .kintai-w-s）／リスト幅＝入力欄幅／行ピッチ 36px／ 選択チップ 49×26px（角丸 4px）／列間 10px／左右パディング 6px／文字 16px／リスト角丸 8px。 49px は 120 −（左右 6px ×2）− 列間 10px を2列で分けた値＝行は列いっぱいに広がる。 ⚠ CSS の完了条件は実ピクセル（実ブラウザでの突合）。ここの値は Figma 実測の初期値。 ■ 色はトークン経由（直値を書かない） 地＝--mud-palette-surface（MudPopover の mud-paper が付ける）／選択＝--mud-palette-primary と --mud-palette-primary-text／文字＝--mud-palette-text-primary／ hover＝--mud-palette-action-default-hover。 hover はカレンダーの日セルと同色にする（MudBlazor 9.4.0 の実 CSS `.mud-picker-calendar .mud-day:hover{background-color:var(--mud-palette-action-default-hover)}` で確認）。 ⚠ 実色は統括が実ブラウザで突合する。 ■ 縦寸法は旧実装（時／分プルダウン分離型）から移植する height:1lh・負マージン・縦 padding 10.5px・content-box。ここを触るとフィールドの高さが変わる （MudBlazor 側に高さを決める規則が無く、この箱が実体のため）＝他のフォーム部品と高さが揃わなくなる。 ■ キーボードフォーカスの見え方 input は outline:none を持つ。これは「入力欄＋リスト」を1つの入力スロットに見せるための意図的な 打ち消しで、この部品にとっての指標は親 .mud-input-outlined の枠（:focus-within で 2px＋色が変わる）。 色は app.css が --kintai-border-focus へ写して 1.4.11（3:1）を担保している。 */ .kintai-ts-root .mud-input[b-p9r5euwchm] { width: 100%; } /* ▼と MudPopover のプレースホルダ（空 div）を収めるため位置決めの基準にする。 */ .kintai-ts-field[b-p9r5euwchm] { position: relative; } /* ── 入力欄（1つ・"HH:mm"） ── */ input.kintai-ts-text[b-p9r5euwchm] { position: relative; z-index: 1; display: block; width: 100%; min-width: 0; border: 0; outline: none; background: none; color: var(--mud-palette-text-primary); font: inherit; height: 1lh; box-sizing: content-box; margin: -10.5px 32px -10.5px 0; /* 右＝▼の帯（▼の右 14px ＋ ▼ 24px ＋ 文字との間 8px − 親の padding-right 14px） */ padding: 10.5px 0 10.5px 14px; /* 左＝隣の日付欄と同じ 14px（2026-08-28 実測で 0px だった） */ cursor: text; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } input.kintai-ts-text:disabled[b-p9r5euwchm] { color: var(--mud-palette-text-disabled); cursor: default; } /* Placeholder（値未入力時の案内文言）＝グレー表示。 */ input.kintai-ts-text[b-p9r5euwchm]::placeholder { color: var(--kintai-text-muted); opacity: 1; } /* kintai-readonly＝編集は封じる（readonly）が値は通常の文字色で読める。 ▼は app.css の .kintai-readonly .mud-input-adornment{display:none} が消す。 */ .kintai-readonly input.kintai-ts-text[b-p9r5euwchm] { color: var(--mud-palette-text-primary); cursor: default; } /* view-mode（D2 詳細閲覧）: 閲覧では disabled でも本文色＋不透明で読ませる（KintaiSelect と同型）。 */ .view-mode input.kintai-ts-text[b-p9r5euwchm], .view-mode input.kintai-ts-text:disabled[b-p9r5euwchm] { color: var(--mud-palette-text-primary); opacity: 1; } /* ▼（CSS/SVG 描画・pointer-events なし）＝hover 円なし。開閉は入力欄のフォーカスで行う。 */ .kintai-ts-arrow[b-p9r5euwchm] { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; pointer-events: none; } /* MudPopover が置く空の div（プレースホルダ）が入力スロットの flex 行で隙間を作らないようにする。 ⚠ この div は MudBlazor が描く要素＝**このコンポーネントのスコープ属性が付かない**。 スコープ付き CSS は最後のセレクタへ属性を足すため、素直に書くと当たらない（死んだ規則になる）。 `::deep` で「スコープはここまで」を明示し、その先は素のセレクタとして出す。 */ .kintai-ts-field[b-p9r5euwchm] .mud-popover-cascading-value { flex: 0 0 0; width: 0; } /* ── リスト（時／分の2列・5行の仮想窓） ── 仮想窓＝DOM は常に5行だけ（スクロールしない＝スクロールバーも出ない）。 循環は C# 側（TimeSelectorRules.Move の剰余）が担う。 */ .kintai-ts-list[b-p9r5euwchm] { display: flex; gap: 10px; padding: 6px; box-sizing: border-box; user-select: none; } .kintai-ts-col[b-p9r5euwchm] { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; /* 仮想窓なので実スクロールは起きないが、環境差でバーが出ないことを明示する。 */ scrollbar-width: none; } .kintai-ts-col[b-p9r5euwchm]::-webkit-scrollbar { display: none; } /* 行ピッチ 36px＝チップ高 26px ＋ 上下マージン 5px。 */ .kintai-ts-row[b-p9r5euwchm] { height: 26px; line-height: 26px; margin: 5px 0; border-radius: 4px; text-align: center; font-size: 1rem; color: var(--mud-palette-text-primary); cursor: pointer; } .kintai-ts-row:hover[b-p9r5euwchm] { background-color: var(--mud-palette-action-default-hover); } .kintai-ts-row-selected[b-p9r5euwchm], .kintai-ts-row-selected:hover[b-p9r5euwchm] { background-color: var(--mud-palette-primary); color: var(--mud-palette-primary-text); } /* 直近に操作した列の選択行だけ枠で強調する。 時の行はクリックしても閉じない（分の入力を待つ）ので、塗りだけでは「いま自分がどちらの列を 動かしたのか」が読み取れない。枠が付く行は aria-activedescendant が指す行と常に一致する ＝見えている強調と支援技術の現在位置が同じものを指す。 ⚠ border ではなく outline を使う（border だと行の高さ 26px が変わり、行ピッチ 36px が崩れる）。 outline-offset 2px は行の上下マージン 5px に収まるので、隣の行と重ならない。 */ .kintai-ts-row-active[b-p9r5euwchm] { outline: 2px solid var(--kintai-border-focus); outline-offset: 2px; } /* /Components/UserAccountMenu.razor.rz.scp.css */ /* ヘッダーのユーザーメニュー アクティベーター========================================= div から button へ変えた（div は tabindex を持たず、Tab の巡回でここだけ飛ばされる＝ キーボードだけではログアウトへ到達できなかった）。見た目は div のときと同じにしたいので、 ブラウザ既定のボタン装飾（地・枠・余白・文字色・書体）を素の状態へ戻す。 ⚠ outline は打ち消さない＝フォーカスリングは app.css の共通節 （button:not([disabled]):focus-visible）が描く。ここで outline:none を書くと MudBlazor と同じ「既定を消して何も足さない」状態に戻り、その対処が無効になる。 */ .kintai-user-menu-activator[b-scchr5lt3t] { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; } /* /Pages/AdminDashboard.razor.rz.scp.css */ /* ダッシュボードのカード（MudGrid 内の MudPaper）を行内で等高に。 MudPaper は子コンポーネントのため ::deep で当てる。スコープの足場として ページ全体を .dashboard（plain div）で囲んでいる（AdminDashboard.razor）。 MudItem(.mud-grid-item)は flex 子要素なので、Paper を height:100% にすると行の高い方に揃う。 */ .dashboard[b-fg84ghl0ci] .mud-grid-item .mud-paper { height: 100%; } /* 事業所プルダウンはこの画面だけカードの外（ページの地の上）に直置きしている。他画面は同じ部品を カードの中に置くため白く見えるが、ここは祖先すべての背景が透明でページの地色がそのまま透ける。 この画面専用に枠の地を明示する（色は直書きせずトークンで持つ＝配色の切り替えに追従できるように）。 ⚠ 候補が1件だけの利用者は KintaiSelect が読み取り専用表示（外側 div に .kintai-readonly が付く）に なり、app.css の共通規則（.kintai-readonly .mud-input.mud-input-outlined）が薄グレーの地を当てる。 スコープ CSS は [b-xxxx] 属性ぶん詳細度が高く、絞らずに書くとその共通規則を無条件に上書きして 編集可否が見分けられなくなる＝:not(.kintai-readonly) で読み取り専用の変種を明示的に除外する。 */ .dashboard[b-fg84ghl0ci] .kintai-select:not(.kintai-readonly) .mud-input.mud-input-outlined { background-color: var(--mud-palette-surface); } /* /Pages/AdminWorkTimeChange.razor.rz.scp.css */ /* 勤務時間帯変更 — セル単位のキーボード編集グリッド（素の table）。 ↑↓←→でセル移動・Enterでマスク入力（日付 yyyy/mm/dd・時刻 hh:mm）。 意匠は一覧共通（app.css の「一覧共通スタイル」節＝セレクタ .kintai-list）と同じトークン・同じ寸法にそろえる。 色は全て var(--kintai-*) / var(--mud-palette-*) 参照＝この画面固有の色を持たない。 */ /* 一覧カード＝枠・角丸はここが持つ（一覧共通 MudTable と同じく、表とページャを1枚のカードに収める）。 ⚠ overflow は visible。〔旧〕角丸で中身を切るため overflow:hidden にしていたが、 それが見出し行の sticky の基準（スクロールポート）になりページスクロールでは貼り付かない。 一覧共通（app.css の .kintai-sticky-head 節）が MudTable の overflow:hidden を visible へ戻すのと同じ処置で、 素の table を使うこの画面では器の側（このカード）が同じ役目を負う。 角丸で切らなくなったぶんの角は、中身の側が自分で描き直す＝表の地（下の .wtc-grid）と 見出し行の左右上端のセル（下の thead の角丸の節）の両方。 */ .wtc-card[b-g5254uecx8] { /* 角丸の値はここが唯一の出どころ＝カードの枠線・中の表の地・見出し行の両端のセルの3者が同じ角を描く。 ⚠ 3者のどれか1つでも四角いままだと、そこだけが角の外側へはみ出して丸い枠線を覆い隠す （器は overflow: visible ＝中身を切らないので、丸めるのは各自の責任になる）。 */ --wtc-radius: 12px; border: 1px solid var(--kintai-table-lines); border-radius: var(--wtc-radius); /* カード・テーブルの角丸（.mud-simple-table と同値） */ overflow: visible; /* 中の表より狭くならない。overflow で切らなくなった以上、カードが器の幅のままだと 表がカードの枠からはみ出す＝右端と下端で「表のほうが広い」段差が見える（実測 2026-09-03・ 幅1280＝カード右端 1256 に対し表の右端 1419）。この画面の原則「表とページャを1枚のカードに収める」 （一覧共通 MudTable と同構造）を満たすため、カードを表の最小幅（1262px）まで広げる。 ⚠ その結果、狭い画面ではページャも表の右端にそろって画面外へ出る＝横スクロールで届く （他の一覧ではページャは表の右端＝器の右端で一致しており、ここでも「表の右端」にそろえる側を採る）。 */ min-width: min-content; /* 影は他の面（カード＝SectionCard／一覧＝KintaiTable／罫線表＝KintaiSimpleTable）と同じ段にそろえる。 この表は素の table で MudBlazor の Elevation を持てないため、対応する CSS 変数を直接読む （段の値の正は SectionCard.CardElevation＝C# 定数。--mud-elevation-N は MudThemeProvider が :root へ出す）。 ⚠ 罫線（上の border とセル線）は残したうえで影を足す＝罫線と影の両方を持つのがこの画面の意匠。 */ box-shadow: var(--mud-elevation-2); } /* 幅 601px 以上では、表はどちらの方向も閉じ込めない＝縦も横もブラウザのページスクロールに従う （「他の画面と見た目は同じなので、スクロール方法も同じにする」）。 〔旧〕横だけを表の中に閉じ込めていた（overflow-x:auto）が、それが見出し行の sticky の基準になり 見出しが固定できない（実測＝top が -186px まで流れる）。他の一覧（MudTable ＋ .kintai-sticky-head）は 表の中の横スクロールを外して見出しを貼り付けているので、この画面もその形にそろえる＝この幅では閉じ込めない。 ⚠ その結果、幅が足りないときはページ本体が横へ動く（見出し・日付ナビ・絞り込みも一緒に動く。 左ナビと AppBar は position:fixed なので動かない）。他の一覧では列が詰まって発火しない副作用が、 列幅を固定するこの表では実際に発火する＝それも他の一覧と同じ扱いとする。 ⚠ 幅 600px 以下だけは例外で、末尾の @media で器（.wtc-scroll）を縦横にスクロールさせて表を閉じ込める （この幅では表が文書を横へあふれさせ、ヘッダーのユーザーメニューが画面の外へ出るため。理由は末尾の注釈）。 */ .wtc-scroll[b-g5254uecx8] { overflow: visible; } .wtc-grid[b-g5254uecx8] { /* 見出し行の高さ。貼り付いた見出しの下へ他の行を潜らせないための基準として使い回すので ここを唯一の出どころにする（thead th の height／セルの scroll-margin-top）。 選択件数バーは表の外（絞り込みカードの下の独立したカード）に出すため、この表の thead は 見出し行1段のまま＝貼り付く行が増減して高さが変わることはない。 */ --wtc-head-h: 41px; /* セルの境界は畳み込まず、隙間だけを 0 にする（separate ＋ border-spacing: 0）。 これは下の border-top-*-radius を成り立たせるための土台＝collapse は「セルの境界を表側へ 畳み込む」モードで、そのとき表そのものの箱に載る装飾（角丸・inset の影）は対象外として扱われうる。 MudBlazor 自身、既定は畳み込む側だが、貼り付く見出しを持つ表だけ畳み込まない側へ切り替えている （.mud-simple-table table{border-collapse:collapse} ／ .mud-simple-table.mud-table-sticky-header * table{border-collapse:separate}）。 この表は貼り付く見出しも角丸も inset の影（未保存の印・見出し下の仕切り線）も使うので、同じ側にそろえる。 ⚠ 二重線にはならない＝罫線は th/td の border-bottom だけで上罫線を持たず、border-spacing も 0 なので、 上下に隣り合うセルの間に線が2本並ぶことも、間に地色の隙間が出ることもない （実測 2026-09-07・Chromium＝畳み込む側と行高 45px・表の全高 311px がどちらも同値）。 */ border-collapse: separate; border-spacing: 0; table-layout: fixed; /* 列幅は colgroup で固定＝表示／編集で幅が変わらない */ /* 全幅で使い、狭い画面では横スクロールへ逃がす（min-width＝操作列 144px を含む colgroup 16列）。 */ width: 100%; min-width: 1262px; font-size: 0.8125rem; background: var(--mud-palette-surface); /* 表の地も上端だけ角を丸める（値はカードと同じ出どころ＝.wtc-card の --wtc-radius）。 ⚠ これが無いとカードの角が白い四角に見え、丸い枠線が消える。器（カード）は overflow: visible で 中身を切らないので、この表の四角い地（上の background）がカードの丸い角の上へそのまま描かれ、 枠線の曲線を覆ってしまう（実測 2026-09-07・Chromium 幅1366／カード左上の角は枠線の色ではなく 純白 rgb(255,255,255) だった）。見出しセル側の角丸（下の thead の節）だけでは、 見出しが避けた角にこの表の地が出てくるだけで直らない。 ⚠ 下端は丸めない＝表の下にはページャが続き、カードの下端の角はページャが受け持つ。 */ border-top-left-radius: var(--wtc-radius); border-top-right-radius: var(--wtc-radius); } .wtc-grid th[b-g5254uecx8], .wtc-grid td[b-g5254uecx8] { border-bottom: 1px solid var(--kintai-table-lines); padding: 0; white-space: nowrap; text-align: center; overflow: hidden; text-overflow: ellipsis; } /* ヘッダ（1段16列）。行高は一覧共通の 41px（app.css の .kintai-list .mud-table-head .mud-table-cell と同値）。 貼り付き（position:sticky・top・地・下の仕切り線）は一覧共通クラス .kintai-sticky-head が持つ （app.css の同名節・表に付けている＝AdminWorkTimeChange.razor の table のクラス）。 「素の table にも同じ規則を当てる」形に広げたので、この画面固有の sticky 規則は持たない。 ⚠ ここで height を変数から与えるのは、貼り付いた見出しの高さを他の規則（選択件数バーの貼り付き位置・ セルの scroll-margin-top）が読むため＝数字を1箇所にする。 */ .wtc-grid thead th[b-g5254uecx8] { height: var(--wtc-head-h); background: var(--kintai-table-head-bg); color: var(--kintai-text-table-header); font-weight: 500; padding: 8px 6px; } /* カードの角丸を見出し行の両端のセルへ描き直す。 共通側（app.css）は MudTable に合わせて 8px を描くので、この画面のカードの値へ上書きする ＝上で .wtc-card の overflow:hidden を外したぶん、角が四角くならないようにする。 ⚠ 値はカードと同じ出どころ（.wtc-card の --wtc-radius）から取る＝カードの角丸を変えたとき、 ここと表の地（上の .wtc-grid）が取り残されて角だけ四角く残る、という壊れ方をしないため。 ⚠ これだけでは足りない＝見出しが避けた角には表の地が出てくるので、表の側も丸める（上の .wtc-grid）。 */ .wtc-grid thead tr:first-child th:first-child[b-g5254uecx8] { border-top-left-radius: var(--wtc-radius); } .wtc-grid thead tr:first-child th:last-child[b-g5254uecx8] { border-top-right-radius: var(--wtc-radius); } /* データ行。行高は一覧共通の 45px（app.css の .kintai-list .mud-table-body .mud-table-cell と同値）。 */ .wtc-grid tbody td[b-g5254uecx8] { height: 45px; padding: 10px 6px; color: var(--mud-palette-text-primary); } /* キーボードでセルを移動したとき、移動先が貼り付いた見出し行の下に隠れないようにする。 js/grid-keynav.js が focus({preventScroll:true}) → scrollIntoView({block:'nearest'}) の順で最小限だけ送るので、 その「最小限」の基準を見出しの高さぶん広げる＝ブラウザは見出しを覆いと見なさない（sticky は スクロールポートの一部として扱われる）ため、この余白が無いとセルが見出しの真下に止まる。 ⚠ 値の正は --wtc-sticky-h＝js/grid-keynav.js の syncStickyHead が実測して渡す。ここに書いてある calc は JS が動かないときの縮退値であって正しい値ではない。選択件数バーは表の外（絞り込みカードの下）に 出すため thead は見出し行1段のみ＝この表の貼り付く行が増える窓はない。 ⚠ 入力欄にも要る＝編集を開始すると focus は td ではなく中の input へ移るため。 */ .wtc-grid tbody td[b-g5254uecx8], .wtc-grid tbody input.wtc-input[b-g5254uecx8] { scroll-margin-top: var(--wtc-sticky-h, calc(var(--mud-appbar-height, 56px) + var(--wtc-head-h, 41px))); } /* 最終行の下罫線は出さない＝ページャの上罫線と二重線にしない （一覧共通 MudTable の .mud-table-row:last-child .mud-table-cell{border-bottom:none} と同じ扱い）。 */ .wtc-grid tbody tr:last-child td[b-g5254uecx8] { border-bottom: none; } /* 貼り付く見出し（.kintai-sticky-head）の共通規則（app.css）は、最終行の下端を角丸にするかどうかを 「ページャが表の子孫にあるか」（:not(:has(.mud-table-pagination))）で判定する。この画面のページャ （KintaiPager）は表（.wtc-grid）の外・兄弟（.wtc-card 直下・上の「選択件数バー」節の下）に置いており、 表の子孫には無いため常に「ページャ無し」と誤判定され、最終行の下端が角丸で描かれてしまう＝ この画面の原則（上の .wtc-grid のコメント「下端は丸めない＝表の下にはページャが続き、カードの下端の角は ページャが受け持つ」）に反する見え方になる。 共通側のセレクタ .kintai-sticky-head:not(:has(.mud-table-pagination)) tbody:last-of-type tr:last-child td:first-child の詳細度は (0,5,3)（クラス・疑似クラス相当5＝kintai-sticky-head／:not(:has(...))／:last-of-type／ :last-child／:first-child、要素相当3＝tbody／tr／td）。ここは画面固有の祖先クラス .wtc-card を足し、 かつ .wtc-grid を重ねて詳細度を (0,6,3) まで上げ、読み込み順（app.css → このファイルを含む Blazor scoped CSS バンドル）に関わらず確実にこちらを勝たせる。 0件表示の行（ だけの1セル行）は first-child と last-child の両方に 同時に一致するので、下の2本のセレクタだけで自動的に対象になる（別セレクタは要らない）。 */ .wtc-card .wtc-grid.wtc-grid.kintai-sticky-head tbody tr:last-child td:first-child[b-g5254uecx8] { border-bottom-left-radius: 0; } .wtc-card .wtc-grid.wtc-grid.kintai-sticky-head tbody tr:last-child td:last-child[b-g5254uecx8] { border-bottom-right-radius: 0; } /* ゼブラ（奇数行＝1行目から縞）。一覧共通（MudTable の Striped）と同じ位相・同じトークンにそろえる （この画面だけ 2行目から縞が始まっていた）。 */ .wtc-grid tbody tr:nth-child(odd) td[b-g5254uecx8] { background-color: var(--kintai-table-stripe); } /* 行 hover＝他の一覧（MudTable の .mud-table-hover）と同じトークン。 ゼブラ規則（詳細度は同点＝:hover と :nth-child(odd) で並ぶ）より後に置く＝縞の行でも hover が後勝ちする。 編集中セルの入力欄は自前の背景（.wtc-input）を持つため、hover 色に上書きされない。 */ .wtc-grid tbody tr:hover td[b-g5254uecx8] { background-color: var(--mud-palette-table-hover); } /* 左寄せの列（社員No・社員名・勤務区分）。他は中央、操作列だけ右寄せ。 */ .wtc-grid td.wtc-start[b-g5254uecx8], .wtc-grid th.wtc-start[b-g5254uecx8] { text-align: left; } /* 選択チェックの列と操作列は余白を広めに取る（一覧共通の左右端 padding と同じ考え方）。 */ .wtc-grid th.wtc-check[b-g5254uecx8], .wtc-grid td.wtc-check[b-g5254uecx8] { padding: 0 8px; } .wtc-grid td.wtc-act[b-g5254uecx8], .wtc-grid th.wtc-act[b-g5254uecx8] { text-align: right; padding: 0 8px; } /* 編集可能セル（フォーカスでセル移動できる）。 */ .wtc-grid td.wtc-cell[b-g5254uecx8] { cursor: cell; } /* フォーカスはアウトラインだけで示す（背景は塗らない＝ゼブラ・赤字の見分けを消さない）。 ⚠ ここだけ単層。他の2箇所（KintaiCheckBox / KintaiCheckList）は二重リングにしているが、 このセルは単層のままにする。理由は2つ： ①.wtc-grid td は padding: 0 ＝内側への侵入量を 2px→4px へ増やすとセルの文字に重なる公算が高い （padding: 0 8px が付くのは .wtc-check と .wtc-act だけ） ②〔この理由は消えた〕かつては表がセルの境界を畳み込む形（border-collapse: collapse）だったため、 畳み込まれた境界を持つ td へ box-shadow を描く挙動にブラウザ差が出る懸念があった。 角丸を効かせるために表を separate へ変えた（上の .wtc-grid）ので、この懸念は無くなっている ＝二重リングを妨げているのは①だけ 単層でも 1.4.11(3:1) は満たす。コントラストは外側の層だけで足り、--mud-palette-text-primary は 実在する地すべてで 6.23:1 以上あるため。テーマ色（--mud-palette-primary）を使わないのは、 ライトのローズ 2.95・テラコッタ 2.69 が 3:1 を割るから＝二重にして得られるのは意匠だけで、 失うかもしれないのは編集画面のデータの可読性。実ブラウザで重なりが無いと確認できたら二重へ戻す余地がある。 ⚠ アプリ共通のフォーカスリングでも単層のまま据え置いた（規則は変えていない）。 共通節（app.css）とはセレクタが交差しない＝あちらは :focus-visible／button・a・.mud-* のクラス、 こちらは scoped CSS の `td.wtc-cell:focus`（td 要素・:focus・スコープ属性つき）。 共通節に box-shadow が足されても、このセルへは届かない（FocusRingGuardTests が「wtc-cell は box-shadow を持たない」を固定する）。 */ .wtc-grid td.wtc-cell:focus[b-g5254uecx8] { outline: 2px solid var(--mud-palette-text-primary); outline-offset: -2px; } /* 値を持たないセルは薄字で控えめに（一覧共通の補助文字色）。 */ .wtc-grid td.wtc-empty[b-g5254uecx8] { color: var(--kintai-text-faint); } /* 保存できなかった行の印。行の左端に縦線を引き、操作列の警告アイコン（読み上げ名つき）と 合わせて「この行はまだ保存されていない」ことを示す。⚠ 色だけに頼らない＝アイコンと title/aria-label が 理由の文字を持つ（色の識別に依存しない）。 ⚠ border ではなく inset の box-shadow を使う＝列幅を colgroup で固定した表でセルへ border を足すと、 その幅ぶん中身が内側へ寄る（印の付いた行だけ文字の位置がずれて見える）。box-shadow はレイアウトを動かさない。 */ .wtc-grid tbody tr.wtc-unsaved td:first-child[b-g5254uecx8] { box-shadow: inset 3px 0 0 0 var(--kintai-border-error); } /* 項目を変えたが、まだ保存していない行の印（保存失敗の赤とは別の色）。左端の縦線＝行の左端のセルへ、 操作列の［保存］ボタンと合わせて「この行はまだ保存されていない」ことを示す。色だけに頼らない（ボタンの文字が主）。 ⚠ 保存失敗の印（上）と同じ理由で border ではなく inset の box-shadow。 */ .wtc-grid tbody tr.wtc-dirty td:first-child[b-g5254uecx8] { box-shadow: inset 3px 0 0 0 var(--kintai-border-warning); } /* 操作列の3つの枠（保存ボタン／未保存の印／削除ボタン）。枠の幅は常に確保し、出し分けで他の部品の位置を動かさない。 合計＝64＋20＋32＋枠の間 4×2＝124px＋左右の余白 16px＝140px（列の固定幅 144px に収まる）。 */ .wtc-grid td.wtc-act .wtc-act-slots[b-g5254uecx8] { display: flex; justify-content: flex-end; align-items: center; gap: 4px; } .wtc-grid td.wtc-act .wtc-slot[b-g5254uecx8] { display: flex; justify-content: flex-end; align-items: center; flex: none; } .wtc-grid td.wtc-act .wtc-slot-save[b-g5254uecx8] { width: 64px; } .wtc-grid td.wtc-act .wtc-slot-mark[b-g5254uecx8] { width: 20px; } .wtc-grid td.wtc-act .wtc-slot-del[b-g5254uecx8] { width: 32px; } /* 保存ボタン（操作列）。行高を変えないよう小さく。 */ .wtc-grid td.wtc-act .wtc-save[b-g5254uecx8] { min-width: 0; } /* 編集できるセルの見分け＝他の画面の入力欄と同じ見た目（白地＝--mud-palette-surface・枠＝--mud-palette-lines-inputs・ 角丸 4px）の箱をセルの中に描く。ライト・ダークとも入力欄と同じトークンなのでテーマに追従する。 ⚠ 箱はセルの内側に 1px 枠で独立して描く（セルの端に枠を引かない）。セルの端に枠を引くと、隣り合うセルの 枠が重なって線が 2px になり、角丸の交点（4 つのセルが接する点）に切り欠きが出る。箱を内側へ寄せれば 隣の箱と接さないので、線は常に 1px で交点も無い。 ⚠ 箱は疑似要素で描き、セルの地（縞・hover・赤字の background-color）は上書きしない＝箱の外には縞・hover が見える。 isolation で td 自身に重なり順を作り、箱を td の地の上・文字の下（z-index:-1）に置く。 ⚠ 箱の上下 3px・左右 2px の余白はセルの高さ（45px）に影響しない（絶対配置）。 ⚠ box-shadow は使わない（セルのフォーカスリング規則が box-shadow を持たない前提）。 締め済み月度のセルには付けない（編集できないので、クラス wtc-editable 自体を付けない）。 */ .wtc-grid td.wtc-editable[b-g5254uecx8] { position: relative; isolation: isolate; } .wtc-grid td.wtc-editable[b-g5254uecx8]::before { content: ""; position: absolute; inset: 3px 2px; z-index: -1; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-inputs); border-radius: 4px; pointer-events: none; } /* 未保存の印のアイコン（操作列・削除ボタンの左）。行高を変えないよう縦位置だけ合わせる。 */ .wtc-grid td.wtc-act .wtc-unsaved-mark[b-g5254uecx8] { display: inline-flex; vertical-align: middle; color: var(--kintai-text-error); } /* その日の所定を超える就業時間は赤字。 */ .wtc-grid td.wtc-ot[b-g5254uecx8] { color: var(--mud-palette-error); font-weight: 700; } /* 編集中のセル＝入力欄の箱（上の ::before）の枠をフォーカス色にし、地を淡い青 tint（ナビ選択中と同じ --kintai-nav-active-bg）へ変える。箱の位置・大きさ・枠の太さ（1px）は表示中と同じ＝行の高さ（45px）も動かない。 ⚠ 入力欄そのものは透明にして箱を見せる（入力欄が地を塗ると、箱の上下に白い余白だけが残って浮く）。 */ .wtc-grid td.wtc-editable:has(> input.wtc-input)[b-g5254uecx8]::before { background: linear-gradient(var(--kintai-nav-active-bg), var(--kintai-nav-active-bg)), var(--mud-palette-surface); border-color: var(--kintai-border-focus); } /* セル内マスク入力欄（枠なし・アイコンなし・行高さを表示時と同一に保つ）。 枠・地は描かない（箱＝上の ::before が描く。outline/border はレイアウトに影響し行高さが変わるため使わない）。 */ .wtc-grid input.wtc-input[b-g5254uecx8] { display: block; width: 100%; min-width: 0; box-sizing: border-box; border: none; outline: none; margin: 0; padding: 0; background: transparent; text-align: center; font: inherit; line-height: inherit; color: var(--mud-palette-text-primary); } /* 削除アイコンボタン（MudIconButton）は狭い列に合わせて詰める。 ::deep は子コンポーネント（MudIconButton の描画する button）へスコープ CSS を届けるため。 */ .wtc-grid td.wtc-act[b-g5254uecx8] .wtc-del { padding: 2px; } /* チェックボックスのセル（先頭の選択列＝一括更新の対象選択／猛暑対策列）。 一覧の一括操作チェックは本物の MudCheckBox＝hover 円・ripple・SVG は Mud 標準のまま。 行高さを変えないよう中央に置き、FormControlLabel の余白だけ落とす。 ::deep は子コンポーネント（MudCheckBox の描画する label.mud-checkbox）へスコープ CSS を届けるため。 */ .wtc-grid td.wtc-check[b-g5254uecx8] .mud-checkbox, .wtc-grid th.wtc-check[b-g5254uecx8] .mud-checkbox { display: flex; justify-content: center; align-items: center; margin: 0; } /* 0 件時のメッセージ行（colspan で全列を占める）。 セルは表の全幅（最小 1262px）に広がるので、中身をそのまま中央に置くと、狭い画面では案内が画面の外へ寄る。 そこで中身の箱（.wtc-emptybox）を position: sticky; left: 0 にして横スクロールしても見える位置に留め、 幅は「セルの幅」と「見えている幅（画面の幅）」の小さいほうに制限する。中央寄せは共通の空状態部品が持つ。 */ .wtc-grid td.wtc-emptymsg[b-g5254uecx8] { padding: 0; /* 表のセルは overflow: hidden で横スクロール領域になり、中の sticky が効かなくなるので、この行だけ外す。 */ overflow: visible; } .wtc-grid td.wtc-emptymsg .wtc-emptybox[b-g5254uecx8] { position: sticky; left: 0; box-sizing: border-box; width: min(100%, 100vw); /* 表のセルは折り返さない設定なので、長い案内文（取得失敗など）は箱の中で折り返す。 */ white-space: normal; } /* 左ナビが開く幅では、ナビが画面の左端を覆うので、箱の貼り付き位置と幅をナビの幅だけ内側へ寄せる。 境目の 960px とナビ幅（--mud-drawer-width-left・既定 240px）は MudBlazor の既定値 （MudDrawer は Breakpoint 既定 Md で 960px 以上のとき開いて本文を押し出す。MainLayout は既定のまま使っている）。 利用者がナビを閉じたとき（レイアウトのクラスが mud-drawer-close-responsive-md-left になる）は本文が左へ戻るので、 開いているときだけに絞り、閉じたときは基本の規則（left: 0・画面幅）のままにする。 */ @media (min-width: 960px) { .mud-layout.mud-drawer-open-responsive-md-left .wtc-grid td.wtc-emptymsg .wtc-emptybox[b-g5254uecx8] { left: var(--mud-drawer-width-left, 240px); width: min(100%, calc(100vw - var(--mud-drawer-width-left, 240px))); } } /* ページャは共通部品（KintaiPager）＝この画面固有の規則を持たない。 */ /* 保存中＝処理中カーソル＋薄表示でセル編集不可を視覚化（編集ブロック自体は StartEdit/ClearCell のガード） */ .wtc-busy td.wtc-cell[b-g5254uecx8] { cursor: progress; opacity: 0.65; } /* ページャは表の幅ではなく見えている幅に置く。 カードは表に合わせて広がる（上の .wtc-card の min-width）ので、その中で右寄せのままにすると ページャ（表示行数・件数・◀▶）が既定のスクロール位置で画面外に出る＝右端まで横に送らないと ページを変えられない（実測 2026-09-03・幅1280 で操作ボタンが 1263〜1417＝viewport 1280 の外／ 600・390 では表示行数の欄ごと外）。他の一覧（MudTable）ではページャは常に画面内にあり、 狭い幅では MudBlazor 側のメディアクエリで2段に折り返して収まる（実測＝社員管理 390px で高さ 100px）。 ・width:max-content ＋ margin-left:auto ＝中身ぶんの幅で右寄せ（spacer による右寄せは幅が固定される ので使わない＝下で非表示にする）。 ・position:sticky; right:0 ＝画面の右端より外へ出ない。右端まで送れば元の位置（表の右端）に戻る ＝表と一緒に動くが、見えなくはならない。 ・max-width ＝狭い幅では器そのものを画面の幅まで縮める＝下の折り返しが効くようになる。 引く 32px はページ左右の余白（16px×2）＝sticky はカードの外へは出られない（カードの左端 16px が 下限）ため、画面幅そのままだとその 16px ぶん右へはみ出す（実測 2026-09-03・390px で右端 407＝15px 外）。 ⚠ ::deep は子コンポーネント（KintaiPager）が描く DOM へスコープ CSS を届けるため。 */ .wtc-card[b-g5254uecx8] .mud-table-pagination-toolbar { position: sticky; right: 0; width: max-content; max-width: calc(100vw - 32px); margin-left: auto; } /* 右寄せは上の margin-left:auto が担うので、MudTablePager 由来の spacer（flex:1 1 100%）は使わない ＝残すとページャがカードの幅いっぱいに広がり、max-content と両立しない。 */ .wtc-card[b-g5254uecx8] .mud-table-pagination-spacer { display: none; } /* 狭い幅ではページャを2段に折り返す。他の一覧（MudTable）は 600px 以下で MudBlazor 側のメディアクエリが折り返して画面内へ収めており（実測 2026-09-03・社員管理 390px で flex-wrap:wrap・高さ 100px）、この画面のページャ（KintaiPager＝MudTable の外に置く素の div）には その規則が当たっていなかった（同 390px で flex-wrap:nowrap・中身 434px が器 390px からあふれる）。 ※ 600px 以下では、上の sticky の基準を右端から左端へ切り替える（下の規則）。 折り返さないと、上の max-width:100vw で器を画面幅まで縮めても中身が画面外へ出たままになる。 */ @media (max-width: 600px) { /* この幅では器（.wtc-scroll）が縦横にスクロールするので、0 件の案内の箱は器の見えている幅に合わせる （画面の幅から、ページの左右の余白 2rem と、カードの枠線 1px×2 を引く。実測で器の幅は 幅 390 で 356、幅 600 で 566 ＝ 画面の幅 − 34px）。 */ .wtc-grid td.wtc-emptymsg .wtc-emptybox[b-g5254uecx8] { width: min(100%, calc(100vw - 2rem - 2px)); } .wtc-card[b-g5254uecx8] .mud-table-pagination-toolbar { flex-wrap: wrap; height: auto; justify-content: flex-end; /* 右端貼り付き（right:0）をやめ、カードの左端に寄せる。 スマートフォン（モバイル端末のエミュレーションで実測）では、表の横あふれ（1262px）で レイアウトの幅が内容の幅（1280px）へ広がり、sticky の「右端」が画面の外になる。 一方 100vw とメディアクエリは見えている幅（390px）のままなので、左基準に切り替えれば 初期位置で画面の中に収まる。 */ right: auto; left: 0; margin-left: 0; margin-right: auto; } /* 幅 600px 以下に限り、表を縦横にスクロールする器（.wtc-scroll）の中へ閉じ込める。 上の「閉じ込めは撤回」の理由は見出しの貼り付きが効かなくなることだったが、スマートフォンの幅では 表（最小幅 1262px）が文書を横へあふれさせ、レイアウトの幅が内容の幅へ広がる（モバイル端末のエミュレーションで innerWidth が 390 から 1280 になる）。すると AppBar のユーザーメニューが画面の外（x=1240 付近）へ出て、 ウィンドウが縦にスクロールしないので見出しの貼り付きも元から効いていない。 この幅では閉じ込めても失うものが無く、器の中で縦横にスクロールさせれば、ヘッダーも見出しも画面の中に見える。 601px 以上は上の宣言のまま（器は overflow: visible）。 */ .wtc-scroll[b-g5254uecx8] { overflow: auto; /* 画面の高さに合わせる＝AppBar の下から、その下に続くページャ（折り返して2段）と余白のぶんを引いた高さ。 160px はページャ2段（約100px）＋カード・ページ下の余白の見積もり。dvh はアドレスバーの出入りに追従する。 */ max-height: calc(100vh - var(--mud-appbar-height, 56px) - 160px); /* dvh を知らないブラウザ向けの縮退 */ max-height: calc(100dvh - var(--mud-appbar-height, 56px) - 160px); } /* 器の中では、見出しの貼り付き位置の基準が AppBar の下端ではなく器の上端になる。 一覧共通の top（AppBar の高さぶん下げる）のままだと、器の中で見出しが56px下に浮く。 */ .wtc-scroll .wtc-grid.kintai-sticky-head thead th[b-g5254uecx8] { top: 0; } /* カードを表の最小幅まで広げる指定（上の min-width: min-content）を外す＝器（.wtc-scroll）が表を受けるので、 カードは画面の幅のままでよい。残すと器ごと表に引きずられて広がり、文書が横へあふれる。 */ .wtc-card[b-g5254uecx8] { min-width: 0; } } /* /Pages/Login.razor.rz.scp.css */ /* 「または」両脇の区切り線（パスキーログインの上）。 MudDivider は .mud-divider-fullwidth で width:100% を持つため、flex 行に2本並べると 合計幅がカード(MudCardContent)を超えて枠からはみ出す。width:auto に上書きして flex-grow-1 に幅配分を任せ、枠内に収める。MudDivider は子コンポーネントなので ::deep で当てる。 */ .login-or-divider[b-kzfd8stvsv] .mud-divider { width: auto; }