gabriel / musehub public
_diff.scss
268 lines 8.8 KB
Raw
sha256:7d6dd8f4a89e2d1fef2d84f6e65feaff51385d382f466766b7f690a22ec18e32 fix: fall back to DB ancestry check when mpack-only fast-fo… Sonnet 4.6 patch 7 days ago
1 // ─────────────────────────────────────────────────────────────────────────────
2 // Component: Diff viewer (.df3-* prefix)
3 // File: src/scss/components/_diff.scss
4 //
5 // Visual rules only — colors, typography, backgrounds, borders, animations.
6 // Structural layout lives in pages/_diff.scss.
7 // Covers: diff.html (shell SSR + diff.ts client-rendered content)
8 // ─────────────────────────────────────────────────────────────────────────────
9
10 // ── Header ────────────────────────────────────────────────────────────────────
11
12 .df3-header {
13 background: var(--bg-surface);
14 border: 1px solid var(--border-default);
15 border-radius: var(--radius-md);
16 }
17
18 .df3-back {
19 font-size: 12px;
20 color: var(--text-muted);
21 text-decoration: none;
22 &:hover { color: var(--text-primary); }
23 }
24
25 .df3-sha {
26 font-family: var(--font-mono);
27 font-size: 12px;
28 color: var(--color-accent-link);
29 background: var(--bg-elevated);
30 border: 1px solid var(--border-subtle);
31 border-radius: var(--radius-sm);
32 }
33
34 .df3-branch {
35 font-size: 11px;
36 color: var(--text-muted);
37 background: var(--bg-elevated);
38 border: 1px solid var(--border-subtle);
39 border-radius: var(--radius-full);
40 }
41
42 .df3-msg {
43 font-size: 13px;
44 color: var(--text-secondary);
45 }
46
47 .df3-meta-time {
48 font-size: 11px;
49 color: var(--text-muted);
50 margin-left: auto;
51 }
52
53 // ── Loading state ─────────────────────────────────────────────────────────────
54
55 .df3-loading {
56 color: var(--text-muted);
57 font-size: 13px;
58 }
59
60 // ── Stats bar ─────────────────────────────────────────────────────────────────
61
62 .df3-stats-bar {
63 background: var(--bg-surface);
64 border: 1px solid var(--border-default);
65 border-radius: var(--radius-md);
66 }
67
68 .df3-stat {
69 background: var(--bg-elevated);
70 border: 1px solid var(--border-subtle);
71 border-radius: var(--radius-base);
72 }
73
74 .df3-stat-n { font-size: 18px; font-weight: 700; color: var(--text-primary); }
75 .df3-stat-l { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
76
77 .df3-stat-add .df3-stat-n { color: var(--color-success); }
78 .df3-stat-del .df3-stat-n { color: var(--color-danger); }
79 .df3-stat-mod .df3-stat-n { color: var(--color-accent); }
80
81 .df3-stats-meta { font-size: 11px; color: var(--text-muted); }
82
83 .df3-root-pill {
84 font-size: 10px;
85 font-weight: 600;
86 text-transform: uppercase;
87 letter-spacing: 0.05em;
88 color: var(--color-warning);
89 background: color-mix(in srgb, var(--color-warning) 10%, transparent);
90 border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent);
91 border-radius: var(--radius-full);
92 }
93
94 .df3-vs { color: var(--text-muted); font-size: 11px; }
95
96 .df3-parent-sha {
97 font-family: var(--font-mono);
98 font-size: 11px;
99 color: var(--color-accent-link);
100 text-decoration: none;
101 &:hover { text-decoration: underline; }
102 }
103
104 // ── File cards ────────────────────────────────────────────────────────────────
105
106 .df3-file-card {
107 background: var(--bg-surface);
108 border: 1px solid var(--border-default);
109 border-radius: var(--radius-md);
110 overflow: hidden;
111 }
112
113 .df3-file-hd {
114 background: var(--bg-elevated);
115 border-bottom: 1px solid var(--border-subtle);
116 }
117
118 .df3-op-dot {
119 font-size: 11px;
120 font-weight: 700;
121 width: 16px;
122 height: 16px;
123 display: inline-flex;
124 align-items: center;
125 justify-content: center;
126 border-radius: 50%;
127 flex-shrink: 0;
128 line-height: 1;
129 }
130
131 .df3-op-add { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
132 .df3-op-del { background: color-mix(in srgb, var(--color-danger) 15%, transparent); color: var(--color-danger); }
133 .df3-op-mod { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent); }
134
135 .df3-file-path {
136 font-family: var(--font-mono);
137 font-size: 12px;
138 color: var(--text-primary);
139 text-decoration: none;
140 &:hover { text-decoration: underline; color: var(--color-accent-link); }
141 }
142
143 .df3-ext {
144 font-size: 10px;
145 font-weight: 600;
146 text-transform: uppercase;
147 color: var(--text-muted);
148 background: var(--bg-overlay);
149 border: 1px solid var(--border-subtle);
150 border-radius: var(--radius-sm);
151 }
152
153 .df3-line-stat {
154 font-size: 11px;
155 font-family: var(--font-mono);
156 color: var(--text-muted);
157
158 .df3-stat-add { color: var(--color-success); }
159 .df3-stat-del { color: var(--color-danger); }
160 }
161
162 .df3-raw-link {
163 font-size: 11px;
164 color: var(--text-muted);
165 text-decoration: none;
166 &:hover { color: var(--color-accent-link); }
167 }
168
169 .df3-no-content {
170 font-size: 12px;
171 color: var(--text-muted);
172 }
173
174 .df3-empty {
175 font-size: 13px;
176 color: var(--text-muted);
177 }
178
179 // ── Diff table ────────────────────────────────────────────────────────────────
180
181 .df3-table {
182 font-size: 12px;
183 font-family: var(--font-mono);
184 tab-size: 4;
185 }
186
187 .df3-dl-add { background: color-mix(in srgb, var(--color-success) 8%, transparent); }
188 .df3-dl-del { background: color-mix(in srgb, var(--color-danger) 8%, transparent); }
189 .df3-dl-ctx { }
190 .df3-dl-hunk { background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
191
192 .df3-ln-sign {
193 width: 16px;
194 text-align: center;
195 user-select: none;
196 color: var(--text-muted);
197
198 .df3-dl-add & { color: var(--color-success); }
199 .df3-dl-del & { color: var(--color-danger); }
200 }
201
202 .df3-ln-num {
203 color: var(--text-muted);
204 font-size: 11px;
205 text-align: right;
206 user-select: none;
207 border-right: 1px solid var(--border-subtle);
208 }
209
210 .df3-ln-code {
211 color: var(--text-primary);
212 line-height: 1.6;
213 white-space: pre;
214 }
215
216 .df3-ln-hunk { color: var(--color-accent); font-style: italic; }
217 .df3-ln-trunc { color: var(--text-muted); font-style: italic; }
218
219 // ── Symbol panel ──────────────────────────────────────────────────────────────
220
221 .df3-sym-panel {
222 background: var(--bg-elevated);
223 border-bottom: 1px solid var(--border-subtle);
224 }
225
226 .df3-sym-hd {
227 border-bottom: 1px solid var(--border-subtle);
228 }
229
230 .df3-sym-title { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
231 .df3-sym-count {
232 font-size: 10px;
233 color: var(--text-muted);
234 background: var(--bg-overlay);
235 border-radius: var(--radius-full);
236 }
237
238 .df3-sym-row { font-size: 11px; &:hover { background: var(--bg-hover); } }
239
240 .df3-sym-dot {
241 font-size: 11px;
242 font-weight: 700;
243 font-family: var(--font-mono);
244 flex-shrink: 0;
245 }
246
247 .df3-sym-name { color: var(--text-primary); font-family: var(--font-mono); font-size: 11px; }
248 .df3-sym-desc { font-size: 10px; color: var(--text-muted); }
249
250 .df3-sym-indent { color: var(--text-muted); opacity: 0.5; flex-shrink: 0; }
251
252 // ── Kind chips ────────────────────────────────────────────────────────────────
253
254 .df3-kind {
255 font-size: 9px;
256 font-weight: 700;
257 text-transform: uppercase;
258 letter-spacing: 0.05em;
259 border-radius: var(--radius-sm);
260 border: 1px solid;
261 white-space: nowrap;
262 }
263
264 .df3-k-class { color: var(--color-orange); border-color: color-mix(in srgb, var(--color-orange) 30%, transparent); background: color-mix(in srgb, var(--color-orange) 8%, transparent); }
265 .df3-k-method { color: var(--color-accent-link); border-color: color-mix(in srgb, var(--color-accent-link) 30%, transparent); background: color-mix(in srgb, var(--color-accent-link) 8%, transparent); }
266 .df3-k-func { color: var(--color-accent); border-color: color-mix(in srgb, var(--color-accent) 30%, transparent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
267 .df3-k-import { color: var(--text-muted); border-color: var(--border-subtle); background: var(--bg-overlay); }
268 .df3-k-var { color: var(--color-purple); border-color: color-mix(in srgb, var(--color-purple) 30%, transparent); background: color-mix(in srgb, var(--color-purple) 8%, transparent); }
File History 1 commit
sha256:7d6dd8f4a89e2d1fef2d84f6e65feaff51385d382f466766b7f690a22ec18e32 fix: fall back to DB ancestry check when mpack-only fast-fo… Sonnet 4.6 patch 7 days ago