neiki-editor 2.8.0 → 2.9.1

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 (6) hide show
  1. package/README.md +729 -716
  2. package/dist/neiki-editor.css +2215 -2204
  3. package/dist/neiki-editor.js +5352 -5003
  4. package/dist/neiki-editor.min.css +1 -1
  5. package/dist/neiki-editor.min.js +1 -1
  6. package/package.json +1 -1
package/dist/neiki-editor.css CHANGED
@@ -1,2204 +1,2215 @@
1
- /**
2
- * NeikiEditor - Production-Ready WYSIWYG Rich Text Editor
3
- * CSS Stylesheet
4
- * Version: 2.8.0
5
- */
6
-
7
- /* ============================================
8
- CSS Custom Properties (Light/Dark Themes)
9
- ============================================ */
10
- :root {
11
- /* Light Theme (default) */
12
- --neiki-bg-primary: #ffffff;
13
- --neiki-bg-secondary: #f8f9fa;
14
- --neiki-bg-tertiary: #e9ecef;
15
- --neiki-bg-hover: #dee2e6;
16
- --neiki-bg-active: #ced4da;
17
- --neiki-border-color: #dee2e6;
18
- --neiki-border-color-dark: #adb5bd;
19
- --neiki-text-primary: #212529;
20
- --neiki-text-secondary: #495057;
21
- --neiki-text-muted: #6c757d;
22
- --neiki-accent-color: #0d6efd;
23
- --neiki-accent-hover: #0b5ed7;
24
- --neiki-danger-color: #dc3545;
25
- --neiki-success-color: #198754;
26
- --neiki-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
27
- --neiki-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
28
- --neiki-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
29
- --neiki-editor-bg: #ffffff;
30
- --neiki-toolbar-bg: #f8f9fa;
31
- --neiki-statusbar-bg: #f8f9fa;
32
- --neiki-modal-overlay: rgba(0, 0, 0, 0.5);
33
- --neiki-scrollbar-thumb: #ced4da;
34
- --neiki-scrollbar-track: #f8f9fa;
35
- --neiki-selection-bg: #b3d7ff;
36
- --neiki-highlight-color: #fff3cd;
37
- --neiki-table-border: #dee2e6;
38
- }
39
-
40
- /* Dark Theme */
41
- .neiki-editor.neiki-dark {
42
- --neiki-bg-primary: #1e1e1e;
43
- --neiki-bg-secondary: #252526;
44
- --neiki-bg-tertiary: #2d2d30;
45
- --neiki-bg-hover: #3e3e42;
46
- --neiki-bg-active: #505050;
47
- --neiki-border-color: #3e3e42;
48
- --neiki-border-color-dark: #505050;
49
- --neiki-text-primary: #d4d4d4;
50
- --neiki-text-secondary: #a0a0a0;
51
- --neiki-text-muted: #808080;
52
- --neiki-accent-color: #4fc3f7;
53
- --neiki-accent-hover: #29b6f6;
54
- --neiki-danger-color: #f44336;
55
- --neiki-success-color: #4caf50;
56
- --neiki-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
57
- --neiki-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
58
- --neiki-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
59
- --neiki-editor-bg: #1e1e1e;
60
- --neiki-toolbar-bg: #252526;
61
- --neiki-statusbar-bg: #252526;
62
- --neiki-modal-overlay: rgba(0, 0, 0, 0.7);
63
- --neiki-scrollbar-thumb: #505050;
64
- --neiki-scrollbar-track: #2d2d30;
65
- --neiki-selection-bg: #264f78;
66
- --neiki-highlight-color: #5c4d00;
67
- --neiki-table-border: #3e3e42;
68
- }
69
-
70
- /* ============================================
71
- Base Editor Container
72
- ============================================ */
73
- .neiki-editor {
74
- display: flex;
75
- flex-direction: column;
76
- width: 100%;
77
- height: 100%;
78
- min-height: 400px;
79
- background: var(--neiki-bg-primary);
80
- border: 1px solid var(--neiki-border-color);
81
- border-radius: 8px;
82
- overflow: hidden;
83
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
84
- font-size: 14px;
85
- color: var(--neiki-text-primary);
86
- box-shadow: var(--neiki-shadow-md);
87
- }
88
-
89
- .neiki-editor * {
90
- box-sizing: border-box;
91
- }
92
-
93
- /* Fullscreen Mode */
94
- .neiki-editor.neiki-fullscreen {
95
- position: fixed !important;
96
- top: 0 !important;
97
- left: 0 !important;
98
- right: 0 !important;
99
- bottom: 0 !important;
100
- width: 100vw !important;
101
- height: 100vh !important;
102
- z-index: 999999 !important;
103
- border-radius: 0 !important;
104
- border: none !important;
105
- }
106
-
107
- /* ============================================
108
- Toolbar
109
- ============================================ */
110
- .neiki-toolbar {
111
- display: flex;
112
- flex-wrap: wrap;
113
- align-items: center;
114
- gap: 2px;
115
- padding: 6px 8px;
116
- background: var(--neiki-toolbar-bg);
117
- border-bottom: 1px solid var(--neiki-border-color);
118
- min-height: 44px;
119
- }
120
-
121
- .neiki-toolbar-group {
122
- display: inline-flex;
123
- align-items: center;
124
- gap: 2px;
125
- padding: 0 4px;
126
- flex-wrap: nowrap;
127
- }
128
-
129
- .neiki-toolbar-group:not(:last-child) {
130
- border-right: 1px solid var(--neiki-border-color);
131
- padding-right: 8px;
132
- margin-right: 4px;
133
- }
134
-
135
- .neiki-toolbar-divider {
136
- width: 1px;
137
- height: 24px;
138
- background: var(--neiki-border-color);
139
- margin: 0 4px;
140
- }
141
-
142
- /* Toolbar Buttons */
143
- .neiki-btn,
144
- .neiki-toolbar-btn {
145
- position: relative;
146
- display: inline-flex;
147
- align-items: center;
148
- justify-content: center;
149
- width: 32px;
150
- height: 32px;
151
- padding: 0;
152
- background: transparent;
153
- border: 1px solid transparent;
154
- border-radius: 4px;
155
- cursor: pointer;
156
- color: var(--neiki-text-secondary);
157
- transition: all 0.15s ease;
158
- position: relative;
159
- }
160
-
161
- .neiki-btn:hover,
162
- .neiki-toolbar-btn:hover {
163
- background: var(--neiki-bg-hover);
164
- color: var(--neiki-text-primary);
165
- }
166
-
167
- .neiki-btn:active,
168
- .neiki-toolbar-btn:active {
169
- background: var(--neiki-bg-active);
170
- }
171
-
172
- .neiki-btn.active,
173
- .neiki-toolbar-btn.active {
174
- background: var(--neiki-bg-active);
175
- color: var(--neiki-accent-color);
176
- border-color: var(--neiki-accent-color);
177
- }
178
-
179
- .neiki-btn:disabled,
180
- .neiki-toolbar-btn:disabled {
181
- opacity: 0.4;
182
- cursor: not-allowed;
183
- }
184
-
185
- .neiki-btn svg,
186
- .neiki-toolbar-btn svg {
187
- width: 18px;
188
- height: 18px;
189
- fill: currentColor;
190
- pointer-events: none;
191
- }
192
-
193
- /* Toolbar Selects */
194
- .neiki-select {
195
- height: 32px;
196
- padding: 0 28px 0 10px;
197
- background: var(--neiki-bg-primary);
198
- border: 1px solid var(--neiki-border-color);
199
- border-radius: 4px;
200
- color: var(--neiki-text-primary);
201
- font-size: 13px;
202
- cursor: pointer;
203
- appearance: none;
204
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
205
- background-repeat: no-repeat;
206
- background-position: right 8px center;
207
- min-width: 100px;
208
- }
209
-
210
- .neiki-select:hover {
211
- border-color: var(--neiki-border-color-dark);
212
- }
213
-
214
- .neiki-select:focus {
215
- outline: none;
216
- border-color: var(--neiki-accent-color);
217
- box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
218
- }
219
-
220
- /* Color Picker Button */
221
- .neiki-color-btn {
222
- position: relative;
223
- width: 36px;
224
- }
225
-
226
- .neiki-color-btn .neiki-color-indicator {
227
- position: absolute;
228
- bottom: 4px;
229
- left: 50%;
230
- transform: translateX(-50%);
231
- width: 16px;
232
- height: 3px;
233
- border-radius: 1px;
234
- background: currentColor;
235
- }
236
-
237
- /* Checkbox Toggle */
238
- .neiki-checkbox-wrapper {
239
- display: flex;
240
- align-items: center;
241
- gap: 6px;
242
- padding: 0 8px;
243
- height: 32px;
244
- font-size: 12px;
245
- color: var(--neiki-text-secondary);
246
- cursor: pointer;
247
- user-select: none;
248
- }
249
-
250
- .neiki-checkbox {
251
- width: 16px;
252
- height: 16px;
253
- accent-color: var(--neiki-accent-color);
254
- cursor: pointer;
255
- }
256
-
257
- /* ============================================
258
- Editor Content Area
259
- ============================================ */
260
- .neiki-editor-wrapper,
261
- .neiki-content-wrapper {
262
- flex: 1;
263
- display: flex;
264
- flex-direction: column;
265
- overflow: hidden;
266
- position: relative;
267
- }
268
-
269
- .neiki-content {
270
- flex: 1;
271
- padding: 20px 24px;
272
- background: var(--neiki-editor-bg);
273
- overflow-y: auto;
274
- outline: none;
275
- line-height: 1.6;
276
- color: var(--neiki-text-primary);
277
- min-height: 200px;
278
- }
279
-
280
- .neiki-content:focus {
281
- outline: none;
282
- }
283
-
284
- /* Placeholder */
285
- .neiki-content:empty::before {
286
- content: attr(data-placeholder);
287
- color: var(--neiki-text-muted);
288
- font-style: italic;
289
- pointer-events: none;
290
- }
291
-
292
- .neiki-content.neiki-drag-over {
293
- border: 2px dashed var(--neiki-accent-color);
294
- background: rgba(13, 110, 253, 0.05);
295
- }
296
-
297
- .neiki-content.neiki-drag-over::after {
298
- content: 'Drop images here';
299
- position: absolute;
300
- top: 50%;
301
- left: 50%;
302
- transform: translate(-50%, -50%);
303
- color: var(--neiki-accent-color);
304
- font-weight: 600;
305
- font-size: 16px;
306
- pointer-events: none;
307
- z-index: 10;
308
- }
309
-
310
- /* Focus state for editor container - disabled */
311
- /* .neiki-editor.neiki-focused removed */
312
-
313
- /* Disabled state */
314
- .neiki-editor.neiki-disabled {
315
- opacity: 0.6;
316
- pointer-events: none;
317
- }
318
-
319
- /* Content Scrollbar */
320
- .neiki-content::-webkit-scrollbar {
321
- width: 10px;
322
- }
323
-
324
- .neiki-content::-webkit-scrollbar-track {
325
- background: var(--neiki-scrollbar-track);
326
- }
327
-
328
- .neiki-content::-webkit-scrollbar-thumb {
329
- background: var(--neiki-scrollbar-thumb);
330
- border-radius: 5px;
331
- }
332
-
333
- .neiki-content::-webkit-scrollbar-thumb:hover {
334
- background: var(--neiki-border-color-dark);
335
- }
336
-
337
- /* Content Typography */
338
- .neiki-content p {
339
- margin: 0 0 1em 0;
340
- }
341
-
342
- .neiki-content h1 {
343
- font-size: 2em;
344
- font-weight: 700;
345
- margin: 0 0 0.5em 0;
346
- }
347
-
348
- .neiki-content h2 {
349
- font-size: 1.5em;
350
- font-weight: 600;
351
- margin: 0 0 0.5em 0;
352
- }
353
-
354
- .neiki-content h3 {
355
- font-size: 1.25em;
356
- font-weight: 600;
357
- margin: 0 0 0.5em 0;
358
- }
359
-
360
- .neiki-content h4 {
361
- font-size: 1.1em;
362
- font-weight: 600;
363
- margin: 0 0 0.5em 0;
364
- }
365
-
366
- .neiki-content h5 {
367
- font-size: 1em;
368
- font-weight: 600;
369
- margin: 0 0 0.5em 0;
370
- }
371
-
372
- .neiki-content h6 {
373
- font-size: 0.9em;
374
- font-weight: 600;
375
- margin: 0 0 0.5em 0;
376
- }
377
-
378
- .neiki-content ul,
379
- .neiki-content ol {
380
- margin: 0 0 1em 0;
381
- padding-left: 2em;
382
- }
383
-
384
- .neiki-content li {
385
- margin-bottom: 0.25em;
386
- }
387
-
388
- .neiki-content blockquote {
389
- margin: 0 0 1em 0;
390
- padding: 10px 20px;
391
- border-left: 4px solid var(--neiki-accent-color);
392
- background: var(--neiki-bg-secondary);
393
- font-style: italic;
394
- }
395
-
396
- .neiki-content pre {
397
- margin: 0 0 1em 0;
398
- padding: 16px;
399
- background: var(--neiki-bg-tertiary);
400
- border-radius: 4px;
401
- overflow-x: auto;
402
- font-family: 'Consolas', 'Monaco', monospace;
403
- font-size: 13px;
404
- }
405
-
406
- .neiki-content code {
407
- padding: 2px 6px;
408
- background: var(--neiki-bg-tertiary);
409
- border-radius: 3px;
410
- font-family: 'Consolas', 'Monaco', monospace;
411
- font-size: 0.9em;
412
- }
413
-
414
- .neiki-content a {
415
- color: var(--neiki-accent-color);
416
- text-decoration: underline;
417
- }
418
-
419
- .neiki-content a:hover {
420
- color: var(--neiki-accent-hover);
421
- }
422
-
423
- .neiki-content img {
424
- max-width: 100%;
425
- height: auto;
426
- border-radius: 4px;
427
- cursor: pointer;
428
- }
429
-
430
- .neiki-content img.neiki-selected {
431
- outline: 2px solid var(--neiki-accent-color);
432
- outline-offset: 2px;
433
- }
434
-
435
- /* Search Highlight */
436
- .neiki-highlight {
437
- background: var(--neiki-highlight-color);
438
- padding: 1px 0;
439
- }
440
-
441
- .neiki-highlight-current {
442
- background: #ffc107;
443
- outline: 2px solid #ff9800;
444
- }
445
-
446
- /* ============================================
447
- Tables
448
- ============================================ */
449
- .neiki-content table,
450
- .neiki-table {
451
- width: 100%;
452
- border-collapse: collapse;
453
- margin: 1em 0;
454
- table-layout: fixed;
455
- }
456
-
457
- .neiki-content table td,
458
- .neiki-content table th {
459
- border: 1px solid var(--neiki-table-border);
460
- padding: 8px 12px;
461
- min-width: 50px;
462
- vertical-align: top;
463
- position: relative;
464
- }
465
-
466
- .neiki-content table th {
467
- background: var(--neiki-bg-secondary);
468
- font-weight: 600;
469
- }
470
-
471
- .neiki-content table td:hover,
472
- .neiki-content table th:hover {
473
- background: var(--neiki-bg-hover);
474
- }
475
-
476
- .neiki-content table td.neiki-cell-selected,
477
- .neiki-content table th.neiki-cell-selected {
478
- background: var(--neiki-selection-bg);
479
- }
480
-
481
- /* Table Resize Handle */
482
- .neiki-table-resize-handle {
483
- position: absolute;
484
- top: 0;
485
- right: -3px;
486
- width: 6px;
487
- height: 100%;
488
- cursor: col-resize;
489
- z-index: 10;
490
- }
491
-
492
- .neiki-table-resize-handle:hover {
493
- background: var(--neiki-accent-color);
494
- }
495
-
496
- /* ============================================
497
- Status Bar
498
- ============================================ */
499
- .neiki-statusbar {
500
- display: flex;
501
- justify-content: space-between;
502
- align-items: center;
503
- padding: 6px 12px;
504
- background: var(--neiki-statusbar-bg);
505
- border-top: 1px solid var(--neiki-border-color);
506
- font-size: 12px;
507
- color: var(--neiki-text-muted);
508
- }
509
-
510
- .neiki-statusbar-left,
511
- .neiki-statusbar-right {
512
- display: flex;
513
- align-items: center;
514
- gap: 16px;
515
- }
516
-
517
- .neiki-statusbar-item {
518
- display: flex;
519
- align-items: center;
520
- gap: 4px;
521
- }
522
-
523
- .neiki-statusbar-block {
524
- font-family: 'Consolas', 'Monaco', monospace;
525
- font-size: 11px;
526
- padding: 2px 6px;
527
- background: var(--neiki-bg-tertiary);
528
- border-radius: 3px;
529
- color: var(--neiki-accent-color);
530
- font-weight: 600;
531
- border: 1px solid var(--neiki-border-color);
532
- }
533
-
534
- /* ============================================
535
- Dropdowns & Popups
536
- ============================================ */
537
- .neiki-dropdown {
538
- position: absolute;
539
- top: 100%;
540
- left: 0;
541
- z-index: 1000;
542
- min-width: 180px;
543
- background: var(--neiki-bg-primary);
544
- border: 1px solid var(--neiki-border-color);
545
- border-radius: 6px;
546
- box-shadow: var(--neiki-shadow-lg);
547
- padding: 4px;
548
- margin-top: 4px;
549
- }
550
-
551
- /* Remove the .show requirement - JS adds/removes element directly */
552
-
553
- .neiki-dropdown-item {
554
- display: flex;
555
- align-items: center;
556
- gap: 6px;
557
- padding: 7px 10px;
558
- border-radius: 4px;
559
- cursor: pointer;
560
- color: var(--neiki-text-primary);
561
- font-size: 13px;
562
- transition: background 0.1s;
563
- }
564
-
565
- .neiki-dropdown-item:hover {
566
- background: var(--neiki-bg-hover);
567
- }
568
-
569
- .neiki-dropdown-item.active {
570
- background: var(--neiki-bg-active);
571
- color: var(--neiki-accent-color);
572
- }
573
-
574
- .neiki-dropdown-divider {
575
- height: 1px;
576
- background: var(--neiki-border-color);
577
- margin: 4px 0;
578
- }
579
-
580
- /* ============================================
581
- Color Picker
582
- ============================================ */
583
- .neiki-color-picker {
584
- position: absolute;
585
- top: 100%;
586
- left: 0;
587
- z-index: 1000;
588
- background: var(--neiki-bg-primary);
589
- border: 1px solid var(--neiki-border-color);
590
- border-radius: 8px;
591
- box-shadow: var(--neiki-shadow-lg);
592
- padding: 8px;
593
- margin-top: 4px;
594
- display: flex;
595
- flex-direction: column;
596
- gap: 6px;
597
- }
598
-
599
- .neiki-color-grid {
600
- display: grid;
601
- grid-template-columns: repeat(10, 1fr);
602
- gap: 2px;
603
- }
604
-
605
- .neiki-color-custom {
606
- display: flex;
607
- align-items: center;
608
- gap: 6px;
609
- padding-top: 6px;
610
- border-top: 1px solid var(--neiki-border-color);
611
- }
612
-
613
- .neiki-color-custom-input {
614
- -webkit-appearance: none;
615
- -moz-appearance: none;
616
- appearance: none;
617
- width: 28px;
618
- height: 28px;
619
- border: 1px solid var(--neiki-border-color);
620
- border-radius: 4px;
621
- padding: 2px;
622
- cursor: pointer;
623
- background: transparent;
624
- }
625
-
626
- .neiki-color-custom-input::-webkit-color-swatch-wrapper {
627
- padding: 0;
628
- }
629
-
630
- .neiki-color-custom-input::-webkit-color-swatch {
631
- border: none;
632
- border-radius: 2px;
633
- }
634
-
635
- .neiki-color-custom-input::-moz-color-swatch {
636
- border: none;
637
- border-radius: 2px;
638
- }
639
-
640
- .neiki-color-hex-input {
641
- flex: 1;
642
- height: 28px;
643
- padding: 0 8px;
644
- border: 1px solid var(--neiki-border-color);
645
- border-radius: 4px;
646
- font-size: 12px;
647
- font-family: monospace;
648
- background: var(--neiki-bg-secondary);
649
- color: var(--neiki-text-primary);
650
- outline: none;
651
- }
652
-
653
- .neiki-color-hex-input:focus {
654
- border-color: var(--neiki-accent-color);
655
- box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
656
- }
657
-
658
- .neiki-color-apply-btn {
659
- height: 28px;
660
- padding: 0 10px;
661
- border: none;
662
- border-radius: 4px;
663
- font-size: 12px;
664
- font-weight: 500;
665
- background: var(--neiki-accent-color);
666
- color: #fff;
667
- cursor: pointer;
668
- transition: background 0.15s;
669
- }
670
-
671
- .neiki-color-apply-btn:hover {
672
- background: var(--neiki-accent-hover);
673
- }
674
-
675
- .neiki-color-swatch {
676
- width: 22px;
677
- height: 22px;
678
- border-radius: 3px;
679
- cursor: pointer;
680
- border: 1px solid var(--neiki-border-color);
681
- transition: transform 0.1s;
682
- }
683
-
684
- .neiki-color-swatch:hover {
685
- transform: scale(1.2);
686
- z-index: 1;
687
- }
688
-
689
- .neiki-color-swatch.neiki-color-reset {
690
- background: white;
691
- position: relative;
692
- overflow: hidden;
693
- border: 1px solid #ccc;
694
- }
695
-
696
- .neiki-color-swatch.neiki-color-reset::after {
697
- content: '';
698
- position: absolute;
699
- top: 50%;
700
- left: -2px;
701
- right: -2px;
702
- height: 2px;
703
- background: #e53935;
704
- transform: rotate(-45deg);
705
- transform-origin: center;
706
- pointer-events: none;
707
- }
708
-
709
- .neiki-color-picker-label {
710
- font-size: 11px;
711
- font-weight: 600;
712
- color: var(--neiki-text-muted);
713
- text-transform: uppercase;
714
- margin-bottom: 8px;
715
- }
716
-
717
- /* Emoji Picker */
718
- .neiki-emoji-picker {
719
- position: absolute;
720
- top: 100%;
721
- left: 0;
722
- z-index: 1000;
723
- width: 280px;
724
- max-height: 250px;
725
- overflow-y: auto;
726
- background: var(--neiki-bg-primary);
727
- border: 1px solid var(--neiki-border-color);
728
- border-radius: 8px;
729
- box-shadow: var(--neiki-shadow-lg);
730
- padding: 8px;
731
- margin-top: 4px;
732
- display: grid;
733
- grid-template-columns: repeat(10, 1fr);
734
- gap: 2px;
735
- }
736
-
737
- .neiki-emoji-item {
738
- display: flex;
739
- align-items: center;
740
- justify-content: center;
741
- width: 24px;
742
- height: 24px;
743
- font-size: 18px;
744
- cursor: pointer;
745
- border-radius: 4px;
746
- transition: background 0.15s, transform 0.1s;
747
- }
748
-
749
- .neiki-emoji-item:hover {
750
- background: var(--neiki-bg-hover);
751
- transform: scale(1.2);
752
- }
753
-
754
- /* Special Characters Picker */
755
- .neiki-special-picker {
756
- position: absolute;
757
- top: 100%;
758
- left: 0;
759
- z-index: 1000;
760
- width: 320px;
761
- max-height: 280px;
762
- overflow-y: auto;
763
- background: var(--neiki-bg-primary);
764
- border: 1px solid var(--neiki-border-color);
765
- border-radius: 8px;
766
- box-shadow: var(--neiki-shadow-lg);
767
- padding: 8px;
768
- margin-top: 4px;
769
- display: grid;
770
- grid-template-columns: repeat(8, 1fr);
771
- gap: 4px;
772
- }
773
-
774
- .neiki-special-item {
775
- display: flex;
776
- align-items: center;
777
- justify-content: center;
778
- width: 32px;
779
- height: 32px;
780
- font-size: 18px;
781
- cursor: pointer;
782
- border-radius: 4px;
783
- border: 1px solid var(--neiki-border-color);
784
- background: var(--neiki-bg-secondary);
785
- transition: all 0.15s;
786
- }
787
-
788
- .neiki-special-item:hover {
789
- background: var(--neiki-accent-color);
790
- color: white;
791
- border-color: var(--neiki-accent-color);
792
- transform: scale(1.1);
793
- }
794
-
795
- /* Find & Replace Highlights */
796
- .neiki-highlight-find {
797
- background: #ffeb3b;
798
- padding: 1px 0;
799
- border-radius: 2px;
800
- }
801
-
802
- .neiki-highlight-current {
803
- background: #ff9800;
804
- outline: 2px solid #e65100;
805
- }
806
-
807
- .neiki-color-presets {
808
- display: grid;
809
- grid-template-columns: repeat(5, 1fr);
810
- gap: 6px;
811
- margin-bottom: 12px;
812
- }
813
-
814
- .neiki-color-preset {
815
- width: 32px;
816
- height: 32px;
817
- border-radius: 4px;
818
- border: 2px solid transparent;
819
- cursor: pointer;
820
- transition: transform 0.1s, border-color 0.1s;
821
- }
822
-
823
- .neiki-color-preset:hover {
824
- transform: scale(1.1);
825
- }
826
-
827
- .neiki-color-preset.active {
828
- border-color: var(--neiki-accent-color);
829
- }
830
-
831
- .neiki-color-preset.neiki-color-reset {
832
- background: linear-gradient(45deg, #fff 45%, #ff0000 45%, #ff0000 55%, #fff 55%);
833
- border: 1px solid var(--neiki-border-color);
834
- }
835
-
836
- .neiki-color-custom {
837
- display: flex;
838
- align-items: center;
839
- gap: 8px;
840
- padding-top: 8px;
841
- border-top: 1px solid var(--neiki-border-color);
842
- }
843
-
844
- .neiki-color-custom input[type="color"] {
845
- width: 40px;
846
- height: 32px;
847
- padding: 0;
848
- border: 1px solid var(--neiki-border-color);
849
- border-radius: 4px;
850
- cursor: pointer;
851
- }
852
-
853
- .neiki-color-custom input[type="text"] {
854
- flex: 1;
855
- height: 32px;
856
- padding: 0 8px;
857
- border: 1px solid var(--neiki-border-color);
858
- border-radius: 4px;
859
- background: var(--neiki-bg-primary);
860
- color: var(--neiki-text-primary);
861
- font-size: 12px;
862
- font-family: monospace;
863
- }
864
-
865
- /* ============================================
866
- Table Picker
867
- ============================================ */
868
- .neiki-table-picker {
869
- position: absolute;
870
- top: 100%;
871
- left: 0;
872
- z-index: 1000;
873
- background: var(--neiki-bg-primary);
874
- border: 1px solid var(--neiki-border-color);
875
- border-radius: 8px;
876
- box-shadow: var(--neiki-shadow-lg);
877
- padding: 12px;
878
- display: none;
879
- }
880
-
881
- .neiki-table-picker.show {
882
- display: block;
883
- }
884
-
885
- .neiki-table-picker-label {
886
- font-size: 12px;
887
- color: var(--neiki-text-secondary);
888
- margin-bottom: 8px;
889
- text-align: center;
890
- }
891
-
892
- .neiki-table-picker-grid {
893
- display: grid;
894
- grid-template-columns: repeat(10, 20px);
895
- gap: 2px;
896
- }
897
-
898
- .neiki-table-picker-cell {
899
- width: 20px;
900
- height: 20px;
901
- border: 1px solid var(--neiki-border-color);
902
- border-radius: 2px;
903
- background: var(--neiki-bg-primary);
904
- cursor: pointer;
905
- transition: background 0.1s;
906
- }
907
-
908
- .neiki-table-picker-cell:hover,
909
- .neiki-table-picker-cell.active {
910
- background: var(--neiki-accent-color);
911
- border-color: var(--neiki-accent-color);
912
- }
913
-
914
- /* ============================================
915
- Special Characters Picker (duplicate removed)
916
- ============================================ */
917
- .neiki-special-chars {
918
- position: absolute;
919
- top: 100%;
920
- left: 0;
921
- z-index: 1000;
922
- width: 280px;
923
- max-height: 300px;
924
- background: var(--neiki-bg-primary);
925
- border: 1px solid var(--neiki-border-color);
926
- border-radius: 8px;
927
- box-shadow: var(--neiki-shadow-lg);
928
- display: none;
929
- overflow: hidden;
930
- }
931
-
932
- .neiki-special-chars.show {
933
- display: flex;
934
- flex-direction: column;
935
- }
936
-
937
- .neiki-special-chars-grid {
938
- display: grid;
939
- grid-template-columns: repeat(10, 1fr);
940
- gap: 2px;
941
- padding: 8px;
942
- overflow-y: auto;
943
- }
944
-
945
- .neiki-special-char-item {
946
- display: flex;
947
- align-items: center;
948
- justify-content: center;
949
- width: 24px;
950
- height: 24px;
951
- font-size: 16px;
952
- border-radius: 4px;
953
- cursor: pointer;
954
- transition: background 0.1s;
955
- }
956
-
957
- .neiki-special-char-item:hover {
958
- background: var(--neiki-bg-hover);
959
- }
960
-
961
- /* ============================================
962
- Modals
963
- ============================================ */
964
- .neiki-modal-overlay {
965
- position: fixed;
966
- top: 0;
967
- left: 0;
968
- right: 0;
969
- bottom: 0;
970
- background: var(--neiki-modal-overlay);
971
- z-index: 10000;
972
- display: flex;
973
- align-items: center;
974
- justify-content: center;
975
- opacity: 0;
976
- visibility: hidden;
977
- transition: opacity 0.2s, visibility 0.2s;
978
- }
979
-
980
- .neiki-modal-overlay.active {
981
- opacity: 1;
982
- visibility: visible;
983
- }
984
-
985
- .neiki-modal {
986
- background: var(--neiki-bg-primary);
987
- border-radius: 12px;
988
- box-shadow: var(--neiki-shadow-lg);
989
- width: 100%;
990
- max-width: 440px;
991
- max-height: 90vh;
992
- overflow: hidden;
993
- animation: neiki-modal-in 0.2s ease;
994
- }
995
-
996
- .neiki-modal-wide {
997
- max-width: 520px;
998
- }
999
-
1000
- .neiki-modal-header {
1001
- display: flex;
1002
- align-items: center;
1003
- justify-content: space-between;
1004
- padding: 16px 20px;
1005
- border-bottom: 1px solid var(--neiki-border-color);
1006
- }
1007
-
1008
- .neiki-modal-title {
1009
- font-size: 16px;
1010
- font-weight: 600;
1011
- color: var(--neiki-text-primary);
1012
- margin: 0;
1013
- }
1014
-
1015
- .neiki-modal-close {
1016
- width: 32px;
1017
- height: 32px;
1018
- display: flex;
1019
- align-items: center;
1020
- justify-content: center;
1021
- background: transparent;
1022
- border: none;
1023
- border-radius: 4px;
1024
- cursor: pointer;
1025
- color: var(--neiki-text-muted);
1026
- transition: background 0.15s;
1027
- }
1028
-
1029
- .neiki-modal-close:hover {
1030
- background: var(--neiki-bg-hover);
1031
- color: var(--neiki-text-primary);
1032
- }
1033
-
1034
- .neiki-modal-body {
1035
- padding: 20px;
1036
- overflow-y: auto;
1037
- }
1038
-
1039
- .neiki-modal h3,
1040
- .neiki-modal-header h3 {
1041
- color: #000000;
1042
- margin: 0;
1043
- }
1044
-
1045
- .neiki-dark .neiki-modal h3,
1046
- .neiki-dark .neiki-modal-header h3 {
1047
- color: var(--neiki-text-primary);
1048
- }
1049
-
1050
- .neiki-modal-footer {
1051
- display: flex;
1052
- justify-content: flex-end;
1053
- gap: 10px;
1054
- padding: 16px 20px;
1055
- border-top: 1px solid var(--neiki-border-color);
1056
- }
1057
-
1058
- .neiki-modal-footer .neiki-btn {
1059
- width: auto;
1060
- height: 38px;
1061
- padding: 0 16px;
1062
- font-size: 14px;
1063
- font-weight: 500;
1064
- border-radius: 6px;
1065
- }
1066
-
1067
- /* Form Elements */
1068
- .neiki-form-group {
1069
- margin-bottom: 16px;
1070
- }
1071
-
1072
- .neiki-form-group:last-child {
1073
- margin-bottom: 0;
1074
- }
1075
-
1076
- .neiki-form-label {
1077
- display: block;
1078
- margin-bottom: 6px;
1079
- font-size: 13px;
1080
- font-weight: 500;
1081
- color: var(--neiki-text-secondary);
1082
- }
1083
-
1084
- .neiki-form-input,
1085
- .neiki-input {
1086
- width: 100%;
1087
- height: 40px;
1088
- padding: 0 12px;
1089
- border: 1px solid var(--neiki-border-color);
1090
- border-radius: 6px;
1091
- background: var(--neiki-bg-primary);
1092
- color: var(--neiki-text-primary);
1093
- font-size: 14px;
1094
- transition: border-color 0.15s;
1095
- }
1096
-
1097
- .neiki-form-input:focus,
1098
- .neiki-input:focus {
1099
- outline: none;
1100
- border-color: var(--neiki-accent-color);
1101
- box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
1102
- }
1103
-
1104
- .neiki-form-input::placeholder,
1105
- .neiki-input::placeholder {
1106
- color: var(--neiki-text-muted);
1107
- }
1108
-
1109
- .neiki-form-row {
1110
- display: flex;
1111
- gap: 16px;
1112
- }
1113
-
1114
- .neiki-form-divider {
1115
- display: flex;
1116
- align-items: center;
1117
- margin: 16px 0;
1118
- text-align: center;
1119
- position: relative;
1120
- }
1121
-
1122
- .neiki-form-divider::before {
1123
- content: '';
1124
- flex: 1;
1125
- height: 1px;
1126
- background: var(--neiki-border-color);
1127
- margin-right: 12px;
1128
- }
1129
-
1130
- .neiki-form-divider::after {
1131
- content: '';
1132
- flex: 1;
1133
- height: 1px;
1134
- background: var(--neiki-border-color);
1135
- margin-left: 12px;
1136
- }
1137
-
1138
- .neiki-form-divider span {
1139
- color: var(--neiki-text-muted);
1140
- font-size: 12px;
1141
- font-weight: 500;
1142
- text-transform: uppercase;
1143
- }
1144
-
1145
- .neiki-form-group label {
1146
- display: block;
1147
- margin-bottom: 6px;
1148
- font-size: 13px;
1149
- font-weight: 500;
1150
- color: var(--neiki-text-secondary);
1151
- }
1152
-
1153
- .neiki-form-textarea {
1154
- width: 100%;
1155
- min-height: 120px;
1156
- padding: 12px;
1157
- border: 1px solid var(--neiki-border-color);
1158
- border-radius: 6px;
1159
- background: var(--neiki-bg-primary);
1160
- color: var(--neiki-text-primary);
1161
- font-size: 14px;
1162
- font-family: inherit;
1163
- resize: vertical;
1164
- transition: border-color 0.15s;
1165
- }
1166
-
1167
- .neiki-form-textarea:focus {
1168
- outline: none;
1169
- border-color: var(--neiki-accent-color);
1170
- box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
1171
- }
1172
-
1173
- /* Buttons */
1174
- .neiki-button {
1175
- display: inline-flex;
1176
- align-items: center;
1177
- justify-content: center;
1178
- gap: 6px;
1179
- height: 38px;
1180
- padding: 0 16px;
1181
- border: 1px solid transparent;
1182
- border-radius: 6px;
1183
- font-size: 14px;
1184
- font-weight: 500;
1185
- cursor: pointer;
1186
- transition: all 0.15s;
1187
- }
1188
-
1189
- .neiki-button-primary,
1190
- .neiki-btn-primary {
1191
- background: var(--neiki-accent-color);
1192
- color: #fff;
1193
- }
1194
-
1195
- .neiki-button-primary:hover,
1196
- .neiki-btn-primary:hover {
1197
- background: var(--neiki-accent-hover);
1198
- }
1199
-
1200
- .neiki-button-secondary,
1201
- .neiki-btn-secondary {
1202
- background: var(--neiki-bg-secondary);
1203
- color: var(--neiki-text-primary);
1204
- border-color: var(--neiki-border-color);
1205
- }
1206
-
1207
- .neiki-btn-primary,
1208
- .neiki-btn-secondary {
1209
- display: inline-flex;
1210
- align-items: center;
1211
- justify-content: center;
1212
- height: 38px;
1213
- padding: 0 16px;
1214
- border: 1px solid transparent;
1215
- border-radius: 6px;
1216
- font-size: 14px;
1217
- font-weight: 500;
1218
- cursor: pointer;
1219
- transition: all 0.15s;
1220
- }
1221
-
1222
- .neiki-btn-secondary {
1223
- border-color: var(--neiki-border-color);
1224
- }
1225
-
1226
- .neiki-btn-secondary:hover {
1227
- background: var(--neiki-bg-hover);
1228
- }
1229
-
1230
- .neiki-button-secondary:hover {
1231
- background: var(--neiki-bg-hover);
1232
- }
1233
-
1234
- .neiki-button-danger {
1235
- background: var(--neiki-danger-color);
1236
- color: #fff;
1237
- }
1238
-
1239
- .neiki-button-danger:hover {
1240
- opacity: 0.9;
1241
- }
1242
-
1243
- /* ============================================
1244
- Find & Replace Panel
1245
- ============================================ */
1246
- .neiki-find-replace {
1247
- position: absolute;
1248
- top: 0;
1249
- right: 0;
1250
- z-index: 100;
1251
- width: 360px;
1252
- background: var(--neiki-bg-primary);
1253
- border: 1px solid var(--neiki-border-color);
1254
- border-radius: 0 0 0 8px;
1255
- box-shadow: var(--neiki-shadow-lg);
1256
- display: none;
1257
- }
1258
-
1259
- .neiki-find-replace.show {
1260
- display: block;
1261
- }
1262
-
1263
- .neiki-find-replace-header {
1264
- display: flex;
1265
- align-items: center;
1266
- justify-content: space-between;
1267
- padding: 10px 12px;
1268
- border-bottom: 1px solid var(--neiki-border-color);
1269
- }
1270
-
1271
- .neiki-find-replace-title {
1272
- font-size: 13px;
1273
- font-weight: 600;
1274
- color: var(--neiki-text-primary);
1275
- }
1276
-
1277
- .neiki-find-replace-body {
1278
- padding: 12px;
1279
- }
1280
-
1281
- .neiki-find-replace-row {
1282
- display: flex;
1283
- gap: 8px;
1284
- margin-bottom: 10px;
1285
- }
1286
-
1287
- .neiki-find-replace-row:last-child {
1288
- margin-bottom: 0;
1289
- }
1290
-
1291
- .neiki-find-replace-input {
1292
- flex: 1;
1293
- height: 32px;
1294
- padding: 0 10px;
1295
- border: 1px solid var(--neiki-border-color);
1296
- border-radius: 4px;
1297
- background: var(--neiki-bg-primary);
1298
- color: var(--neiki-text-primary);
1299
- font-size: 13px;
1300
- }
1301
-
1302
- .neiki-find-replace-input:focus {
1303
- outline: none;
1304
- border-color: var(--neiki-accent-color);
1305
- }
1306
-
1307
- .neiki-find-replace-options {
1308
- display: flex;
1309
- align-items: center;
1310
- gap: 12px;
1311
- margin-bottom: 10px;
1312
- }
1313
-
1314
- .neiki-find-replace-option {
1315
- display: flex;
1316
- align-items: center;
1317
- gap: 4px;
1318
- font-size: 12px;
1319
- color: var(--neiki-text-secondary);
1320
- cursor: pointer;
1321
- }
1322
-
1323
- .neiki-find-replace-option input {
1324
- accent-color: var(--neiki-accent-color);
1325
- }
1326
-
1327
- .neiki-find-replace-actions {
1328
- display: flex;
1329
- gap: 6px;
1330
- flex-wrap: wrap;
1331
- }
1332
-
1333
- .neiki-find-replace-btn {
1334
- height: 28px;
1335
- padding: 0 10px;
1336
- font-size: 12px;
1337
- border-radius: 4px;
1338
- }
1339
-
1340
- .neiki-find-replace-count {
1341
- font-size: 12px;
1342
- color: var(--neiki-text-muted);
1343
- margin-left: auto;
1344
- }
1345
-
1346
- /* ============================================
1347
- HTML Code View
1348
- ============================================ */
1349
- .neiki-code-view {
1350
- position: absolute;
1351
- top: 0;
1352
- left: 0;
1353
- right: 0;
1354
- bottom: 0;
1355
- z-index: 50;
1356
- background: var(--neiki-bg-primary);
1357
- display: none;
1358
- flex-direction: column;
1359
- }
1360
-
1361
- .neiki-code-view.show {
1362
- display: flex;
1363
- }
1364
-
1365
- .neiki-code-view-header {
1366
- display: flex;
1367
- align-items: center;
1368
- justify-content: space-between;
1369
- padding: 8px 16px;
1370
- background: var(--neiki-bg-secondary);
1371
- border-bottom: 1px solid var(--neiki-border-color);
1372
- flex-shrink: 0;
1373
- }
1374
-
1375
- .neiki-code-view-title {
1376
- font-size: 13px;
1377
- font-weight: 600;
1378
- color: var(--neiki-text-primary);
1379
- }
1380
-
1381
- .neiki-code-view-textarea {
1382
- flex: 1;
1383
- width: 100%;
1384
- padding: 16px;
1385
- border: none;
1386
- background: var(--neiki-bg-primary);
1387
- color: var(--neiki-text-primary);
1388
- font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
1389
- font-size: 13px;
1390
- line-height: 1.5;
1391
- resize: none;
1392
- }
1393
-
1394
- .neiki-code-view-textarea:focus {
1395
- outline: none;
1396
- }
1397
-
1398
- .neiki-code-view-apply {
1399
- width: auto !important;
1400
- padding: 0 12px !important;
1401
- display: inline-flex;
1402
- align-items: center;
1403
- gap: 4px;
1404
- height: 30px;
1405
- font-size: 12px;
1406
- background: var(--neiki-accent-color) !important;
1407
- color: white !important;
1408
- border-radius: 5px;
1409
- }
1410
-
1411
- .neiki-code-view-apply:hover {
1412
- background: var(--neiki-accent-hover) !important;
1413
- color: white !important;
1414
- }
1415
-
1416
- .neiki-code-view-apply svg {
1417
- width: 14px !important;
1418
- height: 14px !important;
1419
- }
1420
-
1421
- /* ============================================
1422
- Context Menu
1423
- ============================================ */
1424
- .neiki-context-menu {
1425
- position: fixed;
1426
- z-index: 10001;
1427
- min-width: 180px;
1428
- background: var(--neiki-bg-primary);
1429
- border: 1px solid var(--neiki-border-color);
1430
- border-radius: 8px;
1431
- box-shadow: var(--neiki-shadow-lg);
1432
- padding: 4px;
1433
- display: none;
1434
- }
1435
-
1436
- .neiki-context-menu.show {
1437
- display: block;
1438
- }
1439
-
1440
- .neiki-context-item,
1441
- .neiki-context-menu-item {
1442
- display: flex;
1443
- align-items: center;
1444
- gap: 10px;
1445
- padding: 8px 12px;
1446
- border-radius: 4px;
1447
- cursor: pointer;
1448
- color: var(--neiki-text-primary);
1449
- font-size: 13px;
1450
- transition: background 0.1s;
1451
- }
1452
-
1453
- .neiki-context-item:hover,
1454
- .neiki-context-menu-item:hover {
1455
- background: var(--neiki-bg-hover);
1456
- }
1457
-
1458
- .neiki-context-item.neiki-context-danger,
1459
- .neiki-context-menu-item.danger {
1460
- color: var(--neiki-danger-color);
1461
- }
1462
-
1463
- .neiki-context-item svg,
1464
- .neiki-context-menu-item svg {
1465
- width: 16px;
1466
- height: 16px;
1467
- fill: currentColor;
1468
- }
1469
-
1470
- .neiki-context-divider,
1471
- .neiki-context-menu-divider {
1472
- height: 1px;
1473
- background: var(--neiki-border-color);
1474
- margin: 4px 0;
1475
- }
1476
-
1477
- /* ============================================
1478
- Floating Selection Toolbar
1479
- ============================================ */
1480
- .neiki-floating-toolbar {
1481
- position: absolute;
1482
- z-index: 1000;
1483
- display: none;
1484
- background: var(--neiki-bg-primary);
1485
- border: 1px solid var(--neiki-border-color);
1486
- border-radius: 8px;
1487
- box-shadow: var(--neiki-shadow-lg);
1488
- padding: 4px;
1489
- }
1490
-
1491
- .neiki-floating-toolbar.show {
1492
- display: flex;
1493
- align-items: center;
1494
- gap: 2px;
1495
- }
1496
-
1497
- .neiki-floating-btn {
1498
- width: 32px;
1499
- height: 32px;
1500
- border: none;
1501
- background: var(--neiki-bg-primary);
1502
- color: var(--neiki-text-primary);
1503
- border-radius: 6px;
1504
- cursor: pointer;
1505
- display: flex;
1506
- align-items: center;
1507
- justify-content: center;
1508
- transition: all 0.15s;
1509
- }
1510
-
1511
- .neiki-floating-btn:hover {
1512
- background: var(--neiki-bg-hover);
1513
- color: var(--neiki-accent-color);
1514
- }
1515
-
1516
- .neiki-floating-btn:active {
1517
- background: var(--neiki-bg-active);
1518
- }
1519
-
1520
- .neiki-floating-btn svg {
1521
- width: 16px;
1522
- height: 16px;
1523
- fill: currentColor;
1524
- }
1525
-
1526
- .neiki-floating-toolbar .neiki-btn {
1527
- width: 28px;
1528
- height: 28px;
1529
- }
1530
-
1531
- .neiki-floating-toolbar .neiki-btn svg {
1532
- width: 14px;
1533
- height: 14px;
1534
- }
1535
-
1536
- .neiki-floating-divider {
1537
- width: 1px;
1538
- height: 20px;
1539
- background: var(--neiki-border-color);
1540
- margin: 0 2px;
1541
- }
1542
-
1543
- .neiki-floating-move-btn svg {
1544
- width: 16px;
1545
- height: 16px;
1546
- }
1547
-
1548
- /* ============================================
1549
- Tooltips
1550
- ============================================ */
1551
- [data-tooltip] {
1552
- position: relative;
1553
- }
1554
-
1555
- [data-tooltip]::after {
1556
- content: attr(data-tooltip);
1557
- position: absolute;
1558
- bottom: 100%;
1559
- left: 50%;
1560
- transform: translateX(-50%);
1561
- padding: 6px 10px;
1562
- background: var(--neiki-text-primary);
1563
- color: var(--neiki-bg-primary);
1564
- font-size: 11px;
1565
- font-weight: 500;
1566
- white-space: nowrap;
1567
- border-radius: 4px;
1568
- opacity: 0;
1569
- visibility: hidden;
1570
- transition: opacity 0.15s, visibility 0.15s;
1571
- pointer-events: none;
1572
- z-index: 10002;
1573
- margin-bottom: 6px;
1574
- }
1575
-
1576
- [data-tooltip]:hover::after {
1577
- opacity: 1;
1578
- visibility: visible;
1579
- }
1580
-
1581
- /* ============================================
1582
- Drag & Drop Overlay
1583
- ============================================ */
1584
- .neiki-drop-overlay {
1585
- position: absolute;
1586
- top: 0;
1587
- left: 0;
1588
- right: 0;
1589
- bottom: 0;
1590
- background: rgba(13, 110, 253, 0.1);
1591
- border: 3px dashed var(--neiki-accent-color);
1592
- border-radius: 8px;
1593
- display: none;
1594
- align-items: center;
1595
- justify-content: center;
1596
- z-index: 100;
1597
- pointer-events: none;
1598
- }
1599
-
1600
- .neiki-drop-overlay.show {
1601
- display: flex;
1602
- }
1603
-
1604
- .neiki-drop-overlay-text {
1605
- font-size: 18px;
1606
- font-weight: 600;
1607
- color: var(--neiki-accent-color);
1608
- }
1609
-
1610
- /* ============================================
1611
- Image Resize Handles
1612
- ============================================ */
1613
- .neiki-img-resizable {
1614
- display: inline-block;
1615
- position: relative;
1616
- outline: 2px solid var(--neiki-accent-color);
1617
- outline-offset: 2px;
1618
- border-radius: 4px;
1619
- line-height: 0;
1620
- }
1621
-
1622
- .neiki-img-resizable img {
1623
- display: block;
1624
- max-width: 100%;
1625
- }
1626
-
1627
- .neiki-img-resize-handle {
1628
- position: absolute;
1629
- width: 12px;
1630
- height: 12px;
1631
- background: var(--neiki-accent-color);
1632
- border: 2px solid #fff;
1633
- border-radius: 2px;
1634
- z-index: 10;
1635
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
1636
- }
1637
-
1638
- .neiki-img-resize-handle.nw { top: -6px; left: -6px; cursor: nw-resize; }
1639
- .neiki-img-resize-handle.ne { top: -6px; right: -6px; cursor: ne-resize; }
1640
- .neiki-img-resize-handle.sw { bottom: -6px; left: -6px; cursor: sw-resize; }
1641
- .neiki-img-resize-handle.se { bottom: -6px; right: -6px; cursor: se-resize; }
1642
-
1643
- .neiki-img-size-label {
1644
- position: absolute;
1645
- bottom: -32px;
1646
- left: 50%;
1647
- transform: translateX(-50%);
1648
- background: var(--neiki-text-primary);
1649
- color: var(--neiki-bg-primary);
1650
- font-size: 13px;
1651
- line-height: 1.4;
1652
- font-weight: 600;
1653
- padding: 4px 12px;
1654
- border-radius: 6px;
1655
- white-space: nowrap;
1656
- pointer-events: none;
1657
- z-index: 10;
1658
- opacity: 0.9;
1659
- }
1660
-
1661
- /* Touch-friendly resize handles */
1662
- @media (pointer: coarse) {
1663
- .neiki-img-resize-handle {
1664
- width: 20px;
1665
- height: 20px;
1666
- }
1667
- .neiki-img-resize-handle.nw { top: -10px; left: -10px; }
1668
- .neiki-img-resize-handle.ne { top: -10px; right: -10px; }
1669
- .neiki-img-resize-handle.sw { bottom: -10px; left: -10px; }
1670
- .neiki-img-resize-handle.se { bottom: -10px; right: -10px; }
1671
- }
1672
-
1673
- /* ============================================
1674
- Table Column Resize Handle
1675
- ============================================ */
1676
- .neiki-table-col-resize-handle {
1677
- position: absolute;
1678
- width: 6px;
1679
- cursor: col-resize;
1680
- z-index: 10;
1681
- background: transparent;
1682
- transition: background 0.1s;
1683
- }
1684
-
1685
- .neiki-table-col-resize-handle:hover,
1686
- .neiki-table-col-resize-handle:active {
1687
- background: var(--neiki-accent-color);
1688
- opacity: 0.6;
1689
- border-radius: 3px;
1690
- }
1691
-
1692
- /* ============================================
1693
- Block Drag & Drop
1694
- ============================================ */
1695
- .neiki-block-grip {
1696
- position: absolute;
1697
- width: 22px;
1698
- height: 22px;
1699
- display: flex;
1700
- align-items: center;
1701
- justify-content: center;
1702
- cursor: grab;
1703
- color: var(--neiki-text-muted);
1704
- opacity: 0;
1705
- transition: opacity 0.15s, color 0.15s;
1706
- border-radius: 4px;
1707
- z-index: 5;
1708
- user-select: none;
1709
- }
1710
-
1711
- .neiki-content:hover .neiki-block-grip {
1712
- opacity: 0.5;
1713
- }
1714
-
1715
- .neiki-block-grip:hover {
1716
- opacity: 1 !important;
1717
- color: var(--neiki-text-primary);
1718
- background: var(--neiki-bg-hover);
1719
- }
1720
-
1721
- .neiki-block-grip:active {
1722
- cursor: grabbing;
1723
- }
1724
-
1725
- .neiki-block-grip svg {
1726
- width: 14px;
1727
- height: 14px;
1728
- fill: currentColor;
1729
- pointer-events: none;
1730
- }
1731
-
1732
- .neiki-block-ghost {
1733
- position: fixed;
1734
- z-index: 100000;
1735
- pointer-events: none;
1736
- opacity: 0.7;
1737
- background: var(--neiki-bg-primary);
1738
- border: 2px solid var(--neiki-accent-color);
1739
- border-radius: 6px;
1740
- padding: 8px 12px;
1741
- box-shadow: var(--neiki-shadow-lg);
1742
- max-height: 120px;
1743
- overflow: hidden;
1744
- }
1745
-
1746
- .neiki-block-placeholder {
1747
- border: 2px dashed var(--neiki-accent-color);
1748
- border-radius: 6px;
1749
- background: rgba(13, 110, 253, 0.05);
1750
- margin: 2px 0;
1751
- transition: height 0.15s ease;
1752
- }
1753
-
1754
- /* ============================================
1755
- Print Styles
1756
- ============================================ */
1757
- @media print {
1758
- .neiki-editor {
1759
- border: none !important;
1760
- box-shadow: none !important;
1761
- }
1762
-
1763
- .neiki-toolbar,
1764
- .neiki-statusbar,
1765
- .neiki-floating-toolbar,
1766
- .neiki-find-replace,
1767
- .neiki-code-view-header,
1768
- .neiki-block-grip,
1769
- .neiki-img-resize-handle,
1770
- .neiki-img-size-label,
1771
- .neiki-table-col-resize-handle {
1772
- display: none !important;
1773
- }
1774
-
1775
- .neiki-content {
1776
- padding: 0 !important;
1777
- overflow: visible !important;
1778
- }
1779
-
1780
- .neiki-editor-wrapper {
1781
- overflow: visible !important;
1782
- }
1783
- }
1784
-
1785
- /* ============================================
1786
- Responsive Adjustments
1787
- ============================================ */
1788
- @media (max-width: 768px) {
1789
- .neiki-toolbar {
1790
- padding: 4px;
1791
- gap: 1px;
1792
- }
1793
-
1794
- .neiki-toolbar-group {
1795
- padding: 0 2px;
1796
- }
1797
-
1798
- .neiki-toolbar-group:not(:last-child) {
1799
- padding-right: 4px;
1800
- margin-right: 2px;
1801
- }
1802
-
1803
- .neiki-btn {
1804
- width: 28px;
1805
- height: 28px;
1806
- }
1807
-
1808
- .neiki-btn svg {
1809
- width: 16px;
1810
- height: 16px;
1811
- }
1812
-
1813
- .neiki-select {
1814
- height: 28px;
1815
- min-width: 80px;
1816
- font-size: 12px;
1817
- padding: 0 24px 0 8px;
1818
- }
1819
-
1820
- .neiki-content {
1821
- padding: 12px 16px;
1822
- }
1823
-
1824
- .neiki-statusbar {
1825
- padding: 4px 8px;
1826
- font-size: 11px;
1827
- }
1828
-
1829
- .neiki-modal {
1830
- width: 95%;
1831
- max-width: none;
1832
- margin: 10px;
1833
- }
1834
-
1835
- .neiki-find-replace {
1836
- width: 100%;
1837
- border-radius: 0;
1838
- }
1839
-
1840
- .neiki-checkbox-wrapper {
1841
- padding: 0 4px;
1842
- font-size: 11px;
1843
- }
1844
-
1845
- .neiki-color-picker {
1846
- left: auto;
1847
- right: 0;
1848
- }
1849
- }
1850
-
1851
- @media (max-width: 480px) {
1852
- .neiki-toolbar-group:not(:last-child) {
1853
- border-right: none;
1854
- padding-right: 2px;
1855
- margin-right: 0;
1856
- }
1857
-
1858
- .neiki-select {
1859
- min-width: 60px;
1860
- }
1861
-
1862
- .neiki-statusbar-left,
1863
- .neiki-statusbar-right {
1864
- gap: 8px;
1865
- }
1866
- }
1867
-
1868
- /* ============================================
1869
- Animations
1870
- ============================================ */
1871
- @keyframes neiki-fade-in {
1872
- from {
1873
- opacity: 0;
1874
- transform: translateY(-10px);
1875
- }
1876
- to {
1877
- opacity: 1;
1878
- transform: translateY(0);
1879
- }
1880
- }
1881
-
1882
- .neiki-dropdown.show,
1883
- .neiki-color-picker.show,
1884
- .neiki-table-picker.show,
1885
- .neiki-emoji-picker.show,
1886
- .neiki-special-chars.show {
1887
- animation: neiki-fade-in 0.15s ease;
1888
- }
1889
-
1890
- @keyframes neiki-modal-in {
1891
- from {
1892
- opacity: 0;
1893
- transform: scale(0.95);
1894
- }
1895
- to {
1896
- opacity: 1;
1897
- transform: scale(1);
1898
- }
1899
- }
1900
-
1901
- .neiki-modal-overlay.show .neiki-modal {
1902
- animation: neiki-modal-in 0.2s ease;
1903
- }
1904
-
1905
- /* ============================================
1906
- Font Size Widget
1907
- ============================================ */
1908
- .neiki-fontsize-widget {
1909
- display: inline-flex;
1910
- align-items: center;
1911
- position: relative;
1912
- height: 32px;
1913
- border: 1px solid var(--neiki-border-color);
1914
- border-radius: 4px;
1915
- overflow: visible;
1916
- background: var(--neiki-bg-primary);
1917
- }
1918
-
1919
- .neiki-fontsize-btn {
1920
- display: flex;
1921
- align-items: center;
1922
- justify-content: center;
1923
- width: 26px;
1924
- height: 30px;
1925
- background: transparent;
1926
- border: none;
1927
- cursor: pointer;
1928
- color: var(--neiki-text-secondary);
1929
- transition: background 0.15s, color 0.15s;
1930
- padding: 0;
1931
- }
1932
-
1933
- .neiki-fontsize-btn:hover {
1934
- background: var(--neiki-bg-hover);
1935
- color: var(--neiki-text-primary);
1936
- }
1937
-
1938
- .neiki-fontsize-input {
1939
- width: 38px;
1940
- height: 30px;
1941
- text-align: center;
1942
- border: none;
1943
- border-left: 1px solid var(--neiki-border-color);
1944
- border-right: 1px solid var(--neiki-border-color);
1945
- background: var(--neiki-bg-primary);
1946
- color: var(--neiki-text-primary);
1947
- font-size: 13px;
1948
- outline: none;
1949
- -moz-appearance: textfield;
1950
- appearance: textfield;
1951
- padding: 0;
1952
- }
1953
-
1954
- .neiki-fontsize-input::-webkit-outer-spin-button,
1955
- .neiki-fontsize-input::-webkit-inner-spin-button {
1956
- -webkit-appearance: none;
1957
- margin: 0;
1958
- }
1959
-
1960
- .neiki-fontsize-dropdown {
1961
- display: none;
1962
- position: absolute;
1963
- top: 100%;
1964
- left: 0;
1965
- z-index: 1000;
1966
- min-width: 70px;
1967
- max-height: 240px;
1968
- overflow-y: auto;
1969
- background: var(--neiki-bg-primary);
1970
- border: 1px solid var(--neiki-border-color);
1971
- border-radius: 6px;
1972
- box-shadow: var(--neiki-shadow-lg);
1973
- padding: 4px;
1974
- margin-top: 4px;
1975
- }
1976
-
1977
- .neiki-fontsize-dropdown.show {
1978
- display: block;
1979
- }
1980
-
1981
- .neiki-fontsize-dropdown-item {
1982
- padding: 6px 12px;
1983
- font-size: 13px;
1984
- cursor: pointer;
1985
- border-radius: 4px;
1986
- color: var(--neiki-text-primary);
1987
- text-align: center;
1988
- transition: background 0.1s;
1989
- }
1990
-
1991
- .neiki-fontsize-dropdown-item:hover {
1992
- background: var(--neiki-bg-hover);
1993
- }
1994
-
1995
- /* ============================================
1996
- Insert Dropdown Button
1997
- ============================================ */
1998
- .neiki-insert-dropdown-btn {
1999
- width: auto !important;
2000
- padding: 0 8px !important;
2001
- gap: 4px;
2002
- font-size: 13px;
2003
- font-weight: 500;
2004
- }
2005
-
2006
- .neiki-insert-label {
2007
- font-size: 13px;
2008
- pointer-events: none;
2009
- }
2010
-
2011
- .neiki-chevron {
2012
- display: inline-flex;
2013
- pointer-events: none;
2014
- }
2015
-
2016
- .neiki-chevron svg {
2017
- width: 14px;
2018
- height: 14px;
2019
- }
2020
-
2021
- .neiki-insert-dropdown {
2022
- display: none;
2023
- position: absolute;
2024
- top: 100%;
2025
- left: 0;
2026
- z-index: 1000;
2027
- min-width: 160px;
2028
- background: var(--neiki-bg-primary);
2029
- border: 1px solid var(--neiki-border-color);
2030
- border-radius: 6px;
2031
- box-shadow: var(--neiki-shadow-lg);
2032
- padding: 4px;
2033
- margin-top: 4px;
2034
- }
2035
-
2036
- .neiki-insert-dropdown.show {
2037
- display: block;
2038
- animation: neiki-fade-in 0.15s ease;
2039
- }
2040
-
2041
- /* ============================================
2042
- More Menu (⋯) Dropdown
2043
- ============================================ */
2044
- .neiki-more-btn {
2045
- position: relative;
2046
- }
2047
-
2048
- .neiki-more-dropdown {
2049
- display: none;
2050
- position: absolute;
2051
- top: 100%;
2052
- right: 0;
2053
- z-index: 1000;
2054
- min-width: 140px;
2055
- max-width: 170px;
2056
- background: var(--neiki-bg-primary);
2057
- border: 1px solid var(--neiki-border-color);
2058
- border-radius: 6px;
2059
- box-shadow: var(--neiki-shadow-lg);
2060
- padding: 4px;
2061
- margin-top: 4px;
2062
- }
2063
-
2064
- .neiki-more-dropdown.show {
2065
- display: block;
2066
- animation: neiki-fade-in 0.15s ease;
2067
- }
2068
-
2069
- /* Czech language - wider dropdown for longer labels */
2070
- .neiki-lang-cs .neiki-more-dropdown {
2071
- min-width: 165px;
2072
- }
2073
-
2074
- /* Dropdown item with icon */
2075
- .neiki-dropdown-item-icon {
2076
- display: inline-flex;
2077
- align-items: center;
2078
- justify-content: center;
2079
- width: 18px;
2080
- height: 18px;
2081
- flex-shrink: 0;
2082
- }
2083
-
2084
- .neiki-dropdown-item-icon svg {
2085
- width: 16px;
2086
- height: 16px;
2087
- fill: currentColor;
2088
- }
2089
-
2090
- .neiki-dropdown-item-danger {
2091
- color: var(--neiki-danger-color) !important;
2092
- }
2093
-
2094
- .neiki-dropdown-item-danger:hover {
2095
- background: rgba(220, 53, 69, 0.1);
2096
- }
2097
-
2098
- /* Autosave badge in More menu */
2099
- .neiki-autosave-badge {
2100
- font-size: 12px;
2101
- font-weight: 600;
2102
- color: var(--neiki-text-muted);
2103
- padding: 0 4px;
2104
- }
2105
-
2106
- .neiki-autosave-badge.active {
2107
- color: var(--neiki-success-color);
2108
- }
2109
-
2110
- /* ============================================
2111
- Preview Modal
2112
- ============================================ */
2113
- .neiki-preview-overlay {
2114
- position: fixed;
2115
- inset: 0;
2116
- background: rgba(0, 0, 0, 0.6);
2117
- z-index: 100000;
2118
- display: flex;
2119
- align-items: center;
2120
- justify-content: center;
2121
- padding: 30px;
2122
- animation: neiki-fade-in 0.2s ease;
2123
- }
2124
-
2125
- .neiki-preview-modal {
2126
- background: var(--neiki-bg-primary);
2127
- border-radius: 12px;
2128
- width: 100%;
2129
- max-width: 900px;
2130
- max-height: 90vh;
2131
- display: flex;
2132
- flex-direction: column;
2133
- overflow: hidden;
2134
- box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
2135
- animation: neiki-modal-in 0.2s ease;
2136
- }
2137
-
2138
- .neiki-preview-header {
2139
- display: flex;
2140
- align-items: center;
2141
- justify-content: space-between;
2142
- padding: 14px 20px;
2143
- background: var(--neiki-bg-secondary);
2144
- border-bottom: 1px solid var(--neiki-border-color);
2145
- font-weight: 600;
2146
- font-size: 14px;
2147
- color: var(--neiki-text-primary);
2148
- }
2149
-
2150
- .neiki-preview-close {
2151
- width: 32px;
2152
- height: 32px;
2153
- display: flex;
2154
- align-items: center;
2155
- justify-content: center;
2156
- background: transparent;
2157
- border: none;
2158
- border-radius: 4px;
2159
- cursor: pointer;
2160
- color: var(--neiki-text-muted);
2161
- transition: background 0.15s;
2162
- }
2163
-
2164
- .neiki-preview-close:hover {
2165
- background: var(--neiki-bg-hover);
2166
- color: var(--neiki-text-primary);
2167
- }
2168
-
2169
- .neiki-preview-close svg {
2170
- width: 18px;
2171
- height: 18px;
2172
- fill: currentColor;
2173
- }
2174
-
2175
- .neiki-preview-body {
2176
- flex: 1;
2177
- overflow: auto;
2178
- padding: 30px;
2179
- color: var(--neiki-text-primary);
2180
- font-size: 15px;
2181
- line-height: 1.7;
2182
- }
2183
-
2184
- .neiki-preview-body img {
2185
- max-width: 100%;
2186
- }
2187
-
2188
- .neiki-preview-body table {
2189
- border-collapse: collapse;
2190
- width: 100%;
2191
- }
2192
-
2193
- .neiki-preview-body table td,
2194
- .neiki-preview-body table th {
2195
- border: 1px solid var(--neiki-border-color);
2196
- padding: 8px 12px;
2197
- }
2198
-
2199
- /* Autosave status in statusbar */
2200
- .neiki-statusbar-autosave {
2201
- font-style: italic;
2202
- color: var(--neiki-success-color);
2203
- font-size: 11px;
2204
- }
1
+ /**
2
+ * NeikiEditor - Production-Ready WYSIWYG Rich Text Editor
3
+ * CSS Stylesheet
4
+ * Version: 2.9.1
5
+ */
6
+
7
+ /* ============================================
8
+ CSS Custom Properties (Light/Dark Themes)
9
+ ============================================ */
10
+ :root {
11
+ /* Light Theme (default) */
12
+ --neiki-bg-primary: #ffffff;
13
+ --neiki-bg-secondary: #f8f9fa;
14
+ --neiki-bg-tertiary: #e9ecef;
15
+ --neiki-bg-hover: #dee2e6;
16
+ --neiki-bg-active: #ced4da;
17
+ --neiki-border-color: #dee2e6;
18
+ --neiki-border-color-dark: #adb5bd;
19
+ --neiki-text-primary: #212529;
20
+ --neiki-text-secondary: #495057;
21
+ --neiki-text-muted: #6c757d;
22
+ --neiki-accent-color: #0d6efd;
23
+ --neiki-accent-hover: #0b5ed7;
24
+ --neiki-danger-color: #dc3545;
25
+ --neiki-success-color: #198754;
26
+ --neiki-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
27
+ --neiki-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
28
+ --neiki-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
29
+ --neiki-editor-bg: #ffffff;
30
+ --neiki-toolbar-bg: #f8f9fa;
31
+ --neiki-statusbar-bg: #f8f9fa;
32
+ --neiki-modal-overlay: rgba(0, 0, 0, 0.5);
33
+ --neiki-scrollbar-thumb: #ced4da;
34
+ --neiki-scrollbar-track: #f8f9fa;
35
+ --neiki-selection-bg: #b3d7ff;
36
+ --neiki-highlight-color: #fff3cd;
37
+ --neiki-table-border: #dee2e6;
38
+ }
39
+
40
+ /* Dark Theme */
41
+ .neiki-editor.neiki-dark {
42
+ --neiki-bg-primary: #1e1e1e;
43
+ --neiki-bg-secondary: #252526;
44
+ --neiki-bg-tertiary: #2d2d30;
45
+ --neiki-bg-hover: #3e3e42;
46
+ --neiki-bg-active: #505050;
47
+ --neiki-border-color: #3e3e42;
48
+ --neiki-border-color-dark: #505050;
49
+ --neiki-text-primary: #d4d4d4;
50
+ --neiki-text-secondary: #a0a0a0;
51
+ --neiki-text-muted: #808080;
52
+ --neiki-accent-color: #4fc3f7;
53
+ --neiki-accent-hover: #29b6f6;
54
+ --neiki-danger-color: #f44336;
55
+ --neiki-success-color: #4caf50;
56
+ --neiki-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
57
+ --neiki-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
58
+ --neiki-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
59
+ --neiki-editor-bg: #1e1e1e;
60
+ --neiki-toolbar-bg: #252526;
61
+ --neiki-statusbar-bg: #252526;
62
+ --neiki-modal-overlay: rgba(0, 0, 0, 0.7);
63
+ --neiki-scrollbar-thumb: #505050;
64
+ --neiki-scrollbar-track: #2d2d30;
65
+ --neiki-selection-bg: #264f78;
66
+ --neiki-highlight-color: #5c4d00;
67
+ --neiki-table-border: #3e3e42;
68
+ }
69
+
70
+ /* ============================================
71
+ Base Editor Container
72
+ ============================================ */
73
+ .neiki-editor {
74
+ display: flex;
75
+ flex-direction: column;
76
+ width: 100%;
77
+ height: 100%;
78
+ min-height: 400px;
79
+ background: var(--neiki-bg-primary);
80
+ border: 1px solid var(--neiki-border-color);
81
+ border-radius: 8px;
82
+ overflow: hidden;
83
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
84
+ font-size: 14px;
85
+ color: var(--neiki-text-primary);
86
+ box-shadow: var(--neiki-shadow-md);
87
+ }
88
+
89
+ .neiki-editor * {
90
+ box-sizing: border-box;
91
+ }
92
+
93
+ /* Fullscreen Mode */
94
+ .neiki-editor.neiki-fullscreen {
95
+ position: fixed !important;
96
+ top: 0 !important;
97
+ left: 0 !important;
98
+ right: 0 !important;
99
+ bottom: 0 !important;
100
+ width: 100vw !important;
101
+ height: 100vh !important;
102
+ z-index: 999999 !important;
103
+ border-radius: 0 !important;
104
+ border: none !important;
105
+ }
106
+
107
+ /* ============================================
108
+ Toolbar
109
+ ============================================ */
110
+ .neiki-toolbar {
111
+ display: flex;
112
+ flex-wrap: wrap;
113
+ align-items: center;
114
+ gap: 2px;
115
+ padding: 6px 8px;
116
+ background: var(--neiki-toolbar-bg);
117
+ border-bottom: 1px solid var(--neiki-border-color);
118
+ min-height: 44px;
119
+ }
120
+
121
+ .neiki-toolbar-group {
122
+ display: inline-flex;
123
+ align-items: center;
124
+ gap: 2px;
125
+ padding: 0 4px;
126
+ flex-wrap: nowrap;
127
+ }
128
+
129
+ .neiki-toolbar-group:not(:last-child) {
130
+ border-right: 1px solid var(--neiki-border-color);
131
+ padding-right: 8px;
132
+ margin-right: 4px;
133
+ }
134
+
135
+ .neiki-toolbar-divider {
136
+ width: 1px;
137
+ height: 24px;
138
+ background: var(--neiki-border-color);
139
+ margin: 0 4px;
140
+ }
141
+
142
+ /* Toolbar Buttons */
143
+ .neiki-btn,
144
+ .neiki-toolbar-btn {
145
+ position: relative;
146
+ display: inline-flex;
147
+ align-items: center;
148
+ justify-content: center;
149
+ width: 32px;
150
+ height: 32px;
151
+ padding: 0;
152
+ background: transparent;
153
+ border: 1px solid transparent;
154
+ border-radius: 4px;
155
+ cursor: pointer;
156
+ color: var(--neiki-text-secondary);
157
+ transition: all 0.15s ease;
158
+ position: relative;
159
+ }
160
+
161
+ .neiki-btn:hover,
162
+ .neiki-toolbar-btn:hover {
163
+ background: var(--neiki-bg-hover);
164
+ color: var(--neiki-text-primary);
165
+ }
166
+
167
+ .neiki-btn:active,
168
+ .neiki-toolbar-btn:active {
169
+ background: var(--neiki-bg-active);
170
+ }
171
+
172
+ .neiki-btn.active,
173
+ .neiki-toolbar-btn.active {
174
+ background: var(--neiki-bg-active);
175
+ color: var(--neiki-accent-color);
176
+ border-color: var(--neiki-accent-color);
177
+ }
178
+
179
+ .neiki-btn:disabled,
180
+ .neiki-toolbar-btn:disabled {
181
+ opacity: 0.4;
182
+ cursor: not-allowed;
183
+ }
184
+
185
+ .neiki-btn svg,
186
+ .neiki-toolbar-btn svg {
187
+ width: 18px;
188
+ height: 18px;
189
+ fill: currentColor;
190
+ pointer-events: none;
191
+ }
192
+
193
+ /* Toolbar Selects */
194
+ .neiki-select {
195
+ height: 32px;
196
+ padding: 0 28px 0 10px;
197
+ background: var(--neiki-bg-primary);
198
+ border: 1px solid var(--neiki-border-color);
199
+ border-radius: 4px;
200
+ color: var(--neiki-text-primary);
201
+ font-size: 13px;
202
+ cursor: pointer;
203
+ appearance: none;
204
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
205
+ background-repeat: no-repeat;
206
+ background-position: right 8px center;
207
+ min-width: 100px;
208
+ }
209
+
210
+ .neiki-select:hover {
211
+ border-color: var(--neiki-border-color-dark);
212
+ }
213
+
214
+ .neiki-select:focus {
215
+ outline: none;
216
+ border-color: var(--neiki-accent-color);
217
+ box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
218
+ }
219
+
220
+ /* Color Picker Button */
221
+ .neiki-color-btn {
222
+ position: relative;
223
+ width: 36px;
224
+ }
225
+
226
+ .neiki-color-btn .neiki-color-indicator {
227
+ position: absolute;
228
+ bottom: 4px;
229
+ left: 50%;
230
+ transform: translateX(-50%);
231
+ width: 16px;
232
+ height: 3px;
233
+ border-radius: 1px;
234
+ background: currentColor;
235
+ }
236
+
237
+ /* Checkbox Toggle */
238
+ .neiki-checkbox-wrapper {
239
+ display: flex;
240
+ align-items: center;
241
+ gap: 6px;
242
+ padding: 0 8px;
243
+ height: 32px;
244
+ font-size: 12px;
245
+ color: var(--neiki-text-secondary);
246
+ cursor: pointer;
247
+ user-select: none;
248
+ }
249
+
250
+ .neiki-checkbox {
251
+ width: 16px;
252
+ height: 16px;
253
+ accent-color: var(--neiki-accent-color);
254
+ cursor: pointer;
255
+ }
256
+
257
+ /* ============================================
258
+ Editor Content Area
259
+ ============================================ */
260
+ .neiki-editor-wrapper,
261
+ .neiki-content-wrapper {
262
+ flex: 1;
263
+ display: flex;
264
+ flex-direction: column;
265
+ overflow: hidden;
266
+ position: relative;
267
+ }
268
+
269
+ .neiki-content {
270
+ flex: 1;
271
+ padding: 20px 24px;
272
+ background: var(--neiki-editor-bg);
273
+ overflow-y: auto;
274
+ outline: none;
275
+ line-height: 1.6;
276
+ color: var(--neiki-text-primary);
277
+ min-height: 200px;
278
+ }
279
+
280
+ .neiki-content:focus {
281
+ outline: none;
282
+ }
283
+
284
+ /* Placeholder */
285
+ .neiki-content:empty::before {
286
+ content: attr(data-placeholder);
287
+ color: var(--neiki-text-muted);
288
+ font-style: italic;
289
+ pointer-events: none;
290
+ }
291
+
292
+ .neiki-content.neiki-drag-over {
293
+ border: 2px dashed var(--neiki-accent-color);
294
+ background: rgba(13, 110, 253, 0.05);
295
+ }
296
+
297
+ .neiki-content.neiki-drag-over::after {
298
+ content: 'Drop images here';
299
+ position: absolute;
300
+ top: 50%;
301
+ left: 50%;
302
+ transform: translate(-50%, -50%);
303
+ color: var(--neiki-accent-color);
304
+ font-weight: 600;
305
+ font-size: 16px;
306
+ pointer-events: none;
307
+ z-index: 10;
308
+ }
309
+
310
+ /* Focus state for editor container - disabled */
311
+ /* .neiki-editor.neiki-focused removed */
312
+
313
+ /* Disabled state */
314
+ .neiki-editor.neiki-disabled {
315
+ opacity: 0.6;
316
+ pointer-events: none;
317
+ }
318
+
319
+ /* Content Scrollbar */
320
+ .neiki-content::-webkit-scrollbar {
321
+ width: 10px;
322
+ }
323
+
324
+ .neiki-content::-webkit-scrollbar-track {
325
+ background: var(--neiki-scrollbar-track);
326
+ }
327
+
328
+ .neiki-content::-webkit-scrollbar-thumb {
329
+ background: var(--neiki-scrollbar-thumb);
330
+ border-radius: 5px;
331
+ }
332
+
333
+ .neiki-content::-webkit-scrollbar-thumb:hover {
334
+ background: var(--neiki-border-color-dark);
335
+ }
336
+
337
+ /* Content Typography */
338
+ .neiki-content p {
339
+ margin: 0 0 1em 0;
340
+ }
341
+
342
+ .neiki-content h1 {
343
+ font-size: 2em;
344
+ font-weight: 700;
345
+ margin: 0 0 0.5em 0;
346
+ }
347
+
348
+ .neiki-content h2 {
349
+ font-size: 1.5em;
350
+ font-weight: 600;
351
+ margin: 0 0 0.5em 0;
352
+ }
353
+
354
+ .neiki-content h3 {
355
+ font-size: 1.25em;
356
+ font-weight: 600;
357
+ margin: 0 0 0.5em 0;
358
+ }
359
+
360
+ .neiki-content h4 {
361
+ font-size: 1.1em;
362
+ font-weight: 600;
363
+ margin: 0 0 0.5em 0;
364
+ }
365
+
366
+ .neiki-content h5 {
367
+ font-size: 1em;
368
+ font-weight: 600;
369
+ margin: 0 0 0.5em 0;
370
+ }
371
+
372
+ .neiki-content h6 {
373
+ font-size: 0.9em;
374
+ font-weight: 600;
375
+ margin: 0 0 0.5em 0;
376
+ }
377
+
378
+ .neiki-content ul,
379
+ .neiki-content ol {
380
+ margin: 0 0 1em 0;
381
+ padding-left: 2em;
382
+ }
383
+
384
+ .neiki-content li {
385
+ margin-bottom: 0.25em;
386
+ }
387
+
388
+ .neiki-content blockquote {
389
+ margin: 0 0 1em 0;
390
+ padding: 10px 20px;
391
+ border-left: 4px solid var(--neiki-accent-color);
392
+ background: var(--neiki-bg-secondary);
393
+ font-style: italic;
394
+ }
395
+
396
+ .neiki-content pre {
397
+ margin: 0 0 1em 0;
398
+ padding: 16px;
399
+ background: var(--neiki-bg-tertiary);
400
+ border-radius: 4px;
401
+ overflow-x: auto;
402
+ font-family: 'Consolas', 'Monaco', monospace;
403
+ font-size: 13px;
404
+ }
405
+
406
+ .neiki-content code {
407
+ padding: 2px 6px;
408
+ background: var(--neiki-bg-tertiary);
409
+ border-radius: 3px;
410
+ font-family: 'Consolas', 'Monaco', monospace;
411
+ font-size: 0.9em;
412
+ }
413
+
414
+ .neiki-content a {
415
+ color: var(--neiki-accent-color);
416
+ text-decoration: underline;
417
+ }
418
+
419
+ .neiki-content a:hover {
420
+ color: var(--neiki-accent-hover);
421
+ }
422
+
423
+ .neiki-content img {
424
+ max-width: 100%;
425
+ height: auto;
426
+ border-radius: 4px;
427
+ cursor: pointer;
428
+ }
429
+
430
+ .neiki-content img.neiki-selected {
431
+ outline: 2px solid var(--neiki-accent-color);
432
+ outline-offset: 2px;
433
+ }
434
+
435
+ /* Search Highlight */
436
+ .neiki-highlight {
437
+ background: var(--neiki-highlight-color);
438
+ padding: 1px 0;
439
+ }
440
+
441
+ .neiki-highlight-current {
442
+ background: #ffc107;
443
+ outline: 2px solid #ff9800;
444
+ }
445
+
446
+ /* ============================================
447
+ Tables
448
+ ============================================ */
449
+ .neiki-content table,
450
+ .neiki-table {
451
+ width: 100%;
452
+ border-collapse: collapse;
453
+ margin: 1em 0;
454
+ table-layout: fixed;
455
+ }
456
+
457
+ .neiki-content table td,
458
+ .neiki-content table th {
459
+ border: 1px solid var(--neiki-table-border);
460
+ padding: 8px 12px;
461
+ min-width: 50px;
462
+ vertical-align: top;
463
+ position: relative;
464
+ }
465
+
466
+ .neiki-content table th {
467
+ background: var(--neiki-bg-secondary);
468
+ font-weight: 600;
469
+ }
470
+
471
+ .neiki-content table td:hover,
472
+ .neiki-content table th:hover {
473
+ background: var(--neiki-bg-hover);
474
+ }
475
+
476
+ .neiki-content table td.neiki-cell-selected,
477
+ .neiki-content table th.neiki-cell-selected {
478
+ background: var(--neiki-selection-bg);
479
+ }
480
+
481
+ /* Table Resize Handle */
482
+ .neiki-table-resize-handle {
483
+ position: absolute;
484
+ top: 0;
485
+ right: -3px;
486
+ width: 6px;
487
+ height: 100%;
488
+ cursor: col-resize;
489
+ z-index: 10;
490
+ }
491
+
492
+ .neiki-table-resize-handle:hover {
493
+ background: var(--neiki-accent-color);
494
+ }
495
+
496
+ /* ============================================
497
+ Status Bar
498
+ ============================================ */
499
+ .neiki-statusbar {
500
+ display: flex;
501
+ justify-content: space-between;
502
+ align-items: center;
503
+ padding: 6px 12px;
504
+ background: var(--neiki-statusbar-bg);
505
+ border-top: 1px solid var(--neiki-border-color);
506
+ font-size: 12px;
507
+ color: var(--neiki-text-muted);
508
+ }
509
+
510
+ .neiki-statusbar-left,
511
+ .neiki-statusbar-right {
512
+ display: flex;
513
+ align-items: center;
514
+ gap: 16px;
515
+ }
516
+
517
+ .neiki-statusbar-item {
518
+ display: flex;
519
+ align-items: center;
520
+ gap: 4px;
521
+ }
522
+
523
+ .neiki-statusbar-block {
524
+ font-family: 'Consolas', 'Monaco', monospace;
525
+ font-size: 11px;
526
+ padding: 2px 6px;
527
+ background: var(--neiki-bg-tertiary);
528
+ border-radius: 3px;
529
+ color: var(--neiki-accent-color);
530
+ font-weight: 600;
531
+ border: 1px solid var(--neiki-border-color);
532
+ }
533
+
534
+ /* ============================================
535
+ Dropdowns & Popups
536
+ ============================================ */
537
+ .neiki-dropdown {
538
+ position: absolute;
539
+ top: 100%;
540
+ left: 0;
541
+ z-index: 1000;
542
+ min-width: 180px;
543
+ background: var(--neiki-bg-primary);
544
+ border: 1px solid var(--neiki-border-color);
545
+ border-radius: 6px;
546
+ box-shadow: var(--neiki-shadow-lg);
547
+ padding: 4px;
548
+ margin-top: 4px;
549
+ }
550
+
551
+ /* Remove the .show requirement - JS adds/removes element directly */
552
+
553
+ .neiki-dropdown-item {
554
+ display: flex;
555
+ align-items: center;
556
+ gap: 6px;
557
+ padding: 7px 10px;
558
+ border-radius: 4px;
559
+ cursor: pointer;
560
+ color: var(--neiki-text-primary);
561
+ font-size: 13px;
562
+ transition: background 0.1s;
563
+ }
564
+
565
+ .neiki-dropdown-item:hover {
566
+ background: var(--neiki-bg-hover);
567
+ }
568
+
569
+ .neiki-dropdown-item.active {
570
+ background: var(--neiki-bg-active);
571
+ color: var(--neiki-accent-color);
572
+ }
573
+
574
+ .neiki-dropdown-divider {
575
+ height: 1px;
576
+ background: var(--neiki-border-color);
577
+ margin: 4px 0;
578
+ }
579
+
580
+ /* ============================================
581
+ Color Picker
582
+ ============================================ */
583
+ .neiki-color-picker {
584
+ position: absolute;
585
+ top: 100%;
586
+ left: 0;
587
+ z-index: 1000;
588
+ background: var(--neiki-bg-primary);
589
+ border: 1px solid var(--neiki-border-color);
590
+ border-radius: 8px;
591
+ box-shadow: var(--neiki-shadow-lg);
592
+ padding: 8px;
593
+ margin-top: 4px;
594
+ display: flex;
595
+ flex-direction: column;
596
+ gap: 6px;
597
+ }
598
+
599
+ .neiki-color-grid {
600
+ display: grid;
601
+ grid-template-columns: repeat(10, 1fr);
602
+ gap: 2px;
603
+ }
604
+
605
+ .neiki-color-custom {
606
+ display: flex;
607
+ align-items: center;
608
+ gap: 6px;
609
+ padding-top: 6px;
610
+ border-top: 1px solid var(--neiki-border-color);
611
+ }
612
+
613
+ .neiki-color-custom-input {
614
+ -webkit-appearance: none;
615
+ -moz-appearance: none;
616
+ appearance: none;
617
+ width: 28px;
618
+ height: 28px;
619
+ border: 1px solid var(--neiki-border-color);
620
+ border-radius: 4px;
621
+ padding: 2px;
622
+ cursor: pointer;
623
+ background: transparent;
624
+ }
625
+
626
+ .neiki-color-custom-input::-webkit-color-swatch-wrapper {
627
+ padding: 0;
628
+ }
629
+
630
+ .neiki-color-custom-input::-webkit-color-swatch {
631
+ border: none;
632
+ border-radius: 2px;
633
+ }
634
+
635
+ .neiki-color-custom-input::-moz-color-swatch {
636
+ border: none;
637
+ border-radius: 2px;
638
+ }
639
+
640
+ .neiki-color-hex-input {
641
+ flex: 1;
642
+ height: 28px;
643
+ padding: 0 8px;
644
+ border: 1px solid var(--neiki-border-color);
645
+ border-radius: 4px;
646
+ font-size: 12px;
647
+ font-family: monospace;
648
+ background: var(--neiki-bg-secondary);
649
+ color: var(--neiki-text-primary);
650
+ outline: none;
651
+ }
652
+
653
+ .neiki-color-hex-input:focus {
654
+ border-color: var(--neiki-accent-color);
655
+ box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
656
+ }
657
+
658
+ .neiki-color-apply-btn {
659
+ height: 28px;
660
+ padding: 0 10px;
661
+ border: none;
662
+ border-radius: 4px;
663
+ font-size: 12px;
664
+ font-weight: 500;
665
+ background: var(--neiki-accent-color);
666
+ color: #fff;
667
+ cursor: pointer;
668
+ transition: background 0.15s;
669
+ }
670
+
671
+ .neiki-color-apply-btn:hover {
672
+ background: var(--neiki-accent-hover);
673
+ }
674
+
675
+ .neiki-color-swatch {
676
+ width: 22px;
677
+ height: 22px;
678
+ border-radius: 3px;
679
+ cursor: pointer;
680
+ border: 1px solid var(--neiki-border-color);
681
+ transition: transform 0.1s;
682
+ }
683
+
684
+ .neiki-color-swatch:hover {
685
+ transform: scale(1.2);
686
+ z-index: 1;
687
+ }
688
+
689
+ .neiki-color-swatch.neiki-color-reset {
690
+ background: white;
691
+ position: relative;
692
+ overflow: hidden;
693
+ border: 1px solid #ccc;
694
+ }
695
+
696
+ .neiki-color-swatch.neiki-color-reset::after {
697
+ content: '';
698
+ position: absolute;
699
+ top: 50%;
700
+ left: -2px;
701
+ right: -2px;
702
+ height: 2px;
703
+ background: #e53935;
704
+ transform: rotate(-45deg);
705
+ transform-origin: center;
706
+ pointer-events: none;
707
+ }
708
+
709
+ .neiki-color-picker-label {
710
+ font-size: 11px;
711
+ font-weight: 600;
712
+ color: var(--neiki-text-muted);
713
+ text-transform: uppercase;
714
+ margin-bottom: 8px;
715
+ }
716
+
717
+ /* Emoji Picker */
718
+ .neiki-emoji-picker {
719
+ position: absolute;
720
+ top: 100%;
721
+ left: 0;
722
+ z-index: 1000;
723
+ width: 280px;
724
+ max-width: calc(100vw - 16px);
725
+ max-height: 250px;
726
+ overflow-y: auto;
727
+ background: var(--neiki-bg-primary);
728
+ border: 1px solid var(--neiki-border-color);
729
+ border-radius: 8px;
730
+ box-shadow: var(--neiki-shadow-lg);
731
+ padding: 8px;
732
+ margin-top: 4px;
733
+ display: grid;
734
+ grid-template-columns: repeat(10, 1fr);
735
+ gap: 2px;
736
+ }
737
+
738
+ .neiki-emoji-item {
739
+ display: flex;
740
+ align-items: center;
741
+ justify-content: center;
742
+ width: 24px;
743
+ height: 24px;
744
+ font-size: 18px;
745
+ cursor: pointer;
746
+ border-radius: 4px;
747
+ transition: background 0.15s, transform 0.1s;
748
+ }
749
+
750
+ .neiki-emoji-item:hover {
751
+ background: var(--neiki-bg-hover);
752
+ transform: scale(1.2);
753
+ }
754
+
755
+ /* Special Characters Picker */
756
+ .neiki-special-picker {
757
+ position: absolute;
758
+ top: 100%;
759
+ left: 0;
760
+ z-index: 1000;
761
+ width: 320px;
762
+ max-width: calc(100vw - 16px);
763
+ max-height: 280px;
764
+ overflow-y: auto;
765
+ background: var(--neiki-bg-primary);
766
+ border: 1px solid var(--neiki-border-color);
767
+ border-radius: 8px;
768
+ box-shadow: var(--neiki-shadow-lg);
769
+ padding: 8px;
770
+ margin-top: 4px;
771
+ display: grid;
772
+ grid-template-columns: repeat(8, 1fr);
773
+ gap: 4px;
774
+ }
775
+
776
+ .neiki-special-item {
777
+ display: flex;
778
+ align-items: center;
779
+ justify-content: center;
780
+ width: 32px;
781
+ height: 32px;
782
+ font-size: 18px;
783
+ cursor: pointer;
784
+ border-radius: 4px;
785
+ border: 1px solid var(--neiki-border-color);
786
+ background: var(--neiki-bg-secondary);
787
+ transition: all 0.15s;
788
+ }
789
+
790
+ .neiki-special-item:hover {
791
+ background: var(--neiki-accent-color);
792
+ color: white;
793
+ border-color: var(--neiki-accent-color);
794
+ transform: scale(1.1);
795
+ }
796
+
797
+ /* Find & Replace Highlights */
798
+ .neiki-highlight-find {
799
+ background: #ffeb3b;
800
+ padding: 1px 0;
801
+ border-radius: 2px;
802
+ }
803
+
804
+ .neiki-highlight-current {
805
+ background: #ff9800;
806
+ outline: 2px solid #e65100;
807
+ }
808
+
809
+ .neiki-color-presets {
810
+ display: grid;
811
+ grid-template-columns: repeat(5, 1fr);
812
+ gap: 6px;
813
+ margin-bottom: 12px;
814
+ }
815
+
816
+ .neiki-color-preset {
817
+ width: 32px;
818
+ height: 32px;
819
+ border-radius: 4px;
820
+ border: 2px solid transparent;
821
+ cursor: pointer;
822
+ transition: transform 0.1s, border-color 0.1s;
823
+ }
824
+
825
+ .neiki-color-preset:hover {
826
+ transform: scale(1.1);
827
+ }
828
+
829
+ .neiki-color-preset.active {
830
+ border-color: var(--neiki-accent-color);
831
+ }
832
+
833
+ .neiki-color-preset.neiki-color-reset {
834
+ background: linear-gradient(45deg, #fff 45%, #ff0000 45%, #ff0000 55%, #fff 55%);
835
+ border: 1px solid var(--neiki-border-color);
836
+ }
837
+
838
+ .neiki-color-custom {
839
+ display: flex;
840
+ align-items: center;
841
+ gap: 8px;
842
+ padding-top: 8px;
843
+ border-top: 1px solid var(--neiki-border-color);
844
+ }
845
+
846
+ .neiki-color-custom input[type="color"] {
847
+ width: 40px;
848
+ height: 32px;
849
+ padding: 0;
850
+ border: 1px solid var(--neiki-border-color);
851
+ border-radius: 4px;
852
+ cursor: pointer;
853
+ }
854
+
855
+ .neiki-color-custom input[type="text"] {
856
+ flex: 1;
857
+ height: 32px;
858
+ padding: 0 8px;
859
+ border: 1px solid var(--neiki-border-color);
860
+ border-radius: 4px;
861
+ background: var(--neiki-bg-primary);
862
+ color: var(--neiki-text-primary);
863
+ font-size: 12px;
864
+ font-family: monospace;
865
+ }
866
+
867
+ /* ============================================
868
+ Table Picker
869
+ ============================================ */
870
+ .neiki-table-picker {
871
+ position: absolute;
872
+ top: 100%;
873
+ left: 0;
874
+ z-index: 1000;
875
+ background: var(--neiki-bg-primary);
876
+ border: 1px solid var(--neiki-border-color);
877
+ border-radius: 8px;
878
+ box-shadow: var(--neiki-shadow-lg);
879
+ padding: 12px;
880
+ display: none;
881
+ }
882
+
883
+ .neiki-table-picker.show {
884
+ display: block;
885
+ }
886
+
887
+ .neiki-table-picker-label {
888
+ font-size: 12px;
889
+ color: var(--neiki-text-secondary);
890
+ margin-bottom: 8px;
891
+ text-align: center;
892
+ }
893
+
894
+ .neiki-table-picker-grid {
895
+ display: grid;
896
+ grid-template-columns: repeat(10, 20px);
897
+ gap: 2px;
898
+ }
899
+
900
+ .neiki-table-picker-cell {
901
+ width: 20px;
902
+ height: 20px;
903
+ border: 1px solid var(--neiki-border-color);
904
+ border-radius: 2px;
905
+ background: var(--neiki-bg-primary);
906
+ cursor: pointer;
907
+ transition: background 0.1s;
908
+ }
909
+
910
+ .neiki-table-picker-cell:hover,
911
+ .neiki-table-picker-cell.active {
912
+ background: var(--neiki-accent-color);
913
+ border-color: var(--neiki-accent-color);
914
+ }
915
+
916
+ /* ============================================
917
+ Special Characters Picker (duplicate removed)
918
+ ============================================ */
919
+ .neiki-special-chars {
920
+ position: absolute;
921
+ top: 100%;
922
+ left: 0;
923
+ z-index: 1000;
924
+ width: 280px;
925
+ max-height: 300px;
926
+ background: var(--neiki-bg-primary);
927
+ border: 1px solid var(--neiki-border-color);
928
+ border-radius: 8px;
929
+ box-shadow: var(--neiki-shadow-lg);
930
+ display: none;
931
+ overflow: hidden;
932
+ }
933
+
934
+ .neiki-special-chars.show {
935
+ display: flex;
936
+ flex-direction: column;
937
+ }
938
+
939
+ .neiki-special-chars-grid {
940
+ display: grid;
941
+ grid-template-columns: repeat(10, 1fr);
942
+ gap: 2px;
943
+ padding: 8px;
944
+ overflow-y: auto;
945
+ }
946
+
947
+ .neiki-special-char-item {
948
+ display: flex;
949
+ align-items: center;
950
+ justify-content: center;
951
+ width: 24px;
952
+ height: 24px;
953
+ font-size: 16px;
954
+ border-radius: 4px;
955
+ cursor: pointer;
956
+ transition: background 0.1s;
957
+ }
958
+
959
+ .neiki-special-char-item:hover {
960
+ background: var(--neiki-bg-hover);
961
+ }
962
+
963
+ /* ============================================
964
+ Modals
965
+ ============================================ */
966
+ .neiki-modal-overlay {
967
+ position: fixed;
968
+ top: 0;
969
+ left: 0;
970
+ right: 0;
971
+ bottom: 0;
972
+ background: var(--neiki-modal-overlay);
973
+ z-index: 10000;
974
+ display: flex;
975
+ align-items: center;
976
+ justify-content: center;
977
+ opacity: 0;
978
+ visibility: hidden;
979
+ transition: opacity 0.2s, visibility 0.2s;
980
+ }
981
+
982
+ .neiki-modal-overlay.active {
983
+ opacity: 1;
984
+ visibility: visible;
985
+ }
986
+
987
+ .neiki-modal {
988
+ background: var(--neiki-bg-primary);
989
+ border-radius: 12px;
990
+ box-shadow: var(--neiki-shadow-lg);
991
+ width: 100%;
992
+ max-width: 440px;
993
+ max-height: 90vh;
994
+ overflow: hidden;
995
+ animation: neiki-modal-in 0.2s ease;
996
+ }
997
+
998
+ .neiki-modal-wide {
999
+ max-width: 520px;
1000
+ }
1001
+
1002
+ .neiki-modal-header {
1003
+ display: flex;
1004
+ align-items: center;
1005
+ justify-content: space-between;
1006
+ padding: 16px 20px;
1007
+ border-bottom: 1px solid var(--neiki-border-color);
1008
+ }
1009
+
1010
+ .neiki-modal-title {
1011
+ font-size: 16px;
1012
+ font-weight: 600;
1013
+ color: var(--neiki-text-primary);
1014
+ margin: 0;
1015
+ }
1016
+
1017
+ .neiki-modal-close {
1018
+ width: 32px;
1019
+ height: 32px;
1020
+ display: flex;
1021
+ align-items: center;
1022
+ justify-content: center;
1023
+ background: transparent;
1024
+ border: none;
1025
+ border-radius: 4px;
1026
+ cursor: pointer;
1027
+ color: var(--neiki-text-muted);
1028
+ transition: background 0.15s;
1029
+ }
1030
+
1031
+ .neiki-modal-close:hover {
1032
+ background: var(--neiki-bg-hover);
1033
+ color: var(--neiki-text-primary);
1034
+ }
1035
+
1036
+ .neiki-modal-body {
1037
+ padding: 20px;
1038
+ overflow-y: auto;
1039
+ }
1040
+
1041
+ .neiki-modal h3,
1042
+ .neiki-modal-header h3 {
1043
+ color: #000000;
1044
+ margin: 0;
1045
+ }
1046
+
1047
+ .neiki-dark .neiki-modal h3,
1048
+ .neiki-dark .neiki-modal-header h3 {
1049
+ color: var(--neiki-text-primary);
1050
+ }
1051
+
1052
+ .neiki-modal-footer {
1053
+ display: flex;
1054
+ justify-content: flex-end;
1055
+ gap: 10px;
1056
+ padding: 16px 20px;
1057
+ border-top: 1px solid var(--neiki-border-color);
1058
+ }
1059
+
1060
+ .neiki-modal-footer .neiki-btn {
1061
+ width: auto;
1062
+ height: 38px;
1063
+ padding: 0 16px;
1064
+ font-size: 14px;
1065
+ font-weight: 500;
1066
+ border-radius: 6px;
1067
+ }
1068
+
1069
+ /* Form Elements */
1070
+ .neiki-form-group {
1071
+ margin-bottom: 16px;
1072
+ }
1073
+
1074
+ .neiki-form-group:last-child {
1075
+ margin-bottom: 0;
1076
+ }
1077
+
1078
+ .neiki-form-label {
1079
+ display: block;
1080
+ margin-bottom: 6px;
1081
+ font-size: 13px;
1082
+ font-weight: 500;
1083
+ color: var(--neiki-text-secondary);
1084
+ }
1085
+
1086
+ .neiki-form-input,
1087
+ .neiki-input {
1088
+ width: 100%;
1089
+ height: 40px;
1090
+ padding: 0 12px;
1091
+ border: 1px solid var(--neiki-border-color);
1092
+ border-radius: 6px;
1093
+ background: var(--neiki-bg-primary);
1094
+ color: var(--neiki-text-primary);
1095
+ font-size: 14px;
1096
+ transition: border-color 0.15s;
1097
+ }
1098
+
1099
+ .neiki-form-input:focus,
1100
+ .neiki-input:focus {
1101
+ outline: none;
1102
+ border-color: var(--neiki-accent-color);
1103
+ box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
1104
+ }
1105
+
1106
+ .neiki-form-input::placeholder,
1107
+ .neiki-input::placeholder {
1108
+ color: var(--neiki-text-muted);
1109
+ }
1110
+
1111
+ .neiki-input[type="file"] {
1112
+ display: flex;
1113
+ align-items: center;
1114
+ padding: 0 12px;
1115
+ line-height: 40px;
1116
+ cursor: pointer;
1117
+ }
1118
+
1119
+ .neiki-form-row {
1120
+ display: flex;
1121
+ gap: 16px;
1122
+ }
1123
+
1124
+ .neiki-form-divider {
1125
+ display: flex;
1126
+ align-items: center;
1127
+ margin: 16px 0;
1128
+ text-align: center;
1129
+ position: relative;
1130
+ }
1131
+
1132
+ .neiki-form-divider::before {
1133
+ content: '';
1134
+ flex: 1;
1135
+ height: 1px;
1136
+ background: var(--neiki-border-color);
1137
+ margin-right: 12px;
1138
+ }
1139
+
1140
+ .neiki-form-divider::after {
1141
+ content: '';
1142
+ flex: 1;
1143
+ height: 1px;
1144
+ background: var(--neiki-border-color);
1145
+ margin-left: 12px;
1146
+ }
1147
+
1148
+ .neiki-form-divider span {
1149
+ color: var(--neiki-text-muted);
1150
+ font-size: 12px;
1151
+ font-weight: 500;
1152
+ text-transform: uppercase;
1153
+ }
1154
+
1155
+ .neiki-form-group label {
1156
+ display: block;
1157
+ margin-bottom: 6px;
1158
+ font-size: 13px;
1159
+ font-weight: 500;
1160
+ color: var(--neiki-text-secondary);
1161
+ }
1162
+
1163
+ .neiki-form-textarea {
1164
+ width: 100%;
1165
+ min-height: 120px;
1166
+ padding: 12px;
1167
+ border: 1px solid var(--neiki-border-color);
1168
+ border-radius: 6px;
1169
+ background: var(--neiki-bg-primary);
1170
+ color: var(--neiki-text-primary);
1171
+ font-size: 14px;
1172
+ font-family: inherit;
1173
+ resize: vertical;
1174
+ transition: border-color 0.15s;
1175
+ }
1176
+
1177
+ .neiki-form-textarea:focus {
1178
+ outline: none;
1179
+ border-color: var(--neiki-accent-color);
1180
+ box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
1181
+ }
1182
+
1183
+ /* Buttons */
1184
+ .neiki-button {
1185
+ display: inline-flex;
1186
+ align-items: center;
1187
+ justify-content: center;
1188
+ gap: 6px;
1189
+ height: 38px;
1190
+ padding: 0 16px;
1191
+ border: 1px solid transparent;
1192
+ border-radius: 6px;
1193
+ font-size: 14px;
1194
+ font-weight: 500;
1195
+ cursor: pointer;
1196
+ transition: all 0.15s;
1197
+ }
1198
+
1199
+ .neiki-button-primary,
1200
+ .neiki-btn-primary {
1201
+ background: var(--neiki-accent-color);
1202
+ color: #fff;
1203
+ }
1204
+
1205
+ .neiki-button-primary:hover,
1206
+ .neiki-btn-primary:hover {
1207
+ background: var(--neiki-accent-hover);
1208
+ }
1209
+
1210
+ .neiki-button-secondary,
1211
+ .neiki-btn-secondary {
1212
+ background: var(--neiki-bg-secondary);
1213
+ color: var(--neiki-text-primary);
1214
+ border-color: var(--neiki-border-color);
1215
+ }
1216
+
1217
+ .neiki-btn-primary,
1218
+ .neiki-btn-secondary {
1219
+ display: inline-flex;
1220
+ align-items: center;
1221
+ justify-content: center;
1222
+ height: 38px;
1223
+ padding: 0 16px;
1224
+ border: 1px solid transparent;
1225
+ border-radius: 6px;
1226
+ font-size: 14px;
1227
+ font-weight: 500;
1228
+ cursor: pointer;
1229
+ transition: all 0.15s;
1230
+ }
1231
+
1232
+ .neiki-btn-secondary {
1233
+ border-color: var(--neiki-border-color);
1234
+ }
1235
+
1236
+ .neiki-btn-secondary:hover {
1237
+ background: var(--neiki-bg-hover);
1238
+ }
1239
+
1240
+ .neiki-button-secondary:hover {
1241
+ background: var(--neiki-bg-hover);
1242
+ }
1243
+
1244
+ .neiki-button-danger {
1245
+ background: var(--neiki-danger-color);
1246
+ color: #fff;
1247
+ }
1248
+
1249
+ .neiki-button-danger:hover {
1250
+ opacity: 0.9;
1251
+ }
1252
+
1253
+ /* ============================================
1254
+ Find & Replace Panel
1255
+ ============================================ */
1256
+ .neiki-find-replace {
1257
+ position: absolute;
1258
+ top: 0;
1259
+ right: 0;
1260
+ z-index: 100;
1261
+ width: 360px;
1262
+ background: var(--neiki-bg-primary);
1263
+ border: 1px solid var(--neiki-border-color);
1264
+ border-radius: 0 0 0 8px;
1265
+ box-shadow: var(--neiki-shadow-lg);
1266
+ display: none;
1267
+ }
1268
+
1269
+ .neiki-find-replace.show {
1270
+ display: block;
1271
+ }
1272
+
1273
+ .neiki-find-replace-header {
1274
+ display: flex;
1275
+ align-items: center;
1276
+ justify-content: space-between;
1277
+ padding: 10px 12px;
1278
+ border-bottom: 1px solid var(--neiki-border-color);
1279
+ }
1280
+
1281
+ .neiki-find-replace-title {
1282
+ font-size: 13px;
1283
+ font-weight: 600;
1284
+ color: var(--neiki-text-primary);
1285
+ }
1286
+
1287
+ .neiki-find-replace-body {
1288
+ padding: 12px;
1289
+ }
1290
+
1291
+ .neiki-find-replace-row {
1292
+ display: flex;
1293
+ gap: 8px;
1294
+ margin-bottom: 10px;
1295
+ }
1296
+
1297
+ .neiki-find-replace-row:last-child {
1298
+ margin-bottom: 0;
1299
+ }
1300
+
1301
+ .neiki-find-replace-input {
1302
+ flex: 1;
1303
+ height: 32px;
1304
+ padding: 0 10px;
1305
+ border: 1px solid var(--neiki-border-color);
1306
+ border-radius: 4px;
1307
+ background: var(--neiki-bg-primary);
1308
+ color: var(--neiki-text-primary);
1309
+ font-size: 13px;
1310
+ }
1311
+
1312
+ .neiki-find-replace-input:focus {
1313
+ outline: none;
1314
+ border-color: var(--neiki-accent-color);
1315
+ }
1316
+
1317
+ .neiki-find-replace-options {
1318
+ display: flex;
1319
+ align-items: center;
1320
+ gap: 12px;
1321
+ margin-bottom: 10px;
1322
+ }
1323
+
1324
+ .neiki-find-replace-option {
1325
+ display: flex;
1326
+ align-items: center;
1327
+ gap: 4px;
1328
+ font-size: 12px;
1329
+ color: var(--neiki-text-secondary);
1330
+ cursor: pointer;
1331
+ }
1332
+
1333
+ .neiki-find-replace-option input {
1334
+ accent-color: var(--neiki-accent-color);
1335
+ }
1336
+
1337
+ .neiki-find-replace-actions {
1338
+ display: flex;
1339
+ gap: 6px;
1340
+ flex-wrap: wrap;
1341
+ }
1342
+
1343
+ .neiki-find-replace-btn {
1344
+ height: 28px;
1345
+ padding: 0 10px;
1346
+ font-size: 12px;
1347
+ border-radius: 4px;
1348
+ }
1349
+
1350
+ .neiki-find-replace-count {
1351
+ font-size: 12px;
1352
+ color: var(--neiki-text-muted);
1353
+ margin-left: auto;
1354
+ }
1355
+
1356
+ /* ============================================
1357
+ HTML Code View
1358
+ ============================================ */
1359
+ .neiki-code-view {
1360
+ position: absolute;
1361
+ top: 0;
1362
+ left: 0;
1363
+ right: 0;
1364
+ bottom: 0;
1365
+ z-index: 50;
1366
+ background: var(--neiki-bg-primary);
1367
+ display: none;
1368
+ flex-direction: column;
1369
+ }
1370
+
1371
+ .neiki-code-view.show {
1372
+ display: flex;
1373
+ }
1374
+
1375
+ .neiki-code-view-header {
1376
+ display: flex;
1377
+ align-items: center;
1378
+ justify-content: space-between;
1379
+ padding: 8px 16px;
1380
+ background: var(--neiki-bg-secondary);
1381
+ border-bottom: 1px solid var(--neiki-border-color);
1382
+ flex-shrink: 0;
1383
+ }
1384
+
1385
+ .neiki-code-view-title {
1386
+ font-size: 13px;
1387
+ font-weight: 600;
1388
+ color: var(--neiki-text-primary);
1389
+ }
1390
+
1391
+ .neiki-code-view-textarea {
1392
+ flex: 1;
1393
+ width: 100%;
1394
+ padding: 16px;
1395
+ border: none;
1396
+ background: var(--neiki-bg-primary);
1397
+ color: var(--neiki-text-primary);
1398
+ font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
1399
+ font-size: 13px;
1400
+ line-height: 1.5;
1401
+ resize: none;
1402
+ }
1403
+
1404
+ .neiki-code-view-textarea:focus {
1405
+ outline: none;
1406
+ }
1407
+
1408
+ .neiki-code-view-apply {
1409
+ width: auto !important;
1410
+ padding: 0 12px !important;
1411
+ display: inline-flex;
1412
+ align-items: center;
1413
+ gap: 4px;
1414
+ height: 30px;
1415
+ font-size: 12px;
1416
+ background: var(--neiki-accent-color) !important;
1417
+ color: white !important;
1418
+ border-radius: 5px;
1419
+ }
1420
+
1421
+ .neiki-code-view-apply:hover {
1422
+ background: var(--neiki-accent-hover) !important;
1423
+ color: white !important;
1424
+ }
1425
+
1426
+ .neiki-code-view-apply svg {
1427
+ width: 14px !important;
1428
+ height: 14px !important;
1429
+ }
1430
+
1431
+ /* ============================================
1432
+ Context Menu
1433
+ ============================================ */
1434
+ .neiki-context-menu {
1435
+ position: fixed;
1436
+ z-index: 10001;
1437
+ min-width: 180px;
1438
+ background: var(--neiki-bg-primary);
1439
+ border: 1px solid var(--neiki-border-color);
1440
+ border-radius: 8px;
1441
+ box-shadow: var(--neiki-shadow-lg);
1442
+ padding: 4px;
1443
+ display: none;
1444
+ }
1445
+
1446
+ .neiki-context-menu.show {
1447
+ display: block;
1448
+ }
1449
+
1450
+ .neiki-context-item,
1451
+ .neiki-context-menu-item {
1452
+ display: flex;
1453
+ align-items: center;
1454
+ gap: 10px;
1455
+ padding: 8px 12px;
1456
+ border-radius: 4px;
1457
+ cursor: pointer;
1458
+ color: var(--neiki-text-primary);
1459
+ font-size: 13px;
1460
+ transition: background 0.1s;
1461
+ }
1462
+
1463
+ .neiki-context-item:hover,
1464
+ .neiki-context-menu-item:hover {
1465
+ background: var(--neiki-bg-hover);
1466
+ }
1467
+
1468
+ .neiki-context-item.neiki-context-danger,
1469
+ .neiki-context-menu-item.danger {
1470
+ color: var(--neiki-danger-color);
1471
+ }
1472
+
1473
+ .neiki-context-item svg,
1474
+ .neiki-context-menu-item svg {
1475
+ width: 16px;
1476
+ height: 16px;
1477
+ fill: currentColor;
1478
+ }
1479
+
1480
+ .neiki-context-divider,
1481
+ .neiki-context-menu-divider {
1482
+ height: 1px;
1483
+ background: var(--neiki-border-color);
1484
+ margin: 4px 0;
1485
+ }
1486
+
1487
+ /* ============================================
1488
+ Floating Selection Toolbar
1489
+ ============================================ */
1490
+ .neiki-floating-toolbar {
1491
+ position: absolute;
1492
+ z-index: 1000;
1493
+ display: none;
1494
+ background: var(--neiki-bg-primary);
1495
+ border: 1px solid var(--neiki-border-color);
1496
+ border-radius: 8px;
1497
+ box-shadow: var(--neiki-shadow-lg);
1498
+ padding: 4px;
1499
+ }
1500
+
1501
+ .neiki-floating-toolbar.show {
1502
+ display: flex;
1503
+ align-items: center;
1504
+ gap: 2px;
1505
+ }
1506
+
1507
+ .neiki-floating-btn {
1508
+ width: 32px;
1509
+ height: 32px;
1510
+ border: none;
1511
+ background: var(--neiki-bg-primary);
1512
+ color: var(--neiki-text-primary);
1513
+ border-radius: 6px;
1514
+ cursor: pointer;
1515
+ display: flex;
1516
+ align-items: center;
1517
+ justify-content: center;
1518
+ transition: all 0.15s;
1519
+ }
1520
+
1521
+ .neiki-floating-btn:hover {
1522
+ background: var(--neiki-bg-hover);
1523
+ color: var(--neiki-accent-color);
1524
+ }
1525
+
1526
+ .neiki-floating-btn:active {
1527
+ background: var(--neiki-bg-active);
1528
+ }
1529
+
1530
+ .neiki-floating-btn svg {
1531
+ width: 16px;
1532
+ height: 16px;
1533
+ fill: currentColor;
1534
+ }
1535
+
1536
+ .neiki-floating-toolbar .neiki-btn {
1537
+ width: 28px;
1538
+ height: 28px;
1539
+ }
1540
+
1541
+ .neiki-floating-toolbar .neiki-btn svg {
1542
+ width: 14px;
1543
+ height: 14px;
1544
+ }
1545
+
1546
+ .neiki-floating-divider {
1547
+ width: 1px;
1548
+ height: 20px;
1549
+ background: var(--neiki-border-color);
1550
+ margin: 0 2px;
1551
+ }
1552
+
1553
+ .neiki-floating-move-btn svg {
1554
+ width: 16px;
1555
+ height: 16px;
1556
+ }
1557
+
1558
+ /* ============================================
1559
+ Tooltips
1560
+ ============================================ */
1561
+ [data-tooltip] {
1562
+ position: relative;
1563
+ }
1564
+
1565
+ [data-tooltip]::after {
1566
+ content: attr(data-tooltip);
1567
+ position: absolute;
1568
+ bottom: 100%;
1569
+ left: 50%;
1570
+ transform: translateX(-50%);
1571
+ padding: 6px 10px;
1572
+ background: var(--neiki-text-primary);
1573
+ color: var(--neiki-bg-primary);
1574
+ font-size: 11px;
1575
+ font-weight: 500;
1576
+ white-space: nowrap;
1577
+ border-radius: 4px;
1578
+ opacity: 0;
1579
+ visibility: hidden;
1580
+ transition: opacity 0.15s, visibility 0.15s;
1581
+ pointer-events: none;
1582
+ z-index: 10002;
1583
+ margin-bottom: 6px;
1584
+ }
1585
+
1586
+ [data-tooltip]:hover::after {
1587
+ opacity: 1;
1588
+ visibility: visible;
1589
+ }
1590
+
1591
+ /* ============================================
1592
+ Drag & Drop Overlay
1593
+ ============================================ */
1594
+ .neiki-drop-overlay {
1595
+ position: absolute;
1596
+ top: 0;
1597
+ left: 0;
1598
+ right: 0;
1599
+ bottom: 0;
1600
+ background: rgba(13, 110, 253, 0.1);
1601
+ border: 3px dashed var(--neiki-accent-color);
1602
+ border-radius: 8px;
1603
+ display: none;
1604
+ align-items: center;
1605
+ justify-content: center;
1606
+ z-index: 100;
1607
+ pointer-events: none;
1608
+ }
1609
+
1610
+ .neiki-drop-overlay.show {
1611
+ display: flex;
1612
+ }
1613
+
1614
+ .neiki-drop-overlay-text {
1615
+ font-size: 18px;
1616
+ font-weight: 600;
1617
+ color: var(--neiki-accent-color);
1618
+ }
1619
+
1620
+ /* ============================================
1621
+ Image Resize Handles
1622
+ ============================================ */
1623
+ .neiki-img-resizable {
1624
+ display: inline-block;
1625
+ position: relative;
1626
+ outline: 2px solid var(--neiki-accent-color);
1627
+ outline-offset: 2px;
1628
+ border-radius: 4px;
1629
+ line-height: 0;
1630
+ }
1631
+
1632
+ .neiki-img-resizable img {
1633
+ display: block;
1634
+ max-width: 100%;
1635
+ }
1636
+
1637
+ .neiki-img-resize-handle {
1638
+ position: absolute;
1639
+ width: 12px;
1640
+ height: 12px;
1641
+ background: var(--neiki-accent-color);
1642
+ border: 2px solid #fff;
1643
+ border-radius: 2px;
1644
+ z-index: 10;
1645
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
1646
+ }
1647
+
1648
+ .neiki-img-resize-handle.nw { top: -6px; left: -6px; cursor: nw-resize; }
1649
+ .neiki-img-resize-handle.ne { top: -6px; right: -6px; cursor: ne-resize; }
1650
+ .neiki-img-resize-handle.sw { bottom: -6px; left: -6px; cursor: sw-resize; }
1651
+ .neiki-img-resize-handle.se { bottom: -6px; right: -6px; cursor: se-resize; }
1652
+
1653
+ .neiki-img-size-label {
1654
+ position: absolute;
1655
+ bottom: -32px;
1656
+ left: 50%;
1657
+ transform: translateX(-50%);
1658
+ background: var(--neiki-text-primary);
1659
+ color: var(--neiki-bg-primary);
1660
+ font-size: 13px;
1661
+ line-height: 1.4;
1662
+ font-weight: 600;
1663
+ padding: 4px 12px;
1664
+ border-radius: 6px;
1665
+ white-space: nowrap;
1666
+ pointer-events: none;
1667
+ z-index: 10;
1668
+ opacity: 0.9;
1669
+ }
1670
+
1671
+ /* Touch-friendly resize handles */
1672
+ @media (pointer: coarse) {
1673
+ .neiki-img-resize-handle {
1674
+ width: 20px;
1675
+ height: 20px;
1676
+ }
1677
+ .neiki-img-resize-handle.nw { top: -10px; left: -10px; }
1678
+ .neiki-img-resize-handle.ne { top: -10px; right: -10px; }
1679
+ .neiki-img-resize-handle.sw { bottom: -10px; left: -10px; }
1680
+ .neiki-img-resize-handle.se { bottom: -10px; right: -10px; }
1681
+ }
1682
+
1683
+ /* ============================================
1684
+ Table Column Resize Handle
1685
+ ============================================ */
1686
+ .neiki-table-col-resize-handle {
1687
+ position: absolute;
1688
+ width: 6px;
1689
+ cursor: col-resize;
1690
+ z-index: 10;
1691
+ background: transparent;
1692
+ transition: background 0.1s;
1693
+ }
1694
+
1695
+ .neiki-table-col-resize-handle:hover,
1696
+ .neiki-table-col-resize-handle:active {
1697
+ background: var(--neiki-accent-color);
1698
+ opacity: 0.6;
1699
+ border-radius: 3px;
1700
+ }
1701
+
1702
+ /* ============================================
1703
+ Block Drag & Drop
1704
+ ============================================ */
1705
+ .neiki-block-grip {
1706
+ position: absolute;
1707
+ width: 22px;
1708
+ height: 22px;
1709
+ display: flex;
1710
+ align-items: center;
1711
+ justify-content: center;
1712
+ cursor: grab;
1713
+ color: var(--neiki-text-muted);
1714
+ opacity: 0;
1715
+ transition: opacity 0.15s, color 0.15s;
1716
+ border-radius: 4px;
1717
+ z-index: 5;
1718
+ user-select: none;
1719
+ }
1720
+
1721
+ .neiki-content:hover .neiki-block-grip {
1722
+ opacity: 0.5;
1723
+ }
1724
+
1725
+ .neiki-block-grip:hover {
1726
+ opacity: 1 !important;
1727
+ color: var(--neiki-text-primary);
1728
+ background: var(--neiki-bg-hover);
1729
+ }
1730
+
1731
+ .neiki-block-grip:active {
1732
+ cursor: grabbing;
1733
+ }
1734
+
1735
+ .neiki-block-grip svg {
1736
+ width: 14px;
1737
+ height: 14px;
1738
+ fill: currentColor;
1739
+ pointer-events: none;
1740
+ }
1741
+
1742
+ .neiki-block-ghost {
1743
+ position: fixed;
1744
+ z-index: 100000;
1745
+ pointer-events: none;
1746
+ opacity: 0.7;
1747
+ background: var(--neiki-bg-primary);
1748
+ border: 2px solid var(--neiki-accent-color);
1749
+ border-radius: 6px;
1750
+ padding: 8px 12px;
1751
+ box-shadow: var(--neiki-shadow-lg);
1752
+ max-height: 120px;
1753
+ overflow: hidden;
1754
+ }
1755
+
1756
+ .neiki-block-placeholder {
1757
+ border: 2px dashed var(--neiki-accent-color);
1758
+ border-radius: 6px;
1759
+ background: rgba(13, 110, 253, 0.05);
1760
+ margin: 2px 0;
1761
+ transition: height 0.15s ease;
1762
+ }
1763
+
1764
+ /* ============================================
1765
+ Print Styles
1766
+ ============================================ */
1767
+ @media print {
1768
+ .neiki-editor {
1769
+ border: none !important;
1770
+ box-shadow: none !important;
1771
+ }
1772
+
1773
+ .neiki-toolbar,
1774
+ .neiki-statusbar,
1775
+ .neiki-floating-toolbar,
1776
+ .neiki-find-replace,
1777
+ .neiki-code-view-header,
1778
+ .neiki-block-grip,
1779
+ .neiki-img-resize-handle,
1780
+ .neiki-img-size-label,
1781
+ .neiki-table-col-resize-handle {
1782
+ display: none !important;
1783
+ }
1784
+
1785
+ .neiki-content {
1786
+ padding: 0 !important;
1787
+ overflow: visible !important;
1788
+ }
1789
+
1790
+ .neiki-editor-wrapper {
1791
+ overflow: visible !important;
1792
+ }
1793
+ }
1794
+
1795
+ /* ============================================
1796
+ Responsive Adjustments
1797
+ ============================================ */
1798
+ @media (max-width: 768px) {
1799
+ .neiki-toolbar {
1800
+ padding: 4px;
1801
+ gap: 1px;
1802
+ }
1803
+
1804
+ .neiki-toolbar-group {
1805
+ padding: 0 2px;
1806
+ }
1807
+
1808
+ .neiki-toolbar-group:not(:last-child) {
1809
+ padding-right: 4px;
1810
+ margin-right: 2px;
1811
+ }
1812
+
1813
+ .neiki-btn {
1814
+ width: 28px;
1815
+ height: 28px;
1816
+ }
1817
+
1818
+ .neiki-btn svg {
1819
+ width: 16px;
1820
+ height: 16px;
1821
+ }
1822
+
1823
+ .neiki-select {
1824
+ height: 28px;
1825
+ min-width: 80px;
1826
+ font-size: 12px;
1827
+ padding: 0 24px 0 8px;
1828
+ }
1829
+
1830
+ .neiki-content {
1831
+ padding: 12px 16px;
1832
+ }
1833
+
1834
+ .neiki-statusbar {
1835
+ padding: 4px 8px;
1836
+ font-size: 11px;
1837
+ }
1838
+
1839
+ .neiki-modal {
1840
+ width: 95%;
1841
+ max-width: none;
1842
+ margin: 10px;
1843
+ }
1844
+
1845
+ .neiki-find-replace {
1846
+ width: 100%;
1847
+ border-radius: 0;
1848
+ }
1849
+
1850
+ .neiki-checkbox-wrapper {
1851
+ padding: 0 4px;
1852
+ font-size: 11px;
1853
+ }
1854
+
1855
+ .neiki-color-picker {
1856
+ left: auto;
1857
+ right: 0;
1858
+ }
1859
+ }
1860
+
1861
+ @media (max-width: 480px) {
1862
+ .neiki-toolbar-group:not(:last-child) {
1863
+ border-right: none;
1864
+ padding-right: 2px;
1865
+ margin-right: 0;
1866
+ }
1867
+
1868
+ .neiki-select {
1869
+ min-width: 60px;
1870
+ }
1871
+
1872
+ .neiki-statusbar-left,
1873
+ .neiki-statusbar-right {
1874
+ gap: 8px;
1875
+ }
1876
+ }
1877
+
1878
+ /* ============================================
1879
+ Animations
1880
+ ============================================ */
1881
+ @keyframes neiki-fade-in {
1882
+ from {
1883
+ opacity: 0;
1884
+ transform: translateY(-10px);
1885
+ }
1886
+ to {
1887
+ opacity: 1;
1888
+ transform: translateY(0);
1889
+ }
1890
+ }
1891
+
1892
+ .neiki-dropdown.show,
1893
+ .neiki-color-picker.show,
1894
+ .neiki-table-picker.show,
1895
+ .neiki-emoji-picker.show,
1896
+ .neiki-special-chars.show {
1897
+ animation: neiki-fade-in 0.15s ease;
1898
+ }
1899
+
1900
+ @keyframes neiki-modal-in {
1901
+ from {
1902
+ opacity: 0;
1903
+ transform: scale(0.95);
1904
+ }
1905
+ to {
1906
+ opacity: 1;
1907
+ transform: scale(1);
1908
+ }
1909
+ }
1910
+
1911
+ .neiki-modal-overlay.show .neiki-modal {
1912
+ animation: neiki-modal-in 0.2s ease;
1913
+ }
1914
+
1915
+ /* ============================================
1916
+ Font Size Widget
1917
+ ============================================ */
1918
+ .neiki-fontsize-widget {
1919
+ display: inline-flex;
1920
+ align-items: center;
1921
+ position: relative;
1922
+ height: 32px;
1923
+ border: 1px solid var(--neiki-border-color);
1924
+ border-radius: 4px;
1925
+ overflow: visible;
1926
+ background: var(--neiki-bg-primary);
1927
+ }
1928
+
1929
+ .neiki-fontsize-btn {
1930
+ display: flex;
1931
+ align-items: center;
1932
+ justify-content: center;
1933
+ width: 26px;
1934
+ height: 30px;
1935
+ background: transparent;
1936
+ border: none;
1937
+ cursor: pointer;
1938
+ color: var(--neiki-text-secondary);
1939
+ transition: background 0.15s, color 0.15s;
1940
+ padding: 0;
1941
+ }
1942
+
1943
+ .neiki-fontsize-btn:hover {
1944
+ background: var(--neiki-bg-hover);
1945
+ color: var(--neiki-text-primary);
1946
+ }
1947
+
1948
+ .neiki-fontsize-input {
1949
+ width: 38px;
1950
+ height: 30px;
1951
+ text-align: center;
1952
+ border: none;
1953
+ border-left: 1px solid var(--neiki-border-color);
1954
+ border-right: 1px solid var(--neiki-border-color);
1955
+ background: var(--neiki-bg-primary);
1956
+ color: var(--neiki-text-primary);
1957
+ font-size: 13px;
1958
+ outline: none;
1959
+ -moz-appearance: textfield;
1960
+ appearance: textfield;
1961
+ padding: 0;
1962
+ }
1963
+
1964
+ .neiki-fontsize-input::-webkit-outer-spin-button,
1965
+ .neiki-fontsize-input::-webkit-inner-spin-button {
1966
+ -webkit-appearance: none;
1967
+ margin: 0;
1968
+ }
1969
+
1970
+ .neiki-fontsize-dropdown {
1971
+ display: none;
1972
+ position: absolute;
1973
+ top: 100%;
1974
+ left: 0;
1975
+ z-index: 1000;
1976
+ min-width: 70px;
1977
+ max-height: 240px;
1978
+ overflow-y: auto;
1979
+ background: var(--neiki-bg-primary);
1980
+ border: 1px solid var(--neiki-border-color);
1981
+ border-radius: 6px;
1982
+ box-shadow: var(--neiki-shadow-lg);
1983
+ padding: 4px;
1984
+ margin-top: 4px;
1985
+ }
1986
+
1987
+ .neiki-fontsize-dropdown.show {
1988
+ display: block;
1989
+ }
1990
+
1991
+ .neiki-fontsize-dropdown-item {
1992
+ padding: 6px 12px;
1993
+ font-size: 13px;
1994
+ cursor: pointer;
1995
+ border-radius: 4px;
1996
+ color: var(--neiki-text-primary);
1997
+ text-align: center;
1998
+ transition: background 0.1s;
1999
+ }
2000
+
2001
+ .neiki-fontsize-dropdown-item:hover {
2002
+ background: var(--neiki-bg-hover);
2003
+ }
2004
+
2005
+ /* ============================================
2006
+ Insert Dropdown Button
2007
+ ============================================ */
2008
+ .neiki-insert-dropdown-btn {
2009
+ width: auto !important;
2010
+ padding: 0 8px !important;
2011
+ gap: 4px;
2012
+ font-size: 13px;
2013
+ font-weight: 500;
2014
+ }
2015
+
2016
+ .neiki-insert-label {
2017
+ font-size: 13px;
2018
+ pointer-events: none;
2019
+ }
2020
+
2021
+ .neiki-chevron {
2022
+ display: inline-flex;
2023
+ pointer-events: none;
2024
+ }
2025
+
2026
+ .neiki-chevron svg {
2027
+ width: 14px;
2028
+ height: 14px;
2029
+ }
2030
+
2031
+ .neiki-insert-dropdown {
2032
+ display: none;
2033
+ position: absolute;
2034
+ top: 100%;
2035
+ left: 0;
2036
+ z-index: 1000;
2037
+ min-width: 160px;
2038
+ max-width: calc(100vw - 16px);
2039
+ background: var(--neiki-bg-primary);
2040
+ border: 1px solid var(--neiki-border-color);
2041
+ border-radius: 6px;
2042
+ box-shadow: var(--neiki-shadow-lg);
2043
+ padding: 4px;
2044
+ margin-top: 4px;
2045
+ }
2046
+
2047
+ .neiki-insert-dropdown.show {
2048
+ display: block;
2049
+ animation: neiki-fade-in 0.15s ease;
2050
+ }
2051
+
2052
+ /* ============================================
2053
+ More Menu (⋯) Dropdown
2054
+ ============================================ */
2055
+ .neiki-more-btn {
2056
+ position: relative;
2057
+ }
2058
+
2059
+ .neiki-more-dropdown {
2060
+ display: none;
2061
+ position: absolute;
2062
+ top: 100%;
2063
+ right: 0;
2064
+ z-index: 1000;
2065
+ min-width: 140px;
2066
+ max-width: 170px;
2067
+ background: var(--neiki-bg-primary);
2068
+ border: 1px solid var(--neiki-border-color);
2069
+ border-radius: 6px;
2070
+ box-shadow: var(--neiki-shadow-lg);
2071
+ padding: 4px;
2072
+ margin-top: 4px;
2073
+ }
2074
+
2075
+ .neiki-more-dropdown.show {
2076
+ display: block;
2077
+ animation: neiki-fade-in 0.15s ease;
2078
+ }
2079
+
2080
+ /* Czech language - wider dropdown for longer labels */
2081
+ .neiki-lang-cs .neiki-more-dropdown {
2082
+ min-width: 165px;
2083
+ }
2084
+
2085
+ /* Dropdown item with icon */
2086
+ .neiki-dropdown-item-icon {
2087
+ display: inline-flex;
2088
+ align-items: center;
2089
+ justify-content: center;
2090
+ width: 18px;
2091
+ height: 18px;
2092
+ flex-shrink: 0;
2093
+ }
2094
+
2095
+ .neiki-dropdown-item-icon svg {
2096
+ width: 16px;
2097
+ height: 16px;
2098
+ fill: currentColor;
2099
+ }
2100
+
2101
+ .neiki-dropdown-item-danger {
2102
+ color: var(--neiki-danger-color) !important;
2103
+ }
2104
+
2105
+ .neiki-dropdown-item-danger:hover {
2106
+ background: rgba(220, 53, 69, 0.1);
2107
+ }
2108
+
2109
+ /* Autosave badge in More menu */
2110
+ .neiki-autosave-badge {
2111
+ font-size: 12px;
2112
+ font-weight: 600;
2113
+ color: var(--neiki-text-muted);
2114
+ padding: 0 4px;
2115
+ }
2116
+
2117
+ .neiki-autosave-badge.active {
2118
+ color: var(--neiki-success-color);
2119
+ }
2120
+
2121
+ /* ============================================
2122
+ Preview Modal
2123
+ ============================================ */
2124
+ .neiki-preview-overlay {
2125
+ position: fixed;
2126
+ inset: 0;
2127
+ background: rgba(0, 0, 0, 0.6);
2128
+ z-index: 100000;
2129
+ display: flex;
2130
+ align-items: center;
2131
+ justify-content: center;
2132
+ padding: 30px;
2133
+ animation: neiki-fade-in 0.2s ease;
2134
+ }
2135
+
2136
+ .neiki-preview-modal {
2137
+ background: var(--neiki-bg-primary);
2138
+ border-radius: 12px;
2139
+ width: 100%;
2140
+ max-width: 900px;
2141
+ max-height: 90vh;
2142
+ display: flex;
2143
+ flex-direction: column;
2144
+ overflow: hidden;
2145
+ box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
2146
+ animation: neiki-modal-in 0.2s ease;
2147
+ }
2148
+
2149
+ .neiki-preview-header {
2150
+ display: flex;
2151
+ align-items: center;
2152
+ justify-content: space-between;
2153
+ padding: 14px 20px;
2154
+ background: var(--neiki-bg-secondary);
2155
+ border-bottom: 1px solid var(--neiki-border-color);
2156
+ font-weight: 600;
2157
+ font-size: 14px;
2158
+ color: var(--neiki-text-primary);
2159
+ }
2160
+
2161
+ .neiki-preview-close {
2162
+ width: 32px;
2163
+ height: 32px;
2164
+ display: flex;
2165
+ align-items: center;
2166
+ justify-content: center;
2167
+ background: transparent;
2168
+ border: none;
2169
+ border-radius: 4px;
2170
+ cursor: pointer;
2171
+ color: var(--neiki-text-muted);
2172
+ transition: background 0.15s;
2173
+ }
2174
+
2175
+ .neiki-preview-close:hover {
2176
+ background: var(--neiki-bg-hover);
2177
+ color: var(--neiki-text-primary);
2178
+ }
2179
+
2180
+ .neiki-preview-close svg {
2181
+ width: 18px;
2182
+ height: 18px;
2183
+ fill: currentColor;
2184
+ }
2185
+
2186
+ .neiki-preview-body {
2187
+ flex: 1;
2188
+ overflow: auto;
2189
+ padding: 30px;
2190
+ color: var(--neiki-text-primary);
2191
+ font-size: 15px;
2192
+ line-height: 1.7;
2193
+ }
2194
+
2195
+ .neiki-preview-body img {
2196
+ max-width: 100%;
2197
+ }
2198
+
2199
+ .neiki-preview-body table {
2200
+ border-collapse: collapse;
2201
+ width: 100%;
2202
+ }
2203
+
2204
+ .neiki-preview-body table td,
2205
+ .neiki-preview-body table th {
2206
+ border: 1px solid var(--neiki-border-color);
2207
+ padding: 8px 12px;
2208
+ }
2209
+
2210
+ /* Autosave status in statusbar */
2211
+ .neiki-statusbar-autosave {
2212
+ font-style: italic;
2213
+ color: var(--neiki-success-color);
2214
+ font-size: 11px;
2215
+ }