suneditor 3.0.0-alpha.2 → 3.0.0-alpha.20

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('variables.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,104 @@
 	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) var(--se-doc-info-inner-padding) var(--se-doc-info-inner-padding) 0;
+}
+.sun-editor .se-wrapper.se-type-document .se-document-lines .se-document-lines-inner > div.se-doc-item {
+	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 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 +213,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 +238,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 +264,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 +274,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 +301,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 +518,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 +528,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 +538,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,28 +546,66 @@
 }
 
 .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 ---------------------------------------------------------- */
 /* default svg */
 .sun-editor svg {
 	fill: currentColor;
+	vertical-align: super;
 }
 
 .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 */
@@ -519,22 +630,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 */
@@ -548,18 +659,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 */
@@ -588,7 +692,7 @@
 	font-style: normal;
 	font-variant: normal;
 	text-rendering: auto;
-	font-size: 15px;
+	font-size: var(--se-modal-title-font-size);
 	line-height: 2;
 }
 
@@ -620,35 +724,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 */
@@ -659,7 +763,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;
@@ -676,9 +780,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;
 }
@@ -689,19 +795,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 ---------------------------------------------------------- */
@@ -713,8 +826,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;
 }
 
@@ -733,14 +846,6 @@
 	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;
@@ -773,25 +878,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 ----------------------------------------------------------  */
@@ -800,12 +900,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;
@@ -819,12 +930,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 {
@@ -871,8 +982,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 {
@@ -890,7 +1003,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 {
@@ -907,15 +1020,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;
 }
 
@@ -955,11 +1068,10 @@
 	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);
+	background-color: var(--se-main-background-color);
 	box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
 	outline: 0 none;
 }
@@ -983,6 +1095,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;
 }
 
@@ -1013,7 +1127,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 {
@@ -1043,7 +1157,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 */
@@ -1054,6 +1168,7 @@
 .sun-editor .se-list-layer.se-list-line hr {
 	border-width: 1px 0 0;
 	height: 1px;
+	border-color: var(--se-edit-hr-color);
 }
 
 /* dropdown layer - align */
@@ -1084,11 +1199,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;
 }
 
