// ───────────────────────────────────────────────────────────────────────────── // Component: Issues (list · detail · new) // File: src/scss/components/_issues.scss // // Visual rules for .isl-* (list), .isd-* (detail), .isn-* (new issue). // Structural layout lives in pages/_issues.scss. // ───────────────────────────────────────────────────────────────────────────── // ── Stat strip ──────────────────────────────────────────────────────────────── .isl-stat-strip { font-size: 13px; color: var(--text-secondary); } .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-default); 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-default); } } .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(--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: var(--color-purple); } } &--anchored { strong { color: var(--color-accent); } } } .isl-pip { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; &--open { background: var(--color-success); box-shadow: 0 0 5px rgba(63,185,80, 0.6); } &--closed { background: var(--color-purple); box-shadow: 0 0 5px rgba(167,139,250, 0.6); } } .isl-stat-sep { color: var(--border-default); font-size: 14px; line-height: 1; user-select: none; } // ── Bulk action toolbar ─────────────────────────────────────────────────────── #bulk-toolbar { display: none; } .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(--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-default); 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-tab { display: inline-flex; align-items: center; gap: 6px; padding: 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(--weight-semibold); } } .isl-tab-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; &--open { background: var(--color-success); } &--closed { background: var(--color-purple); } } .isl-tab-ct { background: var(--bg-overlay); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); font-size: 10px; font-weight: var(--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-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 list rows ─────────────────────────────────────────────────────────── .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; } } .isl-check { flex-shrink: 0; margin-top: 3px; accent-color: var(--color-accent); cursor: pointer; } .isl-row-icon { flex-shrink: 0; margin-top: 1px; } .isl-icon { display: block; } .isl-icon--open { color: var(--color-success); } .isl-icon--closed { color: var(--color-purple); } .isl-row-title { font-size: 14px; font-weight: var(--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; } .isl-row-meta-line { 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(--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: var(--color-purple); font-size: 10px; } .isl-meta-sep { color: var(--border-default); } .isl-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border-default); display: inline-block; vertical-align: middle; } .isl-meta-label { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 10px; font-size: 10px; border: 1px solid; white-space: nowrap; } .isl-meta-agent { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; font-family: var(--font-mono); color: var(--color-purple); background: color-mix(in srgb, var(--color-purple) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-purple) 25%, transparent); border-radius: 10px; padding: 0 5px; height: 16px; } .isl-row-ct { font-size: 11px; color: var(--text-muted); white-space: nowrap; } .isl-row-updated { font-size: 11px; color: var(--text-muted); white-space: nowrap; font-family: var(--font-mono); } // ── Empty state ──────────────────────────────────────────────────────────────── .isl-empty-icon { font-size: 32px; color: var(--text-muted); opacity: 0.4; } .isl-empty-title { font-size: 16px; font-weight: var(--weight-semibold); color: var(--text-primary); margin: 0; } .isl-empty-sub { font-size: 13px; color: var(--text-muted); margin: 0; } // ── Pagination ───────────────────────────────────────────────────────────────── .isl-page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 var(--space-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-size: 13px; text-decoration: none; transition: background var(--transition-fast), border-color var(--transition-fast); cursor: pointer; &:hover { background: var(--bg-overlay); border-color: var(--border-default); text-decoration: none; } &--active { background: var(--color-accent); color: #fff; border-color: var(--color-accent); cursor: default; } &--disabled { opacity: 0.35; pointer-events: none; } } // ── Template picker ──────────────────────────────────────────────────────────── .isl-tpl-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); text-decoration: none; transition: border-color var(--transition-fast), background var(--transition-fast); cursor: pointer; &:hover { border-color: var(--color-accent); background: rgba(255,255,255,0.02); text-decoration: none; } } .isl-tpl-icon { font-size: 18px; } .isl-tpl-name { font-size: 13px; font-weight: var(--weight-semibold); color: var(--text-primary); } .isl-tpl-desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; } // ── Right sidebar ───────────────────────────────────────────────────────────── .isl-sb-section { border-bottom: 1px solid var(--border-subtle); padding: var(--space-3) var(--space-3); &:last-child { border-bottom: none; } } .isl-sb-hd { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); } .isl-sb-icon { font-size: 12px; color: var(--text-muted); } .isl-sb-title { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .isl-sb-subtitle { font-size: 10px; color: var(--text-muted); margin-left: auto; } .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(--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); } .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(--weight-bold); color: #fff; flex-shrink: 0; } .isl-person-name { font-size: 12px; color: var(--text-primary); } // ── Intel sidebar sections ──────────────────────────────────────────────────── .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: var(--color-accent); } &--blast { color: var(--color-orange); } &--agent { color: var(--color-purple); } } .isl-sb-intel-desc { font-size: 11px; color: var(--text-muted); margin: 0 0 var(--space-1); font-style: italic; } .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-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(--weight-semibold); &--hot { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent); } &--blast { color: var(--color-orange); background: color-mix(in srgb, var(--color-orange) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-orange) 25%, transparent); } } .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: var(--color-purple); flex-shrink: 0; box-shadow: 0 0 4px rgba(167,139,250, 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; } // ── List page CLI sidebar ───────────────────────────────────────────────────── .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); overflow-x: auto; min-width: 0; } .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; } // ── Row anchor / blast / agent badges ───────────────────────────────────────── .isl-anchor-badge { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; font-family: var(--font-mono); color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-accent) 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(--weight-semibold); &.blast-badge--low { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent); } &.blast-badge--mid { color: var(--color-orange); background: color-mix(in srgb, var(--color-orange) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-orange) 25%, transparent); } &.blast-badge--high { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-danger) 25%, transparent); } } .isl-agent-badge { display: inline-flex; align-items: center; font-size: 10px; font-family: var(--font-mono); color: var(--color-purple); background: color-mix(in srgb, var(--color-purple) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-purple) 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: var(--color-purple); margin-right: 2px; } // ═══════════════════════════════════════════════════════════════════════════════ // Issue detail page (.isd-*) // ═══════════════════════════════════════════════════════════════════════════════ // ── Hero ────────────────────────────────────────────────────────────────────── .isd-hero { position: relative; background: linear-gradient(135deg, var(--bg-base) 0%, var(--bg-hero-mid) 60%, var(--bg-base) 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%, color-mix(in srgb, var(--color-success) 9%, transparent) 0%, transparent 65%), radial-gradient(ellipse 35% 50% at 15% 70%, color-mix(in srgb, var(--color-accent) 5%, transparent) 0%, transparent 60%); } &--closed { background: radial-gradient(ellipse 55% 70% at 70% 40%, color-mix(in srgb, var(--color-purple) 8%, transparent) 0%, transparent 65%), radial-gradient(ellipse 35% 50% at 15% 70%, color-mix(in srgb, var(--text-secondary) 4%, transparent) 0%, transparent 60%); } } // ── Eyebrow ─────────────────────────────────────────────────────────────────── .isd-eyebrow-right { font-size: 12px; color: var(--text-muted); white-space: nowrap; } .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-eyebrow-sigil { border-radius: 50%; flex-shrink: 0; vertical-align: middle; } .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: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent); } &--closed { background: color-mix(in srgb, var(--color-purple) 12%, transparent); color: var(--color-purple); border: 1px solid color-mix(in srgb, var(--color-purple) 30%, transparent); } } .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); text-decoration: none; font-size: 12px; font-weight: 500; &:hover { text-decoration: underline; } } .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 { background: color-mix(in srgb, var(--color-accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-accent) 28%, transparent); color: var(--color-accent); } &--human { background: color-mix(in srgb, var(--text-secondary) 10%, transparent); border: 1px solid color-mix(in srgb, var(--text-secondary) 28%, transparent); color: var(--text-secondary); } &--org { background: color-mix(in srgb, var(--color-warning) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-warning) 28%, transparent); color: var(--color-warning); } } .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); } } .isd-stat-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; } // ── Panel ───────────────────────────────────────────────────────────────────── .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 { border-bottom: 1px solid var(--border-subtle); } .isd-panel-icon { font-size: 13px; color: var(--color-accent-link); } .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); } .isd-panel-bd--flush { padding: 0; } // ── Symbol anchors ──────────────────────────────────────────────────────────── .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); } } .isd-anchor-file { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1; font-family: var(--font-mono); font-size: 12px; } .isd-anchor-sep { color: var(--border-default); flex-shrink: 0; padding: 0 1px; font-family: var(--font-mono); font-size: 12px; } .isd-anchor-sym { color: var(--color-accent-link); font-weight: 600; white-space: nowrap; flex-shrink: 0; font-family: var(--font-mono); font-size: 12px; } .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-comment-sigil { border-radius: 50%; flex-shrink: 0; } .isd-assignee { display: flex; align-items: center; gap: 10px; } .isd-assignee-info { display: flex; align-items: center; gap: 6px; } .isd-assignee-sigil { border-radius: 50%; flex-shrink: 0; } .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); } a { color: var(--color-accent-link); } table { border-collapse: collapse; width: 100%; margin: 0 0 var(--space-3); } th, td { border: 1px solid var(--border-subtle); padding: var(--space-2) var(--space-3); font-size: 13px; } th { background: var(--bg-overlay); font-weight: 600; } } // ── Commit anchor rows ──────────────────────────────────────────────────────── .isd-commit-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); } } .isd-commit-hash { font-family: var(--font-mono); font-size: 11px; color: var(--color-accent-link); flex-shrink: 0; } .isd-commit-msg { font-size: 12px; color: var(--text-secondary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .isd-commit-author { font-size: 11px; color: var(--text-muted); flex-shrink: 0; } // ── Agent provenance ────────────────────────────────────────────────────────── .isd-prov { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: color-mix(in srgb, var(--color-purple) 5%, transparent); border-top: 1px solid color-mix(in srgb, var(--color-purple) 15%, transparent); } .isd-prov-icon { color: var(--color-purple); font-size: 12px; flex-shrink: 0; } .isd-prov-label { font-size: 11px; color: var(--text-muted); } .isd-prov-agent { font-size: 11px; font-family: var(--font-mono); color: var(--color-purple); } .isd-prov-model { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); background: var(--bg-overlay); border: 1px solid var(--border-subtle); border-radius: 4px; padding: 1px 5px; } // ── Activity timeline ───────────────────────────────────────────────────────── .isd-timeline { display: flex; flex-direction: column; gap: 0; } .isd-event { display: flex; gap: var(--space-3); position: relative; padding: var(--space-3) 0; &:not(:last-child)::before { content: ''; position: absolute; left: 11px; top: 38px; bottom: 0; width: 1px; background: var(--border-subtle); } } .isd-event-dot { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; margin-top: 2px; position: relative; z-index: 1; &--open { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); border: 1px solid color-mix(in srgb, var(--color-success) 35%, transparent); } &--close { background: color-mix(in srgb, var(--color-purple) 15%, transparent); color: var(--color-purple); border: 1px solid color-mix(in srgb, var(--color-purple) 35%, transparent); } &--comment { background: var(--bg-overlay); color: var(--text-muted); border: 1px solid var(--border-subtle); } &--commit { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent); border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent); } &--label { background: var(--bg-overlay); color: var(--text-muted); border: 1px solid var(--border-subtle); } &--agent { background: color-mix(in srgb, var(--color-purple) 12%, transparent); color: var(--color-purple); border: 1px solid color-mix(in srgb, var(--color-purple) 30%, transparent); } } .isd-event-body { flex: 1; min-width: 0; } .isd-event-hd { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; } .isd-event-actor { font-size: 13px; font-weight: 600; color: var(--text-primary); } .isd-event-action { font-size: 12px; color: var(--text-muted); } .isd-event-time { font-size: 11px; color: var(--text-muted); margin-left: auto; flex-shrink: 0; font-family: var(--font-mono); } .isd-event-card { background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); overflow: hidden; transition: border-color 0.15s; &:hover { border-color: var(--border-default); } } .isd-event-card-hd { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); background: var(--bg-overlay); } .isd-event-card-body { padding: var(--space-3) var(--space-4); } .isd-event-comment-content { font-size: 13px; line-height: 1.6; color: var(--text-primary); p { margin: 0 0 var(--space-2); &:last-child { margin-bottom: 0; } } code { font-family: var(--font-mono); font-size: 11px; background: var(--bg-overlay); border: 1px solid var(--border-subtle); border-radius: 3px; padding: 0 4px; } } .isd-reply { display: flex; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-top: 1px solid var(--border-subtle); background: rgba(255,255,255,0.01); } .isd-reply-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--bg-overlay); border: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--text-muted); flex-shrink: 0; } .isd-reply-body { flex: 1; min-width: 0; } .isd-reply-hd { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 3px; } .isd-reply-actor { font-size: 12px; font-weight: 600; color: var(--text-primary); } .isd-reply-time { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); } .isd-reply-content { font-size: 12px; line-height: 1.5; color: var(--text-secondary); } .isd-event-empty { font-size: 13px; color: var(--text-muted); font-style: italic; } .isd-comment-form { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--bg-overlay); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); margin-top: var(--space-3); } .isd-comment-textarea { width: 100%; min-height: 80px; background: var(--bg-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 13px; font-family: inherit; padding: var(--space-3); resize: vertical; transition: border-color var(--transition-fast); box-sizing: border-box; &:focus { outline: none; border-color: var(--color-accent); } &::placeholder { color: var(--text-muted); } } // ── Detail sidebar ──────────────────────────────────────────────────────────── .isd-sb-card { background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--space-3); transition: border-color 0.15s; &:hover { border-color: var(--border-default); } } .isd-sb-hd { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); background: var(--bg-overlay); } .isd-sb-title { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; flex: 1; } .isd-sb-bd { padding: var(--space-2) var(--space-3); } .isd-sb-assignee { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; color: var(--text-secondary); } .isd-sb-label { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 10px; font-size: 11px; border: 1px solid; white-space: nowrap; margin: 2px; } .isd-sb-label-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .isd-sb-commit { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); &:last-child { border-bottom: none; } } .isd-sb-commit-hash { font-family: var(--font-mono); font-size: 10px; color: var(--color-accent-link); flex-shrink: 0; } .isd-sb-commit-msg { font-size: 11px; color: var(--text-secondary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .isd-sb-proposal { display: flex; align-items: center; gap: var(--space-2); padding: 4px 0; font-size: 12px; color: var(--text-secondary); text-decoration: none; border-bottom: 1px solid var(--border-subtle); &:last-child { border-bottom: none; } &:hover { color: var(--color-accent-link); text-decoration: none; } } .isd-sb-prop-num { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); flex-shrink: 0; } .isd-signal-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-family: var(--font-mono); font-weight: 600; border-radius: 10px; padding: 0 6px; height: 18px; vertical-align: middle; &--hot { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent); } &--cold { color: var(--text-muted); background: var(--bg-overlay); border: 1px solid var(--border-subtle); } &--rising { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-warning) 25%, transparent); } } // ── CLI snippet (detail sidebar) ────────────────────────────────────────────── .isd-cli-card { background: var(--bg-overlay); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--space-3); } .isd-cli-hd { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); } .isd-cli-label { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; } .isd-cli-copy { font-size: 10px; color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 2px 4px; border-radius: 3px; transition: color var(--transition-fast), background var(--transition-fast); &:hover { color: var(--text-primary); background: var(--bg-surface); } &.copied { color: var(--color-success); } } .isd-cli-bd { padding: var(--space-2) var(--space-3); overflow-x: auto; } // hljs token overrides inside CLI card .isd-cli-bd { .hljs { background: transparent; } .hljs-keyword { color: var(--color-accent); } .hljs-string { color: var(--color-success); } .hljs-comment { color: var(--text-muted); font-style: italic; } .hljs-built_in { color: var(--color-warning); } .hljs-number { color: var(--color-orange); } } .isd-cli-line { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); line-height: 1.6; white-space: pre; } // ── Act panel tabs ──────────────────────────────────────────────────────────── .isd-act-tabs { display: flex; border-bottom: 1px solid var(--border-subtle); background: var(--bg-overlay); } .isd-act-tab { display: inline-flex; align-items: center; gap: 5px; padding: 10px var(--space-4); font-size: 12px; color: var(--text-muted); text-decoration: none; border-bottom: 2px solid transparent; transition: color var(--transition-fast), border-color var(--transition-fast); cursor: pointer; background: none; border-top: none; border-left: none; border-right: none; &:hover { color: var(--text-secondary); text-decoration: none; } &.isd-act-tab--active { color: var(--text-primary); border-bottom-color: var(--color-accent); font-weight: var(--weight-semibold); } } .isd-act-tab-ct { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); font-size: 10px; padding: 0 5px; color: var(--text-muted); font-family: var(--font-mono); } // ── Release tracking card ───────────────────────────────────────────────────── .isd-release-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; &:hover { border-color: var(--border-default); } } .isd-release-hd { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); background: var(--bg-overlay); } .isd-release-title { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; flex: 1; } .isd-release-status { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; border-radius: 10px; padding: 0 7px; height: 18px; &--unreleased { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-warning) 25%, transparent); } &--released { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-success) 25%, transparent); } &--pending { color: var(--text-muted); background: var(--bg-overlay); border: 1px solid var(--border-subtle); } } .isd-rel-commit { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); &:last-child { border-bottom: none; } } .isd-rel-commit-hash { font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--color-accent-link); flex-shrink: 0; } .isd-rel-commit-msg { font-size: 11px; color: var(--text-secondary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 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); } .isd-rel-version { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--color-success); flex-shrink: 0; } .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; } .isd-rel-tag { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--color-success); background: color-mix(in srgb, var(--color-success) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-success) 25%, transparent); border-radius: 4px; padding: 1px 6px; } .isd-rel-landed-in { font-size: 10px; color: var(--text-muted); } // ═══════════════════════════════════════════════════════════════════════════════ // Intelligence panel (.isd-ic-*) — Singularity Mode // ═══════════════════════════════════════════════════════════════════════════════ $intel-low: var(--color-accent); $intel-mid: var(--color-orange); $intel-high: var(--color-danger); .isd-panel--intel { .isd-panel-bd { padding: 0; } } .isd-ic-section { 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(var(--color-accent-raw, 56,139,253), 0.03); } } .isd-ic-section-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); } // Blast radius hero .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); margin: 0 1px; } // Gravity bar .isd-ic-grav-track { background: var(--border-subtle); border-radius: 3px; } .isd-ic-grav-fill { height: 100%; border-radius: 2px; min-width: 3px; transition: width 0.5s ease; &--low { background: linear-gradient(to right, rgba(#{var(--color-accent)}, 0.4), $intel-low); } &--mid { background: linear-gradient(to right, rgba(#{var(--color-orange)}, 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 .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-default); color: var(--text-primary); } } // Churn section .isd-ic-churn-line { 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); 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 .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; } // Open issues .isd-ic-issue-count { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-secondary); } .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(#{var(--color-accent)}, 0.1); border-color: $intel-low; text-decoration: none; } &--current { background: rgba(#{var(--color-accent)}, 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; } // ═══════════════════════════════════════════════════════════════════════════════ // New issue page (.isn-*) // ═══════════════════════════════════════════════════════════════════════════════ .isn-card { padding: 0; overflow: hidden; background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); } .isn-card-header { border-bottom: 1px solid var(--border-subtle); background: var(--bg-overlay); } .isn-card-title { font-size: 15px; font-weight: var(--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-intro { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 0; } .isn-section-icon { font-size: 13px; color: var(--text-muted); font-family: var(--font-mono); } .isn-section-title { font-size: 13px; font-weight: var(--weight-semibold); color: var(--text-primary); } .isn-cli-block { background: var(--bg-overlay); border: 1px solid var(--border-subtle); border-radius: 8px; padding: var(--space-3); } .isn-cli-num { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--color-accent-link); color: #fff; font-size: 10px; font-weight: var(--weight-semibold); flex-shrink: 0; margin-top: 2px; } .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); 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); text-decoration: none; &:hover { text-decoration: underline; } } .isn-anatomy { border: 1px solid var(--border-subtle); border-radius: 8px; overflow: hidden; } .isn-anatomy-row { 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); 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); } } .isn-sb-section { background: var(--bg-card, var(--bg-surface)); border: 1px solid var(--border-default); border-radius: 8px; padding: var(--space-3); } .isn-sb-header { font-size: 12px; font-weight: var(--weight-semibold); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; } .isn-sb-link { font-size: 13px; color: var(--color-accent-link); 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; }