@syncfusion/ej2-image-editor 23.2.7 → 24.1.43

package/styles/image-editor/material3-dark.css

@@ -150,6 +150,21 @@
 .e-image-editor .e-custom-e::before {
   content: "\e8af";
 }
+.e-image-editor .e-custom-f::before {
+  content: "\e8dd";
+}
+.e-image-editor .e-custom-g::before {
+  content: "\e8de";
+}
+.e-image-editor .e-custom-h::before {
+  content: "\e8df";
+}
+.e-image-editor .e-custom-i::before {
+  content: "\e8e0";
+}
+.e-image-editor .e-custom-j::before {
+  content: "\e8e1";
+}
 .e-image-editor .e-horizontal-flip::before {
   content: "\e8a3";
 }
@@ -211,6 +226,21 @@
 .e-dropdown-popup.e-image-popup .e-custom-e::before {
   content: "\e8af";
 }
+.e-dropdown-popup.e-image-popup .e-custom-f::before {
+  content: "\e8dd";
+}
+.e-dropdown-popup.e-image-popup .e-custom-g::before {
+  content: "\e8de";
+}
+.e-dropdown-popup.e-image-popup .e-custom-h::before {
+  content: "\e8df";
+}
+.e-dropdown-popup.e-image-popup .e-custom-i::before {
+  content: "\e8e0";
+}
+.e-dropdown-popup.e-image-popup .e-custom-j::before {
+  content: "\e8e1";
+}
 .e-dropdown-popup.e-image-popup .e-rectangle::before {
   content: "\e723";
 }
