/* command-center-serving/public/app.css CC UI/UXデザイン標準 v1.0 適用＋Fidelity Tokens v1.6（質感採寸・参照実測）適用。 全色 = tokens.css の var() 消費のみ（生hex禁止・grep検査対象）。 4テーマ = ×（切替は shell.js）。 CSP style-src 'self' 準拠: inline style 不使用（動的幅は data-w → CSSOM・shell/app.js）。 */ * { box-sizing: border-box; } html { background: var(--bg); } body { margin: 0; font-family: var(--font-sans); background: var(--bg); color: var(--text-1); line-height: 1.65; /* FT-14 書体エンジン: 全数値=等幅数字 */ font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .num, .when, .kpi { font-variant-numeric: tabular-nums; } /* FT-14 マイクロラベル様式（欧文大文字+0.08em・和文は +0.03em） */ .mlabel { font-size: 11px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.08em; } .mlabel.ja { text-transform: none; letter-spacing: 0.03em; } /* FT-19 focus / hover / 押下 / disabled */ :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } button, .btn, .tab, .side-nav a, .icon-btn, .list li, .ht-row, .alert-row, .leaderboard li, .board-row, .cmdk-item, .avatar-chip, .period-pill, .chev-btn, .state, .topsearch, details.fold summary, .tabbar a, .sheet a { transition: color var(--tr), background-color var(--tr), border-color var(--tr), box-shadow var(--tr), transform var(--tr), opacity var(--tr); } button:active:not(:disabled), .btn:active, .icon-btn:active, .tab:active { transform: scale(0.98); } button:disabled { opacity: 0.4; cursor: default; } /* FT-22 スクロールバー（既定太スクロールバーの露出禁止） */ * { scrollbar-width: thin; scrollbar-color: var(--line) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; } *::-webkit-scrollbar-track { background: transparent; } /* ── topbar（FT-8 再構成: 左=ページ文脈／S面=検索窓／右=円形36ボタン群+アバターチップ） ── */ .topbar { display: flex; align-items: center; gap: var(--space-3); background: var(--surface); border-bottom: 1px solid var(--line); padding: 10px var(--space-5); min-height: 60px; } .page-ctx { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.3; } .ctx-page { font-weight: 700; font-size: var(--fs-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ctx-app { font-size: var(--fs-1); color: var(--text-2); white-space: nowrap; } .top-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); flex: none; } /* FT-2 ヘッダ円形アイコンボタン 36（SVG18のみ・light=ヘアライン枠／dark=枠なし1段明地） */ .icon-btn { width: var(--iconbtn-sz); height: var(--iconbtn-sz); border-radius: 999px; display: inline-grid; place-items: center; position: relative; flex: none; cursor: pointer; color: var(--text-2); padding: 0; font: inherit; border: 1px solid var(--line); background: var(--surface); } :root[data-theme="dark"] .icon-btn { border-color: transparent; background: var(--surface-raised); } .icon-btn:hover { color: var(--text-1); background: var(--hover-bg); } .icon-btn .ico-svg { width: 18px; height: 18px; vertical-align: middle; } /* FT-8/FT-22 通知=赤ドット6〜8px */ .icon-btn .dot-badge { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 999px; background: var(--err); border: 1px solid var(--surface); } .icon-btn .dot-badge[hidden] { display: none; } /* FT-8 アバターチップ（丸28頭文字＋名前＋役割小） */ .avatar-chip { display: flex; align-items: center; gap: 8px; padding: 3px 12px 3px 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); flex: none; } :root[data-theme="dark"] .avatar-chip { border-color: transparent; background: var(--surface-raised); } .avatar { width: var(--chip-sz); height: var(--chip-sz); border-radius: 999px; flex: none; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: var(--fs-1); font-weight: 700; } .who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .who-name { font-size: var(--fs-2); font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .who-role { font-size: 11px; color: var(--text-2); } /* FT-22 アバター重ね（様式定義: 28円・地色2px縁・重なり-8px・末尾+nチップ） */ .avatar-stack { display: inline-flex; align-items: center; } .avatar-stack .avatar { border: 2px solid var(--surface); } .avatar-stack .avatar + .avatar, .avatar-stack .avatar + .avatar-more { margin-left: -8px; } .avatar-more { width: var(--chip-sz); height: var(--chip-sz); border-radius: 999px; border: 2px solid var(--surface); background: var(--bg-muted); color: var(--text-2); display: grid; place-items: center; font-size: var(--fs-1); font-weight: 700; } /* FT-21 検索窓（S面ヘッダ・高40・虫眼鏡16・右端 ⌘K キーキャップ） */ .topsearch { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--text-2); flex: 0 1 320px; min-width: 0; cursor: text; } .topsearch .ico-svg { width: 16px; height: 16px; flex: none; } .topsearch input { border: none; background: transparent; flex: 1; min-width: 0; color: var(--text-1); font: inherit; font-size: var(--fs-3); padding: 0; } .topsearch input::placeholder { color: var(--text-2); } .topsearch input:focus { outline: none; } .kbd-hint { display: flex; gap: 3px; margin-left: auto; flex: none; } kbd.kcap { border: 1px solid var(--line); border-radius: 6px; font-size: 11px; font-weight: 500; padding: 2px 6px; color: var(--text-2); background: var(--surface); font-family: var(--font-sans); line-height: 1.2; } /* 鮮度バナー（§3-3-4 偽装しない） */ .stale-banner { background: var(--warn-soft); color: var(--warn); border-bottom: 1px solid color-mix(in srgb, var(--warn) 35%, var(--surface)); padding: 6px var(--space-4); font-size: .85rem; } .main { max-width: 960px; margin: 0 auto; padding: var(--space-5) var(--space-4) 60px; } .headline { display: flex; align-items: baseline; gap: var(--space-3); } /* FT-4 ページ見出し h1 = 27/700・letter-spacing -0.02em */ .headline h1 { font-size: var(--fs-6); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; line-height: 1.2; } .freshness { color: var(--text-2); font-size: .78rem; margin-left: auto; } /* 10秒原則（§1-2）: 最上部の結論 */ .conclusion { margin: 10px 0 18px; } .badge { display: inline-block; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 1rem; background: var(--ok-soft); color: var(--ok); } .badge.warn { background: var(--warn-soft); color: var(--warn); } .badge.alert { background: var(--err-soft); color: var(--err); } .badge.neutral { background: var(--bg-muted); color: var(--text-2); } .conclusion .line { margin: 6px 0 0; color: var(--text-2); } /* KPI カード（§3: ラベル→特大数値→文脈1行）— FT-3 padding20/gap16・FT-4 34/40 */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); margin: var(--space-3) 0; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--raised-shadow); } .card .num { font-size: var(--kpi-size-2); font-weight: 700; line-height: 1.3; } .card .label { color: var(--text-2); font-size: .85rem; } .card .note { color: var(--text-2); font-size: .78rem; margin-top: 4px; } .section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; margin: var(--space-4) 0; box-shadow: var(--raised-shadow); } /* FT-9 カードヘッダ標準: タイトル15/600・下margin16 */ .section h2 { font-size: 15px; font-weight: 600; margin: 0 0 var(--space-4); } .sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-4); } .sec-head h2 { margin: 0; flex: 1 1 auto; min-width: 0; } .sec-head .head-right { margin-left: auto; display: flex; gap: 8px; align-items: center; flex: none; } /* FT-9 期間ピル: 高28・font12/500・padding横10・radius999・ヘアライン枠 */ .period-pill { display: inline-flex; align-items: center; gap: 6px; height: var(--pill-h); padding: 0 10px; font-size: 12px; font-weight: 500; font-family: var(--font-sans); color: var(--text-2); border: 1px solid var(--line); border-radius: 999px; background: transparent; cursor: default; } .period-pill .caret { font-size: 10px; } /* FT-9 シェブロン円ボタン28（1カード1個・折畳みトグル） */ .chev-btn { width: 28px; height: 28px; min-height: 0; border-radius: 999px; display: inline-grid; place-items: center; border: 1px solid var(--line); background: transparent; color: var(--text-2); cursor: pointer; padding: 0; } :root[data-theme="dark"] .chev-btn { border-color: transparent; background: var(--surface-raised); } .chev-btn:hover { color: var(--text-1); background: var(--hover-bg); } .chev-btn .ico-svg { width: 14px; height: 14px; transition: transform var(--tr); } .section.collapsed .chev-btn .ico-svg { transform: rotate(-90deg); } .section.collapsed > :not(.sec-head) { display: none; } .list { margin: 0; padding: 0; list-style: none; } .list li { padding: 10px 4px; border-top: 1px solid var(--line); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .list li:first-child { border-top: none; } .list .when { color: var(--text-2); font-size: .8rem; margin-left: auto; } .sub { font-size: .78rem; color: var(--text-2); } /* FT-19 行 hover = 1段明 */ .list li:hover, .ht-row:hover, .alert-row:hover, .leaderboard li:hover, .board-row:hover, .chip-timeline li:hover { background: var(--hover-bg); } /* FT-10 行アイコンチップ: 丸28=種別色10〜15%地+同色SVG18（点・裸アイコン禁止） */ .row-chip { width: var(--chip-sz); height: var(--chip-sz); border-radius: 999px; flex: none; display: inline-grid; place-items: center; background: var(--accent-soft); color: var(--accent); } .row-chip .ico-svg { width: 18px; height: 18px; } .row-chip.tone-ok { background: var(--ok-soft); color: var(--ok); } .row-chip.tone-warn { background: var(--warn-soft); color: var(--warn); } .row-chip.tone-err, .row-chip.tone-halt { background: var(--err-soft); color: var(--err); } .row-chip.tone-info { background: var(--info-soft); color: var(--info); } .row-chip.tone-accent2 { background: color-mix(in srgb, var(--accent-2) 14%, var(--surface)); color: var(--accent-2); } /* FT-16 状態ピル: 高22〜24・radius999・種別色地+同色文字12/600・先頭ドット6px */ .state { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; font-size: 12px; font-weight: 600; border-radius: 999px; background: var(--bg-muted); color: var(--text-2); white-space: nowrap; } .state::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: none; } .state.registered, .state.approved, .state.published, .state.confirmed { background: var(--ok-soft); color: var(--ok); } .state.in_review, .state.pending, .state.held, .state.draft, .state.pending_approval { background: var(--warn-soft); color: var(--warn); } .state.rejected, .state.returned { background: var(--err-soft); color: var(--err); } .state.halt { background: var(--halt-soft); color: var(--halt); } .state.preparing { background: var(--info-soft); color: var(--info); } /* UXF-C FT-50: 外部手続き未了の正直表示 */ /* FT-26 状態トーン（statePill が付与・無彩色ピルでの状態表示を禁止） */ .state.tone-ok { background: var(--ok-soft); color: var(--ok); } .state.tone-warn { background: var(--warn-soft); color: var(--warn); } .state.tone-err { background: var(--err-soft); color: var(--err); } .state.tone-accent { background: var(--accent-soft); color: var(--accent); } .state.tone-info { background: var(--info-soft); color: var(--info); } /* 充足メーター（FT-20⑥ 参照1型: 高6・残余=斜線ハッチ。幅は data-w → CSSOM） */ .meter { background: repeating-linear-gradient(45deg, var(--bg-muted), var(--bg-muted) 4px, transparent 4px, transparent 8px); border: 1px solid var(--line); border-radius: 999px; height: 6px; overflow: hidden; margin: var(--space-2) 0; } .meter > div { height: 100%; width: 0; background: var(--accent); border-radius: 999px; } .tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; } .tab { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text-1); cursor: pointer; font-size: .85rem; text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; } .tab:hover { background: var(--hover-bg); } .tab.active { background: var(--accent); color: var(--surface); border-color: var(--accent); } .thumb { width: 88px; height: 88px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); } /* FT-2 主要アクション: 高36・padding横16・r10・font13/600 */ button, .btn { font-family: var(--font-sans); font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: var(--radius-btn); border: 1px solid var(--accent); background: var(--accent); color: var(--surface); cursor: pointer; min-height: 36px; } button.secondary, .btn.secondary { background: var(--surface); color: var(--accent); } button.secondary:hover, .btn.secondary:hover { background: var(--hover-bg); } /* FT-23 主要ボタン hover = accent を1段暗く（--accent-hover）。 class 無しの素の