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

1

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

2

// Page: Blob viewer (.blob2-* layout)

3

// File: src/scss/pages/_blob.scss

4

//

5

// STRUCTURAL LAYOUT ONLY — zero colors, zero typography here.

6

// Visual rules live in components/_blob.scss.

7

// Covers: blob.html, blame.html

8

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

9

10

// ── Two-column layout ─────────────────────────────────────────────────────────

.blob2-layout {

display: grid;

grid-template-columns: 1fr;

gap: var(--space-4);

align-items: start;

&.blob2-panel-open {

grid-template-columns: 1fr 280px;

20

}

21

22

@media (max-width: 960px) {

23

&.blob2-panel-open { grid-template-columns: 1fr; }

}

}

.blob2-main {

display: flex;

flex-direction: column;

min-width: 0;

}

// ── Header bar ────────────────────────────────────────────────────────────────

.blob2-header {

display: flex;

align-items: center;

gap: var(--space-3);

padding: 8px 14px;

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

}

.blob2-header-left {

display: flex;

align-items: center;

gap: 7px;

flex: 1;

min-width: 0;

}

.blob2-lang-dot {

width: 10px;

height: 10px;

flex-shrink: 0;

}

.blob2-header-meta {

display: flex;

align-items: center;

gap: var(--space-2);

flex-wrap: wrap;

flex-shrink: 0;

}

.blob2-meta-pill { padding: 2px 8px; }

66

67

.blob2-header-actions {

display: flex;

align-items: center;

gap: var(--space-2);

flex-shrink: 0;

}

// ── Last-modified bar ─────────────────────────────────────────────────────────

.blob2-lastmod {

display: flex;

align-items: center;

gap: 8px;

padding: 6px 14px;

flex-wrap: wrap;

}

.blob2-lastmod-sha { padding: 1px 6px; }

85

86

// ── Content area ──────────────────────────────────────────────────────────────

.blob2-content {

position: relative;

overflow: hidden;

}

.blob2-viewer { overflow-x: auto; }

94

95

.blob2-markdown { padding: var(--space-6) var(--space-7); }

96

97

// ── Code line table ───────────────────────────────────────────────────────────

.blob2-line-table {

width: 100%;

border-collapse: collapse;

border-spacing: 0;

}

.blob2-ln {

padding: 0 12px;

width: 1%;

white-space: nowrap;

text-align: right;

vertical-align: top;

user-select: none;

}

.blob2-code {

padding: 0 16px 0 12px;

white-space: pre;

width: 100%;

}

.blob2-binary-notice {

121

display: flex;

122

flex-direction: column;

123

align-items: center;

124

gap: var(--space-3);

125

padding: var(--space-10) var(--space-6);

text-align: center;

}

.blob2-empty { padding: var(--space-4) var(--space-4); }

.blob2-not-found {

display: flex;

flex-direction: column;

134

align-items: center;

135

gap: var(--space-3);

136

padding: var(--space-10) var(--space-6);

text-align: center;

}

// ── MIDI banner ───────────────────────────────────────────────────────────────

.blob2-midi-banner {

display: flex;

flex-direction: column;

145

align-items: center;

146

gap: var(--space-4);

147

padding: var(--space-8) var(--space-6);

text-align: center;

}

// ── Permalink float ───────────────────────────────────────────────────────────

152

153

.blob2-permalink-btn {

154

position: fixed;

155

bottom: var(--space-5);

156

right: var(--space-5);

display: flex;

align-items: center;

gap: 5px;

padding: 6px 14px;

z-index: var(--z-raised);

162

}

163

164

// ── File history timeline ─────────────────────────────────────────────────────

165

166

.blob2-history { margin-top: var(--space-4); }

167

168

.blob2-history-header {

display: flex;

align-items: center;

gap: 8px;

padding: 8px 14px;

}

.blob2-history-count { padding: 1px 7px; }

.blob2-history-row {

display: flex;

align-items: center;

gap: 8px;

padding: 7px 14px;

flex-wrap: wrap;

}

.blob2-history-sha { padding: 1px 6px; }

186

187

.blob2-history-prov {

display: flex;

align-items: center;

gap: 5px;

}

.blob2-history-time { margin-left: auto; }

194

195

// ── Outline panel ─────────────────────────────────────────────────────────────

.blob2-panel {

position: sticky;

top: calc(var(--sticky-offset, 80px) + var(--space-4));

200

max-height: calc(100vh - var(--sticky-offset, 80px) - var(--space-8));

201

overflow: hidden;

202

display: flex;

203

flex-direction: column;

}

.blob2-panel-tabs {

display: flex;

align-items: center;

padding: 0 4px;

flex-shrink: 0;

}

.blob2-panel-tab {

padding: 8px 12px;

flex-shrink: 0;

}

.blob2-panel-pane {

overflow-y: auto;

flex: 1;

}

.blob2-panel-empty { padding: var(--space-4); }

224

225

// ── Outline rows ──────────────────────────────────────────────────────────────

.blob2-outline-row {

display: flex;

align-items: center;

gap: 7px;

padding: 5px 12px;

cursor: pointer;

}

.blob2-outline-op { padding: 1px 5px; }

236

.blob2-outline-addr { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

237

.blob2-outline-count { padding: 1px 5px; flex-shrink: 0; }

238

.blob2-outline-time { flex-shrink: 0; }

239

240

// ── Info tab rows ─────────────────────────────────────────────────────────────

241

242

.blob2-info-section--sep { padding-top: var(--space-3); margin-top: var(--space-3); }

.blob2-info-row {

display: flex;

align-items: flex-start;

gap: var(--space-2);

padding: 3px 12px;

}

.blob2-info-label { min-width: 64px; flex-shrink: 0; }

252

253

.blob2-info-value { flex: 1; min-width: 0; }

254

255

.blob2-info-label-block { padding: var(--space-2) 12px 2px; }

.blob2-info-addr {

display: flex;

align-items: center;

gap: 5px;

padding: 3px 12px;

}

.blob2-copy-addr {

display: flex;

align-items: center;

padding: 2px;

}