suneditor 3.0.0-alpha.13 → 3.0.0-alpha.15

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 (35) hide show
  1. package/dist/suneditor.min.css +1 -1
  2. package/dist/suneditor.min.js +1 -1
  3. package/package.json +2 -1
  4. package/src/assets/icons/_default.js +9 -2
  5. package/src/assets/suneditor-contents.css +9 -22
  6. package/src/assets/suneditor.css +317 -183
  7. package/src/assets/variables.css +137 -0
  8. package/src/core/base/eventHandlers/handler_toolbar.js +1 -0
  9. package/src/core/base/eventHandlers/handler_ww_dragDrop.js +9 -2
  10. package/src/core/base/eventHandlers/handler_ww_key_input.js +1 -1
  11. package/src/core/base/eventManager.js +5 -0
  12. package/src/core/class/component.js +12 -8
  13. package/src/core/class/html.js +5 -5
  14. package/src/core/class/offset.js +11 -3
  15. package/src/core/class/selection.js +5 -4
  16. package/src/core/class/toolbar.js +1 -5
  17. package/src/core/class/viewer.js +29 -7
  18. package/src/core/editor.js +61 -1
  19. package/src/core/section/actives.js +5 -0
  20. package/src/core/section/constructor.js +35 -19
  21. package/src/core/section/documentType.js +143 -19
  22. package/src/helper/domUtils.js +5 -4
  23. package/src/langs/en.js +5 -0
  24. package/src/modules/Modal.js +108 -1
  25. package/src/plugins/command/exportPdf.js +1 -1
  26. package/src/plugins/command/list_bulleted.js +1 -1
  27. package/src/plugins/command/list_numbered.js +1 -1
  28. package/src/plugins/index.js +6 -0
  29. package/src/plugins/input/fontSize.js +3 -3
  30. package/src/plugins/input/pageNavigator.js +47 -0
  31. package/src/plugins/modal/drawing.js +426 -0
  32. package/src/plugins/modal/image.js +3 -2
  33. package/src/plugins/modal/math.js +72 -34
  34. package/src/themes/dark-variables.css +85 -0
  35. package/src/themes/test.css +0 -61
@@ -1,93 +1,4 @@
1
- :root {
2
- /** main, common */
3
- --se-min-height: 65px;
4
- --se-main-out-color: #dadada;
5
- --se-main-font-family: Helvetica Neue;
6
- --se-main-color: #000;
7
- --se-main-background-color: #fff;
8
- --se-main-background-color2: #f5f5f5;
9
- --se-main-background-color3: #f9f9f9;
10
- --se-main-font-color: #333;
11
- --se-main-font-size: 13px;
12
- --se-main-divider-color: #e1e1e1;
13
- --se-main-border-color: #d1d1d1;
14
- --se-main-outline-color: #b1b1b1;
15
- --se-main-shadow-color: #ececec;
16
- --se-border-radius: 2px;
17
- --se-btn-font-size: 12px;
18
- --se-statusbar-font-size: 10px;
19
- /* hover, active */
20
- --se-active-color: #3288ff;
21
- --se-active-dark-color: #80bdff;
22
- --se-active-dark2-color: #407dd1;
23
- --se-active-dark3-color: #4592ff;
24
- --se-active-dark4-color: #3f9dff;
25
- --se-active-dark5-color: #1275ff;
26
- --se-active-light-color: #e6f2ff;
27
- --se-active-light2-color: #eaf3ff;
28
- --se-active-light3-color: #d0e3ff;
29
- --se-active-light4-color: #dbeaff;
30
- --se-active-light5-color: #c4ddff;
31
- --se-active-light6-color: #b7ccf2;
32
- /* drag */
33
- --se-drag-over-color: #f0c20a;
34
- /* modal, browser */
35
- --se-modal-title-font-size: 15px;
36
- --se-modal-input-font-size: 14px;
37
- --se-modal-input-width: 70px;
38
- --se-browser-title-font-size: 16px;
39
- /* controller */
40
- --se-controller-font-size: 14px;
41
- /* input:btn */
42
- --se-input-btn-size: 34px;
43
- --se-input-btn-border-color: #ccc;
44
- --se-input-btn-disabled-color: #bdbdbd;
45
- /* btn - success */
46
- --se-success-color: #008000;
47
- --se-success-dark-color: #628562;
48
- --se-success-dark2-color: #419c41;
49
- --se-success-dark3-color: #006c00;
50
- --se-success-light-color: #dff4e6;
51
- --se-success-light2-color: #d5f3e0;
52
- --se-success-light3-color: #c1f4d3;
53
- --se-success-light4-color: #769c76;
54
- --se-success-light5-color: #89b589;
55
- /* error */
56
- --se-error-font-color: #b94a48;
57
- --se-error-shadow-color: #eed3d7;
58
- --se-error-shadow-color2: #f2dede;
59
- /* document type */
60
- --se-doc-min-padding: 1rem;
61
- --se-doc-max-padding: 1.5rem;
62
- --se-doc-padding-factor: 0.5;
63
- --se-doc-background: #d2d8e1d1;
64
- --se-doc-info-font-size: 14px;
65
- --se-doc-info-width: 18%;
66
- --se-doc-info-min-width: 16ch;
67
- --se-doc-info-inner-padding: 2ch;
68
- --se-doc-info-inner-line-padding: 0.5ch;
69
- --se-doc-info-page-width: 16px;
70
- --se-doc-info-page-font-color: #f5f5f5;
71
- --se-doc-info-page-background-color: #b1b1b1;
72
- /* document type - active */
73
- --se-doc-info-active-color: #4a32ff;
74
- /* document type indent - padding */
75
- --se-doc-info-inner-line-indent-h1: 0em;
76
- --se-doc-info-inner-line-indent-h2: 0.4em;
77
- --se-doc-info-inner-line-indent-h3: 0.8em;
78
- --se-doc-info-inner-line-indent-h4: 1.2em;
79
- --se-doc-info-inner-line-indent-h5: 1.6em;
80
- --se-doc-info-inner-line-indent-h6: 2em;
81
- /* document type indent - weight */
82
- --se-doc-info-inner-line-weight-h1: 700;
83
- --se-doc-info-inner-line-weight-h2: 500;
84
- --se-doc-info-inner-line-weight-h3: 400;
85
- --se-doc-info-inner-line-weight-h4: 300;
86
- --se-doc-info-inner-line-weight-h5: 300;
87
- --se-doc-info-inner-line-weight-h6: 300;
88
- /* loading */
89
- --se-loading-color: #07d;
90
- }
1
+ @import url('variables.css');
91
2
 
