@mdaemon/html-editor 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,692 @@
1
+ /**
2
+ * MDHTMLEditor Styles
3
+ * TinyMCE oxide-compatible theme
4
+ */
5
+ .md-editor {
6
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
7
+ font-size: 14px;
8
+ border: 1px solid #ccc;
9
+ border-radius: 3px;
10
+ display: flex;
11
+ flex-direction: column;
12
+ background: #fff;
13
+ position: relative;
14
+ }
15
+ .md-editor.md-editor-fullscreen {
16
+ position: fixed;
17
+ top: 0;
18
+ left: 0;
19
+ right: 0;
20
+ bottom: 0;
21
+ z-index: 9999;
22
+ border-radius: 0;
23
+ height: 100vh !important;
24
+ }
25
+
26
+ .md-toolbar {
27
+ display: flex;
28
+ flex-wrap: wrap;
29
+ align-items: center;
30
+ padding: 4px;
31
+ background: #f0f0f0;
32
+ border-bottom: 1px solid #ccc;
33
+ gap: 2px;
34
+ min-height: 39px;
35
+ }
36
+ .md-toolbar.md-toolbar-sticky {
37
+ position: sticky;
38
+ top: 0;
39
+ z-index: 10;
40
+ }
41
+ .md-toolbar.md-toolbar-sliding {
42
+ flex-wrap: nowrap;
43
+ overflow-x: auto;
44
+ }
45
+ .md-toolbar.md-toolbar-sliding::-webkit-scrollbar {
46
+ height: 6px;
47
+ }
48
+ .md-toolbar.md-toolbar-sliding::-webkit-scrollbar-thumb {
49
+ background: #ccc;
50
+ border-radius: 3px;
51
+ }
52
+
53
+ .md-toolbar-group {
54
+ display: flex;
55
+ align-items: center;
56
+ gap: 2px;
57
+ }
58
+
59
+ .md-toolbar-separator {
60
+ width: 1px;
61
+ height: 24px;
62
+ background: #ccc;
63
+ margin: 0 4px;
64
+ }
65
+
66
+ .md-toolbar-btn {
67
+ display: flex;
68
+ align-items: center;
69
+ justify-content: center;
70
+ width: 34px;
71
+ height: 34px;
72
+ padding: 0;
73
+ border: none;
74
+ border-radius: 3px;
75
+ background: transparent;
76
+ cursor: pointer;
77
+ color: #222;
78
+ font-size: 14px;
79
+ transition: background-color 0.1s, color 0.1s;
80
+ }
81
+ .md-toolbar-btn:hover {
82
+ background: #e0e0e0;
83
+ }
84
+ .md-toolbar-btn:active {
85
+ background: #d0d0d0;
86
+ }
87
+ .md-toolbar-btn.md-toolbar-btn-active {
88
+ background: #207ab7;
89
+ color: #fff;
90
+ }
91
+ .md-toolbar-btn:disabled {
92
+ opacity: 0.5;
93
+ cursor: not-allowed;
94
+ }
95
+
96
+ .md-toolbar-btn-icon {
97
+ font-family: inherit;
98
+ font-style: normal;
99
+ font-weight: bold;
100
+ }
101
+ .md-toolbar-btn-icon.md-icon-bold {
102
+ font-weight: bold;
103
+ }
104
+ .md-toolbar-btn-icon.md-icon-italic {
105
+ font-style: italic;
106
+ }
107
+ .md-toolbar-btn-icon.md-icon-underline {
108
+ text-decoration: underline;
109
+ }
110
+ .md-toolbar-btn-icon.md-icon-strikethrough {
111
+ text-decoration: line-through;
112
+ }
113
+
114
+ .md-toolbar-btn-icon-img {
115
+ width: 16px;
116
+ height: 16px;
117
+ }
118
+
119
+ .md-toolbar-dropdown {
120
+ position: relative;
121
+ }
122
+
123
+ .md-toolbar-dropdown-btn {
124
+ display: flex;
125
+ align-items: center;
126
+ gap: 4px;
127
+ height: 34px;
128
+ padding: 0 8px;
129
+ border: none;
130
+ border-radius: 3px;
131
+ background: transparent;
132
+ cursor: pointer;
133
+ font-size: 12px;
134
+ color: #222;
135
+ white-space: nowrap;
136
+ }
137
+ .md-toolbar-dropdown-btn:hover {
138
+ background: #e0e0e0;
139
+ }
140
+
141
+ .md-toolbar-dropdown-arrow {
142
+ font-size: 8px;
143
+ opacity: 0.6;
144
+ }
145
+
146
+ .md-toolbar-dropdown-menu {
147
+ position: absolute;
148
+ top: 100%;
149
+ left: 0;
150
+ min-width: 150px;
151
+ max-height: 300px;
152
+ overflow-y: auto;
153
+ background: #fff;
154
+ border: 1px solid #ccc;
155
+ border-radius: 3px;
156
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
157
+ z-index: 100;
158
+ }
159
+
160
+ .md-toolbar-dropdown-item {
161
+ display: block;
162
+ width: 100%;
163
+ padding: 8px 12px;
164
+ border: none;
165
+ background: transparent;
166
+ text-align: left;
167
+ cursor: pointer;
168
+ font-size: 13px;
169
+ color: #222;
170
+ }
171
+ .md-toolbar-dropdown-item:hover {
172
+ background: #f0f0f0;
173
+ }
174
+ .md-toolbar-dropdown-item.md-toolbar-dropdown-item-selected {
175
+ background: #207ab7;
176
+ color: #fff;
177
+ }
178
+
179
+ .md-toolbar-dropdown-item-desc {
180
+ display: block;
181
+ font-size: 11px;
182
+ color: #666;
183
+ margin-top: 2px;
184
+ }
185
+
186
+ .md-toolbar-colorpicker {
187
+ position: relative;
188
+ }
189
+
190
+ .md-toolbar-colorpicker-btn {
191
+ display: flex;
192
+ align-items: center;
193
+ flex-direction: column;
194
+ justify-content: center;
195
+ padding: 4px 8px;
196
+ }
197
+
198
+ .md-toolbar-colorpicker-icon {
199
+ font-weight: bold;
200
+ font-size: 14px;
201
+ line-height: 1;
202
+ }
203
+
204
+ .md-toolbar-colorpicker-preview {
205
+ width: 16px;
206
+ height: 3px;
207
+ margin-top: 2px;
208
+ border-radius: 1px;
209
+ }
210
+
211
+ .md-toolbar-colorpicker-menu {
212
+ position: absolute;
213
+ top: 100%;
214
+ left: 0;
215
+ padding: 8px;
216
+ background: #fff;
217
+ border: 1px solid #ccc;
218
+ border-radius: 3px;
219
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
220
+ z-index: 100;
221
+ }
222
+
223
+ .md-toolbar-colorpicker-grid {
224
+ display: grid;
225
+ grid-template-columns: repeat(10, 1fr);
226
+ gap: 2px;
227
+ margin-bottom: 8px;
228
+ }
229
+
230
+ .md-toolbar-colorpicker-swatch {
231
+ width: 20px;
232
+ height: 20px;
233
+ border: 1px solid #ccc;
234
+ border-radius: 2px;
235
+ cursor: pointer;
236
+ padding: 0;
237
+ }
238
+ .md-toolbar-colorpicker-swatch:hover {
239
+ transform: scale(1.1);
240
+ box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
241
+ }
242
+
243
+ .md-toolbar-colorpicker-custom {
244
+ display: flex;
245
+ align-items: center;
246
+ gap: 8px;
247
+ padding-top: 8px;
248
+ border-top: 1px solid #ccc;
249
+ }
250
+
251
+ .md-toolbar-colorpicker-input {
252
+ width: 40px;
253
+ height: 30px;
254
+ padding: 0;
255
+ border: 1px solid #ccc;
256
+ border-radius: 3px;
257
+ cursor: pointer;
258
+ }
259
+
260
+ .md-toolbar-colorpicker-apply {
261
+ padding: 4px 12px;
262
+ border: none;
263
+ border-radius: 3px;
264
+ background: #207ab7;
265
+ color: #fff;
266
+ cursor: pointer;
267
+ font-size: 12px;
268
+ }
269
+ .md-toolbar-colorpicker-apply:hover {
270
+ background: #1a6399;
271
+ }
272
+
273
+ .md-editor-content {
274
+ flex: 1;
275
+ overflow: auto;
276
+ background: #fff;
277
+ }
278
+
279
+ .md-editor-body {
280
+ padding: 16px;
281
+ min-height: 200px;
282
+ outline: none;
283
+ }
284
+ .md-editor-body p {
285
+ margin: 0 0 1em;
286
+ }
287
+ .md-editor-body h1, .md-editor-body h2, .md-editor-body h3, .md-editor-body h4, .md-editor-body h5, .md-editor-body h6 {
288
+ margin: 0 0 0.5em;
289
+ font-weight: bold;
290
+ }
291
+ .md-editor-body ul, .md-editor-body ol {
292
+ margin: 0 0 1em;
293
+ padding-left: 2em;
294
+ }
295
+ .md-editor-body blockquote {
296
+ margin: 0 0 1em;
297
+ padding-left: 1em;
298
+ border-left: 3px solid #ccc;
299
+ color: #666;
300
+ }
301
+ .md-editor-body pre {
302
+ background: #f5f5f5;
303
+ padding: 12px;
304
+ border-radius: 3px;
305
+ overflow-x: auto;
306
+ font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
307
+ font-size: 13px;
308
+ }
309
+ .md-editor-body code {
310
+ background: #f0f0f0;
311
+ padding: 2px 4px;
312
+ border-radius: 2px;
313
+ font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
314
+ font-size: 13px;
315
+ }
316
+ .md-editor-body a {
317
+ color: #207ab7;
318
+ text-decoration: underline;
319
+ }
320
+ .md-editor-body img {
321
+ max-width: 100%;
322
+ height: auto;
323
+ }
324
+ .md-editor-body table {
325
+ border-collapse: collapse;
326
+ width: 100%;
327
+ margin: 1em 0;
328
+ }
329
+ .md-editor-body table td, .md-editor-body table th {
330
+ border: 1px solid #ccc;
331
+ padding: 8px;
332
+ text-align: left;
333
+ }
334
+ .md-editor-body table th {
335
+ background: #f5f5f5;
336
+ font-weight: bold;
337
+ }
338
+
339
+ .md-dialog-overlay {
340
+ position: fixed;
341
+ top: 0;
342
+ left: 0;
343
+ right: 0;
344
+ bottom: 0;
345
+ background: rgba(0, 0, 0, 0.5);
346
+ display: flex;
347
+ align-items: center;
348
+ justify-content: center;
349
+ z-index: 10000;
350
+ }
351
+ .md-dialog-overlay.md-dialog-overlay-transparent {
352
+ background: transparent;
353
+ pointer-events: none;
354
+ }
355
+ .md-dialog-overlay.md-dialog-overlay-transparent .md-dialog {
356
+ pointer-events: all;
357
+ }
358
+
359
+ .md-dialog {
360
+ background: #fff;
361
+ border-radius: 3px;
362
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
363
+ max-width: 90vw;
364
+ max-height: 90vh;
365
+ overflow: hidden;
366
+ display: flex;
367
+ flex-direction: column;
368
+ }
369
+
370
+ .md-dialog-header {
371
+ display: flex;
372
+ align-items: center;
373
+ justify-content: space-between;
374
+ padding: 12px 16px;
375
+ background: #f5f5f5;
376
+ border-bottom: 1px solid #ccc;
377
+ }
378
+ .md-dialog-header h3 {
379
+ margin: 0;
380
+ font-size: 16px;
381
+ font-weight: 600;
382
+ }
383
+
384
+ .md-dialog-close {
385
+ width: 28px;
386
+ height: 28px;
387
+ border: none;
388
+ background: transparent;
389
+ cursor: pointer;
390
+ font-size: 20px;
391
+ color: #666;
392
+ border-radius: 50%;
393
+ display: flex;
394
+ align-items: center;
395
+ justify-content: center;
396
+ }
397
+ .md-dialog-close:hover {
398
+ background: #e0e0e0;
399
+ }
400
+
401
+ .md-dialog-body {
402
+ padding: 16px;
403
+ overflow: auto;
404
+ }
405
+
406
+ .md-charmap-dialog {
407
+ width: 450px;
408
+ }
409
+
410
+ .md-charmap-tabs {
411
+ display: flex;
412
+ gap: 4px;
413
+ margin-bottom: 12px;
414
+ flex-wrap: wrap;
415
+ }
416
+
417
+ .md-charmap-tab {
418
+ padding: 6px 12px;
419
+ border: 1px solid #ccc;
420
+ border-radius: 3px;
421
+ background: transparent;
422
+ cursor: pointer;
423
+ font-size: 12px;
424
+ }
425
+ .md-charmap-tab:hover {
426
+ background: #f0f0f0;
427
+ }
428
+ .md-charmap-tab.md-charmap-tab-active {
429
+ background: #207ab7;
430
+ color: #fff;
431
+ border-color: #207ab7;
432
+ }
433
+
434
+ .md-charmap-grid {
435
+ display: grid;
436
+ grid-template-columns: repeat(10, 1fr);
437
+ gap: 4px;
438
+ }
439
+
440
+ .md-charmap-char {
441
+ width: 32px;
442
+ height: 32px;
443
+ display: flex;
444
+ align-items: center;
445
+ justify-content: center;
446
+ border: 1px solid #ccc;
447
+ border-radius: 3px;
448
+ background: transparent;
449
+ cursor: pointer;
450
+ font-size: 18px;
451
+ }
452
+ .md-charmap-char:hover {
453
+ background: #f0f0f0;
454
+ border-color: #207ab7;
455
+ }
456
+
457
+ .md-charmap-preview {
458
+ display: flex;
459
+ align-items: center;
460
+ gap: 12px;
461
+ margin-top: 12px;
462
+ padding-top: 12px;
463
+ border-top: 1px solid #ccc;
464
+ min-height: 40px;
465
+ }
466
+
467
+ .md-charmap-preview-char {
468
+ font-size: 32px;
469
+ width: 40px;
470
+ text-align: center;
471
+ }
472
+
473
+ .md-charmap-preview-name {
474
+ color: #666;
475
+ font-size: 13px;
476
+ }
477
+
478
+ .md-emoji-dialog {
479
+ width: 400px;
480
+ }
481
+
482
+ .md-emoji-tabs {
483
+ display: flex;
484
+ gap: 4px;
485
+ margin-bottom: 8px;
486
+ }
487
+
488
+ .md-emoji-tab {
489
+ width: 32px;
490
+ height: 32px;
491
+ display: flex;
492
+ align-items: center;
493
+ justify-content: center;
494
+ border: 1px solid transparent;
495
+ border-radius: 3px;
496
+ background: transparent;
497
+ cursor: pointer;
498
+ font-size: 18px;
499
+ }
500
+ .md-emoji-tab:hover {
501
+ background: #f0f0f0;
502
+ }
503
+ .md-emoji-tab.md-emoji-tab-active {
504
+ border-color: #207ab7;
505
+ background: rgba(32, 122, 183, 0.1);
506
+ }
507
+
508
+ .md-emoji-search {
509
+ margin-bottom: 12px;
510
+ }
511
+
512
+ .md-emoji-search-input {
513
+ width: 100%;
514
+ padding: 8px 12px;
515
+ border: 1px solid #ccc;
516
+ border-radius: 3px;
517
+ font-size: 14px;
518
+ }
519
+ .md-emoji-search-input:focus {
520
+ outline: none;
521
+ border-color: #207ab7;
522
+ }
523
+
524
+ .md-emoji-grid {
525
+ display: grid;
526
+ grid-template-columns: repeat(10, 1fr);
527
+ gap: 2px;
528
+ max-height: 250px;
529
+ overflow-y: auto;
530
+ }
531
+
532
+ .md-emoji-btn {
533
+ width: 32px;
534
+ height: 32px;
535
+ display: flex;
536
+ align-items: center;
537
+ justify-content: center;
538
+ border: none;
539
+ border-radius: 3px;
540
+ background: transparent;
541
+ cursor: pointer;
542
+ font-size: 20px;
543
+ }
544
+ .md-emoji-btn:hover {
545
+ background: #f0f0f0;
546
+ }
547
+
548
+ .md-searchreplace-dialog {
549
+ width: 400px;
550
+ position: absolute;
551
+ top: 60px;
552
+ right: 20px;
553
+ }
554
+
555
+ .md-searchreplace-row {
556
+ display: flex;
557
+ align-items: center;
558
+ gap: 8px;
559
+ margin-bottom: 12px;
560
+ }
561
+ .md-searchreplace-row label {
562
+ width: 60px;
563
+ font-size: 13px;
564
+ color: #666;
565
+ }
566
+
567
+ .md-searchreplace-input {
568
+ flex: 1;
569
+ padding: 8px 12px;
570
+ border: 1px solid #ccc;
571
+ border-radius: 3px;
572
+ font-size: 14px;
573
+ }
574
+ .md-searchreplace-input:focus {
575
+ outline: none;
576
+ border-color: #207ab7;
577
+ }
578
+
579
+ .md-searchreplace-count {
580
+ font-size: 12px;
581
+ color: #666;
582
+ min-width: 60px;
583
+ }
584
+
585
+ .md-searchreplace-options {
586
+ display: flex;
587
+ gap: 16px;
588
+ margin-bottom: 12px;
589
+ }
590
+
591
+ .md-searchreplace-option {
592
+ display: flex;
593
+ align-items: center;
594
+ gap: 4px;
595
+ font-size: 13px;
596
+ cursor: pointer;
597
+ }
598
+ .md-searchreplace-option input {
599
+ cursor: pointer;
600
+ }
601
+
602
+ .md-searchreplace-buttons {
603
+ display: flex;
604
+ gap: 8px;
605
+ justify-content: flex-end;
606
+ }
607
+
608
+ .md-btn {
609
+ padding: 6px 12px;
610
+ border: 1px solid #ccc;
611
+ border-radius: 3px;
612
+ background: #fff;
613
+ cursor: pointer;
614
+ font-size: 13px;
615
+ }
616
+ .md-btn:hover {
617
+ background: #f0f0f0;
618
+ }
619
+ .md-btn.md-btn-primary {
620
+ background: #207ab7;
621
+ border-color: #207ab7;
622
+ color: #fff;
623
+ }
624
+ .md-btn.md-btn-primary:hover {
625
+ background: #1a6399;
626
+ }
627
+
628
+ .md-editor-oxide-dark {
629
+ background: #222f3e;
630
+ border-color: #364049;
631
+ }
632
+ .md-editor-oxide-dark .md-toolbar {
633
+ background: #1a252f;
634
+ border-color: #364049;
635
+ }
636
+ .md-editor-oxide-dark .md-toolbar-btn {
637
+ color: #fff;
638
+ }
639
+ .md-editor-oxide-dark .md-toolbar-btn:hover {
640
+ background: #2d3e50;
641
+ }
642
+ .md-editor-oxide-dark .md-toolbar-btn.md-toolbar-btn-active {
643
+ background: #207ab7;
644
+ }
645
+ .md-editor-oxide-dark .md-toolbar-dropdown-btn {
646
+ color: #fff;
647
+ }
648
+ .md-editor-oxide-dark .md-toolbar-dropdown-btn:hover {
649
+ background: #2d3e50;
650
+ }
651
+ .md-editor-oxide-dark .md-toolbar-dropdown-menu {
652
+ background: #222f3e;
653
+ border-color: #364049;
654
+ }
655
+ .md-editor-oxide-dark .md-toolbar-dropdown-item {
656
+ color: #fff;
657
+ }
658
+ .md-editor-oxide-dark .md-toolbar-dropdown-item:hover {
659
+ background: #2d3e50;
660
+ }
661
+ .md-editor-oxide-dark .md-toolbar-colorpicker-menu {
662
+ background: #222f3e;
663
+ border-color: #364049;
664
+ }
665
+ .md-editor-oxide-dark .md-toolbar-colorpicker-custom {
666
+ border-color: #364049;
667
+ }
668
+ .md-editor-oxide-dark .md-toolbar-separator {
669
+ background: #364049;
670
+ }
671
+ .md-editor-oxide-dark .md-editor-content {
672
+ background: #222f3e;
673
+ }
674
+ .md-editor-oxide-dark .md-editor-body {
675
+ color: #fff;
676
+ }
677
+ .md-editor-oxide-dark .md-editor-body blockquote {
678
+ border-color: #364049;
679
+ color: #aaa;
680
+ }
681
+ .md-editor-oxide-dark .md-editor-body pre {
682
+ background: #1a252f;
683
+ }
684
+ .md-editor-oxide-dark .md-editor-body code {
685
+ background: #1a252f;
686
+ }
687
+ .md-editor-oxide-dark .md-editor-body table td, .md-editor-oxide-dark .md-editor-body table th {
688
+ border-color: #364049;
689
+ }
690
+ .md-editor-oxide-dark .md-editor-body table th {
691
+ background: #1a252f;
692
+ }