/* ===================================================================== テーマ定義（2026-08-10） app.css の :root で定義したデザイントークンを [data-theme] ごとに上書きする。 - ライト（既定）: 上書きなし（app.css の :root がそのまま効く） - dark : 全体を暗色に。DevExpress は App.razor 側で Fluent の Dark モードを登録 - navy : 本文はライトのまま、サイドバーだけ濃紺 テーマの選択は 個人設定 > テーマ（DB: UserGridLayouts キー "Ui.Theme"）。 は App.razor が SSR で付与する（ちらつき防止）。 ===================================================================== */ /* ---------- ダークテーマ ---------- */ html[data-theme="dark"] { color-scheme: dark; /* スクロールバー・フォーム部品もブラウザ標準の暗色に */ /* 面（背景） */ --alt-bg-body: #181c23; --alt-bg-page: #1e232c; --alt-bg-subtle: #20262f; --alt-bg-muted: #2a3140; --alt-surface: #232935; --alt-bg-primary: #1b202a; /* サイドバー */ --alt-bg-secondary: #2a3140; /* ホバー・アクティブ */ /* 枠線 */ --alt-border: #343d4d; --alt-border-strong: #46536a; --alt-border-primary: #46536a; --alt-border-secondary: #333b49; /* 文字 */ --alt-text-primary: #e8ecf3; --alt-text-body: #d6dde8; --alt-heading: #e2e8f2; --alt-text-strong: #c3cddc; --alt-text-sub: #aab8ca; --alt-text-muted: #8494a9; --alt-text-secondary: #cdd5e0; --alt-text-secondary-hover: #eef2f8; --alt-text-tertiary: #a3adbd; --alt-text-placeholder: #7e8a9c; /* アクセント */ --alt-brand: #5a8fe8; --alt-accent: #5a8fe8; --alt-accent-hover: #7fa9ee; --alt-accent-weak: #4d7cc7; --alt-accent-soft: #253550; --alt-accent-soft-strong: #2e4265; --alt-parent-issue-bg: #2d2a1e; /* 親課題のうす黄背景の暗色版 */ /* 状態色 */ --alt-danger: #e05c5c; --alt-danger-strong: #ef6b6b; --alt-danger-text: #f0a5a5; --alt-danger-bg: #3a2528; --alt-danger-border: #5c3236; --alt-success: #4caf7d; --alt-success-text: #7fd0a3; --alt-success-bg: #22322a; --alt-success-border: #35543f; --alt-warning-bg: #3a3322; --alt-warning-border: #5c5230; --alt-warning-text: #d8b64a; /* ボタン（濃色スレートは暗背景に沈むので少し明るく） */ --alt-btn-primary-bg: #3d5270; --alt-btn-primary-hover: #4a6285; --alt-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); } /* 黒ストロークのアイコンSVGは白抜きに反転する。 （.btn-primary 等の invert(1) と重なっても結果は同じ白なので問題ない） */ html[data-theme="dark"] .alt-ico { filter: invert(1); } /* 影は暗色だと沈むので少し強める */ html[data-theme="dark"] .app-account-pop { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55); } /* ---------- ネイビーサイドバーテーマ（本文はライトのまま） ---------- */ /* サイドバー内だけトークンを差し替える（CSS変数は要素スコープで継承される）。 .app-sidebar 内の既存ルールが参照する変数を上書きすれば、 個々のセレクタを書き直さずに配色が切り替わる。 */ html[data-theme="navy"] .app-sidebar { --alt-bg-primary: #12294d; /* サイドバー本体 */ --alt-bg-secondary: #1c3a66; /* ホバー・アクティブ */ --alt-surface: #1c3a66; /* ポップアップ等の面 */ --alt-border-secondary: #27466f; --alt-border: #27466f; --alt-text-primary: #f2f6fc; --alt-text-secondary: #c8d6ea; --alt-text-secondary-hover: #ffffff; --alt-text-tertiary: #9fb3d1; --alt-text-muted: #8ba1c2; } /* DxTreeView のメニュー文字は DevExpress テーマ（ライト）の濃色のままなので明示的に上書きする。 内部クラス名に依存しないよう、ツリー配下の全要素に強制する（white-space の前例と同じ方針）。 */ html[data-theme="navy"] .app-tree, html[data-theme="navy"] .app-tree * { color: var(--alt-text-secondary) !important; } html[data-theme="navy"] .app-tree .alt-nav-active, html[data-theme="navy"] .app-tree .alt-nav-active * { color: var(--alt-text-secondary-hover) !important; } /* ツリーのホバー・選択背景。 注意: li（dxbl-treeview-item）は子ツリーごと含むため、li に背景を付けると サブツリー全体が反転して見づらい（2026-08-10 実機フィードバック）。 まず DevExpress 既定の薄グレー背景（濃紺上で大きく浮く）を全て消し、 行コンテンツ（.dxbl-treeview-item-content＝その行だけの要素）にだけ半透明白を敷く。 */ html[data-theme="navy"] .app-tree [class*="dxbl-"]:not(.dxbl-badge) { background-color: transparent !important; /* :not(.dxbl-badge): TODOの期限超過バッジ（赤）は意味のある色なので消さない（2026-08-11） */ } /* .dxbl-treeview-item-content は内部クラス名の推測なので、 クラス名に依存しない「li 直下の行div」の構造セレクタも併記して保険にする （li は子ツリーごと含むが、直下の div はその行だけ。:hover は div 自身に当たったときのみ）。 */ html[data-theme="navy"] .app-tree .dxbl-treeview-item-content:hover, html[data-theme="navy"] .app-tree li[class*="dxbl-"] > div:hover { background-color: rgba(255, 255, 255, 0.14) !important; border-radius: var(--alt-radius-sm); } /* 現在ページの強調（.alt-nav-active）は上の transparent より後に再宣言して復活させる。 背景は li 全体ではなく行要素だけ（app.css と同じ方針。子ツリーまで塗らない） */ html[data-theme="navy"] .app-tree li.alt-nav-active > div { background-color: var(--alt-bg-secondary) !important; border-radius: var(--alt-radius-sm); } /* 黒ストロークのアイコン・ロゴ文字はサイドバー内だけ白抜きに */ html[data-theme="navy"] .app-sidebar .alt-ico { filter: invert(1); } html[data-theme="navy"] .app-brand a { color: #ffffff; } /* サイドバー幅つまみのホバー色（濃紺上でも見えるように） */ html[data-theme="navy"] .app-sidebar-resizer:hover, html[data-theme="navy"] .app-sidebar-resizer:focus-visible, html[data-theme="navy"] body.app-resizing .app-sidebar-resizer { background: rgba(255, 255, 255, 0.35); } /* ---------- ピンクテーマ（2026-08-10 ユーザー要望） ---------- 全体をやわらかいピンク系トーンに。DevExpress のアクセント色は App.razor 側で SetCustomAccentColor(#d6478f) を登録して合わせている。 */ html[data-theme="pink"] { /* 面（背景） */ --alt-bg-body: #ffffff; --alt-bg-page: #faf3f7; --alt-bg-subtle: #fbf6f9; --alt-bg-muted: #f7e8f0; --alt-surface: #ffffff; --alt-bg-primary: #fdf4f8; /* サイドバー: 淡いピンク */ --alt-bg-secondary: #f7e3ee; /* ホバー・アクティブ */ /* 枠線 */ --alt-border: #f0dbe7; --alt-border-strong: #e3c2d4; --alt-border-primary: #e3c2d4; --alt-border-secondary: #f0dfe9; /* 文字（ピンクに合うローズ寄りのダークトーン） */ --alt-text-primary: #2b1e26; --alt-text-body: #33262e; --alt-heading: #5c3b4e; --alt-text-strong: #6b4a5c; --alt-text-sub: #8a6478; --alt-text-muted: #a98a9a; --alt-text-secondary: #4d3a44; --alt-text-secondary-hover: #2b1e26; --alt-text-tertiary: #7d6270; /* アクセント */ --alt-brand: #d6478f; --alt-accent: #d6478f; --alt-accent-hover: #b93377; --alt-accent-weak: #dd7bad; --alt-accent-soft: #fbe9f3; --alt-accent-soft-strong: #f5d3e6; /* ボタン */ --alt-btn-primary-bg: #b93377; --alt-btn-primary-hover: #a02a66; } /* ---------- サイドバーのカスタム配色（2026-08-10 ユーザー要望） ---------- 個人設定「テーマ」タブで任意の色を選ぶと、App.razor が を付与する。 どのテーマとも組み合わせ可能（テーマ標準のサイドバー配色より優先）。 明暗（tone）はサーバー側で計算済み。ホバー・枠線などの派生色は color-mix で作る。 */ html[data-sidebar-tone] .app-sidebar { --alt-bg-primary: var(--alt-sidebar-custom); } /* 明るい色: 文字は濃色のまま。ホバー・枠線は少し暗い同系色 */ html[data-sidebar-tone="light"] .app-sidebar { --alt-bg-secondary: color-mix(in srgb, var(--alt-sidebar-custom), #000000 8%); --alt-surface: color-mix(in srgb, var(--alt-sidebar-custom), #ffffff 45%); --alt-border-secondary: color-mix(in srgb, var(--alt-sidebar-custom), #000000 14%); --alt-border: color-mix(in srgb, var(--alt-sidebar-custom), #000000 14%); --alt-text-primary: #2a2f3a; --alt-text-secondary: #3a4150; --alt-text-secondary-hover: #171c26; --alt-text-tertiary: #5a6272; } /* ダークテーマ×明るいカスタム色: ツリー文字は DevExpress ダークテーマの白のままだと 読めないので濃色を強制。アイコンの白抜き（ダークテーマの全体invert）も打ち消す */ html[data-sidebar-tone="light"] .app-tree, html[data-sidebar-tone="light"] .app-tree * { color: var(--alt-text-secondary) !important; } html[data-theme="dark"][data-sidebar-tone="light"] .app-sidebar .alt-ico { filter: none; } /* 暗い色: navy テーマと同じ方針で文字・アイコンを白系にする */ html[data-sidebar-tone="dark"] .app-sidebar { --alt-bg-secondary: color-mix(in srgb, var(--alt-sidebar-custom), #ffffff 14%); --alt-surface: color-mix(in srgb, var(--alt-sidebar-custom), #ffffff 14%); --alt-border-secondary: color-mix(in srgb, var(--alt-sidebar-custom), #ffffff 20%); --alt-border: color-mix(in srgb, var(--alt-sidebar-custom), #ffffff 20%); --alt-text-primary: #f5f7fb; --alt-text-secondary: color-mix(in srgb, #ffffff 84%, var(--alt-sidebar-custom)); --alt-text-secondary-hover: #ffffff; --alt-text-tertiary: color-mix(in srgb, #ffffff 66%, var(--alt-sidebar-custom)); --alt-text-muted: color-mix(in srgb, #ffffff 55%, var(--alt-sidebar-custom)); } html[data-sidebar-tone="dark"] .app-tree, html[data-sidebar-tone="dark"] .app-tree * { color: var(--alt-text-secondary) !important; } html[data-sidebar-tone="dark"] .app-tree .alt-nav-active, html[data-sidebar-tone="dark"] .app-tree .alt-nav-active * { color: var(--alt-text-secondary-hover) !important; } html[data-sidebar-tone="dark"] .app-tree [class*="dxbl-"]:not(.dxbl-badge) { background-color: transparent !important; /* :not(.dxbl-badge): TODOの期限超過バッジ（赤）は意味のある色なので消さない（2026-08-11） */ } /* 現在ページの強調は transparent より後に行要素だけ復活（navy と同じ方針） */ html[data-sidebar-tone="dark"] .app-tree li.alt-nav-active > div { background-color: var(--alt-bg-secondary) !important; border-radius: var(--alt-radius-sm); } html[data-sidebar-tone="dark"] .app-tree .dxbl-treeview-item-content:hover, html[data-sidebar-tone="dark"] .app-tree li[class*="dxbl-"] > div:hover { background-color: rgba(255, 255, 255, 0.14) !important; border-radius: var(--alt-radius-sm); } html[data-sidebar-tone="dark"] .app-sidebar .alt-ico { filter: invert(1); } html[data-sidebar-tone="dark"] .app-brand a { color: #ffffff; } html[data-sidebar-tone="dark"] .app-sidebar-resizer:hover, html[data-sidebar-tone="dark"] .app-sidebar-resizer:focus-visible, html[data-sidebar-tone="dark"] body.app-resizing .app-sidebar-resizer { background: rgba(255, 255, 255, 0.35); } /* ==== ワークフロー図（dxDiagram。Phase10） ==== ダークテーマではキャンバス（紙）背景のみ暗色にする。進捗の意味色 （緑=通過済み/青=現在地/グレー=未到達/赤=却下/オレンジ=差戻し）は テーマトークンに寄せず固定（バッジ・ガントバーと同方針）。 SVG では CSS 指定が fill 属性より優先されるため、この上書きだけで効く。 */ html[data-theme="dark"] .dxdi-canvas rect.page, html[data-theme="dark"] .dxdi-canvas rect.grid-page { fill: #252b33; } html[data-theme="dark"] .dxdi-canvas rect.grid { opacity: 0.15; }