@astlw/peekmd 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,1107 @@
1
+ *,
2
+ *::before,
3
+ *::after {
4
+ margin: 0;
5
+ padding: 0;
6
+ box-sizing: border-box;
7
+ }
8
+
9
+ :root {
10
+ --bg: #fafaf8;
11
+ --bg-sidebar: #f2f2ef;
12
+ --bg-hover: #e8e8e4;
13
+ --bg-active: #ddddd8;
14
+ --text: #2d2d2d;
15
+ --text-muted: #757575;
16
+ --border: #dcdcd8;
17
+ --accent: #3d8c7a;
18
+ --accent-soft: rgba(61, 140, 122, 0.08);
19
+ --accent-hover: #2e7365;
20
+ --code-bg: #ededea;
21
+ --danger: #c25550;
22
+ --danger-soft: rgba(194, 85, 80, 0.08);
23
+ --radius: 8px;
24
+ --speed: 0.2s ease;
25
+ }
26
+
27
+ [data-theme="dark"] {
28
+ --bg: #191919;
29
+ --bg-sidebar: #1d1d1d;
30
+ --bg-hover: #272727;
31
+ --bg-active: #313131;
32
+ --text: #dcdcdc;
33
+ --text-muted: #858585;
34
+ --border: #2c2c2c;
35
+ --accent: #5cbaa3;
36
+ --accent-soft: rgba(92, 186, 163, 0.1);
37
+ --accent-hover: #48a08a;
38
+ --code-bg: #212121;
39
+ --danger: #d46b66;
40
+ --danger-soft: rgba(212, 107, 102, 0.1);
41
+ }
42
+
43
+ html,
44
+ body {
45
+ height: 100%;
46
+ font-family:
47
+ -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
48
+ background: var(--bg);
49
+ color: var(--text);
50
+ transition:
51
+ background var(--speed),
52
+ color var(--speed);
53
+ }
54
+
55
+ /* ── Layout ────────────────────────────────────────────────────────── */
56
+
57
+ .layout {
58
+ display: flex;
59
+ height: 100vh;
60
+ }
61
+
62
+ .sidebar {
63
+ width: 280px;
64
+ min-width: 280px;
65
+ background: var(--bg-sidebar);
66
+ border-right: 1px solid var(--border);
67
+ display: flex;
68
+ flex-direction: column;
69
+ transition:
70
+ background var(--speed),
71
+ border-color var(--speed);
72
+ }
73
+
74
+ .sidebar-header {
75
+ display: flex;
76
+ align-items: center;
77
+ justify-content: space-between;
78
+ padding: 16px 16px 12px;
79
+ border-bottom: 1px solid var(--border);
80
+ }
81
+ .logo-container {
82
+ display: flex;
83
+ align-items: center;
84
+ gap: 8px;
85
+ }
86
+ .logo {
87
+ font-size: 16px;
88
+ font-weight: 700;
89
+ letter-spacing: -0.3px;
90
+ color: var(--accent);
91
+ }
92
+ .connection-status {
93
+ width: 8px;
94
+ height: 8px;
95
+ border-radius: 50%;
96
+ background: var(--danger);
97
+ flex-shrink: 0;
98
+ }
99
+ .connection-status.connected {
100
+ background: #4ade80;
101
+ box-shadow: 0 0 6px rgba(74, 222, 128, 0.5);
102
+ }
103
+ .header-actions {
104
+ display: flex;
105
+ gap: 6px;
106
+ }
107
+
108
+ .content {
109
+ flex: 1;
110
+ overflow-y: auto;
111
+ padding: 44px 52px;
112
+ transition: background var(--speed);
113
+ }
114
+ .empty-state {
115
+ display: flex;
116
+ align-items: center;
117
+ justify-content: center;
118
+ height: 60vh;
119
+ color: var(--text-muted);
120
+ font-size: 14px;
121
+ }
122
+
123
+ /* ── Icon Button ───────────────────────────────────────────────────── */
124
+
125
+ .icon-btn {
126
+ display: flex;
127
+ align-items: center;
128
+ justify-content: center;
129
+ width: 32px;
130
+ height: 32px;
131
+ border: 1px solid var(--border);
132
+ border-radius: 6px;
133
+ background: var(--bg);
134
+ color: var(--text-muted);
135
+ cursor: pointer;
136
+ transition: all var(--speed);
137
+ }
138
+ .icon-btn:hover {
139
+ color: var(--accent);
140
+ border-color: var(--accent);
141
+ }
142
+
143
+ [data-theme="dark"] .icon-sun {
144
+ display: none;
145
+ }
146
+ [data-theme="light"] .icon-moon,
147
+ :root:not([data-theme]) .icon-moon {
148
+ display: none;
149
+ }
150
+
151
+ /* ── Search ────────────────────────────────────────────────────────── */
152
+
153
+ .search-box {
154
+ position: relative;
155
+ padding: 8px 12px;
156
+ border-bottom: 1px solid var(--border);
157
+ }
158
+ .search-icon {
159
+ position: absolute;
160
+ left: 20px;
161
+ top: 50%;
162
+ transform: translateY(-50%);
163
+ color: var(--text-muted);
164
+ pointer-events: none;
165
+ }
166
+ .search-input {
167
+ width: 100%;
168
+ padding: 6px 28px;
169
+ border: 1px solid var(--border);
170
+ border-radius: 6px;
171
+ background: var(--bg);
172
+ color: var(--text);
173
+ font-size: 12px;
174
+ outline: none;
175
+ transition: border-color var(--speed);
176
+ }
177
+ .search-input:focus {
178
+ border-color: var(--accent);
179
+ }
180
+ .search-input::placeholder {
181
+ color: var(--text-muted);
182
+ }
183
+
184
+ .search-clear {
185
+ position: absolute;
186
+ right: 18px;
187
+ top: 50%;
188
+ transform: translateY(-50%);
189
+ display: flex;
190
+ align-items: center;
191
+ justify-content: center;
192
+ width: 18px;
193
+ height: 18px;
194
+ border: none;
195
+ border-radius: 50%;
196
+ background: var(--bg-hover);
197
+ color: var(--text-muted);
198
+ cursor: pointer;
199
+ transition: all var(--speed);
200
+ }
201
+ .search-clear:hover {
202
+ background: var(--danger-soft);
203
+ color: var(--danger);
204
+ }
205
+
206
+ .search-results {
207
+ overflow-y: auto;
208
+ max-height: 60vh;
209
+ padding: 4px 8px;
210
+ border-bottom: 1px solid var(--border);
211
+ }
212
+ .search-result-file {
213
+ padding: 4px 8px;
214
+ font-size: 12px;
215
+ font-weight: 600;
216
+ color: var(--accent);
217
+ cursor: pointer;
218
+ border-radius: 4px;
219
+ display: flex;
220
+ align-items: center;
221
+ gap: 6px;
222
+ transition: background var(--speed);
223
+ }
224
+ .search-result-file:hover {
225
+ background: var(--bg-hover);
226
+ }
227
+
228
+ .search-match {
229
+ padding: 2px 8px 2px 26px;
230
+ font-size: 11px;
231
+ font-family: "SF Mono", "Fira Code", Consolas, monospace;
232
+ color: var(--text-muted);
233
+ cursor: pointer;
234
+ border-radius: 4px;
235
+ white-space: nowrap;
236
+ overflow: hidden;
237
+ text-overflow: ellipsis;
238
+ transition: background var(--speed);
239
+ }
240
+ .search-match:hover {
241
+ background: var(--bg-hover);
242
+ color: var(--text);
243
+ }
244
+ .search-match .line-num {
245
+ color: var(--text-muted);
246
+ opacity: 0.6;
247
+ margin-right: 6px;
248
+ min-width: 24px;
249
+ display: inline-block;
250
+ text-align: right;
251
+ }
252
+ .search-match mark {
253
+ background: rgba(61, 140, 122, 0.2);
254
+ color: var(--accent);
255
+ padding: 0 2px;
256
+ border-radius: 2px;
257
+ }
258
+ .search-no-results {
259
+ padding: 12px 8px;
260
+ font-size: 12px;
261
+ color: var(--text-muted);
262
+ text-align: center;
263
+ }
264
+
265
+ /* ── Folder List ───────────────────────────────────────────────────── */
266
+
267
+ .folder-list {
268
+ flex: 1;
269
+ overflow-y: auto;
270
+ padding: 8px;
271
+ }
272
+ .folder-group {
273
+ margin-bottom: 4px;
274
+ }
275
+
276
+ .folder-header {
277
+ display: flex;
278
+ align-items: center;
279
+ gap: 6px;
280
+ padding: 7px 10px;
281
+ border-radius: 6px;
282
+ cursor: pointer;
283
+ user-select: none;
284
+ transition: background var(--speed);
285
+ }
286
+ .folder-header:hover {
287
+ background: var(--bg-hover);
288
+ }
289
+
290
+ .folder-label {
291
+ display: flex;
292
+ align-items: center;
293
+ gap: 7px;
294
+ font-size: 12px;
295
+ font-weight: 600;
296
+ text-transform: uppercase;
297
+ letter-spacing: 0.4px;
298
+ color: var(--text-muted);
299
+ flex: 1;
300
+ min-width: 0;
301
+ }
302
+ .folder-label span {
303
+ overflow: hidden;
304
+ text-overflow: ellipsis;
305
+ white-space: nowrap;
306
+ }
307
+
308
+ /* compact path shown when folder basenames collide */
309
+ .folder-label-text {
310
+ display: flex;
311
+ flex-direction: column;
312
+ gap: 2px;
313
+ min-width: 0;
314
+ }
315
+ .folder-name {
316
+ font-size: 13px;
317
+ font-weight: 700;
318
+ text-transform: none;
319
+ color: var(--text);
320
+ overflow: hidden;
321
+ text-overflow: ellipsis;
322
+ white-space: nowrap;
323
+ }
324
+ .folder-path-compact {
325
+ font-size: 11px;
326
+ color: var(--text-muted);
327
+ font-weight: 500;
328
+ overflow: hidden;
329
+ text-overflow: ellipsis;
330
+ white-space: nowrap;
331
+ max-width: 180px;
332
+ }
333
+
334
+ .folder-chevron {
335
+ width: 14px;
336
+ height: 14px;
337
+ color: var(--text-muted);
338
+ flex-shrink: 0;
339
+ transition: transform var(--speed);
340
+ }
341
+ .folder-group.collapsed .folder-chevron {
342
+ transform: rotate(-90deg);
343
+ }
344
+ .folder-group.collapsed .folder-files {
345
+ display: none;
346
+ }
347
+
348
+ .folder-unlink {
349
+ display: flex;
350
+ align-items: center;
351
+ justify-content: center;
352
+ width: 22px;
353
+ height: 22px;
354
+ border: none;
355
+ border-radius: 4px;
356
+ background: transparent;
357
+ color: var(--text-muted);
358
+ cursor: pointer;
359
+ opacity: 0;
360
+ flex-shrink: 0;
361
+ transition: all var(--speed);
362
+ }
363
+ .folder-header:hover .folder-unlink {
364
+ opacity: 1;
365
+ }
366
+ .folder-unlink:hover {
367
+ background: var(--danger-soft);
368
+ color: var(--danger);
369
+ }
370
+
371
+ .folder-icon {
372
+ width: 14px;
373
+ height: 14px;
374
+ flex-shrink: 0;
375
+ opacity: 0.55;
376
+ }
377
+ .folder-files {
378
+ padding-left: 8px;
379
+ }
380
+
381
+ /* ── Tree Directories ──────────────────────────────────────────────── */
382
+
383
+ .tree-dir-header {
384
+ display: flex;
385
+ align-items: center;
386
+ gap: 4px;
387
+ padding: 4px 10px;
388
+ font-size: 13px;
389
+ color: var(--text-muted);
390
+ cursor: pointer;
391
+ user-select: none;
392
+ border-radius: 6px;
393
+ transition: all var(--speed);
394
+ }
395
+ .tree-dir-header:hover {
396
+ background: var(--bg-hover);
397
+ color: var(--text);
398
+ }
399
+ .tree-dir-header span {
400
+ font-weight: 500;
401
+ }
402
+
403
+ .tree-chevron {
404
+ width: 12px;
405
+ height: 12px;
406
+ flex-shrink: 0;
407
+ opacity: 0.4;
408
+ transition: transform 0.15s ease;
409
+ transform: rotate(90deg);
410
+ }
411
+ .tree-dir.collapsed .tree-chevron {
412
+ transform: rotate(0deg);
413
+ }
414
+ .tree-dir.collapsed .tree-dir-children {
415
+ display: none;
416
+ }
417
+ .tree-folder-icon {
418
+ width: 14px;
419
+ height: 14px;
420
+ flex-shrink: 0;
421
+ opacity: 0.5;
422
+ }
423
+
424
+ /* ── File Items ────────────────────────────────────────────────────── */
425
+
426
+ .file-item {
427
+ display: flex;
428
+ align-items: center;
429
+ gap: 8px;
430
+ padding: 6px 10px 6px 14px;
431
+ border-radius: 6px;
432
+ font-size: 13px;
433
+ color: var(--text-muted);
434
+ cursor: pointer;
435
+ user-select: none;
436
+ word-break: break-word;
437
+ transition: all var(--speed);
438
+ }
439
+ .file-item:hover {
440
+ background: var(--bg-hover);
441
+ color: var(--text);
442
+ }
443
+ .file-item.active {
444
+ background: var(--accent-soft);
445
+ color: var(--accent);
446
+ font-weight: 600;
447
+ }
448
+
449
+ .file-icon {
450
+ flex-shrink: 0;
451
+ width: 14px;
452
+ height: 14px;
453
+ opacity: 0.4;
454
+ }
455
+ .file-item.active .file-icon {
456
+ opacity: 1;
457
+ }
458
+
459
+ /* small badge on file items to indicate source folder when needed */
460
+ .file-badge {
461
+ background: var(--bg-sidebar);
462
+ color: var(--text-muted);
463
+ border-radius: 6px;
464
+ padding: 2px 8px;
465
+ font-size: 11px;
466
+ line-height: 1;
467
+ margin-left: 2px;
468
+ margin-right: 6px;
469
+ flex-shrink: 0;
470
+ }
471
+
472
+ /* ── Empty State ───────────────────────────────────────────────────── */
473
+
474
+ .empty-folders {
475
+ display: flex;
476
+ flex-direction: column;
477
+ align-items: center;
478
+ justify-content: center;
479
+ gap: 12px;
480
+ padding: 40px 20px;
481
+ color: var(--text-muted);
482
+ text-align: center;
483
+ font-size: 13px;
484
+ line-height: 1.5;
485
+ }
486
+ .empty-folders svg {
487
+ opacity: 0.25;
488
+ }
489
+
490
+ /* ── Modal ─────────────────────────────────────────────────────────── */
491
+
492
+ .modal-overlay {
493
+ display: none;
494
+ position: fixed;
495
+ inset: 0;
496
+ background: rgba(0, 0, 0, 0.5);
497
+ z-index: 100;
498
+ align-items: center;
499
+ justify-content: center;
500
+ backdrop-filter: blur(4px);
501
+ }
502
+ .modal-overlay.open {
503
+ display: flex;
504
+ }
505
+
506
+ .modal {
507
+ background: var(--bg);
508
+ border: 1px solid var(--border);
509
+ border-radius: 12px;
510
+ padding: 24px;
511
+ width: 480px;
512
+ max-width: 90vw;
513
+ animation: fadeIn 0.15s ease;
514
+ }
515
+ .modal-header {
516
+ display: flex;
517
+ align-items: center;
518
+ justify-content: space-between;
519
+ margin-bottom: 14px;
520
+ }
521
+ .modal-title {
522
+ font-size: 15px;
523
+ font-weight: 700;
524
+ }
525
+ .modal-close {
526
+ border: none;
527
+ background: none;
528
+ width: 28px;
529
+ height: 28px;
530
+ }
531
+
532
+ .browser {
533
+ border: 1px solid var(--border);
534
+ border-radius: var(--radius);
535
+ margin-bottom: 12px;
536
+ overflow: hidden;
537
+ }
538
+ .browser-path {
539
+ padding: 8px 12px;
540
+ font-size: 12px;
541
+ font-family: "SF Mono", "Fira Code", Consolas, monospace;
542
+ color: var(--text-muted);
543
+ background: var(--code-bg);
544
+ border-bottom: 1px solid var(--border);
545
+ overflow: hidden;
546
+ text-overflow: ellipsis;
547
+ white-space: nowrap;
548
+ }
549
+ .browser-list {
550
+ max-height: 220px;
551
+ overflow-y: auto;
552
+ }
553
+
554
+ .browser-item {
555
+ display: flex;
556
+ align-items: center;
557
+ gap: 8px;
558
+ padding: 7px 12px;
559
+ font-size: 13px;
560
+ color: var(--text);
561
+ cursor: pointer;
562
+ transition: background var(--speed);
563
+ }
564
+ .browser-item:hover {
565
+ background: var(--bg-hover);
566
+ }
567
+ .browser-item svg {
568
+ flex-shrink: 0;
569
+ opacity: 0.5;
570
+ }
571
+ .browser-item.parent-dir {
572
+ color: var(--text-muted);
573
+ font-style: italic;
574
+ }
575
+
576
+ .modal-input-row {
577
+ display: flex;
578
+ gap: 8px;
579
+ }
580
+ .modal-input {
581
+ flex: 1;
582
+ padding: 9px 12px;
583
+ border: 1px solid var(--border);
584
+ border-radius: 6px;
585
+ background: var(--bg-sidebar);
586
+ color: var(--text);
587
+ font-size: 13px;
588
+ font-family: "SF Mono", "Fira Code", Consolas, monospace;
589
+ outline: none;
590
+ transition: border-color var(--speed);
591
+ }
592
+ .modal-input:focus {
593
+ border-color: var(--accent);
594
+ }
595
+
596
+ .modal-actions {
597
+ display: flex;
598
+ justify-content: flex-end;
599
+ gap: 8px;
600
+ margin-top: 14px;
601
+ }
602
+
603
+ .btn {
604
+ padding: 8px 16px;
605
+ border: none;
606
+ border-radius: 6px;
607
+ font-size: 13px;
608
+ font-weight: 500;
609
+ cursor: pointer;
610
+ transition: all var(--speed);
611
+ }
612
+ .btn-primary {
613
+ background: var(--accent);
614
+ color: #fff;
615
+ }
616
+ .btn-primary:hover {
617
+ background: var(--accent-hover);
618
+ }
619
+ .btn-secondary {
620
+ background: var(--bg-sidebar);
621
+ color: var(--text-muted);
622
+ border: 1px solid var(--border);
623
+ }
624
+ .btn-secondary:hover {
625
+ background: var(--bg-hover);
626
+ color: var(--text);
627
+ }
628
+
629
+ /* ── Markdown Body ─────────────────────────────────────────────────── */
630
+
631
+ .markdown-body {
632
+ max-width: 760px;
633
+ margin: 0 auto;
634
+ line-height: 1.72;
635
+ font-size: 15px;
636
+ animation: fadeIn 0.22s ease;
637
+ }
638
+
639
+ @keyframes fadeIn {
640
+ from {
641
+ opacity: 0;
642
+ transform: translateY(5px);
643
+ }
644
+ to {
645
+ opacity: 1;
646
+ transform: translateY(0);
647
+ }
648
+ }
649
+
650
+ .markdown-body h1 {
651
+ font-size: 2em;
652
+ font-weight: 800;
653
+ margin-bottom: 14px;
654
+ padding-bottom: 10px;
655
+ border-bottom: 1px solid var(--border);
656
+ letter-spacing: -0.5px;
657
+ }
658
+ .markdown-body h2 {
659
+ font-size: 1.45em;
660
+ font-weight: 700;
661
+ margin-top: 36px;
662
+ margin-bottom: 10px;
663
+ letter-spacing: -0.3px;
664
+ }
665
+ .markdown-body h3 {
666
+ font-size: 1.18em;
667
+ font-weight: 600;
668
+ margin-top: 28px;
669
+ margin-bottom: 8px;
670
+ }
671
+ .markdown-body h4,
672
+ .markdown-body h5,
673
+ .markdown-body h6 {
674
+ font-weight: 600;
675
+ margin-top: 22px;
676
+ margin-bottom: 6px;
677
+ }
678
+ .markdown-body p {
679
+ margin-bottom: 14px;
680
+ }
681
+ .markdown-body strong {
682
+ font-weight: 650;
683
+ }
684
+
685
+ .markdown-body a {
686
+ color: var(--accent);
687
+ text-decoration: none;
688
+ border-bottom: 1px solid transparent;
689
+ transition: border-color var(--speed);
690
+ }
691
+ .markdown-body a:hover {
692
+ border-bottom-color: var(--accent);
693
+ }
694
+
695
+ .markdown-body ul,
696
+ .markdown-body ol {
697
+ padding-left: 22px;
698
+ margin-bottom: 14px;
699
+ }
700
+ .markdown-body li {
701
+ margin-bottom: 5px;
702
+ }
703
+ .markdown-body li > ul,
704
+ .markdown-body li > ol {
705
+ margin-top: 5px;
706
+ margin-bottom: 0;
707
+ }
708
+
709
+ .markdown-body .task-list-item {
710
+ list-style: none;
711
+ margin-left: -22px;
712
+ padding-left: 4px;
713
+ }
714
+ .markdown-body .task-list-item input[type="checkbox"] {
715
+ margin-right: 8px;
716
+ accent-color: var(--accent);
717
+ vertical-align: middle;
718
+ }
719
+
720
+ .markdown-body blockquote {
721
+ border-left: 3px solid var(--accent);
722
+ padding: 6px 16px;
723
+ margin: 0 0 14px;
724
+ color: var(--text-muted);
725
+ background: var(--code-bg);
726
+ border-radius: 0 var(--radius) var(--radius) 0;
727
+ }
728
+ .markdown-body blockquote p:last-child {
729
+ margin-bottom: 0;
730
+ }
731
+
732
+ .markdown-body code {
733
+ font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
734
+ font-size: 0.87em;
735
+ padding: 2px 6px;
736
+ background: var(--code-bg);
737
+ border: 1px solid var(--border);
738
+ border-radius: 4px;
739
+ }
740
+ .markdown-body pre {
741
+ background: var(--code-bg);
742
+ border: 1px solid var(--border);
743
+ border-radius: var(--radius);
744
+ padding: 14px 18px;
745
+ margin-bottom: 14px;
746
+ overflow-x: auto;
747
+ }
748
+ .markdown-body pre code {
749
+ padding: 0;
750
+ background: none;
751
+ border: none;
752
+ font-size: 13px;
753
+ line-height: 1.6;
754
+ }
755
+
756
+ .markdown-body table {
757
+ width: 100%;
758
+ border-collapse: collapse;
759
+ margin-bottom: 14px;
760
+ font-size: 13.5px;
761
+ }
762
+ .markdown-body th,
763
+ .markdown-body td {
764
+ border: 1px solid var(--border);
765
+ padding: 9px 13px;
766
+ text-align: left;
767
+ }
768
+ .markdown-body th {
769
+ background: var(--code-bg);
770
+ font-weight: 600;
771
+ }
772
+ .markdown-body tr:nth-child(even) td {
773
+ background: var(--code-bg);
774
+ }
775
+
776
+ .markdown-body hr {
777
+ border: none;
778
+ border-top: 1px solid var(--border);
779
+ margin: 28px 0;
780
+ }
781
+ .markdown-body img {
782
+ max-width: 100%;
783
+ border-radius: var(--radius);
784
+ margin: 6px 0;
785
+ }
786
+
787
+ .markdown-body dl {
788
+ margin-bottom: 14px;
789
+ }
790
+ .markdown-body dt {
791
+ font-weight: 600;
792
+ margin-top: 10px;
793
+ }
794
+ .markdown-body dd {
795
+ margin-left: 20px;
796
+ color: var(--text-muted);
797
+ }
798
+
799
+ .markdown-body details {
800
+ margin-bottom: 14px;
801
+ border: 1px solid var(--border);
802
+ border-radius: var(--radius);
803
+ padding: 10px 14px;
804
+ }
805
+ .markdown-body summary {
806
+ cursor: pointer;
807
+ font-weight: 600;
808
+ user-select: none;
809
+ }
810
+ .markdown-body details[open] summary {
811
+ margin-bottom: 8px;
812
+ }
813
+
814
+ .markdown-body kbd {
815
+ display: inline-block;
816
+ padding: 2px 6px;
817
+ font-family: inherit;
818
+ font-size: 0.85em;
819
+ border: 1px solid var(--border);
820
+ border-radius: 4px;
821
+ background: var(--code-bg);
822
+ box-shadow: 0 1px 0 var(--border);
823
+ }
824
+ .markdown-body mark {
825
+ background: rgba(61, 140, 122, 0.15);
826
+ padding: 1px 4px;
827
+ border-radius: 3px;
828
+ }
829
+
830
+ /* ── Mermaid ───────────────────────────────────────────────────────── */
831
+
832
+ .mermaid-container {
833
+ display: flex;
834
+ justify-content: center;
835
+ margin: 16px 0;
836
+ padding: 20px;
837
+ background: var(--code-bg);
838
+ border: 1px solid var(--border);
839
+ border-radius: var(--radius);
840
+ overflow-x: auto;
841
+ }
842
+ .mermaid-container svg {
843
+ max-width: 100%;
844
+ height: auto;
845
+ }
846
+
847
+ /* ── Config Panel ──────────────────────────────────────────────────── */
848
+
849
+ .config-modal {
850
+ width: 520px;
851
+ }
852
+
853
+ .config-tabs {
854
+ display: flex;
855
+ gap: 2px;
856
+ margin-bottom: 16px;
857
+ border-bottom: 1px solid var(--border);
858
+ }
859
+ .config-tab {
860
+ flex: 1;
861
+ padding: 9px 0;
862
+ border: none;
863
+ background: none;
864
+ color: var(--text-muted);
865
+ font-size: 13px;
866
+ font-weight: 500;
867
+ cursor: pointer;
868
+ border-bottom: 2px solid transparent;
869
+ transition: all var(--speed);
870
+ }
871
+ .config-tab:hover {
872
+ color: var(--text);
873
+ }
874
+ .config-tab.active {
875
+ color: var(--accent);
876
+ border-bottom-color: var(--accent);
877
+ }
878
+
879
+ .config-panel {
880
+ animation: fadeIn 0.15s ease;
881
+ }
882
+
883
+ .config-list {
884
+ border: 1px solid var(--border);
885
+ border-radius: var(--radius);
886
+ max-height: 280px;
887
+ overflow-y: auto;
888
+ overflow-x: hidden;
889
+ margin-bottom: 12px;
890
+ }
891
+
892
+ .config-item {
893
+ display: flex;
894
+ align-items: center;
895
+ justify-content: space-between;
896
+ padding: 10px 14px;
897
+ border-bottom: 1px solid var(--border);
898
+ transition: background var(--speed);
899
+ }
900
+ .config-item:last-child {
901
+ border-bottom: none;
902
+ }
903
+ .config-item:hover {
904
+ background: var(--bg-hover);
905
+ }
906
+
907
+ .config-item-info {
908
+ display: flex;
909
+ align-items: center;
910
+ gap: 8px;
911
+ min-width: 0;
912
+ flex: 1;
913
+ overflow: visible;
914
+ }
915
+
916
+ /* meta block for folder entries (name + detail stacked) */
917
+ .config-item-meta {
918
+ display: flex;
919
+ flex-direction: column;
920
+ gap: 2px;
921
+ min-width: 0;
922
+ overflow: hidden;
923
+ }
924
+ .config-item-name {
925
+ font-size: 13px;
926
+ font-weight: 500;
927
+ color: var(--text);
928
+ white-space: nowrap;
929
+ overflow: hidden;
930
+ text-overflow: ellipsis;
931
+ max-width: 100%;
932
+ }
933
+ .config-item-name code {
934
+ font-family: "SF Mono", "Fira Code", Consolas, monospace;
935
+ font-size: 12px;
936
+ padding: 1px 5px;
937
+ background: var(--code-bg);
938
+ border: 1px solid var(--border);
939
+ border-radius: 4px;
940
+ display: inline-block;
941
+ max-width: 100%;
942
+ overflow: hidden;
943
+ text-overflow: ellipsis;
944
+ vertical-align: middle;
945
+ }
946
+ .config-item-detail {
947
+ font-size: 11px;
948
+ color: var(--text-muted);
949
+ white-space: nowrap;
950
+ overflow: hidden;
951
+ text-overflow: ellipsis;
952
+ }
953
+
954
+ .config-badge {
955
+ font-size: 10px;
956
+ font-weight: 600;
957
+ text-transform: uppercase;
958
+ letter-spacing: 0.5px;
959
+ padding: 2px 6px;
960
+ border-radius: 4px;
961
+ flex-shrink: 0;
962
+ }
963
+ .config-badge {
964
+ display: inline-flex;
965
+ align-items: center;
966
+ justify-content: center;
967
+ }
968
+ .config-badge-exact {
969
+ background: var(--accent-soft);
970
+ color: var(--accent);
971
+ }
972
+ .config-badge-glob {
973
+ background: rgba(100, 120, 200, 0.12);
974
+ color: #5568c8;
975
+ }
976
+ [data-theme="dark"] .config-badge-glob {
977
+ background: rgba(130, 150, 220, 0.12);
978
+ color: #8a9de0;
979
+ }
980
+ .config-badge-regex {
981
+ background: rgba(180, 130, 60, 0.12);
982
+ color: #b8860b;
983
+ }
984
+ [data-theme="dark"] .config-badge-regex {
985
+ background: rgba(220, 170, 80, 0.12);
986
+ color: #dcaa50;
987
+ }
988
+
989
+ .config-remove {
990
+ display: flex;
991
+ align-items: center;
992
+ justify-content: center;
993
+ width: 26px;
994
+ height: 26px;
995
+ border: none;
996
+ border-radius: 4px;
997
+ background: transparent;
998
+ color: var(--text-muted);
999
+ cursor: pointer;
1000
+ opacity: 0;
1001
+ flex-shrink: 0;
1002
+ transition: all var(--speed);
1003
+ }
1004
+ .config-item:hover .config-remove {
1005
+ opacity: 1;
1006
+ }
1007
+ .config-remove:hover {
1008
+ background: var(--danger-soft);
1009
+ color: var(--danger);
1010
+ }
1011
+
1012
+ .config-add-row {
1013
+ display: flex;
1014
+ gap: 8px;
1015
+ }
1016
+ .config-add-row .modal-input {
1017
+ flex: 1;
1018
+ }
1019
+
1020
+ .btn-sm {
1021
+ padding: 7px 14px;
1022
+ font-size: 12px;
1023
+ }
1024
+
1025
+ .config-empty {
1026
+ padding: 20px;
1027
+ text-align: center;
1028
+ font-size: 13px;
1029
+ color: var(--text-muted);
1030
+ }
1031
+
1032
+ .config-hint {
1033
+ font-size: 12px;
1034
+ color: var(--text-muted);
1035
+ margin-bottom: 10px;
1036
+ line-height: 1.5;
1037
+ }
1038
+ .config-hint code {
1039
+ font-family: "SF Mono", "Fira Code", Consolas, monospace;
1040
+ font-size: 11px;
1041
+ padding: 1px 5px;
1042
+ background: var(--code-bg);
1043
+ border: 1px solid var(--border);
1044
+ border-radius: 3px;
1045
+ }
1046
+
1047
+ /* ── Scrollbar ─────────────────────────────────────────────────────── */
1048
+
1049
+ ::-webkit-scrollbar {
1050
+ width: 5px;
1051
+ height: 5px;
1052
+ }
1053
+ ::-webkit-scrollbar-track {
1054
+ background: transparent;
1055
+ }
1056
+ ::-webkit-scrollbar-thumb {
1057
+ background: var(--border);
1058
+ border-radius: 3px;
1059
+ }
1060
+ ::-webkit-scrollbar-thumb:hover {
1061
+ background: var(--text-muted);
1062
+ }
1063
+
1064
+ /* ── Instant Tooltip ───────────────────────────────────────────────── */
1065
+
1066
+ [data-tip] {
1067
+ /* placeholder so elements with data-tip remain positioned normally */
1068
+ position: relative;
1069
+ }
1070
+
1071
+ /* Floating tooltip appended to document.body to avoid clipping inside scrollable containers */
1072
+ .floating-tooltip {
1073
+ position: fixed;
1074
+ left: 0;
1075
+ top: 0;
1076
+ transform: translate(-50%, -6px);
1077
+ padding: 6px 10px;
1078
+ font-size: 11px;
1079
+ font-family: "SF Mono", "Fira Code", Consolas, monospace;
1080
+ line-height: 1.3;
1081
+ white-space: nowrap;
1082
+ max-width: 420px;
1083
+ overflow: hidden;
1084
+ text-overflow: ellipsis;
1085
+ color: var(--text);
1086
+ background: var(--bg);
1087
+ border: 1px solid var(--border);
1088
+ border-radius: 6px;
1089
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
1090
+ pointer-events: none;
1091
+ z-index: 99999;
1092
+ opacity: 0;
1093
+ transition: opacity 0.06s linear;
1094
+ }
1095
+ .floating-tooltip.show {
1096
+ opacity: 1;
1097
+ }
1098
+
1099
+ @media (max-width: 768px) {
1100
+ .sidebar {
1101
+ width: 220px;
1102
+ min-width: 220px;
1103
+ }
1104
+ .content {
1105
+ padding: 28px 20px;
1106
+ }
1107
+ }