@jotx-labs/editor 2.4.144 → 2.4.145

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 (3) hide show
  1. package/dist/styles/DocumentHeader.css +218 -161
  2. package/package.json +1 -1
  3. package/src/styles/DocumentHeader.css +218 -161
package/dist/styles/DocumentHeader.css CHANGED
@@ -1,252 +1,309 @@
1
- /* =====================================================
2
- Document Header Component - Full Styling
3
- ===================================================== */
1
+ /**
2
+ * Document Header Styles - Web Compatible
3
+ */
4
4
 
5
- .jotx-document-header {
6
- display: flex;
7
- align-items: center;
8
- gap: 16px;
9
- padding: 16px 24px;
10
- background: var(--vscode-editor-background);
11
- border-bottom: 1px solid var(--vscode-panel-border);
5
+ .jotx-header {
12
6
  position: sticky;
13
7
  top: 0;
8
+ left: 0;
9
+ right: 0;
14
10
  z-index: 100;
15
- min-height: 60px;
11
+ display: flex;
12
+ align-items: center;
13
+ justify-content: space-between;
14
+ height: 60px;
15
+ padding: 0 24px;
16
+ background-color: #ffffff;
17
+ border-bottom: 1px solid #dee2e6;
18
+ backdrop-filter: blur(8px);
19
+ }
20
+
21
+ /* Dark mode support */
22
+ @media (prefers-color-scheme: dark) {
23
+ .jotx-header {
24
+ background-color: #1e1e1e;
25
+ border-bottom-color: #3e3e3e;
26
+ }
27
+ }
28
+
29
+ .jotx-header-left {
30
+ display: flex;
31
+ align-items: center;
32
+ gap: 12px;
33
+ flex: 1;
34
+ min-width: 0;
35
+ }
36
+
37
+ .jotx-header-right {
38
+ display: flex;
39
+ align-items: center;
40
+ gap: 8px;
16
41
  }
17
42
 
18
43
  /* Logo */
19
- .jotx-logo {
20
- flex-shrink: 0;
21
- width: 32px;
22
- height: 32px;
44
+ .jotx-header-logo {
23
45
  display: flex;
24
46
  align-items: center;
25
47
  justify-content: center;
48
+ width: 32px;
49
+ height: 32px;
50
+ flex-shrink: 0;
51
+ color: #14b8a6;
52
+ /* Teal brand color */
26
53
  }
27
54
 
28
- .jotx-logo svg {
29
- width: 100%;
30
- height: 100%;
55
+ .jotx-header-logo-svg {
56
+ display: block;
31
57
  }
32
58
 
33
- /* Document Type Dropdown */
34
- .jotx-document-type {
59
+ /* Type Selector */
60
+ .jotx-header-type-container {
35
61
  position: relative;
36
- flex-shrink: 0;
37
62
  }
38
63
 
39
- .jotx-type-button {
64
+ .jotx-header-type-button {
40
65
  display: flex;
41
66
  align-items: center;
42
67
  gap: 6px;
43
- padding: 6px 10px;
44
- background: var(--vscode-button-secondaryBackground);
45
- border: 1px solid var(--vscode-button-border);
46
- border-radius: 4px;
47
- color: var(--vscode-button-secondaryForeground);
68
+ padding: 6px 12px;
69
+ border: 1px solid #e5e7eb;
70
+ background: #f9fafb;
71
+ border-radius: 6px;
48
72
  cursor: pointer;
73
+ transition: all 0.2s;
74
+ color: #4b5563;
49
75
  font-size: 13px;
50
76
  font-weight: 500;
51
- transition: all 0.15s ease;
52
77
  }
53
78
 
54
- .jotx-type-button:hover {
55
- background: var(--vscode-button-secondaryHoverBackground);
79
+ .jotx-header-type-button:hover {
80
+ background: #f3f4f6;
81
+ border-color: #d1d5db;
82
+ color: #1f2937;
56
83
  }
57
84
 
58
- .jotx-type-button svg {
59
- flex-shrink: 0;
85
+ @media (prefer's-color-scheme: dark) {
86
+ .jotx-header-type-button {
87
+ background: #2d2d2d;
88
+ border-color: #4a4a4a;
89
+ color: #d4d4d4;
90
+ }
91
+
92
+ .jotx-header-type-button:hover {
93
+ background: #373737;
94
+ border-color: #5a5a5a;
95
+ }
96
+ }
97
+
98
+ .jotx-header-type-label {
99
+ font-size: 13px;
100
+ font-weight: 500;
101
+ }
102
+
103
+ .jotx-header-type-chevron {
104
+ opacity: 0.5;
60
105
  }
61
106
 
62
- .jotx-type-menu {
107
+ /* Dropdown Menu */
108
+ .jotx-header-type-menu {
63
109
  position: absolute;
64
- top: calc(100% + 4px);
110
+ top: 100%;
65
111
  left: 0;
66
- background: var(--vscode-dropdown-background);
67
- border: 1px solid var(--vscode-dropdown-border);
68
- border-radius: 4px;
112
+ margin-top: 4px;
113
+ background: #ffffff;
114
+ border: 1px solid #e5e7eb;
115
+ border-radius: 8px;
116
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
117
+ width: 200px;
118
+ z-index: 200;
119
+ overflow: hidden;
120
+ }
121
+
122
+ @media (prefers-color-scheme: dark) {
123
+ .jotx-header-type-menu {
124
+ background: #2d2d2d;
125
+ border-color: #4a4a4a;
126
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
127
+ }
128
+ }
129
+
130
+ .jotx-type-menu-header {
131
+ padding: 8px 12px;
132
+ font-size: 11px;
133
+ font-weight: 600;
134
+ color: #6b7280;
135
+ border-bottom: 1px solid #e5e7eb;
136
+ background: #f9fafb;
137
+ text-transform: uppercase;
138
+ letter-spacing: 0.5px;
139
+ }
140
+
141
+ @media (prefers-color-scheme: dark) {
142
+ .jotx-type-menu-header {
143
+ background: #1e1e1e;
144
+ border-bottom-color: #3e3e3e;
145
+ color: #9ca3af;
146
+ }
147
+ }
148
+
149
+ .jotx-type-menu-list {
69
150
  padding: 4px;
70
- min-width: 200px;
71
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
72
- z-index: 1000;
73
151
  }
74
152
 
75
- .jotx-type-item {
153
+ .jotx-type-menu-item {
76
154
  display: flex;
77
155
  align-items: center;
78
- gap: 10px;
156
+ gap: 8px;
79
157
  padding: 8px 12px;
80
158
  width: 100%;
81
- background: transparent;
82
159
  border: none;
83
- border-radius: 3px;
84
- color: var(--vscode-foreground);
85
- cursor: pointer;
160
+ background: transparent;
161
+ color: #1f2937;
86
162
  font-size: 13px;
87
- transition: background-color 0.15s ease;
88
163
  text-align: left;
164
+ cursor: pointer;
165
+ border-radius: 6px;
166
+ transition: background 0.15s;
89
167
  }
90
168
 
91
- .jotx-type-item:hover {
92
- background: var(--vscode-list-hoverBackground);
93
- }
94
-
95
- .jotx-type-item.active {
96
- background: var(--vscode-list-activeSelectionBackground);
97
- color: var(--vscode-list-activeSelectionForeground);
98
- }
99
-
100
- .jotx-type-item svg {
101
- flex-shrink: 0;
169
+ .jotx-type-menu-item:hover {
170
+ background: #f3f4f6;
102
171
  }
103
172
 
104
- .jotx-type-item-details {
105
- flex: 1;
173
+ .jotx-type-menu-item.active {
174
+ background: #14b8a6;
175
+ color: #ffffff;
106
176
  }
107
177
 
108
- .jotx-type-item-name {
109
- font-weight: 500;
110
- margin-bottom: 2px;
111
- }
178
+ @media (prefers-color-scheme: dark) {
179
+ .jotx-type-menu-item {
180
+ color: #e5e7eb;
181
+ }
112
182
 
113
- .jotx-type-item-description {
114
- font-size: 11px;
115
- color: var(--vscode-descriptionForeground);
183
+ .jotx-type-menu-item:hover {
184
+ background: #373737;
185
+ }
116
186
  }
117
187
 
118
- /* Title Input */
119
- .jotx-title-container {
188
+ /* Title */
189
+ .jotx-header-title-container {
120
190
  flex: 1;
121
191
  min-width: 0;
122
192
  }
123
193
 
124
- .jotx-title-input {
125
- width: 100%;
126
- padding: 8px 12px;
127
- background: transparent;
128
- border: 1px solid transparent;
129
- border-radius: 4px;
130
- color: var(--vscode-editor-foreground);
194
+ .jotx-header-title {
195
+ margin: 0;
131
196
  font-size: 18px;
132
197
  font-weight: 600;
133
- font-family: var(--vscode-font-family);
134
- outline: none;
135
- transition: all 0.15s ease;
136
- }
137
-
138
- .jotx-title-input:hover {
139
- background: var(--vscode-input-background);
140
- border-color: var(--vscode-input-border);
198
+ color: #1f2937;
199
+ cursor: text;
200
+ white-space: nowrap;
201
+ overflow: hidden;
202
+ text-overflow: ellipsis;
203
+ transition: opacity 0.2s;
204
+ padding: 4px 8px;
205
+ border-radius: 4px;
141
206
  }
142
207
 
143
- .jotx-title-input:focus {
144
- background: var(--vscode-input-background);
145
- border-color: var(--vscode-focusBorder);
208
+ .jotx-header-title:hover {
209
+ opacity: 0.7;
210
+ background: #f9fafb;
146
211
  }
147
212
 
148
- .jotx-title-input::placeholder {
149
- color: var(--vscode-input-placeholderForeground);
150
- }
213
+ @media (prefers-color-scheme: dark) {
214
+ .jotx-header-title {
215
+ color: #f3f4f6;
216
+ }
151
217
 
152
- /* Metadata Section */
153
- .jotx-metadata {
154
- display: flex;
155
- align-items: center;
156
- gap: 12px;
157
- margin-top: 4px;
158
- font-size: 12px;
159
- color: var(--vscode-descriptionForeground);
218
+ .jotx-header-title:hover {
219
+ background: #2d2d2d;
220
+ }
160
221
  }
161
222
 
162
- .jotx-metadata-item {
163
- display: flex;
164
- align-items: center;
165
- gap: 4px;
223
+ .jotx-header-title-input {
224
+ width: 100%;
225
+ padding: 6px 12px;
226
+ font-size: 18px;
227
+ font-weight: 600;
228
+ color: #1f2937;
229
+ background-color: #f9fafb;
230
+ border: 2px solid #14b8a6;
231
+ border-radius: 6px;
232
+ outline: none;
233
+ font-family: inherit;
166
234
  }
167
235
 
168
- .jotx-metadata-item svg {
169
- width: 14px;
170
- height: 14px;
236
+ @media (prefers-color-scheme: dark) {
237
+ .jotx-header-title-input {
238
+ background: #2d2d2d;
239
+ color: #f3f4f6;
240
+ border-color: #14b8a6;
241
+ }
171
242
  }
172
243
 
173
- /* Action Buttons */
174
- .jotx-header-actions {
244
+ /* Buttons */
245
+ .jotx-header-button,
246
+ .jotx-header-graph-btn,
247
+ .jotx-header-help-btn {
175
248
  display: flex;
176
249
  align-items: center;
177
- gap: 4px;
178
- flex-shrink: 0;
179
- }
180
-
181
- .jotx-header-button {
182
- display: inline-flex;
183
- align-items: center;
184
250
  justify-content: center;
185
- padding: 6px 10px;
186
- background: transparent;
187
- border: 1px solid transparent;
188
- border-radius: 4px;
189
- color: var(--vscode-foreground);
251
+ width: 36px;
252
+ height: 36px;
253
+ padding: 0;
254
+ color: #6b7280;
255
+ background-color: transparent;
256
+ border: none;
257
+ border-radius: 6px;
190
258
  cursor: pointer;
191
- font-size: 13px;
192
- transition: all 0.15s ease;
259
+ transition: all 0.2s;
193
260
  }
194
261
 
195
- .jotx-header-button:hover {
196
- background: var(--vscode-toolbar-hoverBackground);
197
- border-color: var(--vscode-button-border);
262
+ .jotx-header-button:hover:not(:disabled),
263
+ .jotx-header-graph-btn:hover,
264
+ .jotx-header-help-btn:hover {
265
+ color: #1f2937;
266
+ background-color: #f3f4f6;
198
267
  }
199
268
 
200
- .jotx-header-button:active {
201
- background: var(--vscode-button-background);
202
- color: var(--vscode-button-foreground);
269
+ .jotx-header-button:active:not(:disabled) {
270
+ transform: scale(0.95);
203
271
  }
204
272
 
205
273
  .jotx-header-button:disabled {
206
- opacity: 0.5;
274
+ opacity: 0.4;
207
275
  cursor: not-allowed;
208
276
  }
209
277
 
210
- .jotx-header-button svg {
211
- width: 16px;
212
- height: 16px;
213
- }
278
+ @media (prefers-color-scheme: dark) {
214
279
 
215
- /* Icon Button (for settings, etc.) */
216
- .jotx-icon-input {
217
- width: 32px;
218
- height: 32px;
219
- padding: 0;
220
- background: transparent;
221
- border: 1px solid var(--vscode-input-border);
222
- border-radius: 4px;
223
- color: var(--vscode-foreground);
224
- cursor: pointer;
225
- font-size: 16px;
226
- display: flex;
227
- align-items: center;
228
- justify-content: center;
229
- transition: all 0.15s ease;
280
+ .jotx-header-button,
281
+ .jotx-header-graph-btn,
282
+ .jotx-header-help-btn {
283
+ color: #9ca3af;
284
+ }
285
+
286
+ .jotx-header-button:hover:not(:disabled),
287
+ .jotx-header-graph-btn:hover,
288
+ .jotx-header-help-btn:hover {
289
+ color: #e5e7eb;
290
+ background-color: #373737;
291
+ }
230
292
  }
231
293
 
232
- .jotx-icon-input:hover {
233
- background: var(--vscode-input-background);
234
- border-color: var(--vscode-focusBorder);
294
+ .jotx-header-button svg {
295
+ width: 16px;
296
+ height: 16px;
235
297
  }
236
298
 
237
- /* Responsive adjustments */
299
+ /* Responsive */
238
300
  @media (max-width: 768px) {
239
- .jotx-document-header {
240
- flex-wrap: wrap;
241
- padding: 12px 16px;
242
- }
243
-
244
- .jotx-metadata {
245
- flex-wrap: wrap;
301
+ .jotx-header {
302
+ padding: 0 16px;
246
303
  }
247
304
 
248
- .jotx-header-actions {
249
- width: 100%;
250
- justify-content: flex-end;
305
+ .jotx-header-type-button {
306
+ font-size: 12px;
307
+ padding: 4px 8px;
251
308
  }
252
309
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jotx-labs/editor",
3
- "version": "2.4.144",
3
+ "version": "2.4.145",
4
4
  "files": [
5
5
  "dist",
6
6
  "src/styles"
package/src/styles/DocumentHeader.css CHANGED
@@ -1,252 +1,309 @@
1
- /* =====================================================
2
- Document Header Component - Full Styling
3
- ===================================================== */
1
+ /**
2
+ * Document Header Styles - Web Compatible
3
+ */
4
4
 
5
- .jotx-document-header {
6
- display: flex;
7
- align-items: center;
8
- gap: 16px;
9
- padding: 16px 24px;
10
- background: var(--vscode-editor-background);
11
- border-bottom: 1px solid var(--vscode-panel-border);
5
+ .jotx-header {
12
6
  position: sticky;
13
7
  top: 0;
8
+ left: 0;
9
+ right: 0;
14
10
  z-index: 100;
15
- min-height: 60px;
11
+ display: flex;
12
+ align-items: center;
13
+ justify-content: space-between;
14
+ height: 60px;
15
+ padding: 0 24px;
16
+ background-color: #ffffff;
17
+ border-bottom: 1px solid #dee2e6;
18
+ backdrop-filter: blur(8px);
19
+ }
20
+
21
+ /* Dark mode support */
22
+ @media (prefers-color-scheme: dark) {
23
+ .jotx-header {
24
+ background-color: #1e1e1e;
25
+ border-bottom-color: #3e3e3e;
26
+ }
27
+ }
28
+
29
+ .jotx-header-left {
30
+ display: flex;
31
+ align-items: center;
32
+ gap: 12px;
33
+ flex: 1;
34
+ min-width: 0;
35
+ }
36
+
37
+ .jotx-header-right {
38
+ display: flex;
39
+ align-items: center;
40
+ gap: 8px;
16
41
  }
17
42
 
18
43
  /* Logo */
19
- .jotx-logo {
20
- flex-shrink: 0;
21
- width: 32px;
22
- height: 32px;
44
+ .jotx-header-logo {
23
45
  display: flex;
24
46
  align-items: center;
25
47
  justify-content: center;
48
+ width: 32px;
49
+ height: 32px;
50
+ flex-shrink: 0;
51
+ color: #14b8a6;
52
+ /* Teal brand color */
26
53
  }
27
54
 
28
- .jotx-logo svg {
29
- width: 100%;
30
- height: 100%;
55
+ .jotx-header-logo-svg {
56
+ display: block;
31
57
  }
32
58
 
33
- /* Document Type Dropdown */
34
- .jotx-document-type {
59
+ /* Type Selector */
60
+ .jotx-header-type-container {
35
61
  position: relative;
36
- flex-shrink: 0;
37
62
  }
38
63
 
39
- .jotx-type-button {
64
+ .jotx-header-type-button {
40
65
  display: flex;
41
66
  align-items: center;
42
67
  gap: 6px;
43
- padding: 6px 10px;
44
- background: var(--vscode-button-secondaryBackground);
45
- border: 1px solid var(--vscode-button-border);
46
- border-radius: 4px;
47
- color: var(--vscode-button-secondaryForeground);
68
+ padding: 6px 12px;
69
+ border: 1px solid #e5e7eb;
70
+ background: #f9fafb;
71
+ border-radius: 6px;
48
72
  cursor: pointer;
73
+ transition: all 0.2s;
74
+ color: #4b5563;
49
75
  font-size: 13px;
50
76
  font-weight: 500;
51
- transition: all 0.15s ease;
52
77
  }
53
78
 
54
- .jotx-type-button:hover {
55
- background: var(--vscode-button-secondaryHoverBackground);
79
+ .jotx-header-type-button:hover {
80
+ background: #f3f4f6;
81
+ border-color: #d1d5db;
82
+ color: #1f2937;
56
83
  }
57
84
 
58
- .jotx-type-button svg {
59
- flex-shrink: 0;
85
+ @media (prefer's-color-scheme: dark) {
86
+ .jotx-header-type-button {
87
+ background: #2d2d2d;
88
+ border-color: #4a4a4a;
89
+ color: #d4d4d4;
90
+ }
91
+
92
+ .jotx-header-type-button:hover {
93
+ background: #373737;
94
+ border-color: #5a5a5a;
95
+ }
96
+ }
97
+
98
+ .jotx-header-type-label {
99
+ font-size: 13px;
100
+ font-weight: 500;
101
+ }
102
+
103
+ .jotx-header-type-chevron {
104
+ opacity: 0.5;
60
105
  }
61
106
 
62
- .jotx-type-menu {
107
+ /* Dropdown Menu */
108
+ .jotx-header-type-menu {
63
109
  position: absolute;
64
- top: calc(100% + 4px);
110
+ top: 100%;
65
111
  left: 0;
66
- background: var(--vscode-dropdown-background);
67
- border: 1px solid var(--vscode-dropdown-border);
68
- border-radius: 4px;
112
+ margin-top: 4px;
113
+ background: #ffffff;
114
+ border: 1px solid #e5e7eb;
115
+ border-radius: 8px;
116
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
117
+ width: 200px;
118
+ z-index: 200;
119
+ overflow: hidden;
120
+ }
121
+
122
+ @media (prefers-color-scheme: dark) {
123
+ .jotx-header-type-menu {
124
+ background: #2d2d2d;
125
+ border-color: #4a4a4a;
126
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
127
+ }
128
+ }
129
+
130
+ .jotx-type-menu-header {
131
+ padding: 8px 12px;
132
+ font-size: 11px;
133
+ font-weight: 600;
134
+ color: #6b7280;
135
+ border-bottom: 1px solid #e5e7eb;
136
+ background: #f9fafb;
137
+ text-transform: uppercase;
138
+ letter-spacing: 0.5px;
139
+ }
140
+
141
+ @media (prefers-color-scheme: dark) {
142
+ .jotx-type-menu-header {
143
+ background: #1e1e1e;
144
+ border-bottom-color: #3e3e3e;
145
+ color: #9ca3af;
146
+ }
147
+ }
148
+
149
+ .jotx-type-menu-list {
69
150
  padding: 4px;
70
- min-width: 200px;
71
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
72
- z-index: 1000;
73
151
  }
74
152
 
75
- .jotx-type-item {
153
+ .jotx-type-menu-item {
76
154
  display: flex;
77
155
  align-items: center;
78
- gap: 10px;
156
+ gap: 8px;
79
157
  padding: 8px 12px;
80
158
  width: 100%;
81
- background: transparent;
82
159
  border: none;
83
- border-radius: 3px;
84
- color: var(--vscode-foreground);
85
- cursor: pointer;
160
+ background: transparent;
161
+ color: #1f2937;
86
162
  font-size: 13px;
87
- transition: background-color 0.15s ease;
88
163
  text-align: left;
164
+ cursor: pointer;
165
+ border-radius: 6px;
166
+ transition: background 0.15s;
89
167
  }
90
168
 
91
- .jotx-type-item:hover {
92
- background: var(--vscode-list-hoverBackground);
93
- }
94
-
95
- .jotx-type-item.active {
96
- background: var(--vscode-list-activeSelectionBackground);
97
- color: var(--vscode-list-activeSelectionForeground);
98
- }
99
-
100
- .jotx-type-item svg {
101
- flex-shrink: 0;
169
+ .jotx-type-menu-item:hover {
170
+ background: #f3f4f6;
102
171
  }
103
172
 
104
- .jotx-type-item-details {
105
- flex: 1;
173
+ .jotx-type-menu-item.active {
174
+ background: #14b8a6;
175
+ color: #ffffff;
106
176
  }
107
177
 
108
- .jotx-type-item-name {
109
- font-weight: 500;
110
- margin-bottom: 2px;
111
- }
178
+ @media (prefers-color-scheme: dark) {
179
+ .jotx-type-menu-item {
180
+ color: #e5e7eb;
181
+ }
112
182
 
113
- .jotx-type-item-description {
114
- font-size: 11px;
115
- color: var(--vscode-descriptionForeground);
183
+ .jotx-type-menu-item:hover {
184
+ background: #373737;
185
+ }
116
186
  }
117
187
 
118
- /* Title Input */
119
- .jotx-title-container {
188
+ /* Title */
189
+ .jotx-header-title-container {
120
190
  flex: 1;
121
191
  min-width: 0;
122
192
  }
123
193
 
124
- .jotx-title-input {
125
- width: 100%;
126
- padding: 8px 12px;
127
- background: transparent;
128
- border: 1px solid transparent;
129
- border-radius: 4px;
130
- color: var(--vscode-editor-foreground);
194
+ .jotx-header-title {
195
+ margin: 0;
131
196
  font-size: 18px;
132
197
  font-weight: 600;
133
- font-family: var(--vscode-font-family);
134
- outline: none;
135
- transition: all 0.15s ease;
136
- }
137
-
138
- .jotx-title-input:hover {
139
- background: var(--vscode-input-background);
140
- border-color: var(--vscode-input-border);
198
+ color: #1f2937;
199
+ cursor: text;
200
+ white-space: nowrap;
201
+ overflow: hidden;
202
+ text-overflow: ellipsis;
203
+ transition: opacity 0.2s;
204
+ padding: 4px 8px;
205
+ border-radius: 4px;
141
206
  }
142
207
 
143
- .jotx-title-input:focus {
144
- background: var(--vscode-input-background);
145
- border-color: var(--vscode-focusBorder);
208
+ .jotx-header-title:hover {
209
+ opacity: 0.7;
210
+ background: #f9fafb;
146
211
  }
147
212
 
148
- .jotx-title-input::placeholder {
149
- color: var(--vscode-input-placeholderForeground);
150
- }
213
+ @media (prefers-color-scheme: dark) {
214
+ .jotx-header-title {
215
+ color: #f3f4f6;
216
+ }
151
217
 
152
- /* Metadata Section */
153
- .jotx-metadata {
154
- display: flex;
155
- align-items: center;
156
- gap: 12px;
157
- margin-top: 4px;
158
- font-size: 12px;
159
- color: var(--vscode-descriptionForeground);
218
+ .jotx-header-title:hover {
219
+ background: #2d2d2d;
220
+ }
160
221
  }
161
222
 
162
- .jotx-metadata-item {
163
- display: flex;
164
- align-items: center;
165
- gap: 4px;
223
+ .jotx-header-title-input {
224
+ width: 100%;
225
+ padding: 6px 12px;
226
+ font-size: 18px;
227
+ font-weight: 600;
228
+ color: #1f2937;
229
+ background-color: #f9fafb;
230
+ border: 2px solid #14b8a6;
231
+ border-radius: 6px;
232
+ outline: none;
233
+ font-family: inherit;
166
234
  }
167
235
 
168
- .jotx-metadata-item svg {
169
- width: 14px;
170
- height: 14px;
236
+ @media (prefers-color-scheme: dark) {
237
+ .jotx-header-title-input {
238
+ background: #2d2d2d;
239
+ color: #f3f4f6;
240
+ border-color: #14b8a6;
241
+ }
171
242
  }
172
243
 
173
- /* Action Buttons */
174
- .jotx-header-actions {
244
+ /* Buttons */
245
+ .jotx-header-button,
246
+ .jotx-header-graph-btn,
247
+ .jotx-header-help-btn {
175
248
  display: flex;
176
249
  align-items: center;
177
- gap: 4px;
178
- flex-shrink: 0;
179
- }
180
-
181
- .jotx-header-button {
182
- display: inline-flex;
183
- align-items: center;
184
250
  justify-content: center;
185
- padding: 6px 10px;
186
- background: transparent;
187
- border: 1px solid transparent;
188
- border-radius: 4px;
189
- color: var(--vscode-foreground);
251
+ width: 36px;
252
+ height: 36px;
253
+ padding: 0;
254
+ color: #6b7280;
255
+ background-color: transparent;
256
+ border: none;
257
+ border-radius: 6px;
190
258
  cursor: pointer;
191
- font-size: 13px;
192
- transition: all 0.15s ease;
259
+ transition: all 0.2s;
193
260
  }
194
261
 
195
- .jotx-header-button:hover {
196
- background: var(--vscode-toolbar-hoverBackground);
197
- border-color: var(--vscode-button-border);
262
+ .jotx-header-button:hover:not(:disabled),
263
+ .jotx-header-graph-btn:hover,
264
+ .jotx-header-help-btn:hover {
265
+ color: #1f2937;
266
+ background-color: #f3f4f6;
198
267
  }
199
268
 
200
- .jotx-header-button:active {
201
- background: var(--vscode-button-background);
202
- color: var(--vscode-button-foreground);
269
+ .jotx-header-button:active:not(:disabled) {
270
+ transform: scale(0.95);
203
271
  }
204
272
 
205
273
  .jotx-header-button:disabled {
206
- opacity: 0.5;
274
+ opacity: 0.4;
207
275
  cursor: not-allowed;
208
276
  }
209
277
 
210
- .jotx-header-button svg {
211
- width: 16px;
212
- height: 16px;
213
- }
278
+ @media (prefers-color-scheme: dark) {
214
279
 
215
- /* Icon Button (for settings, etc.) */
216
- .jotx-icon-input {
217
- width: 32px;
218
- height: 32px;
219
- padding: 0;
220
- background: transparent;
221
- border: 1px solid var(--vscode-input-border);
222
- border-radius: 4px;
223
- color: var(--vscode-foreground);
224
- cursor: pointer;
225
- font-size: 16px;
226
- display: flex;
227
- align-items: center;
228
- justify-content: center;
229
- transition: all 0.15s ease;
280
+ .jotx-header-button,
281
+ .jotx-header-graph-btn,
282
+ .jotx-header-help-btn {
283
+ color: #9ca3af;
284
+ }
285
+
286
+ .jotx-header-button:hover:not(:disabled),
287
+ .jotx-header-graph-btn:hover,
288
+ .jotx-header-help-btn:hover {
289
+ color: #e5e7eb;
290
+ background-color: #373737;
291
+ }
230
292
  }
231
293
 
232
- .jotx-icon-input:hover {
233
- background: var(--vscode-input-background);
234
- border-color: var(--vscode-focusBorder);
294
+ .jotx-header-button svg {
295
+ width: 16px;
296
+ height: 16px;
235
297
  }
236
298
 
237
- /* Responsive adjustments */
299
+ /* Responsive */
238
300
  @media (max-width: 768px) {
239
- .jotx-document-header {
240
- flex-wrap: wrap;
241
- padding: 12px 16px;
242
- }
243
-
244
- .jotx-metadata {
245
- flex-wrap: wrap;
301
+ .jotx-header {
302
+ padding: 0 16px;
246
303
  }
247
304
 
248
- .jotx-header-actions {
249
- width: 100%;
250
- justify-content: flex-end;
305
+ .jotx-header-type-button {
306
+ font-size: 12px;
307
+ padding: 4px 8px;
251
308
  }
252
309
  }