src/scss/pages/_profile.scss · gabriel/musehub

1

// ─────────────────────────────────────────────────────────────────────────────

2

// Page: Profile

3

// File: src/scss/pages/_profile.scss

4

//

5

// Structural layout only — zero colors, zero raw values.

6

// Colors and visual styles live in components/ and patterns/.

7

// ─────────────────────────────────────────────────────────────────────────────

8

9

// ── Page shell ────────────────────────────────────────────────────────────────

10

.profile-body { max-width: 1200px; margin: 0 auto; padding: var(--space-5) var(--space-6) var(--space-10); display: flex; flex-direction: column; gap: var(--space-5); }

11

12

// ── Hero layout (visual rules in patterns/_surfaces.scss) ─────────────────────

13

.hero-inner__left { flex: 1; min-width: 0; max-width: 600px; }

14

.hero-inner__right {

15

display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);

16

flex-shrink: 0; margin-left: auto; align-self: flex-start;

17

@media (max-width: 768px) { margin-left: 0; }

18

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

19

}

20

.profile-projects { position: relative; display: flex; gap: 8px; flex-wrap: wrap; padding: var(--space-3) 0 var(--space-4); max-width: 1200px; margin: 0 auto; }

21

22

// ── Section layout ─────────────────────────────────────────────────────────────

23

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

24

.profile-section__header { display: flex; align-items: center; gap: var(--space-3); justify-content: space-between; flex-wrap: wrap; }

25

.profile-section__meta { font-size: var(--text-sm); color: var(--text-muted); }

26

27

// ── Grids ─────────────────────────────────────────────────────────────────────

28

.repo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); @media (max-width: 680px) { grid-template-columns: 1fr; } }

29

.attestation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); @media (max-width: 600px) { grid-template-columns: 1fr; } }

30

31

// ── Capabilities ──────────────────────────────────────────────────────────────

32

.caps-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); }

33

.caps-meta { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; margin-top: var(--space-2); strong { color: var(--text-primary); } }

34

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

35

36

// ── Activity canvas — heatmap tokens ──────────────────────────────────────────

37

:root {

38

--hm-empty: var(--bg-inset);

39

--hm-human-1: color-mix(in srgb, var(--color-accent) 20%, transparent);

40

--hm-human-2: color-mix(in srgb, var(--color-accent) 50%, transparent);

41

--hm-human-3: color-mix(in srgb, var(--color-accent) 85%, transparent);

42

--hm-agent-1: color-mix(in srgb, var(--color-purple) 20%, transparent);

43

--hm-agent-2: color-mix(in srgb, var(--color-purple) 50%, transparent);

44

--hm-agent-3: color-mix(in srgb, var(--color-purple) 85%, transparent);

45

}

46

47

.activity-canvas { overflow-x: auto; padding-top: var(--space-2); }

48

.activity-canvas__row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); &:last-of-type { margin-bottom: 0; } }

49

.activity-canvas__label { display: flex; align-items: center; gap: 8px; min-width: 90px; flex-shrink: 0; }

50

.activity-canvas__domain-name { font-family: var(--font-mono); font-size: 11px; font-weight: var(--weight-semibold); color: var(--text-secondary); }

51

.activity-canvas__total { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }

52

.activity-canvas__grid { display: flex; flex: 1; gap: 2px; }

53

.activity-canvas__col { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }

54

.activity-canvas__cell { width: 100%; height: 10px; border-radius: 2px; position: relative; cursor: default; background: var(--bg-inset); }

55

.activity-canvas__legend { display: flex; align-items: center; gap: 4px; margin-top: var(--space-3); }

56

.activity-canvas__legend-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; background: var(--bg-inset); }

57

.activity-canvas__legend-label { font-size: 10px; color: var(--text-muted); }

58

59

// Per-domain intensity coloring — CSS-only, no JS required

60

