@jotx-labs/editor 2.4.154 → 2.4.156

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.
Files changed (5) hide show
  1. package/dist/styles/JotxEditor.css +2 -2
  2. package/dist/styles/NodePickerDialog.css +26 -25
  3. package/package.json +1 -1
  4. package/src/styles/JotxEditor.css +2 -2
  5. package/src/styles/NodePickerDialog.css +26 -25
package/dist/styles/JotxEditor.css CHANGED
@@ -9,7 +9,7 @@
9
9
  }
10
10
 
11
11
  .jotx-editor-wrapper {
12
- max-width: var(--jotx-editor-maxWidth, 900px);
12
+ max-width: var(--jotx-editor-maxWidth, 1400px);
13
13
  margin: 0 auto;
14
14
  position: relative;
15
15
  }
@@ -27,7 +27,7 @@
27
27
  .jotx-editor-content {
28
28
  position: relative;
29
29
  outline: none;
30
- font-size: var(--jotx-editor-fontSize, 16px);
30
+ font-size: var(--jotx-editor-fontSize, 14px);
31
31
  line-height: var(--jotx-editor-lineHeight, 1.6);
32
32
  color: var(--jotx-text);
33
33
  }
package/dist/styles/NodePickerDialog.css CHANGED
@@ -12,14 +12,15 @@
12
12
  }
13
13
 
14
14
  .node-picker-dialog {
15
- background: var(--vscode-editor-background);
16
- border: 1px solid var(--vscode-panel-border);
15
+ /* Support both VS Code and web */
16
+ background: var(--vscode-editor-background, hsl(var(--background, 222 47% 11%)));
17
+ border: 1px solid var(--vscode-panel-border, hsl(var(--border, 217 33% 17%)));
17
18
  border-radius: 8px;
18
19
  width: 600px;
19
20
  max-height: 80vh;
20
21
  display: flex;
21
22
  flex-direction: column;
22
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
23
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
23
24
  }
24
25
 
25
26
  .node-picker-header {
@@ -27,20 +28,20 @@
27
28
  justify-content: space-between;
28
29
  align-items: center;
29
30
  padding: 16px 20px;
30
- border-bottom: 1px solid var(--vscode-panel-border);
31
+ border-bottom: 1px solid var(--vscode-panel-border, hsl(var(--border, 217 33% 17%)));
31
32
  }
32
33
 
33
34
  .node-picker-header h2 {
34
35
  margin: 0;
35
36
  font-size: 16px;
36
37
  font-weight: 600;
37
- color: var(--vscode-foreground);
38
+ color: var(--vscode-foreground, hsl(var(--foreground, 213 31% 91%)));
38
39
  }
39
40
 
40
41
  .close-btn {
41
42
  background: none;
42
43
  border: none;
43
- color: var(--vscode-foreground);
44
+ color: var(--vscode-foreground, hsl(var(--foreground, 213 31% 91%)));
44
45
  font-size: 24px;
45
46
  cursor: pointer;
46
47
  padding: 0;
@@ -53,33 +54,33 @@
53
54
  }
54
55
 
55
56
  .close-btn:hover {
56
- background: var(--vscode-list-hoverBackground);
57
+ background: var(--vscode-list-hoverBackground, hsl(var(--muted, 223 47% 11%)));
57
58
  }
58
59
 
59
60
  .node-picker-search {
60
61
  padding: 12px 20px;
61
- border-bottom: 1px solid var(--vscode-panel-border);
62
+ border-bottom: 1px solid var(--vscode-panel-border, hsl(var(--border, 217 33% 17%)));
62
63
  }
63
64
 
64
65
  .node-picker-search input {
65
66
  width: 100%;
66
67
  padding: 8px 12px;
67
- background: var(--vscode-input-background);
68
- border: 1px solid var(--vscode-input-border);
68
+ background: var(--vscode-input-background, hsl(var(--input, 222 47% 11%)));
69
+ border: 1px solid var(--vscode-input-border, hsl(var(--border, 217 33% 17%)));
69
70
  border-radius: 4px;
70
- color: var(--vscode-input-foreground);
71
+ color: var(--vscode-input-foreground, hsl(var(--foreground, 213 31% 91%)));
71
72
  font-size: 14px;
72
73
  }
73
74
 
