src/scss/components/_repo_cards.scss · gabriel/musehub

1

// ── Enriched repo cards — domain detail grid ─────────────────────────────────

2

//

3

// .rc-card full enriched repo card wrapper

4

// .rc-card__* internal layout sections

5

// .rc-sparkline inline SVG pulse sparkline

6

// .rc-stat single intel stat pill

7

// .rc-health health badge (clean / warn / risk)

.rc-grid {

display: grid;

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

gap: var(--space-4);

}

.rc-card {

display: flex;

flex-direction: column;

18

gap: var(--space-3);

19

padding: var(--space-4);

20

background: var(--surface-1);

21

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

22

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

23

text-decoration: none;

24

color: inherit;

25

transition: border-color 120ms, box-shadow 120ms;

26

27

&:hover {

28

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

29

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

}

}

// ── Header row: name + health badge ──────────────────────────────────────────

.rc-card__header {

display: flex;

align-items: center;

justify-content: space-between;

gap: var(--space-2);

min-width: 0;

}

.rc-card__name {

font-size: 13px;

font-weight: 500;

color: var(--text-primary);

line-height: 1.3;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

min-width: 0;

}

.rc-card__desc {

font-size: 12px;

color: var(--text-secondary);

57

line-height: 1.5;

58

margin: 0;

59

display: -webkit-box;

60

-webkit-line-clamp: 1;

61

-webkit-box-orient: vertical;

overflow: hidden;

}

// ── Health gauge — mini donut (reuses intel-health-fill--* colour classes) ────

.rc-gauge {

flex-shrink: 0;

width: 32px;

height: 32px;

overflow: visible;

// Thinner stroke than the full-size intel gauge

74

.intel-health-track { stroke-width: 10; }

75

.intel-health-fill { stroke-width: 10; }

76

}

77

78

// ── Pulse: label + sparkline ──────────────────────────────────────────────────

.rc-pulse {

display: flex;

flex-direction: column;

gap: 4px;

}

.rc-pulse__label {

font-size: 10px;

font-weight: 600;

letter-spacing: 0.05em;

90

text-transform: uppercase;

91

color: var(--text-tertiary, var(--text-secondary));

}

.rc-sparkline {

display: block;

width: 100%;

height: 28px;

overflow: visible;

}

// ── Autonomy bar ──────────────────────────────────────────────────────────────

.rc-autonomy {

display: flex;

flex-direction: column;

gap: 5px;

}

.rc-autonomy__header {

110

display: flex;

111

align-items: center;

112

justify-content: space-between;

113

}

114

115

.rc-autonomy__label {

116

font-size: 10px;

117

font-weight: 600;

118

letter-spacing: 0.05em;

119

text-transform: uppercase;

120

color: var(--text-tertiary, var(--text-secondary));

display: flex;

align-items: center;

gap: 4px;

}

.rc-autonomy__pct {

font-size: 11px;

font-weight: 600;

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

130

color: var(--text-primary);

131

}

132

133

.rc-autonomy__track {

134

width: 100%;

135

height: 4px;

136

background: var(--surface-2, var(--bg-overlay));

137

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

overflow: hidden;

}

.rc-autonomy__fill {

height: 100%;

background: var(--color-accent);

144

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

145

transition: width 300ms ease;

min-width: 0;

}

// ── Autonomy icon ─────────────────────────────────────────────────────────────

.rc-autonomy__icon {

display: flex;

align-items: center;

color: var(--color-accent);

155

}

156

157

// ── Symbol intel rows ─────────────────────────────────────────────────────────

.rc-intel {

display: flex;

flex-direction: column;

162

gap: 3px;

163

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

164

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

}

.rc-intel__row {

display: flex;

align-items: baseline;

gap: var(--space-2);

font-size: 11px;

}

.rc-intel__label {

flex-shrink: 0;

color: var(--text-tertiary, var(--text-secondary));

white-space: nowrap;

display: flex;

align-items: center;

gap: 3px;

// fixed width so val column aligns across rows

width: 62px;

}

.rc-intel__icon {

display: flex;

align-items: center;

flex-shrink: 0;

&--flame { color: #f97316; }

191

&--blast { color: #ef4444; }

}

.rc-intel__val {

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

196

font-size: 10.5px;

197

color: var(--color-accent);

198

white-space: nowrap;

199

overflow: hidden;

200

text-overflow: ellipsis;

min-width: 0;

flex: 1;

}

.rc-intel__meta {

opacity: 0.5;

}

// ── Counts row: 3 equal fixed slots (dead · errors · warns) ──────────────────

.rc-intel__counts {

display: grid;

grid-template-columns: repeat(3, 1fr);

214

gap: 0;

215

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

216

font-size: 10.5px;

217

color: var(--text-secondary);

}

.rc-count {

display: flex;

align-items: center;

gap: 3px;

// icon colored, text stays secondary

226

&__icon { display: flex; align-items: center; }

227

228

&--dead .rc-count__icon { color: var(--text-secondary); }

229

&--error .rc-count__icon { color: var(--color-danger, #ef4444); }

230

&--warn .rc-count__icon { color: var(--color-warning, #f59e0b); }

231

}

232

233

// ── Footer: tags + timestamp ──────────────────────────────────────────────────

.rc-card__footer {

display: flex;

align-items: center;

justify-content: space-between;

239

gap: var(--space-2);

240

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

241

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

}

.rc-card__tags {

display: flex;

flex-wrap: wrap;

gap: 4px;

}

.rc-card__tag {

font-size: 10px;

padding: 1px 6px;

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

254

background: var(--surface-2);

255

color: var(--text-secondary);

256

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

}

.rc-card__time {

font-size: 11px;

color: var(--text-tertiary, var(--text-secondary));

262

white-space: nowrap;

263

}