@mixin canvas-domain($color) {

61

&[data-intensity="1"] { background: color-mix(in srgb, #{$color} 20%, transparent); }

62

&[data-intensity="2"] { background: color-mix(in srgb, #{$color} 45%, transparent); }

63

&[data-intensity="3"] { background: color-mix(in srgb, #{$color} 70%, transparent); }

64

&[data-intensity="4"] { background: #{$color}; }

65

}

66

67

.activity-canvas__cell--code { @include canvas-domain(var(--domain-code)); }

68

.activity-canvas__cell--midi { @include canvas-domain(var(--domain-midi)); }

69

.activity-canvas__cell--mist { @include canvas-domain(var(--domain-mist)); }

70

.activity-canvas__cell--agent { @include canvas-domain(var(--domain-agent)); }

71

.activity-canvas__cell--audio { @include canvas-domain(var(--color-warning)); }

72

.activity-canvas__cell--generic { @include canvas-domain(var(--domain-generic)); }

73

74

// Legend swatches mirror domain colors

75

.activity-canvas__legend-swatch[data-intensity="1"] { background: color-mix(in srgb, var(--domain-code) 20%, transparent); }

76

.activity-canvas__legend-swatch[data-intensity="2"] { background: color-mix(in srgb, var(--domain-code) 45%, transparent); }

77

.activity-canvas__legend-swatch[data-intensity="3"] { background: color-mix(in srgb, var(--domain-code) 70%, transparent); }

78

.activity-canvas__legend-swatch[data-intensity="4"] { background: var(--domain-code); }

79

80

// ── Repo card ─────────────────────────────────────────────────────────────────

81

.repo-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--bg-surface); text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s, background 0.15s; &:hover { transform: translateY(-2px); border-color: var(--border-default); background: var(--bg-elevated); } }

82

.repo-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }

83

.repo-card__name { font-size: 13px; font-weight: var(--weight-semibold); color: var(--text-primary); font-family: var(--font-mono); }

84

.repo-card__badges { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

85

.repo-card__desc { font-size: 12px; margin: 0; line-height: 1.4; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

86

.repo-card__footer { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); flex-wrap: wrap; margin-top: auto; padding-top: var(--space-2); svg { opacity: 0.6; } }

87

.repo-tags { display: flex; flex-wrap: wrap; gap: 4px; }

88

89

// ── Agent fleet ───────────────────────────────────────────────────────────────

90

.agent-fleet { display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-1); }

91

.fleet-card { flex-shrink: 0; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); min-width: 220px; max-width: 280px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--bg-surface); text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s; &:hover { transform: translateY(-1px); border-color: var(--border-default); } }

92

.fleet-card__avatar { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--color-purple) 12%, transparent); color: var(--color-purple); }

93

.fleet-card__body { flex: 1; min-width: 0; }

94

.fleet-card__name { font-size: 13px; font-weight: var(--weight-semibold); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

95

.fleet-card__model { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); margin-top: 2px; }

96

.fleet-card__stats { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 11px; color: var(--text-muted); flex-shrink: 0; }

97

.fleet-card__stat { display: flex; align-items: center; gap: 3px; }

98

99

// ── Footprint ─────────────────────────────────────────────────────────────────

100

.footprint { display: flex; flex-direction: column; }

101

.footprint__item { display: flex; align-items: center; gap: var(--space-3); padding: 6px 0; font-size: 12px; border-bottom: 1px solid var(--border-subtle); &:last-child { border-bottom: none; } }

102

.footprint__repo { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); text-decoration: none; flex-shrink: 0; &:hover { color: var(--color-accent); } }

103

.footprint__sym { flex: 1; font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }

104

.footprint__changes { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }

105

106

// ── Activity feed ─────────────────────────────────────────────────────────────

107

.activity-feed { display: flex; flex-direction: column; }

108

.activity-event { display: flex; align-items: flex-start; gap: var(--space-3); padding: 10px 0; border-bottom: 1px solid var(--border-subtle); &:last-child { border-bottom: none; } }

109

.activity-event__icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--bg-overlay); color: var(--text-muted); }

