/* ===================================================================== Culminans シェルの共通スタイル（chaser の app.css から、シェル（レイアウト・ログイン・個人設定・ ユーザー管理・メッセージ枠・アイコン）に関わる部分だけを抽出して移植したもの。 モジュール固有のスタイルは各モジュールの wwwroot（_content/Culminans.Xxx/…）に置く。 デザイントークン（--alt-*）はモジュールからも使ってよい（テーマは themes.css が上書きする）。 ===================================================================== */ /* ===== デザイントークン（テーマ対応。themes.css が [data-theme] ごとに上書きする） ===== ライトテーマの既定値。色を追加するときは、なるべく既存トークンを使い回すこと。 */ :root { /* 面（背景） */ --alt-bg-body: #ffffff; /* 本文エリアの背景 */ --alt-bg-page: #f4f6f9; /* 画面・パネルのうすい背景 */ --alt-bg-subtle: #f7f9fc; /* さらに薄い背景（ヘッダー行など） */ --alt-bg-muted: #eef2f7; /* ホバー・チップの背景 */ --alt-surface: #ffffff; /* カード・グリッドの面 */ --alt-bg-primary: #ffffff; /* サイドバー等の面（旧トークン。互換のため残す） */ --alt-bg-secondary: #fafafa; /* 枠線 */ --alt-border: #e3e8ef; --alt-border-strong: #cdd6e1; --alt-border-primary: #d4d4d4; --alt-border-secondary: #e5e5e5; /* 文字 */ --alt-text-primary: #171717; --alt-text-body: #1f2933; --alt-heading: #2c3e50; --alt-text-strong: #3a4a5f; --alt-text-sub: #5b6b81; --alt-text-muted: #7a8ba6; --alt-text-secondary: #404040; --alt-text-secondary-hover: #262626; --alt-text-tertiary: #525252; --alt-text-placeholder: #737373; --alt-on-accent: #ffffff; /* アクセント色・濃色の上に載せる文字 */ /* アクセント（ブランド青） */ --alt-brand: #1d4ed8; --alt-accent: #2c6fd9; --alt-accent-hover: #1a44c2; --alt-accent-weak: #4d7cc7; --alt-accent-soft: #eef4fd; /* 選択・ホバーの薄青背景 */ --alt-accent-soft-strong: #dbe8fb; --alt-parent-issue-bg: #fdf9ec; /* 親課題（子課題を持つ課題）のうす黄背景。選択の薄青と区別する */ /* 状態色 */ --alt-danger: #d92c2c; --alt-danger-strong: #b00020; --alt-danger-text: #9b1c14; --alt-danger-bg: #fdf3f3; --alt-danger-border: #f0c2c2; --alt-success: #0b6b3a; --alt-success-text: #166534; --alt-success-bg: #f0faf4; --alt-success-border: #c2e6d2; --alt-warning-bg: #fff7e6; --alt-warning-border: #ffec99; --alt-warning-text: #8a6d00; /* ボタン */ --alt-btn-primary-bg: #2c3e50; --alt-btn-primary-hover: #1f2d3a; /* 形状・影 */ --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; background: var(--alt-bg-body); color: var(--alt-text-body); line-height: 1.6; } /* 本文領域。ブラウザ幅にそのまま追随させる（一覧のグリッドを広い画面いっぱいに使うため）。 以前は max-width: 1200px で中央寄せしていたが、ワイドモニタで左右が大きく余り、 案件一覧の列が横スクロールに追いやられていたので上限を外した。 */ .container { margin: 1.75rem 0; padding: 0 1.5rem; width: 100%; box-sizing: border-box; } h1 { color: var(--alt-heading); } h2 { color: var(--alt-heading); font-size: 1.15rem; margin-top: 1.5rem; } #blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--alt-warning-bg); 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: var(--alt-text-primary); font-size: 15px; line-height: 22px; font-weight: 700; text-decoration: none; } /* DevExpress の DxTreeView（サイドバーのメニュー）。 user-select: none はダブルクリック開閉（tree-dblclick.js）でメニュー文字が 選択反転しないようにするため（2026-08-10）。 */ .app-tree { padding: 0 16px; overflow: hidden; user-select: none; } /* サイドバーが狭くてもメニュー文字を折り返さない（Phase7）。 DevExpress内部スタイル（CJKは単語中でも改行される）より優先させるため全要素に強制。 はみ出しはクリップ（.app-tree の overflow:hidden）。 */ .app-tree, .app-tree * { white-space: nowrap !important; word-break: keep-all !important; overflow-wrap: normal !important; } /* はみ出すノード文字は省略記号に（内部クラス名は推測。効かなくてもクリップは上記で担保） */ .app-tree .dxbl-text { overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* 階層のインデント。 DxTreeView は展開アイコンの分だけ親の文字が右にずれるため、 そのままだと子の方が左に見えてしまう。子側に余白を足して階層を揃える。 もっと下げたい/戻したい場合は .alt-lv1 の padding-left を調整する。 */ .app-tree .alt-lv0 { padding-left: 0; } .app-tree .alt-lv1 { padding-left: 40px; } /* お気に入りのショートカット（3階層目。Phase7）。 DxTreeView が階層分の余白（展開ボタン幅）を自前で付けるため、追加の余白は小さくする。 */ /* お気に入りゼロ件時のヒント（クリック不可の淡色表示。Phase7） */ /* お気に入りのアーカイブ済プロジェクト（参照用。淡色・斜体で区別。Phase7） */ .app-tree .alt-nav-archived .alt-ico { opacity: 0.45; } /* 現在ページ・現在セクションのノード（DxTreeViewNode の CssClass で付与）。 ツリーでは CssClass が li（＝子ツリーごと含む要素）に付くため、背景を li に塗ると グループやお気に入りプロジェクトの配下まで一枚色になる（ピンクテーマで顕在化）。 背景は「li 直下の行要素」だけに塗る。li 以外（アイコンバー等）は従来どおり要素全体。 */ .alt-nav-active { border-radius: var(--alt-radius-sm); font-weight: 600; color: var(--alt-text-secondary-hover); } li.alt-nav-active > div { background: var(--alt-bg-secondary); border-radius: var(--alt-radius-sm); } :not(li).alt-nav-active { background: var(--alt-bg-secondary); } /* 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-star { background-image: url('icons/star-01.svg'); } /* サイドメニューの子項目用アイコン（Phase7。少し小さく表示） */ .alt-ico-sm { width: 16px; height: 16px; background-size: 16px 16px; } .alt-ico-folder { background-image: url('icons/folder.svg'); } .alt-ico-plus { background-image: url('icons/plus-circle.svg'); } .alt-ico-eye { background-image: url('icons/eye.svg'); } .alt-ico-board { background-image: url('icons/columns-03.svg'); } .alt-ico-gantt { background-image: url('icons/gantt-bars.svg'); } .alt-ico-burndown { background-image: url('icons/trend-down.svg'); } .alt-ico-wiki { background-image: url('icons/book-open.svg'); } .alt-ico-file { background-image: url('icons/file-04.svg'); } .alt-ico-users { background-image: url('icons/users-01.svg'); } .alt-ico-edit { background-image: url('icons/pencil-01.svg'); } /* コメントの引用（2026-08-08）。閉じ引用符「99」の形。16pxでも読み取れることを確認済み。 */ .alt-ico-quote { background-image: url('icons/quote.svg'); } .alt-ico-window { background-image: url('icons/layout-top.svg'); } /* 簡易ビュー（カード/ウィンドウ風。Phase7） */ /* プライマリ（青）・デンジャー（赤）ボタン上のアイコンは白抜きに（アイコンSVGは黒ストロークのため。Phase7） */ .btn-primary .alt-ico, .btn-danger .alt-ico, .dxbl-btn-primary .alt-ico, .dxbl-btn-danger .alt-ico { filter: invert(1); } .alt-ico-data { background-image: url('icons/bar-chart-square-02.svg'); } .alt-ico-master { background-image: url('icons/rows-03.svg'); } /* Import/Export: ユーザー提供の cloud-download / cloud-upload を合成した自作アイコン（2026-08-07）。 旧: upload-01.svg（上向き矢印のみで取込み側が表せていなかった）。 */ .alt-ico-transfer { background-image: url('icons/import-export.svg'); } .alt-ico-report { background-image: url('icons/filter-lines.svg'); } /* Figmaの「管理」はOpsgenieのブランドロゴ。単体で書き出せなかったため同じアイコンセットの歯車を使用。 */ .alt-ico-admin { background-image: url('icons/settings-01.svg'); } /* 全体通知（Phase8。2026-08-11）。拡声器。既存アイコンセットに無かったため同じ線幅・角丸で自作。 */ .alt-ico-megaphone { background-image: url('icons/announcement-01.svg'); } .alt-ico-ai { background-image: url('icons/stars-02.svg'); } .alt-ico-todo { background-image: url('icons/check-circle.svg'); } /* ワークフロー（Phase10。2026-08-12）。既存セットに無かったため同じ線幅・角丸で自作したフロー図。 */ .alt-ico-flow { background-image: url('icons/dataflow-01.svg'); } /* 「自分のアイコン」の置き場（Phase7・2026-08-07 以降はアイコン1つだけを常駐させる）。 パスワード変更・2段階認証・ログアウトはアイコンのポップアップから個人設定へ入る。 2026-08-09: サイドバー最下部（.app-sidebar-footer）から、お知らせベルの上へ移動。 */ .app-sidebar-account { padding: 0 12px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 2px; } /* ---- 常駐アカウントアイコン（AccountMenu.razor） ---- */ .app-account { position: relative; width: 100%; } .app-account-btn { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid var(--alt-border-secondary); border-radius: var(--alt-radius-xl); background: none; text-align: left; cursor: pointer; } .app-account-btn:hover, .app-account.is-open .app-account-btn { background: var(--alt-bg-secondary); } .app-account-text { display: flex; flex-direction: column; min-width: 0; } .app-account-name { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--alt-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-account-role { font-size: 12px; line-height: 18px; color: var(--alt-text-tertiary); white-space: nowrap; } /* ショートカットのポップアップ。2026-08-09 にアカウントをサイドバー上部へ移したため 下方向（top 基準）に開く（以前は最下部だったので上方向だった）。 見た目はアイコンバーのフローティングメニュー(.app-flyout)と揃えている。 */ .app-account-pop { position: absolute; left: 0; top: calc(100% + 6px); z-index: 60; min-width: 220px; padding: 8px; background: var(--alt-bg-primary); border: 1px solid var(--alt-border-secondary); border-radius: var(--alt-radius-md); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); } .app-account-pop .app-flyout-item { width: 100%; box-sizing: border-box; border: none; background: none; cursor: pointer; text-align: left; } .app-account-pop-sep { height: 1px; margin: 6px 2px; background: var(--alt-border-secondary); } /* ポップアップを本文より手前に出すため、サイドバー自体を持ち上げる。 （position:sticky の .app-sidebar はスタッキングコンテキストを作るので、 中の z-index だけ上げても DevExpress の sticky ヘッダー等に負ける。 モバイルのドロワー(50)より低くしてあるので、狭い画面の挙動は変わらない） */ @media (min-width: 1025px) { .app-sidebar { z-index: 40; } } .app-body { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--alt-bg-primary); } /* ===== モジュール共通の画面部品（Sales/Pm/Workflow から使う。モジュールの CSS は互いに参照できないのでここに置く） ===== */ /* カード（見出し付きの枠） */ .alt-card { margin: 0 0 1rem; padding: 0.9rem 1.1rem; border: 1px solid var(--alt-border); border-radius: var(--alt-radius-sm); background: var(--alt-surface); } .alt-card-title { margin: 0 0 0.6rem; font-size: 1.05rem; font-weight: 700; } /* 2 列のフォームグリッド（alt-span2 で 2 列ぶち抜き。狭い画面では 1 列） */ .alt-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; } .alt-form-grid > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .alt-form-grid label { color: var(--alt-text-sub); font-size: 0.85rem; } .alt-span2 { grid-column: span 2; } @media (max-width: 720px) { .alt-form-grid { grid-template-columns: 1fr; } .alt-span2 { grid-column: span 1; } } /* 詳細画面の見出し行（タイトル＋右寄せの操作ボタン） */ .wf-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; } .wf-detail-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; } /* 画面上部のメニューバー（機能設定への入口。Layout/AppMenuBar）。本文の最上段に貼り付く帯。 */ .app-menubar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; box-sizing: border-box; background: var(--alt-bg-subtle); border-bottom: 1px solid var(--alt-border); } .app-menubar-label { display: inline-flex; align-items: center; gap: 6px; padding-right: 12px; border-right: 1px solid var(--alt-border-strong); font-size: 12px; font-weight: 700; line-height: 1; color: var(--alt-text-sub); white-space: nowrap; } /* DxMenu 自体の面は帯に溶け込ませ、項目の余白と文字はメニューバーらしく */ .app-menubar .app-menubar-menu { background: transparent; border: 0; } .app-menubar .app-menubar-menu .alt-ico { margin-right: 4px; } @media (max-width: 1024px) { /* 狭い画面では上部バー（56px）の下に貼り付く */ .app-menubar { top: 56px; overflow-x: auto; } } .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: var(--alt-text-primary); } /* サイドバーは画面外に隠したドロワーにする（本文が下に押し出されないようにする）。 */ .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-table { min-width: 860px; } } @media (prefers-reduced-motion: reduce) { .app-sidebar { transition: none; } } .app-error { border: 1px solid var(--alt-danger-border); background: var(--alt-danger-bg); border-radius: 6px; padding: 1rem 1.25rem; margin: 1rem 0; } .app-error h2 { color: var(--alt-danger-strong); 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: var(--alt-surface); 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: var(--alt-danger-strong); } /* ===== ログイン画面（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: var(--alt-danger-strong); 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: var(--alt-on-accent); font-size: 16px; line-height: 24px; font-weight: 600; box-shadow: var(--alt-shadow-xs); cursor: pointer; } .login-submit:hover { background: var(--alt-accent-hover); } .login-error { color: var(--alt-danger-strong); background: var(--alt-danger-bg); border: 1px solid var(--alt-danger-border); 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 var(--alt-border); padding: 0.5rem 0.6rem; text-align: left; vertical-align: middle; } .user-table th { color: var(--alt-text-strong); font-weight: 600; } .user-table tr.row-inactive { color: var(--alt-text-muted); background: var(--alt-bg-subtle); } .user-table .muted { color: var(--alt-text-muted); } /* フィルタパネル（適用中の条件の表示）をグリッドの一番上に出す。 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; } /* ---- サイドメニューの表示モード切替（デスクトップ） ---- サイドバー上部のハンバーガー（.app-navmode-toggle）で 「アイコンリストバー ⇄ ツリー表示」を切り替える（2026-08-07 ユーザー要望）。 実体は幅の切替え（アイコン=64px / ツリー=直前の幅）で、処理は sidebar-resize.js。 旧仕様の「サイドバーごと隠す折りたたみ」（html.app-nav-collapsed ＋左上の再表示ボタン）は アイコンリストバーが上位互換のため廃止した（関連の CSS/JS/マークアップも削除済み）。 モバイル(≤1024px)は従来どおり上部バーのハンバーガーからドロワーを開く。 */ @media (max-width: 1024px) { .app-brand .app-navmode-toggle { display: none; } } /* ---- アイコンリストバー（2026-08-07 ユーザー要望） ---- サイドバーを最小幅(200px)より狭くすると sidebar-resize.js が幅を 64px にスナップさせ、 に app-nav-icons を付ける。ここではその状態の見た目を定義する。 DxTreeView（.app-tree）を細くするのではなく、専用の .app-iconbar に差し替える （DevExpress 内部の DOM に依存せず、幅が確実に収まるため）。 幅を戻すにはつまみを右へドラッグ、またはつまみをダブルクリック（既定220px）。 */ /* 通常幅のときはアイコンバーを出さない。 */ .app-iconbar { display: none; } /* アイコンモードはデスクトップ専用。狭い画面(≦1024px)ではサイドバーが幅固定のドロワーなので、 localStorage にアイコン幅が残っていても従来のツリーを出す（折りたたみと同じ方針）。 */ @media (min-width: 1025px) { html.app-nav-icons .app-tree { display: none; } html.app-nav-icons .app-iconbar { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 4px; /* フローティングメニューが切り取られないよう overflow は付けない。 グループ化したのでアイコンは数個しかなく、スクロールは不要。 */ } } .app-iconbar-item { position: relative; /* 右上に重ねるバッジ（.todo-nav-badge）の基準 */ display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border: none; padding: 0; background: none; border-radius: var(--alt-radius-sm); text-decoration: none; color: inherit; cursor: pointer; } .app-iconbar-item:hover { background: var(--alt-bg-secondary); } /* フローティングメニューを開いているグループは押下状態に見せる。 */ .app-iconbar-item.is-open { background: var(--alt-bg-secondary); box-shadow: inset 0 0 0 1px var(--alt-border-primary); } /* アーカイブ済のお気に入りはツリー同様に淡く表示する。 */ .app-iconbar-item.is-archived .alt-ico { opacity: 0.45; } /* ---- TODOメニューの期限超過バッジ（2026-08-11 ユーザー要望) ---- ツリー側は DevExpress の BadgeText（.dxbl-badge。TreeView は --dxbl-treeview-badge-* 変数で描画。 テーマ既定は色が未定義＝透明なので、ここで赤ピルにする）、 アイコンバー側は自前の .todo-nav-badge をアイコン右上に重ねる（狭幅時のベルバッジと同じ手法）。 注意: themes.css の濃色サイドバーは dxbl-* の背景を !important で透明化するため、 そちらは :not(.dxbl-badge) でバッジを除外している。 */ .app-tree .dxbl-badge { --dxbl-treeview-badge-bg: var(--alt-danger); --dxbl-treeview-badge-color: var(--alt-on-accent); --dxbl-treeview-badge-border-radius: 10px; --dxbl-treeview-badge-font-weight: 700; --dxbl-treeview-badge-font-size: 0.72rem; } .todo-nav-badge { position: absolute; top: 2px; right: 2px; background: var(--alt-danger); color: var(--alt-on-accent); border-radius: 10px; font-size: 0.65rem; font-weight: 700; line-height: 1.5; padding: 0 5px; } /* ---- フローティングメニュー（2026-08-07 ユーザー要望） ---- アイコンバーのグループを押すと、そのアイコンの右横にメニューを出す。 位置はグループ（position:relative）基準の absolute なので JS 不要。 外側を押したときは透明の膜(.app-flyout-scrim)で閉じる。 */ /* フライアウトを本文より手前に出すための重なり順（2026-08-07 不具合修正）。 position:sticky の .app-sidebar はそれ自体がスタッキングコンテキストを作るため、 中の z-index をいくら上げても .app-body 側の位置指定要素（DevExpress グリッドの sticky ヘッダー等。DOM 順で後ろ）に負けてメニューが一覧の下に隔れていた。 → サイドバー自体を持ち上げて解決する（下の html.app-nav-icons .app-sidebar）。 膜(.app-flyout-scrim)=55 ＜ アイコンバー=58 ＜ フライアウト=60 の順。 アイコンバーを膜より上にすることで、メニューを開いたまま別のグループを直接押せる。 */ .app-iconbar { position: relative; z-index: 58; } .app-iconbar-group { position: relative; display: flex; justify-content: center; width: 100%; } .app-flyout { position: absolute; left: calc(100% + 6px); top: 0; z-index: 60; min-width: 190px; max-width: 280px; max-height: 76vh; overflow-y: auto; padding: 8px; background: var(--alt-bg-primary); border: 1px solid var(--alt-border-secondary); border-radius: var(--alt-radius-md); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); } .app-flyout-head { padding: 2px 8px 6px; font-size: 0.78rem; font-weight: 700; color: var(--alt-text-tertiary); } /* 見出しの氏名を個人設定へのリンクにした（2026-08-11）。見た目は見出しのまま、 押せることが分かるようホバーで項目と同じ強調を付ける。 */ a.app-flyout-head-link { display: block; text-decoration: none; cursor: pointer; } a.app-flyout-head-link:hover { background: var(--alt-accent-soft); color: var(--alt-text-secondary-hover); border-radius: var(--alt-radius-sm); } .app-flyout-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--alt-radius-sm); color: var(--alt-text-secondary); text-decoration: none; font-size: 0.85rem; white-space: nowrap; } .app-flyout-item:hover { background: var(--alt-bg-secondary); color: var(--alt-text-secondary-hover); } /* お気に入りの各機能（ボード・ガント等）は一段下げる。 */ .app-flyout-item.is-archived .alt-ico { opacity: 0.45; } /* プロジェクトごとの区切り。 */ /* 外側クリックを拾う透明の膜（メニューの下・本文の上）。 */ .app-flyout-scrim { position: fixed; inset: 0; z-index: 55; background: transparent; } /* アイコンモードでは文字が入らないので、ブランド名・ロゴを隠す。 ハンバーガー（表示モード切替 .app-navmode-toggle）だけ残して中央に置く。 これでアイコンモードからもワンタップでツリー表示に戻せる。 Phase7（2026-08-07）: サイドバー下部の自分のアイコンはアイコンモードでも常駐させる。 以前は「フッターごと隠す」割り切りだったため、アイコンモードからは パスワード変更・2段階認証・ログアウトに到達できなかった。 アイコン1つ＋ポップアップに集約したことで、両モードで同じ導線が使える。 */ @media (min-width: 1025px) { html.app-nav-icons .app-brand { justify-content: center; padding: 0 4px; gap: 0; margin-bottom: 12px; } html.app-nav-icons .app-brand a, html.app-nav-icons .app-brand-logo { display: none; } /* アイコンモードのアカウント: アイコンだけを中央に置き、名前とロールは隠す。 ポップアップは（幅64pxに収まらないので）右横へ出す。 */ html.app-nav-icons .app-sidebar-account { padding: 0 4px; align-items: center; } html.app-nav-icons .app-account-btn { width: 40px; height: 40px; justify-content: center; padding: 0; gap: 0; border: none; border-radius: var(--alt-radius-sm); } html.app-nav-icons .app-account-text { display: none; } html.app-nav-icons .app-account-pop { left: calc(100% + 6px); top: 0; } } /* ==== メッセージ表示の共通スタイル（2026-08-11 ユーザー決定） ==== 各処理でメッセージを表示するときは、必ず次の3種の枠を使う: ・情報・完了報告 →
（青枠） ・バリデーション・エラー →
（赤枠） ・警告（続行はできる注意）→
（黄枠） 色はテーマのトークン／color-mix で作るので、ダーク・ピンクテーマにも追従する。 */ .form-info { margin: 0.4rem 0; padding: 0.5rem 0.8rem; border: 1px solid color-mix(in srgb, var(--alt-accent) 40%, transparent); border-radius: var(--alt-radius-sm); background: var(--alt-accent-soft); color: var(--alt-accent-hover); font-size: 0.9rem; } .form-error { margin: 0.4rem 0; padding: 0.5rem 0.8rem; border: 1px solid var(--alt-danger-border); border-radius: var(--alt-radius-sm); background: var(--alt-danger-bg); color: var(--alt-danger-text); font-size: 0.9rem; } .form-warn { margin: 0.4rem 0; padding: 0.5rem 0.8rem; border: 1px solid color-mix(in srgb, #f9a825 50%, transparent); border-radius: var(--alt-radius-sm); background: color-mix(in srgb, #f9a825 14%, var(--alt-surface)); color: color-mix(in srgb, #7a5200 75%, var(--alt-text-primary)); font-size: 0.9rem; } /* ポップアップ内の中身（自前ラッパー）は画面の高さを超えたらスクロールさせる。 */ .dialog-form, .app-popup-scroll { max-height: 74vh; overflow: auto; } /* ダイアログの縦積みフォーム（ラベル＋入力を1列に並べる） */ .dialog-form > label { display: block; margin-top: 0.6rem; margin-bottom: 0.2rem; font-size: 0.85rem; color: var(--alt-text-sub); } .dialog-form > label:first-child { margin-top: 0; } /* 読み上げ専用テキスト（アイコンだけのボタンのラベル用）。 */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ===== 2段階認証（Phase7） ===== */ /* コード入力画面下部の入力方法切替リンク */ .login-2fa-links { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; font-size: 0.85rem; } .login-2fa-links a { color: var(--alt-brand); text-decoration: none; } .login-2fa-links a:hover { text-decoration: underline; } /* 副ボタン（メールコード送信など） */ /* 設定画面: QRコードと手入力用キー */ .twofa-qr { display: block; width: 180px; height: 180px; margin: 8px auto; image-rendering: pixelated; } .twofa-key { display: block; text-align: center; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.85rem; letter-spacing: 0.06em; background: var(--alt-bg-secondary); border: 1px solid var(--alt-border-secondary); border-radius: var(--alt-radius-sm); padding: 6px 8px; margin: 4px 0 10px; word-break: break-all; user-select: all; } /* リカバリーコード一覧（表示は有効化直後・再生成時の1回のみ） */ .twofa-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; list-style: none; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: var(--alt-bg-secondary); border: 1px solid var(--alt-border-secondary); border-radius: var(--alt-radius-sm); padding: 10px 14px; margin: 8px 0; } .twofa-note { font-size: 0.82rem; color: var(--alt-text-tertiary); margin: 4px 0 10px; } .twofa-status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; } .twofa-status-on { background: #dcfce7; color: var(--alt-success-text); } .twofa-status-off { background: var(--alt-danger-bg); color: #991b1b; } /* 設定画面の操作ボタン群（有効時） */ .twofa-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } /* ===== ユーザーアイコン（アバター）と個人設定（Phase7。2026-08-07 ユーザー要望） ===== */ /* アイコン本体。画像は /user-icons/{userId} が返す（未登録なら頭文字のSVG）。 縦横比の違う画像でも崩れないよう cover で切り抜く。 */ .app-avatar { display: inline-block; flex: none; object-fit: cover; background: var(--alt-bg-secondary); vertical-align: middle; } .app-avatar { border-radius: 50%; } /* UserId が分からない場合のイニシャル表示（画像リクエストを出さない版）。 */ .app-avatar-initial { display: inline-flex; align-items: center; justify-content: center; color: var(--alt-on-accent); font-weight: 600; line-height: 1; } /* 担当者名・タイムラインの投稿者名などに小さく添えるとき。 */ /* ---- 個人設定画面 /account/settings ---- */ .acct-header { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin-bottom: 16px; border: 1px solid var(--alt-border-secondary); border-radius: var(--alt-radius-xl); } .acct-header-text { display: flex; flex-direction: column; min-width: 0; flex: 1; } .acct-header-name { font-size: 1rem; font-weight: 700; color: var(--alt-text-primary); overflow: hidden; text-overflow: ellipsis; } .acct-header-meta { font-size: 0.82rem; color: var(--alt-text-tertiary); word-break: break-all; } .acct-logout-form { margin: 0; flex: none; } .acct-logout { padding: 8px 16px; border: 1px solid var(--alt-border-primary); border-radius: var(--alt-radius-md); background: var(--alt-bg-secondary); color: var(--alt-text-secondary); font-size: 0.88rem; font-weight: 600; cursor: pointer; } .acct-logout:hover { background: var(--alt-bg-page); } /* タブ（querystring で切り替えるので、実体はただのリンク） */ .acct-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--alt-border-secondary); margin-bottom: 16px; } .acct-tab { padding: 8px 14px; border: 1px solid transparent; border-bottom: none; border-radius: var(--alt-radius-sm) var(--alt-radius-sm) 0 0; color: var(--alt-text-secondary); text-decoration: none; font-size: 0.9rem; font-weight: 600; margin-bottom: -1px; } .acct-tab:hover { background: var(--alt-bg-secondary); } .acct-tab.is-active { background: var(--alt-bg-primary); border-color: var(--alt-border-secondary); color: var(--alt-brand); } .acct-panel { max-width: 720px; } .acct-section { max-width: 720px; margin-bottom: 24px; } .acct-section-title { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 700; margin: 0 0 12px; } .acct-sub-title { font-size: 0.95rem; font-weight: 700; margin: 12px 0 6px; } .acct-form { display: flex; flex-direction: column; gap: 12px; max-width: 420px; } .acct-submit { align-self: flex-start; padding: 9px 20px; border: none; border-radius: var(--alt-radius-md); background: var(--alt-brand); color: var(--alt-on-accent); font-size: 0.92rem; font-weight: 600; box-shadow: var(--alt-shadow-xs); cursor: pointer; } .acct-submit:hover { background: var(--alt-accent-hover); } .acct-submit-secondary { background: var(--alt-bg-secondary); color: var(--alt-text-secondary); border: 1px solid var(--alt-border-primary); } .acct-submit-secondary:hover { background: var(--alt-bg-page); } .acct-status { color: var(--alt-success-text); background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: var(--alt-radius-sm); padding: 6px 10px; font-size: 0.86rem; margin: 0 0 10px; } .acct-error { color: var(--alt-danger-strong); background: var(--alt-danger-bg); border: 1px solid var(--alt-danger-border); border-radius: var(--alt-radius-sm); padding: 6px 10px; font-size: 0.86rem; margin: 0 0 10px; } .acct-hint { font-size: 0.8rem; color: var(--alt-text-tertiary); margin: 4px 0 0; } .acct-readonly { margin: 0; padding: 8px 0; font-size: 0.92rem; color: var(--alt-text-secondary); word-break: break-all; } /* プロフィールタブのアイコン欄 */ .acct-avatar { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 20px; } .acct-avatar-img { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); } .acct-avatar-ops { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; } .acct-file input[type="file"] { font-size: 0.85rem; } /* メール通知タブ */ @media (max-width: 640px) { .acct-header { flex-wrap: wrap; } .acct-avatar { flex-direction: column; } } /* サイドバー常駐アカウントのアイコン（AccountMenu）。押せることが分かるよう薄い枠を付ける。 */ .app-account-avatar { box-shadow: 0 0 0 1px var(--alt-border-secondary); } /* ===== 個人設定「テーマ」タブ（2026-08-10） ===== */ .theme-pick { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 18px; } .theme-card { display: flex; flex-direction: column; gap: 6px; width: 200px; padding: 12px; border: 2px solid var(--alt-border); border-radius: var(--alt-radius-md); background: var(--alt-surface); cursor: pointer; } .theme-card:hover { border-color: var(--alt-border-strong); } /* 選択中のカード。SSR タブなので JS ではなく :has() で追随させる（クリックで即時にハイライトが移る） */ .theme-card:has(input[type="radio"]:checked) { border-color: var(--alt-accent); background: var(--alt-accent-soft); } /* キーボード操作（矢印キーで選択）でも位置がわかるように */ .theme-card:focus-within { outline: 2px solid var(--alt-accent); outline-offset: 2px; } /* ラジオ本体は隠す（カード全体がラベル） */ .theme-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .theme-card-name { font-weight: 700; color: var(--alt-text-strong); } .theme-card-desc { font-size: 0.8rem; color: var(--alt-text-sub); } /* CSSだけで描くミニプレビュー。テーマごとの色は下で直接指定する （選択前にそのテーマの見た目を示すためトークンは使わない） */ .theme-thumb { display: flex; height: 72px; border-radius: var(--alt-radius-sm); border: 1px solid var(--alt-border); overflow: hidden; } .theme-thumb-side { width: 26%; } .theme-thumb-main { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 8px; } .theme-thumb-bar { height: 8px; width: 60%; border-radius: 3px; } .theme-thumb-card { flex: 1; border-radius: 4px; } .theme-thumb-light { background: #f4f6f9; } .theme-thumb-light .theme-thumb-side { background: #ffffff; border-right: 1px solid #e3e8ef; } .theme-thumb-light .theme-thumb-bar { background: #2c6fd9; } .theme-thumb-light .theme-thumb-card { background: #ffffff; border: 1px solid #e3e8ef; } .theme-thumb-dark { background: #1e232c; } .theme-thumb-dark .theme-thumb-side { background: #1b202a; border-right: 1px solid #343d4d; } .theme-thumb-dark .theme-thumb-bar { background: #5a8fe8; } .theme-thumb-dark .theme-thumb-card { background: #232935; border: 1px solid #343d4d; } .theme-thumb-navy { background: #f4f6f9; } .theme-thumb-navy .theme-thumb-side { background: #12294d; } .theme-thumb-navy .theme-thumb-bar { background: #2c6fd9; } .theme-thumb-navy .theme-thumb-card { background: #ffffff; border: 1px solid #e3e8ef; } .theme-thumb-pink { background: #faf3f7; } .theme-thumb-pink .theme-thumb-side { background: #fdf4f8; border-right: 1px solid #f0dbe7; } .theme-thumb-pink .theme-thumb-bar { background: #d6478f; } .theme-thumb-pink .theme-thumb-card { background: #ffffff; border: 1px solid #f0dbe7; } /* サイドバーのカスタム配色（テーマタブ内。2026-08-10） */ .theme-side { margin: 4px 0 18px; padding: 12px; border: 1px solid var(--alt-border); border-radius: var(--alt-radius-md); background: var(--alt-bg-subtle); } .theme-side-check { display: inline-flex; align-items: center; gap: 8px; margin-right: 12px; font-weight: 600; color: var(--alt-text-strong); cursor: pointer; } .theme-side-color { width: 48px; height: 28px; padding: 0; border: 1px solid var(--alt-border-strong); border-radius: var(--alt-radius-sm); background: var(--alt-surface); vertical-align: middle; cursor: pointer; } /* ===== Culminans シェル追加分（chaser には無い、または既定に頼っていた小物） ===== */ /* 補足説明の小さな文字（一覧の注記など） */ .meta { color: var(--alt-text-sub); font-size: 0.85rem; } /* ダイアログ下部のボタン列（保存／キャンセル） */ .dialog-buttons { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; } /* フローティングメニュー内の件数バッジ（項目文字の右に添える） */ .app-flyout-badge { margin-left: auto; padding: 0 6px; border-radius: 999px; background: var(--alt-danger); color: var(--alt-on-accent); font-size: 0.7rem; line-height: 1.5; } /* ダッシュボードのモジュール一覧 */ .home-modules { max-width: 640px; } .home-modules code { font-size: 0.85em; } /* ===== 表示言語の切替（CultureSwitcher。ログイン画面下部・個人設定「言語」タブ） ===== */ .lang-switch { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; } .lang-switch-item { appearance: none; border: 1px solid var(--alt-border-strong); border-radius: 999px; background: var(--alt-surface); color: var(--alt-text-secondary); padding: 4px 14px; font: inherit; font-size: 0.85rem; line-height: 1.5; cursor: pointer; } .lang-switch-item:hover { background: var(--alt-bg-muted); color: var(--alt-text-primary); } .lang-switch-item.is-current { background: var(--alt-accent); border-color: var(--alt-accent); color: var(--alt-on-accent); cursor: default; } /* ログイン画面: カード下部に中央寄せで小さく */ .login-lang { justify-content: center; margin-top: 1.25rem; } /* 個人設定「言語」タブ: 少し大きめのボタン */ .lang-switch-cards .lang-switch-item { padding: 8px 22px; font-size: 0.95rem; } /* ===== 組織管理（/admin/organization）・ユーザー管理の所属欄 ===== */ .org-sample-card { border: 1px solid var(--alt-border); border-radius: var(--alt-radius-md); background: var(--alt-bg-subtle); padding: 1rem 1.25rem; margin: 0.5rem 0 1.25rem; max-width: 640px; } .org-sample-title { margin: 0 0 0.5rem; font-size: 1.05rem; } /* ユーザー編集ダイアログの所属一覧 */ .app-userorg { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .app-userorg td { border-top: 1px solid var(--alt-border); padding: 4px 8px 4px 0; vertical-align: middle; } .app-userorg td.name { width: 45%; } /* 役職などの短い選択コンボ */ .app-status-select { width: 160px; } .member-select { width: 260px; } @media (max-width: 900px) { .dialog-form .app-status-select, .dialog-form .member-select, .grid-toolbar .member-select { width: 100% !important; max-width: 100%; } .app-userorg td.name { width: auto; } .app-userorg td { display: block; border-top: none; padding: 2px 0; } .app-userorg tr { display: block; border-top: 1px solid var(--alt-border); padding: 6px 0; } } /* ===== お知らせベル（サイドバー）とお知らせ一覧（chaser から移植） ===== */ .app-bell { display: flex; align-items: center; gap: 8px; position: relative; padding: 8px 14px; margin: 0 8px 4px; border-radius: 6px; color: var(--alt-text-secondary); text-decoration: none; font-size: 0.9rem; } .app-bell:hover { background: var(--alt-bg-secondary); color: var(--alt-text-secondary-hover); } .app-bell-badge { background: var(--alt-danger); color: var(--alt-on-accent); border-radius: 10px; font-size: 0.72rem; font-weight: 700; padding: 1px 7px; margin-left: auto; } /* アイコンモードではベルはアイコンだけにし、未読バッジは右上に重ねる。 */ @media (min-width: 1025px) { html.app-nav-icons .app-bell { justify-content: center; padding: 8px 0; margin: 0 4px 6px; } html.app-nav-icons .app-bell-label { display: none; } html.app-nav-icons .app-bell-badge { position: absolute; top: 2px; right: 6px; margin-left: 0; padding: 0 5px; font-size: 0.65rem; } } .app-notif-list { list-style: none; margin: 0; padding: 0; } .app-notif-list li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; border-top: 1px solid var(--alt-border); padding: 10px 8px; cursor: pointer; } .app-notif-list li:hover { background: var(--alt-bg-page); } .app-notif-list li.unread { background: var(--alt-accent-soft); font-weight: 600; } .app-notif-list .kind { color: var(--alt-text-sub); font-size: 0.82rem; white-space: nowrap; } .app-notif-list .body { color: var(--alt-text-sub); font-size: 0.85rem; } .app-notif-list .time { margin-left: auto; color: var(--alt-text-muted); font-size: 0.82rem; white-space: nowrap; } /* ===== 一覧画面の共通部品（chaser の課題一覧から移植。Workflow・Sales 等のモジュール一覧が共用する） ===== */ /* 絞り込みツールバー（表示対象・キーワード・保存条件・フィルター類を横一列に）。右端の grid-toolbar は入れ子で余白ゼロ */ .grid-toolbar.alt-toolbar-row2 { justify-content: flex-start; align-items: center; margin-top: 0.25rem; } .grid-toolbar.alt-toolbar-row2 .toolbar-right { margin-left: auto; } .grid-toolbar.alt-toolbar-row2 .toolbar-right .grid-toolbar { margin: 0; display: flex; align-items: center; gap: 8px; } .alt-inline-label { color: var(--alt-text-sub); font-size: 0.85rem; white-space: nowrap; } .grid-toolbar .alt-status-select { width: 180px; align-self: center; } .grid-toolbar .alt-keyword-box { width: 260px; align-self: center; } /* キーワード検索の結果件数 */ .alt-keyword-note { margin: 0 0 6px; } /* 保存済み検索条件のチップリスト。名前ボタン=適用（選択中はもう一度で解除） / × ボタン=条件の削除 */ .alt-filter-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; } .alt-filter-chip { display: inline-flex; align-items: center; border: 1px solid var(--alt-border); border-radius: 999px; background: var(--alt-surface); } .alt-filter-chip:hover { border-color: var(--alt-text-muted); } .alt-filter-chip.is-active { background: var(--alt-accent-soft); border-color: var(--alt-accent); } .alt-filter-chip-name, .alt-filter-chip-x { border: none; background: none; cursor: pointer; font-size: 0.85rem; line-height: 1.4; color: var(--alt-text-strong); padding: 2px 2px 2px 10px; } .alt-filter-chip.is-active .alt-filter-chip-name { font-weight: 600; color: var(--alt-accent); } .alt-filter-chip-x { padding: 2px 8px 2px 2px; color: var(--alt-text-muted); } .alt-filter-chip-x:hover { color: var(--alt-danger); } /* 検索条件の保存ダイアログ「いま保存される内容」プレビュー */ .save-filter-preview { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--alt-border); border-radius: 6px; background: var(--alt-bg-subtle); padding: 8px 12px; font-size: 0.85rem; margin-top: 8px; } .save-filter-preview-row { display: flex; gap: 8px; } .save-filter-preview-label { min-width: 5.5em; flex-shrink: 0; color: var(--alt-text-sub); } /* キーワードのヒット箇所の抜粋（件名セルの下に小さく表示） */ .alt-hit { margin-top: 2px; color: var(--alt-text-sub); font-size: 0.8rem; line-height: 1.4; white-space: normal; word-break: break-word; } .alt-hit .alt-hit-label { color: var(--alt-text-muted); } .alt-hit mark { background: var(--alt-warning-border); color: inherit; padding: 0 1px; border-radius: 2px; } /* 行タップで何かが開くグリッドはポインタカーソルを出す */ .alt-rowclick .dxbl-grid-table > tbody > tr:hover > td { cursor: pointer; } /* 入力欄＋補助（チェックボックス・注記）を横に並べる（AI 設定などの管理画面）。先頭の入力が伸びる。 */ .alt-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; align-self: start; } .alt-inline > :first-child { flex: 1 1 240px; }