src/scss/_arrange.scss · gabriel/musehub

1

// _arrange.scss — Arrange page (.ar-* prefix)

2

3

/*

4

* MuseHub Page-Specific Styles

5

*

6

* Contains CSS that is unique to a single page and not reusable as a component.

7

* Shared/duplicated patterns live in _components.scss and _music.scss.

8

*

9

* Sections (alphabetical by page):

10

* activity, arrange, blame, blob, collaborators_settings, commit, commit_detail,

11

* commits, explore, forks, global_search, groove_check, insights, issue_detail,

12

* issue_list, labels, listen, motifs,

13

* new_repo, piano_roll, proposal_detail, proposal_list, release_detail, releases,

14

* repo_home, score, search, session_detail, sessions, settings, stash,

15

* timeline, tree, trending, user_profile

16

*/

17

18

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

19

Arrange page (.ar-* prefix)

20

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

21

22

/* ── Commit header ─────────────────────────────────────────────────────── */

23

.ar-commit-header {

24

background: var(--bg-surface);

25

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

26

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

27

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

28

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

29

display: grid;

30

grid-template-columns: 1fr auto;

31

gap: var(--space-3);

32

align-items: center;

33

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

}

.ar-commit-left {

min-width: 0;

}

.ar-commit-message {

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

40

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

41

color: var(--text-primary);

42

overflow: hidden;

43

text-overflow: ellipsis;

44

white-space: nowrap;

45

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

}

.ar-commit-meta {

display: flex;

align-items: center;

gap: var(--space-3);

flex-wrap: wrap;

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

53

color: var(--text-muted);

54

}

55

.ar-branch-pill {

56

display: inline-flex;

align-items: center;

gap: 4px;

padding: 2px 9px;

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

61

border: 1px solid rgba(88,166,255,0.3);

62

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

63

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

64

font-size: 0.7rem;

65

color: var(--color-accent);

66

}

67

.ar-sha {

68

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

69

font-size: 0.7rem;

70

padding: 2px 6px;

71

background: var(--bg-overlay);

72

border-radius: 4px;

73

color: var(--text-muted);

}

.ar-commit-nav {

display: flex;

align-items: center;

gap: var(--space-2);

flex-shrink: 0;

}

.ar-nav-btn {

display: inline-flex;

align-items: center;

gap: var(--space-1);

padding: 4px 10px;

background: var(--bg-overlay);

87

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

88

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

89

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

90

color: var(--text-secondary);

91

text-decoration: none;

92

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

93

&:hover {

94

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

95

color: var(--color-accent);

96

}

97

&.ar-nav-btn--disabled {

98

opacity: 0.4;

99

pointer-events: none;

}

}

/* ── Render status badge ───────────────────────────────────────────────── */

104

.ar-render-status {

105

display: inline-flex;

align-items: center;

gap: 4px;

font-size: 0.7rem;

padding: 2px 8px;

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

111

font-weight: 600;

112

&.ar-rs-complete { background: rgba(63,185,80,0.12); color: var(--color-success); border: 1px solid var(--color-success); }

113

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

114

&.ar-rs-rendering { background: rgba(88,166,255,0.12); color: var(--color-accent); border: 1px solid var(--color-accent); }

115

&.ar-rs-failed { background: rgba(248,81,73,0.12); color: var(--color-danger); border: 1px solid var(--color-danger); }

116

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

117

}

118

119

/* ── Stats ribbon ──────────────────────────────────────────────────────── */

.ar-stats-bar {

display: flex;

gap: var(--space-3);

flex-wrap: wrap;

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

125

}

126

.ar-stat-pill {

127

background: var(--bg-surface);

128

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

129

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

130

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

131

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

132

color: var(--text-muted);

133

white-space: nowrap;

134

strong { color: var(--text-primary); font-family: var(--font-mono); }

135

}

136

137

/* ── Section timeline bar ──────────────────────────────────────────────── */

.ar-timeline {

display: flex;

height: 40px;

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

142

overflow: hidden;

143

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

144

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

}