110

.activity-event__body { flex: 1; min-width: 0; }

111

.activity-event__title { font-size: 13px; display: block; margin-bottom: 3px; a { color: var(--text-primary); text-decoration: none; &:hover { text-decoration: underline; } } }

112

.activity-event__meta { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

113

.activity-event__agent { color: var(--color-purple); }

114

.load-more { display: flex; justify-content: center; padding: var(--space-4) 0; }

115

116

// ── Tab nav (wraps .tab-btn from _nav.scss) ───────────────────────────────────

117

.tab-nav { display: flex; gap: 0; overflow-x: auto; }

118

119

// ── Attestations ──────────────────────────────────────────────────────────────

120

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

121

.attest-col__header { font-size: 12px; font-weight: var(--weight-semibold); color: var(--text-primary); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-subtle); }

122

.attest-row { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--text-secondary); padding: 4px 0; border-bottom: 1px solid var(--border-subtle); &:last-child { border-bottom: none; } }

123

.attest-age { font-size: 11px; color: var(--text-muted); margin-left: auto; }

124

.attest-empty { font-size: 12px; color: var(--text-muted); padding: var(--space-2) 0; }

125

.attest-claim { font-size: 12px; color: var(--text-secondary); font-style: italic; }

126

127

// ── Provenance chain ──────────────────────────────────────────────────────────

128

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

129

.prov-node { display: flex; flex-direction: column; gap: 2px; }

130

.prov-node__indent { display: flex; align-items: center; gap: var(--space-2); padding-left: calc(var(--prov-indent, 0) * 20px); }

131

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

132

.prov-icon { display: flex; align-items: center; color: var(--text-muted); }

133

.prov-handle { font-weight: var(--weight-semibold); font-size: 13px; color: var(--color-accent); text-decoration: none; &:hover { text-decoration: underline; } }

134

.prov-root-label { font-size: 11px; color: var(--text-muted); font-style: italic; }

135

.prov-annotation { font-size: 11px; color: var(--text-muted); font-style: italic; }

136

137

// ── Roster ────────────────────────────────────────────────────────────────────

138

.roster { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-default); }

139

.roster-table {

140

width: 100%; border-collapse: collapse; font-size: 13px;

141

th { text-align: left; padding: 10px 16px; font-size: 11px; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); background: var(--bg-surface); border-bottom: 1px solid var(--border-default); }

142

td { padding: 10px 16px; vertical-align: middle; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); }

143

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

144

}

145

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

146

.roster-weight { font-size: 13px; font-family: var(--font-mono); color: var(--text-secondary); }

147

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

148

149

// ── DAG / commit graph (used on repo commit graph page) ───────────────────────

150

.graph-layout { display: grid; grid-template-columns: 1fr 200px; gap: 0; align-items: start; @media (max-width: 768px) { grid-template-columns: 1fr; } }

151

.graph-main { padding-right: var(--space-4); min-width: 0; }

152

.graph-viewport-card { overflow: hidden; padding: 0; border-radius: var(--radius-base); }

153

.graph-legend-bar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-2) var(--space-4); min-height: 38px; &--types { min-height: 34px; padding: var(--space-1) var(--space-4); } }

154

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

155

.graph-legend-branch { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; }

156

.graph-legend-type { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-family: var(--font-mono); }

157

.graph-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

158

.graph-legend-sep { margin-left: auto; display: flex; gap: var(--space-4); font-size: 10px; flex-shrink: 0; span { display: inline-flex; align-items: center; gap: 4px; } }

159

.graph-viewport { position: relative; height: calc(100vh - 300px); min-height: 480px; overflow: hidden; }

160

.graph-canvas { display: block; position: absolute; top: 0; left: 0; cursor: grab; &:active { cursor: grabbing; } }

161

.graph-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; }

162

.graph-empty { padding: 60px; text-align: center; font-size: 14px; }

163

