gabriel / musehub public
_commit-detail.scss
256 lines 6.4 KB
Raw
sha256:a34090cc4a394a78bd72cbbe34b08cc59525141e19135b6c0ab154f10611b9ef debug(push/stream): instrument O-frame decode path with INF… Sonnet 4.6 patch 121 days ago
1 // ─────────────────────────────────────────────────────────────────────────────
2 // Page: Commit Detail (.cd3-* layout, .cd2-* symbol graph)
3 // File: src/scss/pages/_commit-detail.scss
4 //
5 // STRUCTURAL LAYOUT ONLY — zero colors, zero typography here.
6 // Visual rules live in components/_commit-detail.scss.
7 // ─────────────────────────────────────────────────────────────────────────────
8
9 // ── Page skeleton ─────────────────────────────────────────────────────────────
10
11 .cd3-layout {
12 display: grid;
13 grid-template-columns: 1fr 260px;
14 gap: var(--space-4);
15 align-items: start;
16
17 @media (max-width: 900px) { grid-template-columns: 1fr; }
18 }
19
20 .cd3-main { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
21 .cd3-sidebar { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
22
23 // ── Header ────────────────────────────────────────────────────────────────────
24
25 .cd3-header { padding: var(--space-4) var(--space-5); }
26
27 .cd3-header-top {
28 display: flex;
29 align-items: center;
30 justify-content: space-between;
31 gap: var(--space-3);
32 margin-bottom: var(--space-3);
33 }
34
35 .cd3-badges {
36 display: flex;
37 align-items: center;
38 gap: var(--space-2);
39 flex-wrap: wrap;
40 }
41
42 .cd3-header-actions {
43 display: flex;
44 align-items: center;
45 gap: var(--space-2);
46 flex-shrink: 0;
47 }
48
49 .cd3-subject { margin-bottom: var(--space-2); }
50 .cd3-body { margin-bottom: var(--space-3); }
51
52 .cd3-meta-row {
53 display: flex;
54 align-items: center;
55 gap: var(--space-2);
56 flex-wrap: wrap;
57 margin-top: var(--space-3);
58 padding-top: var(--space-3);
59 border-top: 1px solid var(--border-subtle);
60 }
61
62 // ── Dimension strip ───────────────────────────────────────────────────────────
63
64 .cd3-dims {
65 display: flex;
66 gap: var(--space-3);
67 flex-wrap: wrap;
68 }
69
70 .cd3-dim-card {
71 display: flex;
72 flex-direction: column;
73 align-items: center;
74 justify-content: center;
75 padding: var(--space-3) var(--space-4);
76 gap: 4px;
77 min-width: 80px;
78 }
79
80 // ── Symbol graph ──────────────────────────────────────────────────────────────
81
82 .cd3-section-hd {
83 display: flex;
84 align-items: center;
85 gap: var(--space-2);
86 padding: 10px 14px;
87 }
88
89 .cd3-section-title-row {
90 display: flex;
91 align-items: center;
92 gap: 8px;
93 flex: 1;
94 min-width: 0;
95 }
96
97 .cd2-sym-graph-wrap {
98 position: relative;
99 height: 320px;
100 }
101
102 .cd2-sym-svg {
103 display: block;
104 width: 100%;
105 height: 100%;
106 }
107
108 .cd2-sym-info-panel {
109 position: absolute;
110 top: var(--space-3);
111 right: var(--space-3);
112 padding: var(--space-3);
113 min-width: 160px;
114 max-width: 220px;
115 }
116
117 // ── File cards ────────────────────────────────────────────────────────────────
118
119 .cd3-file-hd {
120 display: flex;
121 align-items: center;
122 gap: var(--space-2);
123 padding: 8px 14px;
124 }
125
126 .cd3-file-summary { margin-left: auto; }
127
128 .cd3-sym-tree {
129 display: flex;
130 flex-direction: column;
131 gap: 1px;
132 padding: 4px 14px 8px;
133 }
134
135 .cd3-sym-row {
136 display: flex;
137 align-items: center;
138 gap: 6px;
139 padding: 3px 4px;
140 }
141
142 .cd3-sym-child { padding-left: 16px; }
143
144 // ── Flat file list ────────────────────────────────────────────────────────────
145
146 .cd3-file-list {
147 display: flex;
148 flex-direction: column;
149 gap: 2px;
150 padding: 8px 14px 12px;
151 }
152
153 .cd3-fl-row {
154 display: flex;
155 align-items: center;
156 gap: 8px;
157 padding: 3px 4px;
158 }
159
160 .cd3-fl-dot {
161 width: 14px;
162 text-align: center;
163 flex-shrink: 0;
164 }
165
166 .cd3-tally {
167 display: flex;
168 gap: 5px;
169 margin-left: auto;
170 }
171
172 // ── Commit navigation ─────────────────────────────────────────────────────────
173
174 .cd3-nav {
175 display: grid;
176 grid-template-columns: 1fr auto 1fr;
177 align-items: center;
178 gap: var(--space-3);
179 }
180
181 .cd3-nav-card,
182 .cd3-nav-disabled {
183 display: flex;
184 flex-direction: column;
185 gap: 4px;
186 padding: var(--space-3) var(--space-4);
187 }
188
189 .cd3-nav-newer { align-items: flex-end; text-align: right; }
190 .cd3-nav-all { text-align: center; }
191
192 // ── Sidebar ───────────────────────────────────────────────────────────────────
193
194 .cd3-side-hd {
195 display: flex;
196 align-items: center;
197 gap: 7px;
198 padding: 10px 14px;
199 }
200
201 .cd3-prov-identity {
202 display: flex;
203 flex-direction: column;
204 gap: 4px;
205 padding: 10px 14px 8px;
206 }
207
208 .cd3-prov-row {
209 display: flex;
210 align-items: flex-start;
211 gap: var(--space-2);
212 padding: 5px 14px;
213 }
214
215 .cd3-prov-label {
216 min-width: 60px;
217 flex-shrink: 0;
218 padding-top: 1px;
219 }
220
221 .cd3-prov-val {
222 display: flex;
223 align-items: center;
224 gap: 5px;
225 flex: 1;
226 min-width: 0;
227 flex-wrap: wrap;
228 }
229
230 // ── Discussion ────────────────────────────────────────────────────────────────
231
232 .cd3-discussion { margin-top: var(--space-4); }
233
234 .cd3-disc-hd {
235 display: flex;
236 align-items: center;
237 gap: var(--space-2);
238 margin-bottom: var(--space-3);
239 }
240
241 .cd3-comment-list {
242 display: flex;
243 flex-direction: column;
244 gap: var(--space-3);
245 margin-bottom: var(--space-4);
246 }
247
248 .cd3-comment-form { display: flex; flex-direction: column; }
249
250 .cd3-comment-input { padding: var(--space-3); }
251
252 .cd3-comment-actions {
253 display: flex;
254 justify-content: flex-end;
255 margin-top: var(--space-2);
256 }
File History 1 commit
sha256:a34090cc4a394a78bd72cbbe34b08cc59525141e19135b6c0ab154f10611b9ef debug(push/stream): instrument O-frame decode path with INF… Sonnet 4.6 patch 121 days ago