neiki-editor 2.7.1 → 2.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +729 -701
  2. package/dist/neiki-editor.css +2212 -2070
  3. package/dist/neiki-editor.js +5140 -4428
  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,2070 +1,2212 @@
1
- /**
2
- * NeikiEditor - Production-Ready WYSIWYG Rich Text Editor
3
- * CSS Stylesheet
4
- * Version: 2.7.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-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
- /* ============================================
1537
- Tooltips
1538
- ============================================ */
1539
- [data-tooltip] {
1540
- position: relative;
1541
- }
1542
-
1543
- [data-tooltip]::after {
1544
- content: attr(data-tooltip);
1545
- position: absolute;
1546
- bottom: 100%;
1547
- left: 50%;
1548
- transform: translateX(-50%);
1549
- padding: 6px 10px;
1550
- background: var(--neiki-text-primary);
1551
- color: var(--neiki-bg-primary);
1552
- font-size: 11px;
1553
- font-weight: 500;
1554
- white-space: nowrap;
1555
- border-radius: 4px;
1556
- opacity: 0;
1557
- visibility: hidden;
1558
- transition: opacity 0.15s, visibility 0.15s;
1559
- pointer-events: none;
1560
- z-index: 10002;
1561
- margin-bottom: 6px;
1562
- }
1563
-
1564
- [data-tooltip]:hover::after {
1565
- opacity: 1;
1566
- visibility: visible;
1567
- }
1568
-
1569
- /* ============================================
1570
- Drag & Drop Overlay
1571
- ============================================ */
1572
- .neiki-drop-overlay {
1573
- position: absolute;
1574
- top: 0;
1575
- left: 0;
1576
- right: 0;
1577
- bottom: 0;
1578
- background: rgba(13, 110, 253, 0.1);
1579
- border: 3px dashed var(--neiki-accent-color);
1580
- border-radius: 8px;
1581
- display: none;
1582
- align-items: center;
1583
- justify-content: center;
1584
- z-index: 100;
1585
- pointer-events: none;
1586
- }
1587
-
1588
- .neiki-drop-overlay.show {
1589
- display: flex;
1590
- }
1591
-
1592
- .neiki-drop-overlay-text {
1593
- font-size: 18px;
1594
- font-weight: 600;
1595
- color: var(--neiki-accent-color);
1596
- }
1597
-
1598
- /* ============================================
1599
- Image Resize Handles
1600
- ============================================ */
1601
- .neiki-image-wrapper {
1602
- display: inline-block;
1603
- position: relative;
1604
- }
1605
-
1606
- .neiki-image-wrapper.selected {
1607
- outline: 2px solid var(--neiki-accent-color);
1608
- }
1609
-
1610
- .neiki-resize-handle {
1611
- position: absolute;
1612
- width: 10px;
1613
- height: 10px;
1614
- background: var(--neiki-accent-color);
1615
- border: 2px solid #fff;
1616
- border-radius: 2px;
1617
- }
1618
-
1619
- .neiki-resize-handle.nw { top: -5px; left: -5px; cursor: nw-resize; }
1620
- .neiki-resize-handle.ne { top: -5px; right: -5px; cursor: ne-resize; }
1621
- .neiki-resize-handle.sw { bottom: -5px; left: -5px; cursor: sw-resize; }
1622
- .neiki-resize-handle.se { bottom: -5px; right: -5px; cursor: se-resize; }
1623
-
1624
- /* ============================================
1625
- Print Styles
1626
- ============================================ */
1627
- @media print {
1628
- .neiki-editor {
1629
- border: none !important;
1630
- box-shadow: none !important;
1631
- }
1632
-
1633
- .neiki-toolbar,
1634
- .neiki-statusbar,
1635
- .neiki-floating-toolbar,
1636
- .neiki-find-replace,
1637
- .neiki-code-view-header {
1638
- display: none !important;
1639
- }
1640
-
1641
- .neiki-content {
1642
- padding: 0 !important;
1643
- overflow: visible !important;
1644
- }
1645
-
1646
- .neiki-editor-wrapper {
1647
- overflow: visible !important;
1648
- }
1649
- }
1650
-
1651
- /* ============================================
1652
- Responsive Adjustments
1653
- ============================================ */
1654
- @media (max-width: 768px) {
1655
- .neiki-toolbar {
1656
- padding: 4px;
1657
- gap: 1px;
1658
- }
1659
-
1660
- .neiki-toolbar-group {
1661
- padding: 0 2px;
1662
- }
1663
-
1664
- .neiki-toolbar-group:not(:last-child) {
1665
- padding-right: 4px;
1666
- margin-right: 2px;
1667
- }
1668
-
1669
- .neiki-btn {
1670
- width: 28px;
1671
- height: 28px;
1672
- }
1673
-
1674
- .neiki-btn svg {
1675
- width: 16px;
1676
- height: 16px;
1677
- }
1678
-
1679
- .neiki-select {
1680
- height: 28px;
1681
- min-width: 80px;
1682
- font-size: 12px;
1683
- padding: 0 24px 0 8px;
1684
- }
1685
-
1686
- .neiki-content {
1687
- padding: 12px 16px;
1688
- }
1689
-
1690
- .neiki-statusbar {
1691
- padding: 4px 8px;
1692
- font-size: 11px;
1693
- }
1694
-
1695
- .neiki-modal {
1696
- width: 95%;
1697
- max-width: none;
1698
- margin: 10px;
1699
- }
1700
-
1701
- .neiki-find-replace {
1702
- width: 100%;
1703
- border-radius: 0;
1704
- }
1705
-
1706
- .neiki-checkbox-wrapper {
1707
- padding: 0 4px;
1708
- font-size: 11px;
1709
- }
1710
-
1711
- .neiki-color-picker {
1712
- left: auto;
1713
- right: 0;
1714
- }
1715
- }
1716
-
1717
- @media (max-width: 480px) {
1718
- .neiki-toolbar-group:not(:last-child) {
1719
- border-right: none;
1720
- padding-right: 2px;
1721
- margin-right: 0;
1722
- }
1723
-
1724
- .neiki-select {
1725
- min-width: 60px;
1726
- }
1727
-
1728
- .neiki-statusbar-left,
1729
- .neiki-statusbar-right {
1730
- gap: 8px;
1731
- }
1732
- }
1733
-
1734
- /* ============================================
1735
- Animations
1736
- ============================================ */
1737
- @keyframes neiki-fade-in {
1738
- from {
1739
- opacity: 0;
1740
- transform: translateY(-10px);
1741
- }
1742
- to {
1743
- opacity: 1;
1744
- transform: translateY(0);
1745
- }
1746
- }
1747
-
1748
- .neiki-dropdown.show,
1749
- .neiki-color-picker.show,
1750
- .neiki-table-picker.show,
1751
- .neiki-emoji-picker.show,
1752
- .neiki-special-chars.show {
1753
- animation: neiki-fade-in 0.15s ease;
1754
- }
1755
-
1756
- @keyframes neiki-modal-in {
1757
- from {
1758
- opacity: 0;
1759
- transform: scale(0.95);
1760
- }
1761
- to {
1762
- opacity: 1;
1763
- transform: scale(1);
1764
- }
1765
- }
1766
-
1767
- .neiki-modal-overlay.show .neiki-modal {
1768
- animation: neiki-modal-in 0.2s ease;
1769
- }
1770
-
1771
- /* ============================================
1772
- Font Size Widget
1773
- ============================================ */
1774
- .neiki-fontsize-widget {
1775
- display: inline-flex;
1776
- align-items: center;
1777
- position: relative;
1778
- height: 32px;
1779
- border: 1px solid var(--neiki-border-color);
1780
- border-radius: 4px;
1781
- overflow: visible;
1782
- background: var(--neiki-bg-primary);
1783
- }
1784
-
1785
- .neiki-fontsize-btn {
1786
- display: flex;
1787
- align-items: center;
1788
- justify-content: center;
1789
- width: 26px;
1790
- height: 30px;
1791
- background: transparent;
1792
- border: none;
1793
- cursor: pointer;
1794
- color: var(--neiki-text-secondary);
1795
- transition: background 0.15s, color 0.15s;
1796
- padding: 0;
1797
- }
1798
-
1799
- .neiki-fontsize-btn:hover {
1800
- background: var(--neiki-bg-hover);
1801
- color: var(--neiki-text-primary);
1802
- }
1803
-
1804
- .neiki-fontsize-input {
1805
- width: 38px;
1806
- height: 30px;
1807
- text-align: center;
1808
- border: none;
1809
- border-left: 1px solid var(--neiki-border-color);
1810
- border-right: 1px solid var(--neiki-border-color);
1811
- background: var(--neiki-bg-primary);
1812
- color: var(--neiki-text-primary);
1813
- font-size: 13px;
1814
- outline: none;
1815
- -moz-appearance: textfield;
1816
- appearance: textfield;
1817
- padding: 0;
1818
- }
1819
-
1820
- .neiki-fontsize-input::-webkit-outer-spin-button,
1821
- .neiki-fontsize-input::-webkit-inner-spin-button {
1822
- -webkit-appearance: none;
1823
- margin: 0;
1824
- }
1825
-
1826
- .neiki-fontsize-dropdown {
1827
- display: none;
1828
- position: absolute;
1829
- top: 100%;
1830
- left: 0;
1831
- z-index: 1000;
1832
- min-width: 70px;
1833
- max-height: 240px;
1834
- overflow-y: auto;
1835
- background: var(--neiki-bg-primary);
1836
- border: 1px solid var(--neiki-border-color);
1837
- border-radius: 6px;
1838
- box-shadow: var(--neiki-shadow-lg);
1839
- padding: 4px;
1840
- margin-top: 4px;
1841
- }
1842
-
1843
- .neiki-fontsize-dropdown.show {
1844
- display: block;
1845
- }
1846
-
1847
- .neiki-fontsize-dropdown-item {
1848
- padding: 6px 12px;
1849
- font-size: 13px;
1850
- cursor: pointer;
1851
- border-radius: 4px;
1852
- color: var(--neiki-text-primary);
1853
- text-align: center;
1854
- transition: background 0.1s;
1855
- }
1856
-
1857
- .neiki-fontsize-dropdown-item:hover {
1858
- background: var(--neiki-bg-hover);
1859
- }
1860
-
1861
- /* ============================================
1862
- Insert Dropdown Button
1863
- ============================================ */
1864
- .neiki-insert-dropdown-btn {
1865
- width: auto !important;
1866
- padding: 0 8px !important;
1867
- gap: 4px;
1868
- font-size: 13px;
1869
- font-weight: 500;
1870
- }
1871
-
1872
- .neiki-insert-label {
1873
- font-size: 13px;
1874
- pointer-events: none;
1875
- }
1876
-
1877
- .neiki-chevron {
1878
- display: inline-flex;
1879
- pointer-events: none;
1880
- }
1881
-
1882
- .neiki-chevron svg {
1883
- width: 14px;
1884
- height: 14px;
1885
- }
1886
-
1887
- .neiki-insert-dropdown {
1888
- display: none;
1889
- position: absolute;
1890
- top: 100%;
1891
- left: 0;
1892
- z-index: 1000;
1893
- min-width: 160px;
1894
- background: var(--neiki-bg-primary);
1895
- border: 1px solid var(--neiki-border-color);
1896
- border-radius: 6px;
1897
- box-shadow: var(--neiki-shadow-lg);
1898
- padding: 4px;
1899
- margin-top: 4px;
1900
- }
1901
-
1902
- .neiki-insert-dropdown.show {
1903
- display: block;
1904
- animation: neiki-fade-in 0.15s ease;
1905
- }
1906
-
1907
- /* ============================================
1908
- More Menu (⋯) Dropdown
1909
- ============================================ */
1910
- .neiki-more-btn {
1911
- position: relative;
1912
- }
1913
-
1914
- .neiki-more-dropdown {
1915
- display: none;
1916
- position: absolute;
1917
- top: 100%;
1918
- right: 0;
1919
- z-index: 1000;
1920
- min-width: 140px;
1921
- max-width: 170px;
1922
- background: var(--neiki-bg-primary);
1923
- border: 1px solid var(--neiki-border-color);
1924
- border-radius: 6px;
1925
- box-shadow: var(--neiki-shadow-lg);
1926
- padding: 4px;
1927
- margin-top: 4px;
1928
- }
1929
-
1930
- .neiki-more-dropdown.show {
1931
- display: block;
1932
- animation: neiki-fade-in 0.15s ease;
1933
- }
1934
-
1935
- /* Czech language - wider dropdown for longer labels */
1936
- .neiki-lang-cs .neiki-more-dropdown {
1937
- min-width: 165px;
1938
- }
1939
-
1940
- /* Dropdown item with icon */
1941
- .neiki-dropdown-item-icon {
1942
- display: inline-flex;
1943
- align-items: center;
1944
- justify-content: center;
1945
- width: 18px;
1946
- height: 18px;
1947
- flex-shrink: 0;
1948
- }
1949
-
1950
- .neiki-dropdown-item-icon svg {
1951
- width: 16px;
1952
- height: 16px;
1953
- fill: currentColor;
1954
- }
1955
-
1956
- .neiki-dropdown-item-danger {
1957
- color: var(--neiki-danger-color) !important;
1958
- }
1959
-
1960
- .neiki-dropdown-item-danger:hover {
1961
- background: rgba(220, 53, 69, 0.1);
1962
- }
1963
-
1964
- /* Autosave badge in More menu */
1965
- .neiki-autosave-badge {
1966
- font-size: 12px;
1967
- font-weight: 600;
1968
- color: var(--neiki-text-muted);
1969
- padding: 0 4px;
1970
- }
1971
-
1972
- .neiki-autosave-badge.active {
1973
- color: var(--neiki-success-color);
1974
- }
1975
-
1976
- /* ============================================
1977
- Preview Modal
1978
- ============================================ */
1979
- .neiki-preview-overlay {
1980
- position: fixed;
1981
- inset: 0;
1982
- background: rgba(0, 0, 0, 0.6);
1983
- z-index: 100000;
1984
- display: flex;
1985
- align-items: center;
1986
- justify-content: center;
1987
- padding: 30px;
1988
- animation: neiki-fade-in 0.2s ease;
1989
- }
1990
-
1991
- .neiki-preview-modal {
1992
- background: var(--neiki-bg-primary);
1993
- border-radius: 12px;
1994
- width: 100%;
1995
- max-width: 900px;
1996
- max-height: 90vh;
1997
- display: flex;
1998
- flex-direction: column;
1999
- overflow: hidden;
2000
- box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
2001
- animation: neiki-modal-in 0.2s ease;
2002
- }
2003
-
2004
- .neiki-preview-header {
2005
- display: flex;
2006
- align-items: center;
2007
- justify-content: space-between;
2008
- padding: 14px 20px;
2009
- background: var(--neiki-bg-secondary);
2010
- border-bottom: 1px solid var(--neiki-border-color);
2011
- font-weight: 600;
2012
- font-size: 14px;
2013
- color: var(--neiki-text-primary);
2014
- }
2015
-
2016
- .neiki-preview-close {
2017
- width: 32px;
2018
- height: 32px;
2019
- display: flex;
2020
- align-items: center;
2021
- justify-content: center;
2022
- background: transparent;
2023
- border: none;
2024
- border-radius: 4px;
2025
- cursor: pointer;
2026
- color: var(--neiki-text-muted);
2027
- transition: background 0.15s;
2028
- }
2029
-
2030
- .neiki-preview-close:hover {
2031
- background: var(--neiki-bg-hover);
2032
- color: var(--neiki-text-primary);
2033
- }
2034
-
2035
- .neiki-preview-close svg {
2036
- width: 18px;
2037
- height: 18px;
2038
- fill: currentColor;
2039
- }
2040
-
2041
- .neiki-preview-body {
2042
- flex: 1;
2043
- overflow: auto;
2044
- padding: 30px;
2045
- color: var(--neiki-text-primary);
2046
- font-size: 15px;
2047
- line-height: 1.7;
2048
- }
2049
-
2050
- .neiki-preview-body img {
2051
- max-width: 100%;
2052
- }
2053
-
2054
- .neiki-preview-body table {
2055
- border-collapse: collapse;
2056
- width: 100%;
2057
- }
2058
-
2059
- .neiki-preview-body table td,
2060
- .neiki-preview-body table th {
2061
- border: 1px solid var(--neiki-border-color);
2062
- padding: 8px 12px;
2063
- }
2064
-
2065
- /* Autosave status in statusbar */
2066
- .neiki-statusbar-autosave {
2067
- font-style: italic;
2068
- color: var(--neiki-success-color);
2069
- font-size: 11px;
2070
- }
1
+ /**
2
+ * NeikiEditor - Production-Ready WYSIWYG Rich Text Editor
3
+ * CSS Stylesheet
4
+ * Version: 2.9.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-input[type="file"] {
1110
+ display: flex;
1111
+ align-items: center;
1112
+ padding: 0 12px;
1113
+ line-height: 40px;
1114
+ cursor: pointer;
1115
+ }
1116
+
1117
+ .neiki-form-row {
1118
+ display: flex;
1119
+ gap: 16px;
1120
+ }
1121
+
1122
+ .neiki-form-divider {
1123
+ display: flex;
1124
+ align-items: center;
1125
+ margin: 16px 0;
1126
+ text-align: center;
1127
+ position: relative;
1128
+ }
1129
+
1130
+ .neiki-form-divider::before {
1131
+ content: '';
1132
+ flex: 1;
1133
+ height: 1px;
1134
+ background: var(--neiki-border-color);
1135
+ margin-right: 12px;
1136
+ }
1137
+
1138
+ .neiki-form-divider::after {
1139
+ content: '';
1140
+ flex: 1;
1141
+ height: 1px;
1142
+ background: var(--neiki-border-color);
1143
+ margin-left: 12px;
1144
+ }
1145
+
1146
+ .neiki-form-divider span {
1147
+ color: var(--neiki-text-muted);
1148
+ font-size: 12px;
1149
+ font-weight: 500;
1150
+ text-transform: uppercase;
1151
+ }
1152
+
1153
+ .neiki-form-group label {
1154
+ display: block;
1155
+ margin-bottom: 6px;
1156
+ font-size: 13px;
1157
+ font-weight: 500;
1158
+ color: var(--neiki-text-secondary);
1159
+ }
1160
+
1161
+ .neiki-form-textarea {
1162
+ width: 100%;
1163
+ min-height: 120px;
1164
+ padding: 12px;
1165
+ border: 1px solid var(--neiki-border-color);
1166
+ border-radius: 6px;
1167
+ background: var(--neiki-bg-primary);
1168
+ color: var(--neiki-text-primary);
1169
+ font-size: 14px;
1170
+ font-family: inherit;
1171
+ resize: vertical;
1172
+ transition: border-color 0.15s;
1173
+ }
1174
+
1175
+ .neiki-form-textarea:focus {
1176
+ outline: none;
1177
+ border-color: var(--neiki-accent-color);
1178
+ box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
1179
+ }
1180
+
1181
+ /* Buttons */
1182
+ .neiki-button {
1183
+ display: inline-flex;
1184
+ align-items: center;
1185
+ justify-content: center;
1186
+ gap: 6px;
1187
+ height: 38px;
1188
+ padding: 0 16px;
1189
+ border: 1px solid transparent;
1190
+ border-radius: 6px;
1191
+ font-size: 14px;
1192
+ font-weight: 500;
1193
+ cursor: pointer;
1194
+ transition: all 0.15s;
1195
+ }
1196
+
1197
+ .neiki-button-primary,
1198
+ .neiki-btn-primary {
1199
+ background: var(--neiki-accent-color);
1200
+ color: #fff;
1201
+ }
1202
+
1203
+ .neiki-button-primary:hover,
1204
+ .neiki-btn-primary:hover {
1205
+ background: var(--neiki-accent-hover);
1206
+ }
1207
+
1208
+ .neiki-button-secondary,
1209
+ .neiki-btn-secondary {
1210
+ background: var(--neiki-bg-secondary);
1211
+ color: var(--neiki-text-primary);
1212
+ border-color: var(--neiki-border-color);
1213
+ }
1214
+
1215
+ .neiki-btn-primary,
1216
+ .neiki-btn-secondary {
1217
+ display: inline-flex;
1218
+ align-items: center;
1219
+ justify-content: center;
1220
+ height: 38px;
1221
+ padding: 0 16px;
1222
+ border: 1px solid transparent;
1223
+ border-radius: 6px;
1224
+ font-size: 14px;
1225
+ font-weight: 500;
1226
+ cursor: pointer;
1227
+ transition: all 0.15s;
1228
+ }
1229
+
1230
+ .neiki-btn-secondary {
1231
+ border-color: var(--neiki-border-color);
1232
+ }
1233
+
1234
+ .neiki-btn-secondary:hover {
1235
+ background: var(--neiki-bg-hover);
1236
+ }
1237
+
1238
+ .neiki-button-secondary:hover {
1239
+ background: var(--neiki-bg-hover);
1240
+ }
1241
+
1242
+ .neiki-button-danger {
1243
+ background: var(--neiki-danger-color);
1244
+ color: #fff;
1245
+ }
1246
+
1247
+ .neiki-button-danger:hover {
1248
+ opacity: 0.9;
1249
+ }
1250
+
1251
+ /* ============================================
1252
+ Find & Replace Panel
1253
+ ============================================ */
1254
+ .neiki-find-replace {
1255
+ position: absolute;
1256
+ top: 0;
1257
+ right: 0;
1258
+ z-index: 100;
1259
+ width: 360px;
1260
+ background: var(--neiki-bg-primary);
1261
+ border: 1px solid var(--neiki-border-color);
1262
+ border-radius: 0 0 0 8px;
1263
+ box-shadow: var(--neiki-shadow-lg);
1264
+ display: none;
1265
+ }
1266
+
1267
+ .neiki-find-replace.show {
1268
+ display: block;
1269
+ }
1270
+
1271
+ .neiki-find-replace-header {
1272
+ display: flex;
1273
+ align-items: center;
1274
+ justify-content: space-between;
1275
+ padding: 10px 12px;
1276
+ border-bottom: 1px solid var(--neiki-border-color);
1277
+ }
1278
+
1279
+ .neiki-find-replace-title {
1280
+ font-size: 13px;
1281
+ font-weight: 600;
1282
+ color: var(--neiki-text-primary);
1283
+ }
1284
+
1285
+ .neiki-find-replace-body {
1286
+ padding: 12px;
1287
+ }
1288
+
1289
+ .neiki-find-replace-row {
1290
+ display: flex;
1291
+ gap: 8px;
1292
+ margin-bottom: 10px;
1293
+ }
1294
+
1295
+ .neiki-find-replace-row:last-child {
1296
+ margin-bottom: 0;
1297
+ }
1298
+
1299
+ .neiki-find-replace-input {
1300
+ flex: 1;
1301
+ height: 32px;
1302
+ padding: 0 10px;
1303
+ border: 1px solid var(--neiki-border-color);
1304
+ border-radius: 4px;
1305
+ background: var(--neiki-bg-primary);
1306
+ color: var(--neiki-text-primary);
1307
+ font-size: 13px;
1308
+ }
1309
+
1310
+ .neiki-find-replace-input:focus {
1311
+ outline: none;
1312
+ border-color: var(--neiki-accent-color);
1313
+ }
1314
+
1315
+ .neiki-find-replace-options {
1316
+ display: flex;
1317
+ align-items: center;
1318
+ gap: 12px;
1319
+ margin-bottom: 10px;
1320
+ }
1321
+
1322
+ .neiki-find-replace-option {
1323
+ display: flex;
1324
+ align-items: center;
1325
+ gap: 4px;
1326
+ font-size: 12px;
1327
+ color: var(--neiki-text-secondary);
1328
+ cursor: pointer;
1329
+ }
1330
+
1331
+ .neiki-find-replace-option input {
1332
+ accent-color: var(--neiki-accent-color);
1333
+ }
1334
+
1335
+ .neiki-find-replace-actions {
1336
+ display: flex;
1337
+ gap: 6px;
1338
+ flex-wrap: wrap;
1339
+ }
1340
+
1341
+ .neiki-find-replace-btn {
1342
+ height: 28px;
1343
+ padding: 0 10px;
1344
+ font-size: 12px;
1345
+ border-radius: 4px;
1346
+ }
1347
+
1348
+ .neiki-find-replace-count {
1349
+ font-size: 12px;
1350
+ color: var(--neiki-text-muted);
1351
+ margin-left: auto;
1352
+ }
1353
+
1354
+ /* ============================================
1355
+ HTML Code View
1356
+ ============================================ */
1357
+ .neiki-code-view {
1358
+ position: absolute;
1359
+ top: 0;
1360
+ left: 0;
1361
+ right: 0;
1362
+ bottom: 0;
1363
+ z-index: 50;
1364
+ background: var(--neiki-bg-primary);
1365
+ display: none;
1366
+ flex-direction: column;
1367
+ }
1368
+
1369
+ .neiki-code-view.show {
1370
+ display: flex;
1371
+ }
1372
+
1373
+ .neiki-code-view-header {
1374
+ display: flex;
1375
+ align-items: center;
1376
+ justify-content: space-between;
1377
+ padding: 8px 16px;
1378
+ background: var(--neiki-bg-secondary);
1379
+ border-bottom: 1px solid var(--neiki-border-color);
1380
+ flex-shrink: 0;
1381
+ }
1382
+
1383
+ .neiki-code-view-title {
1384
+ font-size: 13px;
1385
+ font-weight: 600;
1386
+ color: var(--neiki-text-primary);
1387
+ }
1388
+
1389
+ .neiki-code-view-textarea {
1390
+ flex: 1;
1391
+ width: 100%;
1392
+ padding: 16px;
1393
+ border: none;
1394
+ background: var(--neiki-bg-primary);
1395
+ color: var(--neiki-text-primary);
1396
+ font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
1397
+ font-size: 13px;
1398
+ line-height: 1.5;
1399
+ resize: none;
1400
+ }
1401
+
1402
+ .neiki-code-view-textarea:focus {
1403
+ outline: none;
1404
+ }
1405
+
1406
+ .neiki-code-view-apply {
1407
+ width: auto !important;
1408
+ padding: 0 12px !important;
1409
+ display: inline-flex;
1410
+ align-items: center;
1411
+ gap: 4px;
1412
+ height: 30px;
1413
+ font-size: 12px;
1414
+ background: var(--neiki-accent-color) !important;
1415
+ color: white !important;
1416
+ border-radius: 5px;
1417
+ }
1418
+
1419
+ .neiki-code-view-apply:hover {
1420
+ background: var(--neiki-accent-hover) !important;
1421
+ color: white !important;
1422
+ }
1423
+
1424
+ .neiki-code-view-apply svg {
1425
+ width: 14px !important;
1426
+ height: 14px !important;
1427
+ }
1428
+
1429
+ /* ============================================
1430
+ Context Menu
1431
+ ============================================ */
1432
+ .neiki-context-menu {
1433
+ position: fixed;
1434
+ z-index: 10001;
1435
+ min-width: 180px;
1436
+ background: var(--neiki-bg-primary);
1437
+ border: 1px solid var(--neiki-border-color);
1438
+ border-radius: 8px;
1439
+ box-shadow: var(--neiki-shadow-lg);
1440
+ padding: 4px;
1441
+ display: none;
1442
+ }
1443
+
1444
+ .neiki-context-menu.show {
1445
+ display: block;
1446
+ }
1447
+
1448
+ .neiki-context-item,
1449
+ .neiki-context-menu-item {
1450
+ display: flex;
1451
+ align-items: center;
1452
+ gap: 10px;
1453
+ padding: 8px 12px;
1454
+ border-radius: 4px;
1455
+ cursor: pointer;
1456
+ color: var(--neiki-text-primary);
1457
+ font-size: 13px;
1458
+ transition: background 0.1s;
1459
+ }
1460
+
1461
+ .neiki-context-item:hover,
1462
+ .neiki-context-menu-item:hover {
1463
+ background: var(--neiki-bg-hover);
1464
+ }
1465
+
1466
+ .neiki-context-item.neiki-context-danger,
1467
+ .neiki-context-menu-item.danger {
1468
+ color: var(--neiki-danger-color);
1469
+ }
1470
+
1471
+ .neiki-context-item svg,
1472
+ .neiki-context-menu-item svg {
1473
+ width: 16px;
1474
+ height: 16px;
1475
+ fill: currentColor;
1476
+ }
1477
+
1478
+ .neiki-context-divider,
1479
+ .neiki-context-menu-divider {
1480
+ height: 1px;
1481
+ background: var(--neiki-border-color);
1482
+ margin: 4px 0;
1483
+ }
1484
+
1485
+ /* ============================================
1486
+ Floating Selection Toolbar
1487
+ ============================================ */
1488
+ .neiki-floating-toolbar {
1489
+ position: absolute;
1490
+ z-index: 1000;
1491
+ display: none;
1492
+ background: var(--neiki-bg-primary);
1493
+ border: 1px solid var(--neiki-border-color);
1494
+ border-radius: 8px;
1495
+ box-shadow: var(--neiki-shadow-lg);
1496
+ padding: 4px;
1497
+ }
1498
+
1499
+ .neiki-floating-toolbar.show {
1500
+ display: flex;
1501
+ align-items: center;
1502
+ gap: 2px;
1503
+ }
1504
+
1505
+ .neiki-floating-btn {
1506
+ width: 32px;
1507
+ height: 32px;
1508
+ border: none;
1509
+ background: var(--neiki-bg-primary);
1510
+ color: var(--neiki-text-primary);
1511
+ border-radius: 6px;
1512
+ cursor: pointer;
1513
+ display: flex;
1514
+ align-items: center;
1515
+ justify-content: center;
1516
+ transition: all 0.15s;
1517
+ }
1518
+
1519
+ .neiki-floating-btn:hover {
1520
+ background: var(--neiki-bg-hover);
1521
+ color: var(--neiki-accent-color);
1522
+ }
1523
+
1524
+ .neiki-floating-btn:active {
1525
+ background: var(--neiki-bg-active);
1526
+ }
1527
+
1528
+ .neiki-floating-btn svg {
1529
+ width: 16px;
1530
+ height: 16px;
1531
+ fill: currentColor;
1532
+ }
1533
+
1534
+ .neiki-floating-toolbar .neiki-btn {
1535
+ width: 28px;
1536
+ height: 28px;
1537
+ }
1538
+
1539
+ .neiki-floating-toolbar .neiki-btn svg {
1540
+ width: 14px;
1541
+ height: 14px;
1542
+ }
1543
+
1544
+ .neiki-floating-divider {
1545
+ width: 1px;
1546
+ height: 20px;
1547
+ background: var(--neiki-border-color);
1548
+ margin: 0 2px;
1549
+ }
1550
+
1551
+ .neiki-floating-move-btn svg {
1552
+ width: 16px;
1553
+ height: 16px;
1554
+ }
1555
+
1556
+ /* ============================================
1557
+ Tooltips
1558
+ ============================================ */
1559
+ [data-tooltip] {
1560
+ position: relative;
1561
+ }
1562
+
1563
+ [data-tooltip]::after {
1564
+ content: attr(data-tooltip);
1565
+ position: absolute;
1566
+ bottom: 100%;
1567
+ left: 50%;
1568
+ transform: translateX(-50%);
1569
+ padding: 6px 10px;
1570
+ background: var(--neiki-text-primary);
1571
+ color: var(--neiki-bg-primary);
1572
+ font-size: 11px;
1573
+ font-weight: 500;
1574
+ white-space: nowrap;
1575
+ border-radius: 4px;
1576
+ opacity: 0;
1577
+ visibility: hidden;
1578
+ transition: opacity 0.15s, visibility 0.15s;
1579
+ pointer-events: none;
1580
+ z-index: 10002;
1581
+ margin-bottom: 6px;
1582
+ }
1583
+
1584
+ [data-tooltip]:hover::after {
1585
+ opacity: 1;
1586
+ visibility: visible;
1587
+ }
1588
+
1589
+ /* ============================================
1590
+ Drag & Drop Overlay
1591
+ ============================================ */
1592
+ .neiki-drop-overlay {
1593
+ position: absolute;
1594
+ top: 0;
1595
+ left: 0;
1596
+ right: 0;
1597
+ bottom: 0;
1598
+ background: rgba(13, 110, 253, 0.1);
1599
+ border: 3px dashed var(--neiki-accent-color);
1600
+ border-radius: 8px;
1601
+ display: none;
1602
+ align-items: center;
1603
+ justify-content: center;
1604
+ z-index: 100;
1605
+ pointer-events: none;
1606
+ }
1607
+
1608
+ .neiki-drop-overlay.show {
1609
+ display: flex;
1610
+ }
1611
+
1612
+ .neiki-drop-overlay-text {
1613
+ font-size: 18px;
1614
+ font-weight: 600;
1615
+ color: var(--neiki-accent-color);
1616
+ }
1617
+
1618
+ /* ============================================
1619
+ Image Resize Handles
1620
+ ============================================ */
1621
+ .neiki-img-resizable {
1622
+ display: inline-block;
1623
+ position: relative;
1624
+ outline: 2px solid var(--neiki-accent-color);
1625
+ outline-offset: 2px;
1626
+ border-radius: 4px;
1627
+ line-height: 0;
1628
+ }
1629
+
1630
+ .neiki-img-resizable img {
1631
+ display: block;
1632
+ max-width: 100%;
1633
+ }
1634
+
1635
+ .neiki-img-resize-handle {
1636
+ position: absolute;
1637
+ width: 12px;
1638
+ height: 12px;
1639
+ background: var(--neiki-accent-color);
1640
+ border: 2px solid #fff;
1641
+ border-radius: 2px;
1642
+ z-index: 10;
1643
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
1644
+ }
1645
+
1646
+ .neiki-img-resize-handle.nw { top: -6px; left: -6px; cursor: nw-resize; }
1647
+ .neiki-img-resize-handle.ne { top: -6px; right: -6px; cursor: ne-resize; }
1648
+ .neiki-img-resize-handle.sw { bottom: -6px; left: -6px; cursor: sw-resize; }
1649
+ .neiki-img-resize-handle.se { bottom: -6px; right: -6px; cursor: se-resize; }
1650
+
1651
+ .neiki-img-size-label {
1652
+ position: absolute;
1653
+ bottom: -32px;
1654
+ left: 50%;
1655
+ transform: translateX(-50%);
1656
+ background: var(--neiki-text-primary);
1657
+ color: var(--neiki-bg-primary);
1658
+ font-size: 13px;
1659
+ line-height: 1.4;
1660
+ font-weight: 600;
1661
+ padding: 4px 12px;
1662
+ border-radius: 6px;
1663
+ white-space: nowrap;
1664
+ pointer-events: none;
1665
+ z-index: 10;
1666
+ opacity: 0.9;
1667
+ }
1668
+
1669
+ /* Touch-friendly resize handles */
1670
+ @media (pointer: coarse) {
1671
+ .neiki-img-resize-handle {
1672
+ width: 20px;
1673
+ height: 20px;
1674
+ }
1675
+ .neiki-img-resize-handle.nw { top: -10px; left: -10px; }
1676
+ .neiki-img-resize-handle.ne { top: -10px; right: -10px; }
1677
+ .neiki-img-resize-handle.sw { bottom: -10px; left: -10px; }
1678
+ .neiki-img-resize-handle.se { bottom: -10px; right: -10px; }
1679
+ }
1680
+
1681
+ /* ============================================
1682
+ Table Column Resize Handle
1683
+ ============================================ */
1684
+ .neiki-table-col-resize-handle {
1685
+ position: absolute;
1686
+ width: 6px;
1687
+ cursor: col-resize;
1688
+ z-index: 10;
1689
+ background: transparent;
1690
+ transition: background 0.1s;
1691
+ }
1692
+
1693
+ .neiki-table-col-resize-handle:hover,
1694
+ .neiki-table-col-resize-handle:active {
1695
+ background: var(--neiki-accent-color);
1696
+ opacity: 0.6;
1697
+ border-radius: 3px;
1698
+ }
1699
+
1700
+ /* ============================================
1701
+ Block Drag & Drop
1702
+ ============================================ */
1703
+ .neiki-block-grip {
1704
+ position: absolute;
1705
+ width: 22px;
1706
+ height: 22px;
1707
+ display: flex;
1708
+ align-items: center;
1709
+ justify-content: center;
1710
+ cursor: grab;
1711
+ color: var(--neiki-text-muted);
1712
+ opacity: 0;
1713
+ transition: opacity 0.15s, color 0.15s;
1714
+ border-radius: 4px;
1715
+ z-index: 5;
1716
+ user-select: none;
1717
+ }
1718
+
1719
+ .neiki-content:hover .neiki-block-grip {
1720
+ opacity: 0.5;
1721
+ }
1722
+
1723
+ .neiki-block-grip:hover {
1724
+ opacity: 1 !important;
1725
+ color: var(--neiki-text-primary);
1726
+ background: var(--neiki-bg-hover);
1727
+ }
1728
+
1729
+ .neiki-block-grip:active {
1730
+ cursor: grabbing;
1731
+ }
1732
+
1733
+ .neiki-block-grip svg {
1734
+ width: 14px;
1735
+ height: 14px;
1736
+ fill: currentColor;
1737
+ pointer-events: none;
1738
+ }
1739
+
1740
+ .neiki-block-ghost {
1741
+ position: fixed;
1742
+ z-index: 100000;
1743
+ pointer-events: none;
1744
+ opacity: 0.7;
1745
+ background: var(--neiki-bg-primary);
1746
+ border: 2px solid var(--neiki-accent-color);
1747
+ border-radius: 6px;
1748
+ padding: 8px 12px;
1749
+ box-shadow: var(--neiki-shadow-lg);
1750
+ max-height: 120px;
1751
+ overflow: hidden;
1752
+ }
1753
+
1754
+ .neiki-block-placeholder {
1755
+ border: 2px dashed var(--neiki-accent-color);
1756
+ border-radius: 6px;
1757
+ background: rgba(13, 110, 253, 0.05);
1758
+ margin: 2px 0;
1759
+ transition: height 0.15s ease;
1760
+ }
1761
+
1762
+ /* ============================================
1763
+ Print Styles
1764
+ ============================================ */
1765
+ @media print {
1766
+ .neiki-editor {
1767
+ border: none !important;
1768
+ box-shadow: none !important;
1769
+ }
1770
+
1771
+ .neiki-toolbar,
1772
+ .neiki-statusbar,
1773
+ .neiki-floating-toolbar,
1774
+ .neiki-find-replace,
1775
+ .neiki-code-view-header,
1776
+ .neiki-block-grip,
1777
+ .neiki-img-resize-handle,
1778
+ .neiki-img-size-label,
1779
+ .neiki-table-col-resize-handle {
1780
+ display: none !important;
1781
+ }
1782
+
1783
+ .neiki-content {
1784
+ padding: 0 !important;
1785
+ overflow: visible !important;
1786
+ }
1787
+
1788
+ .neiki-editor-wrapper {
1789
+ overflow: visible !important;
1790
+ }
1791
+ }
1792
+
1793
+ /* ============================================
1794
+ Responsive Adjustments
1795
+ ============================================ */
1796
+ @media (max-width: 768px) {
1797
+ .neiki-toolbar {
1798
+ padding: 4px;
1799
+ gap: 1px;
1800
+ }
1801
+
1802
+ .neiki-toolbar-group {
1803
+ padding: 0 2px;
1804
+ }
1805
+
1806
+ .neiki-toolbar-group:not(:last-child) {
1807
+ padding-right: 4px;
1808
+ margin-right: 2px;
1809
+ }
1810
+
1811
+ .neiki-btn {
1812
+ width: 28px;
1813
+ height: 28px;
1814
+ }
1815
+
1816
+ .neiki-btn svg {
1817
+ width: 16px;
1818
+ height: 16px;
1819
+ }
1820
+
1821
+ .neiki-select {
1822
+ height: 28px;
1823
+ min-width: 80px;
1824
+ font-size: 12px;
1825
+ padding: 0 24px 0 8px;
1826
+ }
1827
+
1828
+ .neiki-content {
1829
+ padding: 12px 16px;
1830
+ }
1831
+
1832
+ .neiki-statusbar {
1833
+ padding: 4px 8px;
1834
+ font-size: 11px;
1835
+ }
1836
+
1837
+ .neiki-modal {
1838
+ width: 95%;
1839
+ max-width: none;
1840
+ margin: 10px;
1841
+ }
1842
+
1843
+ .neiki-find-replace {
1844
+ width: 100%;
1845
+ border-radius: 0;
1846
+ }
1847
+
1848
+ .neiki-checkbox-wrapper {
1849
+ padding: 0 4px;
1850
+ font-size: 11px;
1851
+ }
1852
+
1853
+ .neiki-color-picker {
1854
+ left: auto;
1855
+ right: 0;
1856
+ }
1857
+ }
1858
+
1859
+ @media (max-width: 480px) {
1860
+ .neiki-toolbar-group:not(:last-child) {
1861
+ border-right: none;
1862
+ padding-right: 2px;
1863
+ margin-right: 0;
1864
+ }
1865
+
1866
+ .neiki-select {
1867
+ min-width: 60px;
1868
+ }
1869
+
1870
+ .neiki-statusbar-left,
1871
+ .neiki-statusbar-right {
1872
+ gap: 8px;
1873
+ }
1874
+ }
1875
+
1876
+ /* ============================================
1877
+ Animations
1878
+ ============================================ */
1879
+ @keyframes neiki-fade-in {
1880
+ from {
1881
+ opacity: 0;
1882
+ transform: translateY(-10px);
1883
+ }
1884
+ to {
1885
+ opacity: 1;
1886
+ transform: translateY(0);
1887
+ }
1888
+ }
1889
+
1890
+ .neiki-dropdown.show,
1891
+ .neiki-color-picker.show,
1892
+ .neiki-table-picker.show,
1893
+ .neiki-emoji-picker.show,
1894
+ .neiki-special-chars.show {
1895
+ animation: neiki-fade-in 0.15s ease;
1896
+ }
1897
+
1898
+ @keyframes neiki-modal-in {
1899
+ from {
1900
+ opacity: 0;
1901
+ transform: scale(0.95);
1902
+ }
1903
+ to {
1904
+ opacity: 1;
1905
+ transform: scale(1);
1906
+ }
1907
+ }
1908
+
1909
+ .neiki-modal-overlay.show .neiki-modal {
1910
+ animation: neiki-modal-in 0.2s ease;
1911
+ }
1912
+
1913
+ /* ============================================
1914
+ Font Size Widget
1915
+ ============================================ */
1916
+ .neiki-fontsize-widget {
1917
+ display: inline-flex;
1918
+ align-items: center;
1919
+ position: relative;
1920
+ height: 32px;
1921
+ border: 1px solid var(--neiki-border-color);
1922
+ border-radius: 4px;
1923
+ overflow: visible;
1924
+ background: var(--neiki-bg-primary);
1925
+ }
1926
+
1927
+ .neiki-fontsize-btn {
1928
+ display: flex;
1929
+ align-items: center;
1930
+ justify-content: center;
1931
+ width: 26px;
1932
+ height: 30px;
1933
+ background: transparent;
1934
+ border: none;
1935
+ cursor: pointer;
1936
+ color: var(--neiki-text-secondary);
1937
+ transition: background 0.15s, color 0.15s;
1938
+ padding: 0;
1939
+ }
1940
+
1941
+ .neiki-fontsize-btn:hover {
1942
+ background: var(--neiki-bg-hover);
1943
+ color: var(--neiki-text-primary);
1944
+ }
1945
+
1946
+ .neiki-fontsize-input {
1947
+ width: 38px;
1948
+ height: 30px;
1949
+ text-align: center;
1950
+ border: none;
1951
+ border-left: 1px solid var(--neiki-border-color);
1952
+ border-right: 1px solid var(--neiki-border-color);
1953
+ background: var(--neiki-bg-primary);
1954
+ color: var(--neiki-text-primary);
1955
+ font-size: 13px;
1956
+ outline: none;
1957
+ -moz-appearance: textfield;
1958
+ appearance: textfield;
1959
+ padding: 0;
1960
+ }
1961
+
1962
+ .neiki-fontsize-input::-webkit-outer-spin-button,
1963
+ .neiki-fontsize-input::-webkit-inner-spin-button {
1964
+ -webkit-appearance: none;
1965
+ margin: 0;
1966
+ }
1967
+
1968
+ .neiki-fontsize-dropdown {
1969
+ display: none;
1970
+ position: absolute;
1971
+ top: 100%;
1972
+ left: 0;
1973
+ z-index: 1000;
1974
+ min-width: 70px;
1975
+ max-height: 240px;
1976
+ overflow-y: auto;
1977
+ background: var(--neiki-bg-primary);
1978
+ border: 1px solid var(--neiki-border-color);
1979
+ border-radius: 6px;
1980
+ box-shadow: var(--neiki-shadow-lg);
1981
+ padding: 4px;
1982
+ margin-top: 4px;
1983
+ }
1984
+
1985
+ .neiki-fontsize-dropdown.show {
1986
+ display: block;
1987
+ }
1988
+
1989
+ .neiki-fontsize-dropdown-item {
1990
+ padding: 6px 12px;
1991
+ font-size: 13px;
1992
+ cursor: pointer;
1993
+ border-radius: 4px;
1994
+ color: var(--neiki-text-primary);
1995
+ text-align: center;
1996
+ transition: background 0.1s;
1997
+ }
1998
+
1999
+ .neiki-fontsize-dropdown-item:hover {
2000
+ background: var(--neiki-bg-hover);
2001
+ }
2002
+
2003
+ /* ============================================
2004
+ Insert Dropdown Button
2005
+ ============================================ */
2006
+ .neiki-insert-dropdown-btn {
2007
+ width: auto !important;
2008
+ padding: 0 8px !important;
2009
+ gap: 4px;
2010
+ font-size: 13px;
2011
+ font-weight: 500;
2012
+ }
2013
+
2014
+ .neiki-insert-label {
2015
+ font-size: 13px;
2016
+ pointer-events: none;
2017
+ }
2018
+
2019
+ .neiki-chevron {
2020
+ display: inline-flex;
2021
+ pointer-events: none;
2022
+ }
2023
+
2024
+ .neiki-chevron svg {
2025
+ width: 14px;
2026
+ height: 14px;
2027
+ }
2028
+
2029
+ .neiki-insert-dropdown {
2030
+ display: none;
2031
+ position: absolute;
2032
+ top: 100%;
2033
+ left: 0;
2034
+ z-index: 1000;
2035
+ min-width: 160px;
2036
+ background: var(--neiki-bg-primary);
2037
+ border: 1px solid var(--neiki-border-color);
2038
+ border-radius: 6px;
2039
+ box-shadow: var(--neiki-shadow-lg);
2040
+ padding: 4px;
2041
+ margin-top: 4px;
2042
+ }
2043
+
2044
+ .neiki-insert-dropdown.show {
2045
+ display: block;
2046
+ animation: neiki-fade-in 0.15s ease;
2047
+ }
2048
+
2049
+ /* ============================================
2050
+ More Menu (⋯) Dropdown
2051
+ ============================================ */
2052
+ .neiki-more-btn {
2053
+ position: relative;
2054
+ }
2055
+
2056
+ .neiki-more-dropdown {
2057
+ display: none;
2058
+ position: absolute;
2059
+ top: 100%;
2060
+ right: 0;
2061
+ z-index: 1000;
2062
+ min-width: 140px;
2063
+ max-width: 170px;
2064
+ background: var(--neiki-bg-primary);
2065
+ border: 1px solid var(--neiki-border-color);
2066
+ border-radius: 6px;
2067
+ box-shadow: var(--neiki-shadow-lg);
2068
+ padding: 4px;
2069
+ margin-top: 4px;
2070
+ }
2071
+
2072
+ .neiki-more-dropdown.show {
2073
+ display: block;
2074
+ animation: neiki-fade-in 0.15s ease;
2075
+ }
2076
+
2077
+ /* Czech language - wider dropdown for longer labels */
2078
+ .neiki-lang-cs .neiki-more-dropdown {
2079
+ min-width: 165px;
2080
+ }
2081
+
2082
+ /* Dropdown item with icon */
2083
+ .neiki-dropdown-item-icon {
2084
+ display: inline-flex;
2085
+ align-items: center;
2086
+ justify-content: center;
2087
+ width: 18px;
2088
+ height: 18px;
2089
+ flex-shrink: 0;
2090
+ }
2091
+
2092
+ .neiki-dropdown-item-icon svg {
2093
+ width: 16px;
2094
+ height: 16px;
2095
+ fill: currentColor;
2096
+ }
2097
+
2098
+ .neiki-dropdown-item-danger {
2099
+ color: var(--neiki-danger-color) !important;
2100
+ }
2101
+
2102
+ .neiki-dropdown-item-danger:hover {
2103
+ background: rgba(220, 53, 69, 0.1);
2104
+ }
2105
+
2106
+ /* Autosave badge in More menu */
2107
+ .neiki-autosave-badge {
2108
+ font-size: 12px;
2109
+ font-weight: 600;
2110
+ color: var(--neiki-text-muted);
2111
+ padding: 0 4px;
2112
+ }
2113
+
2114
+ .neiki-autosave-badge.active {
2115
+ color: var(--neiki-success-color);
2116
+ }
2117
+
2118
+ /* ============================================
2119
+ Preview Modal
2120
+ ============================================ */
2121
+ .neiki-preview-overlay {
2122
+ position: fixed;
2123
+ inset: 0;
2124
+ background: rgba(0, 0, 0, 0.6);
2125
+ z-index: 100000;
2126
+ display: flex;
2127
+ align-items: center;
2128
+ justify-content: center;
2129
+ padding: 30px;
2130
+ animation: neiki-fade-in 0.2s ease;
2131
+ }
2132
+
2133
+ .neiki-preview-modal {
2134
+ background: var(--neiki-bg-primary);
2135
+ border-radius: 12px;
2136
+ width: 100%;
2137
+ max-width: 900px;
2138
+ max-height: 90vh;
2139
+ display: flex;
2140
+ flex-direction: column;
2141
+ overflow: hidden;
2142
+ box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
2143
+ animation: neiki-modal-in 0.2s ease;
2144
+ }
2145
+
2146
+ .neiki-preview-header {
2147
+ display: flex;
2148
+ align-items: center;
2149
+ justify-content: space-between;
2150
+ padding: 14px 20px;
2151
+ background: var(--neiki-bg-secondary);
2152
+ border-bottom: 1px solid var(--neiki-border-color);
2153
+ font-weight: 600;
2154
+ font-size: 14px;
2155
+ color: var(--neiki-text-primary);
2156
+ }
2157
+
2158
+ .neiki-preview-close {
2159
+ width: 32px;
2160
+ height: 32px;
2161
+ display: flex;
2162
+ align-items: center;
2163
+ justify-content: center;
2164
+ background: transparent;
2165
+ border: none;
2166
+ border-radius: 4px;
2167
+ cursor: pointer;
2168
+ color: var(--neiki-text-muted);
2169
+ transition: background 0.15s;
2170
+ }
2171
+
2172
+ .neiki-preview-close:hover {
2173
+ background: var(--neiki-bg-hover);
2174
+ color: var(--neiki-text-primary);
2175
+ }
2176
+
2177
+ .neiki-preview-close svg {
2178
+ width: 18px;
2179
+ height: 18px;
2180
+ fill: currentColor;
2181
+ }
2182
+
2183
+ .neiki-preview-body {
2184
+ flex: 1;
2185
+ overflow: auto;
2186
+ padding: 30px;
2187
+ color: var(--neiki-text-primary);
2188
+ font-size: 15px;
2189
+ line-height: 1.7;
2190
+ }
2191
+
2192
+ .neiki-preview-body img {
2193
+ max-width: 100%;
2194
+ }
2195
+
2196
+ .neiki-preview-body table {
2197
+ border-collapse: collapse;
2198
+ width: 100%;
2199
+ }
2200
+
2201
+ .neiki-preview-body table td,
2202
+ .neiki-preview-body table th {
2203
+ border: 1px solid var(--neiki-border-color);
2204
+ padding: 8px 12px;
2205
+ }
2206
+
2207
+ /* Autosave status in statusbar */
2208
+ .neiki-statusbar-autosave {
2209
+ font-style: italic;
2210
+ color: var(--neiki-success-color);
2211
+ font-size: 11px;
2212
+ }