@emailmaker/emailmaker 1.1.65 → 1.1.69

package/iframe/css/sandbox-darktheme.css

@@ -122,7 +122,7 @@
 [em-state='active']:not(.em-element-resize-height, .em-element-resize-img),
 [em-state='active-inside']:not(.em-element-resize-height, .em-element-resize-img),
 .sortable-ghost {
-  outline: 1px solid var(--colorPrimary);
+  outline: 1px solid var(--em-colorPrimary);
 }
 
 /* Tiny CSS */

package/iframe/css/sandbox-light.css

@@ -199,7 +199,7 @@ img[src*='<!--']::after {
 }
 
 em-replace::after {
-  background-color: var(--colorLink);
+  background-color: var(--em-colorLink);
 }
 
 /* Маркер глобального блока в превью (псевдоэлемент, см. sandbox.css) */

package/iframe/css/sandbox.css

@@ -14,7 +14,7 @@ body {
 }
 
 html {
-  zoom: var(--appZoom);
+  zoom: var(--em-appZoom);
 }
 
 body.em-sandbox-discuss {
@@ -37,15 +37,15 @@ img {
 
 /* Файл с диска над картинкой в шаблоне — подсветка цели (токены темы плагина → :root из SANDBOX_SET_THEME_VARIABLES) */
 img.em-native-img-drop-target {
-  outline: 3px solid var(--colorPrimary, #1677ff);
+  outline: 3px solid var(--em-colorPrimary, #1677ff);
   outline-offset: 2px;
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--colorBgElevated, #ffffff) 85%, transparent) inset;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--em-colorBgElevated, #ffffff) 85%, transparent) inset;
 }
 
 /* Идёт загрузка после drop на img */
 img.em-native-img-uploading {
   opacity: 0.55;
-  outline: 3px solid var(--colorPrimaryBorder, var(--colorPrimary, #1677ff));
+  outline: 3px solid var(--em-colorPrimaryBorder, var(--em-colorPrimary, #1677ff));
   outline-offset: -1px;
 }
 
@@ -64,8 +64,8 @@ img.em-native-img-uploading {
   width: 40px;
   height: 40px;
   flex-shrink: 0;
-  border: 3px solid var(--colorPrimaryBg, #e6f4ff);
-  border-top-color: var(--colorPrimary, #1677ff);
+  border: 3px solid var(--em-colorPrimaryBg, #e6f4ff);
+  border-top-color: var(--em-colorPrimary, #1677ff);
   border-radius: 50%;
   animation: em-native-img-drop-spin 0.65s linear infinite;
   box-sizing: border-box;
@@ -140,7 +140,7 @@ amp-accordion section > div:empty {
 table:empty:hover,
 table:empty[contenteditable]:hover,
 amp-accordion section > div:empty:hover {
-  outline: 2px dashed var(--borderColorHover) !important;
+  outline: 2px dashed var(--em-borderColorHover) !important;
 }
 
 table:empty::before {
@@ -173,14 +173,14 @@ table:empty::after {
 }
 
 table.em-block-insert-empty:empty {
-  outline: 2px solid var(--colorPrimary) !important;
+  outline: 2px solid var(--em-colorPrimary) !important;
   background-image: linear-gradient(
     -45deg,
-    var(--colorPrimaryBgHover) 25%,
+    var(--em-colorPrimaryBgHover) 25%,
     transparent 25%,
     transparent 50%,
-    var(--colorPrimaryBgHover) 50%,
-    var(--colorPrimaryBgHover) 75%,
+    var(--em-colorPrimaryBgHover) 50%,
+    var(--em-colorPrimaryBgHover) 75%,
     transparent 75%,
     transparent
   ) !important;
@@ -188,7 +188,7 @@ table.em-block-insert-empty:empty {
 }
 
 table.em-block-insert-empty:empty::before {
-  color: var(--colorPrimary);
+  color: var(--em-colorPrimary);
 }
 
 .em-structure,
@@ -231,7 +231,7 @@ td.noresp-em-mob-wrap:nth-child(even) {
 .em-structure td.em-mob-wrap:nth-child(odd):empty[em-edit='active'],
 .em-structure td.noresp-em-mob-wrap:nth-child(odd):empty[em-edit='active'],
 [em='block'] amp-accordion section > div:empty[em-edit='active'] {
-  outline: 2px solid var(--colorPrimaryBorderHover) !important;
+  outline: 2px solid var(--em-colorPrimaryBorderHover) !important;
 }
 
 [em='block'].empty-structure td:not([height], [width]):empty::before,
@@ -260,7 +260,7 @@ td.noresp-em-mob-wrap:nth-child(even) {
 [em='block'] td:not([height]):empty.em-atom-insert-empty,
 [em='block'] td.em-mob-wrap:empty.em-atom-insert-empty,
 [em='block'] amp-accordion section > div:empty.em-atom-insert-empty {
-  outline: 2px solid var(--colorPrimary) !important;
+  outline: 2px solid var(--em-colorPrimary) !important;
 }
 
 [em='block'] td:not([height]):empty.em-atom-insert-empty::after,
@@ -268,11 +268,11 @@ td.noresp-em-mob-wrap:nth-child(even) {
 [em='block'] amp-accordion section > div:empty.em-atom-insert-empty::after {
   background-image: linear-gradient(
     -45deg,
-    var(--colorPrimary) 25%,
+    var(--em-colorPrimary) 25%,
     transparent 25%,
     transparent 50%,
-    var(--colorPrimary) 50%,
-    var(--colorPrimary) 75%,
+    var(--em-colorPrimary) 50%,
+    var(--em-colorPrimary) 75%,
     transparent 75%,
     transparent
   ) !important;
@@ -289,20 +289,20 @@ td.noresp-em-mob-wrap:nth-child(even) {
 [em='block'] td:not([height]).em-atom-insert-empty:empty::before,
 [em='block'] td.em-mob-wrap:empty.em-atom-insert-empty::before,
 [em='block'] amp-accordion section > div:empty.em-atom-insert-empty::before {
-  color: var(--colorPrimary);
+  color: var(--em-colorPrimary);
 }
 
 [em-state='active']:not(.em-element-resize-height, .em-element-resize-img),
 [em-state='active-inside']:not(.em-element-resize-height, .em-element-resize-img),
 .sortable-ghost {
-  outline: 1px solid var(--colorPrimaryBorder);
+  outline: 1px solid var(--em-colorPrimaryBorder);
   position: relative;
   z-index: 4;
 }
 
 /* [em-state=active] *:hover,
 [em-state=active-inside] *:hover {
-	outline: 1px solid var(--colorPrimaryBorder);
+	outline: 1px solid var(--em-colorPrimaryBorder);
 } */
 
 [em-hover='true']:not(
@@ -311,7 +311,7 @@ td.noresp-em-mob-wrap:nth-child(even) {
   .em-element-vindent-value,
   .em-element-vindent-control
 ) {
-  /* outline: 1px solid var(--colorPrimaryBorder); */
+  /* outline: 1px solid var(--em-colorPrimaryBorder); */
   position: relative;
 
   /* z-index: 999; */
@@ -320,14 +320,14 @@ td.noresp-em-mob-wrap:nth-child(even) {
 tinymce[em-hover='true'],
 tinymce *[em-hover='true'] {
   outline: none !important;
-  text-decoration-color: var(--colorPrimaryBorder);
+  text-decoration-color: var(--em-colorPrimaryBorder);
   text-decoration-line: underline;
   text-decoration-thickness: from-font;
   text-decoration-skip-ink: none;
 }
 
 .em-sandbox-discuss_set-target [em-hover='true'] {
-  outline: 1px solid var(--colorInfoBorderHover) !important;
+  outline: 1px solid var(--em-colorInfoBorderHover) !important;
 }
 
 [em-discuss-id] {
@@ -335,26 +335,26 @@ tinymce *[em-hover='true'] {
 }
 
 .em-sandbox-discuss [em-discuss-id] {
-  outline: 3px solid var(--colorInfoBorder) !important;
+  outline: 3px solid var(--em-colorInfoBorder) !important;
   transition: all 0.5s;
 }
 
 .em-sandbox-discuss:not(.em-sandbox-discuss_set-target) [em-discuss-id]:hover {
-  outline: 3px solid var(--colorInfoBorderHover) !important;
+  outline: 3px solid var(--em-colorInfoBorderHover) !important;
   cursor: pointer;
 }
 
 .em-sandbox-discuss_set-target [em-discuss-id]:not(.em-discuss-id-new):hover {
-  outline: 3px solid var(--colorInfoBorder) !important;
+  outline: 3px solid var(--em-colorInfoBorder) !important;
   cursor: not-allowed;
 }
 
 .em-sandbox-discuss [em-discuss-id].em-discuss-target-active {
-  outline: 3px solid var(--colorInfo) !important;
+  outline: 3px solid var(--em-colorInfo) !important;
 }
 
 .em-sandbox-discuss_set-target [em-hover='true'] {
-  outline: 1px solid var(--colorInfoBorderHover) !important;
+  outline: 1px solid var(--em-colorInfoBorderHover) !important;
 }
 
 [em-discuss-id] {
@@ -362,22 +362,22 @@ tinymce *[em-hover='true'] {
 }
 
 .em-sandbox-discuss [em-discuss-id] {
-  outline: 3px solid var(--colorInfoBorder) !important;
+  outline: 3px solid var(--em-colorInfoBorder) !important;
   transition: all 0.5s;
 }
 
 .em-sandbox-discuss:not(.em-sandbox-discuss_set-target) [em-discuss-id]:hover {
-  outline: 3px solid var(--colorInfoBorderHover) !important;
+  outline: 3px solid var(--em-colorInfoBorderHover) !important;
   cursor: pointer;
 }
 
 .em-sandbox-discuss_set-target [em-discuss-id]:not(.em-discuss-id-new):hover {
-  outline: 3px solid var(--colorInfoBorder) !important;
+  outline: 3px solid var(--em-colorInfoBorder) !important;
   cursor: not-allowed;
 }
 
 .em-sandbox-discuss [em-discuss-id].em-discuss-target-active {
-  outline: 3px solid var(--colorInfo) !important;
+  outline: 3px solid var(--em-colorInfo) !important;
 }
 
 [em-edit='active']:not(
@@ -407,7 +407,7 @@ tinymce *[em-hover='true'] {
     a,
     [em-optimise-error]
   ) {
-  outline: 2px solid var(--colorPrimaryBorderHover) !important;
+  outline: 2px solid var(--em-colorPrimaryBorderHover) !important;
   z-index: 3;
 
   [em='block'] & em-replace:not(.em-hide-mergetags-popup, [em-edit='active'])::after {
@@ -449,7 +449,7 @@ tinymce *[em-hover='true'] {
 
 [em-edit='active'][em-optimise][em-optimise-error],
 [em-edit='active'][em-optimise][em-optimise-error] img {
-  outline: 1px solid var(--colorError);
+  outline: 1px solid var(--em-colorError);
 }
 
 [contenteditable]:not([em-state]) {
@@ -476,7 +476,7 @@ tinymce *.em-code {
 }
 
 tinymce *.em-code[em-edit='active'] {
-  outline: 1px solid var(--colorPrimary) !important;
+  outline: 1px solid var(--em-colorPrimary) !important;
 }
 
 .em-sandbox-discuss [em-edit='active'] {
@@ -485,7 +485,7 @@ tinymce *.em-code[em-edit='active'] {
 }
 
 .em-sandbox-discuss [em-discuss-id][em-edit='active'] {
-  outline: 3px solid var(--colorInfo) !important;
+  outline: 3px solid var(--em-colorInfo) !important;
 }
 
 .em-element-editor {
@@ -682,7 +682,7 @@ tinymce *.em-code[em-edit='active'] {
 /* [em="group"]:last-child [em="block"]:last-child .em-element-block-add {
 	bottom: -1px;
 	border-top: none;
-	border-bottom: 1px solid var(--colorPrimaryBorder);
+	border-bottom: 1px solid var(--em-colorPrimaryBorder);
 	border-radius: 6px 6px 0 0;
 } */
 
@@ -796,6 +796,29 @@ tinymce *.em-code[em-edit='active'] {
   content: '\f10b';
 }
 
+/* Страница предпросмотра: служебные иконки мобильной/десктопной видимости не показываем. */
+body.em-sandbox-preview [class*='em-show'][class*='-desktop']::before,
+body.em-sandbox-preview [class*='em-show'][class*='-mobile']::before,
+body.em-sandbox-preview .hide-for-small > tbody > tr > td::before,
+body.em-sandbox-preview .hide-for-desktop > tbody > tr > td::before {
+  display: none;
+}
+
+/* В связке с AMP-маркером убираем только иконку устройства, сам маркер остаётся. */
+body.em-sandbox-preview .em-amp-show-only[class*='em-show']::before {
+  display: flex;
+  width: 26px;
+  padding: 0;
+  content: '⚡';
+}
+
+body.em-sandbox-preview .em-amp-show-disabled[class*='em-show']::before {
+  display: flex;
+  width: 26px;
+  padding: 0 0 0 2px;
+  content: '\f121';
+}
+
 /* Глобальный блок (em-block-id): маркер только в превью, без доп. разметки */
 [em='block'][em-block-id]:not(tr),
 tr[em='block'][em-block-id] > td:first-of-type {
@@ -931,13 +954,13 @@ body:not(.mceNonEditable, .em-sandbox-discuss) td.em-vindent[em-edit='active'] .
   /* background-image: linear-gradient(135deg, #eb2fb555 8.33%, #EB2FB50A 8.33%, #EB2FB50A 50%, #eb2fb555 50%, #eb2fb555 58.33%, #EB2FB50A 58.33%, #EB2FB50A 100%) !important; */
   background-image: linear-gradient(
     135deg,
-    var(--colorPrimary) 8.33%,
-    var(--colorPrimaryBg) 8.33%,
-    var(--colorPrimaryBg) 50%,
-    var(--colorPrimary) 50%,
-    var(--colorPrimary) 58.33%,
-    var(--colorPrimaryBg) 58.33%,
-    var(--colorPrimaryBg) 100%
+    var(--em-colorPrimary) 8.33%,
+    var(--em-colorPrimaryBg) 8.33%,
+    var(--em-colorPrimaryBg) 50%,
+    var(--em-colorPrimary) 50%,
+    var(--em-colorPrimary) 58.33%,
+    var(--em-colorPrimaryBg) 58.33%,
+    var(--em-colorPrimaryBg) 100%
   ) !important;
   background-size: 7px 7px !important;
   opacity: 0.3;
@@ -1111,7 +1134,7 @@ td.em-vindent[em-edit="active"]:before {
     'Segoe UI Symbol',
     'Noto Color Emoji';
   color: #fff;
-  background: var(--colorPrimary);
+  background: var(--em-colorPrimary);
   padding: 3px 6px;
   border-radius: 4px;
   font-weight: 500;
@@ -1145,7 +1168,7 @@ td.em-vindent[em-edit="active"]:before {
     'Segoe UI Symbol',
     'Noto Color Emoji';
   color: #fff;
-  background: var(--colorPrimary);
+  background: var(--em-colorPrimary);
   padding: 3px 6px;
   border-radius: 4px;
   font-weight: 500;
@@ -1212,7 +1235,7 @@ td.em-vindent[em-edit="active"]:before {
 
 .em-vindent_low[em-edit='active'] .em-element-vindent-value,
 .em-vindent_low[em-edit='active'] .em-element-vindent-control {
-  border: 1px solid var(--colorPrimary);
+  border: 1px solid var(--em-colorPrimary);
   border-bottom: none;
 }
 
@@ -1263,7 +1286,7 @@ body:not(.mceNonEditable, .em-sandbox-discuss)
 }
 
 body:not(.mceNonEditable, .em-sandbox-discuss) .em-element-vindent-remove {
-  color: var(--colorPrimary);
+  color: var(--em-colorPrimary);
   position: absolute;
   right: -10px;
   top: -10px;
@@ -1272,7 +1295,7 @@ body:not(.mceNonEditable, .em-sandbox-discuss) .em-element-vindent-remove {
   cursor: pointer;
   width: 20px;
   height: 17px;
-  background-color: var(--colorPrimaryBgHover);
+  background-color: var(--em-colorPrimaryBgHover);
   border-radius: 50%;
   text-align: center;
   padding-top: 3px;
@@ -1281,7 +1304,7 @@ body:not(.mceNonEditable, .em-sandbox-discuss) .em-element-vindent-remove {
 }
 
 body:not(.mceNonEditable, .em-sandbox-discuss) .em-element-vindent-remove:hover {
-  background-color: var(--colorPrimaryBorder);
+  background-color: var(--em-colorPrimaryBorder);
 }
 
 body:not(.mceNonEditable, .em-sandbox-discuss) .em-vindent:hover .em-element-vindent-remove {
@@ -1296,7 +1319,7 @@ body:not(.mceNonEditable, .em-sandbox-discuss)
   position: absolute;
   width: 12px;
   height: 2px;
-  background: var(--colorPrimaryBgHover);
+  background: var(--em-colorPrimaryBgHover);
   border: 1px solid #fff;
   left: 50%;
   top: 50%;
@@ -1319,7 +1342,7 @@ body:not(.mceNonEditable, .em-sandbox-discuss)
   z-index: 1000;
   width: 9px;
   height: 9px;
-  border: 1px solid var(--colorPrimary);
+  border: 1px solid var(--em-colorPrimary);
   box-shadow: 1px 1px 1px #fff;
   border-left: none;
   border-top: none;
@@ -1402,7 +1425,7 @@ body:not(.mceNonEditable, .em-sandbox-discuss)
 .em-blockatom-insert {
   position: relative;
 
-  /* box-shadow: #1890FF 0px 5px, var(--colorPrimaryBorder) 0px 10px, var(--colorPrimaryBorder) 0px 15px, var(--colorPrimaryBgHover) 0px 20px, #1890FF20 0px 25px; */
+  /* box-shadow: #1890FF 0px 5px, var(--em-colorPrimaryBorder) 0px 10px, var(--em-colorPrimaryBorder) 0px 15px, var(--em-colorPrimaryBgHover) 0px 20px, #1890FF20 0px 25px; */
 }
 
 [em='atom'],
@@ -1416,7 +1439,7 @@ body:not(.mceNonEditable, .em-sandbox-discuss)
 .em-block-insert-body [em='block']::after,
 .em-atom-insert-body [em='block']::after {
   content: '';
-  border-bottom: 2px solid var(--colorPrimary);
+  border-bottom: 2px solid var(--em-colorPrimary);
   position: absolute;
   bottom: 0;
   left: 0;
@@ -1436,7 +1459,7 @@ body:not(.mceNonEditable, .em-sandbox-discuss)
   left: 50%;
   margin-left: -2px;
   border: 5px solid transparent;
-  border-top: 5px solid var(--colorPrimary);
+  border-top: 5px solid var(--em-colorPrimary);
   width: 0;
   height: 0;
   z-index: 1;
@@ -1453,7 +1476,7 @@ body:not(.mceNonEditable, .em-sandbox-discuss) .em-block-insert::after,
 body:not(.mceNonEditable, .em-sandbox-discuss) .em-atom-insert::after,
 body:not(.mceNonEditable, .em-sandbox-discuss) .em-blockatom-insert::after {
   position: absolute;
-  border: 2px solid var(--colorPrimary);
+  border: 2px solid var(--em-colorPrimary);
   left: 0;
   font:
     14px/20px -apple-system,
@@ -1471,7 +1494,7 @@ body:not(.mceNonEditable, .em-sandbox-discuss) .em-blockatom-insert::after {
   font-weight: 500;
   width: 100%;
   box-sizing: border-box;
-  color: var(--colorPrimary);
+  color: var(--em-colorPrimary);
   z-index: 3;
   text-align: center;
   opacity: 1 !important;
@@ -1484,11 +1507,11 @@ body:not(.mceNonEditable, .em-sandbox-discuss) .em-blockatom-insert::before {
   position: absolute;
   background-image: linear-gradient(
     -45deg,
-    var(--colorPrimary) 25%,
+    var(--em-colorPrimary) 25%,
     transparent 25%,
     transparent 50%,
-    var(--colorPrimary) 50%,
-    var(--colorPrimary) 75%,
+    var(--em-colorPrimary) 50%,
+    var(--em-colorPrimary) 75%,
     transparent 75%,
     transparent
   ) !important;
@@ -1831,7 +1854,7 @@ img[src*='<!--']::after {
   height: 3px;
   margin-right: 5px;
   border-radius: 50%;
-  border: 1px solid var(--colorPrimary);
+  border: 1px solid var(--em-colorPrimary);
   vertical-align: top;
   position: relative;
   top: 7px;
@@ -1844,7 +1867,7 @@ img[src*='<!--']::after {
   height: 3px;
   margin-right: 5px;
   border-radius: 50%;
-  border: 1px solid var(--colorInfo);
+  border: 1px solid var(--em-colorInfo);
   vertical-align: top;
   position: relative;
   top: 7px;
@@ -1853,8 +1876,8 @@ img[src*='<!--']::after {
 .em-element-path-item-style.em-element-path-item-mob::before {
   width: 3px;
   height: 3px;
-  border: 1px solid var(--colorInfo);
-  background-color: var(--colorPrimary);
+  border: 1px solid var(--em-colorInfo);
+  background-color: var(--em-colorPrimary);
 }
 
 .em-element-path-overflow-left::before {
@@ -1868,36 +1891,36 @@ img[src*='<!--']::after {
 
 @media only screen and (device-width <= 480px), only screen and (width <= 480px) {
   table.em-block-insert-empty:empty {
-    border-color: var(--colorInfo);
+    border-color: var(--em-colorInfo);
     background-image: linear-gradient(
       -45deg,
-      var(--colorInfoBorder) 25%,
+      var(--em-colorInfoBorder) 25%,
       transparent 25%,
       transparent 50%,
-      var(--colorInfoBorder) 50%,
-      var(--colorInfoBorder) 75%,
+      var(--em-colorInfoBorder) 50%,
+      var(--em-colorInfoBorder) 75%,
       transparent 75%,
       transparent
     ) !important;
   }
 
   table.em-block-insert-empty:empty::before {
-    color: var(--colorInfo);
+    color: var(--em-colorInfo);
   }
 
   /* [em="block"] td:not([height]):empty.em-atom-insert-empty {
-		border-color: var(--colorInfo);
-		background-image: linear-gradient(-45deg, var(--colorInfoBorder) 25%, transparent 25%, transparent 50%, var(--colorInfoBorder) 50%, var(--colorInfoBorder) 75%, transparent 75%, transparent) !important;
+		border-color: var(--em-colorInfo);
+		background-image: linear-gradient(-45deg, var(--em-colorInfoBorder) 25%, transparent 25%, transparent 50%, var(--em-colorInfoBorder) 50%, var(--em-colorInfoBorder) 75%, transparent 75%, transparent) !important;
 	} */
 
   /* [em="block"] td:not([height]).em-atom-insert-empty:empty::before {
-		color: var(--colorInfo);
+		color: var(--em-colorInfo);
 	} */
 
   [em-state='active'],
   [em-state='active-inside'],
   .sortable-ghost {
-    outline: 1px solid var(--colorInfoBorderHover) !important;
+    outline: 1px solid var(--em-colorInfoBorderHover) !important;
   }
 
   [em-hover='true']:not(
@@ -1906,12 +1929,12 @@ img[src*='<!--']::after {
     .em-element-vindent-value,
     .em-element-vindent-control
   ) {
-    /* outline: 1px solid var(--colorInfoBorderHover); */
+    /* outline: 1px solid var(--em-colorInfoBorderHover); */
   }
 
   tinymce[em-hover='true'],
   tinymce *[em-hover='true'] {
-    text-decoration-color: var(--colorInfoBorderHover);
+    text-decoration-color: var(--em-colorInfoBorderHover);
   }
 
   [em-edit='active'] {
@@ -1922,11 +1945,11 @@ img[src*='<!--']::after {
 
   tinymce[em-edit='active'],
   tinymce *[em-edit='active'] {
-    text-decoration-color: var(--colorInfo);
+    text-decoration-color: var(--em-colorInfo);
   }
 
   tinymce *.em-code[em-edit='active'] {
-    outline: 1px solid var(--colorInfo) !important;
+    outline: 1px solid var(--em-colorInfo) !important;
   }
 
   body:not(.mceNonEditable, .em-sandbox-discuss)
@@ -1943,18 +1966,18 @@ img[src*='<!--']::after {
   body:not(.mceNonEditable, .em-sandbox-discuss) td.em-vindent:hover .em-element-vindent-bg {
     background-image: linear-gradient(
       135deg,
-      var(--colorInfo) 8.33%,
-      var(--colorInfoBg) 8.33%,
-      var(--colorInfoBg) 50%,
-      var(--colorInfo) 50%,
-      var(--colorInfo) 58.33%,
-      var(--colorInfoBg) 58.33%,
-      var(--colorInfoBg) 100%
+      var(--em-colorInfo) 8.33%,
+      var(--em-colorInfoBg) 8.33%,
+      var(--em-colorInfoBg) 50%,
+      var(--em-colorInfo) 50%,
+      var(--em-colorInfo) 58.33%,
+      var(--em-colorInfoBg) 58.33%,
+      var(--em-colorInfoBg) 100%
     ) !important;
   }
 
   .em-element-vindent-value {
-    background: var(--colorInfo);
+    background: var(--em-colorInfo);
   }
 
   body:not(.mceNonEditable, .em-sandbox-discuss)
@@ -1962,7 +1985,7 @@ img[src*='<!--']::after {
     [em-edit='active']:hover
     .em-vindent:not(:hover)
     .em-element-vindent-marker {
-    background: var(--colorInfoBgHover);
+    background: var(--em-colorInfoBgHover);
     border: 1px solid #fff;
   }
 
@@ -1976,7 +1999,7 @@ img[src*='<!--']::after {
 
   td:empty[height]:hover::before,
   td[height][em-edit='active']:empty::before {
-    color: var(--colorInfo);
+    color: var(--em-colorInfo);
   }
 
   .em-structure table.em-mob-width-100perc td:nth-child(even):not([class*='em-mob-height-']) {
@@ -2053,7 +2076,7 @@ img[src*='<!--']::after {
   [em-edit='active']:not([style*='font-family'][style*='font-size'], strong, b, em, i, s, strike, u, span, a),
   .em-structure
     [em-edit='active']:not([style*='font-family'][style*='font-size'], strong, b, em, i, s, strike, u, span, a) {
-    outline: 2px solid var(--colorInfo) !important;
+    outline: 2px solid var(--em-colorInfo) !important;
   }
 
   td.em-mob-wrap:not(.em-mob-wrap-cancel, .em-mob-display-inline-block):nth-child(even)
@@ -2130,7 +2153,7 @@ em-replace::after {
 
 [em='block'] em-replace:not(.em-hide-mergetags-popup):active,
 [em='block'] em-replace:not(.em-hide-mergetags-popup):hover {
-  outline: 2px solid var(--colorPrimaryBorderHover) !important;
+  outline: 2px solid var(--em-colorPrimaryBorderHover) !important;
   position: relative;
   z-index: 3;
 }