1/* common.md plugin styles */
2
3/* --- gutter markers --- */
4
5.cmd-comment-gutter {
6  width: 16px;
7}
8
9.cmd-gutter-marker {
10  cursor: pointer;
11  font-size: 10px;
12  line-height: 1;
13}
14
15.cmd-gutter-pending {
16  color: var(--text-accent);
17}
18
19.cmd-gutter-blocking {
20  color: var(--text-error);
21}
22
23.cmd-gutter-resolved {
24  color: var(--text-success);
25  opacity: 0.5;
26}
27
28.cmd-gutter-dismissed {
29  color: var(--text-muted);
30}
31
32.cmd-gutter-orphaned {
33  color: var(--text-muted);
34  opacity: 0.6;
35}
36
37/* --- inline highlights --- */
38
39.cmd-highlight-pending {
40  background-color: rgba(var(--color-accent-rgb, 255, 165, 0), 0.15);
41  border-bottom: 2px solid var(--text-accent);
42}
43
44.cmd-highlight-blocking {
45  background-color: rgba(var(--color-red-rgb, 255, 0, 0), 0.12);
46  border-bottom: 2px solid var(--text-error);
47}
48
49.cmd-highlight-resolved {
50  background-color: rgba(var(--color-green-rgb, 0, 180, 0), 0.08);
51  border-bottom: 1px dashed var(--text-success);
52  opacity: 0.6;
53}
54
55.cmd-highlight-dismissed {
56  background-color: rgba(var(--text-muted-rgb, 128, 128, 128), 0.06);
57  border-bottom: 1px dotted var(--text-muted);
58  opacity: 0.4;
59}
60
61/* --- sidebar --- */
62
63.cmd-sidebar {
64  padding: 8px;
65  overflow-y: auto;
66}
67
68.cmd-sidebar-empty {
69  color: var(--text-muted);
70  padding: 24px 12px;
71  text-align: center;
72}
73
74.cmd-sidebar-header {
75  font-size: 11px;
76  font-weight: 600;
77  letter-spacing: 0.5px;
78  color: var(--text-muted);
79  padding: 4px 8px 8px;
80}
81
82.cmd-sidebar-divider {
83  font-size: 10px;
84  color: var(--text-faint);
85  padding: 12px 8px 4px;
86  border-top: 1px solid var(--background-modifier-border);
87  margin-top: 8px;
88}
89
90/* --- comment card --- */
91
92.cmd-comment-card {
93  background: var(--background-secondary);
94  border-radius: 6px;
95  padding: 8px 10px;
96  margin-bottom: 6px;
97  cursor: pointer;
98  border: 1px solid var(--background-modifier-border);
99  transition: border-color 0.15s;
100}
101
102.cmd-comment-card:hover {
103  border-color: var(--text-accent);
104}
105
106.cmd-comment-orphaned {
107  opacity: 0.7;
108  border-left: 3px solid var(--text-muted);
109}
110
111.cmd-comment-header {
112  display: flex;
113  align-items: center;
114  gap: 6px;
115  margin-bottom: 4px;
116}
117
118.cmd-status-icon {
119  font-size: 10px;
120}
121
122.cmd-status-pending {
123  color: var(--text-accent);
124}
125
126.cmd-status-resolved {
127  color: var(--text-success);
128}
129
130.cmd-status-dismissed {
131  color: var(--text-muted);
132}
133
134.cmd-comment-author {
135  font-weight: 600;
136  font-size: 12px;
137}
138
139.cmd-comment-time {
140  font-size: 11px;
141  color: var(--text-muted);
142  margin-left: auto;
143}
144
145.cmd-comment-text {
146  font-size: 13px;
147  line-height: 1.4;
148  margin-bottom: 4px;
149}
150
151.cmd-comment-tags {
152  display: flex;
153  gap: 4px;
154  margin-bottom: 4px;
155}
156
157.cmd-tag {
158  font-size: 10px;
159  padding: 1px 5px;
160  border-radius: 3px;
161  background: var(--background-modifier-border);
162  color: var(--text-muted);
163}
164
165.cmd-severity-blocking {
166  background: rgba(var(--color-red-rgb, 255, 0, 0), 0.15);
167  color: var(--text-error);
168}
169
170/* --- reactions --- */
171
172.cmd-reactions {
173  display: flex;
174  gap: 4px;
175  margin-top: 4px;
176}
177
178.cmd-reaction {
179  font-size: 11px;
180  padding: 1px 6px;
181  border-radius: 10px;
182  background: var(--background-modifier-border);
183  border: none;
184  cursor: pointer;
185}
186
187.cmd-reaction:hover {
188  background: var(--background-modifier-hover);
189}
190
191/* --- replies --- */
192
193.cmd-reply {
194  padding: 4px 0 4px 12px;
195  border-left: 2px solid var(--background-modifier-border);
196  margin-top: 6px;
197}
198
199.cmd-reply-header {
200  display: flex;
201  gap: 6px;
202  align-items: center;
203}
204
205.cmd-reply-author {
206  font-weight: 500;
207  font-size: 12px;
208}
209
210.cmd-reply-time {
211  font-size: 11px;
212  color: var(--text-muted);
213}
214
215.cmd-reply-text {
216  font-size: 13px;
217  line-height: 1.4;
218}
219
220/* --- actions (expanded) --- */
221
222.cmd-actions {
223  margin-top: 8px;
224  padding-top: 8px;
225  border-top: 1px solid var(--background-modifier-border);
226}
227
228.cmd-reply-box {
229  margin-bottom: 8px;
230}
231
232.cmd-reply-input {
233  width: 100%;
234  min-height: 48px;
235  resize: vertical;
236  font-size: 12px;
237  padding: 6px 8px;
238  border: 1px solid var(--background-modifier-border);
239  border-radius: 4px;
240  background: var(--background-primary);
241  color: var(--text-normal);
242  margin-bottom: 4px;
243}
244
245.cmd-action-btns {
246  display: flex;
247  gap: 4px;
248  flex-wrap: wrap;
249}
250
251.cmd-btn {
252  font-size: 11px;
253  padding: 3px 8px;
254  border-radius: 4px;
255  border: 1px solid var(--background-modifier-border);
256  background: var(--background-secondary);
257  color: var(--text-normal);
258  cursor: pointer;
259}
260
261.cmd-btn:hover {
262  background: var(--background-modifier-hover);
263}
264
265/* --- add comment button --- */
266
267.cmd-add-comment {
268  width: 100%;
269  padding: 8px;
270  margin-top: 12px;
271  font-size: 12px;
272  border: 1px dashed var(--background-modifier-border);
273  border-radius: 6px;
274  background: transparent;
275  color: var(--text-muted);
276  cursor: pointer;
277}
278
279.cmd-add-comment:hover {
280  border-color: var(--text-accent);
281  color: var(--text-accent);
282}
283
284/* --- orphan anchor info --- */
285
286.cmd-orphan-anchor {
287  margin-top: 6px;
288  padding: 4px 8px;
289  background: var(--background-modifier-border);
290  border-radius: 4px;
291  font-size: 11px;
292  color: var(--text-muted);
293  display: flex;
294  gap: 6px;
295  align-items: center;
296  flex-wrap: wrap;
297}
298
299.cmd-orphan-anchor button {
300  font-size: 10px;
301  padding: 2px 6px;
302}
303
304/* --- status bar --- */
305
306.cmd-status-bar {
307  display: flex;
308  gap: 8px;
309  align-items: center;
310  cursor: pointer;
311}
312
313/* --- file explorer badges --- */
314
315.cmd-file-badge {
316  display: inline-flex;
317  align-items: center;
318  gap: 3px;
319  font-size: 10px;
320  margin-left: 4px;
321}
322
323.cmd-badge-comments {
324  color: var(--text-accent);
325}
326
327.cmd-badge-sync-pending {
328  color: var(--text-muted);
329}
330
331.cmd-badge-sync-conflict {
332  color: var(--text-warning);
333}
334
335/* --- comment creation modal --- */
336
337.cmd-create-comment {
338  padding: 12px;
339}
340
341.cmd-create-comment .cmd-field {
342  margin-bottom: 10px;
343}
344
345.cmd-create-comment .cmd-field label {
346  display: block;
347  font-size: 11px;
348  font-weight: 600;
349  color: var(--text-muted);
350  margin-bottom: 4px;
351}
352
353.cmd-create-comment textarea {
354  width: 100%;
355  min-height: 64px;
356  font-size: 13px;
357  padding: 8px;
358  border: 1px solid var(--background-modifier-border);
359  border-radius: 4px;
360  background: var(--background-primary);
361  color: var(--text-normal);
362  resize: vertical;
363}
364
365.cmd-radio-group {
366  display: flex;
367  gap: 12px;
368  flex-wrap: wrap;
369}
370
371.cmd-radio-group label {
372  display: flex !important;
373  align-items: center;
374  gap: 4px;
375  font-size: 12px !important;
376  font-weight: 400 !important;
377  cursor: pointer;
378}
379
380/* --- comment card highlight flash --- */
381
382@keyframes cmd-flash {
383  0% { background-color: var(--text-accent); opacity: 0.2; }
384  100% { background-color: var(--background-secondary); opacity: 1; }
385}
386
387.cmd-comment-highlight {
388  animation: cmd-flash 1.5s ease-out;
389}
390
391/* --- clickable comment header --- */
392
393.cmd-comment-header-clickable {
394  cursor: pointer;
395}
396
397.cmd-comment-header-clickable:hover .cmd-comment-author {
398  text-decoration: underline;
399}
400
401/* --- emoji picker --- */
402
403.cmd-emoji-grid {
404  display: grid;
405  grid-template-columns: repeat(6, 1fr);
406  gap: 4px;
407  padding: 8px;
408}
409
410.cmd-emoji-btn {
411  font-size: 20px;
412  padding: 6px;
413  border: none;
414  background: transparent;
415  border-radius: 4px;
416  cursor: pointer;
417  text-align: center;
418}
419
420.cmd-emoji-btn:hover {
421  background: var(--background-modifier-hover);
422}