@@ -1123,33 +1238,39 @@
 }
 
 .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-editable[contenteditable='true'].se-copy-format-cursor {
+	cursor: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMjQgMTYiIHZlcnNpb249IjEuMSI+CjxnIGlkPSJzdXJmYWNlMSI+CjxwYXRoIHN0eWxlPSIgc3Ryb2tlOm5vbmU7ZmlsbC1ydWxlOm5vbnplcm87ZmlsbDpyZ2IoMCUsMCUsMCUpO2ZpbGwtb3BhY2l0eToxOyIgZD0iTSA0LjMzMjAzMSAxMi42Njc5NjkgQyA0LjMzMjAzMSAxMy4wMzUxNTYgNC40ODQzNzUgMTMuMzMyMDMxIDQuNjY3OTY5IDEzLjMzMjAzMSBMIDUuMzMyMDMxIDEzLjMzMjAzMSBMIDUuMzMyMDMxIDE0LjY2Nzk2OSBMIDQuNSAxNC42Njc5NjkgQyA0LjMxNjQwNiAxNC42Njc5NjkgNCAxNC4zNjcxODggNCAxNCBDIDQgMTQuMzY3MTg4IDMuNjgzNTk0IDE0LjY2Nzk2OSAzLjUgMTQuNjY3OTY5IEwgMi42Njc5NjkgMTQuNjY3OTY5IEwgMi42Njc5NjkgMTMuMzMyMDMxIEwgMy4zMzIwMzEgMTMuMzMyMDMxIEMgMy41MTU2MjUgMTMuMzMyMDMxIDMuNjY3OTY5IDEzLjAzNTE1NiAzLjY2Nzk2OSAxMi42Njc5NjkgTCAzLjY2Nzk2OSAzLjMzMjAzMSBDIDMuNjY3OTY5IDIuOTY0ODQ0IDMuNTE1NjI1IDIuNjY3OTY5IDMuMzMyMDMxIDIuNjY3OTY5IEwgMi42Njc5NjkgMi42Njc5NjkgTCAyLjY2Nzk2OSAxLjMzMjAzMSBMIDMuNSAxLjMzMjAzMSBDIDMuNjgzNTk0IDEuMzMyMDMxIDQgMS42MzI4MTIgNCAyIEMgNCAxLjYzMjgxMiA0LjMxNjQwNiAxLjMzMjAzMSA0LjUgMS4zMzIwMzEgTCA1LjMzMjAzMSAxLjMzMjAzMSBMIDUuMzMyMDMxIDIuNjY3OTY5IEwgNC42Njc5NjkgMi42Njc5NjkgQyA0LjQ4NDM3NSAyLjY2Nzk2OSA0LjMzMjAzMSAyLjk2NDg0NCA0LjMzMjAzMSAzLjMzMjAzMSBaIE0gNC4zMzIwMzEgMTIuNjY3OTY5ICIvPgo8cGF0aCBzdHlsZT0iIHN0cm9rZTpub25lO2ZpbGwtcnVsZTpub256ZXJvO2ZpbGw6cmdiKDAlLDAlLDAlKTtmaWxsLW9wYWNpdHk6MTsiIGQ9Ik0gMjAgMi42Njc5NjkgTCAyMCAyIEMgMjAgMS42MzI4MTIgMTkuNzAzMTI1IDEuMzMyMDMxIDE5LjMzMjAzMSAxLjMzMjAzMSBMIDExLjMzMjAzMSAxLjMzMjAzMSBDIDEwLjk2NDg0NCAxLjMzMjAzMSAxMC42Njc5NjkgMS42MzI4MTIgMTAuNjY3OTY5IDIgTCAxMC42Njc5NjkgNC42Njc5NjkgQyAxMC42Njc5NjkgNS4wMzUxNTYgMTAuOTY0ODQ0IDUuMzMyMDMxIDExLjMzMjAzMSA1LjMzMjAzMSBMIDE5LjMzMjAzMSA1LjMzMjAzMSBDIDE5LjcwMzEyNSA1LjMzMjAzMSAyMCA1LjAzNTE1NiAyMCA0LjY2Nzk2OSBMIDIwIDQgTCAyMC42Njc5NjkgNCBMIDIwLjY2Nzk2OSA2LjY2Nzk2OSBMIDE0IDYuNjY3OTY5IEwgMTQgMTQgQyAxNCAxNC4zNjcxODggMTQuMjk2ODc1IDE0LjY2Nzk2OSAxNC42Njc5NjkgMTQuNjY3OTY5IEwgMTYgMTQuNjY3OTY5IEMgMTYuMzY3MTg4IDE0LjY2Nzk2OSAxNi42Njc5NjkgMTQuMzY3MTg4IDE2LjY2Nzk2OSAxNCBMIDE2LjY2Nzk2OSA4IEwgMjIgOCBMIDIyIDIuNjY3OTY5IFogTSAyMCAyLjY2Nzk2OSAiLz4KPC9nPgo8L3N2Zz4K')
+			0 8,
+		text;
 }
 
 /* table resize */
 /* table resize - ew */
