src/scss/_components.scss · gabriel/musehub

1

/*

2

* MuseHub — Base reset, typography, and unmigrated component patterns.

3

*

4

* Buttons, badges, pills, chips, cards, inputs, canvas, avatars, code,

5

* timeline, nav, toasts, spectral, surfaces, and agents now live in

6

* src/scss/components/ and src/scss/patterns/.

7

*

8

* This file keeps: base reset, body, headings, links, artifact-card,

9

* repo-card, table, grids, heatmap, stat-card, comment thread, reactions,

10

* analysis-grid, stat-cell, diff-stat, and misc utilities.

11

*/

12

13

/* ── Base reset ─────────────────────────────────────────────────────────── */

*,

*::before,

*::after {

box-sizing: border-box;

margin: 0;

padding: 0;

}

html {

-webkit-text-size-adjust: 100%;

}

body {

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

28

font-size: var(--text-base);

29

line-height: var(--line-height-normal);

30

background-color: var(--bg-base);

31

color: var(--text-secondary);

min-height: 100vh;

}

/* ── Links ──────────────────────────────────────────────────────────────── */

36

a {

37

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

38

text-decoration: none;

39

}

40

41

a:hover { text-decoration: none; }

42

43

/* ── Headings ───────────────────────────────────────────────────────────── */

44

h1 {

45

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

46

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

47

letter-spacing: -0.03em;

48

line-height: 1.15;

49

color: var(--text-primary);

50

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

}

h2 {

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

55

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

56

letter-spacing: -0.02em;

57

line-height: 1.25;

58

color: var(--text-primary);

59

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

}

h3 {

font-size: var(--text-lg);

64

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

65

letter-spacing: -0.01em;

66

line-height: 1.3;

67

color: var(--text-primary);

68

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

}

h4 {

font-size: var(--text-md);

73

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

74

line-height: 1.4;

75

color: var(--text-primary);

76

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

}

h5 {

font-size: var(--text-base);

81

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

82

line-height: 1.4;

83

color: var(--text-primary);

84

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

}

h6 {

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

89

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

90

line-height: 1.4;

91

color: var(--text-secondary);

92

text-transform: uppercase;

93

letter-spacing: 0.06em;

94

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

95

}

96

97

/* ── Body copy ──────────────────────────────────────────────────────────── */

98

p {

99

font-size: var(--text-base);

100

line-height: var(--line-height-relaxed);

101

color: var(--text-secondary);

102

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

103

104

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

105

}

106

107

strong, b { font-weight: var(--weight-semibold); color: var(--text-primary); }

108

em, i { font-style: italic; }

109

small { font-size: var(--text-xs); color: var(--text-muted); }

110

111

blockquote {

112

border-left: 3px solid var(--border-strong);

113

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

114

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

115

color: var(--text-muted);

116

font-style: italic;

117

background: var(--bg-surface);

118

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

}

hr {

border: none;

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

124

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

125

}

126

127

/* ── Lists ──────────────────────────────────────────────────────────────── */

128

ul, ol {

129

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

130

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

131

color: var(--text-secondary);

132

133

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

}

li {

font-size: var(--text-base);

138

line-height: var(--line-height-relaxed);

139

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

140

141

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

142

}

143

144

ul { list-style-type: disc; }

145

ol { list-style-type: decimal; }

146

147

/* ── Tables ─────────────────────────────────────────────────────────────── */

148

table {

149

width: 100%;

150

border-collapse: collapse;

151

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

152

color: var(--text-secondary);

}

thead tr {

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

}

th {

text-align: left;

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

162

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

163

color: var(--text-muted);

164

text-transform: uppercase;

165

letter-spacing: 0.06em;

166

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

}

td {

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

171

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

172

vertical-align: middle;

173

}

174

175

tbody tr:last-child td { border-bottom: none; }

176

tbody tr:hover td { background: var(--bg-overlay); }

177

178

/* ── Details / Summary ──────────────────────────────────────────────────── */

179

details {

180

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

181

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

182

padding: var(--space-3);

}

summary {

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

187

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

188

color: var(--text-secondary);

cursor: pointer;

list-style: none;

&::-webkit-details-marker { display: none; }

193

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

194

}

195

196

/* ── Utilities ──────────────────────────────────────────────────────────── */

197

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

198

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

199

200

// Meta row — inline icon + label items in a horizontal strip

201

.meta-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }

202

.meta-item { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-sm); color: var(--text-muted); }