92
3
  /** --- suneditor main */
93
4
  .sun-editor {
@@ -125,7 +36,6 @@
125
36
  .sun-editor-common form,
126
37
  .sun-editor-common fieldset,
127
38
  .sun-editor-common legend,
128
- .sun-editor-common textarea,
129
39
  .sun-editor-common p,
130
40
  .sun-editor-common blockquote,
131
41
  .sun-editor-common th,
@@ -139,6 +49,12 @@
139
49
  border: 0;
140
50
  }
141
51
 
52
+ .sun-editor-common input,
53
+ .sun-editor-common select,
54
+ .sun-editor-common textarea {
55
+ background-color: inherit;
56
+ }
57
+
142
58
  .sun-editor-common dl,
143
59
  .sun-editor-common ul,
144
60
  .sun-editor-common ol,
@@ -334,8 +250,8 @@
334
250
  .sun-editor .se-btn:not(.on):not(.active):enabled:active,
335
251
  .sun-editor .se-btn:not(.on):not(.active):enabled.__se__active {
336
252
  background-color: var(--se-main-shadow-color);
337
- border-color: #ececec !important;
338
- outline: 1px solid #b1b1b1 !important;
253
+ border-color: var(--se-main-shadow-color) !important;
254
+ outline: 1px solid var(--se-main-outline-color) !important;
339
255
  -webkit-box-shadow: 0 0 0 0.3rem var(--se-main-shadow-color);
340
256
  box-shadow: 0 0 0 0.3rem var(--se-main-shadow-color);
341
257
  transition: box-shadow 0.1s ease-in-out;
@@ -538,73 +454,73 @@
538
454
 
539
455
  /* --- se-btn.danger */
540
456
  .sun-editor .se-btn.se-btn-danger {
541
- color: var(--se-error-font-color);
542
- border-color: #e1a6a2;
457
+ color: var(--se-error-color);
458
+ border-color: var(--se-error-dark-color);
543
459
  }
544
460
 
545
461
  .sun-editor .se-btn.se-btn-danger:not(.on):not(.active):enabled:hover,
546
462
  .sun-editor .se-btn.se-btn-danger:not(.on):not(.active):enabled:focus {
547
- background-color: #f8e3e1;
548
- border-color: #e1a6a2;
463
+ background-color: var(--se-error-light5-color);
464
+ border-color: var(--se-error-dark-color);
549
465
  }
550
466
 
551
467
  .sun-editor .se-btn.se-btn-danger:not(.on):not(.active):enabled:active,
552
468
  .sun-editor .se-btn.se-btn-danger:not(.on):not(.active):enabled.__se__active {
553
- background-color: #f8e3e1;
554
- border-color: #f8e3e1 !important;
555
- outline: 1px solid #e1a6a2 !important;
556
- -webkit-box-shadow: 0 0 0 0.3rem #f8e3e1;
557
- box-shadow: 0 0 0 0.3rem #f8e3e1;
469
+ background-color: var(--se-error-light5-color);
470
+ border-color: var(--se-error-light5-color) !important;
471
+ outline: 1px solid var(--se-error-dark-color) !important;
472
+ -webkit-box-shadow: 0 0 0 0.3rem var(--se-error-light5-color);
473
+ box-shadow: 0 0 0 0.3rem var(--se-error-light5-color);
558
474
  transition: box-shadow 0.1s ease-in-out;
559
475
  }
560
476
 
561
477
  /* se-btn.danger.on */
562
478
  .sun-editor .se-btn.se-btn-danger:enabled.on {
563
- background-color: #f8e6e4;
564
- color: var(--se-error-font-color);
565
- border-color: #d8a6a0;
479
+ background-color: var(--se-error-light5-color);
480
+ color: var(--se-error-color);
481
+ border-color: var(--se-error-dark-color);
566
482
  }
567
483
 
568
484
  .sun-editor .se-btn.se-btn-danger:enabled.on:hover,
569
485
  .sun-editor .se-btn.se-btn-danger:enabled.on:focus {
570
- background-color: #f7deda;
571
- color: var(--se-error-font-color);
572
- border-color: #c8958f;
486
+ background-color: var(--se-error-light4-color);
487
+ color: var(--se-error-color);
488
+ border-color: var(--se-error-dark-color);
573
489
  }
574
490
 
575
491
  .sun-editor .se-btn.se-btn-danger:enabled.on:active,
576
492
  .sun-editor .se-btn.se-btn-danger:enabled.on.__se__active {
577
- background-color: #f5d0c8;
578
- color: var(--se-error-font-color);
579
- border-color: #f5d0c8 !important;
580
- outline: 1px solid #a37068 !important;
581
- -webkit-box-shadow: 0 0 0 0.3rem #f7deda;
582
- box-shadow: 0 0 0 0.3rem #f7deda;
493
+ background-color: var(--se-error-light-color);
494
+ color: var(--se-error-color);
495
+ border-color: var(--se-error-light-color) !important;
496
+ outline: 1px solid var(--se-error-dark3-color) !important;
497
+ -webkit-box-shadow: 0 0 0 0.3rem var(--se-error-light4-color);
498
+ box-shadow: 0 0 0 0.3rem var(--se-error-light4-color);
583
499
  transition: box-shadow 0.1s ease-in-out;
584
500
  }
585
501
 
586
502
  /* se-btn.danger.active */
587
503
  .sun-editor .se-btn.se-btn-danger:enabled.active {
588
- background-color: #f7deda;
589
- color: var(--se-error-font-color);
590
- border-color: #d17872;
504
+ background-color: var(--se-error-light4-color);
505
+ color: var(--se-error-color);
506
+ border-color: var(--se-error-dark3-color);
591
507
  }
592
508
 
593
509
  .sun-editor .se-btn.se-btn-danger:enabled.active:hover,
594
510
  .sun-editor .se-btn.se-btn-danger:enabled.active:focus {
595
- background-color: #f5d0c8;
596
- color: #a65242;
597
- border-color: #d17872;
511
+ background-color: var(--se-error-light-color);
512
+ color: var(--se-error-color);
513
+ border-color: var(--se-error-dark3-color);
598
514
  }
599
515
 
600
516
  .sun-editor .se-btn.se-btn-danger:enabled.active:active,
601
517
  .sun-editor .se-btn.se-btn-danger:enabled.active.__se__active {
602
- background-color: #f5d0c8;
603
- color: #a65242;
604
- border-color: #f5d0c8 !important;
605
- outline: 1px solid #d17872 !important;
606
- -webkit-box-shadow: 0 0 0 0.3rem #f5d0c8;
607
- box-shadow: 0 0 0 0.3rem #f5d0c8;
518
+ background-color: var(--se-error-light-color);
519
+ color: var(--se-error-color);
520
+ border-color: var(--se-error-light-color) !important;
521
+ outline: 1px solid var(--se-error-dark3-color) !important;
522
+ -webkit-box-shadow: 0 0 0 0.3rem var(--se-error-light-color);
523
+ box-shadow: 0 0 0 0.3rem var(--se-error-light-color);
608
524
  transition: box-shadow 0.1s ease-in-out;
609
525
  }
610
526
 
@@ -643,6 +559,30 @@
643
559
  border: 1px dashed var(--se-main-outline-color);
644
560
  }
