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

1

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

2

// Component: Mists (.ms-* prefix)

3

// File: src/scss/components/_mists.scss

4

//

5

// Visual rules only — colors, typography, backgrounds, borders, animations.

6

// Structural layout lives in pages/_mists.scss.

7

// Covers: mist_explore, mist_list, mist_detail, fragments/mist_rows

8

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

9

10

// ── Shared primitives ─────────────────────────────────────────────────────────

11

12

.ms-card {

13

background: var(--bg-surface);

14

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

15

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

overflow: hidden;

}

.ms-btn {

font-size: 12px;

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

22

font-weight: 500;

23

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

24

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

25

cursor: pointer;

26

text-decoration: none;

27

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

white-space: nowrap;

&--ghost {

background: transparent;

32

color: var(--text-secondary);

33

&:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-default); }

}

&--primary {

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

38

color: #fff;

39

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

40

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

}

}

.ms-type-chip {

font-size: 10px;

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

47

font-weight: 600;

48

border-radius: 4px;

49

border: 1px solid currentColor;

50

flex-shrink: 0;

51

letter-spacing: 0.01em;

}

.ms-lang-badge {

font-size: 10px;

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

57

background: var(--bg-overlay);

58

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

59

border-radius: 3px;

60

color: var(--text-muted);

}

.ms-agent-badge {

font-size: 10px;

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

66

background: var(--agent-accent-bg);

67

border: 1px solid color-mix(in srgb, var(--color-purple) 30%, transparent);

68

border-radius: 3px;

69

color: var(--agent-accent);

}

.ms-signed-badge {

display: inline-flex;

align-items: center;

gap: 4px;

font-size: 10px;

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

78

background: color-mix(in srgb, var(--color-success) 10%, transparent);

79

border: 1px solid color-mix(in srgb, var(--color-success) 35%, transparent);

80

border-radius: 3px;

81

color: var(--color-success);

}

.ms-mist-id-badge {

font-size: 10px;

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

87

background: var(--bg-overlay);

88

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

89

border-radius: 3px;

90

color: var(--text-muted);

91

}

92

93

.ms-meta-dot { color: var(--border-default); user-select: none; }

.ms-tag {

font-size: 11px;

background: var(--bg-overlay);

98

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

99

border-radius: 12px;

100

color: var(--text-muted);

}

.ms-symbol-anchor {

font-size: 11px;

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

106

color: var(--text-muted);

107

}

108

109

// ── Explore + list page headers ───────────────────────────────────────────────

110

111

.ms-explore-title {

112

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

113

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

114

color: var(--text-primary);

115

}

116

117

.ms-explore-sub { font-size: 13px; color: var(--text-muted); }

118

119

.ms-list-title {

120

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

121

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

122

color: var(--text-primary);

123

}

124

125

.ms-list-owner-link {

126

color: var(--text-primary);

127

text-decoration: none;

128

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

129

}

130

131

.ms-list-sep { color: var(--text-muted); font-weight: 300; }

132

.ms-list-sub { font-size: 13px; color: var(--text-muted); }

133

134

// ── Filter bar ────────────────────────────────────────────────────────────────

.ms-type-filter {

font-size: 12px;

border-radius: 20px;

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

140

color: var(--text-muted);

141

text-decoration: none;

142

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

143

144

&:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-default); }

145

&--active { background: var(--bg-overlay); color: var(--text-primary); border-color: var(--border-default); }

146

}

147

148

.ms-count-label { font-size: 12px; color: var(--text-muted); }

149

150

// ── Mist rows ─────────────────────────────────────────────────────────────────

151

152

.ms-row {

153

color: var(--text-secondary);

154

text-decoration: none;

155

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

156

transition: background var(--transition-fast);

157

158

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

159

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

}

.ms-row-filename {

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

164

font-size: 13px;

165

font-weight: 600;

166

color: var(--text-primary);

}

.ms-row-title-text {

font-size: 13px;

color: var(--text-muted);

172

overflow: hidden;

173

text-overflow: ellipsis;

white-space: nowrap;

}

.ms-row-meta { font-size: 11px; color: var(--text-muted); }

178

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

179

.ms-row-count { font-size: 11px; font-family: var(--font-mono); color: var(--text-muted); }

180

.ms-row-chevron { color: var(--text-disabled); }

