src/scss/_commit-detail.scss · gabriel/musehub

1

// _commit-detail.scss — Commit detail pages (.cd-*, .cd2-*, .cd3-*, .graph-* prefixes)

2

3

/* =========================================================================

4

Commit page (liner notes / detailed view)

5

========================================================================= */

6

.commit-liner-notes { max-width: 860px; margin: 0 auto; }

7

.commit-prose-summary { color: var(--text-secondary); line-height: 1.6; margin: 0 0 var(--space-3) 0; padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); }

8

.muse-tags-meta-row { margin-bottom: var(--space-3); }

9

.muse-pills-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

10

.muse-pill {

11

display: inline-flex;

align-items: center;

gap: 2px;

padding: 3px 10px;

border-radius: var(--radius-full);

16

font-size: var(--font-size-xs);

17

font-weight: var(--font-weight-medium);

18

text-decoration: none;

19

white-space: nowrap;

20

border: 1px solid transparent;

21

transition: filter 0.1s;

22

}

23

.muse-pill:hover { filter: brightness(1.15); }

24

.pill-ns { opacity: 0.7; font-weight: var(--font-weight-normal); }

25

.pill-sep { opacity: 0.4; margin: 0 1px; }

26

.pill-emotion { background: #2d1b45; color: #c084fc; border-color: #7c3aed44; }

27

.pill-stage { background: #1a2e3a; color: #67e8f9; border-color: #0e7490; }

28

.pill-ref { background: #1e2a1e; color: #86efac; border-color: #166534; }

29

.pill-key { background: #3a2e0a; color: #fde047; border-color: #854d0e; }

30

.pill-tempo { background: #3a1515; color: #fca5a5; border-color: #991b1b; }

31

.pill-time { background: #1e1a3a; color: #a5b4fc; border-color: #3730a3; }

32

.pill-generic { background: var(--bg-overlay); color: var(--text-secondary); border-color: var(--border-subtle); }

33

.xref-group { margin-bottom: var(--space-4); }

34

.xref-group:last-child { margin-bottom: 0; }

35

.xref-group-label { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: var(--space-2); }

36

.xref-list { display: flex; flex-direction: column; gap: var(--space-2); }

37

.xref-item { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--font-size-sm); }

38

.xref-icon { flex-shrink: 0; font-size: 12px; }

39

.xref-open { color: var(--color-success, #3fb950); }

40

.xref-closed { color: var(--text-muted); }

41

.xref-session { color: #f0883e; }

42

.xref-link { color: var(--text-primary); text-decoration: none; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

43

.xref-link:hover { text-decoration: underline; }

44

.xref-meta { flex-shrink: 0; color: var(--text-muted); font-size: var(--font-size-xs); }

45

.commit-header-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); padding: var(--space-2) 0; }

46

.commit-header-left { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

47

.commit-header-right { display: flex; gap: var(--space-2); flex-wrap: wrap; }

48

.commit-message-card { border-left: 3px solid var(--color-accent); }

49

.commit-subject { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin: 0; line-height: var(--line-height-tight); }

50

.commit-body { margin-top: var(--space-3); display: flex; flex-direction: column; gap: 2px; }

51

.commit-body-line { display: block; font-size: var(--font-size-sm); color: var(--text-secondary); white-space: pre-wrap; line-height: 1.6; }

52

.dim-badges-card { padding: var(--space-3); }

53

.dim-badges-label { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: var(--space-2); }

54

.dim-badges-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }

55

.badge-dim-dim-none { background: var(--bg-overlay); color: var(--text-muted); }

56

.badge-dim-dim-low { background: #1a3a2a; color: #4ade80; border: 1px solid #166534; }

57

.badge-dim-dim-medium { background: #3a2e0a; color: #facc15; border: 1px solid #854d0e; }

58

.badge-dim-dim-high { background: #3a1515; color: #f87171; border: 1px solid #991b1b; }

59

.badge[class*="badge-dim-"] { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); }

60

.dim-pct { font-weight: var(--font-weight-normal); opacity: 0.8; font-size: 10px; }

61

.sha-full { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }

62

.copy-btn { padding: 1px 5px; font-size: 11px; line-height: 1.2; border-radius: var(--radius-sm); cursor: pointer; flex-shrink: 0; }

63

.badge-tag { background: #1e2a3a; color: #60a5fa; border: 1px solid #1d4ed8; padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--font-size-xs); }

64

.ab-container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

65

@media (max-width: 600px) { .ab-container { grid-template-columns: 1fr; } }

66

.ab-player { padding: var(--space-3); background: var(--bg-overlay); border-radius: var(--radius-base); border: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: var(--space-1); }

67

.ab-label { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: var(--space-1); }

68

.artifact-section { margin-bottom: var(--space-4); }

69

.artifact-section:last-child { margin-bottom: 0; }

70

.artifact-section-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-secondary); margin: 0 0 var(--space-2) 0; padding-bottom: var(--space-1); border-bottom: 1px solid var(--border-subtle); }

71

.artifact-count { font-weight: var(--font-weight-normal); color: var(--text-muted); }

72

.artifact-card--meta { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }

73

.meta-file-icon { font-size: 2rem; color: var(--text-muted); font-family: var(--font-mono); margin-bottom: var(--space-1); }

74

.midi-preview { background: var(--bg-overlay); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: var(--space-3); min-height: 60px; }

75

.midi-roll-placeholder { color: var(--text-muted); font-size: var(--font-size-sm); }

76

.stem-browser { display: flex; flex-direction: column; gap: var(--space-2); }

77

.stem-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-sm); background: var(--bg-overlay); }

78

.stem-label { font-size: var(--font-size-sm); color: var(--text-secondary); min-width: 100px; flex-shrink: 0; font-family: var(--font-mono); }

79

80

81

/* =========================================================================

82

Commit detail page (.cd-* prefix)

83

========================================================================= */

84

85

/* ── Header card ───────────────────────────────────────────────────────── */

86

.cd-header {

87

background: var(--bg-surface);

88

border: 1px solid var(--border-default);

89

border-radius: var(--radius-lg);

90

overflow: hidden;

91

margin-bottom: var(--space-4);

92

border-left: 3px solid var(--color-accent);

}

.cd-header-top {

display: flex;

align-items: center;

justify-content: space-between;

98

flex-wrap: wrap;

99

gap: var(--space-2);

100

padding: var(--space-3) var(--space-4);

101

border-bottom: 1px solid var(--border-default);

102

background: var(--bg-overlay);

}

.cd-header-chips {

display: flex;

align-items: center;

gap: var(--space-2);

flex-wrap: wrap;

}

.cd-render-badge {

display: inline-flex;

align-items: center;

gap: 4px;

padding: 2px 8px;

border-radius: var(--radius-full);

116

font-size: 0.65rem;

117

font-weight: 700;

118

&.ready { background: rgba(63,185,80,0.15); color: var(--color-success); border: 1px solid rgba(63,185,80,0.3); }

119

&.pending { background: rgba(240,136,62,0.12); color: var(--color-warning); border: 1px solid rgba(240,136,62,0.3); }

120

&.none { background: var(--bg-overlay); color: var(--text-muted); border: 1px solid var(--border-default); }

121

}

122

.cd-branch-pill {

123

display: inline-flex;

align-items: center;

gap: 4px;

padding: 2px 9px;

background: var(--bg-overlay);

128

border: 1px solid var(--border-default);

129

border-radius: var(--radius-full);

130

font-size: var(--font-size-xs);

131

font-family: var(--font-mono);

132

color: var(--text-secondary);

133

}

134

.cd-sha-chip {

135

display: inline-flex;

align-items: center;

gap: 5px;

padding: 2px 9px;

background: var(--bg-overlay);

140

border: 1px solid var(--border-default);

141

border-radius: var(--radius-sm);

142

font-size: var(--font-size-xs);

143

font-family: var(--font-mono);

144

color: var(--color-accent);

cursor: default;

}

.cd-copy-btn {

cursor: pointer;

opacity: 0.6;

padding: 0 2px;

border: none;

background: none;

color: inherit;

font-size: inherit;

&:hover { opacity: 1; }

}

.cd-actions {

display: flex;

gap: var(--space-2);

flex-wrap: wrap;

}

.cd-header-body { padding: var(--space-4); }

163

.cd-title {

164

font-size: var(--font-size-xl);

165

font-weight: var(--font-weight-semibold);

166

color: var(--text-primary);

167

margin: 0 0 var(--space-3);

line-height: 1.4;

}

.cd-header-meta {

display: flex;

align-items: center;

flex-wrap: wrap;

gap: var(--space-2) var(--space-3);

175

font-size: var(--font-size-xs);

176

color: var(--text-muted);

177

}

178

.cd-author-link {

179

display: inline-flex;

180

align-items: center;

181

gap: 5px;

182

color: var(--text-primary);

183

font-weight: var(--font-weight-semibold);

184

text-decoration: none;

185

font-size: var(--font-size-xs);

186

&:hover { color: var(--color-accent); }

}

.cd-author-avatar {

width: 18px;

height: 18px;

border-radius: 50%;

background: var(--color-accent);

193

color: var(--bg-base);

194

font-size: 0.55rem;

195

font-weight: 700;

196

display: inline-flex;

197

align-items: center;

198

justify-content: center;

199

}

200

.cd-parent-link {

201

font-family: var(--font-mono);

202

font-size: var(--font-size-xs);

203

color: var(--color-accent);

204

text-decoration: none;

205

&:hover { text-decoration: underline; }

206

}

207

.cd-meta-sep { color: var(--border-default); }

208

209

/* ── Branch position indicator ─────────────────────────────────────────── */

210

.cd-branch-pos {

211

padding: var(--space-2) var(--space-4);

212

border-top: 1px solid var(--border-default);

213

background: var(--bg-overlay);

214

font-size: var(--font-size-xs);

215

color: var(--text-muted);

display: flex;

align-items: center;

gap: var(--space-2);

}

.cd-pos-track {

flex: 1;

height: 3px;

background: var(--bg-base);

border-radius: 2px;

max-width: 200px;

overflow: hidden;

}

.cd-pos-fill {

height: 100%;

background: var(--color-accent);

border-radius: 2px;

}

/* ── Musical changes panel ─────────────────────────────────────────────── */

235

.cd-dim-panel {

236

background: var(--bg-surface);

237

border: 1px solid var(--border-default);

238

border-radius: var(--radius-lg);

239

overflow: hidden;

240

margin-bottom: var(--space-4);

}

.cd-dim-header {

display: flex;

align-items: center;

gap: var(--space-2);

padding: var(--space-3) var(--space-4);

247

border-bottom: 1px solid var(--border-default);

248

background: var(--bg-overlay);

249

}

250

.cd-dim-title {

251

font-size: var(--font-size-sm);

252

font-weight: var(--font-weight-semibold);

253

color: var(--text-primary);

margin: 0;

}

.cd-overall-badge {

margin-left: auto;

font-size: var(--font-size-xs);

259

color: var(--text-muted);

260

font-family: var(--font-mono);

261

}

262

.cd-dim-body { padding: var(--space-3) var(--space-4); }

.cd-dim-row {

display: flex;

align-items: center;

gap: var(--space-3);

padding: var(--space-2) 0;

268

border-bottom: 1px solid var(--border-default);

269

&:last-child { border-bottom: none; }

270

}

271

.cd-dim-icon { width: 20px; text-align: center; font-size: 0.9rem; flex-shrink: 0; }

272

.cd-dim-name {

273

width: 76px;

274

font-size: var(--font-size-xs);

275

font-weight: var(--font-weight-medium);

276

color: var(--text-secondary);

277

text-transform: capitalize;

flex-shrink: 0;

}

.cd-dim-track {

flex: 1;

height: 6px;

background: var(--bg-overlay);

border-radius: 3px;

overflow: hidden;

}

.cd-dim-fill {

height: 100%;

border-radius: 3px;

width: 0;

transition: width 0.7s ease;

292

&.level-none { background: var(--text-muted); opacity: 0.3; }

293

&.level-low { background: var(--color-success); }

294

&.level-medium { background: var(--color-warning); }

295

&.level-high { background: var(--color-danger); }

}

.cd-dim-pct {

width: 34px;

font-size: var(--font-size-xs);

300

font-family: var(--font-mono);

301

color: var(--text-muted);

text-align: right;

flex-shrink: 0;

}

.cd-dim-level {

min-width: 48px;

font-size: 0.6rem;

padding: 1px 6px;

border-radius: var(--radius-full);

310

font-weight: 700;

311

text-align: center;

312

text-transform: uppercase;

313

letter-spacing: 0.04em;

314

&.level-none { background: var(--bg-overlay); color: var(--text-muted); }

315

&.level-low { background: rgba(63,185,80,0.15); color: var(--color-success); }

316

&.level-medium { background: rgba(240,136,62,0.15); color: var(--color-warning); }

317

&.level-high { background: rgba(248,81,73,0.12); color: var(--color-danger); }

318

}

319

320

/* ── Audio player ──────────────────────────────────────────────────────── */

321

.cd-audio-panel {

322

background: var(--bg-surface);

323

border: 1px solid var(--border-default);

324

border-radius: var(--radius-lg);

325

overflow: hidden;

326

margin-bottom: var(--space-4);

}

.cd-audio-header {

display: flex;

align-items: center;

gap: var(--space-2);

padding: var(--space-3) var(--space-4);

333

border-bottom: 1px solid var(--border-default);

334

background: var(--bg-overlay);

335

}

336

.cd-audio-body { padding: var(--space-4); }

337

.cd-waveform {

338

min-height: 64px;

339

background: var(--bg-base);

340

border-radius: var(--radius-sm);

341

border: 1px solid var(--border-default);

342

display: flex;

343

align-items: center;

344

justify-content: center;

345

color: var(--text-muted);

346

font-size: var(--font-size-sm);

}

.cd-audio-controls {

display: flex;

align-items: center;

gap: var(--space-3);

margin-top: var(--space-3);

}

.cd-play-btn {

width: 36px;

height: 36px;

border-radius: 50%;

background: var(--color-accent);

359

color: var(--bg-base);

border: none;

cursor: pointer;

font-size: 0.9rem;

display: flex;

align-items: center;

justify-content: center;

366

flex-shrink: 0;

367

&:hover { filter: brightness(1.15); }

368

}

369

.cd-time {

370

font-family: var(--font-mono);

371

font-size: var(--font-size-xs);

372

color: var(--text-muted);

373

font-variant-numeric: tabular-nums;

374

}

375

.cd-audio-actions { margin-left: auto; display: flex; gap: var(--space-2); }

376

377

/* ── Sibling navigation ────────────────────────────────────────────────── */

.cd-nav {

display: flex;

gap: var(--space-3);

margin-bottom: var(--space-4);

382

flex-wrap: wrap;

383

align-items: stretch;

}

.cd-nav-card {

flex: 1;

min-width: 200px;

background: var(--bg-surface);

389

border: 1px solid var(--border-default);

390

border-radius: var(--radius-lg);

391

padding: var(--space-3) var(--space-4);

392

text-decoration: none;

393

display: flex;

394

flex-direction: column;

395

gap: var(--space-1);

396

transition: border-color 0.12s, background 0.12s;

397

&:hover { border-color: var(--color-accent); background: var(--bg-overlay); }

398

}

399

.cd-nav-dir {

400

font-size: var(--font-size-xs);

401

color: var(--text-muted);

402

font-weight: var(--font-weight-semibold);

403

text-transform: uppercase;

404

letter-spacing: 0.05em;

405

}

406

.cd-nav-message {

407

font-size: var(--font-size-sm);

408

color: var(--text-primary);

409

white-space: nowrap;

410

overflow: hidden;

411

text-overflow: ellipsis;

412

}

413

.cd-nav-sha {

414

font-family: var(--font-mono);

415

font-size: var(--font-size-xs);

416

color: var(--color-accent);

417

}

418

.cd-nav-back {

419

display: inline-flex;

420

align-items: center;

421

gap: 4px;

422

padding: var(--space-2) var(--space-3);

423

background: var(--bg-surface);

424

border: 1px solid var(--border-default);

425

border-radius: var(--radius-lg);

426

text-decoration: none;

427

font-size: var(--font-size-xs);

428

color: var(--text-muted);

429

align-self: center;

430

&:hover { border-color: var(--color-accent); color: var(--color-accent); }

431

}

432

433

/* ── Comment section ───────────────────────────────────────────────────── */

434

.cd-comment-section {

435

background: var(--bg-surface);

436

border: 1px solid var(--border-default);

437

border-radius: var(--radius-lg);

438

overflow: hidden;

439

margin-bottom: var(--space-4);

}

.cd-comment-header {

display: flex;

align-items: center;

gap: var(--space-2);

padding: var(--space-3) var(--space-4);

446

border-bottom: 1px solid var(--border-default);

447

background: var(--bg-overlay);

448

}

449

.cd-comment-title {

450

font-size: var(--font-size-sm);

451

font-weight: var(--font-weight-semibold);

452

color: var(--text-primary);

margin: 0;

}

.cd-comment-count {

font-size: var(--font-size-xs);

457

color: var(--text-muted);

458

background: var(--bg-base);

459

border: 1px solid var(--border-default);

460

border-radius: var(--radius-full);

461

padding: 0 7px;

462

font-family: var(--font-mono);

463

}

464

.cd-comment-body { padding: var(--space-4); }

465

.cd-comment-form {

466

padding: var(--space-4);

467

border-top: 1px solid var(--border-default);

}

.cd-textarea {

width: 100%;

background: var(--bg-overlay);

472

color: var(--text-primary);

473

border: 1px solid var(--border-default);

474

border-radius: var(--radius-md);

475

padding: var(--space-3);

476

resize: vertical;

477

font-size: var(--font-size-sm);

478

font-family: inherit;

479

box-sizing: border-box;

480

&:focus { outline: none; border-color: var(--color-accent); }

481

}

482

483

/* ── Legacy aliases ────────────────────────────────────────────────────── */

484

.commit-header-left { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

485

.commit-header-right { display: flex; gap: var(--space-2); flex-wrap: wrap; }

486

487

488

/* =========================================================================

489

Commits list page

490

========================================================================= */

491

.commits-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }

492

.commits-header h1 { margin: 0; font-size: var(--font-size-xl); }

493

.filter-bar { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }

494

.filter-group { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }

495

.filter-group label { font-size: var(--font-size-xs); color: var(--text-muted); font-weight: var(--font-weight-medium); white-space: nowrap; }

496

.filter-group input,

497

.filter-group select { font-size: var(--font-size-sm); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); border: 1px solid var(--border-default); background: var(--bg-base); color: var(--text-primary); min-width: 120px; }

498

.filter-group input[type="date"] { min-width: 140px; }

499

.filter-group input[type="search"] { min-width: 200px; }

500

.filter-bar-actions { display: flex; gap: var(--space-2); align-items: flex-end; margin-left: auto; }

501

.filter-active-badge { font-size: var(--font-size-xs); background: var(--color-accent); color: #fff; border-radius: 999px; padding: 1px 7px; margin-left: var(--space-1); }

502

.commits-toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }

503

.branch-select-form { display: flex; align-items: center; gap: var(--space-2); }

504

.branch-select-form label { font-size: var(--font-size-sm); color: var(--text-muted); }

505

.branch-select-form select { font-size: var(--font-size-sm); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--text-primary); cursor: pointer; }

506

.compare-strip { display: none; align-items: center; gap: var(--space-3); background: var(--bg-surface); border: 1px solid var(--color-accent); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3); font-size: var(--font-size-sm); }

507

.compare-strip.visible { display: flex; }

508

#compare-count { font-weight: var(--font-weight-semibold); }

509

.commit-list-table { display: flex; flex-direction: column; }

510

.commit-list-row { display: grid; grid-template-columns: 32px 28px 1fr; align-items: stretch; border-bottom: 1px solid var(--border-subtle); min-height: 60px; transition: background 0.1s; }

511

.commit-list-row:last-child { border-bottom: none; }

512

.commit-list-row:hover { background: var(--bg-surface); }

513

.commit-list-row.compare-selected { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }

514

.dag-col { display: flex; flex-direction: column; align-items: center; position: relative; padding: 0; }

515

.dag-line { width: 2px; background: var(--border-default); flex: 1; }

516

.dag-line-top { min-height: 12px; }

517

.dag-line-bottom { min-height: 12px; }

518

.dag-node { width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); border: 2px solid var(--bg-surface); box-shadow: 0 0 0 2px var(--color-accent); flex-shrink: 0; z-index: 1; }

519

.dag-node-merge { background: var(--color-purple, #8b5cf6); box-shadow: 0 0 0 2px var(--color-purple, #8b5cf6); }

520

.dag-node-root { background: var(--color-success); box-shadow: 0 0 0 2px var(--color-success); }

521

.dag-merge-arm { position: absolute; top: 50%; left: 50%; width: 10px; height: 2px; background: var(--color-purple, #8b5cf6); transform: translateY(-50%); border-radius: 1px; }

522

.compare-col { display: flex; align-items: center; justify-content: center; padding: 0 var(--space-1); }

523

.compare-check { display: none; cursor: pointer; accent-color: var(--color-accent); width: 15px; height: 15px; }

524

body.compare-mode .compare-check { display: block; }

525

.commit-cell { display: flex; flex-direction: column; justify-content: center; padding: var(--space-3) var(--space-2); gap: var(--space-1); min-width: 0; }

526

.commit-cell-top { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }

527

.commit-cell-bottom { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

528

.commit-subject-link { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 460px; }

529

.commit-subject-link:hover { color: var(--color-accent); text-decoration: underline; }

530

.commit-sha-link { font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--color-accent); text-decoration: none; flex-shrink: 0; white-space: nowrap; }

531

.commit-sha-link:hover { text-decoration: underline; }

532

.commit-meta-item { font-size: var(--font-size-xs); color: var(--text-muted); white-space: nowrap; display: flex; align-items: center; gap: var(--space-1); }

533

.merge-indicator { font-size: var(--font-size-xs); color: var(--color-purple, #8b5cf6); font-weight: var(--font-weight-medium); }

534

.meta-badges { display: flex; gap: var(--space-1); flex-wrap: wrap; align-items: center; }

535

.meta-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 999px; line-height: 1.4; white-space: nowrap; }

536

.chip-tempo { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }

537

.chip-key { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }

538

.chip-emotion { background: #ede9fe; color: #5b21b6; border: 1px solid #c4b5fd; }

539

.chip-stage { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; }

540

.chip-instr { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; font-size: 9px; }

541

@media (prefers-color-scheme: dark) {

542

.chip-tempo { background: #451a03; color: #fcd34d; border-color: #78350f; }

543

.chip-key { background: #1e3a5f; color: #93c5fd; border-color: #1d4ed8; }

544

.chip-emotion { background: #2e1065; color: #c4b5fd; border-color: #6d28d9; }

545

.chip-stage { background: #1f2937; color: #d1d5db; border-color: #374151; }

546

.chip-instr { background: #022c22; color: #6ee7b7; border-color: #059669; }

547

}

548

.pagination-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }

549

.pagination-info { font-size: var(--font-size-sm); color: var(--text-muted); }

550

.pagination-nav { display: flex; gap: var(--space-2); align-items: center; }

551

.commits-empty { padding: var(--space-8) var(--space-4); text-align: center; }

552

.commits-empty .empty-icon { font-size: 2.5rem; margin-bottom: var(--space-3); }

553

.commits-empty .empty-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-2); }

554

.commits-empty .empty-desc { font-size: var(--font-size-sm); color: var(--text-muted); }

555

556

557

/* =========================================================================

558

Labels page

559

========================================================================= */

560

.labels-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }

561

.labels-toolbar h1 { margin: 0; }

562

.toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }

563

.label-form-card { background: var(--bg-overlay); border: 1px solid var(--border-default); border-radius: 8px; padding: 18px; margin-bottom: 18px; }

564

.label-form-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 10px; }

565

.label-form-group { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 140px; }

566

.label-form-group label { font-size: 12px; color: var(--text-muted); font-weight: 500; }

567

.label-form-group input[type="text"],

568

.label-form-group input[type="color"] { border: 1px solid var(--border-default); border-radius: 6px; background: var(--bg-base); color: var(--text-primary); font-size: 14px; padding: 6px 10px; }

569

.label-form-group input[type="color"] { padding: 3px 6px; height: 36px; cursor: pointer; width: 60px; flex: 0 0 60px; min-width: 60px; }

570

.form-actions { display: flex; gap: 8px; flex-wrap: wrap; }

571

.label-list { display: flex; flex-direction: column; gap: 0; }

572

.label-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border-default); flex-wrap: wrap; }

573

.label-row:last-child { border-bottom: none; }

574

.label-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 600; line-height: 1.4; white-space: nowrap; }

575

.label-info { flex: 1; min-width: 120px; }

576

.label-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

577

.issue-count-badge { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

578

.label-row-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }

579

.label-edit-form { width: 100%; background: var(--bg-overlay); border: 1px solid var(--border-default); border-radius: 8px; padding: 14px; margin-top: 8px; }

580

.btn-danger { background: rgba(248, 81, 73, 0.1); border-color: var(--color-danger, #f85149); color: var(--color-danger, #f85149); }

581

.btn-danger:hover { background: var(--color-danger, #f85149); color: #fff; }

582

583

584

/* =========================================================================

585

Commit Graph page (Canvas2D renderer — singularity edition)

586

========================================================================= */

587

588

// ── Stats strip overrides for graph page ─────────────────────────────────────

589

.graph-stats-strip {

590

margin-bottom: var(--space-4);

591

background: var(--bg-surface);

592

border: 1px solid var(--border-subtle);

593

border-radius: var(--radius-base);

594

}

595

.graph-stat-accent {

596

background: var(--gradient-accent);

597

-webkit-background-clip: text;

598

-webkit-text-fill-color: transparent;

599

background-clip: text;

600

}

601

.graph-stat-agent { color: #a78bfa; }

602

.graph-stat-breaking { color: #f87171; }

603

.graph-all-commits-btn { margin-left: auto; }

604

605

// ── Layout ────────────────────────────────────────────────────────────────────

606

.graph-layout {

607

display: grid;

608

grid-template-columns: 1fr 220px;

609

gap: 0;

610

align-items: start;

611

@media (max-width: 768px) { grid-template-columns: 1fr; }

612

}

613

.graph-main {

614

border-right: 1px solid var(--border-subtle);

615

padding-right: var(--space-5);

min-width: 0;

}

// ── Viewport card ─────────────────────────────────────────────────────────────

620

.graph-viewport-card {

621

overflow: hidden;

622

padding: 0;

623

border-radius: var(--radius-base);

624

border: 1px solid var(--border-subtle);

625

background: var(--bg-base);

626

box-shadow: 0 0 0 1px rgba(88,166,255,0.04), 0 4px 24px rgba(0,0,0,0.3);

627

transition: box-shadow 0.3s;

628

&:hover {

629

box-shadow: 0 0 0 1px rgba(88,166,255,0.08), 0 8px 32px rgba(0,0,0,0.4);

}

}

// ── Legend bars ───────────────────────────────────────────────────────────────

634

.graph-legend-bar {

635

display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;

636

padding: var(--space-2) var(--space-4);

637

border-bottom: 1px solid var(--border-subtle);

638

background: var(--bg-surface);

639

min-height: 38px;

640

&--types {

641

background: rgba(0,0,0,0.15);

642

min-height: 34px;

643

padding: var(--space-1) var(--space-4);

644

}

645

}

646

.graph-legend-label {

647

font-size: 10px; color: var(--text-muted);

648

text-transform: uppercase; letter-spacing: 0.08em; flex-shrink: 0;

649

}

650

.graph-legend-items { display: flex; gap: 10px; flex-wrap: wrap; }

651

.graph-legend-branch {

652

display: inline-flex; align-items: center; gap: 5px;

653

font-size: 11px; color: var(--text-secondary);

654

}

655

.graph-legend-type {

656

display: inline-flex; align-items: center; gap: 5px;

657

font-size: 11px; color: var(--text-secondary); font-family: var(--font-mono);

658

}

659

.graph-legend-type-count { color: var(--text-muted); font-size: 10px; }

660

.graph-legend-dot {

661

width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;

662

}

663

.graph-legend-sep {

664

color: var(--text-muted); margin-left: auto;

665

display: flex; gap: var(--space-3); font-size: 10px; flex-shrink: 0;

666

}

667

.graph-legend-sep--right { margin-left: auto; }

668

.graph-legend-key {

669

display: inline-flex; align-items: center; gap: 4px;

670

}

671

.graph-legend-key-dot {

672

width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0;

673

&--sm { width: 6px; height: 6px; }

674

}

675

.graph-legend-key-diamond {

676

width: 7px; height: 7px; background: #60a5fa;

677

transform: rotate(45deg); display: inline-block; flex-shrink: 0;

678

}

679

680

// ── Canvas viewport ───────────────────────────────────────────────────────────

681

.graph-viewport {

682

position: relative;

683

height: calc(100vh - 280px);

684

min-height: 500px;

685

background: var(--bg-base);

overflow: hidden;

cursor: default;

}

.graph-canvas {

display: block;

position: absolute; top: 0; left: 0;

692

cursor: default;

693

&:active { cursor: grabbing; }

694

}

695

.graph-loading {

696

position: absolute; inset: 0;

697

display: flex; align-items: center; justify-content: center;

698

gap: 10px; color: var(--text-muted); font-size: 14px;

699

}

700

.graph-empty {

701

padding: 60px; text-align: center; color: var(--text-muted); font-size: 14px;

702

}

703

704

// ── Minimap ───────────────────────────────────────────────────────────────────

705

.dag-minimap {

706

position: absolute; bottom: 8px; right: 8px;

707

border-radius: 6px;

708

border: 1px solid var(--border-subtle);

709

cursor: pointer;

710

opacity: 0.85;

711

transition: opacity 0.2s, box-shadow 0.2s;

712

&:hover {

713

opacity: 1;

714

box-shadow: 0 0 12px rgba(88,166,255,0.2);

}

}

// ── Controls bar ──────────────────────────────────────────────────────────────

719

.graph-controls {

720

display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;

721

padding: var(--space-2) var(--space-3);

722

border-top: 1px solid var(--border-subtle);

723

background: var(--bg-surface);

min-height: 44px;

}

.graph-ctrl-btn {

display: inline-flex; align-items: center; gap: 5px;

728

background: transparent;

729

border: 1px solid var(--border-default);

730

color: var(--text-muted);

731

border-radius: var(--radius-sm);

732

padding: 4px 10px;

733

font-size: 11px; cursor: pointer;

734

transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;

735

&:hover {

736

color: var(--color-accent);

737

border-color: rgba(88,166,255,0.4);

738

background: rgba(88,166,255,0.06);

739

box-shadow: 0 0 8px rgba(88,166,255,0.12);

}

}

.graph-search-wrap {

position: relative; display: flex; align-items: center; margin-left: var(--space-2);

744

}

745

.graph-search-icon {

746

position: absolute; left: 8px; color: var(--text-muted); pointer-events: none;

747

}

748

.graph-search-input {

749

background: var(--bg-overlay); border: 1px solid var(--border-default);

750

border-radius: var(--radius-sm); padding: 4px 8px 4px 28px;

751

font-size: 12px; color: var(--text-primary); width: 200px;

752

transition: border-color 0.15s, width 0.2s, box-shadow 0.15s;

753

&::placeholder { color: var(--text-muted); }

754

&:focus {

755

outline: none; border-color: var(--color-accent); width: 260px;

756

box-shadow: 0 0 0 3px rgba(88,166,255,0.1);

757

}

758

}

759

.graph-search-count {

760

position: absolute; right: 6px; font-size: 10px; color: var(--text-muted);

761

pointer-events: none; font-family: var(--font-mono);

762

}

763

.graph-hint { font-size: 10px; color: var(--text-muted); margin-left: auto; opacity: 0.7; }

764

765

// ── Sidebar ───────────────────────────────────────────────────────────────────

766

.graph-sidebar {

767

padding-left: var(--space-4);

768

display: flex;

769

flex-direction: column;

770

position: sticky;

771

top: var(--header-height);

772

max-height: calc(100vh - var(--header-height));

773

overflow-y: auto;

774

scrollbar-width: none;

775

&::-webkit-scrollbar { display: none; }

776

}

777

.graph-sidebar-section {

778

padding: var(--space-3) 0;

779

border-bottom: 1px solid var(--border-subtle);

780

&:last-child { border-bottom: none; }

781

}

782

783

// ── Commit popover ────────────────────────────────────────────────────────────

784

// Uses --pop-accent and --pop-accent-rgb set by JS for commit-type colour theming

.dag-popover {

display: none;

position: fixed;

z-index: 600;

background: var(--bg-surface);

790

border: 1px solid rgba(var(--pop-accent-rgb, 88 166 255), 0.25);

791

border-left: 3px solid var(--pop-accent, var(--color-accent));

792

border-radius: var(--radius-md);

793

padding: var(--space-3) var(--space-4);

min-width: 320px;

max-width: 380px;

box-shadow:

0 12px 40px rgba(0,0,0,0.55),

798

0 0 0 1px rgba(var(--pop-accent-rgb, 88 166 255), 0.08),

799

0 0 24px rgba(var(--pop-accent-rgb, 88 166 255), 0.06);

800

pointer-events: none;

801

backdrop-filter: blur(4px);

802

}

803

.dag-pop-sha {

804

font-family: var(--font-mono);

805

font-size: 12px;

806

color: var(--color-accent-link);

807

margin-bottom: var(--space-2);

display: flex;

align-items: center;

gap: var(--space-2);

flex-wrap: wrap;

}

.dag-pop-sha-badge {

background: var(--bg-overlay);

815

border: 1px solid var(--border-subtle);

816

border-radius: var(--radius-sm);

817

padding: 2px 8px;

818

font-size: 11px;

819

letter-spacing: 0.04em;

color: #58a6ff;

}

.dag-pop-branch {

display: inline-block;

824

padding: 2px 8px;

825

border-radius: var(--radius-full);

826

font-size: 10px;

827

font-weight: var(--font-weight-semibold);

828

font-family: var(--font-mono);

829

border: 1px solid transparent;

margin-left: auto;

}

.dag-pop-type {

display: inline-block;

834

padding: 2px 8px;

835

border-radius: var(--radius-sm);

836

font-size: 10px;

837

font-weight: var(--font-weight-semibold);

838

font-family: var(--font-mono);

839

border: 1px solid transparent;

}

.dag-pop-msg {

font-size: 13px;

color: var(--text-primary);

844

margin-bottom: var(--space-2);

845

word-break: break-word;

line-height: 1.55;

}

.dag-pop-meta {

font-size: 12px;

color: var(--text-muted);

display: flex;

align-items: center;

gap: var(--space-2);

flex-wrap: wrap;

}

.dag-pop-author-chip {

857

display: inline-flex;

858

align-items: center;

859

gap: 5px;

860

background: var(--bg-overlay);

861

border-radius: var(--radius-full);

862

padding: 2px 8px;

863

font-size: 11px;

864

font-weight: var(--font-weight-medium);

865

color: var(--text-secondary);

}

.dag-pop-avatar {

width: 18px;

height: 18px;

border-radius: 50%;

display: inline-flex;

872

align-items: center;

873

justify-content: center;

874

font-size: 9px;

875

font-weight: var(--font-weight-bold);

876

color: #0d1117;

877

flex-shrink: 0;

878

text-transform: uppercase;

879

}

880

.dag-pop-session { font-size: 11px; color: #2dd4bf; margin-top: var(--space-2); }

881

.dag-pop-time { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); margin-left: auto; }

882

883

// Muse enrichment row

884

.dag-pop-muse {

885

display: flex; align-items: center; gap: 5px; flex-wrap: wrap;

886

margin-top: var(--space-2); padding-top: var(--space-2);

887

border-top: 1px solid var(--border-subtle);

888

}

889

.pop-muse-badge {

890

display: inline-flex; align-items: center;

891

padding: 2px 7px; border-radius: var(--radius-sm);

892

font-size: 10px; font-weight: var(--font-weight-semibold);

893

font-family: var(--font-mono); border: 1px solid transparent;

894

}

895

.pop-muse-agent { background: rgba(167,139,250,0.18); color: #a78bfa; border-color: rgba(167,139,250,0.32); }

896

.pop-muse-breaking { background: rgba(248,113,113,0.18); color: #f87171; border-color: rgba(248,113,113,0.32); }

897

.pop-sym-stats { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-family: var(--font-mono); }

898

.pop-sym-add { color: #34d399; font-weight: var(--font-weight-semibold); }

899

.pop-sym-del { color: #f87171; font-weight: var(--font-weight-semibold); }

900

901

// "View commit →" link inside popover

902

.dag-pop-nav {

903

margin-top: var(--space-2);

904

padding-top: var(--space-2);

905

border-top: 1px solid var(--border-subtle);

906

}

907

.dag-pop-open-link {

908

display: inline-flex; align-items: center; gap: 4px;

909

font-size: 11px;

910

color: var(--pop-accent, var(--color-accent));

911

text-decoration: none;

912

opacity: 0.8;

913

font-weight: var(--font-weight-medium);

914

transition: opacity 0.15s;

915

pointer-events: auto; // allow this one element to be interactive

916

&:hover { opacity: 1; }

917

}

918

919

// ── Sidebar item components ────────────────────────────────────────────────────

920

.branch-legend-item {

921

display: flex; align-items: center; gap: var(--space-2);

922

padding: 5px 0;

923

font-size: 12px; color: var(--text-secondary);

924

border-top: 1px solid var(--border-subtle);

925

&:first-of-type { border-top: none; }

926

}

927

.branch-legend-name {

928

flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

929

font-size: 12px; color: var(--text-secondary);

930

}

931

.branch-legend-pill {

932

width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;

933

}

934

.sidebar-branch-list { padding: var(--space-1) 0; }

935

.sidebar-contributor-list{ padding: var(--space-1) 0; }

936

.branch-legend-count {

937

margin-left: auto;

938

font-size: 10px;

939

color: var(--text-muted);

940

font-family: var(--font-mono);

}

.contributor-item {

display: flex;

align-items: center;

gap: var(--space-2);

padding: 5px 0;

border-top: 1px solid var(--border-subtle);

948

&:first-of-type { border-top: none; }

949

}

950

.contributor-avatar-sm {

width: 24px;

height: 24px;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

957

font-size: 10px;

958

font-weight: var(--font-weight-bold);

959

color: #0d1117;

960

flex-shrink: 0;

961

text-transform: uppercase;

962

}

963

.contributor-name { font-size: 12px; color: var(--text-secondary); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

964

.contributor-count { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); flex-shrink: 0; }

.contributor-bar {

height: 3px;

border-radius: 2px;

background: var(--bg-overlay);

margin: 2px 0 0;

overflow: hidden;

}

.contributor-bar-fill { height: 100%; border-radius: 2px; }

973

974

975

// ============================================================================

976

// Commit Detail v2 — multi-dimensional Muse commit page (cd2-* namespace)

977

// ============================================================================

.cd2-layout {

display: grid;

grid-template-columns: 1fr 260px;

982

gap: var(--space-4);

983

align-items: start;

984

padding-top: var(--space-4);

985

}

986

.cd2-main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }

987

.cd2-sidebar { display: flex; flex-direction: column; gap: var(--space-3); }

988

989

// ── Header card ──────────────────────────────────────────────────────────────

990

.cd2-header-card {

991

background: var(--bg-card); border: 1px solid var(--border-subtle);

992

border-radius: var(--radius-lg); padding: var(--space-5);

993

&.cd2-breaking-border { border-left: 3px solid var(--color-error); }

994

}

995

.cd2-header-top {

996

display: flex; align-items: flex-start; justify-content: space-between;

997

gap: var(--space-3); margin-bottom: var(--space-4);

998

}

999

.cd2-header-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

1000

.cd2-header-actions { display: flex; gap: var(--space-2); flex-shrink: 0; }

1001

1002

.cd2-type-badge {

1003

display: inline-flex; align-items: center;

1004

font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 5px;

1005

font-family: var(--font-mono); text-transform: lowercase;

1006

}

1007

.cd2-ct-feat { background: color-mix(in srgb, #22c55e 15%, transparent); color: #22c55e; }

1008

.cd2-ct-fix { background: color-mix(in srgb, #ef4444 15%, transparent); color: #ef4444; }

1009

.cd2-ct-docs { background: color-mix(in srgb, #60a5fa 15%, transparent); color: #60a5fa; }

1010

.cd2-ct-test { background: color-mix(in srgb, #a78bfa 15%, transparent); color: #a78bfa; }

1011

.cd2-ct-refactor { background: color-mix(in srgb, #f59e0b 15%, transparent); color: #f59e0b; }

1012

.cd2-ct-perf { background: color-mix(in srgb, #06b6d4 15%, transparent); color: #06b6d4; }

1013

.cd2-ct-chore, .cd2-ct-build, .cd2-ct-ci { background: color-mix(in srgb, #6b7280 18%, transparent); color: #9ca3af; }

1014

.cd2-ct-revert { background: color-mix(in srgb, #f43f5e 15%, transparent); color: #f43f5e; }

1015

1016

.cd2-semver {

1017

display: inline-flex; align-items: center;

1018

font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px;

1019

text-transform: uppercase; letter-spacing: 0.07em;

1020

}

1021

.cd2-sv-patch { background: color-mix(in srgb, #10b981 12%, transparent); color: #10b981; border: 1px solid color-mix(in srgb, #10b981 30%, transparent); }

1022

.cd2-sv-minor { background: color-mix(in srgb, #3b82f6 12%, transparent); color: #3b82f6; border: 1px solid color-mix(in srgb, #3b82f6 30%, transparent); }

1023

.cd2-sv-major { background: color-mix(in srgb, #f59e0b 12%, transparent); color: #f59e0b; border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent); }

1024

.cd2-sv-breaking { background: color-mix(in srgb, #ef4444 15%, transparent); color: #ef4444; border: 1px solid color-mix(in srgb, #ef4444 35%, transparent); }

1025

1026

.cd2-scope-badge {

1027

font-size: 11px; color: var(--text-muted);

1028

background: var(--bg-sunken); border: 1px solid var(--border-subtle);

1029

padding: 2px 7px; border-radius: 4px; font-family: var(--font-mono);

1030

}

1031

.cd2-branch-pill {

1032

display: inline-flex; align-items: center; gap: 4px;

1033

font-size: 11px; color: var(--text-muted);

1034

background: var(--bg-sunken); border: 1px solid var(--border-subtle);

1035

padding: 2px 8px; border-radius: 999px;

1036

}

1037

.cd2-pos-pill {

1038

font-size: 10px; color: var(--text-muted);

1039

background: var(--bg-sunken); padding: 2px 7px; border-radius: 999px;

1040

border: 1px solid var(--border-subtle);

}

.cd2-subject {

font-size: 18px; font-weight: var(--font-weight-semibold);

1045

color: var(--text-primary); line-height: 1.4; margin: 0 0 var(--space-3);

1046

word-break: break-word;

1047

}

1048

.cd2-body { margin: 0 0 var(--space-4); }

1049

.cd2-body-para {

1050

font-size: 13px; color: var(--text-secondary); line-height: 1.7;

1051

margin: 0 0 var(--space-2); max-width: 680px;

1052

&:last-child { margin-bottom: 0; }

}

.cd2-meta-row {

display: flex; align-items: center; gap: 8px; flex-wrap: wrap;

font-size: 12px;

}

.cd2-avatar {

width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;

1061

display: flex; align-items: center; justify-content: center;

1062

font-size: 11px; font-weight: 700;

1063

}

1064

.cd2-avatar-human { background: var(--color-accent); color: var(--bg-base); }

1065

.cd2-avatar-agent { background: var(--bg-sunken); color: var(--text-muted); border: 1px solid var(--border-subtle); }

1066

.cd2-avatar-unknown { background: var(--bg-sunken); color: var(--text-muted); }

1067

.cd2-author { color: var(--text-primary); text-decoration: none; font-weight: var(--font-weight-medium); &:hover { color: var(--color-accent-link); } }

1068

.cd2-meta-sep { color: var(--border-subtle); }

1069

.cd2-time { color: var(--text-secondary); }

1070

.cd2-date { color: var(--text-muted); font-size: 11px; }

1071

.cd2-sha {

1072

display: inline-flex; align-items: center; gap: 4px;

1073

font-family: var(--font-mono); font-size: 11px;

1074

background: var(--bg-sunken); border: 1px solid var(--border-subtle);

1075

padding: 1px 7px; border-radius: 4px; color: var(--text-muted);

1076

}

1077

.cd2-copy-btn {

1078

background: none; border: none; cursor: pointer; padding: 0;

1079

color: var(--text-muted); display: inline-flex; align-items: center;

1080

&:hover { color: var(--text-primary); }

1081

}

1082

.cd2-parent-label { font-size: 11px; color: var(--text-muted); }

1083

.cd2-parent-sha {

1084

font-family: var(--font-mono); font-size: 11px; color: var(--color-accent-link);

1085

text-decoration: none; &:hover { text-decoration: underline; }

}

.cd2-timeline-bar {

display: flex; align-items: center; gap: var(--space-2);

1090

margin-top: var(--space-4); font-size: 10px; color: var(--text-muted);

1091

}

1092

.cd2-tl-track {

1093

flex: 1; height: 4px; background: var(--bg-sunken);

1094

border-radius: 999px; position: relative;

1095

}

1096

.cd2-tl-fill {

1097

height: 100%; background: var(--color-accent); border-radius: 999px;

1098

transition: width 0.3s;

1099

}

1100

.cd2-tl-dot {

1101

position: absolute; top: 50%; transform: translate(-50%, -50%);

1102

width: 10px; height: 10px; background: var(--color-accent);

1103

border: 2px solid var(--bg-card); border-radius: 50%;

1104

}

1105

.cd2-tl-label { white-space: nowrap; }

1106

.cd2-tl-pct { font-weight: 600; color: var(--text-secondary); white-space: nowrap; }

1107

1108

// ── Section wrapper ───────────────────────────────────────────────────────────

1109

.cd2-section {

1110

background: var(--bg-card); border: 1px solid var(--border-subtle);

1111

border-radius: var(--radius-lg); overflow: hidden;

1112

}

1113

.cd2-section-header {

1114

display: flex; align-items: center; justify-content: space-between;

1115

padding: var(--space-3) var(--space-4);

1116

border-bottom: 1px solid var(--border-subtle);

1117

background: var(--bg-raised);

1118

}

1119

.cd2-section-title-row { display: flex; align-items: center; gap: 8px; }

1120

.cd2-section-title { font-size: 13px; font-weight: var(--font-weight-semibold); margin: 0; color: var(--text-primary); }

1121

.cd2-section-sub { font-size: 11px; color: var(--text-muted); background: var(--bg-sunken); padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border-subtle); }

1122

1123

// ── Muse Structured Delta ─────────────────────────────────────────────────────

1124

.cd2-delta-count {

1125

margin-left: auto; font-size: 11px; color: var(--text-muted);

1126

background: var(--bg-sunken); padding: 1px 7px; border-radius: 999px;

1127

border: 1px solid var(--border-subtle);

1128

}

1129

.cd2-delta-list { display: flex; flex-direction: column; }

1130

1131

.cd2-delta-file {

1132

border-bottom: 1px solid var(--border-subtle);

1133

&:last-child { border-bottom: none; }

1134

}

1135

.cd2-delta-file-header {

1136

display: flex; align-items: center; gap: 8px;

1137

padding: var(--space-2) var(--space-4); flex-wrap: wrap;

1138

&:hover { background: var(--bg-raised); }

1139

}

1140

.cd2-delta-file-path {

1141

font-family: var(--font-mono); font-size: 12px; color: var(--text-primary); flex: 1; min-width: 0;

1142

overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

1143

}

1144

.cd2-delta-summary { font-size: 11px; color: var(--text-muted); }

1145

.cd2-delta-sym-count {

1146

font-size: 10px; color: var(--text-muted); background: var(--bg-sunken);

1147

padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border-subtle);

1148

white-space: nowrap; flex-shrink: 0;

1149

}

1150

.cd2-file-ext {

1151

font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);

1152

background: var(--bg-sunken); padding: 0 5px; border-radius: 3px; flex-shrink: 0;

1153

}

1154

1155

// File-level operation colours

1156

.cd2-delta-insert .cd2-delta-file-header { border-left: 2px solid #22c55e; }

1157

.cd2-delta-delete .cd2-delta-file-header { border-left: 2px solid #ef4444; }

1158

.cd2-delta-replace .cd2-delta-file-header,

1159

.cd2-delta-patch .cd2-delta-file-header { border-left: 2px solid #f59e0b; }

// Symbol rows

.cd2-sym-list {

display: flex; flex-direction: column;

1164

background: var(--bg-sunken); border-top: 1px solid var(--border-subtle);

1165

}

1166

.cd2-sym-row {

1167

display: flex; align-items: center; gap: 8px;

1168

padding: 5px var(--space-4) 5px calc(var(--space-4) + 16px);

1169

border-bottom: 1px solid var(--border-subtle);

1170

font-size: 12px;

1171

&:last-child { border-bottom: none; }

1172

}

1173

.cd2-sym-addr { font-family: var(--font-mono); color: var(--text-primary); flex: 1; min-width: 0; }

1174

.cd2-sym-summary { font-size: 11px; color: var(--text-muted); }

// Op icons

.cd2-op-icon {

display: inline-flex; align-items: center; justify-content: center;

1179

width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0;

1180

}

1181

.cd2-op-insert { background: color-mix(in srgb, #22c55e 15%, transparent); color: #22c55e; }

1182

.cd2-op-delete { background: color-mix(in srgb, #ef4444 15%, transparent); color: #ef4444; }

1183

.cd2-op-replace { background: color-mix(in srgb, #f59e0b 15%, transparent); color: #f59e0b; }

1184

.cd2-op-other { background: var(--bg-sunken); color: var(--text-muted); }

1185

1186

// ── Snapshot diff ─────────────────────────────────────────────────────────────

1187

.cd2-diff-tally { display: flex; gap: 8px; font-size: 12px; font-weight: 700; font-family: var(--font-mono); }

1188

.cd2-tally-added { color: #22c55e; }

1189

.cd2-tally-modified { color: #f59e0b; }

1190

.cd2-tally-removed { color: #ef4444; }

1191

1192

.cd2-snap-list { display: flex; flex-direction: column; }

1193

.cd2-snap-row {

1194

display: flex; align-items: center; gap: 8px;

1195

padding: 6px var(--space-4);

1196

border-bottom: 1px solid var(--border-subtle);

1197

&:last-child { border-bottom: none; }

1198

&:hover { background: var(--bg-raised); }

1199

}

1200

.cd2-snap-added { border-left: 2px solid #22c55e; }

1201

.cd2-snap-modified { border-left: 2px solid #f59e0b; }

1202

.cd2-snap-removed { border-left: 2px solid #ef4444; opacity: 0.7; }

1203

1204

.cd2-snap-path {

1205

font-family: var(--font-mono); font-size: 12px; color: var(--text-primary);

1206

text-decoration: none; flex: 1; min-width: 0;

1207

overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

1208

&:hover { color: var(--color-accent-link); }

1209

}

1210

.cd2-snap-path-gone { text-decoration: line-through; color: var(--text-muted); }

1211

1212

// ── Audio section ─────────────────────────────────────────────────────────────

1213

.cd2-audio-section {}

1214

.cd2-audio-body { padding: var(--space-4); }

1215

.cd2-waveform {

1216

height: 64px; background: var(--bg-sunken); border-radius: var(--radius-md);

1217

display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-3);

1218

}

1219

.cd2-audio-controls { display: flex; align-items: center; gap: var(--space-3); }

1220

.cd2-play-btn {

1221

width: 32px; height: 32px; border-radius: 50%; background: var(--color-accent);

1222

border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;

1223

color: var(--bg-base); transition: opacity 0.15s; &:hover { opacity: 0.85; }

1224

}

1225

.cd2-time { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

1226

1227

// ── Commit navigation ─────────────────────────────────────────────────────────

1228

.cd2-nav {

1229

display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-2); align-items: center;

1230

}

1231

.cd2-nav-card {

1232

background: var(--bg-card); border: 1px solid var(--border-subtle);

1233

border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);

1234

text-decoration: none; display: flex; flex-direction: column; gap: 4px;

1235

transition: border-color 0.15s, background 0.15s;

1236

&:hover { border-color: var(--color-accent); background: var(--bg-raised); text-decoration: none; }

1237

}

1238

.cd2-nav-newer { text-align: right; }

1239

.cd2-nav-disabled { opacity: 0.4; pointer-events: none; }

1240

.cd2-nav-dir {

1241

display: flex; align-items: center; gap: 4px;

1242

font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em;

1243

}

1244

.cd2-nav-newer .cd2-nav-dir { justify-content: flex-end; }

1245

.cd2-nav-msg { font-size: 12px; color: var(--text-primary); line-height: 1.4; }

1246

.cd2-nav-sha { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }

1247

.cd2-nav-all {

1248

display: flex; flex-direction: column; align-items: center; gap: 4px;

1249

font-size: 11px; color: var(--text-muted); text-decoration: none;

1250

padding: var(--space-2); border-radius: var(--radius-sm); text-align: center;

1251

&:hover { color: var(--text-primary); }

1252

}

1253

1254

// ── Comments ──────────────────────────────────────────────────────────────────

1255

.cd2-comments {

1256

background: var(--bg-card); border: 1px solid var(--border-subtle);

1257

border-radius: var(--radius-lg); overflow: hidden;

1258

}

1259

.cd2-comments-header {

1260

display: flex; align-items: center; gap: 8px;

1261

padding: var(--space-3) var(--space-4);

1262

border-bottom: 1px solid var(--border-subtle);

1263

}

1264

.cd2-comment-count {

1265

background: var(--bg-sunken); border: 1px solid var(--border-subtle);

1266

border-radius: 999px; font-size: 11px; color: var(--text-muted);

1267

padding: 0 7px; min-width: 22px; text-align: center;

1268

}

1269

.cd2-comment-form {

1270

padding: var(--space-3) var(--space-4) var(--space-4);

1271

border-top: 1px solid var(--border-subtle);

1272

}

1273

.cd2-textarea {

1274

width: 100%; box-sizing: border-box;

1275

background: var(--bg-input, var(--bg-sunken)); border: 1px solid var(--border-subtle);

1276

border-radius: var(--radius-md); padding: var(--space-3);

1277

font-family: var(--font-base); font-size: 13px; color: var(--text-primary);

1278

resize: vertical; min-height: 72px;

1279

&:focus { outline: none; border-color: var(--color-accent); }

1280

}

1281

1282

// ── Sidebar cards ─────────────────────────────────────────────────────────────

1283

.cd2-side-card { margin-bottom: 0; overflow: hidden; }

1284

.cd2-side-header {

1285

display: flex; align-items: center; gap: 6px;

1286

padding: var(--space-3) var(--space-4);

1287

border-bottom: 1px solid var(--border-subtle);

1288

background: var(--bg-raised);

1289

}

1290

.cd2-side-title { font-size: 11px; font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; margin: 0; color: var(--text-muted); }

1291

1292

.cd2-prov-row {

1293

display: flex; align-items: flex-start; gap: 8px;

1294

padding: 6px var(--space-4); font-size: 12px;

1295

border-bottom: 1px solid var(--border-subtle);

1296

&:last-child { border-bottom: none; }

1297

}

1298

.cd2-prov-label { color: var(--text-muted); white-space: nowrap; min-width: 72px; font-size: 11px; margin-top: 1px; }

1299

.cd2-prov-val { color: var(--text-primary); word-break: break-word; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

1300

.cd2-mono { font-family: var(--font-mono); font-size: 11px; }

1301

1302

.cd2-identity-human, .cd2-identity-agent {

1303

display: inline-flex; align-items: center; gap: 4px; font-size: 11px;

1304

}

1305

.cd2-identity-human { color: var(--color-accent); }

1306

.cd2-identity-agent { color: #818cf8; }

1307

1308

.cd2-signed { color: var(--color-success); display: flex; align-items: center; gap: 4px; }

1309

.cd2-reviewer {

1310

background: var(--bg-sunken); border: 1px solid var(--border-subtle);

1311

border-radius: 999px; padding: 0 6px; font-size: 10px; color: var(--text-muted);

1312

}

1313

.cd2-parent-chip {

1314

font-family: var(--font-mono); font-size: 11px; color: var(--color-accent-link);

1315

background: var(--bg-sunken); border: 1px solid var(--border-subtle);

1316

border-radius: 4px; padding: 0 6px; text-decoration: none;

1317

&:hover { border-color: var(--color-accent); }

1318

}

1319

.cd2-breaking-list { display: flex; flex-direction: column; gap: 3px; }

1320

.cd2-breaking-item { font-size: 11px; color: #ef4444; font-family: var(--font-mono); }

1321

.cd2-snap-sha-row { padding: var(--space-2) var(--space-4) var(--space-3); }

1322

1323

1324

// ── Commit Detail — D3 Symbol Graph ──────────────────────────────────────────

1325

.cd2-mode-btn {

1326

background: rgba(255,255,255,.04); border: 1px solid var(--border-default);

1327

border-radius: 4px; color: var(--text-muted); cursor: pointer; font-size: 9px;

1328

padding: 2px 8px; font-weight: 500; transition: background .15s, color .15s;

1329

white-space: nowrap;

1330

&:hover { background: rgba(255,255,255,.08); color: var(--text-primary); }

1331

&.active { background: rgba(79,142,247,.12); border-color: rgba(79,142,247,.3); color: var(--color-accent); }

1332

&.active-red { background: rgba(248,113,113,.10); border-color: rgba(248,113,113,.3); color: #f87171; }

1333

}

1334

1335

.cd2-sym-graph-wrap {

1336

display: flex; gap: 0; overflow: hidden; border-top: 1px solid var(--border-subtle);

1337

}

1338

.cd2-sym-svg {

1339

flex: 1; display: block; background: var(--bg-base); min-height: 300px;

1340

}

1341

.cd2-sym-info-panel {

1342

width: 200px; flex-shrink: 0; padding: var(--space-3) var(--space-3);

1343

border-left: 1px solid var(--border-subtle); background: var(--bg-sunken);

1344

font-size: 11px; overflow-y: auto; min-height: 300px;

1345

}

1346

.cd2-sym-hint { color: var(--text-muted); font-size: 10px; line-height: 1.5; }

// D3 node states

.sg-node {

cursor: pointer;

.sg-ring, .sg-fill, .sg-lbl { transition: opacity .2s; }

1352

&.sg-inactive .sg-ring,

1353

&.sg-inactive .sg-fill,

1354

&.sg-inactive .sg-lbl { opacity: .06; }

1355

&.sg-selected .sg-ring { filter: drop-shadow(0 0 6px var(--color-accent)); }

1356

}

1357

.sg-edge {

1358

transition: opacity .2s;

1359

&.inactive { opacity: 0; }

1360

}

1361

// Dead-code mode: pulse the dashed ring

1362

[data-mode="dead"] .sg-node.sg-inactive .sg-dead-ring { opacity: .04; }

1363

[data-mode="dead"] .sg-node:not(.sg-inactive) .sg-dead-ring {

1364

animation: sgDeadPulse 1.8s ease-in-out infinite;

1365

}

1366

@keyframes sgDeadPulse { 0%,100%{stroke-opacity:.4} 50%{stroke-opacity:1} }

1367

1368

// Impact mode: highlight impacted edges

1369

[data-mode="impact"] .sg-edge:not(.inactive) { stroke: #fbbf24; opacity: .8; }

1370

1371

// ══════════════════════════════════════════════════════════════════════════════

1372

1373

// Commit Detail v3 — cd3-*

1374

// ══════════════════════════════════════════════════════════════════════════════

// Layout

.cd3-layout {

display: grid;

grid-template-columns: 1fr 240px;

gap: var(--space-6);

align-items: start;

@media (max-width: 860px) {

1384

grid-template-columns: 1fr;

1385

.cd3-sidebar { order: -1; }

}

}

.cd3-main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }

// Header

.cd3-header {

background: var(--surface-2);

1394

border: 1px solid var(--border-default);

1395

border-radius: var(--radius-lg);

1396

padding: var(--space-5) var(--space-6);

1397

display: flex; flex-direction: column; gap: var(--space-3);

1398

1399

&.cd3-breaking-border { border-color: #ef4444; }

}

.cd3-header-top {

display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);

1404

}

1405

1406

.cd3-badges { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

1407

.cd3-header-actions { display: flex; gap: var(--space-2); }

1408

1409

// Conventional commit type badges

1410

.cd3-type {

1411

display: inline-flex; align-items: center;

1412

padding: 2px 7px; border-radius: 4px; font-size: 10px; font-weight: 700;

1413

letter-spacing: .04em; text-transform: lowercase;

1414

font-family: var(--font-mono);

1415

&.cd3-ct-feat { background: #1d4ed820; color: #60a5fa; border: 1px solid #1d4ed840; }

1416

&.cd3-ct-fix { background: #15803d20; color: #4ade80; border: 1px solid #15803d40; }

1417

&.cd3-ct-refactor{ background: #7c3aed20; color: #c084fc; border: 1px solid #7c3aed40; }

1418

&.cd3-ct-chore { background: #71717a20; color: #a1a1aa; border: 1px solid #71717a40; }

1419

&.cd3-ct-test { background: #0369a120; color: #38bdf8; border: 1px solid #0369a140; }

1420

&.cd3-ct-docs { background: #b4530020; color: #fb923c; border: 1px solid #b4530040; }

1421

&.cd3-ct-perf { background: #a1620020; color: #fbbf24; border: 1px solid #a1620040; }

1422

&.cd3-ct-style { background: #be185d20; color: #f472b6; border: 1px solid #be185d40; }

}

// Semver badges

.cd3-sv {

display: inline-flex; align-items: center;

1428

padding: 2px 7px; border-radius: 4px; font-size: 10px; font-weight: 600;

1429

font-family: var(--font-mono); letter-spacing: .04em;

1430

&.cd3-sv-breaking { background: rgba(248,113,113,0.12); color: #f87171; border: 1px solid rgba(248,113,113,0.25); }

1431

&.cd3-sv-major { background: rgba(248,113,113,0.08); color: #fca5a5; border: 1px solid rgba(248,113,113,0.18); }

1432

&.cd3-sv-minor { background: rgba(52,211,153,0.10); color: #6ee7b7; border: 1px solid rgba(52,211,153,0.22); }

1433

&.cd3-sv-patch { background: rgba(251,191,36,0.10); color: #fde68a; border: 1px solid rgba(251,191,36,0.22); }

}

.cd3-scope {

font-size: 11px; color: var(--text-muted);

1438

font-family: var(--font-mono);

1439

background: var(--surface-3); padding: 1px 6px; border-radius: 3px;

1440

}

1441

1442

.cd3-branch-pill, .cd3-pos-pill {

1443

display: inline-flex; align-items: center; gap: 4px;

1444

font-size: 10px; color: var(--text-muted);

1445

background: var(--surface-3); padding: 2px 7px; border-radius: 10px;

}

.cd3-subject {

font-size: 20px; font-weight: 700; color: var(--text-primary);

1450

line-height: 1.3; margin: 0;

1451

letter-spacing: -.01em;

}

.cd3-body {

font-size: 13px; color: var(--text-secondary); line-height: 1.6;

1456

border-left: 2px solid var(--border-default);

1457

padding-left: var(--space-3);

1458

p { margin: 0 0 var(--space-2); &:last-child { margin-bottom: 0; } }

}

.cd3-meta-row {

display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;

1463

font-size: 12px; color: var(--text-muted);

1464

}

1465

1466

.cd3-sep { color: var(--border-default); }

1467

1468

.cd3-avatar {

1469

width: 20px; height: 20px; border-radius: 50%;

1470

display: inline-flex; align-items: center; justify-content: center;

1471

font-size: 9px; font-weight: 700; flex-shrink: 0;

1472

&.cd3-av-human { background: linear-gradient(135deg, #3b82f6, #8b5cf6); color: #fff; }

1473

&.cd3-av-agent { background: linear-gradient(135deg, #0ea5e9, #06b6d4); color: #fff; }

1474

&.cd3-av-unk { background: var(--surface-3); color: var(--text-muted); }

1475

}

1476

1477

.cd3-author { color: var(--color-accent-link); font-weight: 500; font-size: 12px; }

1478

.cd3-time { color: var(--text-muted); font-size: 12px; }

1479

.cd3-date { color: var(--text-muted); font-size: 11px; }

1480

.cd3-muted { color: var(--text-muted); }

1481

1482

.cd3-sha {

1483

font-family: var(--font-mono); font-size: 11px;

1484

color: var(--text-secondary);

1485

display: inline-flex; align-items: center; gap: 4px;

}

.cd3-copy-btn {

background: none; border: none; cursor: pointer; padding: 1px;

1490

color: var(--text-muted); opacity: .5; line-height: 1;

1491

&:hover { opacity: 1; }

}

.cd3-parent-chip {

font-family: var(--font-mono); font-size: 10px;

1496

color: var(--color-accent-link); background: var(--surface-3);

1497

padding: 1px 5px; border-radius: 3px; text-decoration: none;

1498

&:hover { text-decoration: underline; }

}

// ── Dimension strip ────────────────────────────────────────────────────────

1503

.cd3-dims {

1504

display: flex; flex-wrap: wrap; gap: var(--space-2);

}

.cd3-dim-card {

flex: 1; min-width: 90px;

1509

background: var(--surface-2); border: 1px solid var(--border-default);

1510

border-radius: var(--radius-md);

1511

padding: var(--space-3) var(--space-4);

1512

display: flex; flex-direction: column; gap: 2px;

}

.cd3-dim-num {

font-size: 22px; font-weight: 800;

1517

font-variant-numeric: tabular-nums;

1518

line-height: 1.1;

1519

letter-spacing: -.02em;

}

.cd3-dim-label {

font-size: 10px; color: var(--text-muted);

1524

text-transform: uppercase; letter-spacing: .06em;

white-space: nowrap;

}

.cd3-dim-add { border-top: 2px solid #22c55e; .cd3-dim-num { color: #4ade80; } }

1529

.cd3-dim-mod { border-top: 2px solid #f59e0b; .cd3-dim-num { color: #fbbf24; } }

1530

.cd3-dim-del { border-top: 2px solid #ef4444; .cd3-dim-num { color: #f87171; } }

1531

.cd3-dim-files{ border-top: 2px solid #8b5cf6; .cd3-dim-num { color: #c084fc; } }

1532

.cd3-dim-snap { border-top: 2px solid #475569; .cd3-dim-num { color: var(--text-secondary); } }

1533

.cd3-dim-dead { border-top: 2px solid #22c55e; .cd3-dim-num { color: #4ade80; } }

1534

.cd3-dim-clean{ border-top: 2px solid #22c55e; .cd3-dim-num { color: #4ade80; } }

1535

.cd3-dim-test { border-top: 2px solid #0ea5e9; .cd3-dim-num { color: #38bdf8; } }

1536

1537

// ── Sections ──────────────────────────────────────────────────────────────

1538

.cd3-section {

1539

background: var(--surface-2); border: 1px solid var(--border-default);

1540

border-radius: var(--radius-lg); overflow: hidden;

}

.cd3-section-hd {

display: flex; align-items: center; justify-content: space-between;

1545

padding: var(--space-3) var(--space-4);

1546

border-bottom: 1px solid var(--border-subtle);

1547

}

1548

1549

.cd3-section-title-row {

1550

display: flex; align-items: center; gap: var(--space-2);

}

.cd3-section-title {

font-size: 12px; font-weight: 600; color: var(--text-secondary);

1555

text-transform: uppercase; letter-spacing: .06em;

}

.cd3-section-pill {

font-size: 10px; color: var(--text-muted);

1560

background: var(--surface-3); padding: 1px 6px; border-radius: 10px;

1561

&.cd3-pill-count { color: var(--color-accent); border: 1px solid var(--color-accent)40; }

}

// Extension chip

.cd3-ext {

font-size: 9px; font-family: var(--font-mono);

1567

color: var(--text-muted); opacity: .7;

1568

background: var(--surface-3); padding: 1px 4px; border-radius: 3px;

1569

}

1570

1571

// ── File cards (semantic changes) ─────────────────────────────────────────

1572

.cd3-file-card {

1573

border-bottom: 1px solid var(--border-subtle);

1574

&:last-child { border-bottom: none; }

1575

1576

&.cd3-file-insert .cd3-file-hd { border-left: 3px solid #22c55e; }

1577

&.cd3-file-delete .cd3-file-hd { border-left: 3px solid #ef4444; }

1578

&.cd3-file-replace .cd3-file-hd,

1579

&.cd3-file-patch .cd3-file-hd { border-left: 3px solid #f59e0b; }

}

.cd3-file-hd {

display: flex; align-items: center; gap: var(--space-2);

1584

padding: var(--space-2) var(--space-4);

1585

background: var(--surface-3);

}

.cd3-file-path {

font-family: var(--font-mono); font-size: 12px;

1590

color: var(--color-accent-link); text-decoration: none; font-weight: 500;

1591

&:hover { text-decoration: underline; }

}

.cd3-file-summary {

font-size: 10px; color: var(--text-muted);

1596

margin-left: auto; text-align: right;

}

// Op indicator dot

.cd3-op-dot {

display: inline-flex; align-items: center; justify-content: center;

1602

width: 14px; height: 14px; border-radius: 3px; font-size: 10px; font-weight: 800;

1603

flex-shrink: 0; font-style: normal; line-height: 1;

1604

&.cd3-op-add { background: rgba(52,211,153,0.12); color: #34d399; }

1605

&.cd3-op-del { background: rgba(248,113,113,0.12); color: #f87171; }

1606

&.cd3-op-mod { background: rgba(251,191,36,0.12); color: #fbbf24; }

1607

&.cd3-op-unk { background: var(--surface-3); color: var(--text-muted); }

}

// Symbol tree

.cd3-sym-tree { padding: var(--space-1) 0; }

1612

1613

.cd3-sym-row {

1614

display: flex; align-items: center; gap: var(--space-2);

1615

padding: 4px var(--space-4);

1616

transition: background .1s;

1617

&:hover { background: var(--surface-3); }

}

.cd3-sym-top {

font-weight: 500;

}

.cd3-sym-child {

padding-left: var(--space-8);

}

.cd3-sym-indent {

color: var(--border-default); flex-shrink: 0;

1630

display: flex; align-items: center;

}

.cd3-sym-name {

font-family: var(--font-mono); font-size: 12px;

1635

color: var(--text-primary);

1636

&.cd3-sym-child-name { color: var(--text-secondary); }

}

.cd3-sym-desc {

font-size: 11px; color: var(--text-muted);

1641

margin-left: auto; text-align: right;

1642

white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

max-width: 280px;

}

// Kind chips

.cd3-kind {

font-size: 9px; font-family: var(--font-mono);

1649

padding: 1px 5px; border-radius: 3px; flex-shrink: 0;

1650

&.cd3-k-class { background: #7c3aed20; color: #c084fc; }

1651

&.cd3-k-method { background: #0369a120; color: #38bdf8; }

1652

&.cd3-k-func { background: #065f4620; color: #34d399; }

1653

&.cd3-k-var { background: #78350f20; color: #fbbf24; }

1654

&.cd3-k-import { background: #71717a20; color: #a1a1aa; }

1655

}

1656

1657

// ── Compact file list (snapshot diff) ────────────────────────────────────

1658

.cd3-file-list { padding: var(--space-1) 0; }

1659

1660

.cd3-fl-row {

1661

display: flex; align-items: center; gap: var(--space-2);

1662

padding: 4px var(--space-4);

1663

font-size: 12px;

1664

&:hover { background: var(--surface-3); }

}

.cd3-fl-dot {

font-weight: 800; font-size: 11px; width: 14px; text-align: center; flex-shrink: 0;

1669

}

1670

1671

.cd3-fl-add .cd3-fl-dot { color: #4ade80; }

1672

.cd3-fl-mod .cd3-fl-dot { color: #fbbf24; }

1673

.cd3-fl-del .cd3-fl-dot { color: #f87171; }

1674

1675

.cd3-fl-path {

1676

font-family: var(--font-mono); font-size: 11px;

1677

color: var(--color-accent-link); text-decoration: none;

1678

&:hover { text-decoration: underline; }

1679

}

1680

1681

.cd3-fl-gone { color: var(--text-muted); text-decoration: line-through; }

1682

1683

.cd3-tally { display: flex; gap: var(--space-2); font-size: 11px; font-weight: 600; font-family: var(--font-mono); }

1684

.cd3-tally-add { color: #4ade80; }

1685

.cd3-tally-mod { color: #fbbf24; }

1686

.cd3-tally-del { color: #f87171; }

1687

1688

// ── Audio preview ─────────────────────────────────────────────────────────

1689

.cd3-audio-wrap { padding: var(--space-3) var(--space-4); }

1690

.cd3-waveform { height: 60px; background: var(--surface-3); border-radius: var(--radius-md); margin-bottom: var(--space-2); display: flex; align-items: center; padding: 0 var(--space-3); }

1691

.cd3-audio-ctrl { display: flex; align-items: center; gap: var(--space-3); }

1692

.cd3-play-btn {

1693

width: 28px; height: 28px; border-radius: 50%;

1694

background: var(--color-accent); border: none; cursor: pointer;

1695

display: flex; align-items: center; justify-content: center; color: #fff;

1696

&:hover { opacity: .85; }

1697

}

1698

1699

// ── Navigation ─────────────────────────────────────────────────────────────

1700

// ── Navigation — slim inline ───────────────────────────────────────────────

1701

.cd3-nav {

1702

display: grid; grid-template-columns: 1fr auto 1fr;

1703

gap: var(--space-4); align-items: center;

1704

padding: var(--space-2) 0;

1705

border-top: 1px solid var(--border-subtle);

}

.cd3-nav-card {

text-decoration: none; display: flex; flex-direction: column; gap: 2px;

1710

padding: var(--space-2) 0;

1711

&.cd3-nav-older { text-align: left; }

1712

&.cd3-nav-newer { text-align: right; }

1713

&.cd3-nav-disabled { opacity: .3; pointer-events: none; }

}

.cd3-nav-dir {

display: flex; align-items: center; gap: 4px;

1718

font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em;

1719

.cd3-nav-newer & { justify-content: flex-end; }

}

.cd3-nav-msg {

font-size: 12px; color: var(--color-accent-link);

1724

white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

1725

.cd3-nav-card:hover & { text-decoration: underline; }

}

.cd3-nav-sha {

font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);

}

.cd3-nav-all {

text-align: center; font-size: 11px; color: var(--text-muted);

1734

text-decoration: none; white-space: nowrap;

1735

&:hover { color: var(--color-accent-link); }

}

// ── Sidebar ────────────────────────────────────────────────────────────────

1740

.cd3-sidebar { display: flex; flex-direction: column; gap: var(--space-3); }

1741

1742

.cd3-side-card {

1743

background: var(--surface-2); border: 1px solid var(--border-default);

1744

border-radius: var(--radius-lg); overflow: hidden;

padding: 0;

}

.cd3-side-hd {

display: flex; align-items: center; gap: var(--space-2);

1750

padding: var(--space-3) var(--space-4);

1751

border-bottom: 1px solid var(--border-subtle);

1752

color: var(--text-muted);

}

.cd3-side-title {

font-size: 11px; font-weight: 600;

1757

text-transform: uppercase; letter-spacing: .07em;

1758

color: var(--text-muted); margin: 0;

}

.cd3-prov-row {

display: flex; align-items: flex-start; gap: var(--space-3);

1763

padding: 6px var(--space-4);

1764

border-bottom: 1px solid var(--border-subtle);

1765

font-size: 11px;

1766

&:last-child { border-bottom: none; }

}

.cd3-prov-label {

color: var(--text-muted); min-width: 64px; flex-shrink: 0;

1771

font-size: 10px; text-transform: uppercase; letter-spacing: .05em;

padding-top: 1px;

}

.cd3-prov-val {

color: var(--text-primary); display: flex; align-items: center;

1777

flex-wrap: wrap; gap: 4px; word-break: break-word;

1778

}

1779

1780

.cd3-mono { font-family: var(--font-mono); }

1781

1782

.cd3-id-human, .cd3-id-agent {

1783

display: inline-flex; align-items: center; gap: 4px;

font-size: 11px;

}

.cd3-id-human { color: #93c5fd; }

1788

.cd3-id-agent { color: #67e8f9; }

1789

1790

.cd3-reviewer {

1791

font-family: var(--font-mono); font-size: 10px;

1792

background: var(--surface-3); padding: 1px 5px; border-radius: 3px;

1793

color: var(--text-secondary);

1794

}

1795

1796

// ══════════════════════════════════════════════════════════════════════════════

1797

1798

1799

// ── Responsive ────────────────────────────────────────────────────────────────

1800

1801

@media (max-width: 768px) {

1802

.cd-layout {

1803

grid-template-columns: 1fr;

}

.cd-sidebar {

display: none;

}

.cd2-layout {

grid-template-columns: 1fr;

}

.cd2-sidebar {

order: -1;

}

.cd3-layout {

grid-template-columns: 1fr;

}

.cd3-sidebar {

order: -1;

}

.graph-layout {

grid-template-columns: 1fr;

}

.graph-sidebar {

display: none;

}

.cd2-sym-graph-wrap {

1835

flex-direction: column;

1836

}

1837

1838

.cd-file-list-header {

display: none;

}

}

@media (max-width: 480px) {

.cd-commit-message {

font-size: 14px;

}

.cd2-header-card {

padding: var(--space-2) var(--space-3);

}

.cd3-commit-sha {

font-size: 11px;

}

.cd-changed-file-name {

1857

font-size: 12px;

1858

overflow: hidden;

1859

text-overflow: ellipsis;

white-space: nowrap;

max-width: 200px;

}

}

// ── Phase 1.4: Symbol Graph section + collapsible sections + provenance upgrade ──

.cd2-graph-section {

overflow: hidden;

padding-bottom: 0;

}

// Collapsible section — <details> with styled summary

1874

.cd3-section--collapsible {

1875

padding: 0;

1876

> summary {

1877

padding: var(--space-3) var(--space-4);

1878

cursor: pointer;

1879

list-style: none;

1880

&::-webkit-details-marker { display: none; }

1881

&:hover { background: rgba(255,255,255,.02); }

1882

}

1883

&[open] .cd3-chevron { transform: rotate(180deg); }

1884

.cd3-chevron { transition: transform 0.2s; color: var(--text-muted); flex-shrink: 0; }

1885

.cd3-sym-tree, .cd3-file-list, .cd3-file-card { margin: 0 var(--space-4) var(--space-3); }

1886

.cd3-file-card:last-child { margin-bottom: var(--space-4); }

1887

}

1888

1889

.cd3-section-summary {

1890

display: flex;

1891

align-items: center;

1892

justify-content: space-between;

gap: var(--space-3);

user-select: none;

}

.cd3-sym-link {

color: var(--color-accent-link);

1899

text-decoration: none;

1900

&:hover { text-decoration: underline; color: #79c0ff; }

1901

}

1902

1903

// Provenance card — singularity edition

.cd3-prov-card {

position: relative;

overflow: hidden;

}

.cd3-prov-agent {

border-color: rgba(167, 139, 250, 0.25);

&::before {

content: '';

position: absolute;

inset: 0;

background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(167,139,250,0.06) 0%, transparent 70%);

1916

pointer-events: none;

}

}

.cd3-prov-glow {

position: absolute;

top: -20px; left: 50%;

1923

transform: translateX(-50%);

1924

width: 120px; height: 40px;

1925

background: radial-gradient(ellipse, rgba(167,139,250,0.18) 0%, transparent 70%);

1926

pointer-events: none;

1927

}

1928

1929

.cd3-prov-sig-badge {

1930

display: inline-flex; align-items: center; gap: 3px;

1931

font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;

1932

color: var(--color-success); background: rgba(63,185,80,0.1);

1933

border: 1px solid rgba(63,185,80,0.25); border-radius: 3px;

1934

padding: 1px 5px; margin-left: auto; flex-shrink: 0;

}

.cd3-prov-identity {

padding: var(--space-2) var(--space-4) var(--space-3);

1939

border-bottom: 1px solid var(--border-subtle);

1940

display: flex; flex-direction: column; gap: 6px;

1941

}

1942

1943

.cd3-prov-agent-chip {

1944

display: inline-flex; align-items: center; gap: 6px;

1945

font-size: 12px; font-weight: 600;

1946

color: var(--agent-accent);

1947

svg { color: var(--agent-accent); }

1948

}

1949

1950

.cd3-prov-human-chip {

1951

display: inline-flex; align-items: center; gap: 6px;

1952

font-size: 12px; font-weight: 600;

1953

color: var(--color-accent-link);

1954

svg { color: var(--color-accent-link); }

1955

}

1956

1957

.cd3-prov-model-pill {

1958

display: inline-flex; align-items: center;

1959

font-family: var(--font-mono); font-size: 10px; font-weight: 500;

1960

color: var(--agent-accent); background: var(--agent-accent-bg);

1961

border: 1px solid rgba(167,139,250,0.3); border-radius: 4px;

1962

padding: 2px 8px; width: fit-content;

}

.cd3-prov-truncate {

font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px;

}

.cd3-prov-green {

display: inline-flex; align-items: center; gap: 4px;

1971

color: var(--color-success);

1972

}

1973

1974

.cd3-prov-label--danger { color: var(--color-danger) !important; }

1975

1976

.cd3-prov-row--breaking {

1977

background: rgba(248, 81, 73, 0.04);

1978

border-top: 1px solid rgba(248, 81, 73, 0.15);

1979

}

1980

1981

.cd3-prov-break-item {

1982

color: var(--color-danger); font-size: 10px; font-family: var(--font-mono);

1983

}