gabriel / musehub public
_blob.scss
275 lines 7.2 KB
Raw
sha256:3ff952bf9840772755d63295c58e272a14a808035a2d93b7896ba8e0cf602171 fix(layout): two-column sticky sidebar scroll across all pa… Human minor ⚠ breaking 8 days ago
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 ─────────────────────────────────────────────────────────
11
12 .blob2-layout {
13 display: grid;
14 grid-template-columns: 1fr;
15 gap: var(--space-4);
16 align-items: start;
17 min-height: 0;
18
19 &.blob2-panel-open {
20 grid-template-columns: 1fr 280px;
21 }
22
23 @media (max-width: 960px) {
24 &.blob2-panel-open { grid-template-columns: 1fr; }
25 }
26 }
27
28 .blob2-main {
29 display: flex;
30 flex-direction: column;
31 min-width: 0;
32 }
33
34 // ── Header bar ────────────────────────────────────────────────────────────────
35
36 .blob2-header {
37 display: flex;
38 align-items: center;
39 gap: var(--space-3);
40 padding: 8px 14px;
41 border-radius: var(--radius-md) var(--radius-md) 0 0;
42 }
43
44 .blob2-header-left {
45 display: flex;
46 align-items: center;
47 gap: 7px;
48 flex: 1;
49 min-width: 0;
50 }
51
52 .blob2-lang-dot {
53 width: 10px;
54 height: 10px;
55 flex-shrink: 0;
56 }
57
58 .blob2-header-meta {
59 display: flex;
60 align-items: center;
61 gap: var(--space-2);
62 flex-wrap: wrap;
63 flex-shrink: 0;
64 }
65
66 .blob2-meta-pill { padding: 2px 8px; }
67
68 .blob2-header-actions {
69 display: flex;
70 align-items: center;
71 gap: var(--space-2);
72 flex-shrink: 0;
73 }
74
75 // ── Last-modified bar ─────────────────────────────────────────────────────────
76
77 .blob2-lastmod {
78 display: flex;
79 align-items: center;
80 gap: 8px;
81 padding: 6px 14px;
82 flex-wrap: wrap;
83 }
84
85 .blob2-lastmod-sha { padding: 1px 6px; }
86
87 // ── Content area ──────────────────────────────────────────────────────────────
88
89 .blob2-content {
90 position: relative;
91 overflow: hidden;
92 }
93
94 .blob2-viewer { overflow-x: auto; }
95
96 .blob2-markdown { padding: var(--space-6) var(--space-7); }
97
98 // ── Code line table ───────────────────────────────────────────────────────────
99
100 .blob2-line-table {
101 width: 100%;
102 border-collapse: collapse;
103 border-spacing: 0;
104 }
105
106 .blob2-ln {
107 padding: 0 12px;
108 width: 1%;
109 white-space: nowrap;
110 text-align: right;
111 vertical-align: top;
112 user-select: none;
113 }
114
115 .blob2-code {
116 padding: 0 16px 0 12px;
117 white-space: pre;
118 width: 100%;
119 }
120
121 .blob2-binary-notice {
122 display: flex;
123 flex-direction: column;
124 align-items: center;
125 gap: var(--space-3);
126 padding: var(--space-10) var(--space-6);
127 text-align: center;
128 }
129
130 .blob2-empty { padding: var(--space-4) var(--space-4); }
131
132 .blob2-not-found {
133 display: flex;
134 flex-direction: column;
135 align-items: center;
136 gap: var(--space-3);
137 padding: var(--space-10) var(--space-6);
138 text-align: center;
139 }
140
141 // ── MIDI banner ───────────────────────────────────────────────────────────────
142
143 .blob2-midi-banner {
144 display: flex;
145 flex-direction: column;
146 align-items: center;
147 gap: var(--space-4);
148 padding: var(--space-8) var(--space-6);
149 text-align: center;
150 }
151
152 // ── Permalink float ───────────────────────────────────────────────────────────
153
154 .blob2-permalink-btn {
155 position: fixed;
156 bottom: var(--space-5);
157 right: var(--space-5);
158 display: flex;
159 align-items: center;
160 gap: 5px;
161 padding: 6px 14px;
162 z-index: var(--z-raised);
163 }
164
165 // ── File history timeline ─────────────────────────────────────────────────────
166
167 .blob2-history { margin-top: var(--space-4); }
168
169 .blob2-history-header {
170 display: flex;
171 align-items: center;
172 gap: 8px;
173 padding: 8px 14px;
174 }
175
176 .blob2-history-count { padding: 1px 7px; }
177
178 .blob2-history-row {
179 display: flex;
180 align-items: center;
181 gap: 8px;
182 padding: 7px 14px;
183 flex-wrap: wrap;
184 }
185
186 .blob2-history-sha { padding: 1px 6px; }
187
188 .blob2-history-prov {
189 display: flex;
190 align-items: center;
191 gap: 5px;
192 }
193
194 .blob2-history-time { margin-left: auto; }
195
196 // ── Outline panel ─────────────────────────────────────────────────────────────
197
198 .blob2-panel {
199 position: sticky;
200 top: calc(var(--sticky-offset, var(--header-height)) + var(--space-4));
201 max-height: calc(100dvh - var(--sticky-offset, var(--header-height)) - var(--space-8));
202 overflow: hidden;
203 display: flex;
204 flex-direction: column;
205
206 @media (max-width: 900px) {
207 position: static;
208 max-height: none;
209 overflow-y: visible;
210 }
211 }
212
213 .blob2-panel-tabs {
214 display: flex;
215 align-items: center;
216 padding: 0 4px;
217 flex-shrink: 0;
218 }
219
220 .blob2-panel-tab {
221 padding: 8px 12px;
222 flex-shrink: 0;
223 }
224
225 .blob2-panel-pane {
226 overflow-y: auto;
227 flex: 1;
228 }
229
230 .blob2-panel-empty { padding: var(--space-4); }
231
232 // ── Outline rows ──────────────────────────────────────────────────────────────
233
234 .blob2-outline-row {
235 display: flex;
236 align-items: center;
237 gap: 7px;
238 padding: 5px 12px;
239 cursor: pointer;
240 }
241
242 .blob2-outline-op { padding: 1px 5px; }
243 .blob2-outline-addr { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
244 .blob2-outline-count { padding: 1px 5px; flex-shrink: 0; }
245 .blob2-outline-time { flex-shrink: 0; }
246
247 // ── Info tab rows ─────────────────────────────────────────────────────────────
248
249 .blob2-info-section--sep { padding-top: var(--space-3); margin-top: var(--space-3); }
250
251 .blob2-info-row {
252 display: flex;
253 align-items: flex-start;
254 gap: var(--space-2);
255 padding: 3px 12px;
256 }
257
258 .blob2-info-label { min-width: 64px; flex-shrink: 0; }
259
260 .blob2-info-value { flex: 1; min-width: 0; }
261
262 .blob2-info-label-block { padding: var(--space-2) 12px 2px; }
263
264 .blob2-info-addr {
265 display: flex;
266 align-items: center;
267 gap: 5px;
268 padding: 3px 12px;
269 }
270
271 .blob2-copy-addr {
272 display: flex;
273 align-items: center;
274 padding: 2px;
275 }
File History 1 commit
sha256:3ff952bf9840772755d63295c58e272a14a808035a2d93b7896ba8e0cf602171 fix(layout): two-column sticky sidebar scroll across all pa… Human minor ⚠ 8 days ago