// _issues.scss — Issue list page (.isl-* prefix) // Covers: issue_list.html + fragments/issue_rows.html // ── Page wrapper ──────────────────────────────────────────────────────────── .isl-page { display: flex; flex-direction: column; gap: var(--space-4); } // ── Inline stat strip ──────────────────────────────────────────────────────── .isl-stat-strip { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: 13px; color: var(--text-secondary); flex-wrap: wrap; } .isl-stat-counts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .isl-strip-filters { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } .isl-strip-select { appearance: none; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 12px; font-family: var(--font-mono); padding: 3px 22px 3px 8px; cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 6px center; &:hover { border-color: var(--border-muted); background-color: var(--bg-overlay); } &:focus { outline: none; border-color: var(--color-accent-link); } } .isl-strip-clear { font-size: 11px; color: var(--text-muted); text-decoration: none; padding: 3px 6px; border-radius: var(--radius-sm); border: 1px solid var(--border-default); transition: color var(--transition-fast), border-color var(--transition-fast); &:hover { color: var(--text-primary); border-color: var(--border-muted); } } .isl-stat-pill { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; color: var(--text-secondary); border-radius: 20px; padding: 3px 10px; transition: background var(--transition-fast); strong { font-weight: var(--font-weight-semibold); color: var(--text-primary); font-family: var(--font-mono); } &:hover { background: var(--bg-overlay); text-decoration: none; } &--active { background: var(--bg-overlay); strong { color: var(--text-primary); } } &--agent { strong { color: #a78bfa; } } &--anchored { strong { color: #4f8ef7; } } } .isl-pip { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; &--open { background: #3fb950; box-shadow: 0 0 5px rgba(#3fb950, 0.6); } &--closed { background: #a78bfa; box-shadow: 0 0 5px rgba(#a78bfa, 0.6); } } .isl-stat-sep { color: var(--border-default); font-size: 14px; line-height: 1; user-select: none; } // ── 2-column layout ────────────────────────────────────────────────────────── .isl-layout { display: grid; grid-template-columns: 1fr 220px; gap: var(--space-4); align-items: start; @media (max-width: 900px) { grid-template-columns: 1fr; } } .isl-main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); } // ── Bulk action toolbar (JS-shown) ─────────────────────────────────────────── #bulk-toolbar { display: none; } // shown by issue-list.ts .isl-bulk-toolbar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--bg-overlay); border-bottom: 1px solid var(--border-subtle); font-size: 12px; flex-wrap: wrap; } .isl-bulk-count { color: var(--text-secondary); font-weight: var(--font-weight-semibold); } .isl-bulk-sep { width: 1px; height: 14px; background: var(--border-default); flex-shrink: 0; } .isl-bulk-select { font-size: 12px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--text-primary); padding: 3px 8px; } .isl-bulk-btn { background: var(--bg-overlay); border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 12px; padding: 3px 10px; cursor: pointer; transition: all var(--transition-fast); &:hover { border-color: var(--border-muted); color: var(--text-primary); } &.isl-bulk-btn--deselect { color: var(--text-muted); } } // ── Toolbar ────────────────────────────────────────────────────────────────── .isl-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 0; padding: 0 var(--space-4); border-bottom: 1px solid var(--border-subtle); min-height: 48px; } .isl-tabs { display: flex; align-items: center; } .isl-tab { display: inline-flex; align-items: center; gap: 6px; padding: 14px 14px; font-size: 13px; color: var(--text-muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; transition: color var(--transition-fast), border-color var(--transition-fast); &:hover { color: var(--text-secondary); text-decoration: none; } &.isl-tab--active { color: var(--text-primary); border-bottom-color: var(--color-accent); font-weight: var(--font-weight-semibold); } } .isl-tab-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .isl-tab-dot--open { background: #3fb950; } .isl-tab-dot--closed { background: #a78bfa; } .isl-tab-ct { background: var(--bg-overlay); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); font-size: 10px; font-weight: var(--font-weight-semibold); padding: 1px 6px; font-family: var(--font-mono); min-width: 18px; text-align: center; color: var(--text-muted); &.isl-tab-ct--active { color: var(--text-primary); } } .isl-filters { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; flex-wrap: wrap; padding: var(--space-2) 0; } .isl-filter-select { font-size: 12px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-secondary); padding: 4px 8px; cursor: pointer; transition: border-color var(--transition-fast); &:hover { border-color: var(--border-default); color: var(--text-primary); } &:focus { outline: none; border-color: var(--color-accent); } } .isl-clear-btn { font-size: 12px; color: var(--text-muted); text-decoration: none; padding: 4px 6px; border-radius: var(--radius-sm); transition: color var(--transition-fast); &:hover { color: var(--color-danger); text-decoration: none; } } .isl-result-count { font-size: 12px; color: var(--text-muted); white-space: nowrap; } // ── Issue rows ─────────────────────────────────────────────────────────────── .isl-list { display: flex; flex-direction: column; } .isl-row { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); text-decoration: none; transition: background var(--transition-fast); cursor: pointer; &:last-child { border-bottom: none; } &:hover { background: var(--bg-overlay); text-decoration: none; } } // Checkbox .isl-check { flex-shrink: 0; margin-top: 3px; accent-color: var(--color-accent); cursor: pointer; } // State icon .isl-row-icon { flex-shrink: 0; margin-top: 1px; } .isl-icon { display: block; } .isl-icon--open { color: #3fb950; } .isl-icon--closed { color: #a78bfa; } // Row body — three-line layout .isl-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } // Line 1: title + number .isl-row-title-line { display: flex; align-items: baseline; gap: 8px; } .isl-row-title { font-size: 14px; font-weight: var(--font-weight-semibold); color: var(--text-primary); line-height: 1.4; .isl-row:hover & { color: var(--color-accent-link); } } .isl-row-num { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); flex-shrink: 0; } // Line 2: author + labels + agent badge .isl-row-meta-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; color: var(--text-muted); } .isl-label-chip { display: inline-block; padding: 1px 7px; border-radius: var(--radius-full); font-size: 11px; font-weight: var(--font-weight-medium); border: 1px solid; white-space: nowrap; } .isl-meta-author { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary); } .isl-meta-agent-icon { color: #a78bfa; display: inline-flex; align-items: center; } .isl-mini-avatar { width: 14px; height: 14px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 7px; font-weight: var(--font-weight-bold); color: #fff; flex-shrink: 0; } // Line 3: intel signals (only rendered when issue has anchors) .isl-row-intel-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .isl-intel-chip { display: inline-flex; align-items: center; font-size: 11px; font-family: var(--font-mono); border-radius: 10px; padding: 1px 8px; border: 1px solid; white-space: nowrap; font-weight: var(--font-weight-medium); &--anchor { color: #4f8ef7; background: color-mix(in srgb, #4f8ef7 8%, transparent); border-color: color-mix(in srgb, #4f8ef7 25%, transparent); } &--blast-low { color: #4f8ef7; background: color-mix(in srgb, #4f8ef7 8%, transparent); border-color: color-mix(in srgb, #4f8ef7 25%, transparent); } &--blast-mid { color: #f97316; background: color-mix(in srgb, #f97316 8%, transparent); border-color: color-mix(in srgb, #f97316 25%, transparent); } &--blast-high { color: #ef4444; background: color-mix(in srgb, #ef4444 8%, transparent); border-color: color-mix(in srgb, #ef4444 25%, transparent); } } .isl-intel-age { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); } // Right column: comment count + assignee + chevron .isl-row-right { flex-shrink: 0; display: flex; align-items: center; gap: var(--space-2); margin-top: 2px; } .isl-comment-ct { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); white-space: nowrap; } .isl-assignee-avatar { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: var(--font-weight-bold); color: #fff; flex-shrink: 0; } .isl-row-chevron { color: var(--text-muted); opacity: 0; transition: opacity var(--transition-fast); .isl-row:hover & { opacity: 1; } } // ── Pagination ─────────────────────────────────────────────────────────────── .isl-pagination { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-subtle); } // ── Empty state ────────────────────────────────────────────────────────────── .isl-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-12) var(--space-6); text-align: center; gap: var(--space-3); color: var(--text-muted); } .isl-empty-icon { opacity: 0.3; margin-bottom: var(--space-1); } .isl-empty-title { font-size: 18px; font-weight: var(--font-weight-semibold); color: var(--text-secondary); } .isl-empty-desc { font-size: 14px; max-width: 400px; line-height: 1.6; } // ── Template picker panel ──────────────────────────────────────────────────── .isl-template-picker { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; } .isl-tp-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); } .isl-tp-title { font-size: 14px; font-weight: var(--font-weight-semibold); color: var(--text-primary); } .isl-tp-close { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: var(--radius-sm); display: flex; align-items: center; transition: color var(--transition-fast); &:hover { color: var(--text-primary); } } .isl-tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-3); padding: var(--space-4) var(--space-5); } .isl-tp-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--bg-overlay); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4); cursor: pointer; text-align: left; transition: border-color var(--transition-fast), background var(--transition-fast); &:hover { border-color: var(--color-accent); background: var(--bg-surface); } } .isl-tp-icon { font-size: 20px; margin-bottom: 4px; line-height: 1; } .isl-tp-card-title { font-size: 13px; font-weight: var(--font-weight-semibold); color: var(--text-primary); } .isl-tp-card-desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; } // ── Right sidebar ───────────────────────────────────────────────────────────── .isl-sidebar { display: flex; flex-direction: column; gap: var(--space-1); @media (max-width: 900px) { display: none; } } .isl-sb-section { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); } .isl-sb-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-1); } .isl-sb-title { font-size: 11px; font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); } .isl-sb-link { font-size: 11px; color: var(--color-accent); text-decoration: none; &:hover { text-decoration: underline; } } .isl-sb-empty { font-size: 12px; color: var(--text-muted); margin: 0; } // Labels .isl-sb-labels { display: flex; flex-direction: column; gap: 4px; } .isl-sb-label { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-primary); text-decoration: none; padding: 3px 6px; border-radius: var(--radius-sm); transition: background var(--transition-fast); &:hover { background: var(--bg-overlay); text-decoration: none; } &.isl-sb-label--active { background: var(--bg-overlay); font-weight: var(--font-weight-semibold); } } .isl-sb-label-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.1); } // Assignees / contributors .isl-sb-people { display: flex; flex-direction: column; gap: 4px; } .isl-person { display: flex; align-items: center; gap: 8px; text-decoration: none; padding: 3px 6px; border-radius: var(--radius-sm); transition: background var(--transition-fast); &:hover { background: var(--bg-overlay); text-decoration: none; } &.isl-person--active { background: var(--bg-overlay); } } .isl-person-avatar { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: var(--font-weight-bold); color: #fff; flex-shrink: 0; } .isl-person-name { font-size: 12px; color: var(--text-primary); } // ── Issue detail page (.isd-*) ──────────────────────────────────────────────── // Hero-first design matching proposal_detail.html visual language. .isd-page { min-height: 100vh; } // ── Hero ───────────────────────────────────────────────────────────────────── .isd-hero { position: relative; background: linear-gradient(135deg, #0d1117 0%, #0f1923 60%, #0d1117 100%); border-bottom: 1px solid var(--border-default); overflow: hidden; } .isd-hero-glow { position: absolute; inset: 0; pointer-events: none; &--open { background: radial-gradient(ellipse 55% 70% at 75% 40%, rgba(63,185,80,0.09) 0%, transparent 65%), radial-gradient(ellipse 35% 50% at 15% 70%, rgba(79,142,247,0.05) 0%, transparent 60%); } &--closed { background: radial-gradient(ellipse 55% 70% at 70% 40%, rgba(167,139,250,0.08) 0%, transparent 65%), radial-gradient(ellipse 35% 50% at 15% 70%, rgba(139,148,158,0.04) 0%, transparent 60%); } } .isd-hero-inner { position: relative; max-width: 1200px; margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-5); } // ── Eyebrow ─────────────────────────────────────────────────────────────────── .isd-eyebrow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); } .isd-eyebrow-left { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .isd-eyebrow-right { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; } .isd-eyebrow-filed-label { color: var(--text-muted); font-size: 11px; } .isd-eyebrow-sep { color: var(--border-default); } .isd-eyebrow-time { font-size: 11px; color: var(--text-muted); } .isd-state-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; letter-spacing: 0.03em; white-space: nowrap; svg { flex-shrink: 0; } &--open { background: rgba(63,185,80,0.12); color: #3fb950; border: 1px solid rgba(63,185,80,0.3); } &--closed { background: rgba(167,139,250,0.12); color: #a78bfa; border: 1px solid rgba(167,139,250,0.3); } } .isd-issue-num { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); } .isd-type-pill { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 2px 8px; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; color: var(--text-secondary); svg { flex-shrink: 0; opacity: 0.9; } } // ── Title + meta ────────────────────────────────────────────────────────────── .isd-title { font-size: 24px; font-weight: 700; color: var(--text-primary); line-height: 1.3; margin: 0 0 var(--space-3); letter-spacing: -0.01em; @media (max-width: 640px) { font-size: 20px; } } .isd-actor-link { color: var(--color-accent-link, #4f8ef7); text-decoration: none; font-size: 12px; font-weight: 500; &:hover { text-decoration: underline; } } // ── Identity badge — human | agent | org ───────────────────────────────────── .isd-identity-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 10px; font-size: 10px; font-weight: 500; letter-spacing: 0.03em; // agent — blue (autonomous process) &--agent { background: rgba(88,166,255,0.10); border: 1px solid rgba(88,166,255,0.28); color: #58a6ff; } // human — muted slate (person) &--human { background: rgba(139,148,158,0.10); border: 1px solid rgba(139,148,158,0.28); color: #8b949e; } // org — amber (organisation) &--org { background: rgba(227,179,65,0.10); border: 1px solid rgba(227,179,65,0.28); color: #e3b341; } } // ── Avatar ──────────────────────────────────────────────────────────────────── .isd-avatar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-overlay); border: 1px solid var(--border-subtle); font-size: 10px; font-weight: 700; color: var(--text-secondary); flex-shrink: 0; &--lg { width: 32px; height: 32px; font-size: 13px; } } // ── Stats strip ─────────────────────────────────────────────────────────────── .isd-stats { position: relative; max-width: 1200px; margin: 0 auto; display: flex; gap: 0; border-top: 1px solid var(--border-subtle); padding: 0 var(--space-6); } .isd-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-3) var(--space-4); border-right: 1px solid var(--border-subtle); min-width: 80px; &:last-child { border-right: none; } } .isd-stat-val { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--text-primary); line-height: 1.2; &--accent { color: var(--color-accent-link, #4f8ef7); } } .isd-stat-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; } // ── Body wrap + layout ──────────────────────────────────────────────────────── .isd-wrap { max-width: 1200px; margin: 0 auto; padding: var(--space-5) var(--space-6) var(--space-10); } .isd-layout { display: grid; grid-template-columns: 1fr 280px; gap: var(--space-6); align-items: start; @media (max-width: 900px) { grid-template-columns: 1fr; } } .isd-main { min-width: 0; } // ── Panel (shared: anchors, intel, commits, timeline) ───────────────────────── .isd-panel { background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--space-4); transition: border-color 0.15s, background 0.15s; &:hover { border-color: var(--border-default); background: rgba(255,255,255,0.015); } } .isd-panel-hd { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); } .isd-panel-icon { font-size: 13px; color: var(--color-accent-link, #4f8ef7); } .isd-panel-title { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 0; flex: 1; } .isd-panel-count { font-size: 10px; font-family: var(--font-mono); background: var(--bg-hover); border-radius: 8px; padding: 0 6px; color: var(--text-muted); } .isd-panel-bd { padding: var(--space-2) var(--space-4); } // ── Symbol anchors ──────────────────────────────────────────────────────────── .isd-panel-bd--flush { padding: 0; } .isd-anchor { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border-subtle); text-decoration: none; transition: background 0.12s; &:last-child { border-bottom: none; } &:hover { background: rgba(255,255,255,0.03); } &:hover .isd-anchor-arrow { color: var(--color-accent-link, #4f8ef7); } } .isd-anchor-addr { display: flex; align-items: center; gap: 0; flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 12px; overflow: hidden; } .isd-anchor-file { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1; } .isd-anchor-sep { color: var(--border-default); flex-shrink: 0; padding: 0 1px; } .isd-anchor-sym { color: var(--color-accent-link, #4f8ef7); font-weight: 600; white-space: nowrap; flex-shrink: 0; } .isd-anchor-stats { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } .isd-anchor-stat { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); background: var(--bg-overlay); border: 1px solid var(--border-subtle); border-radius: 4px; padding: 1px 5px; } .isd-anchor-author { font-size: 11px; color: var(--text-muted); } .isd-anchor-arrow { font-size: 12px; color: var(--border-default); flex-shrink: 0; transition: color 0.12s; } // ── Issue body card ─────────────────────────────────────────────────────────── .isd-body-card { background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--space-4); transition: border-color 0.15s, background 0.15s; &:hover { border-color: var(--border-default); background: rgba(255,255,255,0.015); } } .isd-body-hd { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); } .isd-body-author { font-size: 13px; font-weight: 600; color: var(--text-primary); flex: 1; } .isd-body-date { font-size: 12px; color: var(--text-muted); } .isd-body-bd { padding: var(--space-4); } .isd-body-content { font-size: 14px; line-height: 1.7; color: var(--text-primary); h1,h2,h3,h4 { color: var(--text-primary); margin: var(--space-4) 0 var(--space-2); } p { margin: 0 0 var(--space-3); } code { font-family: var(--font-mono); font-size: 12px; background: var(--bg-overlay); border: 1px solid var(--border-subtle); border-radius: 4px; padding: 1px 5px; } pre { background: var(--bg-overlay); border: 1px solid var(--border-subtle); border-radius: 6px; padding: var(--space-3) var(--space-4); overflow-x: auto; code { background: none; border: none; padding: 0; } } ul, ol { padding-left: var(--space-5); margin: 0 0 var(--space-3); } blockquote { border-left: 3px solid var(--border-default); margin: 0 0 var(--space-3); padding-left: var(--space-3); color: var(--text-muted); } } .isd-body-empty { color: var(--text-muted); font-size: 13px; font-style: italic; } // ── Commit anchors panel ────────────────────────────────────────────────────── .isd-panel--commits { border-color: color-mix(in srgb, var(--text-muted) 25%, var(--border-default)); } .isd-commit-anchor { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); &:last-child { border-bottom: none; } } .isd-commit-hash { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--color-accent-link, #4f8ef7); background: rgba(79,142,247,0.08); border: 1px solid rgba(79,142,247,0.18); border-radius: 4px; padding: 1px 6px; flex-shrink: 0; letter-spacing: 0.04em; &--sm { font-size: 10px; padding: 1px 5px; } } .isd-commit-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } // ── Agent provenance block ──────────────────────────────────────────────────── .isd-provenance { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: rgba(167,139,250,0.05); border-bottom: 1px solid rgba(167,139,250,0.15); font-size: 11px; } .isd-provenance-icon { flex-shrink: 0; font-size: 13px; line-height: 1; } .isd-provenance-detail { display: flex; align-items: center; gap: var(--space-1); } .isd-provenance-label { color: var(--text-muted); } .isd-provenance-handle { font-family: var(--font-mono); font-size: 11px; color: var(--agent-accent, #a78bfa); font-weight: 600; } // ── Stat dim variant ────────────────────────────────────────────────────────── .isd-stat-val--dim { color: var(--border-default); font-weight: 400; font-size: 14px; } // ── Activity timeline ───────────────────────────────────────────────────────── .isd-timeline { background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--space-4); transition: border-color 0.15s, background 0.15s; &:hover { border-color: var(--border-default); background: rgba(255,255,255,0.015); } } .isd-timeline-hd { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); } .isd-timeline-icon { font-size: 13px; color: var(--text-muted); } .isd-timeline-title { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; flex: 1; } .isd-timeline-bd { padding: var(--space-2) 0; } // ── Timeline events ─────────────────────────────────────────────────────────── .isd-event { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) var(--space-4); position: relative; // Vertical connector line between events &::before { content: ''; position: absolute; left: calc(var(--space-4) + 6px); top: 26px; bottom: -8px; width: 1px; background: var(--border-subtle); pointer-events: none; } &:last-child::before { display: none; } &--comment { align-items: flex-start; } &--reply { padding-left: calc(var(--space-4) + var(--space-6)); } } .isd-event-icon { flex-shrink: 0; width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; font-size: 10px; margin-top: 2px; position: relative; z-index: 1; &--open { color: #3fb950; } &--closed { color: var(--text-muted); } &--comment { color: var(--text-muted); } &--anchor { color: var(--color-accent-link, #4f8ef7); } &--proposal { color: #f0883e; } } .isd-event-body { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 1px 0; font-size: 12px; color: var(--text-muted); line-height: 1.5; &--comment { flex-direction: column; align-items: flex-start; gap: 0; background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm, 4px); overflow: hidden; margin-top: -1px; } } .isd-event-actor { font-size: 12px; color: var(--text-secondary); font-weight: 500; } .isd-event-verb { font-size: 12px; color: var(--text-muted); } .isd-event-time { font-size: 11px; color: var(--text-muted); opacity: 0.7; white-space: nowrap; } .isd-event-author-link { color: var(--text-secondary); text-decoration: none; font-weight: 500; &:hover { color: var(--text-primary); text-decoration: underline; } } .isd-event-comment-hd { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: transparent; border-bottom: 1px solid var(--border-subtle); width: 100%; font-size: 12px; } .isd-event-comment-bd { padding: var(--space-3); font-size: 13px; line-height: 1.65; color: var(--text-primary); width: 100%; p { margin: 0 0 var(--space-2); &:last-child { margin-bottom: 0; } } code { font-family: var(--font-mono); font-size: 11px; background: rgba(255,255,255,0.05); border: 1px solid var(--border-subtle); border-radius: 3px; padding: 1px 4px; } pre { background: var(--bg-overlay); border: 1px solid var(--border-subtle); border-radius: 6px; padding: var(--space-2) var(--space-3); overflow-x: auto; code { background: none; border: none; padding: 0; } } } .isd-event-replies { width: 100%; border-top: 1px solid var(--border-subtle); padding: var(--space-1) var(--space-2); display: flex; flex-direction: column; gap: var(--space-1); .isd-event { padding: var(--space-1) var(--space-1); } .isd-event::before { display: none; } } .isd-avatar--sm { width: 20px; height: 20px; font-size: 8px; } // ── Timeline empty state ────────────────────────────────────────────────────── .isd-event-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-8) var(--space-4); gap: var(--space-2); } .isd-event-empty-icon { font-size: 1.5rem; color: var(--text-muted); opacity: 0.4; } .isd-event-empty-text { font-size: 12px; color: var(--text-muted); } // ── Sidebar bd flush variant (rows go edge-to-edge) ────────────────────────── .isd-sb-bd--flush { padding: 0; } // ── Sidebar commit row ──────────────────────────────────────────────────────── // Two-line layout: line1 = hash + "message", line2 = date author .isd-sb-commit-row { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); text-decoration: none; transition: background 0.12s; &:last-child { border-bottom: none; } &:hover { background: var(--bg-overlay); text-decoration: none; } } .isd-sb-commit-line1 { display: flex; align-items: baseline; gap: var(--space-2); overflow: hidden; } .isd-sb-commit-line2 { display: flex; gap: var(--space-3); font-size: 10px; color: var(--text-muted); } .isd-sb-commit-hash { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--color-accent-link, #4f8ef7); flex-shrink: 0; } .isd-sb-commit-msg { font-size: 12px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .isd-sb-commit-author { font-weight: 500; } .isd-sb-commit-ts { font-family: var(--font-mono); } // ── Sidebar proposal row ────────────────────────────────────────────────────── // Single-line: ○/● #N title .isd-sb-proposal-row { display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); text-decoration: none; transition: background 0.12s; min-width: 0; &:last-child { border-bottom: none; } &:hover { background: var(--bg-overlay); text-decoration: none; } } .isd-lp-state { font-size: 12px; flex-shrink: 0; &.isd-lp-state--open { color: #3fb950; } &.isd-lp-state--merged { color: #a371f7; } &.isd-lp-state--closed { color: var(--text-muted); } } .isd-lp-ref { font-family: var(--font-mono); font-size: 11px; color: var(--color-accent-link, #4f8ef7); flex-shrink: 0; } .isd-lp-title { font-size: 12px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } // Signal badge shown in the Linked Proposals card header .isd-lp-signal-badge { margin-left: auto; font-size: 9px; font-family: var(--font-mono); font-weight: 600; text-transform: none; letter-spacing: 0.02em; color: #a371f7; background: rgba(163, 113, 247, 0.12); border: 1px solid rgba(163, 113, 247, 0.25); border-radius: var(--radius-sm); padding: 1px 5px; white-space: nowrap; } // Per-row indicator showing which signal matched this proposal .isd-lp-sym-dot { margin-left: auto; font-size: 8px; color: #a371f7; // purple — symbol overlap opacity: 0.7; flex-shrink: 0; &--inflight { color: #3fb950; // green — branch reachability (in-flight work) } } .isd-sb-empty-row { padding: var(--space-3); font-size: 12px; color: var(--text-muted); font-style: italic; } // ── Assignee with identity badge ────────────────────────────────────────────── // ── Sidebar ─────────────────────────────────────────────────────────────────── .isd-sidebar { display: flex; flex-direction: column; gap: var(--space-3); } .isd-sb-card { background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); overflow: hidden; transition: border-color 0.15s, background 0.15s; &:hover { border-color: var(--border-default); background: rgba(255,255,255,0.015); } } .isd-sb-hd { display: flex; align-items: center; font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); } .isd-sb-bd { padding: var(--space-3); font-size: 13px; } // ── CLI / MCP / REST snippet card ───────────────────────────────────────────── .isd-cli-label { font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); margin-bottom: var(--space-1); } // Wrapper gives us a positioning context for the copy button. .isd-snippet-wrap { position: relative; margin-bottom: var(--space-2); &:last-child { margin-bottom: 0; } } .isd-cli-snippet { display: block; font-family: var(--font-mono); font-size: 11px; line-height: 1.65; color: var(--text-secondary); background: var(--bg-overlay); border: 1px solid var(--border-subtle); border-radius: 6px; padding: var(--space-2) var(--space-3); padding-right: 2.4rem; // room for the copy button white-space: pre; overflow-x: auto; word-break: normal; margin: 0; // Highlight.js token overrides — match our design-system palette. .hljs-comment { color: var(--text-tertiary); font-style: italic; } .hljs-keyword, .hljs-built_in { color: #79b8ff; } .hljs-string { color: #9ecbff; } .hljs-number { color: #f8c555; } .hljs-literal { color: #79b8ff; } .hljs-variable, .hljs-attr { color: var(--text-secondary); } .hljs-meta, .hljs-meta-keyword { color: #e3b341; } .hljs-title { color: #b392f0; } .hljs-params { color: var(--text-secondary); } .hljs-punctuation { color: var(--text-tertiary); } background: var(--bg-overlay); // keep our bg (hljs themes set their own) } // Copy button — floats top-right of each snippet. .isd-copy-btn { position: absolute; top: 6px; right: 6px; display: flex; align-items: center; gap: 3px; font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 4px; padding: 2px 6px; cursor: pointer; transition: color 0.12s, background 0.12s, border-color 0.12s; line-height: 1.5; user-select: none; svg { flex-shrink: 0; } &:hover { color: var(--text-secondary); border-color: var(--border-default); background: var(--bg-overlay); } &.is-copied { color: #3fb950; border-color: #3fb95044; } } // ── Act panel tab strip ─────────────────────────────────────────────────────── .isd-sb-hd--tabs { display: flex; align-items: center; gap: 0; padding: 0 var(--space-1); } .isd-act-tab { flex: 1; font-size: 10px; font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); background: none; border: none; border-bottom: 2px solid transparent; padding: var(--space-2) var(--space-3); cursor: pointer; transition: color 0.12s, border-color 0.12s; &:hover { color: var(--text-secondary); } &.is-active { color: var(--color-accent-link, #4f8ef7); border-bottom-color: var(--color-accent-link, #4f8ef7); } } // ── Sidebar misc ────────────────────────────────────────────────────────────── .isd-muted { color: var(--text-muted); font-size: 12px; } .isd-assignee { display: flex; align-items: center; gap: var(--space-2); } // ── Release card (Muse-native VCS-derived release tracking) ────────────────── // Release card header status chip .isd-rel-status-chip { display: inline-flex; align-items: center; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 5px; border-radius: var(--radius-full); margin-left: var(--space-2); vertical-align: middle; &--landed { background: rgba(63,185,80,0.15); color: #3fb950; } &--partial { background: rgba(88,166,255,0.15); color: #58a6ff; } &--pending { background: rgba(255,255,255,0.06); color: var(--text-muted); } } // Release body container .isd-release-bd { display: flex; flex-direction: column; gap: 6px; } // Per-commit block .isd-rel-commit { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: var(--radius-sm); border: 1px solid transparent; transition: border-color 0.15s; &--landed { background: rgba(63,185,80,0.04); border-color: rgba(63,185,80,0.12); } &--pending { background: rgba(255,255,255,0.025); border-color: rgba(255,255,255,0.06); } } .isd-rel-commit-top { display: flex; align-items: center; gap: var(--space-2); } .isd-rel-hash { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: #58a6ff; text-decoration: none; background: rgba(88,166,255,0.1); padding: 1px 5px; border-radius: 3px; flex-shrink: 0; letter-spacing: 0.02em; &:hover { color: #79b8ff; background: rgba(88,166,255,0.18); } } .isd-rel-landed-in { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .isd-rel-ver { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-decoration: none; padding: 1px 5px; border-radius: 3px; &--landed { color: #3fb950; background: rgba(63,185,80,0.12); &:hover { background: rgba(63,185,80,0.2); } } } .isd-rel-on-branch { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); background: rgba(255,255,255,0.05); padding: 1px 5px; border-radius: 3px; } .isd-rel-msg { font-size: 11px; color: var(--text-secondary); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 2px; } .isd-rel-meta { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-muted); padding-left: 2px; } .isd-rel-sep { color: var(--border-default); } // "next release: v0.3.1 (proposed)" row .isd-rel-next { display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: rgba(255,255,255,0.02); border: 1px dashed rgba(255,255,255,0.08); border-radius: var(--radius-sm); margin-top: 2px; } .isd-rel-next-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } .isd-rel-next-tag { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text-secondary); } .isd-rel-next-hint { font-size: 10px; color: var(--text-muted); font-style: italic; } .isd-release-none { font-size: 12px; color: var(--text-muted); font-style: italic; } // ─── Anchor + blast + agent row badges ─────────────────────────────────────── .isl-anchor-badge { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; font-family: var(--font-mono); color: #4f8ef7; background: color-mix(in srgb, #4f8ef7 10%, transparent); border: 1px solid color-mix(in srgb, #4f8ef7 25%, transparent); border-radius: 10px; padding: 0 6px; height: 18px; line-height: 1; vertical-align: middle; white-space: nowrap; } .isl-blast-badge { display: inline-flex; align-items: center; font-size: 10px; font-family: var(--font-mono); border-radius: 10px; padding: 0 6px; height: 18px; line-height: 1; vertical-align: middle; white-space: nowrap; font-weight: var(--font-weight-semibold); &.blast-badge--low { color: #4f8ef7; background: color-mix(in srgb, #4f8ef7 10%, transparent); border: 1px solid color-mix(in srgb, #4f8ef7 25%, transparent); } &.blast-badge--mid { color: #f97316; background: color-mix(in srgb, #f97316 10%, transparent); border: 1px solid color-mix(in srgb, #f97316 25%, transparent); } &.blast-badge--high { color: #ef4444; background: color-mix(in srgb, #ef4444 10%, transparent); border: 1px solid color-mix(in srgb, #ef4444 25%, transparent); } } .isl-agent-badge { display: inline-flex; align-items: center; font-size: 10px; font-family: var(--font-mono); color: #a78bfa; background: color-mix(in srgb, #a78bfa 10%, transparent); border: 1px solid color-mix(in srgb, #a78bfa 25%, transparent); border-radius: 10px; padding: 0 6px; height: 18px; line-height: 1; vertical-align: middle; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.04em; } .isl-mini-agent-icon { display: inline-flex; align-items: center; color: #a78bfa; margin-right: 2px; } // ─── Sidebar intel sections ─────────────────────────────────────────────────── .isl-sb-subtitle { font-size: 10px; color: var(--text-muted); margin-left: auto; } .isl-sb-section--intel { border-top: 1px solid var(--border-subtle); padding-top: var(--space-2); margin-top: 2px; } .isl-sb-intel-icon { font-size: 11px; margin-right: 3px; &--hot { color: #4f8ef7; } &--blast { color: #f97316; } &--agent { color: #a78bfa; } } .isl-sb-intel-desc { font-size: 11px; color: var(--text-muted); margin: 0 0 var(--space-1); font-style: italic; } .isl-sb-intel-list { display: flex; flex-direction: column; gap: 2px; } .isl-sb-intel-row { display: flex; align-items: flex-start; gap: 6px; padding: 5px 4px; border-radius: var(--radius-sm); text-decoration: none; transition: background var(--transition-fast); &:hover { background: var(--bg-overlay); text-decoration: none; } } .isl-sb-intel-num { font-size: 10px; font-family: var(--font-mono); color: var(--text-muted); flex-shrink: 0; min-width: 28px; padding-top: 1px; } .isl-sb-intel-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .isl-sb-intel-title { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; } .isl-sb-intel-sub { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .isl-sb-intel-badge { font-size: 10px; font-family: var(--font-mono); border-radius: 8px; padding: 0 5px; height: 16px; line-height: 16px; flex-shrink: 0; align-self: center; font-weight: var(--font-weight-semibold); &--hot { color: #4f8ef7; background: color-mix(in srgb, #4f8ef7 12%, transparent); border: 1px solid color-mix(in srgb, #4f8ef7 25%, transparent); } &--blast { color: #f97316; background: color-mix(in srgb, #f97316 12%, transparent); border: 1px solid color-mix(in srgb, #f97316 25%, transparent); } } .isl-sb-agent-list { display: flex; flex-direction: column; gap: 4px; } .isl-sb-agent-row { display: flex; align-items: center; gap: var(--space-2); padding: 3px 2px; } .isl-sb-agent-pip { width: 6px; height: 6px; border-radius: 50%; background: #a78bfa; flex-shrink: 0; box-shadow: 0 0 4px rgba(#a78bfa, 0.5); } .isl-sb-agent-name { font-size: 12px; color: var(--text-secondary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); } .isl-sb-agent-count { font-size: 11px; color: var(--text-muted); flex-shrink: 0; } // ─── CLI sidebar card ───────────────────────────────────────────────────────── .isl-sb-section--cli { border-top: 1px solid var(--border-subtle); margin-top: 2px; padding-top: var(--space-2); } .isl-cli-block { display: flex; flex-direction: column; gap: 1px; background: var(--bg-overlay); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); margin-top: var(--space-1); } .isl-cli-line { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); line-height: 1.6; white-space: pre; user-select: all; } // ─── Phase 2B: Intelligence panel on issue detail — Singularity Mode ───────── $intel-low: #4f8ef7; $intel-mid: #f97316; $intel-high: #ef4444; .isd-panel--intel { .isd-panel-bd { padding: 0; } } // ── Section container ───────────────────────────────────────────────────────── .isd-ic-section { display: flex; flex-direction: column; gap: 7px; padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); &:last-child { border-bottom: none; } &--blast { background: rgba(255,255,255,0.01); } &--churn { background: rgba(255,255,255,0.005); } &--issues { background: rgba($intel-low, 0.03); } } .isd-ic-section-label { display: flex; align-items: center; justify-content: space-between; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); } // ── Blast radius hero ───────────────────────────────────────────────────────── .isd-ic-blast-hero { display: flex; flex-direction: column; gap: 6px; } .isd-ic-blast-nums { display: flex; align-items: baseline; gap: 5px; } .isd-ic-blast-num { font-size: 22px; font-family: var(--font-mono); font-weight: 800; line-height: 1; &--direct { color: $intel-low; } &--cross { color: $intel-mid; } } .isd-ic-blast-sep { font-size: 10px; color: var(--text-muted); font-weight: 500; letter-spacing: 0.02em; } .isd-ic-blast-dot { font-size: 14px; color: var(--border-default, #30363d); margin: 0 1px; } // ── Gravity bar (inside blast section) ──────────────────────────────────────── .isd-ic-grav-wrap { display: flex; align-items: center; gap: 7px; } .isd-ic-grav-track { flex: 1; height: 10px; background: var(--border-subtle); border-radius: 3px; overflow: hidden; } .isd-ic-grav-fill { height: 100%; border-radius: 2px; min-width: 3px; transition: width 0.5s ease; &--low { background: linear-gradient(to right, rgba($intel-low, 0.4), $intel-low); } &--mid { background: linear-gradient(to right, rgba($intel-mid, 0.5), $intel-mid); } &--high { background: linear-gradient(to right, $intel-mid, $intel-high); } } .isd-ic-grav-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; white-space: nowrap; &--low { color: $intel-low; } &--mid { color: $intel-mid; } &--high { color: $intel-high; } } // ── Co-symbol chips (file names) ────────────────────────────────────────────── .isd-ic-co-syms { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; } .isd-ic-co-label { font-size: 10px; color: var(--text-muted); white-space: nowrap; margin-right: 2px; } .isd-ic-co-sym { font-size: 10px; font-family: var(--font-mono); color: var(--text-secondary); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 4px; padding: 2px 6px; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; cursor: default; &--more { color: var(--text-muted); border-style: dashed; } &:hover { background: var(--bg-overlay); border-color: var(--border-muted); color: var(--text-primary); } } // ── Churn section — dense single line + full-width sparkline ────────────────── .isd-ic-churn-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; font-size: 12px; color: var(--text-secondary); line-height: 1.5; } .isd-ic-churn-n { font-family: var(--font-mono); font-size: 16px; font-weight: 800; color: var(--text-primary); line-height: 1; } .isd-ic-churn-txt { font-size: 11px; color: var(--text-secondary); } .isd-ic-churn-dot { font-size: 13px; color: var(--border-default, #30363d); margin: 0 1px; } .isd-ic-churn-ts { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); } .isd-ic-churn-author { font-size: 11px; font-weight: 700; color: var(--text-secondary); } // ── Sparkline — fixed-width bars, one per week ─────────────────────────────── .isd-ic-sparkline { display: flex; align-items: flex-end; gap: 2px; height: 36px; } .isd-ic-spark-bar { display: block; width: 8px; flex: none; border-radius: 2px 2px 0 0; background: $intel-low; opacity: 0.85; transition: opacity 0.15s; &:hover { opacity: 1; } } .isd-ic-spark-gap { display: block; width: 8px; flex: none; // empty slot — keeps weekly alignment without a bar } // ── Open issues ─────────────────────────────────────────────────────────────── .isd-ic-issue-count { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-secondary); letter-spacing: 0; text-transform: none; } .isd-ic-issue-list { display: flex; flex-wrap: wrap; gap: 4px; } .isd-ic-issue-badge { font-size: 11px; font-family: var(--font-mono); font-weight: 600; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--border-subtle); background: var(--bg-surface); color: $intel-low; text-decoration: none; transition: background 0.1s, border-color 0.1s; &:hover { background: rgba($intel-low, 0.1); border-color: $intel-low; text-decoration: none; } &--current { background: rgba($intel-low, 0.14); border-color: $intel-low; cursor: default; pointer-events: none; } } .isd-ic-empty-hint { font-size: 11px; color: var(--text-muted); font-style: italic; } // ─── Phase 4C: New Issue page ──────────────────────────────────────────────── .isn-page { max-width: 960px; margin: 0 auto; padding: var(--space-4) var(--space-3); } .isn-layout { display: grid; grid-template-columns: 1fr 240px; gap: var(--space-4); align-items: start; @media (max-width: 720px) { grid-template-columns: 1fr; } } .isn-main { min-width: 0; } .isn-card { padding: 0; overflow: hidden; } .isn-card-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); } .isn-card-title { font-size: 15px; font-weight: var(--font-weight-semibold); color: var(--text-primary); } .isn-back-link { font-size: 12px; color: var(--text-muted); text-decoration: none; &:hover { color: var(--text-primary); } } .isn-card-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-5); } .isn-intro { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 0; } .isn-section { display: flex; flex-direction: column; gap: var(--space-3); } .isn-section-header { display: flex; align-items: center; gap: var(--space-2); } .isn-section-icon { font-size: 13px; color: var(--text-muted); font-family: var(--font-mono); } .isn-section-title { font-size: 13px; font-weight: var(--font-weight-semibold); color: var(--text-primary); } .isn-cli-block { display: flex; flex-direction: column; gap: var(--space-3); background: var(--bg-overlay); border: 1px solid var(--border-subtle); border-radius: 8px; padding: var(--space-3); } .isn-cli-step { display: flex; gap: var(--space-3); align-items: flex-start; } .isn-cli-num { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--color-accent-link, #4f8ef7); color: #fff; font-size: 10px; font-weight: var(--font-weight-semibold); flex-shrink: 0; margin-top: 2px; } .isn-cli-step-body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; } .isn-cli-label { font-size: 12px; color: var(--text-secondary); } .isn-cli-cmd { display: block; font-size: 11px; font-family: var(--font-mono); color: var(--text-primary); background: var(--bg-base, #0d1117); border: 1px solid var(--border-subtle); border-radius: 5px; padding: var(--space-2) var(--space-3); overflow-x: auto; white-space: pre-wrap; word-break: break-all; line-height: 1.6; } .isn-mcp-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 0; code { font-family: var(--font-mono); font-size: 11px; background: var(--bg-overlay); padding: 1px 5px; border-radius: 3px; border: 1px solid var(--border-subtle); } } .isn-mcp-link { font-size: 13px; color: var(--color-accent-link, #4f8ef7); text-decoration: none; &:hover { text-decoration: underline; } } .isn-anatomy { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: 8px; overflow: hidden; } .isn-anatomy-row { display: flex; gap: var(--space-3); padding: var(--space-2) var(--space-3); font-size: 12px; border-bottom: 1px solid var(--border-subtle); &:last-child { border-bottom: none; } } .isn-anatomy-key { font-family: var(--font-mono); font-size: 11px; color: var(--color-accent-link, #4f8ef7); min-width: 64px; flex-shrink: 0; padding-top: 1px; } .isn-anatomy-val { color: var(--text-secondary); line-height: 1.5; code { font-family: var(--font-mono); font-size: 11px; background: var(--bg-overlay); padding: 1px 5px; border-radius: 3px; border: 1px solid var(--border-subtle); } } // ── New issue sidebar ── .isn-sidebar { display: flex; flex-direction: column; gap: var(--space-3); } .isn-sb-section { background: var(--bg-card, #161b22); border: 1px solid var(--border-default); border-radius: 8px; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); } .isn-sb-header { font-size: 12px; font-weight: var(--font-weight-semibold); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; } .isn-sb-links { display: flex; flex-direction: column; gap: 4px; } .isn-sb-link { font-size: 13px; color: var(--color-accent-link, #4f8ef7); text-decoration: none; padding: 3px 0; &:hover { text-decoration: underline; } } .isn-sb-body { font-size: 12px; color: var(--text-muted); line-height: 1.6; margin: 0; }