helixevo 0.2.19 → 0.2.20
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.
|
@@ -1,50 +1,52 @@
|
|
|
1
1
|
/* ════════════════════════════════════════════════════════════════
|
|
2
|
-
HelixEvo Dashboard —
|
|
3
|
-
|
|
2
|
+
HelixEvo Dashboard — Premium Warm Theme
|
|
3
|
+
Inspired by modern fintech/data platforms
|
|
4
4
|
════════════════════════════════════════════════════════════════ */
|
|
5
5
|
|
|
6
6
|
:root {
|
|
7
|
-
/* ─── Backgrounds ─── */
|
|
8
|
-
--bg: #
|
|
7
|
+
/* ─── Backgrounds (warm palette) ─── */
|
|
8
|
+
--bg: #f4f2ee;
|
|
9
9
|
--bg-card: #ffffff;
|
|
10
|
-
--bg-section: #
|
|
11
|
-
--bg-hover: #
|
|
12
|
-
--bg-input: #
|
|
13
|
-
--bg-sidebar: #
|
|
10
|
+
--bg-section: #eceae5;
|
|
11
|
+
--bg-hover: #e6e3dd;
|
|
12
|
+
--bg-input: #f4f2ee;
|
|
13
|
+
--bg-sidebar: #f9f8f5;
|
|
14
14
|
|
|
15
15
|
/* ─── Borders & Elevation ─── */
|
|
16
|
-
--border: #
|
|
17
|
-
--border-focus: #
|
|
18
|
-
--border-subtle: #
|
|
16
|
+
--border: #ddd9d1;
|
|
17
|
+
--border-focus: #c5c0b6;
|
|
18
|
+
--border-subtle: #e8e5de;
|
|
19
19
|
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
|
|
20
|
-
--shadow-md: 0 2px 8px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.
|
|
21
|
-
--shadow-lg: 0 8px 24px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.
|
|
22
|
-
--shadow-xl: 0 16px 48px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.
|
|
20
|
+
--shadow-md: 0 2px 8px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.03);
|
|
21
|
+
--shadow-lg: 0 8px 24px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.03);
|
|
22
|
+
--shadow-xl: 0 16px 48px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.04);
|
|
23
23
|
|
|
24
24
|
/* ─── Typography ─── */
|
|
25
|
-
--text: #
|
|
26
|
-
--text-secondary: #
|
|
27
|
-
--text-dim: #
|
|
28
|
-
--text-muted: #
|
|
25
|
+
--text: #1a1a17;
|
|
26
|
+
--text-secondary: #3d3d36;
|
|
27
|
+
--text-dim: #6b6b60;
|
|
28
|
+
--text-muted: #9c9c90;
|
|
29
29
|
|
|
30
30
|
/* ─── Accent Colors ─── */
|
|
31
31
|
--purple: #6d28d9;
|
|
32
32
|
--purple-light: #f3eefe;
|
|
33
33
|
--purple-border: #c4b5fd;
|
|
34
|
-
--green: #
|
|
35
|
-
--green-light: #
|
|
36
|
-
--green-border: #
|
|
37
|
-
--red: #
|
|
38
|
-
--red-light: #
|
|
39
|
-
--red-border: #
|
|
40
|
-
--yellow: #
|
|
41
|
-
--yellow-light: #
|
|
42
|
-
--yellow-border: #
|
|
34
|
+
--green: #0d7c5f;
|
|
35
|
+
--green-light: #ecf7f3;
|
|
36
|
+
--green-border: #a7d8c8;
|
|
37
|
+
--red: #c0392b;
|
|
38
|
+
--red-light: #fdf0ee;
|
|
39
|
+
--red-border: #e8a89e;
|
|
40
|
+
--yellow: #b8860b;
|
|
41
|
+
--yellow-light: #fdf6e3;
|
|
42
|
+
--yellow-border: #e0cc8a;
|
|
43
43
|
--blue: #2563eb;
|
|
44
44
|
--blue-light: #eff6ff;
|
|
45
45
|
--blue-border: #bfdbfe;
|
|
46
|
+
--teal: #0d7c5f;
|
|
47
|
+
--teal-light: #e8f5f0;
|
|
46
48
|
|
|
47
|
-
/* ─── Radius &
|
|
49
|
+
/* ─── Radius & Type ─── */
|
|
48
50
|
--radius: 8px;
|
|
49
51
|
--radius-lg: 12px;
|
|
50
52
|
--radius-xl: 16px;
|
|
@@ -52,7 +54,7 @@
|
|
|
52
54
|
--font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
|
|
53
55
|
}
|
|
54
56
|
|
|
55
|
-
/* ─── Reset
|
|
57
|
+
/* ─── Reset ─── */
|
|
56
58
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
57
59
|
|
|
58
60
|
body {
|
|
@@ -66,9 +68,9 @@ body {
|
|
|
66
68
|
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
|
|
67
69
|
}
|
|
68
70
|
|
|
69
|
-
::selection { background: var(--
|
|
70
|
-
a { color: var(--
|
|
71
|
-
a:hover { color: #
|
|
71
|
+
::selection { background: var(--teal-light); color: var(--teal); }
|
|
72
|
+
a { color: var(--teal); text-decoration: none; transition: color 0.15s; }
|
|
73
|
+
a:hover { color: #0a6149; text-decoration: none; }
|
|
72
74
|
|
|
73
75
|
code {
|
|
74
76
|
font-family: var(--font-mono);
|
|
@@ -81,11 +83,12 @@ code {
|
|
|
81
83
|
}
|
|
82
84
|
|
|
83
85
|
/* ════════════════════════════════════════════════════════════════
|
|
84
|
-
SIDEBAR —
|
|
86
|
+
SIDEBAR — Warm, light, refined
|
|
85
87
|
════════════════════════════════════════════════════════════════ */
|
|
86
88
|
.sidebar {
|
|
87
|
-
width:
|
|
89
|
+
width: 220px;
|
|
88
90
|
background: var(--bg-sidebar);
|
|
91
|
+
border-right: 1px solid var(--border);
|
|
89
92
|
padding: 0;
|
|
90
93
|
flex-shrink: 0;
|
|
91
94
|
position: sticky;
|
|
@@ -94,28 +97,27 @@ code {
|
|
|
94
97
|
display: flex;
|
|
95
98
|
flex-direction: column;
|
|
96
99
|
z-index: 20;
|
|
97
|
-
border-right: 1px solid rgba(255,255,255,0.06);
|
|
98
100
|
}
|
|
99
101
|
|
|
100
102
|
.sidebar-logo {
|
|
101
103
|
display: flex;
|
|
102
104
|
align-items: center;
|
|
103
|
-
gap:
|
|
104
|
-
padding:
|
|
105
|
-
border-bottom: 1px solid
|
|
105
|
+
gap: 11px;
|
|
106
|
+
padding: 22px 18px 18px;
|
|
107
|
+
border-bottom: 1px solid var(--border);
|
|
106
108
|
}
|
|
107
109
|
|
|
108
110
|
.logo-icon {
|
|
109
111
|
width: 34px;
|
|
110
112
|
height: 34px;
|
|
111
113
|
border-radius: 10px;
|
|
112
|
-
background: linear-gradient(135deg, #
|
|
114
|
+
background: linear-gradient(135deg, #0d7c5f, #2563eb);
|
|
113
115
|
display: flex;
|
|
114
116
|
align-items: center;
|
|
115
117
|
justify-content: center;
|
|
116
118
|
color: #fff;
|
|
117
119
|
flex-shrink: 0;
|
|
118
|
-
box-shadow: 0 2px
|
|
120
|
+
box-shadow: 0 2px 10px rgba(13,124,95,0.25);
|
|
119
121
|
}
|
|
120
122
|
|
|
121
123
|
.nav-item {
|
|
@@ -124,37 +126,32 @@ code {
|
|
|
124
126
|
gap: 10px;
|
|
125
127
|
padding: 9px 14px;
|
|
126
128
|
border-radius: 8px;
|
|
127
|
-
color:
|
|
129
|
+
color: var(--text-dim);
|
|
128
130
|
font-size: 13px;
|
|
129
131
|
font-weight: 500;
|
|
130
|
-
margin: 1px
|
|
132
|
+
margin: 1px 6px;
|
|
131
133
|
text-decoration: none;
|
|
132
134
|
transition: all 0.15s ease;
|
|
133
|
-
position: relative;
|
|
134
135
|
}
|
|
135
136
|
.nav-item:hover {
|
|
136
|
-
background:
|
|
137
|
-
color:
|
|
137
|
+
background: var(--bg-hover);
|
|
138
|
+
color: var(--text);
|
|
138
139
|
text-decoration: none;
|
|
139
140
|
}
|
|
140
|
-
.nav-item svg {
|
|
141
|
-
stroke: currentColor;
|
|
142
|
-
}
|
|
143
141
|
|
|
144
142
|
.sidebar-footer {
|
|
145
|
-
padding:
|
|
146
|
-
border-top: 1px solid
|
|
143
|
+
padding: 14px 18px;
|
|
144
|
+
border-top: 1px solid var(--border);
|
|
147
145
|
font-size: 11px;
|
|
148
|
-
color:
|
|
146
|
+
color: var(--text-muted);
|
|
149
147
|
display: flex;
|
|
150
148
|
justify-content: space-between;
|
|
151
149
|
align-items: center;
|
|
152
150
|
}
|
|
153
151
|
|
|
154
|
-
/* ─── Main Content ─── */
|
|
155
152
|
.main-content {
|
|
156
153
|
flex: 1;
|
|
157
|
-
padding: 36px
|
|
154
|
+
padding: 36px 44px;
|
|
158
155
|
max-width: 1320px;
|
|
159
156
|
min-height: 100vh;
|
|
160
157
|
}
|
|
@@ -162,7 +159,7 @@ code {
|
|
|
162
159
|
/* ════════════════════════════════════════════════════════════════
|
|
163
160
|
PAGE HEADERS
|
|
164
161
|
════════════════════════════════════════════════════════════════ */
|
|
165
|
-
.page-header { margin-bottom:
|
|
162
|
+
.page-header { margin-bottom: 28px; }
|
|
166
163
|
.page-title {
|
|
167
164
|
font-size: 26px;
|
|
168
165
|
font-weight: 800;
|
|
@@ -179,14 +176,14 @@ code {
|
|
|
179
176
|
}
|
|
180
177
|
|
|
181
178
|
/* ════════════════════════════════════════════════════════════════
|
|
182
|
-
CARDS
|
|
179
|
+
CARDS
|
|
183
180
|
════════════════════════════════════════════════════════════════ */
|
|
184
181
|
.card {
|
|
185
182
|
background: var(--bg-card);
|
|
186
183
|
border: 1px solid var(--border);
|
|
187
184
|
border-radius: var(--radius-lg);
|
|
188
185
|
box-shadow: var(--shadow-sm);
|
|
189
|
-
transition: box-shadow 0.25s ease, border-color 0.25s ease
|
|
186
|
+
transition: box-shadow 0.25s ease, border-color 0.25s ease;
|
|
190
187
|
}
|
|
191
188
|
.card:hover {
|
|
192
189
|
box-shadow: var(--shadow-md);
|
|
@@ -204,7 +201,7 @@ code {
|
|
|
204
201
|
}
|
|
205
202
|
|
|
206
203
|
/* ════════════════════════════════════════════════════════════════
|
|
207
|
-
BADGES
|
|
204
|
+
BADGES
|
|
208
205
|
════════════════════════════════════════════════════════════════ */
|
|
209
206
|
.badge {
|
|
210
207
|
display: inline-flex;
|
|
@@ -318,7 +315,7 @@ code {
|
|
|
318
315
|
border: 1px solid var(--purple-border);
|
|
319
316
|
}
|
|
320
317
|
.layer-evolved {
|
|
321
|
-
background: linear-gradient(135deg, #
|
|
318
|
+
background: linear-gradient(135deg, #ecf7f3, #d1f0e5);
|
|
322
319
|
border: 1px solid var(--green-border);
|
|
323
320
|
}
|
|
324
321
|
.layer-original {
|
|
@@ -326,7 +323,7 @@ code {
|
|
|
326
323
|
border: 1px solid var(--border);
|
|
327
324
|
}
|
|
328
325
|
.layer-project {
|
|
329
|
-
background: linear-gradient(135deg, #
|
|
326
|
+
background: linear-gradient(135deg, #fdf6e3, #faefc7);
|
|
330
327
|
border: 1px solid var(--yellow-border);
|
|
331
328
|
}
|
|
332
329
|
|
|
@@ -348,8 +345,8 @@ code {
|
|
|
348
345
|
transform: translateY(-1px);
|
|
349
346
|
}
|
|
350
347
|
.skill-card.selected {
|
|
351
|
-
border-color: var(--
|
|
352
|
-
box-shadow: 0 0 0 2px var(--
|
|
348
|
+
border-color: var(--teal);
|
|
349
|
+
box-shadow: 0 0 0 2px var(--teal-light), var(--shadow-md);
|
|
353
350
|
}
|
|
354
351
|
|
|
355
352
|
/* ─── Flow Labels ─── */
|
|
@@ -393,7 +390,6 @@ code {
|
|
|
393
390
|
box-shadow: 0 0 0 2px var(--border);
|
|
394
391
|
}
|
|
395
392
|
|
|
396
|
-
/* ─── Detail Panel ─── */
|
|
397
393
|
.detail-panel {
|
|
398
394
|
background: var(--bg-card);
|
|
399
395
|
border-left: 1px solid var(--border);
|
|
@@ -443,9 +439,7 @@ code {
|
|
|
443
439
|
line-height: 1.55;
|
|
444
440
|
}
|
|
445
441
|
|
|
446
|
-
/*
|
|
447
|
-
STAT CARDS
|
|
448
|
-
════════════════════════════════════════════════════════════════ */
|
|
442
|
+
/* ═══ Stat Cards ═══ */
|
|
449
443
|
.stat-grid {
|
|
450
444
|
display: grid;
|
|
451
445
|
gap: 14px;
|
|
@@ -458,8 +452,6 @@ code {
|
|
|
458
452
|
padding: 20px 22px;
|
|
459
453
|
box-shadow: var(--shadow-sm);
|
|
460
454
|
transition: all 0.25s ease;
|
|
461
|
-
position: relative;
|
|
462
|
-
overflow: hidden;
|
|
463
455
|
}
|
|
464
456
|
.stat-card:hover {
|
|
465
457
|
box-shadow: var(--shadow-md);
|
|
@@ -482,7 +474,6 @@ code {
|
|
|
482
474
|
background: var(--bg-hover) !important;
|
|
483
475
|
}
|
|
484
476
|
|
|
485
|
-
/* ─── View Header ─── */
|
|
486
477
|
.view-header {
|
|
487
478
|
display: flex;
|
|
488
479
|
justify-content: space-between;
|
|
@@ -521,7 +512,6 @@ code {
|
|
|
521
512
|
border-color: var(--border-focus);
|
|
522
513
|
}
|
|
523
514
|
|
|
524
|
-
/* ─── Score Pill ─── */
|
|
525
515
|
.score-pill {
|
|
526
516
|
display: inline-flex;
|
|
527
517
|
align-items: center;
|
|
@@ -545,24 +535,22 @@ code {
|
|
|
545
535
|
/* ════════════════════════════════════════════════════════════════
|
|
546
536
|
GUIDE PAGE
|
|
547
537
|
════════════════════════════════════════════════════════════════ */
|
|
548
|
-
|
|
549
538
|
.guide-layout {
|
|
550
539
|
display: flex;
|
|
551
540
|
gap: 0;
|
|
552
|
-
margin: -36px -
|
|
541
|
+
margin: -36px -44px;
|
|
553
542
|
min-height: 100vh;
|
|
554
543
|
}
|
|
555
544
|
|
|
556
|
-
/* ─── Sidebar TOC ─── */
|
|
557
545
|
.guide-toc {
|
|
558
|
-
width:
|
|
546
|
+
width: 220px;
|
|
559
547
|
flex-shrink: 0;
|
|
560
548
|
position: sticky;
|
|
561
549
|
top: 0;
|
|
562
550
|
height: 100vh;
|
|
563
551
|
overflow-y: auto;
|
|
564
552
|
border-right: 1px solid var(--border);
|
|
565
|
-
background: var(--bg-
|
|
553
|
+
background: var(--bg-sidebar);
|
|
566
554
|
padding-bottom: 20px;
|
|
567
555
|
}
|
|
568
556
|
.guide-toc-header {
|
|
@@ -600,13 +588,13 @@ code {
|
|
|
600
588
|
}
|
|
601
589
|
.guide-toc-item:hover {
|
|
602
590
|
color: var(--text);
|
|
603
|
-
background: var(--bg-
|
|
591
|
+
background: var(--bg-hover);
|
|
604
592
|
text-decoration: none;
|
|
605
593
|
}
|
|
606
594
|
.guide-toc-item.active {
|
|
607
|
-
color: var(--
|
|
608
|
-
border-left-color: var(--
|
|
609
|
-
background: var(--
|
|
595
|
+
color: var(--teal);
|
|
596
|
+
border-left-color: var(--teal);
|
|
597
|
+
background: var(--teal-light);
|
|
610
598
|
font-weight: 600;
|
|
611
599
|
}
|
|
612
600
|
.guide-toc-icon {
|
|
@@ -618,7 +606,6 @@ code {
|
|
|
618
606
|
}
|
|
619
607
|
.guide-toc-item.active .guide-toc-icon { opacity: 1; }
|
|
620
608
|
|
|
621
|
-
/* ─── Content area ─── */
|
|
622
609
|
.guide-content {
|
|
623
610
|
flex: 1;
|
|
624
611
|
max-width: 860px;
|
|
@@ -626,7 +613,6 @@ code {
|
|
|
626
613
|
margin: 0 auto;
|
|
627
614
|
}
|
|
628
615
|
|
|
629
|
-
/* ─── Hero ─── */
|
|
630
616
|
.guide-hero {
|
|
631
617
|
padding: 56px 0 44px;
|
|
632
618
|
border-bottom: 1px solid var(--border);
|
|
@@ -638,8 +624,8 @@ code {
|
|
|
638
624
|
font-weight: 700;
|
|
639
625
|
text-transform: uppercase;
|
|
640
626
|
letter-spacing: 1.5px;
|
|
641
|
-
color: var(--
|
|
642
|
-
background: var(--
|
|
627
|
+
color: var(--teal);
|
|
628
|
+
background: var(--teal-light);
|
|
643
629
|
padding: 4px 14px;
|
|
644
630
|
border-radius: 20px;
|
|
645
631
|
margin-bottom: 18px;
|
|
@@ -665,7 +651,6 @@ code {
|
|
|
665
651
|
margin-top: 36px;
|
|
666
652
|
}
|
|
667
653
|
|
|
668
|
-
/* ─── Feature Cards ─── */
|
|
669
654
|
.guide-feature-card {
|
|
670
655
|
background: var(--bg-card);
|
|
671
656
|
border: 1px solid var(--border);
|
|
@@ -701,7 +686,6 @@ code {
|
|
|
701
686
|
line-height: 1.55;
|
|
702
687
|
}
|
|
703
688
|
|
|
704
|
-
/* ─── Sections ─── */
|
|
705
689
|
.guide-section {
|
|
706
690
|
padding-top: 44px;
|
|
707
691
|
margin-bottom: 16px;
|
|
@@ -729,7 +713,6 @@ code {
|
|
|
729
713
|
letter-spacing: -0.3px;
|
|
730
714
|
}
|
|
731
715
|
|
|
732
|
-
/* ─── Text ─── */
|
|
733
716
|
.guide-text {
|
|
734
717
|
font-size: 14px;
|
|
735
718
|
color: var(--text-secondary);
|
|
@@ -752,22 +735,19 @@ code {
|
|
|
752
735
|
line-height: 1.7;
|
|
753
736
|
margin-bottom: 6px;
|
|
754
737
|
}
|
|
755
|
-
.guide-list li strong {
|
|
756
|
-
color: var(--text);
|
|
757
|
-
}
|
|
738
|
+
.guide-list li strong { color: var(--text); }
|
|
758
739
|
|
|
759
|
-
/* ─── Code Blocks ─── */
|
|
760
740
|
.guide-code-block {
|
|
761
|
-
background: #
|
|
741
|
+
background: #1a1b26;
|
|
762
742
|
border-radius: var(--radius-lg);
|
|
763
743
|
overflow: hidden;
|
|
764
744
|
margin: 12px 0 16px;
|
|
765
|
-
border: 1px solid rgba(255,255,255,0.
|
|
745
|
+
border: 1px solid rgba(255,255,255,0.06);
|
|
766
746
|
}
|
|
767
747
|
.guide-code-title {
|
|
768
748
|
font-size: 11px;
|
|
769
749
|
font-weight: 600;
|
|
770
|
-
color: #
|
|
750
|
+
color: #7a7f8d;
|
|
771
751
|
padding: 10px 16px 0;
|
|
772
752
|
letter-spacing: 0.3px;
|
|
773
753
|
font-family: var(--font-mono);
|
|
@@ -780,7 +760,7 @@ code {
|
|
|
780
760
|
font-family: var(--font-mono);
|
|
781
761
|
font-size: 12.5px;
|
|
782
762
|
line-height: 1.65;
|
|
783
|
-
color: #
|
|
763
|
+
color: #c0caf5;
|
|
784
764
|
background: none;
|
|
785
765
|
padding: 0;
|
|
786
766
|
border-radius: 0;
|
|
@@ -788,7 +768,6 @@ code {
|
|
|
788
768
|
tab-size: 2;
|
|
789
769
|
}
|
|
790
770
|
|
|
791
|
-
/* ─── Callout ─── */
|
|
792
771
|
.guide-callout {
|
|
793
772
|
display: flex;
|
|
794
773
|
gap: 12px;
|
|
@@ -800,16 +779,13 @@ code {
|
|
|
800
779
|
line-height: 1.6;
|
|
801
780
|
color: var(--text-secondary);
|
|
802
781
|
}
|
|
803
|
-
.guide-callout code {
|
|
804
|
-
font-size: 11.5px;
|
|
805
|
-
}
|
|
782
|
+
.guide-callout code { font-size: 11.5px; }
|
|
806
783
|
.guide-callout-icon {
|
|
807
784
|
font-size: 14px;
|
|
808
785
|
flex-shrink: 0;
|
|
809
786
|
margin-top: 1px;
|
|
810
787
|
}
|
|
811
788
|
|
|
812
|
-
/* ─── Steps ─── */
|
|
813
789
|
.guide-step {
|
|
814
790
|
display: flex;
|
|
815
791
|
gap: 16px;
|
|
@@ -819,7 +795,7 @@ code {
|
|
|
819
795
|
width: 30px;
|
|
820
796
|
height: 30px;
|
|
821
797
|
border-radius: 50%;
|
|
822
|
-
background: linear-gradient(135deg, #
|
|
798
|
+
background: linear-gradient(135deg, #0d7c5f, #2563eb);
|
|
823
799
|
color: #fff;
|
|
824
800
|
font-size: 13px;
|
|
825
801
|
font-weight: 700;
|
|
@@ -828,12 +804,9 @@ code {
|
|
|
828
804
|
justify-content: center;
|
|
829
805
|
flex-shrink: 0;
|
|
830
806
|
margin-top: 2px;
|
|
831
|
-
box-shadow: 0 2px 8px rgba(
|
|
832
|
-
}
|
|
833
|
-
.guide-step-content {
|
|
834
|
-
flex: 1;
|
|
835
|
-
min-width: 0;
|
|
807
|
+
box-shadow: 0 2px 8px rgba(13,124,95,0.2);
|
|
836
808
|
}
|
|
809
|
+
.guide-step-content { flex: 1; min-width: 0; }
|
|
837
810
|
.guide-step-title {
|
|
838
811
|
font-size: 14px;
|
|
839
812
|
font-weight: 700;
|
|
@@ -841,7 +814,6 @@ code {
|
|
|
841
814
|
margin-bottom: 4px;
|
|
842
815
|
}
|
|
843
816
|
|
|
844
|
-
/* ─── Directions ─── */
|
|
845
817
|
.guide-directions {
|
|
846
818
|
display: flex;
|
|
847
819
|
flex-direction: column;
|
|
@@ -878,7 +850,6 @@ code {
|
|
|
878
850
|
line-height: 1.5;
|
|
879
851
|
}
|
|
880
852
|
|
|
881
|
-
/* ─── Architecture Diagram ─── */
|
|
882
853
|
.guide-diagram {
|
|
883
854
|
margin: 20px 0 28px;
|
|
884
855
|
padding: 28px;
|
|
@@ -916,18 +887,10 @@ code {
|
|
|
916
887
|
opacity: 0.7;
|
|
917
888
|
line-height: 1.4;
|
|
918
889
|
}
|
|
919
|
-
.guide-diagram-input {
|
|
920
|
-
|
|
921
|
-
}
|
|
922
|
-
.guide-diagram-
|
|
923
|
-
background: var(--purple-light); border-color: var(--purple-border); color: var(--purple);
|
|
924
|
-
}
|
|
925
|
-
.guide-diagram-judge {
|
|
926
|
-
background: var(--green-light); border-color: var(--green-border); color: var(--green);
|
|
927
|
-
}
|
|
928
|
-
.guide-diagram-check {
|
|
929
|
-
background: var(--yellow-light); border-color: var(--yellow-border); color: var(--yellow);
|
|
930
|
-
}
|
|
890
|
+
.guide-diagram-input { background: var(--blue-light); border-color: var(--blue-border); color: var(--blue); }
|
|
891
|
+
.guide-diagram-process { background: var(--purple-light); border-color: var(--purple-border); color: var(--purple); }
|
|
892
|
+
.guide-diagram-judge { background: var(--green-light); border-color: var(--green-border); color: var(--green); }
|
|
893
|
+
.guide-diagram-check { background: var(--yellow-light); border-color: var(--yellow-border); color: var(--yellow); }
|
|
931
894
|
.guide-diagram-output {
|
|
932
895
|
background: linear-gradient(135deg, var(--blue-light), var(--purple-light));
|
|
933
896
|
border-color: var(--blue-border); color: var(--blue);
|
|
@@ -947,10 +910,7 @@ code {
|
|
|
947
910
|
padding: 8px 0;
|
|
948
911
|
}
|
|
949
912
|
|
|
950
|
-
|
|
951
|
-
.guide-hierarchy {
|
|
952
|
-
margin: 20px 0 28px;
|
|
953
|
-
}
|
|
913
|
+
.guide-hierarchy { margin: 20px 0 28px; }
|
|
954
914
|
.guide-hierarchy-level {
|
|
955
915
|
padding: 18px 24px;
|
|
956
916
|
border-radius: var(--radius-lg);
|
|
@@ -963,10 +923,7 @@ code {
|
|
|
963
923
|
letter-spacing: 1px;
|
|
964
924
|
margin-bottom: 4px;
|
|
965
925
|
}
|
|
966
|
-
.guide-hierarchy-desc {
|
|
967
|
-
font-size: 13px;
|
|
968
|
-
margin-bottom: 6px;
|
|
969
|
-
}
|
|
926
|
+
.guide-hierarchy-desc { font-size: 13px; margin-bottom: 6px; }
|
|
970
927
|
.guide-hierarchy-examples {
|
|
971
928
|
font-size: 11px;
|
|
972
929
|
font-family: var(--font-mono);
|
|
@@ -974,18 +931,15 @@ code {
|
|
|
974
931
|
}
|
|
975
932
|
.guide-hierarchy-system {
|
|
976
933
|
background: linear-gradient(135deg, #faf5ff, #ede9fe);
|
|
977
|
-
border-color: var(--purple-border);
|
|
978
|
-
color: var(--purple);
|
|
934
|
+
border-color: var(--purple-border); color: var(--purple);
|
|
979
935
|
}
|
|
980
936
|
.guide-hierarchy-domain {
|
|
981
937
|
background: linear-gradient(135deg, #eff6ff, #dbeafe);
|
|
982
|
-
border-color: var(--blue-border);
|
|
983
|
-
color: var(--blue);
|
|
938
|
+
border-color: var(--blue-border); color: var(--blue);
|
|
984
939
|
}
|
|
985
940
|
.guide-hierarchy-project {
|
|
986
|
-
background: linear-gradient(135deg, #
|
|
987
|
-
border-color: var(--green-border);
|
|
988
|
-
color: var(--green);
|
|
941
|
+
background: linear-gradient(135deg, #ecf7f3, #d1f0e5);
|
|
942
|
+
border-color: var(--green-border); color: var(--green);
|
|
989
943
|
}
|
|
990
944
|
.guide-hierarchy-connector {
|
|
991
945
|
display: flex;
|
|
@@ -997,10 +951,7 @@ code {
|
|
|
997
951
|
font-weight: 500;
|
|
998
952
|
}
|
|
999
953
|
|
|
1000
|
-
|
|
1001
|
-
.guide-pipeline {
|
|
1002
|
-
margin: 16px 0;
|
|
1003
|
-
}
|
|
954
|
+
.guide-pipeline { margin: 16px 0; }
|
|
1004
955
|
.guide-pipeline-step {
|
|
1005
956
|
display: flex;
|
|
1006
957
|
align-items: flex-start;
|
|
@@ -1025,7 +976,6 @@ code {
|
|
|
1025
976
|
margin-left: 16px;
|
|
1026
977
|
}
|
|
1027
978
|
|
|
1028
|
-
/* ─── Judge Cards ─── */
|
|
1029
979
|
.guide-judges-grid {
|
|
1030
980
|
display: grid;
|
|
1031
981
|
grid-template-columns: repeat(3, 1fr);
|
|
@@ -1056,18 +1006,9 @@ code {
|
|
|
1056
1006
|
font-weight: 800;
|
|
1057
1007
|
flex-shrink: 0;
|
|
1058
1008
|
}
|
|
1059
|
-
.guide-judge-name {
|
|
1060
|
-
|
|
1061
|
-
font-weight: 700;
|
|
1062
|
-
color: var(--text);
|
|
1063
|
-
}
|
|
1064
|
-
.guide-judge-role {
|
|
1065
|
-
font-size: 11px;
|
|
1066
|
-
color: var(--text-dim);
|
|
1067
|
-
margin-top: 1px;
|
|
1068
|
-
}
|
|
1009
|
+
.guide-judge-name { font-size: 14px; font-weight: 700; color: var(--text); }
|
|
1010
|
+
.guide-judge-role { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
|
|
1069
1011
|
|
|
1070
|
-
/* ─── Dimension Cards ─── */
|
|
1071
1012
|
.guide-dimension-card {
|
|
1072
1013
|
padding: 14px 18px;
|
|
1073
1014
|
background: var(--bg-card);
|
|
@@ -1076,7 +1017,6 @@ code {
|
|
|
1076
1017
|
border-radius: var(--radius);
|
|
1077
1018
|
}
|
|
1078
1019
|
|
|
1079
|
-
/* ─── Edge Grid ─── */
|
|
1080
1020
|
.guide-edge-grid {
|
|
1081
1021
|
display: flex;
|
|
1082
1022
|
flex-direction: column;
|
|
@@ -1099,12 +1039,8 @@ code {
|
|
|
1099
1039
|
width: 100px;
|
|
1100
1040
|
flex-shrink: 0;
|
|
1101
1041
|
}
|
|
1102
|
-
.guide-edge-desc {
|
|
1103
|
-
font-size: 13px;
|
|
1104
|
-
color: var(--text-dim);
|
|
1105
|
-
}
|
|
1042
|
+
.guide-edge-desc { font-size: 13px; color: var(--text-dim); }
|
|
1106
1043
|
|
|
1107
|
-
/* ─── Command Grid ─── */
|
|
1108
1044
|
.guide-command-grid {
|
|
1109
1045
|
display: flex;
|
|
1110
1046
|
flex-direction: column;
|
|
@@ -1126,8 +1062,8 @@ code {
|
|
|
1126
1062
|
font-family: var(--font-mono);
|
|
1127
1063
|
font-size: 13px;
|
|
1128
1064
|
font-weight: 600;
|
|
1129
|
-
color: var(--
|
|
1130
|
-
background: var(--
|
|
1065
|
+
color: var(--teal);
|
|
1066
|
+
background: var(--teal-light);
|
|
1131
1067
|
padding: 3px 10px;
|
|
1132
1068
|
border-radius: 5px;
|
|
1133
1069
|
}
|
|
@@ -1153,7 +1089,6 @@ code {
|
|
|
1153
1089
|
border: 1px solid var(--border-subtle);
|
|
1154
1090
|
}
|
|
1155
1091
|
|
|
1156
|
-
/* ─── Config Params ─── */
|
|
1157
1092
|
.guide-params {
|
|
1158
1093
|
margin: 8px 0 20px;
|
|
1159
1094
|
border: 1px solid var(--border);
|
|
@@ -1170,8 +1105,8 @@ code {
|
|
|
1170
1105
|
font-family: var(--font-mono);
|
|
1171
1106
|
font-size: 12px;
|
|
1172
1107
|
font-weight: 600;
|
|
1173
|
-
color: var(--
|
|
1174
|
-
background: var(--
|
|
1108
|
+
color: var(--teal);
|
|
1109
|
+
background: var(--teal-light);
|
|
1175
1110
|
padding: 1px 6px;
|
|
1176
1111
|
border-radius: 4px;
|
|
1177
1112
|
}
|
|
@@ -1191,7 +1126,6 @@ code {
|
|
|
1191
1126
|
line-height: 1.5;
|
|
1192
1127
|
}
|
|
1193
1128
|
|
|
1194
|
-
/* ─── Data Cards ─── */
|
|
1195
1129
|
.guide-data-card {
|
|
1196
1130
|
background: var(--bg-card);
|
|
1197
1131
|
border: 1px solid var(--border);
|
|
@@ -1207,7 +1141,6 @@ code {
|
|
|
1207
1141
|
padding: 12px 16px 0;
|
|
1208
1142
|
}
|
|
1209
1143
|
|
|
1210
|
-
/* ─── FAQ ─── */
|
|
1211
1144
|
.guide-faq-item {
|
|
1212
1145
|
border: 1px solid var(--border);
|
|
1213
1146
|
border-radius: var(--radius);
|
|
@@ -1216,12 +1149,10 @@ code {
|
|
|
1216
1149
|
transition: all 0.2s ease;
|
|
1217
1150
|
overflow: hidden;
|
|
1218
1151
|
}
|
|
1219
|
-
.guide-faq-item:hover {
|
|
1220
|
-
border-color: var(--border-focus);
|
|
1221
|
-
}
|
|
1152
|
+
.guide-faq-item:hover { border-color: var(--border-focus); }
|
|
1222
1153
|
.guide-faq-item.open {
|
|
1223
|
-
border-color: var(--
|
|
1224
|
-
box-shadow: 0 0 0 1px var(--
|
|
1154
|
+
border-color: var(--green-border);
|
|
1155
|
+
box-shadow: 0 0 0 1px var(--green-light);
|
|
1225
1156
|
}
|
|
1226
1157
|
.guide-faq-question {
|
|
1227
1158
|
display: flex;
|
|
@@ -1252,7 +1183,6 @@ code {
|
|
|
1252
1183
|
to { opacity: 1; transform: translateY(0); }
|
|
1253
1184
|
}
|
|
1254
1185
|
|
|
1255
|
-
/* ─── Footer ─── */
|
|
1256
1186
|
.guide-footer {
|
|
1257
1187
|
margin-top: 48px;
|
|
1258
1188
|
padding-top: 24px;
|
package/dashboard/app/layout.tsx
CHANGED
|
@@ -43,14 +43,14 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
|
|
43
43
|
</svg>
|
|
44
44
|
</div>
|
|
45
45
|
<div>
|
|
46
|
-
<div style={{ fontSize: 15, fontWeight: 700, color: '
|
|
47
|
-
<div style={{ fontSize: 10, color: '
|
|
46
|
+
<div style={{ fontSize: 15, fontWeight: 700, color: 'var(--text)', letterSpacing: -0.3 }}>HelixEvo</div>
|
|
47
|
+
<div style={{ fontSize: 10, color: 'var(--text-muted)', letterSpacing: 0.3 }}>Co-evolving AI Skills</div>
|
|
48
48
|
</div>
|
|
49
49
|
</div>
|
|
50
50
|
|
|
51
51
|
{/* Nav items */}
|
|
52
|
-
<div style={{ padding: '16px
|
|
53
|
-
<div style={{ fontSize: 9, fontWeight: 600, color: '
|
|
52
|
+
<div style={{ padding: '16px 6px', flex: 1 }}>
|
|
53
|
+
<div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 1.5, padding: '0 14px 10px' }}>
|
|
54
54
|
Navigation
|
|
55
55
|
</div>
|
|
56
56
|
{NAV.map(n => (
|
|
@@ -64,10 +64,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
|
|
64
64
|
{/* Footer */}
|
|
65
65
|
<div className="sidebar-footer">
|
|
66
66
|
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
|
67
|
-
<div style={{ width: 6, height: 6, borderRadius: '50%', background: '
|
|
67
|
+
<div style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--green)' }} />
|
|
68
68
|
<span>System Active</span>
|
|
69
69
|
</div>
|
|
70
|
-
<code style={{ fontSize: 10, background: '
|
|
70
|
+
<code style={{ fontSize: 10, background: 'var(--bg-section)', padding: '2px 7px', borderRadius: 4 }}>v{VERSION}</code>
|
|
71
71
|
</div>
|
|
72
72
|
</nav>
|
|
73
73
|
|
|
@@ -585,30 +585,7 @@ export default function NetworkClient({
|
|
|
585
585
|
|
|
586
586
|
function GraphView({ flowNodes, flowEdges, stats }: { flowNodes: Node[]; flowEdges: Edge[]; stats: Props['stats'] }) {
|
|
587
587
|
return (
|
|
588
|
-
<div style={{ height: 'calc(100vh - 200px)', width: '100%', borderRadius: 12, overflow: 'hidden', border: '1px solid var(--border)', background: '
|
|
589
|
-
{/* Column Headers */}
|
|
590
|
-
<div style={{
|
|
591
|
-
position: 'absolute', top: 8, left: 0, right: 0, zIndex: 10,
|
|
592
|
-
display: 'flex', justifyContent: 'space-around', padding: '0 60px',
|
|
593
|
-
pointerEvents: 'none',
|
|
594
|
-
}}>
|
|
595
|
-
{[
|
|
596
|
-
{ label: 'GENERALIZED', color: '#7c3aed', count: stats.generalized },
|
|
597
|
-
{ label: 'EVOLVED', color: '#16a34a', count: stats.evolved },
|
|
598
|
-
{ label: 'ORIGINAL', color: '#6b7280', count: stats.original },
|
|
599
|
-
{ label: 'PROJECTS', color: '#b45309', count: 0 },
|
|
600
|
-
].map(col => (
|
|
601
|
-
<div key={col.label} style={{
|
|
602
|
-
background: '#fff', border: '1px solid #e5e7eb', borderRadius: 8,
|
|
603
|
-
padding: '5px 14px', textAlign: 'center',
|
|
604
|
-
boxShadow: '0 1px 4px rgba(0,0,0,0.05)',
|
|
605
|
-
}}>
|
|
606
|
-
<div style={{ fontSize: 9, fontWeight: 700, letterSpacing: 1.5, color: col.color }}>{col.label}</div>
|
|
607
|
-
{col.count > 0 && <div style={{ fontSize: 9, color: '#9ca3af', marginTop: 1 }}>{col.count} skills</div>}
|
|
608
|
-
</div>
|
|
609
|
-
))}
|
|
610
|
-
</div>
|
|
611
|
-
|
|
588
|
+
<div style={{ position: 'relative', height: 'calc(100vh - 200px)', width: '100%', borderRadius: 12, overflow: 'hidden', border: '1px solid var(--border)', background: 'var(--bg)' }}>
|
|
612
589
|
<ReactFlow
|
|
613
590
|
nodes={flowNodes}
|
|
614
591
|
edges={flowEdges}
|
|
@@ -617,20 +594,20 @@ function GraphView({ flowNodes, flowEdges, stats }: { flowNodes: Node[]; flowEdg
|
|
|
617
594
|
fitView
|
|
618
595
|
fitViewOptions={{ padding: 0.2 }}
|
|
619
596
|
proOptions={{ hideAttribution: true }}
|
|
620
|
-
style={{ background: '
|
|
597
|
+
style={{ background: 'var(--bg)' }}
|
|
621
598
|
minZoom={0.3}
|
|
622
599
|
maxZoom={1.5}
|
|
623
600
|
>
|
|
624
|
-
<Background color="#
|
|
601
|
+
<Background color="#d5d2ca" gap={20} size={1} />
|
|
625
602
|
<Controls position="bottom-left" />
|
|
626
603
|
</ReactFlow>
|
|
627
604
|
|
|
628
605
|
{/* Legend */}
|
|
629
606
|
<div style={{
|
|
630
607
|
position: 'absolute', bottom: 12, right: 12, zIndex: 10,
|
|
631
|
-
background: '
|
|
632
|
-
padding: '8px 14px', display: 'flex', gap: 14, fontSize: 10, color: '
|
|
633
|
-
boxShadow: '
|
|
608
|
+
background: 'var(--bg-card)', border: '1px solid var(--border)', borderRadius: 8,
|
|
609
|
+
padding: '8px 14px', display: 'flex', gap: 14, fontSize: 10, color: 'var(--text-dim)',
|
|
610
|
+
boxShadow: 'var(--shadow-sm)',
|
|
634
611
|
}}>
|
|
635
612
|
<span><span style={{ display: 'inline-block', width: 12, height: 2, background: '#818cf8', marginRight: 4, verticalAlign: 'middle' }} /> inherits</span>
|
|
636
613
|
<span><span style={{ display: 'inline-block', width: 12, height: 2, background: '#22c55e', marginRight: 4, verticalAlign: 'middle' }} /> enhances</span>
|
package/package.json
CHANGED