203

204

// Identity sigil (square avatar SVG)

205

.sigil-wrap { flex-shrink: 0; align-self: flex-start; margin-top: 4px; }

206

.sigil { display: block; border-radius: 14px; transition: box-shadow 0.2s; }

207

.sigil--sm { border-radius: 10px; }

208

209

// Light mode: the sigil stays dark in all modes — the glow-in-void aesthetic

210

// is its identity. On a light page we make the dark card feel intentional:

211

// a spectral border ring frames it, a lift shadow gives it depth, and a wide

212

// spectral aura ties it to the page's color language.

@mixin sigil-light {

.sigil {

box-shadow:

0 0 0 1.5px rgba(139, 92, 246, 0.35), // spectral border ring

217

0 6px 28px rgba(0, 0, 0, 0.28), // lift / depth

218

0 0 56px rgba(99, 102, 241, 0.18); // outer spectral aura

}

}

[data-theme="light"] { @include sigil-light; }

223

@media (prefers-color-scheme: light) { @include sigil-light; }

// Avatar circle

.avatar {

display: inline-flex;

228

align-items: center;

229

justify-content: center;

230

border-radius: 50%;

231

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

232

text-transform: uppercase;

233

flex-shrink: 0;

234

background: var(--bg-overlay);

235

color: var(--text-primary);

236

237

&--xs { width: 24px; height: 24px; font-size: 10px; }

238

&--sm { width: 32px; height: 32px; font-size: 12px; }

239

&--md { width: 40px; height: 40px; font-size: 16px; }

240

}

241

242

/* ── Artifact card ──────────────────────────────────────────────────────── */

243

.artifact-card {

244

background: var(--bg-overlay);

245

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

246

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

247

padding: 10px;

248

display: flex;

249

flex-direction: column;

250

gap: var(--space-2);

251

252

img { width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--border-default); }

253

audio { width: 100%; }

254

255

.path {

256

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

257

color: var(--text-muted);

258

word-break: break-all;

}

}

.artifact-grid {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

265

gap: var(--space-3);

266

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

267

}

268

269

/* ── Repo grid + repo card ──────────────────────────────────────────────── */

270

.repo-grid {

271

display: grid;

272

grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

gap: 12px;

}

.repo-card {

position: relative;

background: transparent;

279

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

280

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

281

padding: var(--space-3);

282

cursor: pointer;

283

transition: border-color var(--transition-fast), background var(--transition-fast);

284

text-decoration: none;

285

display: flex;

286

flex-direction: column;

gap: var(--space-2);

color: inherit;

&:hover {

border-color: var(--border-default);

292

background: color-mix(in srgb, var(--text-primary) 2%, transparent);

293

text-decoration: none;

color: inherit;

}

}

.repo-card__header { display: flex; align-items: center; justify-content: space-between; }

299

300

.repo-card__name {

301

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

302

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

303

color: var(--text-primary);

304

letter-spacing: -0.01em;

305

}

306

307

.repo-card__sep { color: var(--text-muted); font-weight: var(--weight-normal); margin: 0 1px; }

308

309

.repo-card__desc {

310

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

311

color: var(--text-muted);

312

line-height: var(--line-height-relaxed);

313

margin: 0;

314

display: -webkit-box;

315

-webkit-line-clamp: 2;

316

-webkit-box-orient: vertical;

overflow: hidden;

}

.repo-card__pills { display: flex; gap: 5px; flex-wrap: wrap; margin-top: var(--space-1); }

321

322

.repo-meta-pill {

323

display: inline-flex;

324

align-items: center;

325

gap: 3px;

326

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

327

font-size: 11px;

328

padding: 2px 8px;

329

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

330

background: var(--bg-overlay);

331

color: var(--text-muted);

332

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

}

.tag-pill {

display: inline-block;

337

font-size: 11px;

338

padding: 1px 7px;

339

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

340

background: var(--bg-overlay);

341

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

342

color: var(--text-muted);

343

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

344

345

&--more { opacity: 0.6; }

}

.repo-card__footer {

display: flex;

align-items: center;

gap: var(--space-4);

margin-top: auto;

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

354

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

}

.repo-card__stat {

display: inline-flex;

359

align-items: center;

360

gap: 4px;

361

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

362

color: var(--text-muted);

363

364

svg { opacity: 0.7; }

365

}

366

367

/* ── Table ──────────────────────────────────────────────────────────────── */

368