.ar-timeline-seg {

display: flex;

flex-direction: column;

149

align-items: center;

150

justify-content: center;

151

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

152

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

153

cursor: default;

154

transition: background 0.12s;

155

overflow: hidden;

156

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

157

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

158

&[data-active="high"] { background: rgba(88,166,255,0.15); }

159

&[data-active="medium"] { background: rgba(88,166,255,0.08); }

160

&[data-active="low"] { background: rgba(88,166,255,0.03); }

}

.ar-timeline-label {

font-size: 0.65rem;

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

165

color: var(--text-secondary);

166

text-transform: uppercase;

167

letter-spacing: 0.04em;

168

white-space: nowrap;

169

overflow: hidden;

170

text-overflow: ellipsis;

max-width: 100%;

}

.ar-timeline-beats {

font-size: 0.6rem;

color: var(--text-muted);

176

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

margin-top: 1px;

}

/* ── Matrix section ────────────────────────────────────────────────────── */

181

.ar-matrix-wrap {

182

overflow-x: auto;

183

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

184

}

185

.ar-table {

186

border-collapse: collapse;

font-size: 12px;

min-width: 100%;

table-layout: auto;

}

.ar-table th {

background: var(--bg-overlay);

193

color: var(--text-muted);

194

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

195

padding: 8px 12px;

196

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

197

text-align: center;

198

white-space: nowrap;

199

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

200

}

201

.ar-table th.ar-th-inst {

text-align: left;

min-width: 120px;

}

.ar-table td {

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

207

padding: 2px;

208

text-align: center;

209

vertical-align: middle;

210

}

211

/* Row highlight on hover (set by JS adding .ar-row-hover to <tr>) */

212

.ar-row-hover td { background-color: rgba(88, 166, 255, 0.04); }

213

/* Column highlight (set by JS adding .ar-col-hover to th/td with data-col) */

214

.ar-table .ar-col-hover { background-color: rgba(88, 166, 255, 0.06); }

215

216

/* ── Cells ─────────────────────────────────────────────────────────────── */