181

182

// ── Empty state ───────────────────────────────────────────────────────────────

183

184

.ms-empty-icon { color: var(--text-disabled); }

185

.ms-empty-title { font-size: 15px; font-weight: var(--weight-semibold); color: var(--text-secondary); }

186

.ms-empty-desc {

187

font-size: 13px;

188

color: var(--text-muted);

line-height: 1.6;

code {

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

193

font-size: 12px;

194

padding: 1px 5px;

195

background: var(--bg-overlay);

196

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

border-radius: 3px;

}

}

// ── Detail header ─────────────────────────────────────────────────────────────

202

203

.ms-detail-header { border-bottom: 1px solid var(--border-subtle); }

204

205

.ms-detail-owner {

206

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

207

text-decoration: none;

208

font-weight: 500;

209

&:hover { text-decoration: underline; }

210

}

211

212

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

213

.ms-detail-filename { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--text-primary); }

214

.ms-detail-breadcrumb { font-size: 14px; }

215

216

.ms-detail-title {

217

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

218

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

219

color: var(--text-primary);

220

}

221

222

.ms-detail-meta { font-size: 12px; color: var(--text-muted); }

223

.ms-detail-description { font-size: 13px; color: var(--text-secondary); line-height: 1.65; }

224

225

// ── Stats ─────────────────────────────────────────────────────────────────────

226

227

.ms-stat-value { font-family: var(--font-mono); font-size: 16px; font-weight: var(--weight-semibold); color: var(--text-primary); }

228

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

229

230

// ── Content card ──────────────────────────────────────────────────────────────

231

232

.ms-content-card {

233

background: var(--bg-surface);

234

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

235

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

overflow: hidden;

}

.ms-content-toolbar {

240

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

241

background: var(--bg-overlay);

242

}

243

244

.ms-content-label { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

245

246

.ms-content-pre {

247

margin: 0 !important;

248

border-radius: 0 !important;

249

font-size: 13px !important;

250

line-height: 1.55 !important;

251

code { font-size: inherit !important; }

252

}

253

254

.ms-midi-placeholder { color: var(--text-muted); text-align: center; }

255

256

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

257

258

.ms-sidebar-card {

259

background: var(--bg-surface);

260

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

261

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

262

}

263

264

.ms-sidebar-card-title {

265

font-size: 12px;

266

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

267

color: var(--text-secondary);

}

.ms-sidebar-count {

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

272

font-size: 11px;

273

background: var(--bg-overlay);

274

border-radius: 3px;

275

color: var(--text-muted);

}

.ms-sidebar-link {

font-size: 12px;

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

281

text-decoration: none;

282

&:hover { text-decoration: underline; }

283

}

284

285

.ms-sidebar-sub { font-size: 11px; color: var(--text-muted); }

286

287

// ── Anchor + forks lists ──────────────────────────────────────────────────────

288

289

.ms-anchor-addr {

290

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

291

font-size: 11px;

292

color: var(--text-secondary);

293

overflow: hidden;

294

text-overflow: ellipsis;

white-space: nowrap;

}

.ms-mini-avatar {

border-radius: 50%;

display: inline-flex;

301

align-items: center;

302

justify-content: center;

font-size: 9px;

font-weight: 700;

color: #fff;

flex-shrink: 0;

}

// ── Embed snippets ────────────────────────────────────────────────────────────

.ms-embed-label {

font-size: 10px;

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

314

color: var(--text-muted);

315

text-transform: uppercase;

316

letter-spacing: 0.05em;

}

.ms-embed-snippet {

background: var(--bg-base);

321

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

322

border-radius: 5px;

323

cursor: pointer;

324

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

}

.ms-embed-code {

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

329

font-size: 10px;

330

color: var(--text-muted);

331

word-break: break-all;

332

white-space: pre-wrap;

display: block;

}

.ms-embed-copy {

background: var(--bg-overlay);

338

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

339

border-radius: 3px;

340

cursor: pointer;

341

color: var(--text-muted);

342

display: flex;

343

align-items: center;

344

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

345

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

346

}

347

348

// ── Agent provenance rows ─────────────────────────────────────────────────────

349

350

.ms-prov-key { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); flex-shrink: 0; min-width: 48px; }

351

.ms-prov-val { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); word-break: break-all; }