.table {

369

width: 100%;

370

border-collapse: collapse;

371

font-size: var(--text-base);

}

.table th {

text-align: left;

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

377

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

378

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

379

color: var(--text-muted);

380

text-transform: uppercase;

381

letter-spacing: 0.5px;

382

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

}

.table td {

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

387

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

388

color: var(--text-secondary);

vertical-align: top;

}

.table tr:last-child td { border-bottom: none; }

393

.table tr:hover td { background: var(--bg-overlay); }

394

395

/* ── Grids ──────────────────────────────────────────────────────────────── */

396

.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }

397

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

398

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

399

400

/* ── Metadata rows ──────────────────────────────────────────────────────── */

401

.meta-row { display: flex; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-3); }

402

.meta-item { display: flex; flex-direction: column; gap: var(--space-1); }

403

.meta-label {

404

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

405

color: var(--text-muted);

406

text-transform: uppercase;

407

letter-spacing: 0.5px;

408

}

409

.meta-value { font-size: var(--text-base); color: var(--text-primary); }

410

411

/* ── Heatmap (legacy — use .prof-canvas for activity canvas) ────────────── */

412

.heatmap-grid { display: flex; gap: 3px; overflow-x: auto; }

413

.heatmap-week { display: flex; flex-direction: column; gap: 3px; }

414

.heatmap-day { width: 12px; height: 12px; border-radius: 2px; background: var(--bg-overlay); }

415

416

.heatmap-day[data-count="0"] { background: var(--bg-overlay); }

417

.heatmap-day[data-count="1"] { background: var(--dim-rhythmic-muted); }

418

.heatmap-day[data-count="2"] { background: var(--dim-rhythmic); opacity: 0.6; }

419

.heatmap-day[data-count="3"] { background: var(--dim-rhythmic); }

420

.heatmap-day[data-count="4"] { background: var(--color-success); }

421

422

/* ── Insights grid / stat card ──────────────────────────────────────────── */

423

.insights-grid {

424

display: grid;

425

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

426

gap: var(--space-4);

427

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

}

.stat-card {

background: var(--bg-surface);

432

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

433

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

434

padding: var(--space-4);

text-align: center;

.stat-value {

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

439

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

440

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

441

color: var(--color-accent);

display: block;

line-height: 1.1;

}

.stat-label {

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

448

color: var(--text-muted);

449

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

}

}

/* ── Stat cell (Muse protocol strip) ────────────────────────────────────── */

454

.stat-cell-muse {

455

display: flex;

456

flex-direction: column;

457

align-items: center;

458

justify-content: center;

459

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

460

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

461

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

462

text-align: center;

463

background: var(--bg-surface);

}

.stat-num-muse {

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

468

font-size: 26px;

469

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

470

color: var(--color-accent);

line-height: 1.1;

display: block;

}

.stat-lbl-muse {

font-size: 11px;

color: var(--text-muted);

478

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

line-height: 1.3;

}

/* ── Comment thread ─────────────────────────────────────────────────────── */

483

.comment-thread {

484

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

485

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

486

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

487

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

488

489

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

490

}

491

492

.comment-row { display: flex; gap: var(--space-3); align-items: flex-start; }

493

.comment-reply-row { margin-top: var(--space-3); }

494

495

.comment-body-col { flex: 1; min-width: 0; }

496

497

.comment-meta { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-1); }

498

.comment-author { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary); }

499

.comment-ts { font-size: var(--text-xs); color: var(--text-muted); }

500

.comment-date { font-size: var(--text-xs); color: var(--text-muted); margin-left: auto; }

.comment-text,

.comment-body {

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

505

color: var(--text-secondary);

506

white-space: pre-wrap;

507

word-break: break-word;

line-height: 1.6;

margin-bottom: 6px;

}

.comment-actions { display: flex; gap: var(--space-1); margin-top: var(--space-1); }

513

.comment-delete-btn { color: var(--color-danger); }

514

515

.comment-replies {

516

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

517

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

518

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

519

display: flex;

520

flex-direction: column;

gap: var(--space-3);

}

.comment-replies .comment-reply { margin-bottom: 0; }

525

526

.reply-form { margin-top: var(--space-2); }

527

.comment-textarea { width: 100%; font-family: var(--font-sans); font-size: var(--text-sm); }

528

.comment-form-actions { display: flex; gap: var(--space-2); margin-top: var(--space-1); }

529

530

