suneditor 3.0.0-alpha.9 → 3.0.0-beta.2

package/src/assets/suneditor.css

@@ -1,21 +1,15 @@
-/* used color #000 , #fff , #CCC, #f5f5f5, #f9f9f9 */
-/* font color #333, background color: #fff */
-/* grey color #e1e1e1, #ececec, #d1d1d1 ,#bdbdbd, #c1c1c1 ,#b1b1b1 */
-/* blue color #eaf3ff, #dbeaff(shadow: #b7ccf2, #e6f2ff), #c4ddff, #d0e3ff , #80bdff , #3f9dff , #4592ff, #407dd1, #3288ff, #1275ff */
-/* red color #b94a48 , #f2dede , #eed3d7, #d9534f */
-/* green color #008000 */
-/* yellow color #f0c20a */
+@import url('design/index.css');
 
 /** --- suneditor main */
 .sun-editor {
 	width: auto;
 	height: auto;
 	box-sizing: border-box;
-	font-family: Helvetica Neue;
-	border: 1px solid #dadada;
-	background-color: #fff;
-	color: #000;
-	font-size: 16px;
+	font-family: var(--se-main-font-family);
+	border: 1px solid var(--se-main-out-color);
+	background-color: var(--se-main-background-color);
+	color: var(--se-main-color);
+	font-size: var(--se-main-font-size);
 }
 
 .sun-editor * {
@@ -23,14 +17,6 @@
 	overflow: visible;
 }
 
-.sun-editor-common input,
-.sun-editor-common select,
-.sun-editor-common textarea,
-.sun-editor-common button {
-	font-size: 14px;
-	line-height: 1.5;
-}
-
 .sun-editor-common body,
 .sun-editor-common div,
 .sun-editor-common dl,
@@ -50,7 +36,6 @@
 .sun-editor-common form,
 .sun-editor-common fieldset,
 .sun-editor-common legend,
-.sun-editor-common textarea,
 .sun-editor-common p,
 .sun-editor-common blockquote,
 .sun-editor-common th,
@@ -64,6 +49,12 @@
 	border: 0;
 }
 
+.sun-editor-common input,
+.sun-editor-common select,
+.sun-editor-common textarea {
+	background-color: inherit;
+}
+
 .sun-editor-common dl,
 .sun-editor-common ul,
 .sun-editor-common ol,
@@ -112,10 +103,114 @@
 	max-height: 24px;
 }
 
+/** --- se-type-document ---------------------------------------------------------- */
+.sun-editor .se-wrapper.se-type-document {
+	padding: clamp(var(--se-doc-min-padding), var(--se-doc-min-padding) + calc(var(--se-doc-padding-factor) * 1vw), var(--se-doc-max-padding));
+	background-color: var(--se-doc-background);
+	box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.1);
+}
+.sun-editor .se-wrapper.se-type-document > .se-wrapper-inner {
+	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+
+/* se-type-document - header */
+.sun-editor .se-wrapper.se-type-document .se-document-lines {
+	width: var(--se-doc-info-width);
+	min-width: var(--se-doc-info-min-width);
+	font-size: var(--se-doc-info-font-size);
+	overflow-y: auto;
+	overflow-x: hidden;
+	background-color: transparent;
+	z-index: 1;
+}
+.sun-editor .se-wrapper.se-type-document .se-document-lines.se-document-responsible {
+	min-width: unset !important;
+}
+
+.sun-editor .se-wrapper.se-type-document .se-document-lines .se-document-lines-inner {
+	padding: var(--se-doc-info-inner-padding);
+	padding-right: var(--se-doc-info-inner-line-padding);
+}
+.sun-editor .se-wrapper.se-type-document .se-document-lines .se-document-lines-inner > div.se-doc-item {
+	color: var(--se-doc-info-font-color);
+	width: 100%;
+	padding: var(--se-doc-info-inner-line-padding);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: inline-block;
+	cursor: pointer;
+}
+.sun-editor .se-wrapper.se-type-document .se-document-lines .se-document-lines-inner > div.se-doc-item:hover {
+	text-decoration: underline;
+}
+.sun-editor .se-wrapper.se-type-document .se-document-lines .se-document-lines-inner > div.se-doc-item.active {
+	color: var(--se-doc-info-active-color);
+}
+
+.sun-editor .se-wrapper.se-type-document .se-document-lines .se-document-lines-inner > div.se-doc-h1 {
+	font-weight: var(--se-doc-info-inner-line-weight-h1);
+	padding-left: var(--se-doc-info-inner-line-indent-h1);
+}
+.sun-editor .se-wrapper.se-type-document .se-document-lines .se-document-lines-inner > div.se-doc-h2 {
+	font-weight: var(--se-doc-info-inner-line-weight-h2);
+	padding-left: var(--se-doc-info-inner-line-indent-h2);
+}
+.sun-editor .se-wrapper.se-type-document .se-document-lines .se-document-lines-inner > div.se-doc-h3 {
+	font-weight: var(--se-doc-info-inner-line-weight-h3);
+	padding-left: var(--se-doc-info-inner-line-indent-h3);
+}
+.sun-editor .se-wrapper.se-type-document .se-document-lines .se-document-lines-inner > div.se-doc-h4 {
+	font-weight: var(--se-doc-info-inner-line-weight-h4);
+	padding-left: var(--se-doc-info-inner-line-indent-h4);
+}
+.sun-editor .se-wrapper.se-type-document .se-document-lines .se-document-lines-inner > div.se-doc-h5 {
+	font-weight: var(--se-doc-info-inner-line-weight-h5);
+	padding-left: var(--se-doc-info-inner-line-indent-h5);
+}
+.sun-editor .se-wrapper.se-type-document .se-document-lines .se-document-lines-inner > div.se-doc-h6 {
+	font-weight: var(--se-doc-info-inner-line-weight-h6);
+	padding-left: var(--se-doc-info-inner-line-indent-h6);
+}
+/* se-type-document - page */
+.sun-editor .se-wrapper.se-type-document .se-document-page {
+	position: relative;
+	text-align: center;
+	pointer-events: none;
+}
+
+.sun-editor .se-wrapper.se-type-document .se-document-page > div {
+	position: absolute;
+	width: var(--se-doc-info-page-width);
+	color: var(--se-doc-info-page-font-color);
+	background-color: var(--se-doc-info-page-background-color);
+	font-size: inherit;
+	left: 0px;
+	padding: 1px 0;
+	margin-left: 1px;
+}
+.sun-editor .se-wrapper.se-type-document .se-document-page > div > div.se-document-page-line {
+	position: absolute;
+	display: block;
+	height: 0px;
+	border-bottom: 1px dashed var(--se-doc-info-page-background-color);
+	top: 0px;
+	right: 100%;
+}
+
+/* se-type-document - placeholder position set */
+.sun-editor .se-wrapper.se-type-document .se-placeholder {
+	top: clamp(var(--se-doc-min-padding));
+	left: var(--se-doc-info-width);
+	right: var(--se-doc-info-width);
+	padding: var(--se-edit-inner-padding-doc-type);
+}
+/** --- se-type-document end ---------------------------------------------------------- */
+
 .sun-editor .se-wrapper .se-code-viewer-mirror,
 .sun-editor .se-wrapper .cm-editor,
 .sun-editor .se-wrapper .CodeMirror {
-	font-size: 13px;
+	font-size: var(--se-main-font-size);
 }
 
 /* button children are pointer event none */
@@ -128,23 +223,24 @@
 
 /** button */
 .sun-editor button {
-	color: #000;
+	color: var(--se-main-color);
 }
 
 /** --- se buttons ---------------------------------------------------------- */
 /** --- se-btn */
 .sun-editor .se-btn {
 	float: left;
-	width: 34px;
-	height: 34px;
+	width: var(--se-input-btn-size);
+	height: var(--se-input-btn-size);
 	margin: 1px;
 	padding: 0;
-	font-size: 12px;
+	font-size: var(--se-btn-font-size);
 	line-height: 1.8;
 	border-width: 0;
 	border-style: solid;
-	border-color: #ccc;
-	border-radius: 2px;
+	border-color: var(--se-input-btn-border-color);
+	border-radius: var(--se-border-radius);
+	transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
 }
 
 .sun-editor .se-form-group button.se-btn {
@@ -152,26 +248,21 @@
 }
 
 .sun-editor .se-btn.se-btn-info {
-	color: #3288ff;
-}
-
-.sun-editor .se-btn-w-auto {
-	width: auto !important;
+	color: var(--se-active-color);
 }
 
 .sun-editor .se-btn:not(.on):not(.active):enabled:hover,
 .sun-editor .se-btn:not(.on):not(.active):enabled:focus {
-	background-color: #e1e1e1;
-	border-color: #d1d1d1;
+	background-color: var(--se-main-divider-color);
+	border-color: var(--se-main-border-color);
 }
 
 .sun-editor .se-btn:not(.on):not(.active):enabled:active,
 .sun-editor .se-btn:not(.on):not(.active):enabled.__se__active {
-	background-color: #ececec;
-	border-color: #ececec !important;
-	outline: 1px solid #b1b1b1 !important;
-	-webkit-box-shadow: 0 0 0 0.3rem #ececec;
-	box-shadow: 0 0 0 0.3rem #ececec;
+	background-color: var(--se-main-shadow-color);
+	border-color: var(--se-main-shadow-color) !important;
+	outline: 1px solid var(--se-main-outline-color) !important;
+	box-shadow: 0 0 0 0.3rem var(--se-main-shadow-color);
 	transition: box-shadow 0.1s ease-in-out;
 }
 
@@ -183,7 +274,7 @@
 .sun-editor .se-menu-list li:hover .se-btn-input input:enabled {
 	border-width: 1px;
 	border-style: solid;
-	border-color: #e1e1e1;
+	border-color: var(--se-main-divider-color);
 }
 
 /* after, before button - on, active */
@@ -193,7 +284,7 @@
 .sun-editor .se-menu-list li .se-side-btn-before.active:enabled,
 .sun-editor .se-menu-list li .se-btn-input.on input:enabled,
 .sun-editor .se-menu-list li .se-btn-input.active input:enabled {
-	border-color: #80bdff;
+	border-color: var(--se-active-dark-color);
 }
 
 /* after, before button : hover - on, active - border */
@@ -220,224 +311,216 @@
 .sun-editor .se-menu-list li:hover .se-side-btn-before.active:enabled,
 .sun-editor .se-menu-list li:hover .se-btn-input.on input:enabled,
 .sun-editor .se-menu-list li:hover .se-btn-input.active input:enabled {
-	border-color: #3f9dff;
+	border-color: var(--se-active-dark4-color);
 }
 
 /* se-btn.on */
 .sun-editor .se-btn:enabled.on {
-	background-color: #eaf3ff;
-	color: #4592ff;
-	border-color: #c4ddff;
+	background-color: var(--se-active-light2-color);
+	color: var(--se-active-dark3-color);
+	border-color: var(--se-active-light5-color);
 }
 
 .sun-editor .se-btn:enabled.on:hover,
 .sun-editor .se-btn:enabled.on:focus {
-	background-color: #d0e3ff;
-	color: #407dd1;
-	border-color: #c4ddff;
+	background-color: var(--se-active-light3-color);
+	color: var(--se-active-dark2-color);
+	border-color: var(--se-active-light5-color);
 }
 
 .sun-editor .se-btn:enabled.on:active,
 .sun-editor .se-btn:enabled.on.__se__active {
-	background-color: #d0e3ff;
-	color: #3288ff;
-	border-color: #d0e3ff !important;
-	outline: 1px solid #3288ff !important;
-	color: 1px solid #3288ff;
-	-webkit-box-shadow: 0 0 0 0.3rem #d0e3ff;
-	box-shadow: 0 0 0 0.3rem #d0e3ff;
+	background-color: var(--se-active-light3-color);
+	color: var(--se-active-color);
+	border-color: var(--se-active-light3-color) !important;
+	outline: 1px solid var(--se-active-color) !important;
+	color: 1px solid var(--se-active-color);
+	box-shadow: 0 0 0 0.3rem var(--se-active-light3-color);
 	transition: box-shadow 0.1s ease-in-out;
 }
 
 /* se-btn.active */
 .sun-editor .se-btn:enabled.active {
-	background-color: #dbeaff;
-	color: #4592ff;
-	border-color: #80bdff;
+	background-color: var(--se-active-light4-color);
+	color: var(--se-active-dark3-color);
+	border-color: var(--se-active-dark-color);
 }
 
 .sun-editor .se-btn:enabled.active:hover,
 .sun-editor .se-btn:enabled.active:focus {
-	background-color: #c4ddff;
-	color: #1275ff;
-	border-color: #3f9dff;
+	background-color: var(--se-active-light5-color);
+	color: var(--se-active-dark5-color);
+	border-color: var(--se-active-dark4-color);
 }
 
 .sun-editor .se-btn:enabled.active:active,
 .sun-editor .se-btn:enabled.active.__se__active {
-	background-color: #c4ddff;
-	color: #1275ff;
-	border-color: #1275ff !important;
-	outline: 1px solid #1275ff !important;
-	-webkit-box-shadow: 0 0 0 0.3rem #c4ddff;
-	box-shadow: 0 0 0 0.3rem #c4ddff;
+	background-color: var(--se-active-light5-color);
+	color: var(--se-active-dark5-color);
+	border-color: var(--se-active-dark5-color) !important;
+	outline: 1px solid var(--se-active-dark5-color) !important;
+	box-shadow: 0 0 0 0.3rem var(--se-active-light5-color);
 	transition: box-shadow 0.1s ease-in-out;
 }
 
 /** --- primary button */
 .sun-editor .se-btn-primary {
-	background-color: #eaf3ff;
-	border: 1px solid #1275ff;
-	border-radius: 2px;
+	background-color: var(--se-active-light2-color);
+	border: 1px solid var(--se-active-dark5-color);
+	border-radius: var(--se-border-radius);
 	outline: 0 none;
+	transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
 }
 
 .sun-editor .se-btn-primary:hover,
 .sun-editor .se-btn-primary:focus {
-	background-color: #c4ddff;
+	background-color: var(--se-active-light5-color);
 }
 
 .sun-editor .se-btn-primary:active,
 .sun-editor .se-btn-primary.__se__active {
-	background-color: #eaf3ff;
-	border-color: #eaf3ff !important;
-	outline: 1px solid #1275ff !important;
-	-webkit-box-shadow: 0 0 0 0.3rem #eaf3ff;
-	box-shadow: 0 0 0 0.3rem #eaf3ff;
+	background-color: var(--se-active-light2-color);
+	border-color: var(--se-active-light2-color) !important;
+	outline: 1px solid var(--se-active-dark5-color) !important;
+	box-shadow: 0 0 0 0.3rem var(--se-active-light2-color);
 	transition: box-shadow 0.1s ease-in-out;
 }
 
 /* --- se-btn.success */
 .sun-editor .se-btn.se-btn-success {
-	color: #008000;
-	border-color: #89b589;
+	color: var(--se-success-color);
+	border-color: var(--se-success-light5-color);
 }
 
 .sun-editor .se-btn.se-btn-success:not(.on):not(.active):enabled:hover,
 .sun-editor .se-btn.se-btn-success:not(.on):not(.active):enabled:focus {
-	background-color: #dff4e6;
-	border-color: #89b589;
+	background-color: var(--se-success-light-color);
+	border-color: var(--se-success-light5-color);
 }
 .sun-editor .se-btn.se-btn-success:not(.on):not(.active):enabled:active,
 .sun-editor .se-btn.se-btn-success:not(.on):not(.active):enabled.__se__active {
-	background-color: #dff4e6;
-	border-color: #dff4e6 !important;
-	outline: 1px solid #89b589 !important;
-	-webkit-box-shadow: 0 0 0 0.3rem #dff4e6;
-	box-shadow: 0 0 0 0.3rem #dff4e6;
+	background-color: var(--se-success-light-color);
+	border-color: var(--se-success-light-color) !important;
+	outline: 1px solid var(--se-success-light5-color) !important;
+	box-shadow: 0 0 0 0.3rem var(--se-success-light-color);
 	transition: box-shadow 0.1s ease-in-out;
 }
 
 /* se-btn.success.on */
 .sun-editor .se-btn.se-btn-success:enabled.on {
-	background-color: #dff4e6;
-	color: #008000;
-	border-color: #89b589;
+	background-color: var(--se-success-light-color);
+	color: var(--se-success-color);
+	border-color: var(--se-success-light5-color);
 }
 
 .sun-editor .se-btn.se-btn-success:enabled.on:hover,
 .sun-editor .se-btn.se-btn-success:enabled.on:focus {
-	background-color: #d5f3e0;
-	color: #008000;
-	border-color: #769c76;
+	background-color: var(--se-success-light2-color);
+	color: var(--se-success-color);
+	border-color: var(--se-success-light4-color);
 }
 
 .sun-editor .se-btn.se-btn-success:enabled.on:active,
 .sun-editor .se-btn.se-btn-success:enabled.on.__se__active {
-	background-color: #d5f3e0;
-	color: #008000;
-	border-color: #d5f3e0 !important;
-	outline: 1px solid #628562 !important;
-	color: 1px solid #008000;
-	-webkit-box-shadow: 0 0 0 0.3rem #d5f3e0;
-	box-shadow: 0 0 0 0.3rem #d5f3e0;
+	background-color: var(--se-success-light2-color);
+	color: var(--se-success-color);
+	border-color: var(--se-success-light2-color) !important;
+	outline: 1px solid var(--se-success-dark-color) !important;
+	color: 1px solid var(--se-success-color);
+	box-shadow: 0 0 0 0.3rem var(--se-success-light2-color);
 	transition: box-shadow 0.1s ease-in-out;
 }
 
 /* se-btn.success.active */
 .sun-editor .se-btn.se-btn-success:enabled.active {
-	background-color: #d5f3e0;
-	color: #008000;
-	border-color: #419c41;
+	background-color: var(--se-success-light2-color);
+	color: var(--se-success-color);
+	border-color: var(--se-success-dark2-color);
 }
 
 .sun-editor .se-btn.se-btn-success:enabled.active:hover,
 .sun-editor .se-btn.se-btn-success:enabled.active:focus {
-	background-color: #c1f4d3;
-	color: #006c00;
-	border-color: #419c41;
+	background-color: var(--se-success-light3-color);
+	color: var(--se-success-dark3-color);
+	border-color: var(--se-success-dark2-color);
 }
 
 .sun-editor .se-btn.se-btn-success:enabled.active:active,
 .sun-editor .se-btn.se-btn-success:enabled.active.__se__active {
-	background-color: #c1f4d3;
-	color: #006c00;
-	border-color: #c1f4d3 !important;
-	outline: 1px solid #419c41 !important;
-	-webkit-box-shadow: 0 0 0 0.3rem #c1f4d3;
-	box-shadow: 0 0 0 0.3rem #c1f4d3;
+	background-color: var(--se-success-light3-color);
+	color: var(--se-success-dark3-color);
+	border-color: var(--se-success-light3-color) !important;
+	outline: 1px solid var(--se-success-dark2-color) !important;
+	box-shadow: 0 0 0 0.3rem var(--se-success-light3-color);
 	transition: box-shadow 0.1s ease-in-out;
 }
 
 /* --- se-btn.danger */
 .sun-editor .se-btn.se-btn-danger {
-	color: #b94a48;
-	border-color: #e1a6a2;
+	color: var(--se-error-color);
+	border-color: var(--se-error-dark-color);
 }
 
 .sun-editor .se-btn.se-btn-danger:not(.on):not(.active):enabled:hover,
 .sun-editor .se-btn.se-btn-danger:not(.on):not(.active):enabled:focus {
-	background-color: #f8e3e1;
-	border-color: #e1a6a2;
+	background-color: var(--se-error-light5-color);
+	border-color: var(--se-error-dark-color);
 }
 
 .sun-editor .se-btn.se-btn-danger:not(.on):not(.active):enabled:active,
 .sun-editor .se-btn.se-btn-danger:not(.on):not(.active):enabled.__se__active {
-	background-color: #f8e3e1;
-	border-color: #f8e3e1 !important;
-	outline: 1px solid #e1a6a2 !important;
-	-webkit-box-shadow: 0 0 0 0.3rem #f8e3e1;
-	box-shadow: 0 0 0 0.3rem #f8e3e1;
+	background-color: var(--se-error-light5-color);
+	border-color: var(--se-error-light5-color) !important;
+	outline: 1px solid var(--se-error-dark-color) !important;
+	box-shadow: 0 0 0 0.3rem var(--se-error-light5-color);
 	transition: box-shadow 0.1s ease-in-out;
 }
 
 /* se-btn.danger.on */
 .sun-editor .se-btn.se-btn-danger:enabled.on {
-	background-color: #f8e6e4;
-	color: #b94a48;
-	border-color: #d8a6a0;
+	background-color: var(--se-error-light5-color);
+	color: var(--se-error-color);
+	border-color: var(--se-error-dark-color);
 }
 
 .sun-editor .se-btn.se-btn-danger:enabled.on:hover,
 .sun-editor .se-btn.se-btn-danger:enabled.on:focus {
-	background-color: #f7deda;
-	color: #b94a48;
-	border-color: #c8958f;
+	background-color: var(--se-error-light4-color);
+	color: var(--se-error-color);
+	border-color: var(--se-error-dark-color);
 }
 
 .sun-editor .se-btn.se-btn-danger:enabled.on:active,
 .sun-editor .se-btn.se-btn-danger:enabled.on.__se__active {
-	background-color: #f5d0c8;
-	color: #b94a48;
-	border-color: #f5d0c8 !important;
-	outline: 1px solid #a37068 !important;
-	-webkit-box-shadow: 0 0 0 0.3rem #f7deda;
-	box-shadow: 0 0 0 0.3rem #f7deda;
+	background-color: var(--se-error-light-color);
+	color: var(--se-error-color);
+	border-color: var(--se-error-light-color) !important;
+	outline: 1px solid var(--se-error-dark3-color) !important;
+	box-shadow: 0 0 0 0.3rem var(--se-error-light4-color);
 	transition: box-shadow 0.1s ease-in-out;
 }
 
 /* se-btn.danger.active */
 .sun-editor .se-btn.se-btn-danger:enabled.active {
-	background-color: #f7deda;
-	color: #b94a48;
-	border-color: #d17872;
+	background-color: var(--se-error-light4-color);
+	color: var(--se-error-color);
+	border-color: var(--se-error-dark3-color);
 }
 
 .sun-editor .se-btn.se-btn-danger:enabled.active:hover,
 .sun-editor .se-btn.se-btn-danger:enabled.active:focus {
-	background-color: #f5d0c8;
-	color: #a65242;
-	border-color: #d17872;
+	background-color: var(--se-error-light-color);
+	color: var(--se-error-color);
+	border-color: var(--se-error-dark3-color);
 }
 
 .sun-editor .se-btn.se-btn-danger:enabled.active:active,
 .sun-editor .se-btn.se-btn-danger:enabled.active.__se__active {
-	background-color: #f5d0c8;
-	color: #a65242;
-	border-color: #f5d0c8 !important;
-	outline: 1px solid #d17872 !important;
-	-webkit-box-shadow: 0 0 0 0.3rem #f5d0c8;
-	box-shadow: 0 0 0 0.3rem #f5d0c8;
+	background-color: var(--se-error-light-color);
+	color: var(--se-error-color);
+	border-color: var(--se-error-light-color) !important;
+	outline: 1px solid var(--se-error-dark3-color) !important;
+	box-shadow: 0 0 0 0.3rem var(--se-error-light-color);
 	transition: box-shadow 0.1s ease-in-out;
 }
 
@@ -445,9 +528,9 @@
 .sun-editor input,
 .sun-editor select,
 .sun-editor textarea {
-	color: #000;
-	border: 1px solid #ccc;
-	border-radius: 2px;
+	color: var(--se-main-color);
+	border: 1px solid var(--se-input-btn-border-color);
+	border-radius: var(--se-border-radius);
 }
 
 /* disabled buttons, icon blur */
@@ -455,7 +538,7 @@
 .sun-editor button:disabled,
 .sun-editor input:disabled {
 	cursor: not-allowed;
-	color: #bdbdbd;
+	color: var(--se-input-btn-disabled-color);
 }
 
 /* dropdown layer - list button */
@@ -465,7 +548,7 @@
 	min-height: 32px;
 	padding: 0 14px;
 	cursor: pointer;
-	font-size: 12px;
+	font-size: var(--se-btn-font-size);
 	line-height: normal;
 	text-indent: 0;
 	text-decoration: none;
@@ -473,7 +556,36 @@
 }
 
 .sun-editor .se-btn-list.default_value {
-	border: 1px dashed #b1b1b1;
+	border: 1px dashed var(--se-main-outline-color);
+}
+
+/* page navigator */
+.sun-editor .se-btn.se-btn-tool-pageNavigator > input {
+	width: var(--se-input-btn-size);
+	text-align: center;
+	color: var(--se-main-color-lighter);
+}
+.sun-editor .se-btn.se-btn-tool-pageNavigator > input[type='number'] {
+	-webkit-appearance: textfield;
+	-moz-appearance: textfield;
+	appearance: textfield;
+}
+.sun-editor .se-btn.se-btn-tool-pageNavigator > input[type='number']::-webkit-inner-spin-button,
+.sun-editor .se-btn.se-btn-tool-pageNavigator > input[type='number']::-webkit-outer-spin-button {
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	margin: 0;
+}
+.sun-editor .se-btn.se-btn-tool-pageNavigator ~ span {
+	text-align: center;
+	font-size: var(--se-main-font-size);
+	align-content: center;
+	margin-left: -10px;
+}
+.sun-editor .se-btn.se-btn-tool-pageNavigator ~ span::before {
+	content: '/';
+	margin: 0 0.6em;
 }
 
 /** --- Icons ---------------------------------------------------------- */