74
75
  .node-picker-search input:focus {
75
76
  outline: none;
76
- border-color: var(--vscode-focusBorder);
77
+ border-color: var(--vscode-focusBorder, hsl(var(--primary, 173 58% 39%)));
77
78
  }
78
79
 
79
80
  .node-picker-tabs {
80
81
  display: flex;
81
- border-bottom: 1px solid var(--vscode-panel-border);
82
- background: var(--vscode-editor-background);
82
+ border-bottom: 1px solid var(--vscode-panel-border, hsl(var(--border, 217 33% 17%)));
83
+ background: var(--vscode-editor-background, hsl(var(--background, 222 47% 11%)));
83
84
  }
84
85
 
85
86
  .node-picker-tabs button {
@@ -87,7 +88,7 @@
87
88
  padding: 12px 16px;
88
89
  background: none;
89
90
  border: none;
90
- color: var(--vscode-foreground);
91
+ color: var(--vscode-foreground, hsl(var(--foreground, 213 31% 91%)));
91
92
  cursor: pointer;
92
93
  font-size: 14px;
93
94
  opacity: 0.7;
@@ -97,12 +98,12 @@
97
98
 
98
99
  .node-picker-tabs button:hover {
99
100
  opacity: 1;
100
- background: var(--vscode-list-hoverBackground);
101
+ background: var(--vscode-list-hoverBackground, hsl(var(--muted, 223 47% 11%)));
101
102
  }
102
103
 
103
104
  .node-picker-tabs button.active {
104
105
  opacity: 1;
105
- border-bottom-color: var(--vscode-focusBorder);
106
+ border-bottom-color: var(--vscode-focusBorder, hsl(var(--primary, 173 58% 39%)));
106
107
  }
107
108
 
108
109
  .node-picker-content {
@@ -126,7 +127,7 @@
126
127
  }
127
128
 
128
129
  .node-item:hover {
129
- background: var(--vscode-list-hoverBackground);
130
+ background: var(--vscode-list-hoverBackground, hsl(var(--muted, 223 47% 11%)));
130
131
  }
131
132
 
132
133
  .node-icon {
@@ -142,7 +143,7 @@
142
143
  .node-label {
143
144
  font-size: 14px;
144
145
  font-weight: 500;
145
- color: var(--vscode-foreground);
146
+ color: var(--vscode-foreground, hsl(var(--foreground, 213 31% 91%)));
146
147
  overflow: hidden;
147
148
  text-overflow: ellipsis;
148
149
  white-space: nowrap;
@@ -150,7 +151,7 @@
150
151
 
151
152
  .node-meta {
152
153
  font-size: 12px;
153
- color: var(--vscode-descriptionForeground);
154
+ color: var(--vscode-descriptionForeground, hsl(var(--muted-foreground, 215 16% 47%)));
154
155
  margin-top: 4px;
155
156
  overflow: hidden;
156
157
  text-overflow: ellipsis;
@@ -163,27 +164,27 @@
163
164
  align-items: center;
164
165
  justify-content: center;
165
166
  padding: 40px;
166
- color: var(--vscode-descriptionForeground);
167
+ color: var(--vscode-descriptionForeground, hsl(var(--muted-foreground, 215 16% 47%)));
167
168
  font-size: 14px;
168
169
  }
169
170
 
170
171
  .node-picker-footer {
171
172
  padding: 12px 20px;
172
- border-top: 1px solid var(--vscode-panel-border);
173
+ border-top: 1px solid var(--vscode-panel-border, hsl(var(--border, 217 33% 17%)));
173
174
  display: flex;
174
175
  justify-content: flex-end;
175
176
  }
176
177
 
177
178
  .cancel-btn {
178
179
  padding: 8px 16px;
179
- background: var(--vscode-button-secondaryBackground);
180
+ background: var(--vscode-button-secondaryBackground, hsl(var(--secondary, 222 47% 11%)));
180
181
  border: none;
181
182
  border-radius: 4px;
182
- color: var(--vscode-button-secondaryForeground);
183
+ color: var(--vscode-button-secondaryForeground, hsl(var(--secondary-foreground, 213 31% 91%)));
183
184
  cursor: pointer;
184
185
  font-size: 13px;
185
186
  }
186
187
 
187
188
  .cancel-btn:hover {
188
- background: var(--vscode-button-secondaryHoverBackground);
189
+ background: var(--vscode-button-secondaryHoverBackground, hsl(var(--secondary, 222 47% 11%) / 0.8));
189
190
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jotx-labs/editor",
3
- "version": "2.4.154",
3
+ "version": "2.4.156",
4
4
  "files": [
5
5
  "dist",
6
6
  "src/styles"
package/src/styles/JotxEditor.css CHANGED
@@ -9,7 +9,7 @@
9
9
  }
10
10
 
11
11
  .jotx-editor-wrapper {
12
- max-width: var(--jotx-editor-maxWidth, 900px);
12
+ max-width: var(--jotx-editor-maxWidth, 1400px);
13
13
  margin: 0 auto;
14
14
  position: relative;
15
15
  }
@@ -27,7 +27,7 @@
27
27
  .jotx-editor-content {
28
28
  position: relative;
29
29
  outline: none;
30
- font-size: var(--jotx-editor-fontSize, 16px);
30
+ font-size: var(--jotx-editor-fontSize, 14px);
31
31
  line-height: var(--jotx-editor-lineHeight, 1.6);
32
32
  color: var(--jotx-text);
33
33
  }
package/src/styles/NodePickerDialog.css CHANGED
@@ -12,14 +12,15 @@
12
12
  }
13
13
 
14
14
  .node-picker-dialog {
15
- background: var(--vscode-editor-background);
16
- border: 1px solid var(--vscode-panel-border);
15
+ /* Support both VS Code and web */
16
+ background: var(--vscode-editor-background, hsl(var(--background, 222 47% 11%)));
17
+ border: 1px solid var(--vscode-panel-border, hsl(var(--border, 217 33% 17%)));
17
18
  border-radius: 8px;
18
19
  width: 600px;
19
20
  max-height: 80vh;
20
21
  display: flex;
21
22
  flex-direction: column;
22
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
23
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
23
24
  }
24
25
 
25
26
  .node-picker-header {
@@ -27,20 +28,20 @@
27
28
  justify-content: space-between;
28
29
  align-items: center;
29
30
  padding: 16px 20px;
30
- border-bottom: 1px solid var(--vscode-panel-border);
31
+ border-bottom: 1px solid var(--vscode-panel-border, hsl(var(--border, 217 33% 17%)));
31
32
  }
32
33
 
33
34
  .node-picker-header h2 {
34
35
  margin: 0;
35
36
  font-size: 16px;
36
37
  font-weight: 600;
37
- color: var(--vscode-foreground);
38
+ color: var(--vscode-foreground, hsl(var(--foreground, 213 31% 91%)));
38
39
  }
39
40
 
40
41
  .close-btn {
41
42
  background: none;
42
43
  border: none;
43
- color: var(--vscode-foreground);
44
+ color: var(--vscode-foreground, hsl(var(--foreground, 213 31% 91%)));
44
45
  font-size: 24px;
45
46
  cursor: pointer;
46
47
  padding: 0;
@@ -53,33 +54,33 @@
53
54
  }
54
55
 
55
56
  .close-btn:hover {
56
- background: var(--vscode-list-hoverBackground);
57
+ background: var(--vscode-list-hoverBackground, hsl(var(--muted, 223 47% 11%)));
57
58
  }
58
59
 
59
60
  .node-picker-search {
60
61
  padding: 12px 20px;
61
- border-bottom: 1px solid var(--vscode-panel-border);
62
+ border-bottom: 1px solid var(--vscode-panel-border, hsl(var(--border, 217 33% 17%)));
62
63
  }
63
64
 
64
65
  .node-picker-search input {
65
66
  width: 100%;
66
67
  padding: 8px 12px;
67
- background: var(--vscode-input-background);
68
- border: 1px solid var(--vscode-input-border);
68
+ background: var(--vscode-input-background, hsl(var(--input, 222 47% 11%)));
69
+ border: 1px solid var(--vscode-input-border, hsl(var(--border, 217 33% 17%)));
69
70
  border-radius: 4px;
70
- color: var(--vscode-input-foreground);
71
+ color: var(--vscode-input-foreground, hsl(var(--foreground, 213 31% 91%)));
71
72
  font-size: 14px;
72
73
  }
73
74
 
74
75
  .node-picker-search input:focus {
75
76
  outline: none;
76
- border-color: var(--vscode-focusBorder);
77
+ border-color: var(--vscode-focusBorder, hsl(var(--primary, 173 58% 39%)));
77
78
  }
78
79
 
79
80
  .node-picker-tabs {
80
81
  display: flex;
81
- border-bottom: 1px solid var(--vscode-panel-border);
82
- background: var(--vscode-editor-background);
82
+ border-bottom: 1px solid var(--vscode-panel-border, hsl(var(--border, 217 33% 17%)));
83
+ background: var(--vscode-editor-background, hsl(var(--background, 222 47% 11%)));
83
84
  }
84
85
 
85
86
  .node-picker-tabs button {
@@ -87,7 +88,7 @@
87
88
  padding: 12px 16px;
88
89
  background: none;
89
90
  border: none;
90
- color: var(--vscode-foreground);
91
+ color: var(--vscode-foreground, hsl(var(--foreground, 213 31% 91%)));
91
92
  cursor: pointer;
92
93
  font-size: 14px;
93
94
  opacity: 0.7;
@@ -97,12 +98,12 @@
97
98
 
98
99
  .node-picker-tabs button:hover {
99
100
  opacity: 1;
100
- background: var(--vscode-list-hoverBackground);
101
+ background: var(--vscode-list-hoverBackground, hsl(var(--muted, 223 47% 11%)));
101
102
  }
102
103
 
103
104
  .node-picker-tabs button.active {
104
105
  opacity: 1;
105
- border-bottom-color: var(--vscode-focusBorder);
106
+ border-bottom-color: var(--vscode-focusBorder, hsl(var(--primary, 173 58% 39%)));
106
107
  }
107
108
 
108
109
  .node-picker-content {
@@ -126,7 +127,7 @@
126
127
  }
127
128
 
128
129
  .node-item:hover {
129
- background: var(--vscode-list-hoverBackground);
130
+ background: var(--vscode-list-hoverBackground, hsl(var(--muted, 223 47% 11%)));
130
131
  }
131
132
 
132
133
  .node-icon {
@@ -142,7 +143,7 @@
142
143
  .node-label {
143
144
  font-size: 14px;
144
145
  font-weight: 500;
145
- color: var(--vscode-foreground);
146
+ color: var(--vscode-foreground, hsl(var(--foreground, 213 31% 91%)));
146
147
  overflow: hidden;
147
148
  text-overflow: ellipsis;
148
149
  white-space: nowrap;
@@ -150,7 +151,7 @@
150
151
 
151
152
  .node-meta {
152
153
  font-size: 12px;
153
- color: var(--vscode-descriptionForeground);
154
+ color: var(--vscode-descriptionForeground, hsl(var(--muted-foreground, 215 16% 47%)));
154
155
  margin-top: 4px;
155
156
  overflow: hidden;
156
157
  text-overflow: ellipsis;
@@ -163,27 +164,27 @@
163
164
  align-items: center;
164
165
  justify-content: center;
165
166
  padding: 40px;
166
- color: var(--vscode-descriptionForeground);
167
+ color: var(--vscode-descriptionForeground, hsl(var(--muted-foreground, 215 16% 47%)));
167
168
  font-size: 14px;
168
169
  }
169
170
 
170
171
  .node-picker-footer {
171
172
  padding: 12px 20px;
172
- border-top: 1px solid var(--vscode-panel-border);
173
+ border-top: 1px solid var(--vscode-panel-border, hsl(var(--border, 217 33% 17%)));
173
174
  display: flex;
174
175
  justify-content: flex-end;
175
176
  }
176
177
 
177
178
  .cancel-btn {
178
179
  padding: 8px 16px;
179
- background: var(--vscode-button-secondaryBackground);
180
+ background: var(--vscode-button-secondaryBackground, hsl(var(--secondary, 222 47% 11%)));
180
181
  border: none;
181
182
  border-radius: 4px;
182
- color: var(--vscode-button-secondaryForeground);
183
+ color: var(--vscode-button-secondaryForeground, hsl(var(--secondary-foreground, 213 31% 91%)));
183
184
  cursor: pointer;
184
185
  font-size: 13px;
185
186
  }
186
187
 
187
188
  .cancel-btn:hover {
188
- background: var(--vscode-button-secondaryHoverBackground);
189
+ background: var(--vscode-button-secondaryHoverBackground, hsl(var(--secondary, 222 47% 11%) / 0.8));
189
190
  }