@emailmaker/emailmaker 1.0.1

package/iframe/css/sandbox-dark.css

@@ -0,0 +1,301 @@
+.em-element-editor-widget {
+	background: #1D1D1D;
+	box-shadow: 0px 3px 10px rgba(61, 70, 77, 0.15);
+}
+
+.of-group .em-element-editor-widget {
+	background: #777777;
+}
+
+.of-group .em-element-editor-group:hover {
+	background: #777777;
+}
+
+.of-atom .em-element-editor-widget {
+	background: #d0ebff;
+}
+
+[class^=em-element-editor-widget-] {
+	width: 24px;
+	height: 24px;
+	display: block;
+	box-sizing: border-box;
+	font-size: 20px;
+	text-align: center;
+	cursor: pointer;
+	color: hsla(0, 0%, 100%, .85);
+}
+
+[class^=em-element-editor-widget-]:hover {
+	color: #fff;
+	background: rgba(255, 255, 255, 0.2);
+	border-radius: 3px;
+}
+
+.em-element-editor-group:hover {
+	background: #1D1D1D;
+	box-shadow: 0px 3px 10px rgb(61 70 77 / 15%);
+}
+
+[class*="em-show"]::before {
+	color: hsla(0, 0%, 100%, .85);
+	;
+	background-color: #1D1D1D;
+}
+
+td:empty[height] {
+	background: rgba(0, 0, 0, 0.001);
+}
+
+/* Tiny CSS */
+body .tox.tox-tinymce--toolbar-bottom .tox-editor-header,
+body .tox.tox-tinymce-inline .tox-editor-header,
+body .tox.tox-tinymce--toolbar-sticky-on .tox-editor-header {
+	padding: 4px 0px;
+	background: #1D1D1D;
+	border: none;
+}
+
+body .tox .tox-toolbar-overlord {
+	background: none;
+}
+
+body .tox-tinymce-inline {
+	border-radius: 6px;
+	box-shadow: 0px 3px 10px rgba(61, 70, 77, 0.15);
+	/* margin-top: -7px; */
+}
+
+body .tox.tox-tinymce--toolbar-sticky-on .tox-editor-header {
+	box-shadow: 0px 3px 10px rgba(61, 70, 77, 0.15);
+	border-radius: 6px;
+	margin-top: 7px;
+}
+
+body .tox .tox-toolbar,
+.tox .tox-toolbar__overflow,
+body .tox .tox-toolbar__primary {
+	background: none;
+}
+
+body .tox .tox-tbtn:active {
+	color: #fff;
+	background: rgba(255, 255, 255, 0.2);
+}
+
+body .tox .tox-tbtn svg {
+	fill: hsla(0, 0%, 100%, .85);
+}
+
+body .tox .tox-tbtn:hover svg,
+body .tox .tox-tbtn:active svg,
+body .tox .tox-tbtn:focus:not(.tox-tbtn--disabled) svg,
+body .tox .tox-tbtn--enabled svg,
+body .tox .tox-tbtn--enabled:hover svg,
+body .tox .tox-swatches__picker-btn svg {
+	fill: #fff;
+}
+
+body .tox .tox-tbtn--enabled,
+body .tox .tox-tbtn--enabled:hover,
+body .tox .tox-split-button:focus {
+	background: rgba(255, 255, 255, 0.2);
+}
+
+body .tox .tox-tbtn {
+	margin: 2px 2px 3px;
+	color: hsla(0, 0%, 100%, .85);
+}
+
+body .tox .tox-tbtn:hover,
+body .tox .tox-tbtn:focus:not(.tox-tbtn--disabled),
+body .tox .tox-collection--list .tox-collection__item--active,
+body .tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled),
+body .tox .tox-swatches__picker-btn:hover {
+	background: rgba(255, 255, 255, 0.2);
+	color: #fff;
+}
+
+body .tox .tox-split-button:hover {
+	box-shadow: 0 0 0 1px rgba(255, 255, 225, 0.2) inset;
+}
+
+body .tox .tox-menu,
+body .tox.tox-tinymce-aux .tox-toolbar__overflow {
+	background: none;
+	background-color: #1D1D1D;
+	border: 1px solid #1D1D1D;
+}
+
+body .tox .tox-collection__item-accessory {
+	color: rgba(255, 255, 255, 0.5);
+}
+
+body .tox .tox-collection__item {
+	color: hsla(0, 0%, 100%, .85);
+}
+
+body .tox .tox-collection--list .tox-collection__item--enabled {
+	background-color: rgba(255, 255, 255, 0.5);
+	color: #fff;
+}
+
+body .tox .tox-dialog {
+	background: #141414;
+	border-color: #141414;
+}
+
+body .tox .tox-dialog__header,
+body .tox .tox-dialog__footer {
+	background: none;
+	border: none;
+}
+
+body .tox .tox-dialog__header,
+body .tox .tox-label,
+body .tox .tox-toolbar-label,
+body .tox .tox-rgb-form label,
+body .tox .tox-dialog__body-nav-item {
+	color: hsla(0, 0%, 100%, .85);
+}
+
+body .tox .tox-label,
+body .tox .tox-toolbar-label {
+	padding-bottom: 8px;
+}
+
+body .tox .tox-listboxfield .tox-listbox--select,
+body .tox .tox-textarea,
+body .tox .tox-textfield,
+body .tox .tox-toolbar-textfield {
+	color: rgba(255, 255, 255, 0.85);
+	background-color: transparent;
+	border: 1px solid #434343;
+	border-radius: 2px;
+	transition: all 0.3s;
+}
+
+body .tox .tox-listboxfield .tox-listbox--select:focus,
+body .tox .tox-textarea:focus,
+body .tox .tox-textfield:focus {
+	border-color: #177ddc;
+	box-shadow: 0 0 0 2px rgb(23 125 220 / 20%);
+	background-color: transparent;
+}
+
+/* Ломает логигу работы поп-апов Tiny */
+/* body .tox .tox-dialog-wrap {
+	position: static;
+} */
+
+body .tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type) {
+	border-right-color: rgba(255, 255, 255, 0.2);
+}
+
+body .tox .tox-button--secondary {
+	color: rgba(255, 255, 255, 0.85);
+	border-color: #434343;
+	background: transparent;
+}
+
+body .tox .tox-button--secondary:hover:not(:disabled),
+body .tox .tox-button--secondary:focus:not(:disabled) {
+	color: #165996;
+	border-color: #165996;
+	background: transparent;
+}
+
+body .tox .tox-button--naked {
+	background-color: transparent;
+	border-color: transparent;
+	color: hsla(0, 0%, 100%, .85);
+}
+
+body .tox .tox-button--naked.tox-button--icon:hover:not(:disabled) {
+	color: #fff;
+	border-color: #434343;
+	background: transparent;
+}
+
+body .tox .tox-dialog-wrap__backdrop {
+	background-color: rgba(0, 0, 0, .75);
+}
+
+body .ant-tabs-card>.ant-tabs-nav .ant-tabs-tab-active {
+	background: #1F1F1F;
+	border-bottom-color: #1F1F1F;
+}
+
+.em-code,
+img[src*="<!--"]:after {
+	background-color: #1D1D1D;
+	box-shadow: 0px 3px 10px rgb(61 70 77 / 15%);
+}
+
+.em-element-path-panel {
+	background-color: #1D1D1D;
+	box-shadow: 0px 3px 10px rgba(61, 70, 77, 0.15);
+	color: hsla(0, 0%, 100%, .85);
+}
+
+.em-element-path-content>div:hover {
+	color: hsla(0, 0%, 100%, 1);
+}
+
+.em-element-path-item-block {
+	color: #fff;
+}
+
+.em-element-path-content>div.em-element-path-item-block:hover {
+	color: rgba(255, 255, 255, 0.85);
+}
+
+.em-element-path-item-atom {
+	color: #85a5ff;
+}
+
+.em-element-path-content>div.em-element-path-item-atom:hover {
+	color: #597ef7;
+}
+
+.em-element-path-item-group {
+	color: #1890ff;
+}
+
+.em-element-path-content>div.em-element-path-item-group:hover {
+	color: #40a9ff;
+}
+
+.em-element-path-item-email {
+	color: #722ed1
+}
+
+.em-element-path-content>div.em-element-path-item-email:hover {
+	color: #9254de;
+}
+
+.em-element-path-overflow-left::before {
+	background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
+}
+
+.em-element-img-change-group {
+	color: hsla(0, 0%, 100%, .85);
+	background: #1D1D1D;
+}
+
+.em-element-img-change-group>i:hover {
+	color: #000;
+	background: #dee0e2;
+	border-radius: 3px;
+}
+
+.em-element-block-add {
+	color: hsla(0, 0%, 100%, .85);
+	background: #1D1D1D;
+	box-shadow: 0px 3px 10px rgba(61, 70, 77, 0.15);
+}
+
+.em-element-block-add>i:hover {
+	color: #000;
+	background: #dee0e2;
+}