@@ -485,17 +597,25 @@
 
 .sun-editor button > svg,
 .sun-editor .se-svg {
-	width: 15px;
-	height: 15px;
+	width: 20px;
+	height: 20px;
 	margin: auto;
 	fill: currentColor;
 	display: block;
 	text-align: center;
 	float: none;
 }
-.sun-editor button > svg.se-mdi {
+.sun-editor button > svg.se-ci {
+	width: 15px;
+	height: 15px;
+}
+.sun-editor .se-text-prefix-icon {
 	width: 20px;
 	height: 20px;
+	float: left;
+}
+.sun-editor .se-text-prefix-icon svg {
+	vertical-align: middle;
 }
 
 /* sub button size */
@@ -520,22 +640,22 @@
 }
 .sun-editor button.se-side-btn-a {
 	float: left;
-	border-radius: 2px 0 0 2px;
+	border-radius: var(--se-border-radius) 0 0 var(--se-border-radius);
 	margin-right: 0;
 }
 .sun-editor button.se-side-btn-b {
 	float: left;
-	border-radius: 0 2px 2px 0;
+	border-radius: 0 var(--se-border-radius) var(--se-border-radius) 0;
 	margin-left: 0;
 }
 .sun-editor button.se-side-btn-before {
 	float: left;
 	margin-right: 0;
-	border-radius: 2px 0 0 2px;
+	border-radius: var(--se-border-radius) 0 0 var(--se-border-radius);
 }
 .sun-editor button.se-side-btn-after {
 	margin-left: 0;
-	border-radius: 0 2px 2px 0;
+	border-radius: 0 var(--se-border-radius) var(--se-border-radius) 0;
 }
 
 /* list button icons */
@@ -549,18 +669,11 @@
 	opacity: 0.5;
 }
 
-/* close class icon */
-.sun-editor .close > svg,
-.sun-editor .se-close-btn > svg {
-	width: 10px;
-	height: 10px;
-}
-
 /* se-select-btn icon */
 .sun-editor .se-btn-select > svg {
 	float: right;
-	width: 8px;
-	height: 8px;
+	width: 8px !important;
+	height: 8px !important;
 }
 
 /* se-btn-list inner icon */
@@ -589,7 +702,7 @@
 	font-style: normal;
 	font-variant: normal;
 	text-rendering: auto;
-	font-size: 15px;
+	font-size: var(--se-modal-title-font-size);
 	line-height: 2;
 }
 
@@ -621,35 +734,35 @@
 .sun-editor .se-arrow.se-arrow-up {
 	top: -12px;
 	border-top-width: 0;
-	border-bottom-color: #999;
+	border-bottom-color: var(--se-controller-border-color);
 }
 
 .sun-editor .se-arrow.se-arrow-up::after {
 	top: 1px;
 	content: ' ';
 	border-top-width: 0;
-	border-bottom-color: #fff;
+	border-bottom-color: var(--se-main-background-color);
 }
 
 /* arrow down */
 .sun-editor .se-arrow.se-arrow-down {
 	bottom: -12px;
 	border-bottom-width: 0;
-	border-top-color: #999;
+	border-top-color: var(--se-controller-border-color);
 }
 
 .sun-editor .se-arrow.se-arrow-down::after {
 	top: -12px;
 	content: ' ';
 	border-bottom-width: 0;
-	border-top-color: #fff;
+	border-top-color: var(--se-main-background-color);
 }
 
 /** --- container */
 .sun-editor .se-container {
 	position: relative;
-	width: 100%;
-	height: 100%;
+	width: auto;
+	height: auto;
 }
 
 /** --- loading box */
@@ -660,7 +773,7 @@
 	height: 100%;
 	top: 0;
 	left: 0;
-	background-color: #fff;
+	background-color: rgba(0, 0, 0, 0.35);
 	opacity: 0.7;
 	filter: alpha(opacity=70);
 	z-index: 2147483647;
@@ -677,9 +790,11 @@
 	left: 50%;
 	height: 44px;
 	width: 44px;
-	border-top: 2px solid #07d;
-	border-right: 2px solid transparent;
+	border: 2px solid transparent;
+	border-top: 2px solid var(--se-loading-color);
+	border-right: 2px solid var(--se-loading-color);
 	border-radius: 50%;
+	-webkit-animation: spinner 0.8s linear infinite;
 	animation: spinner 0.8s linear infinite;
 	margin: -25px 0 0 -25px;
 }
@@ -690,19 +805,26 @@
 	display: none;
 	width: 24px;
 	height: 24px;
-	color: #3288ff;
-	background-color: #fff;
-	border: 1px solid #3288ff;
-	opacity: 0.75;
-	border-radius: 2px;
+	color: var(--se-drag-over-color);
+	background-color: var(--se-main-background-color);
+	border: 1px solid var(--se-drag-over-color);
+	opacity: 0.95;
+	border-radius: var(--se-border-radius);
 	cursor: pointer;
 	z-index: 2147483647;
+	transition: opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease;
+}
+.sun-editor .se-line-breaker-component.se-on-selected {
+	color: var(--se-active-color);
+	background-color: var(--se-main-background-color);
+	border: 1px solid var(--se-active-color);
 }
 
 .sun-editor .se-line-breaker-component:hover {
 	opacity: 0.9;
-	color: #fff;
-	background-color: #4592ff;
+	color: var(--se-main-background-color);
+	background-color: var(--se-active-dark3-color);
+	border-color: var(--se-active-color);
 }
 
 /** --- toolbar ---------------------------------------------------------- */
@@ -714,8 +836,8 @@
 	overflow: visible;
 	padding: 0;
 	margin: 0;
-	background-color: #fff;
-	outline: 1px solid #e1e1e1;
+	background-color: var(--se-main-background-color);
+	outline: 1px solid var(--se-main-divider-color);
 	z-index: 7;
 }
 
@@ -734,20 +856,12 @@
 	z-index: 0 !important;
 }
 
-.sun-editor .se-toolbar-separator-vertical {
-	display: inline-block;
-	height: 38px;
-	width: 0px;
-	margin: 0px;
-	vertical-align: top;
-}
-
 /* inline toolbar */
 .sun-editor .se-toolbar.se-toolbar-inline {
 	display: none;
 	position: absolute;
-	box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
-	-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
+	box-shadow: 0 3px 9px var(--se-shadow-layer-color);
+	-webkit-box-shadow: 0 3px 9px var(--se-shadow-layer-color);
 }
 
 /* balloon toolbar */
@@ -756,8 +870,8 @@
 	position: absolute;
 	z-index: 2147483647;
 	width: auto;
-	box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
-	-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
+	box-shadow: 0 3px 9px var(--se-shadow-layer-color);
+	-webkit-box-shadow: 0 3px 9px var(--se-shadow-layer-color);
 }
 
 /* sticky toolbar */
@@ -774,25 +888,20 @@
 
 /* toolbar arrow up */
 .sun-editor .se-toolbar .se-arrow.se-arrow-up {
-	border-bottom-color: #e1e1e1;
+	border-bottom-color: var(--se-main-divider-color);
 }
 
 .sun-editor .se-toolbar .se-arrow.se-arrow-up::after {
-	border-bottom-color: #fff;
+	border-bottom-color: var(--se-main-background-color);
 }
 
 /* toolbar arrow down */
 .sun-editor .se-toolbar .se-arrow.se-arrow-down {
-	border-top-color: #e1e1e1;
+	border-top-color: var(--se-main-divider-color);
 }
 
 .sun-editor .se-toolbar .se-arrow.se-arrow-down::after {
-	border-top-color: #fff;
-}
-
-/* toolbar visible on scroll */
-.sun-editor .se-toolbar.se-toolbar-onscroll-hide {
-	visibility: hidden !important;
+	border-top-color: var(--se-main-background-color);
 }
 
 /** --- tool bar --- module --- button, module, group ----------------------------------------------------------  */
@@ -801,12 +910,23 @@
 	display: inline-block;
 }
 
+/* button group */
 .sun-editor .se-btn-module-border {
-	border: 1px solid #e1e1e1;
-	border-radius: 2px;
+	border: 1px solid var(--se-main-divider-color);
+	border: none;
+	border-radius: var(--se-border-radius);
 	margin-left: 1px;
 	margin-right: 1px;
 }
