@syncfusion/ej2-richtexteditor 25.1.35 → 25.1.38

package/styles/fluent.css

@@ -453,7 +453,7 @@
 .e-richtexteditor.e-bigger .e-rte-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn,
 .e-richtexteditor.e-bigger .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn.e-btn,
 .e-richtexteditor.e-bigger .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn {
-  padding: 0 6px;
+  padding: 0 8px;
   border-radius: 0;
 }
 .e-bigger .e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-dropdown-btn .e-rte-color-content,
@@ -747,7 +747,7 @@
 .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn,
 .e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn.e-btn,
 .e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn {
-  padding: 0;
+  padding: 0 4px;
   border-radius: 0;
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-dropdown-btn .e-rte-color-content,
@@ -2702,6 +2702,10 @@
   display: block;
 }
 
+.e-rte-picker-init {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+
 /*! tab layout */
 .e-richtexteditor .e-rte-toolbar {
   border: 1px solid #edebe9;
@@ -2712,7 +2716,7 @@
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-active .e-tbar-btn, .e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-active .e-tbar-btn:focus {
   background: #d2d0ce;
-  border: 0 solid #8a8886;
+  border: 1px solid transparent;
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-active .e-tbar-btn .e-icons, .e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-active .e-tbar-btn:focus .e-icons {
   color: #605e5c;
@@ -2780,7 +2784,7 @@
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-active, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-fontcolor-dropdown.e-active, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-numberformatlist-dropdown.e-active, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-bulletformatlist-dropdown.e-active {
   background: #d2d0ce;
-  border: 0;
+  border: 1px solid transparent;
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-active .e-rte-color-content::after, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-fontcolor-dropdown.e-active .e-rte-color-content::after, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-numberformatlist-dropdown.e-active .e-rte-color-content::after, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-bulletformatlist-dropdown.e-active .e-rte-color-content::after {
   background: #fff;
@@ -2969,6 +2973,18 @@
 .e-richtexteditor .e-video-url-wrap textarea {
   height: 80px;
 }
+.e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn {
+  border: 1px solid transparent;
+}
+.e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
+  border: 1px solid transparent;
+}
+.e-richtexteditor .e-toolbar .e-toolbar-item .e-tbar-btn {
+  border: 1px solid transparent;
+}
+.e-richtexteditor .e-toolbar .e-toolbar-item .e-tbar-btn:hover {
+  border: 1px solid transparent;
+}
 
 .e-rte-quick-popup {
   border: none;
@@ -3022,7 +3038,7 @@
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn,
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn:focus {
   background: #d2d0ce;
-  border: 0 solid #8a8886;
+  border: 1px solid transparent;
 }
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn .e-icons,
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn:focus .e-icons {

package/styles/highcontrast-light.css

@@ -2654,6 +2654,10 @@
   display: block;
 }
 
+.e-rte-picker-init {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+
 /*! tab layout */
 .e-richtexteditor .e-rte-toolbar {
   border: 1px solid #000;

package/styles/highcontrast.css

@@ -2654,6 +2654,10 @@
   display: block;
 }
 
+.e-rte-picker-init {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+
 /*! tab layout */
 .e-richtexteditor .e-rte-toolbar {
   border: 1px solid #fff;

package/styles/material-dark.css

@@ -1614,7 +1614,7 @@
 .e-rte-elements .e-rte-emojipicker-popup.e-popup.e-popup-open .e-toolbar .e-toolbar-item .e-tbar-btn {
   padding: 7px 3px;
   border-radius: 4px;
-  padding: 3px;
+  padding: 0 6px;
 }
 .e-richtexteditor .e-rte-emojipicker-popup.e-popup.e-popup-open .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text,
 .e-rte-elements .e-rte-emojipicker-popup.e-popup.e-popup-open .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
@@ -2660,6 +2660,10 @@
   display: block;
 }
 
+.e-rte-picker-init {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+
 /*! tab layout */
 .e-richtexteditor .e-rte-toolbar {
   border: 1px solid #616161;

package/styles/material.css

@@ -1614,7 +1614,7 @@
 .e-rte-elements .e-rte-emojipicker-popup.e-popup.e-popup-open .e-toolbar .e-toolbar-item .e-tbar-btn {
   padding: 7px 3px;
   border-radius: 4px;
-  padding: 3px;
+  padding: 0 6px;
 }
 .e-richtexteditor .e-rte-emojipicker-popup.e-popup.e-popup-open .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text,
 .e-rte-elements .e-rte-emojipicker-popup.e-popup.e-popup-open .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
@@ -2660,6 +2660,10 @@
   display: block;
 }
 
+.e-rte-picker-init {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+
 /*! tab layout */
 .e-richtexteditor .e-rte-toolbar {
   border: 1px solid rgba(0, 0, 0, 0.12);

package/styles/material3-dark.css

@@ -2738,6 +2738,10 @@
   display: block;
 }
 
+.e-rte-picker-init {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+
 /*! tab layout */
 .e-richtexteditor .e-rte-toolbar {
   border: 1px solid rgba(var(--color-sf-outline-variant));

package/styles/material3.css

@@ -2794,6 +2794,10 @@
   display: block;
 }
 
+.e-rte-picker-init {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+
 /*! tab layout */
 .e-richtexteditor .e-rte-toolbar {
   border: 1px solid rgba(var(--color-sf-outline-variant));

package/styles/rich-text-editor/_bootstrap-dark-definition.scss

@@ -124,7 +124,7 @@ $rte-colorpicker-parent-padding-hover: 1px !default;
 $rte-colorpicker-parent-padding-active-hover: 1px !default;
 $rte-overlay-color: #383838 !default;
 $rte-dropdown-btn-color-content-height: 30px !default;
-$rte-big-dropdown-btn-color-content-height: 30px !default;
+$rte-big-dropdown-btn-color-content-height: 35px !default;
 $rte-font-icon-width: 30px !default;
 $rte-font-arrow-width: 18px !default;
 $rte-font-arrow-touch-width: 20px !default;
@@ -229,9 +229,9 @@ $rte-big-tablecell-width : 16px;
 $rte-toolbar-item-frist-last-child-margin: 0;
 $rte-big-toolbar-item-frist-last-child-margin: 0 6px;
 $dropdown-btn-font-size: inherit !default;
-$rte-toolbar-expaned-padding: 2px 3.5px;
+$rte-toolbar-expaned-padding: 0 2.5px;
 $rte-toolbar-expaned-padding-hover: 0 2.5px;
-$rte-big-toolbar-expaned-padding: 0 6px;
+$rte-big-toolbar-expaned-padding: 0 7px;
 $rte-extended-toolbar-items-padding: 0;
 $rte-expand-tbar-hover-bg: transparent !default;
 $rte-big-insert-dialog-label-padding-top: 12px;
@@ -240,7 +240,7 @@ $rte-background-color-icon-fontsize: 14px;
 $rte-big-background-color-icon-fontsize: 18px;
 $rte-dropdown-btn-color-content-padding: 1px !default;
 $rte-big-dropdown-btn-color-content-padding: 1px !default;
-$rte-tb-expended-min-height: 44px !default;
+$rte-tb-expended-min-height: 40px !default;
 $rte-big-tb-expended-min-height: 49px !default;
 $rte-tb-expended-padding-left: 1px !default;
 $rte-tb-expended-hover-padding-left: 1px !default;

package/styles/rich-text-editor/_bootstrap-definition.scss

@@ -228,7 +228,7 @@ $rte-big-tablecell-height : 16px;
 $rte-big-tablecell-width : 16px;
 $rte-toolbar-item-frist-last-child-margin: 0;
 $rte-big-toolbar-item-frist-last-child-margin: 0 6px;
-$rte-toolbar-expaned-padding: 2px 3.5px;
+$rte-toolbar-expaned-padding: 1px 2.5px;
 $dropdown-btn-font-size: inherit !default;
 $rte-toolbar-expaned-padding-hover: 1px 2.5px;
 $rte-big-toolbar-expaned-padding: 0 7px;
@@ -240,7 +240,7 @@ $rte-background-color-icon-fontsize: 14px;
 $rte-big-background-color-icon-fontsize: 18px;
 $rte-dropdown-btn-color-content-padding: 1px !default;
 $rte-big-dropdown-btn-color-content-padding: 1px !default;
-$rte-tb-expended-min-height: 44px !default;
+$rte-tb-expended-min-height: 40px !default;
 $rte-big-tb-expended-min-height: 49px !default;
 $rte-tb-expended-padding-left: 1px !default;
 $rte-tb-expended-hover-padding-left: 1px !default;

package/styles/rich-text-editor/_fluent-definition.scss

@@ -36,7 +36,7 @@ $rte-big-tb-items-margin-left: 8px !default;
 $rte-tb-items-margin-left: 8px !default;
 $rte-big-tb-items-padding-left: 8px !default;
 $rte-tb-items-padding-left: 8px !default;
-$rte-active-tb-item-btn-padding: 0 !default;
+$rte-active-tb-item-btn-padding: 0 4px !default;
 $rte-split-btn-bar-size: 0 !default;
 $rte-split-btn-active-color-icon-line-height: 30px !default;
 $rte-big-split-btn-active-color-icon-line-height: 37px !default;
@@ -65,7 +65,7 @@ $rte-font-arrow-width: 12px !default;
 $rte-font-arrow-touch-width: 20px !default;
 $rte-font-icon-line-height: $leading-none !default;
 $rte-placeholder-line-height: $leading-normal !default;
-$rte-big-active-tb-item-btn-padding: 0 6px !default;
+$rte-big-active-tb-item-btn-padding: 0 8px !default;
 $rte-table-popup-padding: 10px !default;
 $rte-table-popup-border: 0 solid $gray30 !default;
 $rte-insert-dialog-label-padding-top: 12px !default;
@@ -116,7 +116,7 @@ $rte-big-formatlists-dropdown-line-height: 30px;
 //Layout Variables End
 
 //Theme Variables Start
-$rte-split-btn-active-border: 0 !default;
+$rte-split-btn-active-border: 1px solid $transparent !default;
 $rte-border-color: $border-light !default;
 $rte-content-bg: $content-bg-color !default;
 $rte-full-screen-bg: $content-bg-color !default;
@@ -145,7 +145,7 @@ $rte-quick-pop-item-focus-bg: $content-bg-color-alt4 !default;
 $rte-quick-tb-btn-hover: $content-bg-color-alt4 !default;
 $rte-tb-item-active-bg: $content-bg-color-alt5 !default;
 $rte-tb-active-font-color: $icon-color !default;
-$rte-tb-item-active-border: 0 solid $secondary-border-color-pressed !default;
+$rte-tb-item-active-border: 1px solid $transparent !default;
 $rte-expand-tb-border-bottom: $rte-border-size $rte-border-type $border-light !default;
 $rte-color-picker-active-bg: inherit !default;
 $rte-drop-btn-active-bg: $content-bg-color-alt5 !default;
@@ -162,7 +162,7 @@ $rte-split-btn-span-active-bg: $content-bg-color-alt3 !default;
 $rte-split-btn-bar-bg: $content-bg-color !default;
 $rte-split-btn-active-bar-bg: $content-bg-color !default;
 $rte-split-btn-bar-size: 0 !default;
-$rte-split-btn-active-border: 0 !default;
+$rte-split-btn-active-border: 1px solid $transparent !default;
 $rte-split-btn-active-color-icon-line-height: 40px !default;
 $rte-big-split-btn-active-color-icon-line-height: 48px !default;
 

package/styles/rich-text-editor/_layout.scss

@@ -1284,12 +1284,12 @@
         @if $skin-name =='bootstrap' or $skin-name =='botstrap-dark' {
           &:hover,
           &:focus{
-            padding: 6px 2px;
+            padding: 7px 3px;
           }
         }
 
         @if $skin-name =='material' or $skin-name =='material-dark' {
-          padding: 3px;
+          padding: 0 6px;
         }
 
         .e-tbar-btn-text {
@@ -1684,7 +1684,7 @@
     .e-rte-numberformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
     .e-rte-bulletformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control {
       @if $skin-name == 'tailwind' {
-        padding: 1px;
+        padding: 0;
       }
     }
   }
@@ -2130,10 +2130,6 @@
       box-shadow: $rte-table-popup-box;
     }
 
-    .e-rte-elements.e-rte-quick-popup .e-toolbar .e-toolbar-items.e-toolbar-multirow:not(.e-tbar-pos) .e-toolbar-item:first-child {
-      margin-left: 6px;
-    }
-
     .e-rte-elements.e-rte-quick-popup .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
       min-width: 24px;
     }
@@ -2255,4 +2251,8 @@
       display: block;
     }
   }
+  // Used to hide the Color picker during the rendering at the initial stage. Removed the class in the created event.
+  .e-rte-picker-init {
+    display: none !important; /* stylelint-disable-line declaration-no-important */
+  }
 }

package/styles/rich-text-editor/_tailwind-definition.scss

@@ -12,7 +12,7 @@ $rte-quick-item-btn-width: 26px !default;
 $rte-big-quick-item-btn-height: 38px !default;
 $rte-quick-item-btn-height: 30px !default;
 $rte-big-quick-item-padding: 12px !default;
-$rte-quick-item-padding: 3px !default;
+$rte-quick-item-padding: 0 3px !default;
 $rte-quick-item-icon-min-width: 24px !default;
 $rte-big-quick-item-line-height: $leading-normal !default;
 $rte-content-padding: 12px !default;
@@ -51,8 +51,8 @@ $rte-big-drop-btn-padding-left: 10px !default;
 $rte-big-drop-btn-padding-right: 6px !default;
 $rte-big-drop-btn-action-padding-left: 10px !default;
 $rte-big-drop-btn-action-padding-right: 6px !default;
-$rte-colorpicker-parent-padding: 1px !default;
-$rte-colorpicker-parent-padding-hover: 1px !default;
+$rte-colorpicker-parent-padding: 0 !default;
+$rte-colorpicker-parent-padding-hover: 0 !default;
 $rte-colorpicker-parent-padding-active-hover: 0 !default;
 $rte-dropdown-btn-color-content-height: 30px !default;
 $rte-big-dropdown-btn-color-content-height: 38px !default;
@@ -85,7 +85,7 @@ $rte-big-inline-tmp-size-min-width: 59px;
 $rte-inline-tmp-size-min-width: 66px;
 $rte-big-inline-tmp-color-min-width: 50px;
 $rte-inline-tmp-color-min-width: 55px;
-$rte-big-color-list-span-common-padding-left-right: 1px;
+$rte-big-color-list-span-common-padding-left-right: 0;
 $rte-placeholder-padding: 12px !default;
 $rte-default-character-count-opacity: 1;
 $rte-droparea-line-height: 10;
@@ -159,7 +159,7 @@ $rte-split-btn-span-active-bg: $secondary-bg-color-pressed !default;
 $rte-split-btn-bar-bg: $content-bg-color-alt1 !default;
 $rte-split-btn-active-bar-bg: $content-bg-color !default;
 $rte-split-btn-bar-size: 0 !default;
-$rte-split-btn-active-border: 0 solid $secondary-border-color-hover !default;
+$rte-split-btn-active-border: 1px solid $secondary-border-color-hover !default;
 $rte-split-btn-active-color-icon-line-height: 30px !default;
 $rte-big-split-btn-active-color-icon-line-height: 38px !default;
 

package/styles/rich-text-editor/_theme.scss

@@ -381,6 +381,27 @@
     .e-video-url-wrap textarea {
       height: 80px;
     }
+
+    @if $skin-name == 'FluentUI' {
+      .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn{
+        border: 1px solid transparent;
+        &:hover{
+          border: 1px solid transparent;
+        }
+      }
+      .e-toolbar .e-toolbar-item .e-tbar-btn{
+        border: 1px solid transparent;
+        &:hover{
+          border: 1px solid transparent;
+        }
+      }
+    }
+
+    @if $skin-name == 'bootstrap-dark' {
+      .e-toolbar-extended .e-toolbar-item:not(.e-active) .e-tbar-btn{
+        border: 1px solid transparent;
+      }
+    }
   }
 
   .e-rte-quick-popup {

package/styles/rich-text-editor/bootstrap-dark.css

@@ -475,7 +475,7 @@
 .e-richtexteditor.e-bigger .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-dropdown-btn .e-rte-color-content,
 .e-richtexteditor.e-bigger .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-dropdown-btn .e-rte-color-content {
   padding-top: 1px;
-  height: 30px;
+  height: 35px;
 }
 .e-bigger .e-richtexteditor.e-rte-full-screen iframe,
 .e-richtexteditor.e-bigger.e-rte-full-screen iframe {
@@ -545,11 +545,11 @@
 }
 .e-bigger .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control,
 .e-richtexteditor.e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control {
-  padding: 0 6px;
+  padding: 0 7px;
 }
 .e-bigger .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover,
 .e-richtexteditor.e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover {
-  padding: 0 6px;
+  padding: 0 7px;
 }
 
 .e-richtexteditor {
@@ -629,7 +629,7 @@
 }
 .e-richtexteditor .e-rte-toolbar .e-hor-nav.e-expended-nav {
   height: auto;
-  min-height: 44px;
+  min-height: 40px;
   padding-left: 1px;
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-multirow {
@@ -1383,7 +1383,7 @@
 .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control,
 .e-rte-elements .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn,
 .e-rte-elements .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control {
-  padding: 2px 3.5px;
+  padding: 0 2.5px;
 }
 .e-richtexteditor .e-toolbar .e-toolbar-pop .e-toolbar-item.e-tbtn-align .e-btn.e-control .e-icons.e-btn-icon,
 .e-rte-elements .e-toolbar .e-toolbar-pop .e-toolbar-item.e-tbtn-align .e-btn.e-control .e-icons.e-btn-icon {
@@ -1794,11 +1794,11 @@
 }
 .e-bigger .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown .e-rte-color-content,
 .e-bigger .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown .e-caret {
-  height: 30px;
+  height: 35px;
 }
 .e-bigger .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown .e-rte-color-content:hover,
 .e-bigger .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown .e-caret:hover {
-  height: 30px;
+  height: 35px;
 }
 .e-bigger .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items:not(.e-tbar-pos) {
   margin: 0 6px;
@@ -2673,6 +2673,10 @@
   display: block;
 }
 
+.e-rte-picker-init {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+
 /*! tab layout */
 .e-richtexteditor .e-rte-toolbar {
   border: 1px solid #505050;
@@ -2940,6 +2944,9 @@
 .e-richtexteditor .e-video-url-wrap textarea {
   height: 80px;
 }
+.e-richtexteditor .e-toolbar-extended .e-toolbar-item:not(.e-active) .e-tbar-btn {
+  border: 1px solid transparent;
+}
 
 .e-rte-quick-popup {
   border: 0;

package/styles/rich-text-editor/bootstrap.css

@@ -770,7 +770,7 @@
 }
 .e-richtexteditor .e-rte-toolbar .e-hor-nav.e-expended-nav {
   height: auto;
-  min-height: 44px;
+  min-height: 40px;
   padding-left: 1px;
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-multirow {
@@ -1524,7 +1524,7 @@
 .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control,
 .e-rte-elements .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn,
 .e-rte-elements .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control {
-  padding: 2px 3.5px;
+  padding: 1px 2.5px;
 }
 .e-richtexteditor .e-toolbar .e-toolbar-pop .e-toolbar-item.e-tbtn-align .e-btn.e-control .e-icons.e-btn-icon,
 .e-rte-elements .e-toolbar .e-toolbar-pop .e-toolbar-item.e-tbtn-align .e-btn.e-control .e-icons.e-btn-icon {
@@ -1770,7 +1770,7 @@
 .e-richtexteditor .e-rte-emojipicker-popup.e-popup.e-popup-open .e-toolbar .e-toolbar-item .e-tbar-btn:hover, .e-richtexteditor .e-rte-emojipicker-popup.e-popup.e-popup-open .e-toolbar .e-toolbar-item .e-tbar-btn:focus,
 .e-rte-elements .e-rte-emojipicker-popup.e-popup.e-popup-open .e-toolbar .e-toolbar-item .e-tbar-btn:hover,
 .e-rte-elements .e-rte-emojipicker-popup.e-popup.e-popup-open .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
-  padding: 6px 2px;
+  padding: 7px 3px;
 }
 .e-richtexteditor .e-rte-emojipicker-popup.e-popup.e-popup-open .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text,
 .e-rte-elements .e-rte-emojipicker-popup.e-popup.e-popup-open .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
@@ -2819,6 +2819,10 @@
   display: block;
 }
 
+.e-rte-picker-init {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+
 /*! tab layout */
 .e-richtexteditor .e-rte-toolbar {
   border: 1px solid #ddd;

package/styles/rich-text-editor/bootstrap4.css

@@ -2901,6 +2901,10 @@
   display: block;
 }
 
+.e-rte-picker-init {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+
 /*! tab layout */
 .e-richtexteditor .e-rte-toolbar {
   border: 1px solid #dee2e6;

package/styles/rich-text-editor/bootstrap5-dark.css

@@ -2717,6 +2717,10 @@
   display: block;
 }
 
+.e-rte-picker-init {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+
 /*! tab layout */
 .e-richtexteditor .e-rte-toolbar {
   border: 1px solid #444c54;

package/styles/rich-text-editor/bootstrap5.css

@@ -2717,6 +2717,10 @@
   display: block;
 }
 
+.e-rte-picker-init {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+
 /*! tab layout */
 .e-richtexteditor .e-rte-toolbar {
   border: 1px solid #dee2e6;

package/styles/rich-text-editor/fabric-dark.css

@@ -2654,6 +2654,10 @@
   display: block;
 }
 
+.e-rte-picker-init {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+
 /*! tab layout */
 .e-richtexteditor .e-rte-toolbar {
   border: 1px solid #414040;

package/styles/rich-text-editor/fabric.css

@@ -2654,6 +2654,10 @@
   display: block;
 }
 
+.e-rte-picker-init {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+
 /*! tab layout */
 .e-richtexteditor .e-rte-toolbar {
   border: 1px solid #dadada;

package/styles/rich-text-editor/fluent-dark.css

@@ -453,7 +453,7 @@
 .e-richtexteditor.e-bigger .e-rte-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn,
 .e-richtexteditor.e-bigger .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn.e-btn,
 .e-richtexteditor.e-bigger .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn {
-  padding: 0 6px;
+  padding: 0 8px;
   border-radius: 0;
 }
 .e-bigger .e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-dropdown-btn .e-rte-color-content,
@@ -747,7 +747,7 @@
 .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn,
 .e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn.e-btn,
 .e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn {
-  padding: 0;
+  padding: 0 4px;
   border-radius: 0;
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-dropdown-btn .e-rte-color-content,
@@ -2702,6 +2702,10 @@
   display: block;
 }
 
+.e-rte-picker-init {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+
 /*! tab layout */
 .e-richtexteditor .e-rte-toolbar {
   border: 1px solid #292827;
@@ -2712,7 +2716,7 @@
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-active .e-tbar-btn, .e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-active .e-tbar-btn:focus {
   background: #3b3a39;
-  border: 0 solid #8a8886;
+  border: 1px solid transparent;
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-active .e-tbar-btn .e-icons, .e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-active .e-tbar-btn:focus .e-icons {
   color: #a19f9d;
@@ -2780,7 +2784,7 @@
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-active, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-fontcolor-dropdown.e-active, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-numberformatlist-dropdown.e-active, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-bulletformatlist-dropdown.e-active {
   background: #3b3a39;
-  border: 0;
+  border: 1px solid transparent;
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-active .e-rte-color-content::after, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-fontcolor-dropdown.e-active .e-rte-color-content::after, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-numberformatlist-dropdown.e-active .e-rte-color-content::after, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-bulletformatlist-dropdown.e-active .e-rte-color-content::after {
   background: #1b1a19;
@@ -2969,6 +2973,18 @@
 .e-richtexteditor .e-video-url-wrap textarea {
   height: 80px;
 }
+.e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn {
+  border: 1px solid transparent;
+}
+.e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
+  border: 1px solid transparent;
+}
+.e-richtexteditor .e-toolbar .e-toolbar-item .e-tbar-btn {
+  border: 1px solid transparent;
+}
+.e-richtexteditor .e-toolbar .e-toolbar-item .e-tbar-btn:hover {
+  border: 1px solid transparent;
+}
 
 .e-rte-quick-popup {
   border: none;
@@ -3022,7 +3038,7 @@
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn,
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn:focus {
   background: #3b3a39;
-  border: 0 solid #8a8886;
+  border: 1px solid transparent;
 }
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn .e-icons,
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn:focus .e-icons {