@@ -260,10 +290,42 @@
   margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-device.e-image-editor .e-slider-container {
-  margin-left: calc(50% - 50px) !important; /* stylelint-disable-line declaration-no-important */
+  margin-left: calc(50% - 70px) !important; /* stylelint-disable-line declaration-no-important */
   height: 54px !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-device.e-image-editor .e-straighten-slider {
+  margin-left: calc(50% - 70px) !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-ie-straighten-value-span {
+  margin-left: 15px !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-hscroll .e-scroll-nav.e-scroll-right-nav {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-hscroll.e-scroll-device {
+  padding-right: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-scroll-right-overlay {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-contextual-toolbar-wrapper {
+  border-top: 1px solid rgba(var(--color-sf-outline-variant));
+  border-bottom: none !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-toolbar {
+  border-bottom: 1px solid rgba(var(--color-sf-outline-variant));
+}
+.e-device.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
+  border-bottom: none !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-bottom-toolbar .e-toolbar, .e-device.e-image-editor .e-bottom-toolbar-area .e-toolbar {
+  border-bottom: none;
+}
 
+.e-bigger .e-image-editor .e-contextual-toolbar-wrapper .e-slider-container .e-slider .e-handle,
+.e-image-editor.e-bigger .e-contextual-toolbar-wrapper .e-slider-container .e-slider .e-handle {
+  top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-bigger .e-image-editor .e-toolbar,
 .e-image-editor.e-bigger .e-toolbar {
   height: 56px !important; /* stylelint-disable-line declaration-no-important */
@@ -336,6 +398,11 @@
   border: 1px solid rgba(var(--color-sf-outline-variant));
   position: relative;
   display: block;
+  /* stylelint-disable property-no-vendor-prefix */
+}
+.e-image-editor .no-spin ::-webkit-inner-spin-button, .e-image-editor .no-spin ::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
 }
 .e-image-editor .e-quick-access-toolbar-area .e-toolbar {
   border-radius: 4px;
@@ -375,6 +442,7 @@
 }
 .e-image-editor .e-toolbar {
   border: none;
+  border-bottom: 1px solid rgba(var(--color-sf-outline-variant));
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height {
   margin-left: 20px;
@@ -428,20 +496,19 @@
 .e-image-editor .e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-left {
   line-height: 1;
 }
-.e-image-editor .e-toolbar-area + .e-canvas-wrapper {
-  border-top: 1px solid rgba(var(--color-sf-outline-variant));
-}
 .e-image-editor .e-toolbar-area + .e-canvas-wrapper .e-textarea {
   line-height: initial !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-image-editor .e-bottom-toolbar {
+.e-image-editor .e-bottom-toolbar, .e-image-editor .e-bottom-toolbar-area {
   border-top: 1px solid rgba(var(--color-sf-outline-variant));
 }
 .e-image-editor .e-contextual-toolbar-wrapper {
+  border-bottom: 1px solid rgba(var(--color-sf-outline-variant));
   width: 100%;
   z-index: 1;
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
+  border-bottom: none !important; /* stylelint-disable-line declaration-no-important */
   height: 140px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar {
@@ -472,6 +539,10 @@
   margin: 4px;
   text-align: center;
 }
+.e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-dropdown-btn {
+  margin: 0 auto;
+  width: max-content;
+}
 .e-image-editor .e-contextual-toolbar-wrapper.e-hide {
   display: none;
 }
@@ -489,14 +560,60 @@
   margin-left: calc(50% - 137px);
   height: 54px !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-slider-container .e-slider .e-handle {
+  height: 16px !important; /* stylelint-disable-line declaration-no-important */
+  top: calc(50% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+  width: 16px !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-straighten-value-span,
+.e-ie-straighten-span {
+  font-size: 14px;
+  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
+  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
+  height: auto;
+  margin-left: 8px;
+  padding-right: 2px;
+}
+
+.e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
+  top: calc(50% - 20px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider-track,
+.e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-range {
+  top: calc(50% - 2px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
+  top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
+  height: 16px !important; /* stylelint-disable-line declaration-no-important */
+  width: 16px !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
+  height: 22px !important; /* stylelint-disable-line declaration-no-important */
+  width: 22px !important; /* stylelint-disable-line declaration-no-important */
+  top: calc(50% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-dropdown-popup.e-ie-crop-ddb-popup ul {
+  height: 250px;
+  overflow-y: scroll;
+}
+
+.e-dropdown-popup.e-ie-ddb-popup {
+  background: none !important; /* stylelint-disable-line declaration-no-important */
+}
 
 .e-image-editor {
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14)), rgba(var(--color-sf-surface));
 }
 .e-image-editor .e-contextual-toolbar-wrapper {
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
-  border-top: 1px solid rgba(var(--color-sf-outline-variant));
-  border-bottom: 1px solid rgba(var(--color-sf-outline-variant));
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filter-wrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper {
   border-color: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface));
@@ -519,9 +636,9 @@
   display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:hover {
-  background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface));
+  background: rgba(var(--color-sf-on-surface), 0.05);
   box-shadow: none;
-  color: rgba(var(--color-sf-on-surface));
+  color: rgba(var(--color-sf-on-surface-variant));
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:focus {
   background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface));

package/styles/image-editor/material3.css

@@ -206,6 +206,21 @@
 .e-image-editor .e-custom-e::before {
   content: "\e8af";
 }
+.e-image-editor .e-custom-f::before {
+  content: "\e8dd";
+}
+.e-image-editor .e-custom-g::before {
+  content: "\e8de";
+}
+.e-image-editor .e-custom-h::before {
+  content: "\e8df";
+}
+.e-image-editor .e-custom-i::before {
+  content: "\e8e0";
+}
+.e-image-editor .e-custom-j::before {
+  content: "\e8e1";
+}
 .e-image-editor .e-horizontal-flip::before {
   content: "\e8a3";
 }
@@ -267,6 +282,21 @@
 .e-dropdown-popup.e-image-popup .e-custom-e::before {
   content: "\e8af";
 }
+.e-dropdown-popup.e-image-popup .e-custom-f::before {
+  content: "\e8dd";
+}
+.e-dropdown-popup.e-image-popup .e-custom-g::before {
+  content: "\e8de";
+}
+.e-dropdown-popup.e-image-popup .e-custom-h::before {
+  content: "\e8df";
+}
+.e-dropdown-popup.e-image-popup .e-custom-i::before {
+  content: "\e8e0";
+}
+.e-dropdown-popup.e-image-popup .e-custom-j::before {
+  content: "\e8e1";
+}
 .e-dropdown-popup.e-image-popup .e-rectangle::before {
   content: "\e723";
 }
@@ -316,10 +346,42 @@
   margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-device.e-image-editor .e-slider-container {
-  margin-left: calc(50% - 50px) !important; /* stylelint-disable-line declaration-no-important */
+  margin-left: calc(50% - 70px) !important; /* stylelint-disable-line declaration-no-important */
   height: 54px !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-device.e-image-editor .e-straighten-slider {
+  margin-left: calc(50% - 70px) !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-ie-straighten-value-span {
+  margin-left: 15px !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-hscroll .e-scroll-nav.e-scroll-right-nav {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-hscroll.e-scroll-device {
+  padding-right: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-scroll-right-overlay {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-contextual-toolbar-wrapper {
+  border-top: 1px solid rgba(var(--color-sf-outline-variant));
+  border-bottom: none !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-toolbar {
+  border-bottom: 1px solid rgba(var(--color-sf-outline-variant));
+}
+.e-device.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
+  border-bottom: none !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-bottom-toolbar .e-toolbar, .e-device.e-image-editor .e-bottom-toolbar-area .e-toolbar {
+  border-bottom: none;
+}
 
+.e-bigger .e-image-editor .e-contextual-toolbar-wrapper .e-slider-container .e-slider .e-handle,
+.e-image-editor.e-bigger .e-contextual-toolbar-wrapper .e-slider-container .e-slider .e-handle {
+  top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-bigger .e-image-editor .e-toolbar,
 .e-image-editor.e-bigger .e-toolbar {
   height: 56px !important; /* stylelint-disable-line declaration-no-important */
@@ -392,6 +454,11 @@
   border: 1px solid rgba(var(--color-sf-outline-variant));
   position: relative;
   display: block;
+  /* stylelint-disable property-no-vendor-prefix */
+}
+.e-image-editor .no-spin ::-webkit-inner-spin-button, .e-image-editor .no-spin ::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
 }
 .e-image-editor .e-quick-access-toolbar-area .e-toolbar {
   border-radius: 4px;
@@ -431,6 +498,7 @@
 }
 .e-image-editor .e-toolbar {
   border: none;
+  border-bottom: 1px solid rgba(var(--color-sf-outline-variant));
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-toolbar-item.e-ie-resize-height {
   margin-left: 20px;
@@ -484,20 +552,19 @@
 .e-image-editor .e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-left {
   line-height: 1;
 }
-.e-image-editor .e-toolbar-area + .e-canvas-wrapper {
-  border-top: 1px solid rgba(var(--color-sf-outline-variant));
-}
 .e-image-editor .e-toolbar-area + .e-canvas-wrapper .e-textarea {
   line-height: initial !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-image-editor .e-bottom-toolbar {
+.e-image-editor .e-bottom-toolbar, .e-image-editor .e-bottom-toolbar-area {
   border-top: 1px solid rgba(var(--color-sf-outline-variant));
 }
 .e-image-editor .e-contextual-toolbar-wrapper {
+  border-bottom: 1px solid rgba(var(--color-sf-outline-variant));
   width: 100%;
   z-index: 1;
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
+  border-bottom: none !important; /* stylelint-disable-line declaration-no-important */
   height: 140px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar {
@@ -528,6 +595,10 @@
   margin: 4px;
   text-align: center;
 }
+.e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-dropdown-btn {
+  margin: 0 auto;
+  width: max-content;
+}
 .e-image-editor .e-contextual-toolbar-wrapper.e-hide {
   display: none;
 }
@@ -545,14 +616,60 @@
   margin-left: calc(50% - 137px);
   height: 54px !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-slider-container .e-slider .e-handle {
+  height: 16px !important; /* stylelint-disable-line declaration-no-important */
+  top: calc(50% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+  width: 16px !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-ie-straighten-value-span,
+.e-ie-straighten-span {
+  font-size: 14px;
+  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
+  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
+  height: auto;
+  margin-left: 8px;
+  padding-right: 2px;
+}
+
+.e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
+  top: calc(50% - 20px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider-track,
+.e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-range {
+  top: calc(50% - 2px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
+  top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
+  height: 16px !important; /* stylelint-disable-line declaration-no-important */
+  width: 16px !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
+  height: 22px !important; /* stylelint-disable-line declaration-no-important */
+  width: 22px !important; /* stylelint-disable-line declaration-no-important */
+  top: calc(50% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-dropdown-popup.e-ie-crop-ddb-popup ul {
+  height: 250px;
+  overflow-y: scroll;
+}
+
+.e-dropdown-popup.e-ie-ddb-popup {
+  background: none !important; /* stylelint-disable-line declaration-no-important */
+}
 
 .e-image-editor {
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14)), rgba(var(--color-sf-surface));
 }
 .e-image-editor .e-contextual-toolbar-wrapper {
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
-  border-top: 1px solid rgba(var(--color-sf-outline-variant));
-  border-bottom: 1px solid rgba(var(--color-sf-outline-variant));
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filter-wrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper {
   border-color: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface));
@@ -575,9 +692,9 @@
   display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:hover {
-  background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface));
+  background: rgba(var(--color-sf-on-surface), 0.05);
   box-shadow: none;
-  color: rgba(var(--color-sf-on-surface));
+  color: rgba(var(--color-sf-on-surface-variant));
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:focus {
   background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface));

package/styles/image-editor/tailwind-dark.css

@@ -94,6 +94,21 @@
 .e-image-editor .e-custom-e::before {
   content: "\e8af";
 }
+.e-image-editor .e-custom-f::before {
+  content: "\e8dd";
+}
+.e-image-editor .e-custom-g::before {
+  content: "\e8de";
+}
+.e-image-editor .e-custom-h::before {
+  content: "\e8df";
+}
+.e-image-editor .e-custom-i::before {
+  content: "\e8e0";
+}
+.e-image-editor .e-custom-j::before {
+  content: "\e8e1";
+}
 .e-image-editor .e-horizontal-flip::before {
   content: "\e8a3";
 }
@@ -155,6 +170,21 @@
 .e-dropdown-popup.e-image-popup .e-custom-e::before {
   content: "\e8af";
 }
+.e-dropdown-popup.e-image-popup .e-custom-f::before {
+  content: "\e8dd";
+}
+.e-dropdown-popup.e-image-popup .e-custom-g::before {
+  content: "\e8de";
+}
+.e-dropdown-popup.e-image-popup .e-custom-h::before {
+  content: "\e8df";
+}
+.e-dropdown-popup.e-image-popup .e-custom-i::before {
+  content: "\e8e0";
+}
+.e-dropdown-popup.e-image-popup .e-custom-j::before {
+  content: "\e8e1";
+}
 .e-dropdown-popup.e-image-popup .e-rectangle::before {
   content: "\e723";
 }
@@ -204,10 +234,42 @@
   margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-device.e-image-editor .e-slider-container {
-  margin-left: calc(50% - 50px) !important; /* stylelint-disable-line declaration-no-important */
+  margin-left: calc(50% - 70px) !important; /* stylelint-disable-line declaration-no-important */
   height: 54px !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-device.e-image-editor .e-straighten-slider {
+  margin-left: calc(50% - 70px) !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-ie-straighten-value-span {
+  margin-left: 15px !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-hscroll .e-scroll-nav.e-scroll-right-nav {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-hscroll.e-scroll-device {
+  padding-right: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-scroll-right-overlay {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-contextual-toolbar-wrapper {
+  border-top: 1px solid #4b5563;
+  border-bottom: none !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-toolbar {
+  border-bottom: 1px solid #4b5563;
+}
+.e-device.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
+  border-bottom: none !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-device.e-image-editor .e-bottom-toolbar .e-toolbar, .e-device.e-image-editor .e-bottom-toolbar-area .e-toolbar {
+  border-bottom: none;
+}
 
+.e-bigger .e-image-editor .e-contextual-toolbar-wrapper .e-slider-container .e-slider .e-handle,
+.e-image-editor.e-bigger .e-contextual-toolbar-wrapper .e-slider-container .e-slider .e-handle {
+  top: calc(50% - 9px) !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-bigger .e-image-editor .e-toolbar,
 .e-image-editor.e-bigger .e-toolbar {
   height: 48px !important; /* stylelint-disable-line declaration-no-important */
@@ -276,6 +338,11 @@
   border: 1px solid #4b5563;
   position: relative;
   display: block;
+  /* stylelint-disable property-no-vendor-prefix */
+}
+.e-image-editor .no-spin ::-webkit-inner-spin-button, .e-image-editor .no-spin ::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
 }
 .e-image-editor .e-ie-drop-area {
   height: calc(100% - 18px);
@@ -312,6 +379,7 @@
 }
 .e-image-editor .e-toolbar {
   border: none;
+  border-bottom: 1px solid #4b5563;
   height: 38px !important; /* stylelint-disable-line declaration-no-important */
   min-height: 38px !important; /* stylelint-disable-line declaration-no-important */
 }
@@ -367,20 +435,19 @@
 .e-image-editor .e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-left {
   line-height: 1;
 }
-.e-image-editor .e-toolbar-area + .e-canvas-wrapper {
-  border-top: 1px solid #4b5563;
-}
 .e-image-editor .e-toolbar-area + .e-canvas-wrapper .e-textarea {
   line-height: initial !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-image-editor .e-bottom-toolbar {
+.e-image-editor .e-bottom-toolbar, .e-image-editor .e-bottom-toolbar-area {
   border-top: 1px solid #4b5563;
 }
 .e-image-editor .e-contextual-toolbar-wrapper {
+  border-bottom: 1px solid #4b5563;
   width: 100%;
   z-index: 1;
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar {
+  border-bottom: none !important; /* stylelint-disable-line declaration-no-important */
   height: 130px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-frame-wrapper .e-toolbar {
@@ -411,6 +478,10 @@
   margin: 4px;
   text-align: center;
 }
+.e-image-editor .e-contextual-toolbar-wrapper.e-frame-wrapper .e-dropdown-btn {
+  margin: 0 auto;
+  width: max-content;
+}
 .e-image-editor .e-contextual-toolbar-wrapper.e-hide {
   display: none;
 }
@@ -428,14 +499,48 @@
   margin-left: calc(50% - 137px);
   height: 54px !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-ie-straighten-value-span,
+.e-ie-straighten-span {
+  font-size: 14px;
+  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
+  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
+  height: auto;
+}
+
+.e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
+  top: calc(50% - 20px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider-track,
+.e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-range {
+  top: calc(50% - 2px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
+  top: calc(50% - 6px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
+  top: calc(50% - 7px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-dropdown-popup.e-ie-crop-ddb-popup ul {
+  height: 250px;
+  overflow-y: scroll;
+}
+
+.e-dropdown-popup.e-ie-ddb-popup {
+  background: none !important; /* stylelint-disable-line declaration-no-important */
+}
 
 .e-image-editor {
   background: #4b5563;
 }
 .e-image-editor .e-contextual-toolbar-wrapper {
   background: #374151;
-  border-top: 1px solid #4b5563;
-  border-bottom: 1px solid #4b5563;
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filter-wrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper {
   border-color: #4b5563;
@@ -457,9 +562,9 @@
   display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:hover {
-  background: #374151;
+  background: #4b5563;
   box-shadow: none;
-  color: #fff;
+  color: #9ca3af;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:focus {
   background: #374151;