.ar-cell {

width: 80px;

height: 56px;

display: flex;

flex-direction: column;

222

align-items: center;

223

justify-content: center;

224

border-radius: 4px;

225

cursor: pointer;

226

transition: transform 0.1s, box-shadow 0.1s;

227

position: relative;

228

font-size: 10px;

229

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

230

gap: 2px;

231

232

/* density levels — background fills from the accent colour */

233

&[data-level="0"] { background: var(--bg-base); cursor: default; }

234

&[data-level="1"] { background: rgba(88,166,255,0.15); color: rgba(255,255,255,0.7); }

235

&[data-level="2"] { background: rgba(88,166,255,0.35); color: rgba(255,255,255,0.85); }

236

&[data-level="3"] { background: rgba(88,166,255,0.60); color: #fff; }

237

&[data-level="4"] { background: rgba(88,166,255,0.88); color: #fff; }

238

239

&:not([data-level="0"]):hover {

240

transform: scale(1.06);

241

box-shadow: 0 0 0 2px var(--color-accent);

z-index: 10;

}

}

.ar-cell-notes {

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

font-size: 10px;

line-height: 1;

opacity: 0.9;

}

.ar-cell-bar {

width: 70%;

height: 3px;

border-radius: 2px;

background: rgba(255,255,255,0.5);

position: relative;

overflow: hidden;

}

.ar-cell-bar-fill {

height: 100%;

background: rgba(255,255,255,0.9);

262

border-radius: 2px;

263

}

264

.ar-cell-silent-dash {

265

color: var(--border-default);

font-size: 14px;

}

/* ── Summary cells ─────────────────────────────────────────────────────── */

270

.ar-summary-row td,

271

.ar-summary-col td {

272

background: var(--bg-surface);

273

padding: 6px 10px;

274

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

275

color: var(--text-muted);

}

.ar-density-bar {

height: 4px;

border-radius: 2px;

background: var(--color-accent);

margin-top: 3px;

opacity: 0.7;

}

/* ── Legend ────────────────────────────────────────────────────────────── */

.ar-legend {

display: flex;

align-items: center;

gap: var(--space-3);

flex-wrap: wrap;

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

292

color: var(--text-muted);

293

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

294

}

295

.ar-legend-label { opacity: 0.7; }

.ar-legend-swatch {

width: 16px;

height: 16px;

border-radius: 3px;

display: inline-block;

301

vertical-align: middle;

302

&.ar-sw-0 { background: var(--bg-overlay); border: 1px solid var(--border-default); }

303

&.ar-sw-1 { background: rgba(88,166,255,0.15); }

304

&.ar-sw-2 { background: rgba(88,166,255,0.35); }

305

&.ar-sw-3 { background: rgba(88,166,255,0.60); }

306

&.ar-sw-4 { background: rgba(88,166,255,0.88); }

307

}

308

309

/* ── Bottom stats panels ───────────────────────────────────────────────── */

310

.ar-panels-row {

311

display: grid;

312

grid-template-columns: 1fr 1fr;

313

gap: var(--space-4);

314

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

315

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

316

}

317

.ar-panel {

318

background: var(--bg-surface);

319

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

320

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

overflow: hidden;

}

.ar-panel-header {

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

325

background: var(--bg-overlay);

326

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

327

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

328

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

329

color: var(--text-secondary);

display: flex;

align-items: center;

gap: var(--space-2);

}

.ar-panel-body {

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

}

.ar-panel-row {

display: grid;

grid-template-columns: 100px 1fr 48px;

340

align-items: center;

341

gap: var(--space-3);

342

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

343

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

344

}

345

.ar-panel-label {

346

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

347

color: var(--text-secondary);

348

overflow: hidden;

349

text-overflow: ellipsis;

350

white-space: nowrap;

351

}

352

.ar-panel-bar-track {

353

background: var(--bg-overlay);

354

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

height: 7px;

overflow: hidden;

}

.ar-panel-bar-fill {

height: 100%;

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

361

background: linear-gradient(90deg, rgba(88,166,255,0.5), var(--color-accent));

362

}

363

.ar-panel-value {

364

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

365

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

366

color: var(--text-muted);

text-align: right;

}

/* ── Floating tooltip (positioned by JS) ──────────────────────────────── */

371

.ar-tooltip {

372

position: fixed;

373

background: var(--bg-surface);

374

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

375

border-radius: 8px;

376

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

377

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

378

color: var(--text-secondary);

379

white-space: nowrap;

380

z-index: 9999;

381

pointer-events: none;

382

box-shadow: 0 8px 24px rgba(0,0,0,0.4);

383

line-height: 1.6;

384

opacity: 0;

385

transition: opacity 0.12s;

386

min-width: 160px;

387

&.ar-tooltip--visible { opacity: 1; }

388

}

389

.ar-tooltip-title {

390

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

391

color: var(--text-primary);

margin-bottom: 4px;

}

.ar-tooltip-row {

display: flex;

justify-content: space-between;

397

gap: var(--space-4);

398

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

399

font-size: 0.68rem;

400

}

401

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

402

.ar-tooltip-val { color: var(--color-accent); font-weight: 600; }

// ── Responsive ────────────────────────────────────────────────────────────────

407

408

@media (max-width: 768px) {

409

.ar-layout {

410

grid-template-columns: 1fr;

}

.ar-sidebar {

display: none;

}

.ar-track-header {

min-width: unset;

width: 100%;

}

.ar-controls {

flex-direction: column;

gap: var(--space-2);

}

.ar-toolbar {

flex-wrap: wrap;

gap: var(--space-1);

}

.ar-timeline {

overflow-x: auto;

-webkit-overflow-scrolling: touch;

}

}

@media (max-width: 480px) {

.ar-track-label {

font-size: 11px;

max-width: 80px;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

.ar-btn {

padding: 2px 6px;

font-size: 11px;

}

.ar-time-display {

font-size: 12px;

}

}