-.sun-editor-editable table th:not(.se-selected-table-cell):hover::before,
-.sun-editor-editable table td:not(.se-selected-table-cell):hover::before {
+.sun-editor-editable[contenteditable='true'] table th:not(.se-selected-table-cell):hover::before,
+.sun-editor-editable[contenteditable='true'] table td:not(.se-selected-table-cell):hover::before {
 	content: '';
 	position: absolute;
 	top: 0;
@@ -1159,8 +1280,8 @@
 	background-color: transparent;
 	cursor: ew-resize;
 }
-.sun-editor-editable table th:not(.se-selected-table-cell):hover::after,
-.sun-editor-editable table td:not(.se-selected-table-cell):hover::after {
+.sun-editor-editable[contenteditable='true'] table th:not(.se-selected-table-cell):hover::after,
+.sun-editor-editable[contenteditable='true'] table td:not(.se-selected-table-cell):hover::after {
 	content: '';
 	position: absolute;
 	top: 0;
@@ -1178,7 +1299,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;
@@ -1191,7 +1312,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;
@@ -1203,7 +1324,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;
@@ -1215,7 +1336,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;
@@ -1226,21 +1347,21 @@
 .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);
+	border: 1px solid var(--se-input-btn-border-color);
+	border-radius: var(--se-border-radius);
 	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 }
 
@@ -1289,6 +1410,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;
@@ -1311,18 +1434,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 -------------------------------------------------------------- */
@@ -1418,12 +1548,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 {
@@ -1433,8 +1563,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;
 }
 
@@ -1462,22 +1592,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;
@@ -1487,8 +1618,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;
@@ -1504,20 +1636,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-main-background-color2);
+	color: var(--se-main-font-color2);
 	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-main-font-color2);
+	color: var(--se-main-background-color2);
+	font-size: var(--se-main-font-size);
 	word-break: break-all;
 	padding: 4px;
 	margin: 0;
@@ -1526,9 +1661,11 @@
 
 .sun-editor .se-wrapper .se-wrapper-wysiwyg {
 	display: block;
+	position: relative;
 }
 
 .sun-editor-editable[contenteditable='true'] .se-disable-pointer *,
+.sun-editor-editable[contenteditable='true'] .se-math *,
 .sun-editor-editable[contenteditable='true'] .katex * {
 	pointer-events: none;
 }
@@ -1540,8 +1677,8 @@
 	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;
@@ -1565,9 +1702,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;
 }
 
@@ -1590,6 +1727,7 @@
 	-webkit-user-select: none;
 	-ms-user-select: none;
 	z-index: 2147483647;
+	background-color: transparent;
 }
 
 /** status bar - nabigation */
@@ -1598,10 +1736,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;
 }
@@ -1615,13 +1753,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;
 }
 
@@ -1643,9 +1782,9 @@
 .sun-editor .se-modal label,
 .sun-editor .se-modal input,
 .sun-editor .se-modal button {
-	font-size: 14px;
+	font-size: var(--se-modal-input-font-size);
 	line-height: 1.5;
-	color: #111;
+	color: var(--se-main-color);
 	margin: 0;
 }
 
@@ -1655,7 +1794,7 @@
 	height: 100%;
 	top: 0;
 	left: 0;
-	background-color: #222;
+	background-color: var(--se-overlay-background-color);
 	opacity: 0.5;
 }
 
@@ -1674,22 +1813,133 @@
 	width: auto;
 	max-width: 500px;
 	margin: 1.75rem 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);
 }
 
+/* modal - resize handle */
+/* modal - resize handle - w */
+.sun-editor .se-modal .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 .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 .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 .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 .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 .se-modal-inner .se-modal-content .se-modal-resize-handle-c::before,
+.sun-editor .se-modal .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 .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 .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 .se-modal-inner .se-modal-content .se-modal-resize-handle-w:hover::before,
+.sun-editor .se-modal .se-modal-inner .se-modal-content .se-modal-resize-handle-w.active::before,
+.sun-editor .se-modal .se-modal-inner .se-modal-content .se-modal-resize-handle-h:hover::before,
+.sun-editor .se-modal .se-modal-inner .se-modal-content .se-modal-resize-handle-h.active::before,
+.sun-editor .se-modal .se-modal-inner .se-modal-content .se-modal-resize-handle-c:hover::before,
+.sun-editor .se-modal .se-modal-inner .se-modal-content .se-modal-resize-handle-c:hover::after,
+.sun-editor .se-modal .se-modal-inner .se-modal-content .se-modal-resize-handle-c.active::before,
+.sun-editor .se-modal .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 .se-modal-inner .se-modal-content.se-modal-large {
+	max-width: 750px;
+	width: 100%;
+}
+.sun-editor .se-modal .se-modal-inner .se-modal-content.se-modal-large .se-modal-body {
+	height: 50vh;
+}
+
+/* modal - responsive */
+.sun-editor .se-modal .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%;
+		width: 100% !important;
+		min-width: 100% !important;
+		max-width: 100% !important;
 	}
 }
 
