/* ===== デザイントークン（Figma: WebDemoSystem） ===== */ :root { --alt-bg-primary: #ffffff; --alt-bg-secondary: #fafafa; --alt-border-primary: #d4d4d4; --alt-border-secondary: #e5e5e5; --alt-text-primary: #171717; --alt-text-secondary: #404040; --alt-text-secondary-hover: #262626; --alt-text-tertiary: #525252; --alt-text-placeholder: #737373; --alt-brand: #1d4ed8; --alt-radius-sm: 6px; --alt-radius-md: 8px; --alt-radius-xl: 12px; --alt-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); /* サイドバーの幅。ドラッグで変更し、localStorage に記憶する（sidebar-resize.js）。 値は のインラインスタイルで上書きされる。 */ --alt-sidebar-width: 220px; --alt-sidebar-width-min: 200px; --alt-sidebar-width-max: 480px; } body { font-family: -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif; margin: 0; color: #1f2933; line-height: 1.6; } /* 本文領域。ブラウザ幅にそのまま追随させる（一覧のグリッドを広い画面いっぱいに使うため）。 以前は max-width: 1200px で中央寄せしていたが、ワイドモニタで左右が大きく余り、 案件一覧の列が横スクロールに追いやられていたので上限を外した。 */ .container { margin: 1.75rem 0; padding: 0 1.5rem; width: 100%; box-sizing: border-box; } h1 { color: #2c3e50; } h2 { color: #34495e; font-size: 1.15rem; margin-top: 1.5rem; } #blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #ffefc1; padding: 0.6rem 1.25rem; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.9rem; top: 0.5rem; } /* ===== レイアウト（左サイドバー + 本文） ===== */ .app-shell { display: flex; align-items: stretch; min-height: 100vh; } .app-sidebar { flex: 0 0 var(--alt-sidebar-width); width: var(--alt-sidebar-width); min-height: 100vh; background: var(--alt-bg-primary); border-right: 1px solid var(--alt-border-secondary); padding: 20px 0; position: sticky; top: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; } /* サイドバー右端のつまみ（幅変更）。ダブルクリックで既定(220px)に戻る。 */ .app-sidebar-resizer { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; z-index: 20; cursor: col-resize; background: transparent; touch-action: none; } .app-sidebar-resizer:hover, .app-sidebar-resizer:focus-visible, body.app-resizing .app-sidebar-resizer { background: rgba(29, 78, 216, 0.35); outline: none; } /* ドラッグ中は本文を選択させない（クラス付与は sidebar-resize.js）。 */ body.app-resizing { cursor: col-resize; user-select: none; } .app-brand { display: flex; align-items: center; gap: 8px; padding: 0 20px; margin-bottom: 20px; } /* Figma から書き出したロゴ（wwwroot/img/alterap-symbol.png）。 */ .app-brand-logo { display: inline-block; width: 24px; height: 24px; border-radius: var(--alt-radius-sm); background-image: url('img/alterap-symbol.png'); background-size: contain; background-repeat: no-repeat; } .app-brand a { color: #000; font-size: 15px; line-height: 22px; font-weight: 700; text-decoration: none; } /* DevExpress の DxTreeView（サイドバーのメニュー）。 */ .app-tree { padding: 0 16px; } /* 階層のインデント。 DxTreeView は展開アイコンの分だけ親の文字が右にずれるため、 そのままだと子の方が左に見えてしまう。子側に余白を足して階層を揃える。 もっと下げたい/戻したい場合は .alt-lv1 の padding-left を調整する。 */ .app-tree .alt-lv0 { padding-left: 0; } .app-tree .alt-lv1 { padding-left: 40px; } /* 現在ページのノード（DxTreeViewNode の CssClass で付与）。 */ .alt-nav-active { background: var(--alt-bg-secondary); border-radius: var(--alt-radius-sm); font-weight: 600; color: var(--alt-text-secondary-hover); } /* Figma から書き出したアイコンSVG（wwwroot/icons/）。 */ .alt-ico { display: inline-block; width: 20px; height: 20px; background-repeat: no-repeat; background-position: center; background-size: 20px 20px; vertical-align: middle; } .alt-ico-home { background-image: url('icons/home-line.svg'); } .alt-ico-data { background-image: url('icons/bar-chart-square-02.svg'); } .alt-ico-master { background-image: url('icons/rows-03.svg'); } .alt-ico-transfer { background-image: url('icons/upload-01.svg'); } .alt-ico-report { background-image: url('icons/filter-lines.svg'); } /* Figmaの「管理」はOpsgenieのブランドロゴ。単体で書き出せなかったため同じアイコンセットの歯車を使用。 */ .alt-ico-admin { background-image: url('icons/settings-01.svg'); } /* サイドバー下部（パスワード変更・ログアウト・アカウントカード）。 */ .app-sidebar-footer { padding: 0 16px; display: flex; flex-direction: column; gap: 2px; } .app-foot-item { display: block; width: 100%; box-sizing: border-box; padding: 8px; border-radius: var(--alt-radius-sm); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--alt-text-secondary); text-decoration: none; text-align: left; } .app-foot-item:hover { background: var(--alt-bg-secondary); color: var(--alt-text-secondary-hover); } .app-account-card { margin-top: 12px; display: flex; flex-direction: column; border: 1px solid var(--alt-border-secondary); border-radius: var(--alt-radius-xl); padding: 12px; } .app-account-name { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--alt-text-primary); } .app-account-mail { font-size: 14px; line-height: 20px; color: var(--alt-text-tertiary); word-break: break-all; } .app-body { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--alt-bg-primary); } .logout-form { margin: 0; } .linklike { background: none; border: none; cursor: pointer; font: inherit; } /* ===== 狭い画面（iPad・スマホ）: ハンバーガーメニュー ===== */ /* 開閉スイッチ本体は常に非表示（label[for] から操作する）。 display:none にしても label 経由の切り替えと :checked セレクタは効く。 */ .app-nav-toggle { display: none; } /* ハンバーガーボタン（モバイル上部バーとサイドバーの折りたたみトグルで共用）。 */ .app-nav-button { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; background: transparent; padding: 0; border-radius: var(--alt-radius-md); cursor: pointer; } .app-nav-button:hover { background: var(--alt-bg-secondary); } .app-nav-button:focus-visible { outline: 2px solid var(--alt-brand); outline-offset: 2px; } /* ハンバーガーのアイコン（中央の線 ＋ 疑似要素で上下の線）。 */ .app-nav-bars { position: relative; } .app-nav-bars, .app-nav-bars::before, .app-nav-bars::after { display: block; width: 20px; height: 2px; border-radius: 1px; background: var(--alt-text-primary); } .app-nav-bars::before, .app-nav-bars::after { content: ""; position: absolute; left: 0; } .app-nav-bars::before { top: -6px; } .app-nav-bars::after { top: 6px; } /* 上部バーと背景の膜は広い画面では出さない。 */ .app-mobile-bar, .app-nav-scrim { display: none; } @media (max-width: 1024px) { .app-shell { flex-direction: column; } /* 画面上部の細いバー。ここのハンバーガーでドロワーを開く。 */ .app-mobile-bar { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 30; height: 56px; padding: 0 12px; box-sizing: border-box; background: var(--alt-bg-primary); border-bottom: 1px solid var(--alt-border-secondary); } .app-mobile-title { font-size: 15px; line-height: 22px; font-weight: 700; color: #000; } /* サイドバーは画面外に隠したドロワーにする（本文が下に押し出されないようにする）。 */ .app-sidebar { position: fixed; top: 0; left: 0; z-index: 50; flex: none; width: min(300px, 85vw); height: 100vh; min-height: 0; overflow-y: auto; transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); } /* ドロワー時は幅を固定にするのでつまみは出さない。 */ .app-sidebar-resizer { display: none; } .app-nav-toggle:checked ~ .app-sidebar { transform: translateX(0); } /* ドロワーを開いている間だけ背後を覆う膜。タップで閉じる。 */ .app-nav-toggle:checked ~ .app-nav-scrim { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.35); } /* ドロワー表示中は背後をスクロールさせない（クラス付与は nav-drawer.js）。 */ body.app-nav-open { overflow: hidden; } .container { margin: 1rem 0; padding: 0 1rem; } /* 素のHTMLテーブル（ユーザー管理など）も列を潰さず、横スクロールで見せる。 DxGrid 側は各列の MinWidth で同じことをしている。 */ .user-list, .user-permissions { overflow-x: auto; } .user-table { min-width: 860px; } .perm-table { min-width: 520px; } } @media (prefers-reduced-motion: reduce) { .app-sidebar { transition: none; } } .app-error { border: 1px solid #f0c2c2; background: #fdf3f3; border-radius: 6px; padding: 1rem 1.25rem; margin: 1rem 0; } .app-error h2 { color: #b00020; margin-top: 0; } .app-error .app-error-type { color: #8a1020; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; margin: 0.25rem 0; } .app-error .app-error-message { white-space: pre-wrap; word-break: break-word; background: #fff; border: 1px solid #efd6d6; border-radius: 4px; padding: 0.6rem 0.75rem; font-size: 0.85rem; } .app-error .reload { display: inline-block; margin-top: 0.5rem; color: #b00020; } /* ===== ログイン画面（Figma: WebDemoSystem / Log in） ===== */ .login-page { display: flex; justify-content: center; padding: 96px 1rem 3rem; } .login-card { width: 360px; max-width: 100%; display: flex; flex-direction: column; gap: 32px; } .login-header { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } /* Figma から書き出したロゴ（wwwroot/img/alterap-symbol.png）。 */ .login-logo { display: inline-block; width: 32px; height: 32px; margin-bottom: 12px; border-radius: var(--alt-radius-md); background-image: url('img/alterap-symbol.png'); background-size: contain; background-repeat: no-repeat; } .login-title { margin: 0; font-size: 24px; line-height: 32px; font-weight: 600; color: var(--alt-text-primary); } .login-subtitle { margin: 0; font-size: 16px; line-height: 24px; color: var(--alt-text-tertiary); } .login-form { display: flex; flex-direction: column; gap: 20px; } .field { display: flex; flex-direction: column; gap: 6px; } .field-label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--alt-text-secondary); } .field-input { width: 100%; box-sizing: border-box; padding: 10px 14px; border: 1px solid var(--alt-border-primary); border-radius: var(--alt-radius-md); box-shadow: var(--alt-shadow-xs); background: var(--alt-bg-primary); font-size: 16px; line-height: 24px; color: var(--alt-text-primary); } .field-input::placeholder { color: var(--alt-text-placeholder); } .field-input:focus { outline: none; border-color: var(--alt-brand); box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12); } .field-error { color: #b00020; font-size: 13px; } .login-row { display: flex; align-items: center; justify-content: space-between; } .login-remember { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--alt-text-secondary); cursor: pointer; } .login-checkbox { width: 16px; height: 16px; accent-color: var(--alt-brand); } .login-submit { width: 100%; padding: 10px 16px; border: none; border-radius: var(--alt-radius-md); background: var(--alt-brand); color: #fff; font-size: 16px; line-height: 24px; font-weight: 600; box-shadow: var(--alt-shadow-xs); cursor: pointer; } .login-submit:hover { background: #1a44c2; } .login-error { color: #b00020; background: #fdf3f3; border: 1px solid #f0c2c2; border-radius: 4px; padding: 0.5rem 0.75rem; font-size: 0.9rem; } .form-row { margin-bottom: 0.9rem; display: flex; flex-direction: column; gap: 0.3rem; } .form-row.form-check { flex-direction: row; align-items: center; gap: 0.4rem; } .form-input { padding: 0.5rem 0.6rem; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 0.95rem; } .btn-primary { background: #2c3e50; color: #fff; border: none; border-radius: 4px; padding: 0.55rem 1.1rem; font-size: 0.95rem; cursor: pointer; } .btn-primary:hover { background: #1f2d3a; } .btn-secondary { background: #fff; color: #2c3e50; border: 1px solid #cbd5e1; border-radius: 4px; padding: 0.5rem 1rem; font-size: 0.9rem; cursor: pointer; text-decoration: none; } .btn-secondary:hover { background: #f1f5f9; } /* ユーザー管理 */ .user-create { border: 1px solid #e2e8f0; border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1.5rem; background: #f8fafc; } .user-create .form-grid { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; } .user-create .form-row { min-width: 200px; } .user-info { color: #0b6b3a; background: #f0faf4; border: 1px solid #c2e6d2; border-radius: 4px; padding: 0.5rem 0.75rem; font-size: 0.9rem; } .user-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .user-table th, .user-table td { border-bottom: 1px solid #e2e8f0; padding: 0.5rem 0.6rem; text-align: left; vertical-align: middle; } .user-table th { color: #475569; font-weight: 600; } .user-table tr.row-inactive { color: #94a3b8; background: #f8fafc; } .user-table .muted { color: #94a3b8; } .role-edit { display: flex; gap: 0.4rem; align-items: center; } /* フィルタパネル（適用中の条件の表示）をグリッドの一番上に出す。 DevExpress にパネル位置の設定が無いため、flex の order で並べ替えている。 グリッド直下の子要素は実機で確認済み（上からの順）: dxbl-display-none ×3 / dxbl-grid-top-panel / dxbl-scroll-viewer / dxbl-grid-bottom-panel dxbl-pager-container / dxbl-grid-filter-panel つまりフィルタパネルは末尾の直下の子なので、order だけで先頭に移せる。 **DevExpress の内部クラス名に依存する**ため、バージョンアップで効かなくなる可能性がある （効かない場合はパネルが従来どおり下に出るだけで、壊れはしない）。 確認方法はブラウザのコンソールで: [...document.querySelector('.alt-grid').children].map(c => c.className) 元に戻したい場合はこのブロックを削除すればよい。 */ .alt-grid { display: flex; flex-direction: column; } .alt-grid > .dxbl-grid-filter-panel { order: -1; } /* 一覧上のツールバー（フィルター作成、フィルター切替、表示リセット）。 */ .grid-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; margin: 0.5rem 0; } /* 編集中のプレゼンス表示 */ .presence-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 0.75rem; } .presence-badge { display: inline-flex; align-items: center; gap: 0.35rem; background: #fff7e6; border: 1px solid #f0d18a; color: #8a5a00; border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.85rem; } .presence-badge::before { content: "✎"; } /* 他ユーザーが操作中で編集できないときの警告 */ .presence-blocked { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; background: #fdecea; border: 1px solid #f5b5ae; color: #9b1c14; border-radius: 6px; padding: 0.5rem 0.75rem; margin: 0.5rem 0 0.75rem; font-size: 0.9rem; } .presence-blocked::before { content: "⛔"; margin-right: 0.25rem; } .presence-blocked-close { background: none; border: none; color: #9b1c14; text-decoration: underline; cursor: pointer; font-size: 0.85rem; padding: 0 0.25rem; } /* ユーザー権限（テーブル単位の取込/出力許可） */ .perm-summary { color: #475569; font-size: 0.82rem; } .user-permissions { border: 1px solid #e2e8f0; border-radius: 8px; padding: 1rem 1.25rem; margin: 1.25rem 0; background: #f8fafc; } .user-permissions h2 { font-size: 1.05rem; margin: 0 0 0.75rem; } .perm-table { background: #fff; } .perm-table td, .perm-table th { text-align: left; } /* 取り込み・出力画面 */ .transfer-section { border-top: 1px solid #e2e8f0; padding-top: 1rem; margin-top: 1.5rem; } .transfer-section h2 { font-size: 1.05rem; margin: 0 0 0.75rem; } .column-spec { border-collapse: collapse; margin: 0.5rem 0 0.25rem; font-size: 0.85rem; } .column-spec th, .column-spec td { border: 1px solid #e2e8f0; padding: 0.25rem 0.6rem; text-align: left; } .column-spec th { background: #eef2f7; color: #475569; font-weight: 600; } .column-spec code { background: #eef2f7; border-radius: 3px; padding: 0.05rem 0.35rem; } .import-help { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.6rem 1rem; margin: 0.75rem 0 1rem; } .import-help-line { margin: 0; font-size: 0.9rem; } .import-help-line code { background: #eef2f7; border-radius: 3px; padding: 0.05rem 0.35rem; font-size: 0.85rem; } .import-help-line a { margin-left: 0.75rem; } .import-controls { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .import-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .import-label { min-width: 8rem; color: #475569; font-size: 0.9rem; } .import-filename { color: #0b6b3a; font-size: 0.9rem; } .import-note { color: #94a3b8; font-size: 0.82rem; } .import-info { color: #475569; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 4px; padding: 0.5rem 0.75rem; font-size: 0.9rem; } .import-summary { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0; } .import-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; } .imp-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 0.15rem 0.7rem; font-size: 0.82rem; font-weight: 600; } .imp-ok { background: #f0faf4; border: 1px solid #c2e6d2; color: #0b6b3a; } .imp-err { background: #fdf3f3; border: 1px solid #f0c2c2; color: #b00020; } .imp-neutral { background: #eef2f7; border: 1px solid #dbe3ec; color: #475569; } /* 販売・在庫 確認シート */ .report-toolbar { display: flex; justify-content: flex-end; margin: 0.5rem 0 1rem; } .report-export { display: inline-block; text-decoration: none; } .report-export:hover { text-decoration: none; } .report-section { margin: 1.25rem 0 2rem; } .report-section h2 { margin-bottom: 0.5rem; } .report-section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; } .report-section-head h2 { margin: 0; } /* 確認シートのピボット（DxPivotTable CssClass="alt-pivot"）。 狭い画面だとセルが潰れて文字が1文字ずつ縦に折り返されるため、 折り返しを止めて入り切らない分は横スクロールで見せる（グリッドの MinWidth と同じ考え方）。 */ .alt-pivot { max-width: 100%; overflow: auto; } .alt-pivot th, .alt-pivot td { white-space: nowrap; } /* 行見出し（得意先名・商品名）が長いと横に伸びすぎるので上限を設け、 超えた分は末尾を省略表示にする（値セルは短いので実質行見出しにだけ効く）。 */ .alt-pivot th, .alt-pivot td { max-width: 320px; overflow: hidden; text-overflow: ellipsis; } /* 狭い画面向けの上書き。 上の .alt-pivot より後ろに置く必要がある（同じ詳細度なので後で書いた方が勝つ）。 */ @media (max-width: 1024px) { /* ピボットが縦に長くなりすぎると他が見えないので高さを制限する。 */ .alt-pivot { max-height: 70vh; } .alt-pivot th, .alt-pivot td { max-width: 200px; } } /* ============================================================ 営業案件進捗管理システム 追加スタイル （ステータスバッジ / ダッシュボードカード / 案件詳細） ============================================================ */ /* ---- ステータスバッジ ---- */ .chaser-badge { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; background: #eceff3; color: #3b4757; } .chaser-badge-request { background: #eef2f7; color: #46536a; } /* 見積依頼 */ .chaser-badge-quote { background: #e7f0fb; color: #1e5faa; } /* 見積提出 */ .chaser-badge-ordered { background: #e2f4e8; color: #1c7a3d; } /* 受注 */ .chaser-badge-po { background: #fdf1e0; color: #9a6314; } /* メーカー発注 */ .chaser-badge-due { background: #f3ecfb; color: #6b3fa0; } /* 納期回答 */ .chaser-badge-delivered { background: #e0f4f6; color: #0f6f7c; } /* 納品 */ .chaser-badge-done { background: #2f6f4f; color: #ffffff; } /* 売上計上 */ .chaser-badge-lost { background: #f6e4e4; color: #a03434; } /* 失注 */ /* 案件詳細のタイトル横に出す大きいバッジ。配色は一覧と同じまま、 いま案件がどの段階にあるかがひと目で分かるサイズにする。 （.chaser-badge より後に書くこと。同じ詳細度なので後勝ちで上書きする） */ .chaser-badge-lg { padding: 0.4rem 1.6rem; font-size: 1.15rem; letter-spacing: 0.03em; line-height: 1.5; } /* ステータス選択ドロップダウンの項目（ItemTemplate）。 項目の高さを揃えて、一覧のバッジと同じ見た目で選べるようにする。 */ .chaser-status-item { display: flex; align-items: center; min-height: 1.9rem; } /* ---- ダッシュボードカード ---- */ .chaser-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; margin: 1rem 0 1.5rem; } .chaser-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; padding: 0.9rem 1rem; border: 1px solid #dde3ea; border-radius: 10px; background: #fff; text-decoration: none; color: inherit; transition: box-shadow 0.15s ease; } .chaser-card:hover { box-shadow: 0 2px 10px rgba(30, 50, 80, 0.12); text-decoration: none; } .chaser-card-count { font-size: 1.7rem; font-weight: 700; line-height: 1; } .chaser-card-total { background: #f4f7fb; } .chaser-card-label { font-size: 0.8rem; font-weight: 600; color: #46536a; } /* ---- 案件詳細 ---- */ /* 案件詳細の見出し行（案件番号＋件名＋ステータスバッジ）。 バッジは align-items: center だと h1 のボックス高との差で少し上にずれるため、 baseline 揃えにしてタイトルの文字と同じ行に乗せる。 */ .chaser-detail-head { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.25rem; } /* 下余白は見出し行(.chaser-detail-head)側で持つ。h1 に付けたままだと baseline 揃えの基準がずれる。 */ .chaser-detail-head h1 { margin-bottom: 0; } .chaser-section { margin: 1.5rem 0; } .chaser-section h2 { font-size: 1.05rem; margin-bottom: 0.5rem; } .chaser-detail-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 0.9rem; } .chaser-detail-table th, .chaser-detail-table td { border: 1px solid #dde3ea; padding: 0.45rem 0.7rem; text-align: left; vertical-align: top; } .chaser-detail-table th { background: #f4f7fb; font-weight: 600; white-space: nowrap; width: 9.5rem; } .chaser-detail-table thead th { width: auto; } .chaser-note { white-space: pre-wrap; } .chaser-status-row { display: flex; gap: 0.5rem; /* メモ(DxMemo)が複数行で高さが変わるため、上端で揃える。 */ align-items: flex-start; flex-wrap: wrap; } .chaser-status-combo { /* フレックス行内で横いっぱいに伸びないよう固定幅にする（狭い画面では縮む）。 */ flex: 0 0 220px; width: 220px; max-width: 100%; } .chaser-status-note { flex: 1; min-width: 220px; } .chaser-upload { margin-top: 0.75rem; display: flex; gap: 0.75rem; align-items: center; } /* ---- 案件一覧 ---- */ .chaser-detail-link { font-weight: 600; } .chaser-deptlist { max-height: 160px; } /* ---- 案件の編集ポップアップ ---- 既定幅ではラベル・入力値が見切れるため広げる（画面が狭い端末では 96vw まで）。 */ .chaser-edit-popup { min-width: min(920px, 96vw); } /* ---- セクション見出し行（基本情報 [戻る][編集]） ---- */ .chaser-section-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; } .chaser-section-head h2 { margin: 0; } /* ---- サイドメニューの折りたたみ（デスクトップ） ---- html.chaser-nav-collapsed でサイドバーを隠し、左上に「開く」ハンバーガーだけを出す。 状態は localStorage(chaser.sidebarCollapsed) に保存し、App.razor の先行スクリプトで 描画前に適用する（読み込み時のちらつき防止）。モバイル(≤1024px)は従来のドロワーのまま。 */ .app-collapse-reopen { display: none; } @media (min-width: 1025px) { html.chaser-nav-collapsed .app-sidebar { display: none; } html.chaser-nav-collapsed .app-collapse-reopen { display: inline-flex; position: fixed; top: 0.7rem; left: 0.7rem; z-index: 60; background: var(--alt-bg-primary); border: 1px solid var(--alt-border-secondary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } /* 折りたたみ中はハンバーガーと本文が重ならないよう少し余白を足す。 */ html.chaser-nav-collapsed .app-body .container { padding-top: 3.4rem; } } /* サイドバー内の折りたたみトグルはデスクトップ専用（モバイルは上部バーのハンバーガーを使う）。 */ @media (max-width: 1024px) { .app-brand .app-collapse-toggle { display: none; } } /* ===== chaser-additions: 課題管理向けの追加スタイル ===== */ .chaser-prio-high { color: #d92c2c; font-weight: 600; } .chaser-prio-mid { color: #8a94a6; } .chaser-prio-low { color: #2c6fd9; } .chaser-type-badge { display: inline-block; padding: 1px 10px; border-radius: 10px; color: #fff; font-size: 0.8rem; white-space: nowrap; } .chaser-overdue { color: #d92c2c; font-weight: 600; } .chaser-cards { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .chaser-card { flex: 1 1 150px; min-width: 150px; background: #fff; border: 1px solid #e3e8ef; border-radius: 8px; padding: 14px 16px; cursor: pointer; text-decoration: none; color: inherit; } .chaser-card:hover { border-color: #7a8ba6; } .chaser-card .num { font-size: 1.6rem; font-weight: 700; display: block; } .chaser-card .lbl { color: #5b6b81; font-size: 0.85rem; } .chaser-card.warn .num { color: #d92c2c; } .chaser-timeline { list-style: none; margin: 0; padding: 0; } .chaser-timeline li { border-top: 1px solid #e3e8ef; padding: 10px 4px; } .chaser-timeline .meta { color: #5b6b81; font-size: 0.85rem; margin-bottom: 4px; } .chaser-timeline .changes { color: #3a4a5f; font-size: 0.9rem; white-space: pre-line; } .chaser-timeline .body { white-space: pre-wrap; margin-top: 4px; } .chaser-detail-grid { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; } @media (max-width: 900px) { .chaser-detail-grid { grid-template-columns: 1fr; } } .chaser-attr-table { width: 100%; font-size: 0.9rem; } .chaser-attr-table th { text-align: left; color: #5b6b81; font-weight: 500; padding: 4px 8px 4px 0; width: 40%; vertical-align: top; } .chaser-attr-table td { padding: 4px 0; } /* ===== コメント欄の @メンション ===== */ .chaser-comment-wrap { position: relative; } .chaser-comment-input { width: 100%; box-sizing: border-box; resize: vertical; min-height: 76px; border: 1px solid #cdd6e1; border-radius: 6px; padding: 8px 10px; font: inherit; line-height: 1.5; } .chaser-comment-input:focus { outline: 2px solid #7a8ba6; outline-offset: -1px; } .chaser-mention-pop { position: absolute; z-index: 30; background: #fff; border: 1px solid #cdd6e1; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); max-height: 220px; overflow-y: auto; min-width: 240px; } .chaser-mention-pop button { display: block; width: 100%; text-align: left; padding: 6px 10px; border: 0; background: none; cursor: pointer; font: inherit; white-space: nowrap; } .chaser-mention-pop button:hover, .chaser-mention-pop button.active { background: #eef2f7; } .chaser-mention-pop .token { font-weight: 600; margin-right: 8px; } .chaser-mention-pop .name { color: #5b6b81; font-size: 0.85rem; } .chaser-mention { color: #2c6fd9; font-weight: 600; } /* コメント欄のアクション行（ステータス・担当者・登録ボタン） */ .chaser-comment-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .chaser-inline-label { color: #5b6b81; font-size: 0.85rem; white-space: nowrap; } /* 課題の詳細表示（改行をそのまま表示。長文・長いURLは折り返す） */ .chaser-description { white-space: pre-wrap; overflow-wrap: break-word; line-height: 1.7; } .chaser-status-select { width: 160px; } .chaser-assignee-wrap { display: inline-block; } .chaser-assignee-select { width: 240px; } /* ===== Phase2 ===== */ /* Markdown 描画（詳細・コメント）。pre-wrap だと Markdown の改行が二重になるため打ち消す */ .chaser-markdown { white-space: normal; } .chaser-markdown p { margin: 0 0 8px; } .chaser-markdown pre { background: #f4f6f9; border: 1px solid #e3e8ef; border-radius: 6px; padding: 10px; overflow-x: auto; } .chaser-markdown code { background: #f4f6f9; border-radius: 4px; padding: 1px 4px; } .chaser-markdown pre code { background: none; padding: 0; } .chaser-markdown table { border-collapse: collapse; margin: 8px 0; } .chaser-markdown th, .chaser-markdown td { border: 1px solid #cdd6e1; padding: 4px 10px; } .chaser-markdown blockquote { border-left: 3px solid #cdd6e1; margin: 8px 0; padding: 2px 12px; color: #5b6b81; } /* 子課題一覧 */ .chaser-children { width: 100%; font-size: 0.9rem; border-collapse: collapse; margin-bottom: 8px; } .chaser-children td { border-top: 1px solid #e3e8ef; padding: 6px 8px; } .chaser-children tr { cursor: pointer; } .chaser-children tr:hover td { background: #f4f6f9; } .chaser-children .key { white-space: nowrap; font-weight: 600; } /* カンバンボード */ .chaser-board { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding-bottom: 12px; } .chaser-board-col { flex: 1 0 260px; min-width: 260px; background: #f4f6f9; border: 1px solid #e3e8ef; border-radius: 8px; padding: 8px; min-height: 240px; } .chaser-board-col.drag-over { border-color: #2c6fd9; background: #eef4fd; } .chaser-board-col .col-header { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 8px; font-weight: 600; } .chaser-board-col .col-header .count { color: #5b6b81; font-weight: 500; } .chaser-board-card { background: #fff; border: 1px solid #e3e8ef; border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; cursor: pointer; } .chaser-board-card:hover { border-color: #7a8ba6; } .chaser-board-card[draggable="true"] { cursor: grab; } .chaser-board-card .card-top { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 4px; } .chaser-board-card .card-top .key { font-weight: 600; font-size: 0.85rem; } .chaser-board-card .card-title { font-size: 0.9rem; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .chaser-board-card .card-meta { display: flex; gap: 10px; font-size: 0.82rem; color: #5b6b81; } .chaser-board-col .col-more { display: block; text-align: center; padding: 6px; font-size: 0.85rem; } /* お知らせベル（サイドバー） */ .chaser-bell { display: flex; align-items: center; gap: 8px; position: relative; padding: 8px 14px; margin: 0 8px 4px; border-radius: 6px; color: inherit; text-decoration: none; font-size: 0.9rem; } .chaser-bell:hover { background: rgba(0, 0, 0, 0.06); } .chaser-bell-badge { background: #d92c2c; color: #fff; border-radius: 10px; font-size: 0.72rem; font-weight: 700; padding: 1px 7px; margin-left: auto; } /* お知らせ一覧 */ .chaser-notif-list { list-style: none; margin: 0; padding: 0; } .chaser-notif-list li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; border-top: 1px solid #e3e8ef; padding: 10px 8px; cursor: pointer; } .chaser-notif-list li:hover { background: #f4f6f9; } .chaser-notif-list li.unread { background: #eef4fd; font-weight: 600; } .chaser-notif-list .kind { color: #5b6b81; font-size: 0.82rem; white-space: nowrap; } .chaser-notif-list .issue { color: #5b6b81; font-size: 0.85rem; } .chaser-notif-list .time { margin-left: auto; color: #8a94a6; font-size: 0.82rem; white-space: nowrap; } /* 課題一覧のツールバー（表示対象 → 余白 → コマンドボタン → 右端にフィルター類） ※ベースの .grid-toolbar（右寄せ・stretch）に勝つよう詳細度を上げて上書きする */ .grid-toolbar.chaser-issues-toolbar { display: flex; align-items: center; /* stretch だとコンボが縦に伸びるので中央揃え＝標準の高さにする */ justify-content: flex-start; gap: 8px; flex-wrap: wrap; } .grid-toolbar.chaser-issues-toolbar .toolbar-gap { width: 16px; } .grid-toolbar.chaser-issues-toolbar .toolbar-right { margin-left: auto; } .chaser-issues-toolbar .toolbar-right .grid-toolbar { margin: 0; display: flex; align-items: center; gap: 8px; } /* 表示対象コンボは標準の入力高さのまま（縦に伸ばさない） */ .grid-toolbar.chaser-issues-toolbar .chaser-status-select { width: 180px; align-self: center; } /* フィルター・表示リセットの縦幅を「課題を追加」「ボード」と同じに揃える */ .chaser-issues-toolbar .toolbar-right .grid-toolbar .dxbl-btn { padding-top: 0.5rem; padding-bottom: 0.5rem; } /* 課題ID・件名のコピーボタン（小さなチップ。title属性でホバー説明） */ .chaser-copy-btn { border: 1px solid #cdd6e1; border-radius: 4px; background: #fff; color: #3a4a5f; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; cursor: pointer; line-height: 1.4; } .chaser-copy-btn:hover { background: #eef2f7; border-color: #7a8ba6; } /* 課題詳細のタイトル: 課題キーは通常文字サイズ＋太字（バッジ・件名とベースライン揃え） */ .chaser-issue-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .chaser-issue-title .chaser-issue-key { font-size: 1rem; font-weight: 700; white-space: nowrap; } /* 一覧グリッド共通: 行の縦幅を広げる（行が詰まっていて誤クリックしやすいため）。 DevExpress テーマのセルパディングを上書きするので !important を使用。 */ .dxbl-grid .dxbl-grid-table > tbody > tr > td { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } /* GitHub タブ・連携ウィザード */ .repo-input { width: 320px; } .repo-ok { color: #1d7a3a; font-weight: 600; font-size: 0.88rem; } .wizard-steps { display: flex; gap: 12px; margin-bottom: 12px; color: #8a94a6; font-size: 0.88rem; } .wizard-steps .active { color: #2c6fd9; font-weight: 700; } .wizard-github-link { display: inline-block; margin: 4px 0 10px; padding: 8px 14px; background: #24292f; color: #fff; border-radius: 6px; text-decoration: none; font-weight: 600; } .wizard-github-link:hover { background: #3a4149; color: #fff; } .wizard-table code { word-break: break-all; } .wizard-table td { padding: 6px 0; } /* ========== Phase 3: ガント・バーンダウン・ウォッチ ========== */ /* ガントチャート（自前描画。バー操作は js/gantt.js） */ .chaser-gantt { overflow: auto; max-height: calc(100vh - 240px); border: 1px solid #dde4ee; border-radius: 6px; background: #fff; } .chaser-gantt .gantt-empty { padding: 14px; margin: 0; } .gantt-canvas { position: relative; min-width: 100%; } .gantt-row { display: flex; height: 34px; border-bottom: 1px solid #eef2f7; } .gantt-row.gantt-head { position: sticky; top: 0; z-index: 5; height: 40px; font-size: 0.8rem; color: #5a6a80; border-bottom: 1px solid #dde4ee; } .gantt-left { position: sticky; left: 0; z-index: 4; width: 320px; min-width: 320px; max-width: 320px; background: #fff; border-right: 1px solid #dde4ee; padding: 0 10px; display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; font-size: 0.86rem; } .gantt-head .gantt-left, .gantt-head .gantt-tl { background: #f6f8fb; } .gantt-left a { font-weight: 700; text-decoration: none; flex: none; } .gantt-left a:hover { text-decoration: underline; } .gantt-left .t { overflow: hidden; text-overflow: ellipsis; } .gantt-ms-row .gantt-left { color: #8a6d00; font-weight: 600; } .gantt-tl { position: relative; flex: none; /* 週単位（月曜）の縦罫線。タイル幅・位置はインライン style で指定する。 */ background-image: linear-gradient(to right, #e9eef5 0 1px, transparent 1px); background-repeat: repeat-x; } .gantt-month { position: absolute; top: 2px; height: 18px; border-left: 1px solid #cdd6e1; padding: 0 5px; font-weight: 600; overflow: hidden; white-space: nowrap; } .gantt-day { position: absolute; bottom: 2px; font-size: 0.68rem; color: #8a94a6; text-align: center; } .gantt-day.we { color: #cc7070; } .gantt-bar { position: absolute; top: 7px; height: 20px; border-radius: 4px; cursor: grab; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); touch-action: none; /* タッチでもドラッグできるようスクロールを抑止 */ } .gantt-bar.readonly { cursor: pointer; } /* バー色: 状態バッジと同系（未対応=赤/処理中=青/処理済み=緑/完了=グレー） */ .gantt-bar.s1 { background: #e06a86; } .gantt-bar.s2 { background: #4f83cc; } .gantt-bar.s3 { background: #5aa66b; } .gantt-bar.s4 { background: #9aa4b2; } .gantt-handle { position: absolute; top: 0; width: 8px; height: 100%; cursor: ew-resize; } .gantt-handle.h-l { left: -2px; } .gantt-handle.h-r { right: -2px; } .gantt-ms { position: absolute; top: 6px; color: #b58900; font-size: 0.95rem; line-height: 1; pointer-events: none; } .gantt-today { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(44, 111, 217, 0.55); z-index: 3; pointer-events: none; } .gantt-zoom { display: inline-flex; border: 1px solid #cdd6e1; border-radius: 4px; overflow: hidden; } .gantt-zoom button { border: none; background: #fff; color: #5a6a80; padding: 0.4rem 0.9rem; cursor: pointer; font-size: 0.85rem; } .gantt-zoom button + button { border-left: 1px solid #cdd6e1; } .gantt-zoom button.on { background: #2c6fd9; color: #fff; font-weight: 600; } /* タイムライン: コメントの「編集済」表示（薄いグレーで本文の末尾に） */ .chaser-timeline .chaser-edited { color: #a7b0bd; font-size: 0.75rem; margin-left: 6px; user-select: none; } /* タイムライン: コメントのインライン編集 */ .chaser-comment-edit { margin-top: 6px; } .chaser-comment-edit .dialog-buttons { margin-top: 6px; } /* チケット番号（#4 形式。一覧・ボード・ガントなどで共通） */ .chaser-issue-num { font-weight: 600; color: #5a6a80; white-space: nowrap; } /* 日付未設定の課題リスト（ガント下部） */ .chaser-undated { margin-top: 14px; padding: 10px 14px; background: #f6f8fb; border: 1px solid #dde4ee; border-radius: 6px; } .chaser-undated h3 { margin: 0 0 6px; font-size: 0.92rem; color: #5a6a80; } .chaser-undated ul { margin: 0; padding-left: 1.2rem; } .chaser-undated li { margin: 2px 0; font-size: 0.9rem; } .chaser-undated a { text-decoration: none; } .chaser-undated a:hover { text-decoration: underline; } /* バーンダウンチャート（サマリは Phase1 の chaser-cards を流用） */ .chaser-burndown { height: 420px; max-width: 980px; margin-top: 8px; } /* 課題詳細の ☆ウォッチ トグル */ .chaser-watch-btn { border: 1px solid #cdd6e1; border-radius: 4px; background: #fff; color: #5a6a80; font-size: 0.8rem; padding: 3px 10px; cursor: pointer; line-height: 1.5; white-space: nowrap; } .chaser-watch-btn:hover { background: #eef2f7; border-color: #7a8ba6; } .chaser-watch-btn.on { background: #fff7e0; border-color: #e0b000; color: #8a6d00; font-weight: 600; } /* ========== Phase 4: 依存関係・ガント依存線・カスタム状態/属性 ========== */ /* 課題詳細: 依存関係セクション */ .chaser-deps .chaser-dep-title { margin: 10px 0 4px; font-size: 0.88rem; color: #5a6a80; font-weight: 600; } .chaser-dep-add { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .chaser-dep-add .chaser-assignee-select { min-width: 280px; } /* ガント: 依存線（SVG オーバーレイ。クリックは透過させる） */ .gantt-deps { position: absolute; top: 0; pointer-events: none; z-index: 2; overflow: visible; } .gantt-dep-line { stroke: #8896b3; stroke-width: 1.5; opacity: 0.85; } .gantt-dep-arrow { fill: #8896b3; opacity: 0.85; } /* カラーパレット（プロジェクト設定の種別・状態の色選択。ColorPalette.razor） */ .chaser-color-palette { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; } .chaser-color-palette .swatch { width: 26px; height: 26px; border-radius: 6px; border: 2px solid #fff; box-shadow: 0 0 0 1px #cdd6e1; cursor: pointer; padding: 0; } .chaser-color-palette .swatch:hover { box-shadow: 0 0 0 2px #7a8ba6; } .chaser-color-palette .swatch.on { box-shadow: 0 0 0 2px #1f2d3d; /* 選択中は濃いリングで強調 */ } /* 「＋」= 任意の色を選ぶネイティブのカラーピッカー。input は透明にしてラベル全体をクリック領域にする */ .chaser-color-palette .swatch.custom { position: relative; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: #5a6a80; font-size: 0.9rem; font-weight: 700; line-height: 1; overflow: hidden; } .chaser-color-palette .swatch.custom input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; padding: 0; } .chaser-color-palette .swatch.custom span { pointer-events: none; } /* ===== Phase5 ===== */ /* ボード: カスタム状態列で列数が増えるため横スクロール。列幅は最小値を確保する */ .chaser-board { overflow-x: auto; padding-bottom: 6px; } .chaser-board-col { min-width: 230px; flex: 1 0 230px; } /* カスタム状態列ヘッダーのカテゴリー小書き */ .chaser-board .col-header .col-cat { font-size: 0.72rem; color: #7a8ba6; margin-left: 2px; white-space: nowrap; } /* ガント: 依存作成ハンドル（バー右端の○。hover 時のみ表示） */ .gantt-handle.h-link { position: absolute; right: -14px; top: 50%; width: 11px; height: 11px; margin-top: -6px; border-radius: 50%; background: #fff; border: 2px solid #4d7cc7; cursor: crosshair; opacity: 0; z-index: 3; } .gantt-bar:hover .gantt-handle.h-link { opacity: 1; } /* ガント: ドロップ先バーの強調（依存作成ドラッグ中） */ .gantt-bar.link-target { outline: 2px solid #4d7cc7; outline-offset: 1px; } /* ガント: 依存作成中の仮線（gantt.js が生成する一時 SVG） */ .gantt-linkline { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 6; overflow: visible; } .gantt-linkline line { stroke: #4d7cc7; stroke-width: 1.5; stroke-dasharray: 4 3; } /* ガント: 依存線の当たり判定（透明の太線。hover でうっすら見せてクリック解除を示す） */ .gantt-dep-hit { stroke: transparent; stroke-width: 9; pointer-events: stroke; cursor: pointer; } .gantt-dep-hit:hover { stroke: rgba(77, 124, 199, 0.22); } /* お知らせ: メール通知の詳細設定パネル（種別・配信方法） */ .chaser-mail-settings { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 4px 0 10px; padding: 8px 12px; background: #f5f7fa; border: 1px solid #e1e7ef; border-radius: 8px; } .chaser-mail-settings .chaser-inline-label { color: #5a6a80; font-size: 0.85rem; } /* ===== Phase6 ===== */ /* 共通: 情報メッセージ（成功トースト相当） */ .chaser-info { margin: 6px 0; padding: 8px 12px; background: #eef7ee; border: 1px solid #bcd9bc; border-radius: 6px; color: #2c6b2c; font-size: 0.9rem; } /* Wiki: 2ペインレイアウト */ .chaser-wiki { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; } .chaser-wiki-side { background: #f7f9fc; border: 1px solid #e1e7ef; border-radius: 8px; padding: 10px; } .chaser-wiki-search { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid #cfd8e3; border-radius: 6px; margin-bottom: 8px; } .chaser-wiki-add { width: 100%; margin-bottom: 8px; } .chaser-wiki-tree, .chaser-wiki-tree ul { list-style: none; margin: 0; padding-left: 0; } .chaser-wiki-tree ul { padding-left: 16px; } .chaser-wiki-tree li { margin: 2px 0; } .chaser-wiki-tree a { display: block; padding: 3px 6px; border-radius: 4px; color: #2b3a55; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chaser-wiki-tree a:hover { background: #e9eef6; } .chaser-wiki-tree a.active { background: #dce7f7; font-weight: 600; } .chaser-wiki-main { min-width: 0; } .chaser-wiki-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; border-bottom: 1px solid #e1e7ef; padding-bottom: 6px; margin-bottom: 10px; } .chaser-wiki-title { margin: 0; font-size: 1.25rem; } .chaser-wiki-actions { margin-left: auto; display: flex; gap: 6px; } .chaser-wiki-body { min-height: 200px; } .chaser-wiki-editor .chaser-wiki-editrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0; } .chaser-wiki-title-input { min-width: 260px; } /* Wiki: 履歴・差分 */ .chaser-wiki-history { background: #f7f9fc; border: 1px solid #e1e7ef; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; } .chaser-wiki-revs { border-collapse: collapse; width: 100%; font-size: 0.9rem; } .chaser-wiki-revs th, .chaser-wiki-revs td { padding: 4px 8px; border-bottom: 1px solid #e6ebf2; text-align: left; } .chaser-wiki-revs tr.active td { background: #eaf1fb; } .chaser-wiki-diff { margin-top: 8px; border: 1px solid #dfe4ec; border-radius: 6px; max-height: 320px; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; white-space: pre-wrap; word-break: break-all; } .chaser-wiki-diff .diff-same { padding: 1px 8px; } .chaser-wiki-diff .diff-add { padding: 1px 8px; background: #e6f4e6; color: #1e6b1e; } .chaser-wiki-diff .diff-del { padding: 1px 8px; background: #fdeaea; color: #a33; text-decoration: line-through; } /* ファイル共有 */ .chaser-fs-folder { font-weight: 600; color: #2b3a55; } .chaser-fs-file { color: #2e6bd6; text-decoration: none; } .chaser-fs-file:hover { text-decoration: underline; } .chaser-fs-size { display: inline-block; width: 100%; text-align: right; } .chaser-fs-popup { display: flex; flex-direction: column; gap: 8px; } .chaser-file-upload { max-width: 320px; } /* 日程調整の提案テーブル */ .chaser-adjust-table { border-collapse: collapse; width: 100%; font-size: 0.9rem; margin: 8px 0; } .chaser-adjust-table th, .chaser-adjust-table td { padding: 4px 8px; border-bottom: 1px solid #e6ebf2; text-align: left; white-space: nowrap; } .chaser-adjust-table td.t { white-space: normal; } /* スター（課題詳細ヘッダー。ウォッチボタンと同系の見た目） */ .chaser-star-btn.on { color: #d99a00; border-color: #d99a00; } /* 絵文字リアクション */ .chaser-reactions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .chaser-reaction-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border: 1px solid #cfd8e3; border-radius: 999px; background: #f7f9fc; cursor: pointer; font-size: 0.9rem; line-height: 1.5; } .chaser-reaction-chip:hover { background: #e9eef6; } .chaser-reaction-chip.mine { border-color: #2e6bd6; background: #e7effc; } .chaser-reaction-chip .cnt { font-size: 0.8rem; color: #5a6a80; } .chaser-reaction-chip.add { padding: 1px 7px; color: #5a6a80; } .chaser-reaction-addwrap { position: relative; display: inline-block; } .chaser-reaction-pop { position: absolute; bottom: calc(100% + 4px); left: 0; display: flex; gap: 2px; padding: 4px 6px; background: #fff; border: 1px solid #cfd8e3; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); z-index: 30; white-space: nowrap; } .chaser-reaction-pop button { border: none; background: transparent; font-size: 1.1rem; cursor: pointer; padding: 2px 4px; border-radius: 4px; } .chaser-reaction-pop button:hover { background: #e9eef6; } /* ガント: 左ペインの追加列（Phase6b。表示項目の選択で列を足せる） */ .gantt-left .t { flex: 1 1 auto; min-width: 0; position: relative; } .gantt-cell { flex: none; box-sizing: border-box; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 1px solid #eef2f7; padding-left: 6px; color: #5a6a80; font-size: 0.82rem; } .gantt-head .gantt-cell { font-weight: 600; color: #5a6a80; overflow: visible; } /* ヘッダーの課題列はつまみ（right:-4px）が切れないよう overflow を解除 */ .gantt-head .gantt-left .t { overflow: visible; } .gantt-cols-select { min-width: 220px; max-width: 420px; } /* ガント: 列幅リサイズのつまみ（ヘッダー右端。Phase6b）とドラッグ中のガイド線 */ .gantt-col-resizer { position: absolute; top: 0; right: -4px; width: 8px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; } .gantt-col-resizer:hover { background: rgba(44, 111, 217, 0.30); } .gantt-col-guide { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(44, 111, 217, 0.55); z-index: 8; pointer-events: none; } /* ガント: マイルストーンの縦線（当日線と同様。◆と同じ黄色系の破線で区別。Phase6b） */ .gantt-msline { position: absolute; top: 0; bottom: 0; width: 2px; background: repeating-linear-gradient( to bottom, rgba(181, 137, 0, 0.55) 0 6px, transparent 6px 10px); z-index: 3; pointer-events: none; } /* ガント: 祝日・カスタム休日（Phase6b。赤字＋うっすら赤背景） */ .gantt-day.hd { color: #c0392b; background: rgba(220, 90, 80, 0.12); font-weight: 600; } /* 一括更新ダイアログ */ .chaser-bulk-form .chaser-bulk-row { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 8px; margin: 6px 0; }