/* * pw-console のスタイル（UI刷新 Step 1）。 * Bootstrap 5.3 + Bootstrap Icons をベースにした管理画面トーン（GitHub風：ライトグレー背景＋白パネル＋ * 細いボーダー）。Bootstrapのコンポーネント内部変数を極力使い、独自CSSは上書きの最小限に留める。 * 旧ウェディング調トークン（ローズ×ゴールド）は全廃。 */ :root, [data-bs-theme="light"] { --bs-body-bg: #f6f8fa; --bs-body-color: #1f2328; --bs-border-color: #d0d7de; --bs-border-color-translucent: rgba(31, 35, 40, .15); --bs-primary: #0969da; --bs-primary-rgb: 9, 105, 218; --bs-primary-text-emphasis: #0550ae; --bs-primary-bg-subtle: #ddf4ff; --bs-primary-border-subtle: #a6d5fa; --bs-link-color: #0969da; --bs-link-color-rgb: 9, 105, 218; --bs-link-hover-color: #0550ae; --bs-link-hover-color-rgb: 5, 80, 174; --pw-panel-bg: #ffffff; --pw-hover-bg: #f0f3f6; /* UI刷新 docs-ui-2 E: ファイル種別アイコン色（VS Code/macOS風）とIssue状態色（GitHub風） */ --pw-icon-folder: #9a6700; --pw-icon-md: var(--bs-secondary-color); --pw-icon-image: #0d7377; --pw-issue-open: #1a7f37; --pw-issue-closed: #8250df; /* roadmap（テーブル形式・案6C）: 状態/優先度/期日セルの文字色。彩度は低め、注意を引くべき ものだけ色を付ける（山下さん確定仕様）。ダーク/ライト双方で読める値をそれぞれ用意する。 roadmap独立レビュー⑨: --pw-priority-low・--pw-date-normal（#6e7781）と--pw-date-soon （#9a6700）は、テーブル行ホバー時の背景 --pw-hover-bg（#f0f3f6）に対してWCAG AA(4.5:1)未満 だった（非ホバー時=白背景では合格）。ホバー時も含めて常時AAを満たすよう暗くする （ダークモード側の値は現状でAA合格のため変更しない）。 */ --pw-status-filed: #656d76; --pw-status-waiting: #0969da; --pw-status-progress: #bc4c00; --pw-status-review: #8250df; --pw-priority-highest: #cf222e; --pw-priority-high: #bc4c00; --pw-priority-low: #5c6570; --pw-date-overdue: #cf222e; --pw-date-soon: #8a5c00; --pw-date-normal: #5c6570; } [data-bs-theme="dark"] { --bs-body-bg: #0d1117; --bs-body-color: #c9d1d9; --bs-border-color: #30363d; --bs-border-color-translucent: rgba(240, 246, 252, .15); --bs-primary: #4493f8; --bs-primary-rgb: 68, 147, 248; --bs-primary-text-emphasis: #79c0ff; --bs-primary-bg-subtle: #0d2846; --bs-primary-border-subtle: #1f4c86; --bs-link-color: #4493f8; --bs-link-color-rgb: 68, 147, 248; --bs-link-hover-color: #79c0ff; --bs-link-hover-color-rgb: 121, 192, 255; --pw-panel-bg: #161b22; --pw-hover-bg: #1c232c; --pw-icon-folder: #d29922; --pw-icon-md: var(--bs-secondary-color); --pw-icon-image: #39c5cf; --pw-issue-open: #3fb950; --pw-issue-closed: #ab7df8; --pw-status-filed: #8b949e; --pw-status-waiting: #4493f8; --pw-status-progress: #db6e28; --pw-status-review: #ab7df8; --pw-priority-highest: #ff7b72; --pw-priority-high: #db6e28; --pw-priority-low: #8b949e; --pw-date-overdue: #ff7b72; --pw-date-soon: #d29922; --pw-date-normal: #8b949e; } body { /* GitHubと同じくシステムフォント経由にする（"Hiragino Sans"直指定はMacで細いW3が 使われて薄く見えるため避ける。-apple-system経由なら和文も適正ウェイトで描画される） */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 14px; } /* card/toast/list-group-itemは既定で --bs-card-bg 等がページ背景(--bs-body-bg)連動のため、 ページ背景から分離した白/ダークのパネル色を明示する（GitHub風の「白パネル」トーン） */ .card, .toast, .list-group-item, .dropdown-menu { background-color: var(--pw-panel-bg); } /* アクセント色（primary）はBootstrapのコンパイル済みCSSがコンポーネント単位でハードコードしているため、 使用箇所（ボタン・フォーカスリング・active nav）だけ変数を上書きする */ .btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary-text-emphasis); --bs-btn-hover-border-color: var(--bs-primary-text-emphasis); --bs-btn-active-bg: var(--bs-primary-text-emphasis); --bs-btn-active-border-color: var(--bs-primary-text-emphasis); --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); } .btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); --bs-btn-disabled-color: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); } .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .18); } /* ---- レイアウト（サイドバー＋メイン）: Phase1/2の構造を維持し、見た目のみBootstrap化 ---- */ /* ナビ再編（案A採用）: ヘッダー（navbar）を廃止したため、.app-shellはビューポート全高を使う （旧: calc(100vh - 56px)）。 */ .app-shell { display: flex; min-height: 100vh; transition: margin-right .2s ease; } /* AIチャット・デスクトップ「押し出し」表示: パネルを開くとbodyにchat-dockedが付き（JS）、 本文（.app-shell）がパネル幅ぶん右マージンを取って横に並ぶ。992px未満はJS側でこのクラスを 付けない＝従来どおりの全画面オーバーレイのまま。 ai-chat-v3: パネル幅は--chat-panel-width（documentElementにJSがセット。既定440px）と連動する。 .chat-panelの幅（下部で定義）と必ずセットで変える。 */ @media (min-width: 992px) { body.chat-docked .app-shell { margin-right: var(--chat-panel-width, 440px); } } /* ナビ再編（案A採用）: ヘッダー廃止に伴い、ロゴ・ロードマップ・アカウントをサイドバー内へ集約した。 サイドバー自身はビューポート全高を使い（height: 100vh + sticky top: 0）、内部は縦のflexで 「ロゴ→ナビ→ドキュメント見出し→検索→(ここだけ伸縮・スクロールする).sidebar-scroll→アカウント」の 順に並べる。ツリーがどれだけ長くてもロゴ・ナビ・アカウントは常に見える位置に固定される。 独立レビュー: heightは100dvh（100vhはフォールバック）。iOS/iPadOS Safariの100vhはツールバー 格納時の高さ（ラージビューポート）なので、iPad横向き（992px以上＝デスクトップ分岐）だと サイドバーが可視領域より数十px高くなり、最下部のアカウント行（操作者名・設定リンク）が ツールバーの裏に入ってスクロールしても出てこなくなる（stickyで下端が100vh位置に固定されるため）。 また height は消さないこと。指定を外すと .app-shell の align-items: stretch が復活して サイドバーが本文と同じ高さまで伸び、position: sticky が無音で効かなくなる。 */ .sidebar { width: 260px; flex: none; background: var(--pw-panel-bg); border-right: 1px solid var(--bs-border-color); padding: 20px 16px; display: flex; flex-direction: column; height: 100vh; height: 100dvh; position: sticky; top: 0; } /* scope-row: サイドバー上部の会社行／プロジェクト行（案D-1）。旧.sidebar-brand（ブランド行）と 旧.sidebar-tenant-switch（アカウント＋プロジェクトが1つのドロップダウンに同居した一体型 スイッチャー）を置き換えた。各行は「ラベル（・遷移先）＋矢印ボタン（切替ドロップダウン）」の 共通の型。goal-inline-btnと同じ考え方で、Bootstrap既定の.btn装飾（枠・影）は使わず、 .sidebar-nav aと同じ「小さめ・控えめ」のトーン（padding 6px 8px / border-radius 6px / hoverはvar(--pw-hover-bg)）に合わせた自前スタイルにする。 */ .scope-row { display: flex; align-items: center; gap: 1px; } .scope-row .scope-label { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; padding: 6px 8px; border-radius: 6px; color: inherit; text-decoration: none; } .scope-row .scope-label:hover { background: var(--pw-hover-bg); } .scope-row .scope-label .text-truncate { min-width: 0; } .scope-row-account .scope-label { font-size: 15px; font-weight: 600; } /* 六角形マーク。旧.sidebar-brandではinline styleでprimaryを当てていた（style属性を外して クラス化したので、色の指定をここへ移す）。幅を16pxに固定するのは、下のプロジェクト行の 字下げ（padding-left: 32px = 左padding 8px + マーク16px + gap 8px）を、グリフ幅 （1em＝会社行のfont-size依存で15px）に左右されず正確に一致させるため。 */ .scope-mark { flex: none; width: 16px; text-align: center; color: var(--bs-primary); } /* プロジェクト行はアイコンを持たないため、左paddingを会社行のアイコン幅ぶん（アイコン16px＋ gap 8px）増やし、「メイン」等のラベル文字が会社名の文字と同じ位置から始まるようにする （従属関係を字下げで表す）。 */ .scope-row-project { margin-bottom: 14px; } .scope-row-project .scope-label { font-size: 13px; font-weight: 500; color: var(--bs-secondary-color); padding-left: 32px; } .scope-btn { flex: none; width: 26px; height: 28px; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid transparent; border-radius: 6px; color: var(--bs-secondary-color); text-decoration: none; cursor: pointer; } .scope-btn:hover, .scope-btn[aria-expanded="true"] { background: var(--pw-hover-bg); } .scope-menu { font-size: 13px; min-width: 14rem; max-width: 18rem; } .scope-menu .text-truncate { min-width: 0; } .sidebar-nav { list-style: none; margin: 0 0 14px; padding: 0; } .sidebar-nav a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; color: inherit; text-decoration: none; font-size: 14px; } .sidebar-nav a:hover { background: var(--pw-hover-bg); } .sidebar-nav a.active { background: var(--pw-hover-bg); font-weight: 600; } /* ドキュメントツリーだけを伸縮・スクロールさせる領域（min-height: 0がflexアイテムの overflow-y: autoを効かせるために必須）。 */ .sidebar-scroll { flex: 1; min-height: 0; overflow-y: auto; } .sidebar-account { border-top: 1px solid var(--bs-border-color); margin-top: 12px; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sidebar-account .op { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--bs-secondary-color); min-width: 0; } /* 独立レビュー: .op側のmin-width: 0だけでは中のテキストが縮まず、長いGitHubログイン（概ね16文字超） で右側のリンクの上に文字が重なって読めなくなる（背景が透明なので隠れない）。中のspanで省略し、 右側はflex: noneで縮まないようにする。※ログアウトは設定ページ（/settings/me）最下部へ移したので、 ここに残るのは「設定」リンクだけ。 */ .sidebar-account .op > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-account > a { flex: none; } /* モバイル（lg未満）でサイドバーを開くフローティングボタン。ヘッダー廃止で開閉ボタンの置き場が 無くなった代替（右下はAIチャットの.chat-fabが使用中のため必ず左下）。 独立レビュー: z-indexは1029（.sidebar-backdropの1030の直下）。1500だとサイドバー本体(1035)・ Bootstrapのmodal-backdrop(1050)・modal(1055)より前面に来てしまい、①サイドバーを開くと アカウント行（操作者名）の上に不透明な丸ボタンが被さって読めない・タップも奪う ②サイドバー内から開いたモーダル（新規フォルダ等）の暗幕の上にボタンが浮き、押すとモーダルの裏で サイドバーがトグルされて不整合になる、という実害が出る。1029なら開いた瞬間に暗幕の下へ潜り、 暗幕タップで閉じる自然な挙動になる。 */ .sidebar-fab { position: fixed; left: 16px; bottom: 16px; z-index: 1029; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--pw-panel-bg); border: 1px solid var(--bs-border-color); box-shadow: 0 4px 12px rgba(0, 0, 0, .25); } .sidebar-fab:hover { background: var(--pw-hover-bg); } .sidebar .tree-heading { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--bs-secondary-color); margin: 0 0 8px 4px; } /* 見出しはルート一覧への遷移リンクを兼ねる（見た目は従来の見出しのまま） */ .tree-heading-link { color: inherit; text-decoration: none; } .tree-heading-link:hover { color: var(--bs-primary); } .doc-tree-search .input-group-text { border-right: none; } .doc-tree-search .form-control { border-left: none; } /* UI刷新Step2 A: フォルダ開閉。JS未実行でも初期状態（サーバー側で埋め込んだ.openクラス）どおりに 見えるよう、CSS側は「開いていれば表示」をデフォルトにする（JSがlocalStorageの状態で上書きする） */ .doc-tree { list-style: none; margin: 0; padding: 0; } .doc-tree ul { list-style: none; margin: 0; padding-left: 14px; } .doc-tree li { margin: 1px 0; } .doc-tree-dir > .tree-children { display: none; } .doc-tree-dir.open > .tree-children { display: block; } /* UI刷新 docs-ui-2 B: フォルダ行は「開閉トグル」「フォルダへ遷移するリンク」「＋フォルダボタン(C)」の 3要素からなる行(.doc-tree-row)。同 D: この行がD&Dのドラッグ元・ドロップ先を兼ねる。 */ .doc-tree-row { display: flex; align-items: center; gap: 2px; border-radius: 6px; } .doc-tree-row:hover, .doc-tree-row:focus-within { background: var(--pw-hover-bg); } .doc-tree-toggle { all: unset; box-sizing: border-box; cursor: pointer; flex: none; display: flex; align-items: center; justify-content: center; width: 22px; height: 27px; border-radius: 4px; } .doc-tree-toggle:hover, .doc-tree-toggle:focus-visible { background: var(--bs-tertiary-bg); } .doc-tree-toggle .toggle-caret { font-size: 10px; width: 12px; text-align: center; } .doc-tree-folder-link { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 6px; font-size: 13.5px; font-weight: 600; color: var(--bs-body-color); text-decoration: none; overflow-wrap: anywhere; } .doc-tree-folder-link:hover { color: var(--bs-body-color); } /* E-1: activeファイル/フォルダは--bs-primary系の背景薄掛け＋左ボーダー（box-shadowでレイアウト幅を変えない） */ .doc-tree-folder-link.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); box-shadow: inset 2px 0 0 var(--bs-primary); } /* C: フォルダ行hover時にだけ出す「＋」ボタン。見出し行の常設ボタンは.doc-tree-add-root-btnで別途スタイル */ .doc-tree-add-btn { all: unset; box-sizing: border-box; cursor: pointer; flex: none; opacity: 0; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 4px; color: var(--bs-secondary-color); } .doc-tree-row:hover .doc-tree-add-btn, .doc-tree-row:focus-within .doc-tree-add-btn, .doc-tree-add-btn:focus-visible { opacity: 1; } .doc-tree-add-btn:hover { background: var(--bs-tertiary-bg); color: var(--bs-primary); } .doc-tree-add-root-btn { color: var(--bs-secondary-color); } .doc-tree-add-root-btn:hover { color: var(--bs-primary); } /* D: ドラッグ中のドロップ受け皿ハイライト（フォルダ行・ドキュメント見出し行の両方で使う） */ .doc-tree-row.doc-tree-drop-target, .tree-heading.doc-tree-drop-target { background: var(--bs-primary-bg-subtle); outline: 1px dashed var(--bs-primary); outline-offset: -2px; } .doc-tree a.file-link { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px; font-size: 13.5px; color: var(--bs-body-color); text-decoration: none; overflow-wrap: anywhere; } .doc-tree a.file-link:hover { background: var(--pw-hover-bg); } .doc-tree a.file-link.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); box-shadow: inset 2px 0 0 var(--bs-primary); } /* E-1: ファイル種別ごとのアイコン色（サイドバーツリー・ディレクトリ一覧テーブルの両方に適用） */ .doc-tree .bi-folder, .doc-tree .bi-folder-fill, .doc-list .bi-folder, .doc-list .bi-folder-fill { color: var(--pw-icon-folder); } .doc-tree .bi-file-earmark-text, .doc-list .bi-file-earmark-text { color: var(--pw-icon-md); } .doc-tree .bi-file-earmark-image, .doc-list .bi-file-earmark-image { color: var(--pw-icon-image); } /* drive-tree: Drive共有フォルダセクション（見出しの外部リンクアイコンは控えめに） */ .drive-heading-ext { font-size: 10px; opacity: .6; } .sidebar-backdrop { display: none; } .main-content { flex: 1; min-width: 0; } /* task-detail-ui修正1: 広い画面で左右に300px超の余白ができていたため既定幅を広げた （旧: max-width 1080px / padding 28px 24px 56px）。かつては「読み物（docs）は1080pxの ままにしたい」という理由で全体を1080pxに寄せていたが、その前提は.content-wrap-readの 新設で変わった＝読み物はそちらの個別クラスで1080pxを維持し、既定（このクラス）は 一般画面向けに広げる。 */ .content-wrap { max-width: 1440px; margin: 0 auto; padding: 20px 16px 48px; } /* ロードマップのように列が横に並ぶ画面用。表の幅（約1,086px）を稼ぐためmax-widthだけ広げる。 独立レビュー修正8: 以前はpadding-left/right: 16pxもここで指定していたが、.content-wrap既定の paddingが「20px 16px 48px」に変わった時点で左右16pxは既定と同値になり、実質無意味な指定に なっていた（消しても見た目は変わらない）。誤解を避けるため削除する。 */ .content-wrap-wide { max-width: 1600px; } /* task-detail-ui修正1: 読み物（docs配下）専用。長文を.content-wrap既定の1440px幅で 流すと1行が長すぎて読みにくいため、docs#show/docs#editだけこのクラスで1080pxに戻す。 独立レビュー修正8: max-widthを1080pxへ戻す変更のときpaddingは.content-wrap既定の 「20px 16px 48px」のままになっていた（旧仕様は「28px 24px 56px」）。「読み物は今まで通り」の 意図に合わせ、paddingも読み物用の値へ明示的に戻す。 */ .content-wrap-read { max-width: 1080px; padding: 28px 24px 56px; } @media (max-width: 991.98px) { .app-shell { display: block; } .sidebar { /* ヘッダー廃止によりtopは0起点（旧: 56px）。position: fixedでtop/bottomを両方指定するため、 デスクトップ用のheight: 100vhはここで打ち消す。 */ position: fixed; top: 0; left: 0; bottom: 0; height: auto; width: 78vw; max-width: 300px; z-index: 1035; transform: translateX(-100%); transition: transform .2s ease; } .sidebar.open { transform: translateX(0); box-shadow: 8px 0 24px rgba(0, 0, 0, .15); } .sidebar-backdrop.open { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 1030; } /* 独立レビュー: 下余白は80px（旧40px）。左下の.sidebar-fabと右下の.chat-fabが画面下端を 恒久的に塞ぐため、40pxだとページ最下部のフッター（「最新の情報に更新」リンク等）が ボタンの下に潜ってタップできなくなる。 */ .content-wrap { padding: 20px 16px 80px; } } /* ---- ステータスカード（トップ） ---- */ .stat .stat-k { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--bs-secondary-color); } .stat .stat-v { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 4px; } /* E-4: 意味のある項目だけ左ボーダーで控えめにアクセント（進捗=primary、定例=info） */ .stat-accent-primary { border-left: 3px solid var(--bs-primary); } .stat-accent-info { border-left: 3px solid var(--bs-info); } /* ---- タスク画面（UI刷新 docs-ui-2 E-2）: open=緑・closed=紫（GitHub風） ---- */ /* async-writes: 行内操作の非同期保存フィードバック（保存直後の緑フラッシュ／完了時のフェードアウト） */ @keyframes pw-row-saved { from { background-color: var(--bs-success-bg-subtle); } to { background-color: transparent; } } [data-issue-row].row-saved { animation: pw-row-saved 1.2s ease-out; } [data-issue-row].row-removing { transition: opacity .3s ease-out; opacity: 0; } .text-issue-open { color: var(--pw-issue-open) !important; } .text-issue-closed { color: var(--pw-issue-closed) !important; } /* ---- HTMLプレビュー（html-preview）: LPモック等をiframeで実物表示する ---- 画面いっぱいに近い高さを取り、iframe内部のスクロールで読ませる（外側の枠は固定）。 */ .doc-html-frame { display: block; width: 100%; height: 78vh; min-height: 480px; border: 0; border-bottom-left-radius: var(--bs-border-radius); border-bottom-right-radius: var(--bs-border-radius); background: #fff; } /* ---- ドキュメント本文（Markdownレンダリング） ---- */ .doc-content { font-size: 16px; line-height: 1.8; } .doc-content h1, .doc-content h2, .doc-content h3, .doc-content h4 { font-weight: 600; margin: 1.5em 0 .6em; line-height: 1.5; } .doc-content h1 { font-size: 24px; border-bottom: 1px solid var(--bs-border-color); padding-bottom: .4em; } .doc-content h2 { font-size: 20px; } .doc-content h3 { font-size: 16.5px; } .doc-content h1:first-child, .doc-content h2:first-child, .doc-content h3:first-child { margin-top: 0; } .doc-content p { margin: .8em 0; } .doc-content ul, .doc-content ol { padding-left: 1.6em; margin: .8em 0; } .doc-content li { margin: .3em 0; } .doc-content blockquote { margin: 1em 0; padding: 12px 16px; background: var(--bs-tertiary-bg); border-left: 3px solid var(--bs-border-color); border-radius: 6px; } .doc-content code { background: var(--bs-tertiary-bg); border-radius: 4px; padding: .15em .4em; font-size: .92em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .doc-content pre { background: var(--bs-tertiary-bg); border-radius: 8px; padding: 14px 16px; overflow-x: auto; } .doc-content pre code { background: none; padding: 0; } .doc-content table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: 14.5px; } .doc-content th, .doc-content td { border: 1px solid var(--bs-border-color); padding: 7px 10px; text-align: left; } .doc-content th { background: var(--bs-tertiary-bg); font-weight: 600; } .doc-content img { max-width: 100%; border-radius: 8px; } .doc-content hr { border: none; border-top: 1px solid var(--bs-border-color); margin: 2em 0; } /* ---- AIセッションのMarkdown（AgentMarkdownRenderer出力。tuktuk Step11 PR-B-3） ---- .doc-contentを参考にしつつ、会話の吹き出み・差分カードの折りたたみという狭い幅に収まる よう見出しを小さめにする。imgは出ない前提（レンダラがを除去する）なので定義しない。 */ .agent-markdown { font-size: 14.5px; line-height: 1.7; } .agent-markdown h1, .agent-markdown h2, .agent-markdown h3, .agent-markdown h4, .agent-markdown h5, .agent-markdown h6 { font-weight: 600; margin: .8em 0 .4em; line-height: 1.4; } .agent-markdown h1 { font-size: 18px; } .agent-markdown h2 { font-size: 16px; } .agent-markdown h3, .agent-markdown h4, .agent-markdown h5, .agent-markdown h6 { font-size: 15px; } .agent-markdown p { margin: .5em 0; } .agent-markdown ul, .agent-markdown ol { padding-left: 1.4em; margin: .5em 0; } .agent-markdown li { margin: .2em 0; } .agent-markdown blockquote { margin: .6em 0; padding: 8px 12px; background: var(--bs-tertiary-bg); border-left: 3px solid var(--bs-border-color); border-radius: 6px; } .agent-markdown code { background: var(--bs-tertiary-bg); border-radius: 4px; padding: .1em .35em; font-size: .9em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-word; } .agent-markdown pre { background: var(--bs-tertiary-bg); border-radius: 8px; padding: 10px 12px; white-space: pre-wrap; word-break: break-word; overflow-x: auto; } .agent-markdown pre code { background: none; padding: 0; white-space: inherit; word-break: inherit; } .agent-markdown table { border-collapse: collapse; width: 100%; margin: .6em 0; font-size: 13.5px; display: block; overflow-x: auto; } .agent-markdown th, .agent-markdown td { border: 1px solid var(--bs-border-color); padding: 5px 8px; text-align: left; } .agent-markdown th { background: var(--bs-tertiary-bg); font-weight: 600; } .agent-markdown hr { border: none; border-top: 1px solid var(--bs-border-color); margin: 1em 0; } .agent-markdown > :first-child { margin-top: 0; } .agent-markdown > :last-child { margin-bottom: 0; } .md-editor { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; } /* ---- ファイルヘッダー行（最終コミット情報＋History/Raw/GitHubで開く/編集） ---- */ .doc-file-header { border-bottom: none; } /* ---- アップロードのドロップゾーン（UI刷新Step2 C） ---- */ .doc-dropzone { border: 2px dashed var(--bs-border-color); border-radius: 8px; padding: 32px 16px; text-align: center; color: var(--bs-secondary-color); cursor: pointer; } .doc-dropzone:hover, .doc-dropzone:focus-visible { border-color: var(--bs-primary); background: var(--pw-hover-bg); } .doc-dropzone.dragover { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); } /* ---- ゴールカードの畳み開閉トグル（Phase 3 ステップ3 / exception-view。 doc-treeのbi-chevron-right同様の見た目。Bootstrap collapseが.collapsedクラスを 自動で付け外しするのでJS不要。展開中(=.collapsedが無い)だけ90度回す） ---- */ .goal-card-toggle .bi-chevron-right { display: inline-block; transition: transform .15s ease; } .goal-card-toggle:not(.collapsed) .bi-chevron-right { transform: rotate(90deg); } /* ---- ロードマップ テーブル形式（案6C採用。比較モックpublic/assets/roadmap-mockup.htmlの 案6Cを実装に落とし込んだもの）: 幹（ルート）はカード＋カードヘッダーのまま、配下の子孫と 「親なし」セクションはテーブルの行にする。開閉（.goal-card-toggle再利用によるchevron回転）は 上のルールをそのまま使い、隠す/出すの実処理はJS（application.js initGoalTreeTableRows）が data-goal-ancestor-keysを見て行う。 要望1（横スクロール廃止・全カードで列幅を揃える）: table-layout: fixed + （goals/_tree_table.html.erb）で列幅を固定する。属性6列（種別/状態/優先度/期日/進捗/担当）は 実データの最長表示を基準にpx固定し、タスク名列（goal-tt-col-title）だけ幅を指定せず残り幅を 自動で使う。各列の根拠（TasksController::STATUS_LABELS/KIND_LABELS/PRIORITY_LABELSと goals/_node.html.erbの表示形を実測）: - 種別 90px: バッジ表示。最長は「調査・検証」（badge文字は.75em相当で小さい） - 状態 100px: ●+文字。最長は「着手待ち」 - 優先度 76px: 文字色のみ。最長は「最優先」「いつか」 - 期日 118px: 「次 YYYY-MM-DD」「期 YYYY-MM-DD」が縦に2行出うる - 進捗 136px: 「12/34」+幅60pxのprogressバー - 担当 92px: 22px円形アバター（複数アサインは稀） min-width（属性6列合計612px＋タスク名列の最低幅目安）は、本文幅が.content-wrap-wideで 最大1600pxまで広がる通常のデスクトップ幅では下回らないため実質スクロールしない。 モバイル幅（~768px以下）ではmin-widthを画面幅が下回るため、.goal-tree-table-wrapの overflow-xがフォールバックとして働く。 ---- */ .goal-tree-table-wrap { overflow-x: auto; } .goal-tree-table { width: 100%; min-width: 950px; table-layout: fixed; border-collapse: collapse; } .goal-tree-table th, .goal-tree-table td { border: none; border-bottom: 1px solid var(--bs-border-color-translucent, #f1f3f5); padding: .5rem .75rem; vertical-align: middle; white-space: nowrap; } .goal-tree-table th { font-size: .68rem; text-transform: uppercase; letter-spacing: .02em; color: var(--bs-secondary-color); font-weight: 600; } .goal-tree-table td { font-size: 13px; line-height: 1.4; } /* 要望2（タスク名は折り返す）: このセルだけnowrapを解除する。行数をJSで判定して文字サイズを 変える実装はしない（固定値のみ）。 */ .goal-tree-table td.goal-tt-title-cell { font-size: 13px; line-height: 1.4; white-space: normal; } .goal-tt-col-title { /* 幅指定なし。table-layout: fixedの残り幅を使う */ } .goal-tt-col-kind { width: 90px; } .goal-tt-col-status { width: 100px; } .goal-tt-col-priority { width: 76px; } .goal-tt-col-date { width: 118px; } .goal-tt-col-progress { width: 136px; } .goal-tt-col-assignee { width: 92px; } .goal-tree-table tbody tr:hover { background: var(--pw-hover-bg); } /* タイトルセル内のflex行: トグル・信号ドット・リポバッジは幅を持つ固定要素として縮まない （flex-shrink:0）ようにし、タイトル本文（.goal-row-title）だけがflex:1 min-width:0で 伸縮を引き受ける。これが無いと、幅固定した列内でトグル等が極端に狭い領域へ押し込められ、 崩れる（比較モックで実機確認済みの既知の落とし穴）。 align-items: flex-start（要望2対応・center から変更）: タイトルが折り返して複数行になると、 center のままでは固定高さのトグル・信号ドット・リポバッジが2行ぶんの高さの中央に来てしまい 1行目のタイトルとズレて見える。flex-startなら1行のときの見た目は変わらず、複数行のときだけ 1行目に揃う（副作用のない改善）。 */ .goal-tt-title-row { display: flex; align-items: flex-start; gap: .3rem; min-width: 0; } .goal-tt-title-row .goal-card-toggle, .goal-tt-title-row .bi-circle-fill, .goal-tt-title-row .badge { flex-shrink: 0; } .goal-row-title { flex: 1 1 auto; min-width: 0; max-width: 100%; white-space: normal; color: inherit; text-decoration: none; } .goal-row-title:hover { text-decoration: underline; } /* 状態セル（●+文字。バッジ枠なし）。彩度は低めにし、着手中だけ目立たせる。 */ .goal-status-cell { display: inline-flex; align-items: center; gap: .3rem; } .goal-status-cell .bi-circle-fill { font-size: 7px; } .goal-status-filed { color: var(--pw-status-filed); } .goal-status-waiting { color: var(--pw-status-waiting); } .goal-status-in-progress { color: var(--pw-status-progress); font-weight: 600; } .goal-status-reviewing { color: var(--pw-status-review); } /* 優先度セル（枠なし・文字色のみ）。最優先=赤系/高=オレンジ系/中=通常色/低・いつか=薄いグレー。 */ .goal-priority-highest { color: var(--pw-priority-highest); font-weight: 600; } .goal-priority-high { color: var(--pw-priority-high); } .goal-priority-medium { color: var(--bs-body-color); } .goal-priority-low { color: var(--pw-priority-low); } /* 期日セル。期限切れ=赤／3日以内=黄／それ以外=薄いグレー。 */ .goal-date-overdue { color: var(--pw-date-overdue); font-weight: 600; } .goal-date-soon { color: var(--pw-date-soon); font-weight: 600; } .goal-date-normal { color: var(--pw-date-normal); } /* 担当セル。円形20〜24px。実データにassigneeが付くのは稀（実測: open Issueの大半が未設定） だが、複数人アサインでも横並びで収まるようgapを詰める。 */ .goal-assignee-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 1px solid var(--bs-border-color-translucent, #e9ecef); } /* ---- ロードマップ インライン編集（案C採用。比較用モックpublic/assets/roadmap-inline-edit.html の案Cを実装に落とし込んだもの。同ファイルはgitignore対象・本実装には持ち込まない）: 状態・優先度・期日セルをセル全体クリックのボタン+ドロップダウンで編集できるようにする。 普段の見た目は現行のまま、行にホバーしたときだけ▼が薄く出る。 行の高さ・列幅は変えない（paddingと同量の負のmarginで相殺する）。 幅は calc(100% + .8rem)＝セルの内容幅＋左右の負のmarginぶん。これでホバー枠がセルに対して 四辺とも均等（実測: 左右5.6px / 上下4.7px）にはみ出す。width: 100% だと幅は内容幅のままで 位置だけ左にずれ、枠がセル左端に張り付いて右だけ24px空く非対称になる（実測値）。逆に 幅指定なしだと