.dag-minimap { position: absolute; bottom: 8px; right: 8px; border-radius: 6px; cursor: pointer; opacity: 0.9; transition: opacity 0.2s; &:hover { opacity: 1; } }

164

.graph-controls { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) var(--space-3); min-height: 44px; }

165

.graph-ctrl-btn { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--radius-sm); padding: 4px 10px; font-size: 12px; cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); }

166

.graph-zoom-label { font-size: 11px; font-family: var(--font-mono); min-width: 36px; text-align: center; }

167

.graph-search-wrap { position: relative; display: flex; align-items: center; margin-left: var(--space-2); }

168

.graph-search-icon { position: absolute; left: 8px; pointer-events: none; }

169

.graph-search-input { border-radius: var(--radius-sm); padding: 4px 8px 4px 28px; font-size: 12px; width: 200px; transition: border-color var(--transition-fast), width var(--transition-fast); &:focus { outline: none; width: 260px; } }

170

.graph-search-count { position: absolute; right: 6px; font-size: 10px; pointer-events: none; font-family: var(--font-mono); }

171

.graph-hint { font-size: 10px; margin-left: auto; }

172

.graph-sidebar { padding-left: var(--space-4); display: flex; flex-direction: column; position: sticky; top: var(--header-height); max-height: calc(100vh - var(--header-height)); overflow-y: auto; scrollbar-width: none; &::-webkit-scrollbar { display: none; } }

173

.graph-sidebar-section { padding: var(--space-3) 0; &:last-child { border-bottom: none; } }

174

175

.dag-popover { display: none; position: fixed; z-index: 500; border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); min-width: 320px; max-width: 460px; pointer-events: none; }

176

.dag-pop-sha { font-family: var(--font-mono); font-size: 12px; margin-bottom: var(--space-2); display: flex; align-items: center; gap: var(--space-2); }

177

.dag-pop-sha-badge { border-radius: var(--radius-sm); padding: 1px 6px; }

178

.dag-pop-branch { display: inline-block; padding: 1px 8px; border-radius: var(--radius-full); font-size: 11px; font-weight: var(--weight-semibold); margin-left: auto; }

179

.dag-pop-type { display: inline-block; padding: 1px 7px; border-radius: var(--radius-sm); font-size: 11px; font-weight: var(--weight-semibold); font-family: var(--font-mono); margin-right: 4px; }

180

.dag-pop-msg { font-size: 14px; margin-bottom: var(--space-2); word-break: break-word; line-height: 1.5; }

181

.dag-pop-meta { font-size: 12px; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

182

.dag-pop-author-chip { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--radius-full); padding: 2px 8px; font-size: 11px; font-weight: var(--weight-medium); }

183

.dag-pop-avatar { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: var(--weight-bold); flex-shrink: 0; text-transform: uppercase; }

184

.dag-pop-muse { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: var(--space-2); padding-top: var(--space-2); }

185

.pop-muse-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-sm); font-size: 10px; font-weight: var(--weight-semibold); font-family: var(--font-mono); }

186

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

187

188

.branch-legend-item { display: flex; align-items: center; gap: var(--space-2); padding: 5px 0; font-size: 12px; &:first-of-type { border-top: none; } }

189

.branch-legend-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }

190

.branch-legend-pill { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

191

.branch-legend-count { margin-left: auto; font-size: 10px; font-family: var(--font-mono); }

192

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

193

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

194

.contributor-item { display: flex; align-items: center; gap: var(--space-2); padding: 5px 0; &:first-of-type { border-top: none; } }

195

.contributor-avatar-sm { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: var(--weight-bold); flex-shrink: 0; text-transform: uppercase; }

196

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

197

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

198

.contributor-bar { height: 3px; border-radius: 2px; margin: 2px 0 0; overflow: hidden; }

199

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

200

201

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

202

@media (max-width: 768px) {

203

.hero-inner__left { max-width: 100%; }

204

}

205

@media (max-width: 480px) {

206

.profile-body { padding: var(--space-4) var(--space-3) var(--space-8); }

207

}