+.sun-editor .se-modal .se-modal-inner .se-modal-content.se-modal-responsive .se-modal-resize-form {
+	max-width: 100%;
+}
+
 .sun-editor .se-modal .se-modal-inner .se-modal-content label {
 	display: inline-block;
 	max-width: 100%;
@@ -1701,34 +1951,33 @@
 	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 {
 	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 {
 	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 {
 	float: left;
-	font-size: 15px;
+	font-size: var(--se-modal-title-font-size);
 	font-weight: bold;
 	margin: 0;
 	padding: 0;
@@ -1737,7 +1986,15 @@
 
 .sun-editor .se-modal .se-modal-inner .se-modal-body {
 	position: relative;
-	padding: 15px 15px 5px 15px;
+	padding: 15px 15px 10px 15px;
+}
+.sun-editor .se-modal .se-modal-inner .se-modal-body-top {
+	position: relative;
+	padding: 0px 15px 5px 15px;
+}
+.sun-editor .se-modal .se-modal-inner .se-modal-body-bottom {
+	position: relative;
+	padding: 5px 15px 0px 15px;
 }
 
 .sun-editor .se-modal .se-modal-inner .se-modal-form {
@@ -1747,10 +2004,16 @@
 	position: relative;
 	display: flex;
 }
+.sun-editor .se-modal .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 .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 {
@@ -1759,7 +2022,7 @@
 }
 
 .sun-editor .se-modal .se-modal-inner input:disabled {
-	background-color: #f3f3f3;
+	background-color: var(--se-modal-input-disabled-background-color);
 }
 
 .sun-editor .se-modal .se-modal-inner .se-modal-size-text {
@@ -1767,12 +2030,12 @@
 }
 
 .sun-editor .se-modal .se-modal-inner .se-modal-size-text .size-w {
-	width: 70px;
+	width: var(--se-modal-input-width);
 	text-align: center;
 }
 
 .sun-editor .se-modal .se-modal-inner .se-modal-size-text .size-h {
-	width: 70px;
+	width: var(--se-modal-input-width);
 	text-align: center;
 }
 
@@ -1787,7 +2050,11 @@
 	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 .se-modal-inner .se-modal-footer .se-btn {
+	float: left;
 }
 
 .sun-editor .se-modal .se-modal-inner .se-modal-footer > div {
@@ -1810,7 +2077,7 @@
 }
 
 .sun-editor .se-modal .se-modal-inner .se-modal-btn-check:disabled + span {
-	color: #999;
+	color: var(--se-modal-input-disabled-color);
 }
 
 .sun-editor .se-modal .se-modal-inner .se-modal-form-footer .se-modal-btn-check {
@@ -1837,7 +2104,7 @@
 .sun-editor .se-modal .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;
 }
 
@@ -1845,19 +2112,19 @@
 .sun-editor .se-modal .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 {
 	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 {
@@ -1875,8 +2142,8 @@
 	height: 100%;
 	padding: 0;
 	margin: 0;
-	background-color: #f9f9f9;
-	border: 2px dashed #ccc;
+	background-color: var(--se-main-background-color3);
+	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 * {
@@ -1893,6 +2160,8 @@
 	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 {
+	width: -webkit-max-content;
+	width: -moz-max-content;
 	width: max-content;
 	max-width: 100%;
 	margin: auto;
@@ -1916,9 +2185,9 @@
 .sun-editor .se-modal .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;
 }
 
@@ -1928,34 +2197,34 @@
 
 .sun-editor .se-modal .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 .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;
+	color: var(--se-modal-anchor-color);
 }
 
 /* modal - revert button */
 .sun-editor .se-modal .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;
@@ -1963,20 +2232,18 @@
 }
 
 .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;
+	border: 1px solid var(--se-active-dark4-color);
+	font-size: var(--se-main-font-size);
 	padding: 4px;
 	direction: ltr;
 }
@@ -1988,46 +2255,47 @@
 }
 
 .sun-editor .se-modal .se-modal-inner .se-modal-form .se-math-preview {
-	font-size: 13px;
+	font-size: var(--se-main-font-size);
 }
 
 .sun-editor .se-modal .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 * {
 	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 .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 .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 .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 {
 	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;
-	word-break: break-word;
-	white-space: pre-wrap;
-	overflow-wrap: break-word;
+	word-break: break-all;
+	white-space: pre;
 	max-height: none;
 }
 
@@ -2043,18 +2311,18 @@
 	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 {
-	flex: auto;
+	flex: 1;
 	margin: 0;
 }
 
 /* modal - modal - anchor module - rel select */
 .sun-editor .se-modal .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 {
 	border-width: 1px;
@@ -2062,20 +2330,23 @@
 
 .sun-editor .se-modal .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 {
+	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 .se-modal-inner .se-modal-body .se-drawing-canvas {
+	outline: 1px solid var(--se-main-outline-color);
+}
 
 /** --- controller ---------------------------------------------------------- */
 .sun-editor .se-controller {
@@ -2085,7 +2356,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;
@@ -2095,7 +2366,7 @@
 	word-spacing: normal;
 	word-wrap: normal;
 	white-space: normal;
-	background-color: #fff;
+	background-color: var(--se-main-background-color);
 	-webkit-background-clip: padding-box;
 	background-clip: padding-box;
 	line-break: auto;
@@ -2105,9 +2376,11 @@
 	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);
 }
 
@@ -2123,13 +2396,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: '';
@@ -2144,36 +2410,49 @@
 }
 
 .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;
+	transition: outline-color 0.2s ease-in-out, outline-width 0.2s ease-in-out;
 }
 
 .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 .se-component figure.se-figure-selected:not(.se-figure-over-selected)::after {
+.sun-editor-editable[contenteditable='true'] .se-component figure.se-figure-selected:not(.se-figure-over-selected)::after {
 	pointer-events: none;
 }
 
 .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.5rem 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;
@@ -2187,9 +2466,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 {
@@ -2199,18 +2479,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;
 }
 
@@ -2228,13 +2507,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;
 }
@@ -2242,7 +2521,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 {
@@ -2251,14 +2530,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;
@@ -2267,10 +2546,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 {
@@ -2295,10 +2574,10 @@
 	cursor: move;
 	width: 18px;
 	height: 18px;
-	background-color: #80bdff;
+	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 {
@@ -2310,7 +2589,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;
@@ -2319,71 +2598,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 {
@@ -2394,10 +2681,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;
 }
 
@@ -2408,24 +2695,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;
@@ -2433,19 +2720,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;
 }
 
@@ -2456,7 +2745,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;
@@ -2473,17 +2762,18 @@
 	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);
+	border: 1px solid var(--se-main-outline-color);
 	box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
 	outline: 0 none;
 }
@@ -2508,7 +2798,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;
@@ -2525,25 +2815,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;
 }
 
@@ -2552,12 +2840,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;
@@ -2567,27 +2855,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%;
@@ -2596,61 +2884,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);
 }
 
 /* --- 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-light5-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-main-background-color2);
 	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;
@@ -2661,128 +3035,217 @@
 	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-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-browser .se-browser-search button {
+	float: none;
 }
 
-.sun-editor .se-file-browser .se-file-browser-tags a:active {
-	background-color: #d1d1d1;
+.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 {
-	background-color: #ebf3fe;
-	color: #4592ff;
+.sun-editor .se-browser .se-browser-tags a:active {
+	background-color: var(--se-main-border-color);
 }
 
-.sun-editor .se-file-browser .se-file-browser-tags a.on:hover {
-	background-color: #d8e8fe;
+.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-file-browser .se-file-browser-tags a.on:active {
-	background-color: #d0e3ff;
+.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;
 }
 
+.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);
+}
+
 /** --- notice */
 .sun-editor .se-notice {
 	position: relative;
@@ -2792,12 +3255,11 @@
 	width: auto;
 	height: auto;
 	margin: 1.75rem auto;
-	border-radius: 2px;
-	-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
+	border-radius: var(--se-border-radius);
 	box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
 	word-break: break-all;
-	color: #b94a48;
-	background-color: #fff;
+	color: var(--se-error-color);
+	background-color: var(--se-main-background-color);
 	padding: 15px;
 	border: 1px solid rgba(0, 0, 0, 0.2);
 }
