@open330/kiwimu 0.3.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,853 @@
1
+ /* kiwimu - namuwiki-inspired wiki theme */
2
+
3
+ :root {
4
+ --bg: #ffffff;
5
+ --bg-alt: #f8f9fa;
6
+ --bg-hover: #e9ecef;
7
+ --text: #212529;
8
+ --text-muted: #6c757d;
9
+ --link: #0275d8;
10
+ --link-hover: #014c8c;
11
+ --border: #dee2e6;
12
+ --accent: #4caf50;
13
+ --accent-light: #e8f5e9;
14
+ --sidebar-width: 260px;
15
+ --topbar-height: 48px;
16
+ --radius: 6px;
17
+ }
18
+
19
+ * {
20
+ margin: 0;
21
+ padding: 0;
22
+ box-sizing: border-box;
23
+ }
24
+
25
+ body {
26
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
27
+ color: var(--text);
28
+ background: var(--bg);
29
+ line-height: 1.7;
30
+ font-size: 15px;
31
+ }
32
+
33
+ a {
34
+ color: var(--link);
35
+ text-decoration: none;
36
+ }
37
+
38
+ a:hover {
39
+ color: var(--link-hover);
40
+ text-decoration: underline;
41
+ }
42
+
43
+ /* Topbar */
44
+ .topbar {
45
+ position: fixed;
46
+ top: 0;
47
+ left: 0;
48
+ right: 0;
49
+ height: var(--topbar-height);
50
+ background: var(--bg);
51
+ border-bottom: 1px solid var(--border);
52
+ display: flex;
53
+ align-items: center;
54
+ padding: 0 20px;
55
+ z-index: 100;
56
+ gap: 16px;
57
+ }
58
+
59
+ .topbar-brand {
60
+ font-weight: 700;
61
+ font-size: 17px;
62
+ color: var(--text);
63
+ white-space: nowrap;
64
+ display: flex;
65
+ align-items: center;
66
+ gap: 8px;
67
+ }
68
+
69
+ .topbar-brand:hover {
70
+ text-decoration: none;
71
+ color: var(--accent);
72
+ }
73
+
74
+ .topbar-logo {
75
+ width: 28px;
76
+ height: 28px;
77
+ object-fit: contain;
78
+ }
79
+
80
+ .topbar-search {
81
+ flex: 1;
82
+ max-width: 400px;
83
+ position: relative;
84
+ }
85
+
86
+ .topbar-search input {
87
+ width: 100%;
88
+ padding: 6px 12px;
89
+ border: 1px solid var(--border);
90
+ border-radius: var(--radius);
91
+ font-size: 14px;
92
+ outline: none;
93
+ transition: border-color 0.2s;
94
+ }
95
+
96
+ .topbar-search input:focus {
97
+ border-color: var(--accent);
98
+ box-shadow: 0 0 0 2px var(--accent-light);
99
+ }
100
+
101
+ .search-dropdown {
102
+ display: none;
103
+ position: absolute;
104
+ top: 100%;
105
+ left: 0;
106
+ right: 0;
107
+ background: var(--bg);
108
+ border: 1px solid var(--border);
109
+ border-radius: var(--radius);
110
+ box-shadow: 0 4px 12px rgba(0,0,0,0.1);
111
+ max-height: 300px;
112
+ overflow-y: auto;
113
+ z-index: 200;
114
+ }
115
+
116
+ .search-dropdown.active {
117
+ display: block;
118
+ }
119
+
120
+ .search-dropdown a {
121
+ display: block;
122
+ padding: 8px 12px;
123
+ color: var(--text);
124
+ border-bottom: 1px solid var(--bg-alt);
125
+ }
126
+
127
+ .search-dropdown a:hover {
128
+ background: var(--bg-alt);
129
+ text-decoration: none;
130
+ }
131
+
132
+ .search-dropdown .search-highlight {
133
+ color: var(--accent);
134
+ font-weight: 600;
135
+ }
136
+
137
+ .topbar-links {
138
+ margin-left: auto;
139
+ }
140
+
141
+ .btn-graph {
142
+ padding: 4px 12px;
143
+ border: 1px solid var(--border);
144
+ border-radius: var(--radius);
145
+ font-size: 13px;
146
+ color: var(--text);
147
+ white-space: nowrap;
148
+ }
149
+
150
+ .btn-graph:hover {
151
+ background: var(--bg-alt);
152
+ text-decoration: none;
153
+ }
154
+
155
+ /* Layout */
156
+ .layout {
157
+ display: flex;
158
+ margin-top: var(--topbar-height);
159
+ min-height: calc(100vh - var(--topbar-height));
160
+ }
161
+
162
+ /* Sidebar */
163
+ .sidebar {
164
+ width: var(--sidebar-width);
165
+ background: var(--bg-alt);
166
+ border-right: 1px solid var(--border);
167
+ padding: 16px 0;
168
+ position: fixed;
169
+ top: var(--topbar-height);
170
+ bottom: 0;
171
+ overflow-y: auto;
172
+ }
173
+
174
+ .sidebar-header {
175
+ font-weight: 700;
176
+ font-size: 13px;
177
+ text-transform: uppercase;
178
+ letter-spacing: 0.05em;
179
+ color: var(--text-muted);
180
+ padding: 0 16px 8px;
181
+ border-bottom: 1px solid var(--border);
182
+ margin-bottom: 8px;
183
+ }
184
+
185
+ .page-list {
186
+ list-style: none;
187
+ }
188
+
189
+ .page-list li a {
190
+ display: block;
191
+ padding: 4px 16px;
192
+ color: var(--text);
193
+ font-size: 14px;
194
+ overflow: hidden;
195
+ text-overflow: ellipsis;
196
+ white-space: nowrap;
197
+ }
198
+
199
+ .page-list li a:hover {
200
+ background: var(--bg-hover);
201
+ text-decoration: none;
202
+ }
203
+
204
+ .page-list li a.active {
205
+ background: var(--accent-light);
206
+ color: var(--accent);
207
+ font-weight: 600;
208
+ border-right: 3px solid var(--accent);
209
+ }
210
+
211
+ /* Content */
212
+ .content {
213
+ flex: 1;
214
+ margin-left: var(--sidebar-width);
215
+ padding: 32px 48px;
216
+ max-width: 900px;
217
+ }
218
+
219
+ /* Wiki page */
220
+ .page-header h1 {
221
+ font-size: 28px;
222
+ font-weight: 700;
223
+ padding-bottom: 12px;
224
+ border-bottom: 2px solid var(--accent);
225
+ margin-bottom: 24px;
226
+ }
227
+
228
+ .page-body {
229
+ line-height: 1.8;
230
+ }
231
+
232
+ .page-body h2 {
233
+ font-size: 22px;
234
+ font-weight: 700;
235
+ margin: 32px 0 12px;
236
+ padding-bottom: 6px;
237
+ border-bottom: 1px solid var(--border);
238
+ }
239
+
240
+ .page-body h3 {
241
+ font-size: 18px;
242
+ font-weight: 600;
243
+ margin: 24px 0 8px;
244
+ }
245
+
246
+ .page-body h4 {
247
+ font-size: 16px;
248
+ font-weight: 600;
249
+ margin: 20px 0 6px;
250
+ }
251
+
252
+ .page-body p {
253
+ margin-bottom: 12px;
254
+ }
255
+
256
+ .page-body ul, .page-body ol {
257
+ margin: 8px 0 12px 24px;
258
+ }
259
+
260
+ .page-body li {
261
+ margin-bottom: 4px;
262
+ }
263
+
264
+ .page-body blockquote {
265
+ border-left: 4px solid var(--accent);
266
+ padding: 8px 16px;
267
+ margin: 12px 0;
268
+ background: var(--accent-light);
269
+ border-radius: 0 var(--radius) var(--radius) 0;
270
+ }
271
+
272
+ .page-body code {
273
+ background: var(--bg-alt);
274
+ padding: 2px 6px;
275
+ border-radius: 3px;
276
+ font-size: 13px;
277
+ }
278
+
279
+ .page-body pre {
280
+ background: #1e1e2e;
281
+ color: #cdd6f4;
282
+ padding: 16px;
283
+ border-radius: var(--radius);
284
+ overflow-x: auto;
285
+ margin: 12px 0;
286
+ }
287
+
288
+ .page-body pre code {
289
+ background: none;
290
+ padding: 0;
291
+ color: inherit;
292
+ }
293
+
294
+ .page-body img {
295
+ max-width: 100%;
296
+ border-radius: var(--radius);
297
+ margin: 12px 0;
298
+ }
299
+
300
+ .page-body table {
301
+ width: 100%;
302
+ border-collapse: collapse;
303
+ margin: 12px 0;
304
+ }
305
+
306
+ .page-body th, .page-body td {
307
+ padding: 8px 12px;
308
+ border: 1px solid var(--border);
309
+ text-align: left;
310
+ }
311
+
312
+ .page-body th {
313
+ background: var(--bg-alt);
314
+ font-weight: 600;
315
+ }
316
+
317
+ /* TOC */
318
+ .toc-box {
319
+ background: var(--bg-alt);
320
+ border: 1px solid var(--border);
321
+ border-radius: var(--radius);
322
+ padding: 12px 16px;
323
+ margin-bottom: 24px;
324
+ }
325
+
326
+ .toc-box summary {
327
+ font-weight: 700;
328
+ cursor: pointer;
329
+ font-size: 14px;
330
+ color: var(--text-muted);
331
+ }
332
+
333
+ .toc-box .toc ul {
334
+ list-style: none;
335
+ margin: 8px 0 0 0;
336
+ padding-left: 0;
337
+ }
338
+
339
+ .toc-box .toc ul ul {
340
+ padding-left: 16px;
341
+ }
342
+
343
+ .toc-box .toc li {
344
+ margin: 2px 0;
345
+ }
346
+
347
+ .toc-box .toc a {
348
+ font-size: 14px;
349
+ color: var(--text);
350
+ }
351
+
352
+ .toc-box .toc a:hover {
353
+ color: var(--link);
354
+ }
355
+
356
+ /* Backlinks */
357
+ .backlinks {
358
+ margin-top: 40px;
359
+ padding-top: 16px;
360
+ border-top: 1px solid var(--border);
361
+ }
362
+
363
+ .backlinks h3 {
364
+ font-size: 14px;
365
+ color: var(--text-muted);
366
+ font-weight: 600;
367
+ margin-bottom: 8px;
368
+ }
369
+
370
+ .backlinks ul {
371
+ list-style: none;
372
+ display: flex;
373
+ flex-wrap: wrap;
374
+ gap: 8px;
375
+ }
376
+
377
+ .backlinks li a {
378
+ display: inline-block;
379
+ padding: 4px 12px;
380
+ background: var(--bg-alt);
381
+ border: 1px solid var(--border);
382
+ border-radius: var(--radius);
383
+ font-size: 13px;
384
+ }
385
+
386
+ .backlinks li a:hover {
387
+ background: var(--accent-light);
388
+ text-decoration: none;
389
+ }
390
+
391
+ /* Index page */
392
+ .hero {
393
+ text-align: center;
394
+ padding: 48px 0 32px;
395
+ }
396
+
397
+ .hero-logo {
398
+ width: 120px;
399
+ height: 120px;
400
+ object-fit: contain;
401
+ margin-bottom: 16px;
402
+ }
403
+
404
+ .hero h1 {
405
+ font-size: 36px;
406
+ border: none;
407
+ }
408
+
409
+ .hero-sub {
410
+ color: var(--text-muted);
411
+ font-size: 16px;
412
+ margin-top: 8px;
413
+ }
414
+
415
+ .index-grid {
416
+ max-width: 700px;
417
+ margin: 0 auto;
418
+ }
419
+
420
+ .index-section h2 {
421
+ font-size: 18px;
422
+ margin-bottom: 16px;
423
+ padding-bottom: 8px;
424
+ border-bottom: 1px solid var(--border);
425
+ }
426
+
427
+ .page-cards {
428
+ display: grid;
429
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
430
+ gap: 10px;
431
+ margin-bottom: 32px;
432
+ }
433
+
434
+ .page-card {
435
+ display: block;
436
+ padding: 12px 16px;
437
+ background: var(--bg-alt);
438
+ border: 1px solid var(--border);
439
+ border-radius: var(--radius);
440
+ color: var(--text);
441
+ transition: all 0.15s;
442
+ }
443
+
444
+ .page-card:hover {
445
+ background: var(--accent-light);
446
+ border-color: var(--accent);
447
+ text-decoration: none;
448
+ transform: translateY(-1px);
449
+ box-shadow: 0 2px 8px rgba(0,0,0,0.06);
450
+ }
451
+
452
+ .card-title {
453
+ font-weight: 600;
454
+ font-size: 14px;
455
+ }
456
+
457
+ .quick-links {
458
+ display: flex;
459
+ gap: 12px;
460
+ margin-bottom: 32px;
461
+ }
462
+
463
+ .quick-link {
464
+ padding: 12px 20px;
465
+ background: var(--bg-alt);
466
+ border: 1px solid var(--border);
467
+ border-radius: var(--radius);
468
+ font-size: 14px;
469
+ color: var(--text);
470
+ }
471
+
472
+ .quick-link:hover {
473
+ background: var(--accent-light);
474
+ text-decoration: none;
475
+ }
476
+
477
+ /* Graph page */
478
+ .graph-page {
479
+ text-align: center;
480
+ }
481
+
482
+ .graph-page h1 {
483
+ border: none;
484
+ margin-bottom: 8px;
485
+ }
486
+
487
+ .graph-desc {
488
+ color: var(--text-muted);
489
+ font-size: 14px;
490
+ margin-bottom: 16px;
491
+ }
492
+
493
+ #graph-container {
494
+ width: 100%;
495
+ height: calc(100vh - 200px);
496
+ border: 1px solid var(--border);
497
+ border-radius: var(--radius);
498
+ background: var(--bg-alt);
499
+ }
500
+
501
+ #graph-container svg {
502
+ width: 100%;
503
+ height: 100%;
504
+ }
505
+
506
+ /* Permalink */
507
+ .headerlink {
508
+ color: var(--text-muted);
509
+ font-size: 0.7em;
510
+ margin-left: 4px;
511
+ opacity: 0;
512
+ transition: opacity 0.2s;
513
+ }
514
+
515
+ h2:hover .headerlink,
516
+ h3:hover .headerlink,
517
+ h4:hover .headerlink {
518
+ opacity: 1;
519
+ }
520
+
521
+ /* Page type badge */
522
+ .page-type-badge {
523
+ display: inline-block;
524
+ font-size: 12px;
525
+ font-weight: 600;
526
+ padding: 2px 10px;
527
+ border-radius: 12px;
528
+ margin-bottom: 8px;
529
+ }
530
+
531
+ .page-type-badge.source {
532
+ background: #e3f2fd;
533
+ color: #1565c0;
534
+ }
535
+
536
+ .page-type-badge.concept {
537
+ background: var(--accent-light);
538
+ color: #2e7d32;
539
+ }
540
+
541
+ /* Sidebar tabs */
542
+ .sidebar-tabs {
543
+ display: flex;
544
+ border-bottom: 1px solid var(--border);
545
+ padding: 0;
546
+ position: sticky;
547
+ top: 0;
548
+ background: var(--bg-alt);
549
+ z-index: 10;
550
+ }
551
+
552
+ .sidebar-tab {
553
+ flex: 1;
554
+ padding: 10px 8px;
555
+ border: none;
556
+ background: none;
557
+ font-size: 13px;
558
+ font-weight: 600;
559
+ color: var(--text-muted);
560
+ cursor: pointer;
561
+ border-bottom: 2px solid transparent;
562
+ transition: all 0.15s;
563
+ }
564
+
565
+ .sidebar-tab:hover {
566
+ color: var(--text);
567
+ background: var(--bg-hover);
568
+ }
569
+
570
+ .sidebar-tab.active {
571
+ color: var(--accent);
572
+ border-bottom-color: var(--accent);
573
+ }
574
+
575
+ .sidebar-panel {
576
+ display: none;
577
+ }
578
+
579
+ .sidebar-panel.active {
580
+ display: block;
581
+ }
582
+
583
+ /* Backlink groups */
584
+ .backlink-group {
585
+ display: flex;
586
+ flex-wrap: wrap;
587
+ align-items: center;
588
+ gap: 6px;
589
+ margin-bottom: 8px;
590
+ }
591
+
592
+ .backlink-label {
593
+ font-size: 12px;
594
+ font-weight: 600;
595
+ color: var(--text-muted);
596
+ margin-right: 4px;
597
+ }
598
+
599
+ /* External refs */
600
+ .external-refs {
601
+ margin-top: 32px;
602
+ padding: 16px;
603
+ background: #f0f7ff;
604
+ border: 1px solid #bdd7ee;
605
+ border-radius: var(--radius);
606
+ }
607
+
608
+ .external-refs h3 {
609
+ font-size: 14px;
610
+ color: #1565c0;
611
+ font-weight: 600;
612
+ margin-bottom: 8px;
613
+ }
614
+
615
+ .external-refs ul {
616
+ list-style: none;
617
+ margin: 0;
618
+ padding: 0;
619
+ }
620
+
621
+ .external-refs li {
622
+ margin-bottom: 4px;
623
+ }
624
+
625
+ .external-refs a {
626
+ font-size: 13px;
627
+ color: #1565c0;
628
+ }
629
+
630
+ /* Backlink type indicators */
631
+ .backlink-item.source {
632
+ border-left: 3px solid #2196f3;
633
+ }
634
+
635
+ .backlink-item.concept {
636
+ border-left: 3px solid #4caf50;
637
+ }
638
+
639
+ /* Page card types */
640
+ .page-card.source {
641
+ border-left: 3px solid #2196f3;
642
+ }
643
+
644
+ .page-card.concept {
645
+ border-left: 3px solid #4caf50;
646
+ }
647
+
648
+ .card-badge {
649
+ font-size: 12px;
650
+ margin-right: 4px;
651
+ }
652
+
653
+ /* Add tabs */
654
+ .add-tabs {
655
+ display: flex;
656
+ gap: 4px;
657
+ margin-bottom: 12px;
658
+ }
659
+
660
+ .add-tab {
661
+ padding: 6px 16px;
662
+ border: 1px solid var(--border);
663
+ background: var(--bg-alt);
664
+ border-radius: var(--radius);
665
+ font-size: 13px;
666
+ cursor: pointer;
667
+ transition: all 0.15s;
668
+ }
669
+
670
+ .add-tab.active {
671
+ background: var(--accent);
672
+ color: white;
673
+ border-color: var(--accent);
674
+ }
675
+
676
+ .add-panel {
677
+ display: none;
678
+ }
679
+
680
+ .add-panel.active {
681
+ display: flex;
682
+ }
683
+
684
+ /* File drop zone */
685
+ .file-drop {
686
+ flex: 1;
687
+ display: flex;
688
+ flex-direction: column;
689
+ align-items: center;
690
+ justify-content: center;
691
+ padding: 20px;
692
+ border: 2px dashed var(--border);
693
+ border-radius: var(--radius);
694
+ cursor: pointer;
695
+ transition: all 0.15s;
696
+ text-align: center;
697
+ }
698
+
699
+ .file-drop:hover, .file-drop.dragover {
700
+ border-color: var(--accent);
701
+ background: var(--accent-light);
702
+ }
703
+
704
+ .file-drop-text {
705
+ font-size: 14px;
706
+ font-weight: 600;
707
+ color: var(--text);
708
+ }
709
+
710
+ .file-drop-hint {
711
+ font-size: 12px;
712
+ color: var(--text-muted);
713
+ margin-top: 4px;
714
+ }
715
+
716
+ /* Add document form */
717
+ .add-form {
718
+ display: flex;
719
+ gap: 8px;
720
+ margin-bottom: 12px;
721
+ }
722
+
723
+ .add-form input {
724
+ flex: 1;
725
+ padding: 10px 14px;
726
+ border: 1px solid var(--border);
727
+ border-radius: var(--radius);
728
+ font-size: 14px;
729
+ outline: none;
730
+ transition: border-color 0.2s;
731
+ }
732
+
733
+ .add-form input:focus {
734
+ border-color: var(--accent);
735
+ box-shadow: 0 0 0 2px var(--accent-light);
736
+ }
737
+
738
+ .add-form button {
739
+ padding: 10px 20px;
740
+ background: var(--accent);
741
+ color: white;
742
+ border: none;
743
+ border-radius: var(--radius);
744
+ font-size: 14px;
745
+ font-weight: 600;
746
+ cursor: pointer;
747
+ white-space: nowrap;
748
+ transition: background 0.15s;
749
+ }
750
+
751
+ .add-form button:hover {
752
+ background: #43a047;
753
+ }
754
+
755
+ .add-form button:disabled {
756
+ background: var(--text-muted);
757
+ cursor: not-allowed;
758
+ }
759
+
760
+ .add-status {
761
+ padding: 10px 14px;
762
+ border-radius: var(--radius);
763
+ font-size: 14px;
764
+ }
765
+
766
+ .add-status.processing {
767
+ background: #fff3e0;
768
+ color: #e65100;
769
+ border: 1px solid #ffcc80;
770
+ }
771
+
772
+ .add-status.success {
773
+ background: var(--accent-light);
774
+ color: #2e7d32;
775
+ border: 1px solid #a5d6a7;
776
+ }
777
+
778
+ .add-status.error {
779
+ background: #fce4ec;
780
+ color: #c62828;
781
+ border: 1px solid #ef9a9a;
782
+ }
783
+
784
+ /* Usage stats */
785
+ .stats-grid {
786
+ display: flex;
787
+ gap: 10px;
788
+ flex-wrap: wrap;
789
+ margin-top: 12px;
790
+ }
791
+
792
+ .stat-card {
793
+ flex: 1;
794
+ min-width: 100px;
795
+ padding: 12px 16px;
796
+ background: var(--bg-alt);
797
+ border: 1px solid var(--border);
798
+ border-radius: var(--radius);
799
+ text-align: center;
800
+ }
801
+
802
+ .stat-card.accent {
803
+ background: var(--accent-light);
804
+ border-color: var(--accent);
805
+ }
806
+
807
+ .stat-value {
808
+ font-size: 20px;
809
+ font-weight: 700;
810
+ color: var(--text);
811
+ }
812
+
813
+ .stat-card.accent .stat-value {
814
+ color: #2e7d32;
815
+ }
816
+
817
+ .stat-label {
818
+ font-size: 12px;
819
+ color: var(--text-muted);
820
+ margin-top: 4px;
821
+ }
822
+
823
+ /* Graph legend */
824
+ .legend-dot {
825
+ display: inline-block;
826
+ width: 12px;
827
+ height: 12px;
828
+ border-radius: 50%;
829
+ vertical-align: middle;
830
+ margin-right: 4px;
831
+ }
832
+
833
+ .legend-dot.source {
834
+ background: #2196f3;
835
+ }
836
+
837
+ .legend-dot.concept {
838
+ background: #4caf50;
839
+ }
840
+
841
+ /* Responsive */
842
+ @media (max-width: 768px) {
843
+ .sidebar {
844
+ display: none;
845
+ }
846
+ .content {
847
+ margin-left: 0;
848
+ padding: 20px 16px;
849
+ }
850
+ .topbar-search {
851
+ max-width: 200px;
852
+ }
853
+ }