+/* separator vertical */
+.sun-editor .se-toolbar-separator-vertical {
+	display: inline-block;
+	height: var(--se-input-btn-size);
+	width: 1px;
+	margin: 1px;
+	vertical-align: top;
+	background-color: var(--se-main-divider-color);
+}
 
 .sun-editor .se-btn-module-enter {
 	display: block;
@@ -820,12 +940,12 @@
 /* ---more - layer */
 .sun-editor .se-toolbar-more-layer {
 	margin: 0 -3px;
-	background-color: #fff;
+	background-color: var(--se-main-background-color);
 }
 
 .sun-editor .se-toolbar-more-layer .se-more-layer {
 	display: none;
-	border-top: 1px solid #e1e1e1;
+	border-top: 1px solid var(--se-main-divider-color);
 }
 
 .sun-editor .se-toolbar-more-layer .se-more-layer .se-more-form {
@@ -872,8 +992,10 @@
 
 .sun-editor .se-btn-select .se-txt {
 	flex: auto;
+	display: flex;
 	text-align: left;
 	margin-right: 4px;
+	align-items: center;
 }
 
 .sun-editor .se-btn-select .se-not-arrow-text {
@@ -891,7 +1013,7 @@
 }
 
 .sun-editor .se-btn-select.se-btn-tool-format {
-	width: 82px;
+	width: 86px;
 }
 
 .sun-editor .se-btn-select.se-btn-tool-font-size .se-txt {
@@ -908,15 +1030,15 @@
 	border: 0 !important;
 }
 .sun-editor .se-btn-input input {
-	font-size: 13px;
-	height: 34px;
+	font-size: var(--se-main-font-size);
+	height: var(--se-input-btn-size);
 	border: 0;
 }
 .sun-editor .se-btn-input input:hover {
-	border: 1px solid #c1c1c1;
+	border: 1px solid var(--se-main-border-color);
 }
 .sun-editor .se-btn-input input:focus {
-	border: 1px solid #3288ff !important;
+	border: 1px solid var(--se-active-color) !important;
 	outline: 0;
 }
 
@@ -956,12 +1078,11 @@
 	left: 0px;
 	height: auto;
 	z-index: 5;
-	border: 1px solid #e1e1e1;
-	border-radius: 2px;
+	border: 1px solid var(--se-main-divider-color);
+	border-radius: var(--se-border-radius);
 	padding: 4px;
-	background-color: #fff;
-	-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
-	box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
+	background-color: var(--se-main-background-color);
+	box-shadow: 0 3px 9px var(--se-shadow-layer-color);
 	outline: 0 none;
 }
 
@@ -984,6 +1105,8 @@
 
 .sun-editor .se-list-inner :not(.se-list-horizontal) li > button {
 	min-width: 100%;
+	width: -webkit-max-content;
+	width: -moz-max-content;
 	width: max-content;
 }
 
@@ -1014,7 +1137,7 @@
 }
 
 .sun-editor .se-list-inner .se-list-checked li.se-checked * {
-	color: #4592ff;
+	color: var(--se-active-dark3-color);
 }
 
 .sun-editor .se-list-inner .se-list-checked li.se-checked .se-svg > svg {
@@ -1044,7 +1167,7 @@
 }
 
 .sun-editor .se-list-layer.se-list-font-family .default {
-	border-bottom: 1px solid #ccc;
+	border-bottom: 1px solid var(--se-input-btn-border-color);
 }
 
 /* dropdown layer - hr */
@@ -1055,7 +1178,7 @@
 .sun-editor .se-list-layer.se-list-line hr {
 	border-width: 1px 0 0;
 	height: 1px;
-	border-color: #333;
+	border-color: var(--se-edit-hr-color);
 }
 
 /* dropdown layer - align */
@@ -1086,11 +1209,11 @@
 }
 
 .sun-editor .se-list-layer.se-list-format ul p {
-	font-size: 13px;
+	font-size: var(--se-main-font-size);
 }
 
 .sun-editor .se-list-layer.se-list-format ul div {
-	font-size: 13px;
+	font-size: var(--se-main-font-size);
 	padding: 4px 2px;
 }
 
@@ -1125,30 +1248,30 @@
 }
 
 .sun-editor .se-list-layer.se-list-format ul blockquote {
-	font-size: 13px;
-	color: #999;
+	font-size: var(--se-main-font-size);
+	color: var(--se-edit-font-quote);
 	height: 22px;
 	margin: 0;
 	background-color: transparent;
 	line-height: 1.5;
 	border-style: solid;
-	border-color: #b1b1b1;
+	border-color: var(--se-edit-border-dark);
 	padding: 0 0 0 7px;
 	border-width: 0;
 	border-left-width: 5px;
 }
 
 .sun-editor .se-list-layer.se-list-format ul pre {
-	font-size: 13px;
-	color: #666;
+	font-size: var(--se-main-font-size);
+	color: var(--se-edit-font-pre);
 	padding: 4px 11px;
 	margin: 0;
-	background-color: #f9f9f9;
-	border: 1px solid #e1e1e1;
-	border-radius: 2px;
+	background-color: var(--se-edit-background-pre);
+	border: 1px solid var(--se-edit-border-light);
+	border-radius: var(--se-border-radius);
 }
 
