gabriel / musehub public
_diff.scss
258 lines 8.5 KB
Raw
sha256:a34090cc4a394a78bd72cbbe34b08cc59525141e19135b6c0ab154f10611b9ef debug(push/stream): instrument O-frame decode path with INF… Sonnet 4.6 patch 121 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 // ── Loading state ─────────────────────────────────────────────────────────────
48
49 .df3-loading {
50 color: var(--text-muted);
51 font-size: 13px;
52 }
53
54 // ── Stats bar ─────────────────────────────────────────────────────────────────
55
56 .df3-stats-bar {
57 background: var(--bg-surface);
58 border: 1px solid var(--border-default);
59 border-radius: var(--radius-md);
60 }
61
62 .df3-stat {
63 background: var(--bg-elevated);
64 border: 1px solid var(--border-subtle);
65 border-radius: var(--radius-base);
66 }
67
68 .df3-stat-n { font-size: 18px; font-weight: 700; color: var(--text-primary); }
69 .df3-stat-l { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
70
71 .df3-stat-add .df3-stat-n { color: var(--color-success); }
72 .df3-stat-del .df3-stat-n { color: var(--color-danger); }
73 .df3-stat-mod .df3-stat-n { color: var(--color-accent); }
74
75 .df3-stats-meta { font-size: 11px; color: var(--text-muted); }
76
77 .df3-root-pill {
78 font-size: 10px;
79 font-weight: 600;
80 text-transform: uppercase;
81 letter-spacing: 0.05em;
82 color: var(--color-warning);
83 background: color-mix(in srgb, var(--color-warning) 10%, transparent);
84 border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent);
85 border-radius: var(--radius-full);
86 }
87
88 .df3-vs { color: var(--text-muted); font-size: 11px; }
89
90 .df3-parent-sha {
91 font-family: var(--font-mono);
92 font-size: 11px;
93 color: var(--color-accent-link);
94 text-decoration: none;
95 &:hover { text-decoration: underline; }
96 }
97
98 // ── File cards ────────────────────────────────────────────────────────────────
99
100 .df3-file-card {
101 background: var(--bg-surface);
102 border: 1px solid var(--border-default);
103 border-radius: var(--radius-md);
104 overflow: hidden;
105 }
106
107 .df3-file-hd {
108 background: var(--bg-elevated);
109 border-bottom: 1px solid var(--border-subtle);
110 }
111
112 .df3-op-dot {
113 font-size: 11px;
114 font-weight: 700;
115 width: 16px;
116 height: 16px;
117 display: inline-flex;
118 align-items: center;
119 justify-content: center;
120 border-radius: 50%;
121 flex-shrink: 0;
122 line-height: 1;
123 }
124
125 .df3-op-add { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
126 .df3-op-del { background: color-mix(in srgb, var(--color-danger) 15%, transparent); color: var(--color-danger); }
127 .df3-op-mod { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent); }
128
129 .df3-file-path {
130 font-family: var(--font-mono);
131 font-size: 12px;
132 color: var(--text-primary);
133 text-decoration: none;
134 &:hover { text-decoration: underline; color: var(--color-accent-link); }
135 }
136
137 .df3-ext {
138 font-size: 10px;
139 font-weight: 600;
140 text-transform: uppercase;
141 color: var(--text-muted);
142 background: var(--bg-overlay);
143 border: 1px solid var(--border-subtle);
144 border-radius: var(--radius-sm);
145 }
146
147 .df3-line-stat {
148 font-size: 11px;
149 font-family: var(--font-mono);
150 color: var(--text-muted);
151
152 .df3-stat-add { color: var(--color-success); }
153 .df3-stat-del { color: var(--color-danger); }
154 }
155
156 .df3-raw-link {
157 font-size: 11px;
158 color: var(--text-muted);
159 text-decoration: none;
160 &:hover { color: var(--color-accent-link); }
161 }
162
163 .df3-no-content {
164 font-size: 12px;
165 color: var(--text-muted);
166 }
167
168 .df3-empty {
169 font-size: 13px;
170 color: var(--text-muted);
171 }
172
173 // ── Diff table ────────────────────────────────────────────────────────────────
174
175 .df3-table {
176 font-size: 12px;
177 font-family: var(--font-mono);
178 tab-size: 4;
179 }
180
181 .df3-dl-add { background: color-mix(in srgb, var(--color-success) 8%, transparent); }
182 .df3-dl-del { background: color-mix(in srgb, var(--color-danger) 8%, transparent); }
183 .df3-dl-ctx { }
184
185 .df3-ln-sign {
186 width: 16px;
187 text-align: center;
188 user-select: none;
189 color: var(--text-muted);
190
191 .df3-dl-add & { color: var(--color-success); }
192 .df3-dl-del & { color: var(--color-danger); }
193 }
194
195 .df3-ln-num {
196 color: var(--text-muted);
197 font-size: 11px;
198 text-align: right;
199 user-select: none;
200 border-right: 1px solid var(--border-subtle);
201 }
202
203 .df3-ln-code {
204 color: var(--text-primary);
205 line-height: 1.6;
206 white-space: pre;
207 }
208
209 // ── Symbol panel ──────────────────────────────────────────────────────────────
210
211 .df3-sym-panel {
212 background: var(--bg-elevated);
213 border-bottom: 1px solid var(--border-subtle);
214 }
215
216 .df3-sym-hd {
217 border-bottom: 1px solid var(--border-subtle);
218 }
219
220 .df3-sym-title { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
221 .df3-sym-count {
222 font-size: 10px;
223 color: var(--text-muted);
224 background: var(--bg-overlay);
225 border-radius: var(--radius-full);
226 }
227
228 .df3-sym-row { font-size: 11px; &:hover { background: var(--bg-hover); } }
229
230 .df3-sym-dot {
231 font-size: 11px;
232 font-weight: 700;
233 font-family: var(--font-mono);
234 flex-shrink: 0;
235 }
236
237 .df3-sym-name { color: var(--text-primary); font-family: var(--font-mono); font-size: 11px; }
238 .df3-sym-desc { font-size: 10px; color: var(--text-muted); }
239
240 .df3-sym-indent { color: var(--text-muted); opacity: 0.5; flex-shrink: 0; }
241
242 // ── Kind chips ────────────────────────────────────────────────────────────────
243
244 .df3-kind {
245 font-size: 9px;
246 font-weight: 700;
247 text-transform: uppercase;
248 letter-spacing: 0.05em;
249 border-radius: var(--radius-sm);
250 border: 1px solid;
251 white-space: nowrap;
252 }
253
254 .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); }
255 .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); }
256 .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); }
257 .df3-k-import { color: var(--text-muted); border-color: var(--border-subtle); background: var(--bg-overlay); }
258 .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:a34090cc4a394a78bd72cbbe34b08cc59525141e19135b6c0ab154f10611b9ef debug(push/stream): instrument O-frame decode path with INF… Sonnet 4.6 patch 121 days ago