package/iframe/css/sandbox-darktheme.css

@@ -0,0 +1,234 @@
+[em-state=active],
+[em-state=active-inside],
+.sortable-ghost {
+	outline: 2px solid #1890FF90;
+	/* outline: 1px solid rgba(61, 70, 77, 0.05); */
+	box-sizing: border-box;
+	/* box-shadow: 0px 0px 20px rgba(92, 169, 241, 0.25); */
+	/* box-shadow: 0px 0px 20px rgba(144, 151, 156, 0.2); */
+	/* box-shadow: 0px 0px 20px rgba(144, 151, 156, 0.3); */
+	position: relative;
+}
+.em-element-editor {
+	width: 60px;
+	left: -61px;
+	top: 0;
+	display: block;
+	position: absolute;
+}
+.em-element-editor.of-atom {
+	width: 26px;
+	left: -26px;
+}
+.em-element-editor-widget {
+	width: 24px;
+	padding: 3px;
+	background: #1D1D1D;
+	border-radius: 6px;
+	box-shadow: 0px 3px 10px rgba(61, 70, 77, 0.15);
+	position: absolute;
+	display: block;
+	left: 20px;
+	top:8px;
+	z-index: 9999999;
+}
+.of-atom .em-element-editor-widget {
+	width: 82px;
+	background: #d0ebff;
+	top: -1px;
+	left: 0;
+	border-radius: 6px 6px 0 0;
+	display: flex;
+}
+[em-state=active-inside] .em-element-editor-widget {
+	left: 70px;
+}
+[class^=em-element-editor-widget-] {
+	width: 24px;
+	height: 24px;
+	display: inline-block;
+	box-sizing: border-box;
+	font-size: 20px;
+	text-align: center;
+	padding-top:2px;
+	cursor: pointer;
+	color: hsla(0,0%,100%,.85);
+}
+.of-atom [class^=em-element-editor-widget-] {
+	width: 20px;
+	height: 20px;
+	font-size: 16px;
+	color: #344966;
+}
+[class^=em-element-editor-widget-]:hover {
+	color: #fff;
+	background: rgba(255,255,255,0.2);
+	border-radius: 3px;
+}
+.of-atom [class^=em-element-editor-widget-]:hover {
+	background: #b8d4e9;
+}
+.em-element-editor-widget.sticky {
+	position: fixed;
+	top: 10px;
+	left: auto;
+	margin-left: 20px;
+}
+[em-state=active-inside] .em-element-editor-widget.sticky {
+	margin-left: 70px;
+}
+.em-element-editor-widget-drug .la-braille {
+	cursor: move;
+	cursor: -webkit-grabbing;
+	-webkit-transform: rotate(90deg);
+	-moz-transform: rotate(90deg);
+	-ms-transform: rotate(90deg);
+	-o-transform: rotate(90deg);
+	transform: rotate(90deg);
+}
+
+[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);
+}
+
+/* Tiny CSS */
+tinymce:focus,
+[em-edit="active"] {
+	border-radius: 2px;
+	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0), 0 0 0 1px #1890FF;
+	outline: none;
+	display: inline-block;
+	text-align: inherit;
+}
+body .tox.tox-tinymce--toolbar-bottom .tox-editor-header,
+body .tox.tox-tinymce-inline .tox-editor-header,
+body .tox.tox-tinymce--toolbar-sticky-on .tox-editor-header {
+	padding: 4px 0px;
+    background: #1D1D1D;;
+	border: none;
+}
+
+body .tox .tox-toolbar-overlord {
+	background: none;
+}
+
+body .tox-tinymce-inline {
+	border-radius: 6px;
+	box-shadow: 0px 3px 10px rgba(61, 70, 77, 0.15);
+	/* margin-top: -7px; */
+}
+body .tox.tox-tinymce--toolbar-sticky-on .tox-editor-header {
+	box-shadow: 0px 3px 10px rgba(61, 70, 77, 0.15);
+	border-radius: 6px;
+	margin-top: 7px;
+}
+body .tox .tox-toolbar, .tox .tox-toolbar__overflow,
+body .tox .tox-toolbar__primary {
+	background: none;
+}
+
+body .tox .tox-tbtn:active {
+	color: #fff;
+	background: rgba(255,255,255,0.2);
+}
+
+body .tox .tox-tbtn svg {
+	fill: hsla(0,0%,100%,.85);
+}
+body .tox .tox-tbtn:hover svg,
+body .tox .tox-tbtn:active svg,
+body .tox .tox-tbtn:focus:not(.tox-tbtn--disabled) svg,
+body .tox .tox-tbtn--enabled svg,
+body .tox .tox-tbtn--enabled:hover svg,
+body .tox .tox-swatches__picker-btn svg {
+	fill: #fff;
+}
+body .tox .tox-tbtn--enabled,
+body .tox .tox-tbtn--enabled:hover,
+body .tox .tox-split-button:focus {
+    background: rgba(255,255,255,0.2);
+}
+body .tox .tox-tbtn {
+	margin: 2px 2px 3px;
+	color: hsla(0,0%,100%,.85);
+}
+body .tox .tox-tbtn:hover,
+body .tox .tox-tbtn:focus:not(.tox-tbtn--disabled),
+body .tox .tox-collection--list .tox-collection__item--active,
+body .tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled),
+body .tox .tox-swatches__picker-btn:hover {
+	background: rgba(255,255,255,0.2);
+	color: #fff;
+}
+
+body .tox .tox-split-button:hover {
+	box-shadow: 0 0 0 1px rgba(255,255,225,0.2) inset;
+}
+
+body .tox .tox-menu,
+body .tox.tox-tinymce-aux .tox-toolbar__overflow {
+	background: none;
+	background-color: #1D1D1D;
+    border: 1px solid #1D1D1D;
+}
+
+body .tox .tox-collection__item-accessory {
+	color: rgba(255,255,255,0.5);
+}
+
+body .tox .tox-collection__item {
+	color: hsla(0,0%,100%,.85);
+}
+
+body .tox .tox-collection--list .tox-collection__item--enabled {
+	background-color: rgba(255,255,255,0.5);
+    color: #fff;
+}
+
+body .tox .tox-dialog-wrap {
+	position: static;
+}
+
+br[data-mce-bogus="1"] {
+	display:none;
+}
+[title="Font sizes"] .tox-tbtn__select-label {
+    width: 2.5em !important;
+}
+[title="Fonts"] .tox-tbtn__select-label {
+    width: 5em !important;
+}
+/* .tox:not([dir=rtl]) {
+	left:10px !important;
+	top: 16px !important;
+	min-width: 300px;
+}
+body .tox.tox-tinymce-inline .tox-editor-heade,
+body .tox.tox-tinymce--toolbar-sticky-on .tox-editor-header {
+	max-width: unset !important;
+}
+.tox .tox-editor-container {
+	max-width: unset !important;
+} */
+.em-tiny-wrapper {
+	position: fixed;
+	top: 0;
+	left: 0;
+	padding: 10px 5px 0px;
+	box-sizing: border-box;
+	width: 100%;
+	display: flex;
+	z-index: 9999999999;
+	transition: top 0.5s;
+}
+.em-tiny-editor {
+	margin: 0 auto;
+}
+
+body .tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type) {
+	border-right-color: rgba(255,255,255,0.2);
+}
+
+