-.sun-editor .sun-editor-editable[contenteditable='true'].se-copy-format-cursor {
+.sun-editor-editable[contenteditable='true'].se-copy-format-cursor {
 	cursor: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMjQgMTYiIHZlcnNpb249IjEuMSI+CjxnIGlkPSJzdXJmYWNlMSI+CjxwYXRoIHN0eWxlPSIgc3Ryb2tlOm5vbmU7ZmlsbC1ydWxlOm5vbnplcm87ZmlsbDpyZ2IoMCUsMCUsMCUpO2ZpbGwtb3BhY2l0eToxOyIgZD0iTSA0LjMzMjAzMSAxMi42Njc5NjkgQyA0LjMzMjAzMSAxMy4wMzUxNTYgNC40ODQzNzUgMTMuMzMyMDMxIDQuNjY3OTY5IDEzLjMzMjAzMSBMIDUuMzMyMDMxIDEzLjMzMjAzMSBMIDUuMzMyMDMxIDE0LjY2Nzk2OSBMIDQuNSAxNC42Njc5NjkgQyA0LjMxNjQwNiAxNC42Njc5NjkgNCAxNC4zNjcxODggNCAxNCBDIDQgMTQuMzY3MTg4IDMuNjgzNTk0IDE0LjY2Nzk2OSAzLjUgMTQuNjY3OTY5IEwgMi42Njc5NjkgMTQuNjY3OTY5IEwgMi42Njc5NjkgMTMuMzMyMDMxIEwgMy4zMzIwMzEgMTMuMzMyMDMxIEMgMy41MTU2MjUgMTMuMzMyMDMxIDMuNjY3OTY5IDEzLjAzNTE1NiAzLjY2Nzk2OSAxMi42Njc5NjkgTCAzLjY2Nzk2OSAzLjMzMjAzMSBDIDMuNjY3OTY5IDIuOTY0ODQ0IDMuNTE1NjI1IDIuNjY3OTY5IDMuMzMyMDMxIDIuNjY3OTY5IEwgMi42Njc5NjkgMi42Njc5NjkgTCAyLjY2Nzk2OSAxLjMzMjAzMSBMIDMuNSAxLjMzMjAzMSBDIDMuNjgzNTk0IDEuMzMyMDMxIDQgMS42MzI4MTIgNCAyIEMgNCAxLjYzMjgxMiA0LjMxNjQwNiAxLjMzMjAzMSA0LjUgMS4zMzIwMzEgTCA1LjMzMjAzMSAxLjMzMjAzMSBMIDUuMzMyMDMxIDIuNjY3OTY5IEwgNC42Njc5NjkgMi42Njc5NjkgQyA0LjQ4NDM3NSAyLjY2Nzk2OSA0LjMzMjAzMSAyLjk2NDg0NCA0LjMzMjAzMSAzLjMzMjAzMSBaIE0gNC4zMzIwMzEgMTIuNjY3OTY5ICIvPgo8cGF0aCBzdHlsZT0iIHN0cm9rZTpub25lO2ZpbGwtcnVsZTpub256ZXJvO2ZpbGw6cmdiKDAlLDAlLDAlKTtmaWxsLW9wYWNpdHk6MTsiIGQ9Ik0gMjAgMi42Njc5NjkgTCAyMCAyIEMgMjAgMS42MzI4MTIgMTkuNzAzMTI1IDEuMzMyMDMxIDE5LjMzMjAzMSAxLjMzMjAzMSBMIDExLjMzMjAzMSAxLjMzMjAzMSBDIDEwLjk2NDg0NCAxLjMzMjAzMSAxMC42Njc5NjkgMS42MzI4MTIgMTAuNjY3OTY5IDIgTCAxMC42Njc5NjkgNC42Njc5NjkgQyAxMC42Njc5NjkgNS4wMzUxNTYgMTAuOTY0ODQ0IDUuMzMyMDMxIDExLjMzMjAzMSA1LjMzMjAzMSBMIDE5LjMzMjAzMSA1LjMzMjAzMSBDIDE5LjcwMzEyNSA1LjMzMjAzMSAyMCA1LjAzNTE1NiAyMCA0LjY2Nzk2OSBMIDIwIDQgTCAyMC42Njc5NjkgNCBMIDIwLjY2Nzk2OSA2LjY2Nzk2OSBMIDE0IDYuNjY3OTY5IEwgMTQgMTQgQyAxNCAxNC4zNjcxODggMTQuMjk2ODc1IDE0LjY2Nzk2OSAxNC42Njc5NjkgMTQuNjY3OTY5IEwgMTYgMTQuNjY3OTY5IEMgMTYuMzY3MTg4IDE0LjY2Nzk2OSAxNi42Njc5NjkgMTQuMzY3MTg4IDE2LjY2Nzk2OSAxNCBMIDE2LjY2Nzk2OSA4IEwgMjIgOCBMIDIyIDIuNjY3OTY5IFogTSAyMCAyLjY2Nzk2OSAiLz4KPC9nPgo8L3N2Zz4K')
 			0 8,
 		text;
@@ -1186,7 +1309,7 @@
 	width: 4px;
 	height: 100%;
 	margin-left: -2px;
-	background-color: #80bdff;
+	background-color: var(--se-active-dark-color);
 	opacity: 0.4;
 	pointer-events: none;
 	display: none;
@@ -1199,7 +1322,7 @@
 	width: 100%;
 	height: 5px;
 	margin-top: -3px;
-	background-color: #80bdff;
+	background-color: var(--se-active-dark-color);
 	opacity: 0.4;
 	pointer-events: none;
 	display: none;
@@ -1211,7 +1334,7 @@
 	width: 4px;
 	height: 100%;
 	margin-left: -1px;
-	border-left: 1px dashed #f0c20a;
+	border-left: 1px dashed var(--se-drag-over-color);
 	background-color: transparent;
 	opacity: 0.8;
 	pointer-events: none;
@@ -1223,7 +1346,7 @@
 	width: 100%;
 	height: 4px;
 	margin-top: -1px;
-	border-top: 1px dashed #f0c20a;
+	border-top: 1px dashed var(--se-drag-over-color);
 	background-color: transparent;
 	opacity: 0.8;
 	pointer-events: none;
@@ -1234,22 +1357,22 @@
 .sun-editor .se-selector-table {
 	display: none;
 	position: absolute;
-	top: 34px;
+	overflow: hidden;
+	top: var(--se-input-btn-size);
 	left: 1px;
 	z-index: 5;
 	padding: 5px 0;
 	float: left;
 	margin: 2px 0 0;
-	font-size: 14px;
+	font-size: var(--se-main-font-size);
 	text-align: left;
 	list-style: none;
-	background-color: #fff;
+	background-color: var(--se-main-background-color);
 	-webkit-background-clip: padding-box;
 	background-clip: padding-box;
-	border: 1px solid #ccc;
-	border-radius: 2px;
-	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+	border: 1px solid var(--se-input-btn-border-color);
+	border-radius: var(--se-border-radius);
+	box-shadow: 0 6px 12px var(--se-shadow-layer-color);
 }
 
 .sun-editor .se-selector-table .se-table-size {
@@ -1297,6 +1420,8 @@
 /* dropdown layer --- color selector button */
 .sun-editor .se-list-layer .se-selector-color {
 	display: block;
+	width: -webkit-max-content;
+	width: -moz-max-content;
 	width: max-content;
 	max-width: 252px;
 	height: auto;
@@ -1319,18 +1444,25 @@
 
 .sun-editor .se-list-layer .se-selector-color .se-color-pallet button {
 	display: block;
+	cursor: default;
 	width: 28px;
 	height: 28px;
 	margin: 0;
 	border-radius: 0;
-	border: 1px solid #fff;
+	border: 0;
 	text-indent: -9999px;
+	transition: transform 0.2s, box-shadow 0.2s;
 }
 
 .sun-editor .se-list-layer .se-selector-color .se-color-pallet button.active,
-.sun-editor .se-list-layer .se-selector-color .se-color-pallet button:hover,
-.sun-editor .se-list-layer .se-selector-color .se-color-pallet button:focus {
-	border: 3px solid #fff;
+.sun-editor .se-list-layer .se-selector-color .se-color-pallet button:hover {
+	box-shadow: 0 0 0 1px transparent inset;
+	transform: scale(0.8);
+}
+.sun-editor .se-list-layer .se-selector-color .se-color-pallet button.active > svg {
+	color: #fff;
+	stroke: #000;
+	stroke-width: 2px;
 }
 
 /* --- hue slider -------------------------------------------------------------- */
@@ -1426,12 +1558,12 @@
 	flex: auto;
 	display: inline-block;
 	width: auto;
-	height: 34px;
-	font-size: 12px;
+	height: var(--se-input-btn-size);
+	font-size: var(--se-btn-font-size);
 	margin: 1px 0 1px 0;
 	padding: 0 4px;
 	/* border-radius: 0.25rem; */
-	border: 1px solid #ccc;
+	border: 1px solid var(--se-input-btn-border-color);
 }
 
 .sun-editor .se-btn-group input {
@@ -1441,8 +1573,8 @@
 .sun-editor .se-form-group button,
 .sun-editor .se-dropdown-form-group button {
 	float: right;
-	width: 34px;
-	height: 34px;
+	width: var(--se-input-btn-size);
+	height: var(--se-input-btn-size);
 	margin: 1px;
 }
 
@@ -1470,22 +1602,23 @@
 }
 
 .sun-editor .se-form-group-label label {
-	font-size: 13px;
+	font-size: var(--se-main-font-size);
 	font-weight: bold;
 }
 
 /** form group - dropdown input */
 .sun-editor .se-dropdown .se-form-group input {
-	height: 34px;
-	color: #555;
+	height: var(--se-input-btn-size);
+	color: var(--se-dropdown-font-color);
 }
 
 .sun-editor .se-dropdown .se-form-group .se-color-input:focus {
-	border-bottom: 3px solid #b1b1b1;
+	border-bottom: 3px solid var(--se-main-outline-color);
 }
 
 /** --- editor area */
 .sun-editor .se-wrapper {
+	display: flex;
 	position: relative !important;
 	width: 100%;
 	height: auto;
@@ -1495,8 +1628,9 @@
 
 .sun-editor .se-wrapper .se-wrapper-inner {
 	width: 100%;
+	max-width: 100%;
 	height: 100%;
-	min-height: 65px;
+	min-height: var(--se-min-height);
 	overflow-y: auto;
 	overflow-x: auto;
 	-webkit-overflow-scrolling: touch;
@@ -1512,20 +1646,23 @@
 	outline: none;
 }
 
+.sun-editor .se-wrapper .se-code-wrapper {
+	width: 100%;
+}
 .sun-editor .se-wrapper .se-code-wrapper .se-code-view-line {
-	background-color: #f5f5f5;
-	color: #222;
+	background-color: var(--se-code-view-color);
+	color: var(--se-code-view-background-color);
 	text-align: right;
 	width: 50px;
-	font-size: 13px;
+	font-size: var(--se-main-font-size);
 	padding-right: 6px;
 	overflow: hidden;
 }
 
 .sun-editor .se-wrapper .se-code-viewer {
-	background-color: #222;
-	color: #f5f5f5;
-	font-size: 13px;
+	background-color: var(--se-code-view-background-color);
+	color: var(--se-code-view-color);
+	font-size: var(--se-main-font-size);
 	word-break: break-all;
 	padding: 4px;
 	margin: 0;
@@ -1534,9 +1671,12 @@
 
 .sun-editor .se-wrapper .se-wrapper-wysiwyg {
 	display: block;
+	position: relative;
+	caret-color: var(--se-caret-color);
 }
 
 .sun-editor-editable[contenteditable='true'] .se-disable-pointer *,
+.sun-editor-editable[contenteditable='true'] .se-math *,
 .sun-editor-editable[contenteditable='true'] .katex * {
 	pointer-events: none;
 }
@@ -1548,19 +1688,15 @@
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	z-index: 1;
-	color: #b1b1b1;
-	font-size: 13px;
+	color: var(--se-main-outline-color);
+	font-size: var(--se-main-font-size);
 	line-height: 1.5;
 	top: 0;
 	left: 0;
 	right: 0;
 	overflow: hidden;
-	margin-top: 0px;
-	padding-top: 16px;
-	padding-left: 16px;
-	margin-left: 0px;
-	padding-right: 16px;
-	margin-right: 0px;
+	padding: var(--se-edit-inner-padding);
+	margin: 0;
 	pointer-events: none;
 	backface-visibility: hidden;
 	-webkit-backface-visibility: hidden;
@@ -1573,9 +1709,9 @@
 	width: auto;
 	height: auto;
 	min-height: 16px;
-	border-top: 1px solid #e1e1e1;
+	border-top: 1px solid var(--se-main-divider-color);
 	padding: 0 4px;
-	background-color: #fff;
+	background-color: var(--se-main-background-color);
 	cursor: ns-resize;
 }
 
@@ -1598,6 +1734,7 @@
 	-webkit-user-select: none;
 	-ms-user-select: none;
 	z-index: 2147483647;
+	background-color: transparent;
 }
 
 /** status bar - nabigation */
@@ -1606,10 +1743,10 @@
 	position: relative;
 	width: auto;
 	height: auto;
-	color: #666;
+	color: var(--se-statusbar-font-color);
 	margin: 0;
 	padding: 0;
-	font-size: 10px;
+	font-size: var(--se-statusbar-font-size);
 	line-height: 1.5;
 	background: transparent;
 }
@@ -1623,13 +1760,14 @@
 	height: auto;
 	margin: 0;
 	padding: 0;
-	color: #999;
-	font-size: 13px;
+	color: var(--se-statusbar-font-color);
+	font-size: var(--se-main-font-size);
 	background: transparent;
 }
 
 .sun-editor .se-status-bar .se-char-counter-wrapper.se-blink {
-	color: #b94a48;
+	color: var(--se-error-color);
+	-webkit-animation: blinker 0.2s linear infinite;
 	animation: blinker 0.2s linear infinite;
 }
 
@@ -1638,7 +1776,7 @@
 }
 
 /* --- modal ---------------------------------------------------------- */
-.sun-editor .se-modal {
+.sun-editor .se-modal-area {
 	position: fixed;
 	display: none;
 	top: 0;
@@ -1647,28 +1785,31 @@
 	height: 100%;
 	z-index: 2147483647;
 }
+.sun-editor .se-modal-area.se-backdrop-show {
+	display: block;
+}
 
-.sun-editor .se-modal label,
-.sun-editor .se-modal input,
-.sun-editor .se-modal button {
-	font-size: 14px;
+.sun-editor .se-modal-area label,
+.sun-editor .se-modal-area input,
+.sun-editor .se-modal-area button {
+	font-size: var(--se-modal-input-font-size);
 	line-height: 1.5;
-	color: #111;
+	color: var(--se-main-color);
 	margin: 0;
 }
 
-.sun-editor .se-modal .se-modal-back {
+.sun-editor .se-modal-area .se-modal-back {
 	position: absolute;
 	width: 100%;
 	height: 100%;
 	top: 0;
 	left: 0;
-	background-color: #222;
+	background-color: var(--se-overlay-background-color);
 	opacity: 0.5;
 }
 
 /* modal - modal */
-.sun-editor .se-modal .se-modal-inner {
+.sun-editor .se-modal-area .se-modal-inner {
 	position: absolute;
 	width: 100%;
 	height: 100%;
@@ -1676,199 +1817,331 @@
 	left: 0;
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-content {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-content {
 	position: relative;
 	display: none;
 	width: auto;
 	max-width: 500px;
 	margin: 1.75rem auto;
-	background-color: #fff;
+	background-color: var(--se-modal-background-color);
+	color: var(--se-modal-color);
 	-webkit-background-clip: padding-box;
 	background-clip: padding-box;
 	border: 1px solid rgba(0, 0, 0, 0.2);
-	border-radius: 2px;
+	border-radius: var(--se-border-radius);
 	outline: 0;
-	-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
-	box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
+	box-shadow: 0 3px 9px var(--se-shadow-layer-color);
+}
+.sun-editor .se-modal-area .se-modal-inner .se-modal-content.se-modal-show {
+	display: block;
+}
+
+/* modal - resize handle */
+/* modal - resize handle - w */
+.sun-editor .se-modal-area .se-modal-inner .se-modal-content .se-modal-resize-handle-w {
+	position: relative;
+	display: block;
+	width: 100%;
+	height: 10px;
+	cursor: ns-resize;
+	bottom: 0;
+	margin: 0;
+}
+.sun-editor .se-modal-area .se-modal-inner .se-modal-content .se-modal-resize-handle-w::before {
+	content: '';
+	position: relative;
+	display: block;
+	width: 100%;
+	height: 1px;
+	background-color: var(--se-main-outline-color);
+	margin: 1px 0;
+}
+
+/* modal - resize handle - h */
+.sun-editor .se-modal-area .se-modal-inner .se-modal-content .se-modal-resize-handle-h {
+	position: absolute;
+	display: block;
+	width: 10px;
+	top: 15px;
+	height: calc(100% - 27px);
+	cursor: ew-resize;
+	right: 0;
+}
+.sun-editor .se-modal-area .se-modal-inner .se-modal-content .se-modal-resize-handle-h::before {
+	content: '';
+	position: relative;
+	display: block;
+	width: 1px;
+	height: 100%;
+	background-color: var(--se-main-outline-color);
+	margin: 0 1px;
+}
+
+/* modal - resize handle - c */
+.sun-editor .se-modal-area .se-modal-inner .se-modal-content .se-modal-resize-handle-c {
+	position: absolute;
+	display: block;
+	width: 9px;
+	height: 9px;
+	cursor: nwse-resize;
+	right: 4px;
+	bottom: 1px;
+}
+.sun-editor .se-modal-area .se-modal-inner .se-modal-content .se-modal-resize-handle-c::before,
+.sun-editor .se-modal-area .se-modal-inner .se-modal-content .se-modal-resize-handle-c::after {
+	content: '';
+	position: absolute;
+	display: block;
+	background-color: var(--se-main-outline-color);
+}
+.sun-editor .se-modal-area .se-modal-inner .se-modal-content .se-modal-resize-handle-c::before {
+	width: 100%;
+	height: 2px;
+	top: 50%;
+	left: 0;
+	transform: translateY(-50%);
+}
+.sun-editor .se-modal-area .se-modal-inner .se-modal-content .se-modal-resize-handle-c::after {
+	width: 2px;
+	height: 100%;
+	left: 50%;
+	top: 0;
+	transform: translateX(-50%);
+}
+
+/* modal - resize handle - hover, active */
+.sun-editor .se-modal-area .se-modal-inner .se-modal-content .se-modal-resize-handle-w:hover::before,
+.sun-editor .se-modal-area .se-modal-inner .se-modal-content .se-modal-resize-handle-w.active::before,
+.sun-editor .se-modal-area .se-modal-inner .se-modal-content .se-modal-resize-handle-h:hover::before,
+.sun-editor .se-modal-area .se-modal-inner .se-modal-content .se-modal-resize-handle-h.active::before,
+.sun-editor .se-modal-area .se-modal-inner .se-modal-content .se-modal-resize-handle-c:hover::before,
+.sun-editor .se-modal-area .se-modal-inner .se-modal-content .se-modal-resize-handle-c:hover::after,
+.sun-editor .se-modal-area .se-modal-inner .se-modal-content .se-modal-resize-handle-c.active::before,
+.sun-editor .se-modal-area .se-modal-inner .se-modal-content .se-modal-resize-handle-c.active::after {
+	background-color: var(--se-active-dark4-color);
+}
+
+/* modal - large */
+.sun-editor .se-modal-area .se-modal-inner .se-modal-content.se-modal-large {
+	max-width: 750px;
+	width: 100%;
+}
+.sun-editor .se-modal-area .se-modal-inner .se-modal-content.se-modal-large .se-modal-body {
+	height: 50vh;
+}
+
+/* modal - responsive */
+.sun-editor .se-modal-area .se-modal-inner .se-modal-content.se-modal-responsive {
+	width: -webkit-max-content;
+	width: -moz-max-content;
+	width: max-content;
+	height: -webkit-max-content;
+	height: -moz-max-content;
+	height: max-content;
+	max-width: 100%;
+	max-height: 90vh;
 }
 
 @media screen and (max-width: 509px) {
-	.sun-editor .se-modal .se-modal-inner .se-modal-content {
-		width: 100%;
+	.sun-editor .se-modal-area .se-modal-inner .se-modal-content {
+		width: 100% !important;
+		min-width: 100% !important;
+		max-width: 100% !important;
 	}
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-content label {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-content.se-modal-responsive .se-modal-resize-form {
+	max-width: 100%;
+}
+
+.sun-editor .se-modal-area .se-modal-inner .se-modal-content label {
 	display: inline-block;
 	max-width: 100%;
 	margin-bottom: 5px;
 	font-weight: bold;
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-content .se-btn-primary {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-content .se-btn-primary {
 	display: inline-block;
 	padding: 5px 11px;
 	margin: 0 0 10px 0 !important;
-	font-size: 14px;
+	font-size: var(--se-modal-input-font-size);
 	font-weight: normal;
-	line-height: 1.42857143;
+	line-height: 1.4;
 	text-align: center;
 	white-space: nowrap;
 	vertical-align: middle;
-	-ms-touch-action: manipulation;
 	touch-action: manipulation;
-	border-radius: 2px;
+	border-radius: var(--se-border-radius);
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-header {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-header {
 	height: 50px;
 	padding: 6px 15px;
-	border-bottom: 1px solid #e5e5e5;
+	border-bottom: 1px solid var(--se-modal-border-color);
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-header .se-close-btn {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-header .se-close-btn {
 	float: right;
 	font-weight: bold;
-	text-shadow: 0 1px 0 #fff;
+	text-shadow: 0 1px 0 var(--se-main-background-color);
 	filter: alpha(opacity=100);
 	opacity: 1;
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-header .se-modal-title {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-header .se-modal-title {
 	float: left;
-	font-size: 15px;
+	font-size: var(--se-modal-title-font-size);
 	font-weight: bold;
 	margin: 0;
 	padding: 0;
 	line-height: 2.5;
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-body {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-body {
 	position: relative;
-	padding: 15px 15px 5px 15px;
+	padding: 15px 15px 10px 15px;
+}
+.sun-editor .se-modal-area .se-modal-inner .se-modal-body-top {
+	position: relative;
+	padding: 0px 15px 5px 15px;
+}
+.sun-editor .se-modal-area .se-modal-inner .se-modal-body-bottom {
+	position: relative;
+	padding: 5px 15px 0px 15px;
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-form {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form {
 	margin-bottom: 10px;
 }
-.sun-editor .se-modal .se-modal-inner .se-modal-form .se-modal-flex-form {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form .se-modal-flex-form {
 	position: relative;
 	display: flex;
 }
-.sun-editor .se-modal .se-modal-inner .se-modal-form .se-modal-flex-form .se-btn {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form .se-modal-flex-form .se-modal-flex-group {
+	border: 1px dashed var(--se-modal-border-color);
+	padding: 4px;
+	padding-right: 0;
+	margin-right: 4px;
+}
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form .se-modal-flex-form .se-btn {
 	margin-right: 4px;
 	margin-left: 0;
-	border: 1px solid #ccc;
+	border: 1px solid var(--se-input-btn-border-color);
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-form-footer {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form-footer {
 	margin-top: 10px;
 	margin-bottom: 0;
 }
 
-.sun-editor .se-modal .se-modal-inner input:disabled {
-	background-color: #f3f3f3;
+.sun-editor .se-modal-area .se-modal-inner input:disabled {
+	background-color: var(--se-modal-input-disabled-background-color);
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-size-text {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-size-text {
 	width: 100%;
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-size-text .size-w {
-	width: 70px;
+.sun-editor .se-modal-area .se-modal-inner .se-modal-size-text .size-w {
+	width: var(--se-modal-input-width);
 	text-align: center;
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-size-text .size-h {
-	width: 70px;
+.sun-editor .se-modal-area .se-modal-inner .se-modal-size-text .size-h {
+	width: var(--se-modal-input-width);
 	text-align: center;
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-size-x {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-size-x {
 	margin: 0 8px 0 8px;
 	width: 25px;
 	text-align: center;
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-footer {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-footer {
 	height: auto;
 	min-height: 55px;
 	padding: 10px 15px 0px 15px;
 	text-align: right;
-	border-top: 1px solid #e5e5e5;
+	border-top: 1px solid var(--se-modal-border-color);
+}
+
+.sun-editor .se-modal-area .se-modal-inner .se-modal-footer .se-btn {
+	float: left;
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-footer > div {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-footer > div {
 	float: left;
 	line-height: 1.7;
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-footer > div > label {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-footer > div > label {
 	margin: 0 5px 0 0;
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-btn-radio {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-btn-radio {
 	margin-left: 12px;
 	margin-right: 6px;
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-btn-check {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-btn-check {
 	margin-left: 12px;
 	margin-right: 4px;
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-btn-check:disabled + span {
-	color: #999;
+.sun-editor .se-modal-area .se-modal-inner .se-modal-btn-check:disabled + span {
+	color: var(--se-modal-input-disabled-color);
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-form-footer .se-modal-btn-check {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form-footer .se-modal-btn-check {
 	margin-left: 0;
 	margin-right: 4px;
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-form-footer label:first-child {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form-footer label:first-child {
 	margin-right: 16px;
 	margin-left: 0px;
 }
 
 /* modal - modal - form - files */
-.sun-editor .se-modal .se-modal-inner .se-modal-form .se-modal-form-files {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form .se-modal-form-files {
 	position: relative;
 	display: flex;
 	align-items: center;
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-form .se-modal-form-files > input {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form .se-modal-form-files > input {
 	flex: auto;
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-form .se-modal-form-files .se-modal-files-edge-button {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form .se-modal-form-files .se-modal-files-edge-button {
 	flex: none;
 	opacity: 0.8;
-	border: 1px solid #ccc;
+	border: 1px solid var(--se-input-btn-border-color);
 	margin-left: 1px;
 }
 
 /* modal - modal - input */
-.sun-editor .se-modal .se-modal-inner .se-modal-form .se-input-select {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form .se-input-select {
 	display: inline-block;
 	width: auto;
-	height: 34px;
-	font-size: 14px;
+	height: var(--se-input-btn-size);
+	font-size: var(--se-modal-input-font-size);
 	text-align: center;
-	line-height: 1.42857143;
+	line-height: 1.4;
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-form .se-input-control {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form .se-input-control {
 	display: inline-block;
-	width: 70px;
-	height: 34px;
-	font-size: 14px;
+	width: var(--se-modal-input-width);
+	height: var(--se-input-btn-size);
+	font-size: var(--se-modal-input-font-size);
 	text-align: center;
-	line-height: 1.42857143;
+	line-height: 1.4;
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-form .se-flex-input-wrapper {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form .se-flex-input-wrapper {
 	display: block;
 	position: relative;
 	width: 100%;
@@ -1876,23 +2149,23 @@
 	padding: 0;
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-form .se-flex-input-wrapper > .se-input-form-abs {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form .se-flex-input-wrapper > .se-input-form-abs {
 	display: block;
 	position: absolute;
 	width: 100%;
 	height: 100%;
 	padding: 0;
 	margin: 0;
-	background-color: #f9f9f9;
-	border: 2px dashed #ccc;
+	background-color: var(--se-modal-file-input-background-color);
+	border: 2px dashed var(--se-input-btn-border-color);
 	pointer-events: none;
 }
-.sun-editor .se-modal .se-modal-inner .se-modal-form .se-flex-input-wrapper > .se-input-form-abs * {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form .se-flex-input-wrapper > .se-input-form-abs * {
 	pointer-events: none;
 	vertical-align: middle;
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-form .se-flex-input-wrapper > .se-input-form-abs > div {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form .se-flex-input-wrapper > .se-input-form-abs > div {
 	display: block;
 	position: relative;
 	padding-top: 3px;
@@ -1900,70 +2173,72 @@
 	height: 100%;
 	margin: auto;
 }
-.sun-editor .se-modal .se-modal-inner .se-modal-form .se-flex-input-wrapper > .se-input-form-abs > div .se-input-file-w {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form .se-flex-input-wrapper > .se-input-form-abs > div .se-input-file-w {
+	width: -webkit-max-content;
+	width: -moz-max-content;
 	width: max-content;
 	max-width: 100%;
 	margin: auto;
 	padding: 0 4px;
 }
-.sun-editor .se-modal .se-modal-inner .se-modal-form .se-flex-input-wrapper > .se-input-form-abs > div .se-input-file-icon-up,
-.sun-editor .se-modal .se-modal-inner .se-modal-form .se-flex-input-wrapper > .se-input-form-abs > div .se-input-file-icon-files {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form .se-flex-input-wrapper > .se-input-form-abs > div .se-input-file-icon-up,
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form .se-flex-input-wrapper > .se-input-form-abs > div .se-input-file-icon-files {
 	display: inline-block;
 	width: 20px;
 }
-.sun-editor .se-modal .se-modal-inner .se-modal-form .se-flex-input-wrapper > .se-input-form-abs > div .se-input-file-icon-files {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form .se-flex-input-wrapper > .se-input-form-abs > div .se-input-file-icon-files {
 	display: none;
 }
-.sun-editor .se-modal .se-modal-inner .se-modal-form .se-flex-input-wrapper > .se-input-form-abs > div .se-input-file-cnt {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form .se-flex-input-wrapper > .se-input-form-abs > div .se-input-file-cnt {
 	display: inline;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-form .se-input-form {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form .se-input-form {
 	display: block;
 	width: 100%;
-	height: 34px;
-	font-size: 14px;
-	line-height: 1.42857143;
+	height: var(--se-input-btn-size);
+	font-size: var(--se-modal-input-font-size);
+	line-height: 1.4;
 	padding: 0 4px;
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-form .se-input-form.se-input-url {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form .se-input-form.se-input-url {
 	direction: ltr;
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-form .se-input-form.se-input-url:disabled {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form .se-input-form.se-input-url:disabled {
 	text-decoration: line-through;
-	color: #999;
+	color: var(--se-modal-input-disabled-color);
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-form .se-video-ratio {
-	width: 70px;
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form .se-modal-ratio {
+	width: var(--se-modal-input-width);
 	margin-left: 4px;
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-form a {
-	color: #004cff;
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form a {
+	color: var(--se-modal-anchor-color);
 }
 
 /* modal - revert button */
-.sun-editor .se-modal .se-modal-inner .se-modal-btn-revert {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-btn-revert {
 	float: right;
-	border: 1px solid #ccc;
+	border: 1px solid var(--se-input-btn-border-color);
 }
 
 /* modal - inner tab */
 .sun-editor .se-modal-tabs {
 	width: 100%;
 	height: 25px;
-	border-bottom: 1px solid #e5e5e5;
+	border-bottom: 1px solid var(--se-modal-border-color);
 }
 
 .sun-editor .se-modal-tabs button {
-	background-color: #e5e5e5;
-	border-right: 1px solid #e5e5e5;
+	background-color: var(--se-modal-border-color);
+	border-right: 1px solid var(--se-modal-border-color);
 	float: left;
 	outline: none;
 	padding: 2px 13px;
@@ -1971,65 +2246,65 @@
 }
 
 .sun-editor .se-modal-tabs button:hover {
-	background-color: #fff;
+	background-color: var(--se-main-background-color);
 }
 
 .sun-editor .se-modal-tabs button.active {
-	background-color: #fff;
+	background-color: var(--se-main-background-color);
 	border-bottom: 0;
 }
 
 /* modal - modal - math */
-.sun-editor .se-modal .se-modal-inner .se-modal-form .se-input-form.se-math-exp {
-	resize: vertical;
-	height: 14em;
-	border: 1px solid #3f9dff;
-	font-size: 13px;
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form .se-input-form.se-math-exp {
+	border: 1px solid var(--se-active-dark4-color);
+	font-size: var(--se-main-font-size);
 	padding: 4px;
 	direction: ltr;
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-form .se-input-select.se-math-size {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form .se-input-select.se-math-size {
 	width: 6em;
 	height: 28px;
 	margin-left: 1em;
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-form .se-math-preview {
-	font-size: 13px;
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form .se-math-preview {
+	font-size: var(--se-main-font-size);
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-form .se-math-preview > span {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form .se-math-preview > span {
 	display: inline-block;
-	-webkit-box-shadow: 0 0 0 0.1rem #d0e3ff;
-	box-shadow: 0 0 0 0.1rem #d0e3ff;
+	box-shadow: 0 0 0 0.1rem var(--se-active-light3-color);
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-form .se-math-preview > span * {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form .se-math-preview > span * {
 	direction: ltr;
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-form .se-math-preview > .se-math-katex-error {
-	color: #b94a48;
-	-webkit-box-shadow: 0 0 0 0.1rem #f2dede;
-	box-shadow: 0 0 0 0.1rem #f2dede;
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form .se-math-preview > .se-math-error {
+	color: var(--se-error-color);
+	box-shadow: 0 0 0 0.1rem var(--se-error-light3-color);
 }
 
-.sun-editor .se-modal .se-modal-inner .se-modal-form .se-math-preview > .se-math-katex-error svg {
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form .se-math-preview > .se-math-error svg {
 	width: auto;
 	height: 30px;
-	color: #b94a48;
+	color: var(--se-error-color);
+}
+
+.sun-editor .se-modal-area .se-modal-inner .se-modal-form .se-math-preview .MathJax {
+	margin: 0.5em 0 !important;
 }
 
 /* modal - modal - link preview */
-.sun-editor .se-modal .se-modal-inner .se-link-preview {
+.sun-editor .se-modal-area .se-modal-inner .se-link-preview {
 	display: block;
 	height: auto;
-	max-height: 18px;
-	font-size: 13px;
+	padding-top: 4px;
+	font-size: var(--se-main-font-size);
 	font-weight: normal;
 	font-family: inherit;
-	color: #666;
+	color: var(--se-modal-preview-color);
 	background-color: transparent;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -2039,53 +2314,53 @@
 }
 
 /* modal - modal - anchor module */
-.sun-editor .se-modal .se-modal-inner .se-anchor-preview-form {
+.sun-editor .se-modal-area .se-modal-inner .se-anchor-preview-form {
 	width: 100%;
 	display: flex;
 	margin-top: 4px;
 }
 
-.sun-editor .se-modal .se-modal-inner .se-anchor-preview-form .se-svg.se-anchor-preview-icon {
+.sun-editor .se-modal-area .se-modal-inner .se-anchor-preview-form .se-svg.se-anchor-preview-icon {
 	flex: unset;
 	display: none;
 	line-height: 1;
 	margin: 2px;
-	color: #4592ff;
+	color: var(--se-active-dark3-color);
 }
 
-.sun-editor .se-modal .se-modal-inner .se-anchor-preview-form .se-link-preview {
+.sun-editor .se-modal-area .se-modal-inner .se-anchor-preview-form .se-link-preview {
 	flex: 1;
 	margin: 0;
 }
 
 /* modal - modal - anchor module - rel select */
-.sun-editor .se-modal .se-modal-inner .se-anchor-rel {
+.sun-editor .se-modal-area .se-modal-inner .se-anchor-rel {
 	position: relative;
-	height: 34px;
+	height: var(--se-input-btn-size);
 }
-.sun-editor .se-modal .se-modal-inner .se-anchor-rel-btn {
+.sun-editor .se-modal-area .se-modal-inner .se-anchor-rel-btn {
 	border-width: 1px;
 }
 
-.sun-editor .se-modal .se-modal-inner .se-anchor-rel-wrapper {
+.sun-editor .se-modal-area .se-modal-inner .se-anchor-rel-wrapper {
 	display: flex;
-	height: 34px;
+	height: var(--se-input-btn-size);
 	line-height: 1;
 	padding: 0 6px;
 	align-items: center;
 }
 
-.sun-editor .se-modal .se-modal-inner .se-anchor-rel-preview {
+.sun-editor .se-modal-area .se-modal-inner .se-anchor-rel-preview {
 	word-break: break-word;
 	white-space: pre-wrap;
 	overflow-wrap: break-word;
 	text-align: left;
 }
 
-/* .sun-editor .se-modal .se-modal-inner .se-modal-form .se-mention-item {line-height:28px;min-height:25px;padding:0 5px;cursor:pointer;}
-.sun-editor .se-modal .se-modal-inner .se-modal-form .se-mention-item:hover {background-color:#e1e1e1}
-.sun-editor .se-modal .se-modal-inner .se-modal-form .se-mention-item.se-mention-active {background-color: #d1d1d1; border-radius:3px;}
-.sun-editor .se-modal .se-modal-inner .se-modal-form .se-mention-search {margin-bottom: 10px;} */
+/* modal - modal - canvas */
+.sun-editor .se-modal-area .se-modal-inner .se-modal-body .se-drawing-canvas {
+	outline: 1px solid var(--se-main-outline-color);
+}
 
 /** --- controller ---------------------------------------------------------- */
 .sun-editor .se-controller {
@@ -2095,7 +2370,7 @@
 	z-index: 2147483646;
 	padding: 2px 2px 0 2px;
 	margin: 0;
-	border: 1px solid #999;
+	border: 1px solid var(--se-controller-border-color);
 	text-align: start;
 	text-decoration: none;
 	text-shadow: none;
@@ -2105,7 +2380,8 @@
 	word-spacing: normal;
 	word-wrap: normal;
 	white-space: normal;
-	background-color: #fff;
+	background-color: var(--se-controller-background-color);
+	color: var(--se-controller-color);
 	-webkit-background-clip: padding-box;
 	background-clip: padding-box;
 	line-break: auto;
@@ -2115,10 +2391,12 @@
 	border: none;
 	padding: 0;
 }
+.sun-editor .se-controller.se-controller-simple-input {
+	padding: 4px 3px 0 3px;
+}
 
 .sun-editor .se-controller:not(.se-resizing-container) {
-	-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+	box-shadow: 0 5px 10px var(--se-shadow-controller-color);
 }
 
 .sun-editor-editable[contenteditable='true'] figure a,
@@ -2133,13 +2411,6 @@
 	z-index: 2;
 }
 
-.sun-editor-editable[contenteditable='true'] figure figcaption:focus {
-	border-color: #80bdff;
-	outline: 0;
-	-webkit-box-shadow: 0 0 0 0.2rem #c7deff;
-	box-shadow: 0 0 0 0.2rem #c7deff;
-}
-
 .sun-editor-editable[contenteditable='true']:not(.se-read-only) figure:not(.se-input-component)::after {
 	position: absolute;
 	content: '';
@@ -2154,13 +2425,19 @@
 }
 
 .sun-editor-editable[contenteditable='true'] .se-component {
-	outline: 1px dashed #e1e1e1;
+	outline: 1px dashed var(--se-main-divider-color);
+}
+
+.sun-editor-editable[contenteditable='true'] figure,
+.sun-editor-editable[contenteditable='true'] hr {
+	outline: 2px solid transparent;
 }
 
 .sun-editor-editable[contenteditable='true'] .se-component:not(:has(figure)).se-component-selected,
 .sun-editor-editable[contenteditable='true'] figure.se-component-selected,
 .sun-editor-editable[contenteditable='true'] .se-component.se-component-selected > figure {
-	outline: 2px solid #80bdff;
+	outline: 2px solid var(--se-active-dark-color);
+	transition: outline-color 0.2s ease-in-out, outline-width 0.2s ease-in-out;
 }
 
 .sun-editor-editable[contenteditable='true'] .se-component figure.se-figure-selected:not(.se-figure-over-selected)::after {
@@ -2168,22 +2445,28 @@
 }
 
 .sun-editor-editable[contenteditable='true'] .se-copy {
-	background-color: #d1d1d1;
+	background-color: var(--se-main-border-color);
 	opacity: 0.3;
-	-webkit-box-shadow: 0 0 0 0.5rem #1275ff;
-	box-shadow: 0 0 0 0.5rem #1275ff;
+	box-shadow: 0 0 0 0.25rem var(--se-active-dark5-color);
 	transition: box-shadow 0.15s ease-in-out;
 }
 
 .sun-editor-editable[contenteditable='true'] .se-component:not(:has(figure)).se-component-selected.se-drag-over,
-.sun-editor-editable[contenteditable='true'] figure.se-figure-selected.se-drag-over,
+.sun-editor-editable[contenteditable='true'] .se-figure-selected.se-drag-over,
 .sun-editor-editable[contenteditable='true'] hr.se-component-selected.se-drag-over {
-	outline: 2px solid #f0c20a;
+	outline: 3px solid var(--se-drag-over-color) !important;
 }
 .sun-editor-editable[contenteditable='true'] figure.se-drag-over > iframe {
 	pointer-events: none;
 }
 
+/* controller - display span */
+.sun-editor .se-controller .se-controller-display {
+	padding: 0 10px;
+	margin: 4px 0;
+	font-size: var(--se-main-font-size);
+}
+
 /* controller - button group */
 .sun-editor .se-controller .se-btn-group {
 	position: relative;
@@ -2197,9 +2480,10 @@
 .sun-editor .se-controller .se-btn-group .se-btn-group-sub {
 	left: 50%;
 	min-width: auto;
+	width: -webkit-max-content;
+	width: -moz-max-content;
 	width: max-content;
 	display: none;
-	/* display: inline-table; */
 }
 
 .sun-editor .se-controller .se-btn-group .se-btn-group-sub button {
@@ -2209,18 +2493,17 @@
 
 .sun-editor .se-controller .se-btn-group button {
 	position: relative;
-	min-height: 34px;
+	min-height: var(--se-input-btn-size);
 	height: auto;
 	border: none;
-	border-radius: 2px;
+	border-radius: var(--se-border-radius);
 	margin: 1px;
-	font-size: 12px;
+	font-size: var(--se-btn-font-size);
 	line-height: 1.5;
 	display: inline-block;
 	font-weight: normal;
 	text-align: center;
 	white-space: nowrap;
-	-ms-touch-action: manipulation;
 	touch-action: manipulation;
 }
 
@@ -2238,13 +2521,13 @@
 	width: 100%;
 	height: 38px;
 	padding: 4px;
-	border-bottom: 1px solid #e5e5e5;
+	border-bottom: 1px solid var(--se-modal-border-color);
 }
 
 /* controller - controller-content - body */
 .sun-editor .se-controller .se-controller-body {
 	position: relative;
-	font-size: 13px;
+	font-size: var(--se-main-font-size);
 	width: 100%;
 	padding: 4px 4px 1px 4px;
 }
@@ -2252,7 +2535,7 @@
 .sun-editor .se-controller .se-controller-body .se-btn:disabled,
 .sun-editor .se-controller .se-controller-body button:disabled,
 .sun-editor .se-controller .se-controller-body input:disabled {
-	background-color: #ececec;
+	background-color: var(--se-main-shadow-color);
 }
 
 .sun-editor .se-controller .se-controller-header .se-close-btn {
@@ -2261,14 +2544,14 @@
 	min-height: 28px;
 	float: right;
 	font-weight: bold;
-	text-shadow: 0 1px 0 #fff;
+	text-shadow: 0 1px 0 var(--se-main-background-color);
 	filter: alpha(opacity=100);
 	opacity: 1;
 }
 
 .sun-editor .se-controller .se-controller-header .se-controller-title {
 	float: left;
-	font-size: 13px;
+	font-size: var(--se-main-font-size);
 	font-weight: bold;
 	margin: 0;
 	padding: 0;
@@ -2277,10 +2560,10 @@
 
 /* controller - resizing(image, iframe) */
 .sun-editor .se-controller-resizing {
-	font-size: 14px;
+	font-size: var(--se-controller-font-size);
 	font-style: normal;
 	font-weight: normal;
-	line-height: 1.42857143;
+	line-height: 1.4;
 }
 
 .sun-editor .se-resizing-container {
@@ -2303,12 +2586,12 @@
 	display: none;
 	pointer-events: auto;
 	cursor: move;
-	width: 18px;
-	height: 18px;
-	background-color: #80bdff;
+	width: 20px;
+	height: 20px;
+	background-color: var(--se-active-dark-color);
 	border: 0;
 	padding: 1px;
-	color: #fff;
+	color: var(--se-main-background-color);
 	outline: 2px solid transparent;
 }
 .sun-editor .se-drag-handle.se-drag-handle-full {
@@ -2320,7 +2603,7 @@
 	max-height: 100%;
 }
 .sun-editor .se-drag-handle:hover {
-	background-color: #f0c20a;
+	background-color: var(--se-drag-over-color);
 }
 .sun-editor .se-drag-handle.se-dragging {
 	opacity: 0;
@@ -2329,71 +2612,79 @@
 .sun-editor .se-resizing-container .se-resize-dot {
 	position: absolute;
 	display: inline-block;
-	outline: 2px solid #80bdff;
+	outline: 2px solid var(--se-active-dark-color);
 	border: 0;
 	padding: 0;
 }
 
 .sun-editor .se-resizing-container.se-resize-ing .se-resize-dot {
-	outline: 2px solid #4592ff;
+	outline: 2px solid var(--se-active-dark3-color);
 }
 
 .sun-editor .se-resizing-container .se-resize-dot > span {
 	position: absolute;
 	pointer-events: auto;
-	width: 8px;
-	height: 8px;
+	width: 7px;
+	height: 7px;
 	border-radius: 1px;
-	background-color: #4592ff;
-	border: 1px solid #4592ff;
+	background-color: var(--se-active-dark3-color);
+	border: 1px solid var(--se-active-dark3-color);
 }
 
 .sun-editor .se-resizing-container .se-resize-dot > span.tl {
 	top: -6px;
 	left: -6px;
-	cursor: nw-resize;
+	border-radius: 4px;
+	cursor: nwse-resize;
 }
 
 .sun-editor .se-resizing-container .se-resize-dot > span.tr {
 	top: -6px;
 	right: -6px;
-	cursor: ne-resize;
+	border-radius: 4px;
+	cursor: nesw-resize;
 }
 
 .sun-editor .se-resizing-container .se-resize-dot > span.bl {
 	bottom: -6px;
 	left: -6px;
-	cursor: sw-resize;
+	border-radius: 4px;
+	cursor: nesw-resize;
 }
 
 .sun-editor .se-resizing-container .se-resize-dot > span.br {
 	right: -6px;
 	bottom: -6px;
-	cursor: se-resize;
+	border-radius: 4px;
+	cursor: nwse-resize;
 }
 
 .sun-editor .se-resizing-container .se-resize-dot > span.lw {
-	left: -8px;
-	bottom: 50%;
-	cursor: w-resize;
+	left: -7px;
+	width: 5px;
+	bottom: calc(50% - 4px);
+	cursor: ew-resize;
 }
 
 .sun-editor .se-resizing-container .se-resize-dot > span.th {
-	left: 50%;
-	top: -8px;
-	cursor: n-resize;
+	left: calc(50% - 4px);
+	top: -7px;
+	height: 5px;
+	cursor: ns-resize;
 }
 
 .sun-editor .se-resizing-container .se-resize-dot > span.rw {
-	right: -8px;
-	bottom: 50%;
-	cursor: e-resize;
+	right: -7px;
+	width: 5px;
+	bottom: calc(50% - 4px);
+	cursor: ew-resize;
 }
 
 .sun-editor .se-resizing-container .se-resize-dot > span.bh {
-	right: 50%;
-	bottom: -8px;
-	cursor: s-resize;
+	right: calc(50% - 4px);
+	bottom: -7px;
+	height: 5px;
+	cursor: ns-resize;
 }
 
 .sun-editor .se-resizing-container .se-resize-display {
@@ -2404,10 +2695,10 @@
 	bottom: 0;
 	padding: 5px;
 	margin: 2px;
-	font-size: 12px;
-	color: #fff;
-	background-color: #333;
-	border-radius: 2px;
+	font-size: var(--se-btn-font-size);
+	color: var(--se-main-background-color);
+	background-color: var(--se-main-font-color);
+	border-radius: var(--se-border-radius);
 	opacity: 0.75;
 }
 
@@ -2418,24 +2709,24 @@
 /* controller - table */
 .sun-editor .se-controller-table {
 	width: auto;
-	font-size: 14px;
+	font-size: var(--se-controller-font-size);
 	font-style: normal;
 	font-weight: normal;
-	line-height: 1.42857143;
+	line-height: 1.4;
 }
 
 .sun-editor .se-controller-table-cell {
 	width: auto;
-	font-size: 14px;
+	font-size: var(--se-controller-font-size);
 	font-style: normal;
 	font-weight: normal;
-	line-height: 1.42857143;
+	line-height: 1.4;
 }
 
 /* controller - table - props */
 .sun-editor .se-controller.se-table-props .se-color-input,
 .sun-editor .se-controller.se-table-props .se-border-style {
-	width: 70px;
+	width: var(--se-modal-input-width);
 }
 .sun-editor .se-controller.se-table-props .__se__border_size {
 	width: 52px;
@@ -2443,19 +2734,21 @@
 .sun-editor .se-controller.se-table-props .se-table-props-align li {
 	margin-right: 2px;
 }
+.sun-editor .se-controller.se-table-props .se-table-props-align .se-form-group div:last-child {
+	flex: auto;
+	margin: 0 8px;
+}
 
 /* controller - link */
 .sun-editor .se-controller-link {
-	font-size: 14px;
+	font-size: var(--se-controller-font-size);
 	font-style: normal;
 	font-weight: normal;
-	line-height: 1.42857143;
+	line-height: 1.4;
 }
 
 .sun-editor .se-controller-link::before,
 .sun-editor .se-controller-link::after {
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }
 
@@ -2466,7 +2759,7 @@
 
 .sun-editor .se-controller-link .link-content a {
 	display: inline-block;
-	color: #4592ff;
+	color: var(--se-active-dark3-color);
 	max-width: 200px;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -2483,18 +2776,19 @@
 	left: 0px;
 	z-index: 2147483647;
 	display: none;
+	width: -webkit-max-content;
+	width: -moz-max-content;
 	width: max-content;
 	height: auto;
 	overflow-y: visible;
 	overflow-x: visible;
 	overflow: visible;
-	background-color: #fff;
-	border-radius: 2px;
+	background-color: var(--se-main-background-color);
+	border-radius: var(--se-border-radius);
 	padding: 2px 0;
 	margin: 0;
-	border: 1px solid #bababa;
-	-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
-	box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
+	border: 1px solid var(--se-main-outline-color);
+	box-shadow: 0 3px 9px var(--se-shadow-layer-color);
 	outline: 0 none;
 }
 
@@ -2518,7 +2812,7 @@
 	list-style: none;
 	line-height: 28px;
 	min-height: 28px;
-	font-size: 12px;
+	font-size: var(--se-btn-font-size);
 	padding: 0 6px;
 	margin: 2px 0;
 	cursor: pointer;
@@ -2535,25 +2829,23 @@
 }
 
 .sun-editor .se-select-menu .se-select-item *.se-select-on {
-	color: #4592ff;
+	color: var(--se-active-dark3-color);
 }
 
 .sun-editor .se-select-menu.se-select-menu-mouse-move .se-select-item:hover,
 .sun-editor .se-select-menu:not(.se-select-menu-mouse-move) .se-select-item.active {
-	border-color: #d0e3ff !important;
-	outline: 1px solid #3288ff !important;
-	-webkit-box-shadow: 0 0 0 0.3rem #d0e3ff;
-	box-shadow: 0 0 0 0.3rem #d0e3ff;
+	border-color: var(--se-active-light3-color) !important;
+	outline: 1px solid var(--se-active-color) !important;
+	box-shadow: 0 0 0 0.3rem var(--se-active-light3-color);
 	transition: box-shadow 0.1s ease-in-out;
 }
 
 .sun-editor .se-select-menu.se-select-menu-mouse-move .se-select-item:active,
 .sun-editor .se-select-menu.se-select-menu-mouse-move .se-select-item.__se__active {
-	background-color: #dbeaff;
-	border-color: #dbeaff !important;
-	outline: 1px solid #3288ff !important;
-	-webkit-box-shadow: inset 2px 2px 5px #b7ccf2, inset -2px -2px 5px #e6f2ff;
-	box-shadow: inset 2px 2px 5px #b7ccf2, inset -2px -2px 5px #e6f2ff;
+	background-color: var(--se-active-light4-color);
+	border-color: var(--se-active-light4-color) !important;
+	outline: 1px solid var(--se-active-color) !important;
+	box-shadow: inset 2px 2px 5px var(--se-active-light6-color), inset -2px -2px 5px var(--se-active-light-color);
 	transition: background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
 }
 
@@ -2562,12 +2854,12 @@
 	height: auto;
 }
 
-.sun-editor .se-select-menu.se-resizing-align-list {
+.sun-editor .se-select-menu.se-figure-select-list {
 	width: 74px;
 }
 
 /* --- browser ---------------------------------------------------------- */
-.sun-editor .se-file-browser {
+.sun-editor .se-browser {
 	position: fixed;
 	display: none;
 	top: 0;
@@ -2577,27 +2869,27 @@
 	z-index: 2147483647;
 }
 
-.sun-editor .se-file-browser label,
-.sun-editor .se-file-browser input,
-.sun-editor .se-file-browser button {
-	font-size: 14px;
+.sun-editor .se-browser label,
+.sun-editor .se-browser input,
+.sun-editor .se-browser button {
+	font-size: var(--se-modal-input-font-size);
 	line-height: 1.5;
-	color: #111;
+	color: var(--se-main-color);
 	margin: 0;
 }
 
-.sun-editor .se-file-browser .se-file-browser-back {
+.sun-editor .se-browser .se-browser-back {
 	position: absolute;
 	display: block;
 	width: 100%;
 	height: 100%;
 	top: 0;
 	left: 0;
-	background-color: #222;
+	background-color: var(--se-overlay-background-color);
 	opacity: 0.5;
 }
 
-.sun-editor .se-file-browser .se-file-browser-inner {
+.sun-editor .se-browser .se-browser-inner {
 	position: absolute;
 	display: block;
 	width: 100%;
@@ -2606,61 +2898,147 @@
 	left: 0;
 }
 
-.sun-editor .se-file-browser .se-file-browser-inner .se-file-browser-content {
+.sun-editor .se-browser .se-browser-inner .se-browser-content {
 	position: relative;
-	width: 960px;
+	width: 1024px;
 	max-width: 100%;
 	margin: 20px auto;
-	background-color: #fff;
+	background-color: var(--se-main-background-color);
 	-webkit-background-clip: padding-box;
 	background-clip: padding-box;
 	border: 1px solid rgba(0, 0, 0, 0.2);
-	border-radius: 2px;
+	border-radius: var(--se-border-radius);
 	outline: 0;
-	-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
-	box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
+	box-shadow: 0 3px 9px var(--se-shadow-layer-color);
 }
 
 /* --- browser - header */
-.sun-editor .se-file-browser .se-file-browser-header {
+.sun-editor .se-browser .se-browser-header {
 	height: auto;
 	min-height: 50px;
 	padding: 6px 15px 6px 15px;
-	border-bottom: 1px solid #e5e5e5;
+	border-bottom: 1px solid var(--se-modal-border-color);
 }
 
-.sun-editor .se-file-browser .se-file-browser-header .se-file-browser-close {
+.sun-editor .se-browser .se-browser-header .se-browser-close {
 	float: right;
 	font-weight: bold;
-	text-shadow: 0 1px 0 #fff;
+	text-shadow: 0 1px 0 var(--se-main-background-color);
 	filter: alpha(opacity=100);
 	opacity: 1;
 }
 
-.sun-editor .se-file-browser .se-file-browser-header .se-file-browser-title {
-	font-size: 16px;
+.sun-editor .se-browser .se-browser-header .se-browser-title {
+	font-size: var(--se-browser-title-font-size);
 	font-weight: bold;
 	margin: 0;
 	padding: 0;
 	line-height: 2.2;
 }
 
-/* --- browser - header - tags */
-.sun-editor .se-file-browser .se-file-browser-tags {
+/* --- browser - main wrapper */
+.sun-editor .se-browser .se-browser-wrapper {
+	display: flex;
+	position: relative;
+}
+
+/* --- browser - main */
+.sun-editor .se-browser .se-browser-main {
+	flex: auto;
+}
+
+/* --- browser - bar */
+.sun-editor .se-browser .se-browser-bar {
+	height: auto;
+	padding: 0px 15px;
+	border-bottom: 1px solid var(--se-modal-border-color);
+}
+
+/* --- browser - side */
+.sun-editor .se-browser .se-browser-side > div {
+	overflow-y: auto;
+}
+.sun-editor .se-browser .se-browser-side > div:not(.se-side-open-btn) {
+	height: 100%;
+	padding: 4px;
+	border-right: 1px solid var(--se-modal-border-color);
+	min-width: 220px;
+	flex-direction: row;
+	color: var(--se-edit-font-color);
+	line-height: 1.5;
+}
+.sun-editor .se-browser .se-browser-side .se-menu-icon {
+	display: inline-block;
+	width: 16px;
+	height: 16px;
+	margin: -1px 10px 0 0;
+	vertical-align: middle;
+}
+.sun-editor .se-browser .se-browser-search .se-side-open-btn {
+	display: none;
+	margin: 8px 0 0 8px;
+	opacity: 0.8;
+	border: 1px solid var(--se-input-btn-border-color);
+	color: var(--se-edit-font-color);
+}
+.sun-editor .se-browser .se-browser-side.se-side-show > div {
+	display: block !important;
+}
+.sun-editor .se-browser .se-browser-side > div .se-menu-hidden {
+	display: none;
+}
+.sun-editor .se-browser .se-menu-folder {
+	cursor: pointer;
+}
+.sun-editor .se-browser .se-menu-folder > div:not(.se-menu-child) {
+	display: flex;
+	padding: 8px 10px 8px 20px;
+}
+.sun-editor .se-browser .se-menu-folder > div > button {
+	margin-left: -20px;
+}
+.sun-editor .se-browser .se-menu-folder .se-menu-folder-item {
+	padding: 8px 8px 8px 24px;
+}
+.sun-editor .se-browser .se-menu-folder > div:not(.se-menu-child) > .se-menu-icon > * {
+	padding-top: 3px;
+}
+.sun-editor .se-browser .se-menu-folder .se-menu-folder-item > .se-menu-icon > * {
+	margin-top: -1px;
+}
+.sun-editor .se-browser .se-menu-folder div:not(.se-menu-child):not(.active):hover {
+	background-color: var(--se-main-divider-color);
+	border-color: var(--se-main-border-color);
+}
+.sun-editor .se-browser .se-menu-folder div.active > button {
+	color: var(--se-active-dark5-color);
+}
+.sun-editor .se-browser .se-menu-folder div.active,
+.sun-editor .se-browser .se-browser-search .se-side-open-btn.active {
+	background-color: var(--se-active-light2-color);
+	color: var(--se-active-dark5-color);
+}
+.sun-editor .se-browser .se-menu-folder.active {
+	border-left: 2px solid var(--se-active-dark4-color);
+	margin-left: -2px;
+}
+
+/* --- browser - tags */
+.sun-editor .se-browser .se-browser-tags {
 	display: block;
-	font-size: 13px;
+	font-size: var(--se-main-font-size);
 	width: 100%;
 	padding: 0;
 	text-align: left;
-	margin: 0 -15px;
+	margin-top: -5px;
 }
 
-.sun-editor .se-file-browser .se-file-browser-tags a {
+.sun-editor .se-browser .se-browser-tags a {
 	display: inline-block;
-	background-color: #f5f5f5;
+	background-color: var(--se-code-view-color);
 	padding: 6px 12px;
 	margin: 8px 0 8px 8px;
-	color: #333;
+	color: var(--se-main-font-color);
 	text-decoration: none;
 	border-radius: 32px;
 	-moz-border-radius: 32px;
@@ -2671,160 +3049,321 @@
 	cursor: pointer;
 }
 
-.sun-editor .se-file-browser .se-file-browser-tags a:hover {
-	background-color: #e1e1e1;
+/* --- browser - header - search */
+.sun-editor .se-browser .se-browser-search {
+	display: flex;
+	font-size: var(--se-main-font-size);
+	width: 100%;
+	height: 48px;
+	padding: 0;
+	text-align: left;
+	margin: 0 -15px;
+}
+
+.sun-editor .se-browser .se-browser-search .se-browser-search-form {
+	width: 400px;
+	max-width: 100%;
+	display: flex;
+	flex-direction: row;
+}
+.sun-editor .se-browser .se-browser-search .se-browser-search-form > * {
+	margin: 8px;
+}
+.sun-editor .se-browser .se-browser-search .se-browser-search-form > .se-btn {
+	margin-left: 0;
+	margin-right: 0;
 }
 
-.sun-editor .se-file-browser .se-file-browser-tags a:active {
-	background-color: #d1d1d1;
+.sun-editor .se-browser .se-browser-search input {
+	flex: auto;
+	background-color: transparent;
+	padding: 3px 6px;
+	color: var(--se-main-font-color);
+	text-decoration: none;
+	border-radius: var(--se-border-radius);
+	-moz-border-radius: var(--se-border-radius);
+	-webkit-border-radius: var(--se-border-radius);
+	-moz-background-clip: padding;
+	-webkit-background-clip: padding-box;
+	background-clip: padding-box;
 }
 
-.sun-editor .se-file-browser .se-file-browser-tags a.on {
-	background-color: #ebf3fe;
-	color: #4592ff;
+.sun-editor .se-browser .se-browser-search button {
+	float: none;
 }
 
-.sun-editor .se-file-browser .se-file-browser-tags a.on:hover {
-	background-color: #d8e8fe;
+.sun-editor .se-browser .se-browser-tags a:hover {
+	background-color: var(--se-main-divider-color);
+	transition: background-color 0.2s ease-in-out;
 }
 
-.sun-editor .se-file-browser .se-file-browser-tags a.on:active {
-	background-color: #d0e3ff;
+.sun-editor .se-browser .se-browser-tags a:active {
+	background-color: var(--se-main-border-color);
+}
+
+.sun-editor .se-browser .se-browser-tags a.on {
+	background-color: var(--se-active-light3-color);
+	color: var(--se-active-dark3-color);
+}
+
+.sun-editor .se-browser .se-browser-tags a.on:hover {
+	background-color: var(--se-active-light5-color);
+	transition: background-color 0.2s ease-in-out;
+}
+
+.sun-editor .se-browser .se-browser-tags a.on:active {
+	background-color: var(--se-active-light5-color);
 }
 
 /* --- browser - body */
-.sun-editor .se-file-browser .se-file-browser-body {
+.sun-editor .se-browser .se-browser-body {
 	position: relative;
 	height: auto;
 	min-height: 350px;
-	padding: 20px;
+	padding: 10px;
 	overflow-y: auto;
 }
 
-.sun-editor .se-file-browser .se-file-browser-body .se-file-browser-list {
+.sun-editor .se-browser .se-browser-body .se-browser-list {
 	position: relative;
 	width: 100%;
 }
 
 @media screen and (max-width: 992px) {
-	.sun-editor .se-file-browser .se-file-browser-inner .se-file-browser-content {
+	.sun-editor .se-browser .se-browser-inner .se-browser-content {
 		width: 748px;
 	}
+	.sun-editor .se-browser .se-browser-side > div:not(.se-side-open-btn) {
+		min-width: 180px;
+	}
 }
 
 @media screen and (max-width: 768px) {
-	.sun-editor .se-file-browser .se-file-browser-inner .se-file-browser-content {
+	.sun-editor .se-browser .se-browser-inner .se-browser-content {
 		width: 600px;
 	}
+	.sun-editor .se-browser .se-browser-side > div:not(.se-side-open-btn) {
+		min-width: 150px;
+	}
+}
+
+@media screen and (max-width: 552px) {
+	.sun-editor .se-browser .se-browser-side > div:not(.se-side-open-btn) {
+		display: none;
+	}
+	.sun-editor .se-browser .se-browser-search .se-side-open-btn {
+		display: block;
+	}
+	.sun-editor .se-browser .se-browser-side {
+		position: absolute;
+		height: calc(100% - 49px);
+		top: 49px;
+		z-index: 2;
+		background-color: var(--se-main-background-color);
+		opacity: 0.95;
+	}
 }
 
 /* --- browser - column */
-.sun-editor .se-file-browser .se-file-browser-list .se-file-item-column {
+.sun-editor .se-browser .se-browser-list .se-file-item-column {
 	position: relative;
 	display: block;
 	height: auto;
 	float: left;
 }
 
-/* --- browser --- custom - "se-image-list" - column */
-.sun-editor .se-file-browser .se-file-browser-list.se-image-list .se-file-item-column {
+.sun-editor .se-browser .se-browser-list.se-preview-list .se-file-item-column {
 	width: calc(25% - 20px);
 	margin: 0 10px;
 }
 
 @media screen and (max-width: 992px) {
-	.sun-editor .se-file-browser .se-file-browser-list.se-image-list .se-file-item-column {
+	.sun-editor .se-browser .se-browser-list.se-preview-list .se-file-item-column {
 		width: calc(33% - 20px);
 	}
 }
 
 @media screen and (max-width: 768px) {
-	.sun-editor .se-file-browser .se-file-browser-list.se-image-list .se-file-item-column {
+	.sun-editor .se-browser .se-browser-list.se-preview-list .se-file-item-column {
 		width: calc(50% - 20px);
 	}
 }
 
-/* --- browser --- custom - "se-image-list" - item */
-.sun-editor .se-file-browser .se-file-browser-list.se-image-list .se-file-item-img {
+/* --- browser --- item */
+.sun-editor .se-browser .se-browser-list.se-preview-list .se-file-item-img {
 	position: relative;
 	display: block;
 	cursor: pointer;
 	width: 100%;
 	height: auto;
-	border-radius: 2px;
+	border-radius: var(--se-border-radius);
 	outline: 0;
 	margin: 10px 0;
 }
 
-.sun-editor .se-file-browser .se-file-browser-list.se-image-list .se-file-item-img:hover {
+.sun-editor .se-browser .se-browser-list.se-preview-list .se-file-item-img:hover {
 	opacity: 0.8;
-	-webkit-box-shadow: 0 0 0 0.2rem #3288ff;
-	box-shadow: 0 0 0 0.2rem #3288ff;
+	box-shadow: 0 0 0 0.2rem var(--se-active-color);
+	transition: box-shadow 0.1s ease-in-out;
 }
 
-.sun-editor .se-file-browser .se-file-browser-list.se-image-list .se-file-item-img > img {
+.sun-editor .se-browser .se-browser-list.se-preview-list .se-file-item-img > img {
 	position: relative;
 	display: block;
 	width: 100%;
-	border-radius: 2px;
+	border-radius: var(--se-border-radius);
 	outline: 0;
 	height: auto;
 }
 
-.sun-editor .se-file-browser .se-file-browser-list.se-image-list .se-file-item-img > .se-file-name-image {
+.sun-editor .se-browser .se-browser-list.se-preview-list .se-file-item-img > .se-file-name-image {
 	position: absolute;
 	z-index: 1;
-	font-size: 13px;
-	color: #fff;
+	font-size: var(--se-main-font-size);
+	color: var(--se-main-background-color);
 	left: 0px;
 	bottom: 0;
 	padding: 5px 10px;
 	background-color: transparent;
 	width: 100%;
 	height: 30px;
-	border-bottom-right-radius: 4px;
-	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: var(--se-border-radius);
+	border-bottom-left-radius: var(--se-border-radius);
 	pointer-events: none;
 }
 
-.sun-editor .se-file-browser .se-file-browser-list.se-image-list .se-file-item-img > .se-file-name-image.se-file-name-back {
-	background-color: #333;
+.sun-editor .se-browser .se-browser-list.se-preview-list .se-file-item-img > .se-file-name-image.se-file-name-back {
+	background-color: var(--se-main-font-color);
 	opacity: 0.6;
 	pointer-events: none;
 }
 
-/** --- notice */
-.sun-editor .se-notice {
+.sun-editor .se-browser .se-browser-list.se-preview-list .se-file-item-img > * {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+/* --- browser - empty-thumbnail */
+.sun-editor .se-browser .se-browser-list.se-preview-list .se-file-item-img > .se-browser-empty-thumbnail {
+	width: 100%;
+	height: 170px;
+	max-height: 100%;
+	background-color: var(--se-active-light-color);
+	border-radius: var(--se-border-radius);
+}
+.sun-editor .se-browser .se-browser-list.se-preview-list .se-file-item-img > .se-browser-empty-thumbnail > svg {
+	width: 90px;
+	max-width: 100%;
+	height: auto;
+	margin-bottom: 30px;
+	color: var(--se-active-color);
+}
+
+/** --- alert */
+.sun-editor .se-alert-content {
 	position: relative;
-	display: none;
 	z-index: 7;
 	max-width: 500px;
 	width: auto;
 	height: auto;
-	margin: 1.75rem auto;
-	border-radius: 2px;
-	-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
-	box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
+	margin: auto;
+	top: 35%;
+	border-radius: var(--se-border-radius);
+	box-shadow: 0 3px 9px var(--se-shadow-layer-color);
 	word-break: break-all;
-	color: #b94a48;
-	background-color: #fff;
+	background-color: var(--se-main-background-color);
 	padding: 15px;
 	border: 1px solid rgba(0, 0, 0, 0.2);
+	opacity: 0;
+	visibility: hidden;
+	transform: scale(0.9);
+	transition: opacity 0.25s ease, transform 0.25s ease;
+}
+.sun-editor .se-alert-content.se-modal-show {
+	opacity: 1;
+	visibility: visible;
+	transform: scale(1);
+	animation: se-alert-in 0.25s ease forwards;
 }
 
-.sun-editor .se-notice button {
+.sun-editor .se-alert-content button {
 	float: right;
+	padding: 0;
+}
+
+/** --- alert - success */
+.sun-editor .se-alert-content.se-alert-success {
+	color: var(--se-success-color);
+	border-color: var(--se-success-light4-color);
+}
+
+/** --- alert - error */
+.sun-editor .se-alert-content.se-alert-error {
+	color: var(--se-error-color);
+	border-color: var(--se-error-light4-color);
+}
+
+/** --- toast */
+.sun-editor .se-toast {
+	background: transparent;
+	position: fixed;
+	display: none;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 2147483647;
+	pointer-events: none;
+}
+
+.sun-editor .se-toast .se-toast-container {
+	position: relative;
+	max-width: 100%;
+	width: max-content;
+	height: max-content;
+	margin: auto;
+	top: 35%;
+	border-radius: var(--se-border-radius);
+	box-shadow: 0 3px 9px var(--se-shadow-layer-color);
+	word-break: break-all;
+	background-color: var(--se-main-font-color);
+	color: var(--se-main-background-color);
+	text-align: center;
+	line-height: unset;
+	font-size: 0.9em;
 	padding: 7px;
+	border: 1px solid rgba(0, 0, 0, 0.2);
+	opacity: 0;
+	transform: scale(0.9);
+	transition: opacity 0.25s ease, transform 0.25s ease;
+	opacity: 0;
+	transform: translateY(20px);
+}
+.sun-editor .se-toast .se-toast-container.se-toast-show {
+	opacity: 1;
+	animation: toast-in 0.3s ease-out forwards, toast-out 0.3s ease-in forwards 3s;
+}
+
+/** --- toast - success */
+.sun-editor .se-toast.se-toast-success .se-toast-container {
+	background-color: var(--se-success-color);
+	border-color: var(--se-success-light4-color);
+}
+
+/** --- toast - error */
+.sun-editor .se-toast.se-toast-error .se-toast-container {
+	background-color: var(--se-error-color);
+	border-color: var(--se-error-light3-color);
 }
 
 /* --- Input focus */
 .sun-editor input:not(.se-toolbar-btn):focus,
 .sun-editor select:focus,
 .sun-editor textarea:focus {
-	border-color: #80bdff;
+	border-color: var(--se-active-dark-color);
 	outline: 0;
-	-webkit-box-shadow: 0 0 0 0.2rem #d0e3ff;
-	box-shadow: 0 0 0 0.2rem #d0e3ff;
+	box-shadow: 0 0 0 0.2rem var(--se-active-light3-color);
 	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 
@@ -2832,7 +3371,7 @@
 .sun-editor .se-tooltip {
 	position: relative;
 	overflow: visible;
-	font-size: 13px;
+	font-size: var(--se-main-font-size);
 }
 
 .sun-editor .se-tooltip .se-tooltip-inner {
@@ -2867,9 +3406,9 @@
 	font-size: 0.9em;
 	margin: 0;
 	padding: 4px 6px;
-	border-radius: 2px;
-	background-color: #333;
-	color: #fff;
+	border-radius: var(--se-border-radius);
+	background-color: var(--se-main-font-color);
+	color: var(--se-main-background-color);
 	text-align: center;
 	line-height: unset;
 	white-space: nowrap;
@@ -2884,7 +3423,7 @@
 	margin-left: -5px;
 	border-width: 5px;
 	border-style: solid;
-	border-color: transparent transparent #333 transparent;
+	border-color: transparent transparent var(--se-main-font-color) transparent;
 }
 
 .sun-editor .se-tooltip:hover .se-tooltip-inner {
@@ -2913,10 +3452,26 @@
 	border-left: 0;
 	border-right: 0;
 	border-radius: 0;
-	border-bottom: 2px solid #b1b1b1;
+	border-bottom: 2px solid var(--se-main-outline-color);
 	outline: none;
 	text-transform: uppercase;
 }
+.sun-editor input.se-color-input::-webkit-input-placeholder {
+	font-size: 0.9em;
+	text-transform: none;
+}
+.sun-editor input.se-color-input::-moz-placeholder {
+	font-size: 0.9em;
+	text-transform: none;
+}
+.sun-editor input.se-color-input:-ms-input-placeholder {
+	font-size: 0.9em;
+	text-transform: none;
+}
+.sun-editor input.se-color-input::-ms-input-placeholder {
+	font-size: 0.9em;
+	text-transform: none;
+}
 .sun-editor input.se-color-input::placeholder {
 	font-size: 0.9em;
 	text-transform: none;
@@ -2936,11 +3491,11 @@
 
 /** --- selected class */
 /* -- table */
-.sun-editor-editable[contenteditable='true'] table td.se-selected-table-cell::after,
-.sun-editor-editable[contenteditable='true'] table th.se-selected-table-cell::after {
+.sun-editor-editable table td.se-selected-table-cell::after,
+.sun-editor-editable table th.se-selected-table-cell::after {
 	position: absolute;
 	content: '';
-	background-color: #d0e3ff;
+	background-color: var(--se-active-light3-color);
 	opacity: 0.3;
 	width: 100%;
 	height: 100%;
@@ -2951,7 +3506,7 @@
 }
 .sun-editor-editable[contenteditable='true'] table td.se-selected-cell-focus,
 .sun-editor-editable[contenteditable='true'] table th.se-selected-cell-focus {
-	outline: 2px dashed #1275ff;
+	outline: 2px dashed var(--se-active-dark3-color);
 	z-index: 1;
 }
 
@@ -2962,6 +3517,10 @@
 	transform: scaleX(-1);
 }
 
+.sun-editor.se-rtl .se-text-prefix-icon {
+	float: right;
+}
+
 .sun-editor.se-rtl .se-btn-select svg {
 	margin: auto 1px;
 }
@@ -2987,21 +3546,21 @@
 .sun-editor.se-rtl button.se-side-btn-b {
 	float: right;
 	margin-right: 0;
-	border-radius: 2px 0 0 2px;
+	border-radius: var(--se-border-radius) 0 0 var(--se-border-radius);
 }
 .sun-editor.se-rtl button.se-side-btn-a {
 	float: right;
 	margin-left: 0;
-	border-radius: 0 2px 2px 0;
+	border-radius: 0 var(--se-border-radius) var(--se-border-radius) 0;
 }
 .sun-editor.se-rtl button.se-side-btn-after {
 	margin-right: 0;
-	border-radius: 2px 0 0 2px;
+	border-radius: var(--se-border-radius) 0 0 var(--se-border-radius);
 }
 .sun-editor.se-rtl button.se-side-btn-before {
 	float: right;
 	margin-left: 0;
-	border-radius: 0 2px 2px 0;
+	border-radius: 0 var(--se-border-radius) var(--se-border-radius) 0;
 }
 
 /* after, before button:hover - on, active - border */
@@ -3079,32 +3638,32 @@
 }
 
 /* modal--- */
-.sun-editor.se-rtl .se-modal * {
+.sun-editor.se-rtl .se-modal-area * {
 	direction: rtl;
 }
 
-.sun-editor.se-rtl .se-modal .se-modal-inner .se-modal-form .se-video-ratio {
+.sun-editor.se-rtl .se-modal-area .se-modal-inner .se-modal-form .se-modal-ratio {
 	margin-left: 0;
 	margin-right: 4px;
 }
 
 /* modal - header */
-.sun-editor.se-rtl .se-modal .se-modal-inner .se-modal-header .se-close-btn {
+.sun-editor.se-rtl .se-modal-area .se-modal-inner .se-modal-header .se-close-btn {
 	float: left;
 }
 
-.sun-editor.se-rtl .se-modal .se-modal-inner .se-modal-header .se-modal-title {
+.sun-editor.se-rtl .se-modal-area .se-modal-inner .se-modal-header .se-modal-title {
 	float: right;
 }
 
 /* modal - edge button */
-.sun-editor.se-rtl .se-modal .se-modal-inner .se-modal-form .se-modal-form-files .se-modal-files-edge-button {
+.sun-editor.se-rtl .se-modal-area .se-modal-inner .se-modal-form .se-modal-form-files .se-modal-files-edge-button {
 	margin-left: 0;
 	margin-right: 1px;
 }
 
 /* modal - rel button */
-.sun-editor.se-rtl .se-modal .se-modal-inner .se-modal-form .se-modal-flex-form .se-btn {
+.sun-editor.se-rtl .se-modal-area .se-modal-inner .se-modal-form .se-modal-flex-form .se-btn {
 	margin-right: 0;
 	margin-left: 4px;
 }
@@ -3114,62 +3673,100 @@
 	float: right;
 }
 
-.sun-editor.se-rtl .se-modal .se-modal-inner .se-modal-size-text {
-	padding-right: 34px;
+.sun-editor.se-rtl .se-modal-area .se-modal-inner .se-modal-size-text {
+	padding-right: var(--se-input-btn-size);
+}
+
+/* modal - flex-group */
+.sun-editor.se-rtl .se-modal-area .se-modal-inner .se-modal-form .se-modal-flex-form .se-modal-flex-group {
+	margin-right: 0;
+	margin-left: 4px;
+	padding-right: 4px;
+	padding-left: 0;
 }
 
 /* modal - footer */
-.sun-editor.se-rtl .se-modal .se-modal-inner .se-modal-footer .se-btn-primary {
+.sun-editor.se-rtl .se-modal-area .se-modal-inner .se-modal-footer .se-btn-primary {
 	float: left;
 }
 
-.sun-editor.se-rtl .se-modal .se-modal-inner .se-modal-footer > div {
+.sun-editor.se-rtl .se-modal-area .se-modal-inner .se-modal-footer > div {
 	float: right;
 }
 
-.sun-editor.se-rtl .se-modal .se-modal-inner .se-modal-footer > div > label {
+.sun-editor.se-rtl .se-modal-area .se-modal-inner .se-modal-footer > div > label {
 	margin: 0 0 0 5px;
 }
 
-.sun-editor.se-rtl .se-modal .se-modal-inner .se-modal-form-footer label:first-child {
+.sun-editor.se-rtl .se-modal-area .se-modal-inner .se-modal-form-footer label:first-child {
 	margin-left: 16px;
 	margin-right: 0px;
 }
 
 /* modal - footer - link preview*/
-.sun-editor.se-rtl .se-modal .se-modal-inner .se-anchor-rel-preview {
+.sun-editor.se-rtl .se-modal-area .se-modal-inner .se-anchor-rel-preview {
 	margin-left: 4px;
 	text-align: right;
 }
 
 /* modal - revert button */
-.sun-editor.se-rtl .se-modal .se-modal-inner .se-modal-btn-revert {
+.sun-editor.se-rtl .se-modal-area .se-modal-inner .se-modal-btn-revert {
 	float: left;
 }
 
 /* anchor module */
-.sun-editor.se-rtl .se-modal .se-modal-inner .se-anchor-rel-btn {
+.sun-editor.se-rtl .se-modal-area .se-modal-inner .se-anchor-rel-btn {
 	float: right;
 }
 
-/* fileBrowser--- */
-.sun-editor.se-rtl .se-file-browser * {
+/* Browser--- */
+.sun-editor.se-rtl .se-browser * {
 	direction: rtl;
 }
 
-/* fileBrowser - header */
-.sun-editor.se-rtl .se-file-browser .se-file-browser-tags {
+/* Browser - tags */
+.sun-editor.se-rtl .se-browser .se-browser-tags {
 	text-align: right;
 }
 
-.sun-editor.se-rtl .se-file-browser .se-file-browser-tags a {
+.sun-editor.se-rtl .se-browser .se-browser-tags a {
 	margin: 8px 8px 0 8px;
 }
 
-.sun-editor.se-rtl .se-file-browser .se-file-browser-header .se-file-browser-close {
+.sun-editor.se-rtl .se-browser .se-browser-header .se-browser-close {
 	float: left;
 }
 
+/* Browser - side */
+.sun-editor.se-rtl .se-browser .se-browser-side > div {
+	flex-direction: row-reverse;
+	border-right: none;
+	border-left: 1px solid var(--se-modal-border-color);
+}
+.sun-editor.se-rtl .se-browser .se-menu-folder > div:not(.se-menu-child) {
+	padding: 8px 20px 8px 10px;
+}
+.sun-editor.se-rtl .se-browser .se-menu-folder > div > button {
+	margin-left: 0;
+	margin-right: -20px;
+}
+.sun-editor.se-rtl .se-browser .se-menu-folder.active {
+	border-left: none;
+	margin-left: 0;
+	border-right: 2px solid var(--se-active-dark4-color);
+	margin-right: -2px;
+}
+.sun-editor.se-rtl .se-browser .se-browser-search .se-browser-search-form {
+	margin: 2px 8px;
+	flex-direction: row-reverse;
+}
+.sun-editor.se-rtl .se-browser .se-browser-side .se-menu-icon {
+	margin: 0 0 0 10px;
+}
+.sun-editor.se-rtl .se-browser .se-browser-search .se-side-open-btn {
+	margin: 8px 8px 0 0;
+}
+
 /** controller--- */
 .sun-editor.se-rtl .se-controller .se-btn-group {
 	direction: rtl;
@@ -3208,11 +3805,75 @@
 	margin-left: 0;
 }
 
-.sun-editor.se-rtl .sun-editor-editable[contenteditable='true'].se-copy-format-cursor {
+.sun-editor-editable.se-rtl[contenteditable='true'].se-copy-format-cursor {
 	cursor: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMjQgMTYiIHZlcnNpb249IjEuMSI+CjxnIGlkPSJzdXJmYWNlMSI+CjxwYXRoIHN0eWxlPSIgc3Ryb2tlOm5vbmU7ZmlsbC1ydWxlOm5vbnplcm87ZmlsbDpyZ2IoMCUsMCUsMCUpO2ZpbGwtb3BhY2l0eToxOyIgZD0iTSAxMiAyLjY2Nzk2OSBMIDEyIDIgQyAxMiAxLjYzMjgxMiAxMS43MDMxMjUgMS4zMzIwMzEgMTEuMzMyMDMxIDEuMzMyMDMxIEwgMy4zMzIwMzEgMS4zMzIwMzEgQyAyLjk2NDg0NCAxLjMzMjAzMSAyLjY2Nzk2OSAxLjYzMjgxMiAyLjY2Nzk2OSAyIEwgMi42Njc5NjkgNC42Njc5NjkgQyAyLjY2Nzk2OSA1LjAzNTE1NiAyLjk2NDg0NCA1LjMzMjAzMSAzLjMzMjAzMSA1LjMzMjAzMSBMIDExLjMzMjAzMSA1LjMzMjAzMSBDIDExLjcwMzEyNSA1LjMzMjAzMSAxMiA1LjAzNTE1NiAxMiA0LjY2Nzk2OSBMIDEyIDQgTCAxMi42Njc5NjkgNCBMIDEyLjY2Nzk2OSA2LjY2Nzk2OSBMIDYgNi42Njc5NjkgTCA2IDE0IEMgNiAxNC4zNjcxODggNi4yOTY4NzUgMTQuNjY3OTY5IDYuNjY3OTY5IDE0LjY2Nzk2OSBMIDggMTQuNjY3OTY5IEMgOC4zNjcxODggMTQuNjY3OTY5IDguNjY3OTY5IDE0LjM2NzE4OCA4LjY2Nzk2OSAxNCBMIDguNjY3OTY5IDggTCAxNCA4IEwgMTQgMi42Njc5NjkgWiBNIDEyIDIuNjY3OTY5ICIvPgo8cGF0aCBzdHlsZT0iIHN0cm9rZTpub25lO2ZpbGwtcnVsZTpub256ZXJvO2ZpbGw6cmdiKDAlLDAlLDAlKTtmaWxsLW9wYWNpdHk6MTsiIGQ9Ik0gMjAuMzMyMDMxIDEyLjY2Nzk2OSBDIDIwLjMzMjAzMSAxMy4wMzUxNTYgMjAuNDg0Mzc1IDEzLjMzMjAzMSAyMC42Njc5NjkgMTMuMzMyMDMxIEwgMjEuMzMyMDMxIDEzLjMzMjAzMSBMIDIxLjMzMjAzMSAxNC42Njc5NjkgTCAyMC41IDE0LjY2Nzk2OSBDIDIwLjMxNjQwNiAxNC42Njc5NjkgMjAgMTQuMzY3MTg4IDIwIDE0IEMgMjAgMTQuMzY3MTg4IDE5LjY4MzU5NCAxNC42Njc5NjkgMTkuNSAxNC42Njc5NjkgTCAxOC42Njc5NjkgMTQuNjY3OTY5IEwgMTguNjY3OTY5IDEzLjMzMjAzMSBMIDE5LjMzMjAzMSAxMy4zMzIwMzEgQyAxOS41MTU2MjUgMTMuMzMyMDMxIDE5LjY2Nzk2OSAxMy4wMzUxNTYgMTkuNjY3OTY5IDEyLjY2Nzk2OSBMIDE5LjY2Nzk2OSAzLjMzMjAzMSBDIDE5LjY2Nzk2OSAyLjk2NDg0NCAxOS41MTU2MjUgMi42Njc5NjkgMTkuMzMyMDMxIDIuNjY3OTY5IEwgMTguNjY3OTY5IDIuNjY3OTY5IEwgMTguNjY3OTY5IDEuMzMyMDMxIEwgMTkuNSAxLjMzMjAzMSBDIDE5LjY4MzU5NCAxLjMzMjAzMSAyMCAxLjYzMjgxMiAyMCAyIEMgMjAgMS42MzI4MTIgMjAuMzE2NDA2IDEuMzMyMDMxIDIwLjUgMS4zMzIwMzEgTCAyMS4zMzIwMzEgMS4zMzIwMzEgTCAyMS4zMzIwMzEgMi42Njc5NjkgTCAyMC42Njc5NjkgMi42Njc5NjkgQyAyMC40ODQzNzUgMi42Njc5NjkgMjAuMzMyMDMxIDIuOTY0ODQ0IDIwLjMzMjAzMSAzLjMzMjAzMSBaIE0gMjAuMzMyMDMxIDEyLjY2Nzk2OSAiLz4KPC9nPgo8L3N2Zz4K')
 			24 0,
 		text;
 }
+
+/** se-type-document - header  */
+.sun-editor.se-rtl .se-wrapper.se-type-document .se-document-lines .se-document-lines-inner {
+	padding-left: var(--se-doc-info-inner-line-padding);
+	padding-right: var(--se-doc-info-inner-padding);
+	direction: rtl;
+}
+.sun-editor.se-rtl .se-wrapper.se-type-document .se-document-lines .se-document-lines-inner > div.se-doc-h1 {
+	padding-left: var(--se-doc-info-inner-line-padding);
+	padding-right: var(--se-doc-info-inner-line-indent-h1);
+}
+.sun-editor.se-rtl .se-wrapper.se-type-document .se-document-lines .se-document-lines-inner > div.se-doc-h2 {
+	padding-left: var(--se-doc-info-inner-line-padding);
+	padding-right: var(--se-doc-info-inner-line-indent-h2);
+}
+.sun-editor.se-rtl .se-wrapper.se-type-document .se-document-lines .se-document-lines-inner > div.se-doc-h3 {
+	padding-left: var(--se-doc-info-inner-line-padding);
+	padding-right: var(--se-doc-info-inner-line-indent-h3);
+}
+.sun-editor.se-rtl .se-wrapper.se-type-document .se-document-lines .se-document-lines-inner > div.se-doc-h4 {
+	padding-left: var(--se-doc-info-inner-line-padding);
+	padding-right: var(--se-doc-info-inner-line-indent-h4);
+}
+.sun-editor.se-rtl .se-wrapper.se-type-document .se-document-lines .se-document-lines-inner > div.se-doc-h5 {
+	padding-left: var(--se-doc-info-inner-line-padding);
+	padding-right: var(--se-doc-info-inner-line-indent-h5);
+}
+.sun-editor.se-rtl .se-wrapper.se-type-document .se-document-lines .se-document-lines-inner > div.se-doc-h6 {
+	padding-left: var(--se-doc-info-inner-line-padding);
+	padding-right: var(--se-doc-info-inner-line-indent-h6);
+}
+/* se-type-document - page */
+.sun-editor.se-rtl .se-wrapper.se-type-document .se-document-page {
+	direction: rtl;
+}
+.sun-editor.se-rtl .se-wrapper.se-type-document .se-document-page > div {
+	right: 0px;
+	margin-left: 0;
+	margin-right: 1px;
+}
+.sun-editor.se-rtl .se-wrapper.se-type-document .se-document-page > div > div.se-document-page-line {
+	right: unset;
+	left: 100%;
+	z-index: 1;
+}
+
+/* modal - footer */
+.sun-editor.se-rtl .se-modal-area .se-modal-inner .se-modal-footer .se-btn {
+	float: right;
+}
+
+/* modal - resize handle */
+/* modal - resize handle - h */
+.sun-editor.se-rtl .se-modal-area .se-modal-inner .se-modal-content .se-modal-resize-handle-h {
+	left: 0;
+	right: unset;
+}
+/* modal - resize handle - c */
+.sun-editor.se-rtl .se-modal-area .se-modal-inner .se-modal-content .se-modal-resize-handle-c {
+	cursor: nesw-resize;
+	left: 4px;
+	right: unset;
+}
+
 /** --- RTL end -------------------------------------------------------------------------------------------------------------------------------------------------- */
 
 /** button module float --------------------------------------------- */
@@ -3224,18 +3885,32 @@
 	float: right;
 }
 
+/** document-type codeView --------------------------------------------- */
+.sun-editor .se-wrapper.se-type-document.se-code-view-status {
+	padding: 0;
+}
+.sun-editor .se-wrapper.se-type-document.se-code-view-status .se-document-lines,
+.sun-editor .se-wrapper.se-type-document.se-code-view-status .se-document-pages {
+	display: none;
+}
+
 /** --- error ---------------------------------------------------------- */
 .sun-editor .se-error {
-	color: #d9534f;
+	color: var(--se-error-color);
+}
+
+.sun-editor input.se-error,
+.sun-editor select.se-error,
+.sun-editor textarea.se-error {
+	border: 1px solid var(--se-error-dark2-color) !important;
 }
 
 .sun-editor input.se-error:focus,
-select.se-error:focus,
-textarea.se-error:focus {
-	border: 1px solid #f2dede;
+.sun-editor select.se-error:focus,
+.sun-editor textarea.se-error:focus {
+	border: 1px solid var(--se-error-color) !important;
 	outline: 0;
-	-webkit-box-shadow: 0 0 0 0.2rem #eed3d7;
-	box-shadow: 0 0 0 0.2rem #eed3d7;
+	box-shadow: 0 0 0 0.2rem var(--se-error-light2-color);
 	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 
@@ -3260,74 +3935,79 @@ textarea.se-error:focus {
 }
 
 /** ---------------------------------------------------------- show blocks mode ----------------------------------------------------- */
-.sun-editor .se-show-block p,
-.sun-editor .se-show-block div,
-.sun-editor .se-show-block h1,
-.sun-editor .se-show-block h2,
-.sun-editor .se-show-block h3,
-.sun-editor .se-show-block h4,
-.sun-editor .se-show-block h5,
-.sun-editor .se-show-block h6,
-.sun-editor .se-show-block li,
-.sun-editor .se-show-block ol,
-.sun-editor .se-show-block ul,
-.sun-editor .se-show-block pre {
-	border: 1px dashed #3f9dff !important;
+.sun-editor-editable.se-show-block p,
+.sun-editor-editable.se-show-block div,
+.sun-editor-editable.se-show-block h1,
+.sun-editor-editable.se-show-block h2,
+.sun-editor-editable.se-show-block h3,
+.sun-editor-editable.se-show-block h4,
+.sun-editor-editable.se-show-block h5,
+.sun-editor-editable.se-show-block h6,
+.sun-editor-editable.se-show-block li,
+.sun-editor-editable.se-show-block ol,
+.sun-editor-editable.se-show-block ul,
+.sun-editor-editable.se-show-block pre {
+	border: 1px dashed var(--se-show-blocks-color) !important;
 	padding: 14px 8px 8px 8px !important;
 }
 
-.sun-editor .se-show-block ol,
-.sun-editor .se-show-block ul {
-	border: 1px dashed #d539ff !important;
+.sun-editor-editable.se-show-block ol,
+.sun-editor-editable.se-show-block ul {
+	border: 1px dashed var(--se-show-blocks-li-color) !important;
 }
 
-.sun-editor .se-show-block pre {
-	border: 1px dashed #27c022 !important;
+.sun-editor-editable.se-show-block pre {
+	border: 1px dashed var(--se-show-blocks-pre-color) !important;
 }
 
-.sun-editor .se-show-block p {
+.sun-editor-editable.se-show-block div.se-component {
+	border: 1px dashed var(--se-show-blocks-component-color) !important;
+	padding: 1px !important;
+}
+
+.sun-editor-editable.se-show-block p {
 	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAPAQMAAAAF7dc0AAAABlBMVEWAgID////n1o2sAAAAAnRSTlP/AOW3MEoAAAAaSURBVAjXY/j/gwGCPvxg+F4BQiAGDP1HQQByxxw0gqOzIwAAAABJRU5ErkJggg==') no-repeat;
 }
 
-.sun-editor .se-show-block div {
+.sun-editor-editable.se-show-block div:not(.se-component) {
 	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAPAQMAAAAxlBYoAAAABlBMVEWAgID////n1o2sAAAAAnRSTlP/AOW3MEoAAAAmSURBVAjXY/j//wcDDH+8XsHwDYi/hwNx1A8w/nYLKH4XoQYJAwCXnSgcl2MOPgAAAABJRU5ErkJggg==') no-repeat;
 }
 
-.sun-editor .se-show-block h1 {
+.sun-editor-editable.se-show-block h1 {
 	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAPAQMAAAA4f7ZSAAAABlBMVEWAgID////n1o2sAAAAAnRSTlP/AOW3MEoAAAAfSURBVAjXY/j/v4EBhr+9B+LzEPrDeygfhI8j1CBhAEhmJGY4Rf6uAAAAAElFTkSuQmCC') no-repeat;
 }
 
-.sun-editor .se-show-block h2 {
+.sun-editor-editable.se-show-block h2 {
 	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAPAQMAAAA4f7ZSAAAABlBMVEWAgID////n1o2sAAAAAnRSTlP/AOW3MEoAAAAmSURBVAjXY/j/v4EBhr+dB+LtQPy9geEDEH97D8T3gbgdoQYJAwA51iPuD2haEAAAAABJRU5ErkJggg==') no-repeat;
 }
 
-.sun-editor .se-show-block h3 {
+.sun-editor-editable.se-show-block h3 {
 	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAPAQMAAAA4f7ZSAAAABlBMVEWAgID////n1o2sAAAAAnRSTlP/AOW3MEoAAAAiSURBVAjXY/j/v4EBhr+dB+LtQPy9geHDeQgN5p9HqEHCADeWI+69VG2MAAAAAElFTkSuQmCC') no-repeat;
 }
 
-.sun-editor .se-show-block h4 {
+.sun-editor-editable.se-show-block h4 {
 	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPAQMAAADTSA1RAAAABlBMVEWAgID////n1o2sAAAAAnRSTlP/AOW3MEoAAAAiSURBVAjXY/j//wADDH97DsTXIfjDdiDdDMTfIRhZHRQDAKJOJ6L+K3y7AAAAAElFTkSuQmCC') no-repeat;
 }
 
-.sun-editor .se-show-block h5 {
+.sun-editor-editable.se-show-block h5 {
 	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAPAQMAAAA4f7ZSAAAABlBMVEWAgID////n1o2sAAAAAnRSTlP/AOW3MEoAAAAlSURBVAjXY/j/v4EBhr+1A/F+IO5vYPiwHUh/B2IQfR6hBgkDABlWIy5uM+9GAAAAAElFTkSuQmCC') no-repeat;
 }
 
-.sun-editor .se-show-block h6 {
+.sun-editor-editable.se-show-block h6 {
 	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAPAQMAAAA4f7ZSAAAABlBMVEWAgID////n1o2sAAAAAnRSTlP/AOW3MEoAAAAiSURBVAjXY/j/v4EBhr+dB+LtQLy/geFDP5S9HSKOrA6KAR9GIza1ptJnAAAAAElFTkSuQmCC') no-repeat;
 }
 
-.sun-editor .se-show-block li {
+.sun-editor-editable.se-show-block li {
 	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAA7SURBVDhPYxgFcNDQ0PAfykQBIHEYhgoRB/BpwCfHBKWpBkaggYxQGgOgBzyQD1aLLA4TGwWDGjAwAACR3RcEU9Ui+wAAAABJRU5ErkJggg==')
 		no-repeat;
 }
 
-.sun-editor .se-show-block ol {
+.sun-editor-editable.se-show-block ol {
 	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABHSURBVDhPYxgFcNDQ0PAfhKFcFIBLHCdA1oBNM0kGEmMAPgOZoDTVANUNxAqQvURMECADRiiNAWCagDSGGhyW4DRrMAEGBgAu0SX6WpGgjAAAAABJRU5ErkJggg==')
 		no-repeat;
 }
 
-.sun-editor .se-show-block ul {
+.sun-editor-editable.se-show-block ul {
 	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAA1SURBVDhPYxgFDA0NDf+hTBSALI5LDQgwQWmqgVEDKQcsUBoF4ItFGEBXA+QzQpmDGjAwAAA8DQ4Lni6gdAAAAABJRU5ErkJggg==')
 		no-repeat;
 }
@@ -3350,7 +4030,7 @@ textarea.se-error:focus {
 	display: none;
 	pointer-events: none;
 	width: 2px;
-	background-color: #1275ff;
+	background-color: var(--se-active-dark5-color);
 	z-index: 2147483647;
 }
 .sun-editor.sun-editor-carrier-wrapper .se-drag-cursor::before {
@@ -3364,7 +4044,7 @@ textarea.se-error:focus {
 	margin-right: 0;
 	margin-left: -4px;
 	border-width: 6px 5px 0 5px;
-	border-color: #1275ff transparent transparent transparent;
+	border-color: var(--se-active-dark5-color) transparent transparent transparent;
 }
 .sun-editor.sun-editor-carrier-wrapper .se-drag-cursor::after {
 	content: '';
@@ -3377,18 +4057,91 @@ textarea.se-error:focus {
 	margin-right: 0;
 	margin-left: -4px;
 	border-width: 0 5px 5px 5px;
-	border-color: transparent transparent #1275ff transparent;
+	border-color: transparent transparent var(--se-active-dark5-color) transparent;
+}
+
+/** page break */
+.sun-editor-editable[contenteditable='true'] .se-page-break {
+	display: flex;
+	visibility: visible !important;
+	position: relative;
+	align-items: center;
+	justify-content: center;
+	clear: both;
+	width: 100%;
+	height: 24px;
+	margin: -12px 0 0 0;
+	padding: 0;
+	z-index: 1;
+}
+
+.sun-editor-editable[contenteditable='true'] .se-page-break::after {
+	content: '⎯⎯⎯⎯⎯⎯';
+	position: absolute;
+	top: 1px;
+	background: var(--se-main-background-color);
+	padding: 0 5px;
+	color: var(--se-doc-info-page-background-color);
+	font-size: var(--se-main-font-size);
 }
 
 /** animation */
+@-webkit-keyframes blinker {
+	50% {
+		opacity: 0;
+	}
+}
+
 @keyframes blinker {
 	50% {
 		opacity: 0;
 	}
 }
 
+@-webkit-keyframes spinner {
+	to {
+		transform: rotate(361deg);
+	}
+}
+
 @keyframes spinner {
 	to {
 		transform: rotate(361deg);
 	}
 }
+
+@keyframes toast-in {
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@keyframes toast-out {
+	to {
+		opacity: 0;
+		transform: translateY(-10px);
+	}
+}
+
+@keyframes se-alert-in {
+	from {
+		opacity: 0;
+		transform: scale(0.9);
+	}
+	to {
+		opacity: 1;
+		transform: scale(1);
+	}
+}
+
+@keyframes se-alert-out {
+	from {
+		opacity: 1;
+		transform: scale(1);
+	}
+	to {
+		opacity: 0;
+		transform: scale(0.95);
+	}
+}