@@ -2811,10 +3273,9 @@
 .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;
 }
 
@@ -2822,7 +3283,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 {
@@ -2857,9 +3318,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;
@@ -2874,7 +3335,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 {
@@ -2903,10 +3364,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;
@@ -2930,7 +3407,7 @@
 .sun-editor-editable table th.se-selected-table-cell::after {
 	position: absolute;
 	content: '';
-	background-color: #d0e3ff;
+	background-color: var(--se-active-dark3-color);
 	opacity: 0.3;
 	width: 100%;
 	height: 100%;
@@ -2939,9 +3416,9 @@
 	right: -1px;
 	top: -1px;
 }
-.sun-editor-editable table td.se-selected-cell-focus,
-.sun-editor-editable table th.se-selected-cell-focus {
-	outline: 2px dashed #1275ff;
+.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 var(--se-active-dark5-color);
 	z-index: 1;
 }
 
@@ -2952,6 +3429,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;
 }
@@ -2977,21 +3458,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 */
@@ -3073,7 +3554,7 @@
 	direction: rtl;
 }
 
-.sun-editor.se-rtl .se-modal .se-modal-inner .se-modal-form .se-video-ratio {
+.sun-editor.se-rtl .se-modal .se-modal-inner .se-modal-form .se-modal-ratio {
 	margin-left: 0;
 	margin-right: 4px;
 }
@@ -3105,7 +3586,15 @@
 }
 
 .sun-editor.se-rtl .se-modal .se-modal-inner .se-modal-size-text {
-	padding-right: 34px;
+	padding-right: var(--se-input-btn-size);
+}
+
+/* modal - flex-group */
+.sun-editor.se-rtl .se-modal .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 */
@@ -3142,24 +3631,54 @@
 	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: -1px 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;
@@ -3197,6 +3716,75 @@
 	margin-right: -11px;
 	margin-left: 0;
 }
+
+.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: var(--se-doc-info-inner-padding) 0 var(--se-doc-info-inner-padding) 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 .se-modal-inner .se-modal-footer .se-btn {
+	float: right;
+}
+
+/* modal - resize handle */
+/* modal - resize handle - h */
+.sun-editor.se-rtl .se-modal .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 .se-modal-inner .se-modal-content .se-modal-resize-handle-c {
+	cursor: nesw-resize;
+	left: 4px;
+	right: unset;
+}
+
 /** --- RTL end -------------------------------------------------------------------------------------------------------------------------------------------------- */
 
 /** button module float --------------------------------------------- */
@@ -3208,18 +3796,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;
 }
 
@@ -3244,74 +3846,74 @@ 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 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 {
 	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;
 }
@@ -3334,7 +3936,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 {
@@ -3348,7 +3950,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: '';
@@ -3361,16 +3963,53 @@ 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);