645
561
 
562
+ /* page navigator */
563
+ .sun-editor .se-btn.se-btn-tool-pageNavigator > input {
564
+ width: var(--se-input-btn-size);
565
+ text-align: center;
566
+ color: var(--se-main-color-lighter);
567
+ }
568
+ .sun-editor .se-btn.se-btn-tool-pageNavigator > input[type='number'] {
569
+ appearance: textfield;
570
+ }
571
+ .sun-editor .se-btn.se-btn-tool-pageNavigator > input[type='number']::-webkit-outer-spin-button {
572
+ -webkit-appearance: none;
573
+ margin: 0;
574
+ }
575
+ .sun-editor .se-btn.se-btn-tool-pageNavigator ~ span {
576
+ text-align: center;
577
+ font-size: var(--se-main-font-size);
578
+ align-content: center;
579
+ margin-left: -10px;
580
+ }
581
+ .sun-editor .se-btn.se-btn-tool-pageNavigator ~ span::before {
582
+ content: '/';
583
+ margin: 0 0.6em;
584
+ }
585
+
646
586
  /** --- Icons ---------------------------------------------------------- */
647
587
  /* default svg */
648
588
  .sun-editor svg {
@@ -789,7 +729,7 @@
789
729
  .sun-editor .se-arrow.se-arrow-up {
790
730
  top: -12px;
791
731
  border-top-width: 0;
792
- border-bottom-color: #999;
732
+ border-bottom-color: var(--se-controller-border-color);
793
733
  }
794
734
 
795
735
  .sun-editor .se-arrow.se-arrow-up::after {
@@ -803,7 +743,7 @@
803
743
  .sun-editor .se-arrow.se-arrow-down {
804
744
  bottom: -12px;
805
745
  border-bottom-width: 0;
806
- border-top-color: #999;
746
+ border-top-color: var(--se-controller-border-color);
807
747
  }
808
748
 
809
749
  .sun-editor .se-arrow.se-arrow-down::after {
@@ -828,7 +768,7 @@
828
768
  height: 100%;
829
769
  top: 0;
830
770
  left: 0;
831
- background-color: var(--se-main-background-color);
771
+ background-color: rgba(0, 0, 0, 0.1);
832
772
  opacity: 0.7;
833
773
  filter: alpha(opacity=70);
834
774
  z-index: 2147483647;
@@ -1234,7 +1174,7 @@
1234
1174
  .sun-editor .se-list-layer.se-list-line hr {
1235
1175
  border-width: 1px 0 0;
1236
1176
  height: 1px;
1237
- border-color: var(--se-main-font-color);
1177
+ border-color: var(--se-edit-hr-color);
1238
1178
  }
1239
1179
 
1240
1180
  /* dropdown layer - align */
@@ -1305,13 +1245,13 @@
1305
1245
 
1306
1246
  .sun-editor .se-list-layer.se-list-format ul blockquote {
1307
1247
  font-size: var(--se-main-font-size);
1308
- color: #999;
1248
+ color: var(--se-edit-font-quote);
1309
1249
  height: 22px;
1310
1250
  margin: 0;
1311
1251
  background-color: transparent;
1312
1252
  line-height: 1.5;
1313
1253
  border-style: solid;
1314
- border-color: var(--se-main-outline-color);
1254
+ border-color: var(--se-edit-border-dark);
1315
1255
  padding: 0 0 0 7px;
1316
1256
  border-width: 0;
1317
1257
  border-left-width: 5px;
@@ -1319,11 +1259,11 @@
1319
1259
 
1320
1260
  .sun-editor .se-list-layer.se-list-format ul pre {
1321
1261
  font-size: var(--se-main-font-size);
1322
- color: #666;
1262
+ color: var(--se-edit-font-pre);
1323
1263
  padding: 4px 11px;
1324
1264
  margin: 0;
1325
- background-color: var(--se-main-background-color3);
1326
- border: 1px solid var(--se-main-divider-color);
1265
+ background-color: var(--se-edit-background-pre);
1266
+ border: 1px solid var(--se-edit-border-light);
1327
1267
  border-radius: var(--se-border-radius);
1328
1268
  }
1329
1269
 
@@ -1413,6 +1353,7 @@
1413
1353
  .sun-editor .se-selector-table {
1414
1354
  display: none;
1415
1355
  position: absolute;
1356
+ overflow: hidden;
1416
1357
  top: var(--se-input-btn-size);
1417
1358
  left: 1px;
1418
1359
  z-index: 5;
@@ -1663,7 +1604,7 @@
1663
1604
  /** form group - dropdown input */
1664
1605
  .sun-editor .se-dropdown .se-form-group input {
1665
1606
  height: var(--se-input-btn-size);
1666
- color: #555;
1607
+ color: var(--se-dropdown-font-color);
1667
1608
  }
1668
1609
 
1669
1610
  .sun-editor .se-dropdown .se-form-group .se-color-input:focus {
@@ -1704,7 +1645,7 @@
1704
1645
  }
1705
1646
  .sun-editor .se-wrapper .se-code-wrapper .se-code-view-line {
1706
1647
  background-color: var(--se-main-background-color2);
1707
- color: #222;
1648
+ color: var(--se-main-font-color2);
1708
1649
  text-align: right;
1709
1650
  width: 50px;
1710
1651
  font-size: var(--se-main-font-size);
@@ -1713,7 +1654,7 @@
1713
1654
  }
1714
1655
 
1715
1656
  .sun-editor .se-wrapper .se-code-viewer {
1716
- background-color: #222;
1657
+ background-color: var(--se-main-font-color2);
1717
1658
  color: var(--se-main-background-color2);
1718
1659
  font-size: var(--se-main-font-size);
1719
1660
  word-break: break-all;
@@ -1789,6 +1730,7 @@
1789
1730
  -webkit-user-select: none;
1790
1731
  -ms-user-select: none;
1791
1732
  z-index: 2147483647;
1733
+ background-color: transparent;
1792
1734
  }
1793
1735
 
1794
1736
  /** status bar - nabigation */
@@ -1797,7 +1739,7 @@
1797
1739
  position: relative;
1798
1740
  width: auto;
1799
1741
  height: auto;
1800
- color: #666;
1742
+ color: var(--se-statusbar-font-color);
1801
1743
  margin: 0;
1802
1744
  padding: 0;
1803
1745
  font-size: var(--se-statusbar-font-size);
@@ -1814,13 +1756,13 @@
1814
1756
  height: auto;
1815
1757
  margin: 0;
1816
1758
  padding: 0;
1817
- color: #999;
1759
+ color: var(--se-statusbar-font-color);
1818
1760
  font-size: var(--se-main-font-size);
1819
1761
  background: transparent;
1820
1762
  }
1821
1763
 
1822
1764
  .sun-editor .se-status-bar .se-char-counter-wrapper.se-blink {
1823
- color: var(--se-error-font-color);
1765
+ color: var(--se-error-color);
1824
1766
  animation: blinker 0.2s linear infinite;
1825
1767
  }
1826
1768
 
@@ -1844,7 +1786,7 @@
1844
1786
  .sun-editor .se-modal button {
1845
1787
  font-size: var(--se-modal-input-font-size);
1846
1788
  line-height: 1.5;
1847
- color: #111;
1789
+ color: var(--se-main-color);
1848
1790
  margin: 0;
1849
1791
  }
1850
1792
 
@@ -1854,7 +1796,7 @@
1854
1796
  height: 100%;
1855
1797
  top: 0;
1856
1798
  left: 0;
1857
- background-color: #222;
1799
+ background-color: var(--se-overlay-background-color);
1858
1800
  opacity: 0.5;
1859
1801
  }
1860
1802
 
@@ -1883,12 +1825,120 @@
1883
1825
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
1884
1826
  }
1885
1827
 
1828
+ /* modal - resize handle */
1829
+ /* modal - resize handle - w */
1830
+ .sun-editor .se-modal .se-modal-inner .se-modal-content .se-modal-resize-handle-w {
1831
+ position: relative;
1832
+ display: block;
1833
+ width: 100%;
1834
+ height: 10px;
1835
+ cursor: ns-resize;
1836
+ bottom: 0;
1837
+ margin: 0;
1838
+ }
1839
+ .sun-editor .se-modal .se-modal-inner .se-modal-content .se-modal-resize-handle-w::before {
1840
+ content: '';
1841
+ position: relative;
1842
+ display: block;
1843
+ width: 100%;
1844
+ height: 1px;
1845
+ background-color: var(--se-main-outline-color);
1846
+ margin: 1px 0;
1847
+ }
1848
+
1849
+ /* modal - resize handle - h */
1850
+ .sun-editor .se-modal .se-modal-inner .se-modal-content .se-modal-resize-handle-h {
1851
+ position: absolute;
1852
+ display: block;
1853
+ width: 10px;
1854
+ top: 15px;
1855
+ height: calc(100% - 27px);
1856
+ cursor: ew-resize;
1857
+ right: 0;
1858
+ }
1859
+ .sun-editor .se-modal .se-modal-inner .se-modal-content .se-modal-resize-handle-h::before {
1860
+ content: '';
1861
+ position: relative;
1862
+ display: block;
1863
+ width: 1px;
1864
+ height: 100%;
1865
+ background-color: var(--se-main-outline-color);
1866
+ margin: 0 1px;
1867
+ }
1868
+
1869
+ /* modal - resize handle - c */
1870
+ .sun-editor .se-modal .se-modal-inner .se-modal-content .se-modal-resize-handle-c {
1871
+ position: absolute;
1872
+ display: block;
1873
+ width: 9px;
1874
+ height: 9px;
1875
+ cursor: nwse-resize;
1876
+ right: 4px;
1877
+ bottom: 1px;
1878
+ }
1879
+ .sun-editor .se-modal .se-modal-inner .se-modal-content .se-modal-resize-handle-c::before,
1880
+ .sun-editor .se-modal .se-modal-inner .se-modal-content .se-modal-resize-handle-c::after {
1881
+ content: '';
1882
+ position: absolute;
1883
+ display: block;
1884
+ background-color: var(--se-main-outline-color);
1885
+ }
1886
+ .sun-editor .se-modal .se-modal-inner .se-modal-content .se-modal-resize-handle-c::before {
1887
+ width: 100%;
1888
+ height: 2px;
1889
+ top: 50%;
1890
+ left: 0;
1891
+ transform: translateY(-50%);
1892
+ }
1893
+ .sun-editor .se-modal .se-modal-inner .se-modal-content .se-modal-resize-handle-c::after {
1894
+ width: 2px;
1895
+ height: 100%;
1896
+ left: 50%;
1897
+ top: 0;
1898
+ transform: translateX(-50%);
1899
+ }
1900
+
1901
+ /* modal - resize handle - hover, active */
1902
+ .sun-editor .se-modal .se-modal-inner .se-modal-content .se-modal-resize-handle-w:hover::before,
1903
+ .sun-editor .se-modal .se-modal-inner .se-modal-content .se-modal-resize-handle-w.active::before,
1904
+ .sun-editor .se-modal .se-modal-inner .se-modal-content .se-modal-resize-handle-h:hover::before,
1905
+ .sun-editor .se-modal .se-modal-inner .se-modal-content .se-modal-resize-handle-h.active::before,
1906
+ .sun-editor .se-modal .se-modal-inner .se-modal-content .se-modal-resize-handle-c:hover::before,
1907
+ .sun-editor .se-modal .se-modal-inner .se-modal-content .se-modal-resize-handle-c:hover::after,
1908
+ .sun-editor .se-modal .se-modal-inner .se-modal-content .se-modal-resize-handle-c.active::before,
1909
+ .sun-editor .se-modal .se-modal-inner .se-modal-content .se-modal-resize-handle-c.active::after {
1910
+ background-color: var(--se-active-dark4-color);
1911
+ }
1912
+
1913
+ /* modal - large */
1914
+ .sun-editor .se-modal .se-modal-inner .se-modal-content.se-modal-large {
1915
+ max-width: 750px;
1916
+ width: 100%;
1917
+ }
1918
+ .sun-editor .se-modal .se-modal-inner .se-modal-content.se-modal-large .se-modal-body {
1919
+ height: 50vh;
1920
+ }
1921
+
1922
+ /* modal - responsive */
1923
+ .sun-editor .se-modal .se-modal-inner .se-modal-content.se-modal-responsive {
1924
+ width: max-content;
1925
+ height: max-content;
1926
+ max-width: 100%;
1927
+ max-height: 90vh;
1928
+ }
1929
+
1886
1930
  @media screen and (max-width: 509px) {
1887
1931
  .sun-editor .se-modal .se-modal-inner .se-modal-content {
1888
- width: 100%;
1932
+ width: 100% !important;
1933
+ min-width: 100% !important;
1934
+ max-width: 100% !important;
1889
1935
  }
1890
1936
  }
1891
1937
 
1938
+ .sun-editor .se-modal .se-modal-inner .se-modal-content.se-modal-responsive .se-modal-resize-form {
1939
+ max-width: 100%;
1940
+ }
1941
+
1892
1942
  .sun-editor .se-modal .se-modal-inner .se-modal-content label {
1893
1943
  display: inline-block;
1894
1944
  max-width: 100%;
@@ -1914,7 +1964,7 @@
1914
1964
  .sun-editor .se-modal .se-modal-inner .se-modal-header {
1915
1965
  height: 50px;
1916
1966
  padding: 6px 15px;
1917
- border-bottom: 1px solid #e5e5e5;
1967
+ border-bottom: 1px solid var(--se-modal-border-color);
1918
1968
  }
1919
1969
 
1920
1970
  .sun-editor .se-modal .se-modal-inner .se-modal-header .se-close-btn {
@@ -1936,7 +1986,15 @@
1936
1986
 
1937
1987
  .sun-editor .se-modal .se-modal-inner .se-modal-body {
1938
1988
  position: relative;
1939
- padding: 15px 15px 5px 15px;
1989
+ padding: 15px 15px 10px 15px;
1990
+ }
1991
+ .sun-editor .se-modal .se-modal-inner .se-modal-body-top {
1992
+ position: relative;
1993
+ padding: 0px 15px 5px 15px;
1994
+ }
1995
+ .sun-editor .se-modal .se-modal-inner .se-modal-body-bottom {
1996
+ position: relative;
1997
+ padding: 5px 15px 0px 15px;
1940
1998
  }
1941
1999
 
1942
2000
  .sun-editor .se-modal .se-modal-inner .se-modal-form {
@@ -1945,6 +2003,12 @@
1945
2003
  .sun-editor .se-modal .se-modal-inner .se-modal-form .se-modal-flex-form {
1946
2004
  position: relative;
1947
2005
  display: flex;
2006
+ }
2007
+ .sun-editor .se-modal .se-modal-inner .se-modal-form .se-modal-flex-form .se-modal-flex-group {
2008
+ border: 1px dashed var(--se-modal-border-color);
2009
+ padding: 4px;
2010
+ padding-right: 0;
2011
+ margin-right: 4px;
1948
2012
  }
1949
2013
  .sun-editor .se-modal .se-modal-inner .se-modal-form .se-modal-flex-form .se-btn {
1950
2014
  margin-right: 4px;
@@ -1958,7 +2022,7 @@
1958
2022
  }
1959
2023
 
1960
2024
  .sun-editor .se-modal .se-modal-inner input:disabled {
1961
- background-color: #f3f3f3;
2025
+ background-color: var(--se-modal-input-disabled-background-color);
1962
2026
  }
1963
2027
 
1964
2028
  .sun-editor .se-modal .se-modal-inner .se-modal-size-text {
@@ -1986,7 +2050,11 @@
1986
2050
  min-height: 55px;
1987
2051
  padding: 10px 15px 0px 15px;
1988
2052
  text-align: right;
1989
- border-top: 1px solid #e5e5e5;
2053
+ border-top: 1px solid var(--se-modal-border-color);
2054
+ }
2055
+
2056
+ .sun-editor .se-modal .se-modal-inner .se-modal-footer .se-btn {
2057
+ float: left;
1990
2058
  }
1991
2059
 
1992
2060
  .sun-editor .se-modal .se-modal-inner .se-modal-footer > div {
@@ -2009,7 +2077,7 @@
2009
2077
  }
2010
2078
 
2011
2079
  .sun-editor .se-modal .se-modal-inner .se-modal-btn-check:disabled + span {
2012
- color: #999;
2080
+ color: var(--se-modal-input-disabled-color);
2013
2081
  }
2014
2082
 
2015
2083
  .sun-editor .se-modal .se-modal-inner .se-modal-form-footer .se-modal-btn-check {
@@ -2127,7 +2195,7 @@
2127
2195
 
2128
2196
  .sun-editor .se-modal .se-modal-inner .se-modal-form .se-input-form.se-input-url:disabled {
2129
2197
  text-decoration: line-through;
2130
- color: #999;
2198
+ color: var(--se-modal-input-disabled-color);
2131
2199
  }
2132
2200
 
2133
2201
  .sun-editor .se-modal .se-modal-inner .se-modal-form .se-video-ratio {
@@ -2136,7 +2204,7 @@
2136
2204
  }
2137
2205
 
2138
2206
  .sun-editor .se-modal .se-modal-inner .se-modal-form a {
2139
- color: #004cff;
2207
+ color: var(--se-modal-anchor-color);
2140
2208
  }
2141
2209
 
2142
2210
  /* modal - revert button */
@@ -2149,12 +2217,12 @@
2149
2217
  .sun-editor .se-modal-tabs {
2150
2218
  width: 100%;
2151
2219
  height: 25px;
2152
- border-bottom: 1px solid #e5e5e5;
2220
+ border-bottom: 1px solid var(--se-modal-border-color);
2153
2221
  }
2154
2222
 
2155
2223
  .sun-editor .se-modal-tabs button {
2156
- background-color: #e5e5e5;
2157
- border-right: 1px solid #e5e5e5;
2224
+ background-color: var(--se-modal-border-color);
2225
+ border-right: 1px solid var(--se-modal-border-color);
2158
2226
  float: left;
2159
2227
  outline: none;
2160
2228
  padding: 2px 13px;
@@ -2172,8 +2240,6 @@
2172
2240
 
2173
2241
  /* modal - modal - math */
2174
2242
  .sun-editor .se-modal .se-modal-inner .se-modal-form .se-input-form.se-math-exp {
2175
- resize: vertical;
2176
- height: 14em;
2177
2243
  border: 1px solid var(--se-active-dark4-color);
2178
2244
  font-size: var(--se-main-font-size);
2179
2245
  padding: 4px;
@@ -2201,15 +2267,15 @@
2201
2267
  }
2202
2268
 
2203
2269
  .sun-editor .se-modal .se-modal-inner .se-modal-form .se-math-preview > .se-math-error {
2204
- color: var(--se-error-font-color);
2205
- -webkit-box-shadow: 0 0 0 0.1rem var(--se-error-shadow-color2);
2206
- box-shadow: 0 0 0 0.1rem var(--se-error-shadow-color2);
2270
+ color: var(--se-error-color);
2271
+ -webkit-box-shadow: 0 0 0 0.1rem var(--se-error-light3-color);
2272
+ box-shadow: 0 0 0 0.1rem var(--se-error-light3-color);
2207
2273
  }
2208
2274
 
2209
2275
  .sun-editor .se-modal .se-modal-inner .se-modal-form .se-math-preview > .se-math-error svg {
2210
2276
  width: auto;
2211
2277
  height: 30px;
2212
- color: var(--se-error-font-color);
2278
+ color: var(--se-error-color);
2213
2279
  }
2214
2280
 
2215
2281
  .sun-editor .se-modal .se-modal-inner .se-modal-form .se-math-preview .MathJax {
@@ -2224,7 +2290,7 @@
2224
2290
  font-size: var(--se-main-font-size);
2225
2291
  font-weight: normal;
2226
2292
  font-family: inherit;
2227
- color: #666;
2293
+ color: var(--se-modal-preview-color);
2228
2294
  background-color: transparent;
2229
2295
  overflow: hidden;
2230
2296
  text-overflow: ellipsis;
@@ -2277,10 +2343,10 @@
2277
2343
  text-align: left;
2278
2344
  }
2279
2345
 
2280
- /* .sun-editor .se-modal .se-modal-inner .se-modal-form .se-mention-item {line-height:28px;min-height:25px;padding:0 5px;cursor:pointer;}
2281
- .sun-editor .se-modal .se-modal-inner .se-modal-form .se-mention-item:hover {background-color:#e1e1e1}
2282
- .sun-editor .se-modal .se-modal-inner .se-modal-form .se-mention-item.se-mention-active {background-color: var(--se-main-border-color); border-radius:3px;}
2283
- .sun-editor .se-modal .se-modal-inner .se-modal-form .se-mention-search {margin-bottom: 10px;} */
2346
+ /* modal - modal - canvas */
2347
+ .sun-editor .se-modal .se-modal-inner .se-modal-body .se-drawing-canvas {
2348
+ outline: 1px solid var(--se-main-outline-color);
2349
+ }
2284
2350
 
2285
2351
  /** --- controller ---------------------------------------------------------- */
2286
2352
  .sun-editor .se-controller {
@@ -2290,7 +2356,7 @@
2290
2356
  z-index: 2147483646;
2291
2357
  padding: 2px 2px 0 2px;
2292
2358
  margin: 0;
2293
- border: 1px solid #999;
2359
+ border: 1px solid var(--se-controller-border-color);
2294
2360
  text-align: start;
2295
2361
  text-decoration: none;
2296
2362
  text-shadow: none;
@@ -2442,7 +2508,7 @@
2442
2508
  width: 100%;
2443
2509
  height: 38px;
2444
2510
  padding: 4px;
2445
- border-bottom: 1px solid #e5e5e5;
2511
+ border-bottom: 1px solid var(--se-modal-border-color);
2446
2512
  }
2447
2513
 
2448
2514
  /* controller - controller-content - body */
@@ -2696,7 +2762,7 @@
2696
2762
  border-radius: var(--se-border-radius);
2697
2763
  padding: 2px 0;
2698
2764
  margin: 0;
2699
- border: 1px solid #bababa;
2765
+ border: 1px solid var(--se-main-outline-color);
2700
2766
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
2701
2767
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
2702
2768
  outline: 0 none;
@@ -2786,7 +2852,7 @@
2786
2852
  .sun-editor .se-file-browser button {
2787
2853
  font-size: var(--se-modal-input-font-size);
2788
2854
  line-height: 1.5;
2789
- color: #111;
2855
+ color: var(--se-main-color);
2790
2856
  margin: 0;
2791
2857
  }
2792
2858
 
@@ -2797,7 +2863,7 @@
2797
2863
  height: 100%;
2798
2864
  top: 0;
2799
2865
  left: 0;
2800
- background-color: #222;
2866
+ background-color: var(--se-overlay-background-color);
2801
2867
  opacity: 0.5;
2802
2868
  }
2803
2869
 
@@ -2830,7 +2896,7 @@
2830
2896
  height: auto;
2831
2897
  min-height: 50px;
2832
2898
  padding: 6px 15px 6px 15px;
2833
- border-bottom: 1px solid #e5e5e5;
2899
+ border-bottom: 1px solid var(--se-modal-border-color);
2834
2900
  }
2835
2901
 
2836
2902
  .sun-editor .se-file-browser .se-file-browser-header .se-file-browser-close {
@@ -2884,16 +2950,16 @@
2884
2950
  }
2885
2951
 
2886
2952
  .sun-editor .se-file-browser .se-file-browser-tags a.on {
2887
- background-color: #ebf3fe;
2953
+ background-color: var(--se-active-light3-color);
2888
2954
  color: var(--se-active-dark3-color);
2889
2955
  }
2890
2956
 
2891
2957
  .sun-editor .se-file-browser .se-file-browser-tags a.on:hover {
2892
- background-color: #d8e8fe;
2958
+ background-color: var(--se-active-light5-color);
2893
2959
  }
2894
2960
 
2895
2961
  .sun-editor .se-file-browser .se-file-browser-tags a.on:active {
2896
- background-color: var(--se-active-light3-color);
2962
+ background-color: var(--se-active-light5-color);
2897
2963
  }
2898
2964
 
2899
2965
  /* --- browser - body */
@@ -3010,7 +3076,7 @@
3010
3076
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
3011
3077
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
3012
3078
  word-break: break-all;
3013
- color: var(--se-error-font-color);
3079
+ color: var(--se-error-color);
3014
3080
  background-color: var(--se-main-background-color);
3015
3081
  padding: 15px;
3016
3082
  border: 1px solid rgba(0, 0, 0, 0.2);
@@ -3324,6 +3390,14 @@
3324
3390
 
3325
3391
  .sun-editor.se-rtl .se-modal .se-modal-inner .se-modal-size-text {
3326
3392
  padding-right: var(--se-input-btn-size);
3393
+ }
3394
+
3395
+ /* modal - flex-group */
3396
+ .sun-editor.se-rtl .se-modal .se-modal-inner .se-modal-form .se-modal-flex-form .se-modal-flex-group {
3397
+ margin-right: 0;
3398
+ margin-left: 4px;
3399
+ padding-right: 4px;
3400
+ padding-left: 0;
3327
3401
  }
3328
3402
 
3329
3403
  /* modal - footer */
@@ -3465,6 +3539,24 @@
3465
3539
  left: 100%;
3466
3540
  }
3467
3541
 
3542
+ /* modal - footer */
3543
+ .sun-editor.se-rtl .se-modal .se-modal-inner .se-modal-footer .se-btn {
3544
+ float: right;
3545
+ }
3546
+
3547
+ /* modal - resize handle */
3548
+ /* modal - resize handle - h */
3549
+ .sun-editor.se-rtl .se-modal .se-modal-inner .se-modal-content .se-modal-resize-handle-h {
3550
+ left: 0;
3551
+ right: unset;
3552
+ }
3553
+ /* modal - resize handle - c */
3554
+ .sun-editor.se-rtl .se-modal .se-modal-inner .se-modal-content .se-modal-resize-handle-c {
3555
+ cursor: nesw-resize;
3556
+ left: 4px;
3557
+ right: unset;
3558
+ }
3559
+
3468
3560
  /** --- RTL end -------------------------------------------------------------------------------------------------------------------------------------------------- */
3469
3561
 
3470
3562
  /** button module float --------------------------------------------- */
@@ -3474,26 +3566,35 @@
3474
3566
 
3475
3567
  .sun-editor .se-btn-module-border.module-float-right {
3476
3568
  float: right;
3569
+ }
3570
+
3571
+ /** document-type codeView --------------------------------------------- */
3572
+ .sun-editor .se-wrapper.se-type-document.se-code-view-status {
3573
+ padding: 0;
3574
+ }
3575
+ .sun-editor .se-wrapper.se-type-document.se-code-view-status .se-document-lines,
3576
+ .sun-editor .se-wrapper.se-type-document.se-code-view-status .se-document-pages {
3577
+ display: none;
3477
3578
  }
3478
3579
 
3479
3580
  /** --- error ---------------------------------------------------------- */
3480
3581
  .sun-editor .se-error {
3481
- color: var(--se-error-font-color);
3582
+ color: var(--se-error-color);
3482
3583
  }
3483
3584
 
3484
3585
  .sun-editor input.se-error,
3485
3586
  .sun-editor select.se-error,
3486
3587
  .sun-editor textarea.se-error {
3487
- border: 1px solid #db8d8c !important;
3588
+ border: 1px solid var(--se-error-dark2-color) !important;
3488
3589
  }
3489
3590
 
3490
3591
  .sun-editor input.se-error:focus,
3491
3592
  .sun-editor select.se-error:focus,
3492
3593
  .sun-editor textarea.se-error:focus {
3493
- border: 1px solid #e46765 !important;
3594
+ border: 1px solid var(--se-error-color) !important;
3494
3595
  outline: 0;
3495
- -webkit-box-shadow: 0 0 0 0.2rem var(--se-error-shadow-color);
3496
- box-shadow: 0 0 0 0.2rem var(--se-error-shadow-color);
3596
+ -webkit-box-shadow: 0 0 0 0.2rem var(--se-error-light2-color);
3597
+ box-shadow: 0 0 0 0.2rem var(--se-error-light2-color);
3497
3598
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
3498
3599
  }
3499
3600
 
@@ -3530,17 +3631,17 @@
3530
3631
  .sun-editor .se-show-block ol,
3531
3632
  .sun-editor .se-show-block ul,
3532
3633
  .sun-editor .se-show-block pre {
3533
- border: 1px dashed var(--se-active-dark4-color) !important;
3634
+ border: 1px dashed var(--se-show-blocks-color) !important;
3534
3635
  padding: 14px 8px 8px 8px !important;
3535
3636
  }
3536
3637
 
3537
3638
  .sun-editor .se-show-block ol,
3538
3639
  .sun-editor .se-show-block ul {
3539
- border: 1px dashed #d539ff !important;
3640
+ border: 1px dashed var(--se-show-blocks-li-color) !important;
3540
3641
  }
3541
3642
 
3542
3643
  .sun-editor .se-show-block pre {
3543
- border: 1px dashed #27c022 !important;
3644
+ border: 1px dashed var(--se-show-blocks-pre-color) !important;
3544
3645
  }
3545
3646
 
3546
3647
  .sun-editor .se-show-block p {
@@ -3638,6 +3739,39 @@
3638
3739
  border-color: transparent transparent var(--se-active-dark5-color) transparent;
3639
3740
  }
3640
3741
 
3742
+ /** page break */
3743
+ .sun-editor .sun-editor-editable[contenteditable='true'] .se-page-break {
3744
+ display: flex;
3745
+ visibility: visible !important;
3746
+ position: relative;
3747
+ align-items: center;
3748
+ justify-content: center;
3749
+ clear: both;
3750
+ width: 100%;
3751
+ height: 24px;
3752
+ margin: 0;
3753
+ padding: 0;
3754
+ z-index: 1;
3755
+ }
3756
+
3757
+ .sun-editor .sun-editor-editable[contenteditable='true'] .se-page-break::before {
3758
+ content: '';
3759
+ display: block;
3760
+ width: 100%;
3761
+ border-top: 1px dashed var(--se-doc-info-page-background-color);
3762
+ position: absolute;
3763
+ top: 50%;
3764
+ transform: translateY(-50%);
3765
+ }
3766
+ .sun-editor .sun-editor-editable[contenteditable='true'] .se-page-break::after {
3767
+ content: '⎯⎯⎯⎯⎯⎯';
3768
+ position: absolute;
3769
+ background: var(--se-main-background-color);
3770
+ padding: 0 5px;
3771
+ color: var(--se-doc-info-page-background-color);
3772
+ font-size: var(--se-main-font-size);
3773
+ }
3774
+
3641
3775
  /** animation */
3642
3776
  @keyframes blinker {
3643
3777
  50% {