package/iframe/css/sandbox-light.css

@@ -0,0 +1,197 @@
+.em-element-editor-widget {
+	background: #FFF;
+	box-shadow: 0px 3px 10px rgba(61, 70, 77, 0.15);
+}
+
+.of-group .em-element-editor-widget {
+	background: #edeff6;
+}
+
+.of-group [class^=em-element-editor-widget-]:hover {
+	background: #dcdee7;
+}
+
+.of-group .em-element-editor-group:hover {
+	background: #edeff6;
+}
+
+.of-atom .em-element-editor-widget {
+	background: #d0ebff;
+}
+
+[class^=em-element-editor-widget-] {
+	width: 24px;
+	height: 24px;
+	display: block;
+	box-sizing: border-box;
+	font-size: 20px;
+	text-align: center;
+	cursor: pointer;
+	color: #758192;
+}
+
+[class^=em-element-editor-widget-]:hover {
+	color: #000;
+	background: #dee0e2;
+	border-radius: 3px;
+}
+
+.em-element-editor-group:hover {
+	background: #FFF;
+	box-shadow: 0px 3px 10px rgb(61 70 77 / 15%);
+}
+
+[class*="em-show"]::before {
+	color: #758192;
+	background-color: #fff;
+}
+
+td:empty[height] {
+	background: rgba(255, 255, 255, 0.001);
+}
+
+/* Tiny CSS */
+body .tox.tox-tinymce--toolbar-bottom .tox-editor-header,
+body .tox.tox-tinymce-inline .tox-editor-header,
+body .tox.tox-tinymce--toolbar-sticky-on .tox-editor-header {
+	padding: 4px 0px;
+	background: #fff;
+	border: none;
+}
+
+body .tox-tinymce-inline {
+	border-radius: 6px;
+	box-shadow: 0px 3px 10px rgba(61, 70, 77, 0.15);
+	/* margin-top: -7px; */
+}
+
+body .tox.tox-tinymce--toolbar-sticky-on .tox-editor-header {
+	box-shadow: 0px 3px 10px rgba(61, 70, 77, 0.15);
+	border-radius: 6px;
+	margin-top: 7px;
+}
+
+body .tox .tox-toolbar,
+.tox .tox-toolbar__overflow,
+body .tox .tox-toolbar__primary {
+	background: none;
+}
+
+body .tox .tox-tbtn svg {
+	fill: #545960;
+}
+
+body .tox .tox-tbtn--enabled svg,
+body .tox .tox-tbtn--enabled:hover svg {
+	fill: #4285F4;
+}
+
+body .tox .tox-tbtn--enabled,
+body .tox .tox-tbtn--enabled:hover {
+	background: #D9E7FD;
+}
+
+body .tox .tox-tbtn {
+	margin: 2px 2px 3px;
+}
+
+body .tox .tox-button--secondary {
+	color: rgba(0, 0, 0, 0.85);
+	border-color: #d9d9d9;
+	background: #fff;
+	box-shadow: 0 2px 0 rgb(0 0 0 / 2%);
+}
+
+body .tox .tox-button--secondary:hover:not(:disabled),
+body .tox .tox-button--secondary:focus:not(:disabled) {
+	color: #40a9ff;
+	border-color: #40a9ff;
+	background: #fff;
+}
+
+body .tox .tox-button--naked {
+	border-color: #d9d9d9;
+	background: #fff;
+	color: rgba(0, 0, 0, 0.85);
+	box-shadow: 0 2px 0 rgb(0 0 0 / 2%);
+}
+
+body .tox .tox-button--naked.tox-button--icon:hover:not(:disabled) {
+	color: #40a9ff;
+	border-color: #40a9ff;
+	background: #fff;
+}
+
+.em-code,
+img[src*="<!--"]:after {
+	background-color: #fff;
+	box-shadow: 0px 3px 10px rgba(61, 70, 77, 0.15);
+}
+
+.em-element-path-panel {
+	background-color: #fff;
+	box-shadow: 0px 3px 10px rgba(61, 70, 77, 0.15);
+	color: #8c8c8c;
+}
+
+.em-element-path-content>div:hover {
+	color: #595959;
+}
+
+.em-element-path-item-block {
+	color: #000;
+}
+
+.em-element-path-content>div.em-element-path-item-block:hover {
+	color: #777;
+}
+
+.em-element-path-item-atom {
+	color: #85a5ff;
+}
+
+.em-element-path-content>div.em-element-path-item-atom:hover {
+	color: #597ef7;
+}
+
+.em-element-path-item-group {
+	color: #1890ff;
+}
+
+.em-element-path-content>div.em-element-path-item-group:hover {
+	color: #096dd9;
+}
+
+.em-element-path-item-email {
+	color: #722ed1
+}
+
+.em-element-path-content>div.em-element-path-item-email:hover {
+	color: #531dab;
+}
+
+.em-element-path-overflow-left::before {
+	background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+}
+
+.em-element-img-change-group {
+	color: #758192;
+	background-color: #fff;
+}
+
+.em-element-img-change-group>i:hover {
+	color: #000;
+	background: #dee0e2;
+	border-radius: 3px;
+}
+
+.em-element-block-add {
+	color: #758192;
+	background: #FFF;
+	box-shadow: 0px 3px 10px rgba(61, 70, 77, 0.15);
+}
+
+.em-element-block-add>i:hover {
+	color: #000;
+	background: #dee0e2;
+}