/* ── Reactions ──────────────────────────────────────────────────────────── */

.reaction-bar {

display: flex;

flex-wrap: wrap;

gap: 6px;

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

}

.reaction-btn {

display: inline-flex;

align-items: center;

gap: 4px;

padding: 4px 10px;

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

544

border-radius: 20px;

545

background: var(--bg-overlay);

546

color: var(--text-primary);

547

font-size: 16px;

548

cursor: pointer;

549

transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);

line-height: 1;

user-select: none;

&:hover {

background: var(--bg-hover);

555

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

556

transform: scale(1.08);

}

&.active,

&--active {

background: color-mix(in srgb, var(--color-accent) 15%, transparent);

562

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

}

}

.reaction-count {

font-size: 12px;

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

569

color: var(--text-secondary);

min-width: 12px;

}

.reaction-btn--active .reaction-count { color: var(--color-accent); }

574

575

/* ── Follow button ──────────────────────────────────────────────────────── */

576

.follow-btn {

577

background: var(--bg-overlay);

578

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

579

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

580

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

581

cursor: pointer;

582

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

583

color: var(--text-secondary);

584

transition: background var(--transition-fast), border-color var(--transition-fast);

585

586

&.following {

587

background: var(--color-success-bg);

588

border-color: var(--color-success-bg);

color: #fff;

}

}

/* ── Analysis grid ──────────────────────────────────────────────────────── */

594

.analysis-grid {

595

display: grid;

596

grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

gap: 14px;

margin-top: 4px;

}

.analysis-card {

background: var(--bg-surface);

603

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

604

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

605

padding: var(--space-4);

606

display: flex;

607

flex-direction: column;

608

gap: 6px;

609

transition: border-color var(--transition-fast), background var(--transition-fast);

610

color: inherit;

611

text-decoration: none;

612

613

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

614

}

615

616

.card-emoji { font-size: 22px; }

617

.card-dim { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; }

618

.card-metric { font-size: 18px; font-weight: var(--weight-bold); color: var(--text-primary); word-break: break-word; }

619

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

620

.card-spark { font-size: 14px; color: var(--color-success); letter-spacing: 1px; margin-top: 2px; }

621

622

/* ── Waveform placeholder ───────────────────────────────────────────────── */

623

.waveform-bar {

624

display: flex;

625

align-items: flex-end;

gap: 2px;

height: 48px;

overflow: hidden;

.wave-col {

flex: 1;

background: var(--color-accent);

633

opacity: 0.6;

634

border-radius: 2px 2px 0 0;

635

min-height: 4px;

636

transition: height 0.1s;

}

}

/* ── Diff stats ─────────────────────────────────────────────────────────── */

641

.diff-stat { display: flex; gap: var(--space-3); font-size: 13px; flex-wrap: wrap; }

642

.diff-stat-additions { color: var(--color-success); font-weight: var(--weight-semibold); }

643

.diff-stat-deletions { color: var(--color-danger); font-weight: var(--weight-semibold); }

644

.diff-stat-files { color: var(--text-muted); }

645

646

/* ── Issue preview ──────────────────────────────────────────────────────── */

647

.issue-preview {

648

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

649

color: var(--text-muted);

margin-top: 2px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

654

}

655

656

/* ── Label / pill utilities ─────────────────────────────────────────────── */

657

.label {

658

display: inline-block;

659

padding: 1px var(--space-2);

660

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

661

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

662

background: var(--bg-hover);

663

color: var(--text-secondary);

margin: 2px;

}

.label-pill { transition: opacity var(--transition-fast), outline var(--transition-fast); }

668

.label-pill:hover { opacity: 0.8; outline: 1px solid var(--color-accent); }

669

.label-active {

670

outline: 2px solid var(--color-accent);

671

background: color-mix(in srgb, var(--color-accent) 15%, var(--bg-hover));

672

color: var(--color-accent);

673

}

674

675

/* ── HTMX indicator ─────────────────────────────────────────────────────── */

676

.htmx-indicator { opacity: 0; transition: opacity 0.2s ease; }

677

.htmx-request .htmx-indicator,

678

.htmx-request.htmx-indicator { opacity: 1; }

679

680

/* ── Session notes preview ──────────────────────────────────────────────── */

681

.session-notes-preview {

682

font-size: 12px;

683

color: var(--text-muted);

margin-top: 3px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

max-width: 600px;

font-style: italic;

}

.session-row-participants { margin-top: 6px; }