@syncfusion/blazor-themes 24.2.7 → 24.2.9

package/SCSS-Themes/popups/dialog/material.scss

@@ -336,6 +336,10 @@ $dialog-enable-resize-padding-bottom: 15px !default;
     cursor: move;
   }
 
+  .e-dialog.e-device.e-draggable.e-popup-open {
+    touch-action: none;
+  }
+
   .e-dialog {
     max-height: 98%;
     max-width: 100%;

package/SCSS-Themes/popups/dialog/material3-dark.scss

@@ -352,6 +352,10 @@ $zero-value: 0 !default;
     cursor: move;
   }
 
+  .e-dialog.e-device.e-draggable.e-popup-open {
+    touch-action: none;
+  }
+
   .e-dialog {
     max-height: 98%;
     max-width: 100%;

package/SCSS-Themes/popups/dialog/material3.scss

@@ -352,6 +352,10 @@ $zero-value: 0 !default;
     cursor: move;
   }
 
+  .e-dialog.e-device.e-draggable.e-popup-open {
+    touch-action: none;
+  }
+
   .e-dialog {
     max-height: 98%;
     max-width: 100%;

package/SCSS-Themes/popups/dialog/tailwind-dark.scss

@@ -346,6 +346,10 @@ $dialog-enable-resize-padding-bottom: 15px !default;
     cursor: move;
   }
 
+  .e-dialog.e-device.e-draggable.e-popup-open {
+    touch-action: none;
+  }
+
   .e-dialog {
     max-height: 98%;
     max-width: 100%;

package/SCSS-Themes/popups/dialog/tailwind.scss

@@ -346,6 +346,10 @@ $dialog-enable-resize-padding-bottom: 15px !default;
     cursor: move;
   }
 
+  .e-dialog.e-device.e-draggable.e-popup-open {
+    touch-action: none;
+  }
+
   .e-dialog {
     max-height: 98%;
     max-width: 100%;

package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap-dark.scss

@@ -108,8 +108,8 @@ $rte-big-tb-items-margin-left: 3px !default;
 $rte-tb-items-margin-left: 6px !default;
 $rte-big-tb-items-padding-left: 3px !default;
 $rte-tb-items-padding-left: 6px !default;
-$rte-big-active-tb-item-btn-padding: 0 6px !default;
-$rte-active-tb-item-btn-padding: 0 1.5px !default;
+$rte-big-active-tb-item-btn-padding: 0 7px !default;
+$rte-active-tb-item-btn-padding: 0 2.5px !default;
 $rte-tb-item-active-bg: rgba($grey-base, .12) !default;
 $rte-tb-active-font-color: $grey-dark-font !default;
 $rte-tb-item-active-border: $rte-border-size $rte-border-type $grey-8c !default;
@@ -157,15 +157,15 @@ $rte-font-name-btn-min-width: 67px !default;
 $rte-font-size-btn-min-width: 36px !default;
 $rte-drop-btn-padding-left: 9px !default;
 $rte-drop-btn-padding-right: 3.5px !default;
-$rte-drop-btn-action-padding-left: 8px !default;
-$rte-drop-btn-action-padding-right: 2.5px !default;
+$rte-drop-btn-action-padding-left: 9px !default;
+$rte-drop-btn-action-padding-right: 3.5px !default;
 $rte-big-drop-btn-padding-left: 12px !default;
 $rte-big-drop-btn-padding-right: 7px !default;
-$rte-big-drop-btn-action-padding-left: 11px !default;
-$rte-big-drop-btn-action-padding-right: 6px !default;
+$rte-big-drop-btn-action-padding-left: 12px !default;
+$rte-big-drop-btn-action-padding-right: 7px !default;
 $rte-ext-tbar-overlay-icons-color: $grey-dark-font !default;
 $rte-colorpicker-parent-padding: 1px !default;
-$rte-colorpicker-parent-padding-hover: 0 !default;
+$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;
@@ -222,7 +222,7 @@ $rte-resize-handler-width: 15px;
 $rte-resize-handler-height: 15px;
 $rte-resize-handler-position: 0;
 
-$rte-big-color-list-span-common-padding-left-right: 0;
+$rte-big-color-list-span-common-padding-left-right: 1px;
 $rte-default-character-count-opacity: .54;
 $rte-placeholder-padding: 16px !default;
 
@@ -1198,7 +1198,9 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
 
   .e-rte-image.e-imginline,
   .e-rte-audio.e-audio-inline,
-  .e-rte-video.e-video-inline  {
+  .e-rte-video.e-video-inline {
+    margin-left: 5px;
+    margin-right: 5px;
     display: inline-block;
     float: none;
     max-width: calc(100% - (2 * 5px));
@@ -1807,6 +1809,17 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     .e-rte-quick-toolbar {
       min-height: 48px;
 
+      .e-toolbar-items .e-rte-backgroundcolor-dropdown {
+        .e-rte-color-content,
+        .e-caret {
+          height: $rte-big-dropdown-btn-color-content-height;
+
+          &:hover {
+            height: $rte-big-dropdown-btn-color-content-height;
+          }
+        }
+      }
+
       .e-toolbar-items:not(.e-tbar-pos) {
         margin: $rte-big-quick-toolbar-items-margin;
         min-height: 48px;
@@ -2555,12 +2568,6 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
           }
         }
 
-        @if $skin-name == 'bootstrap5' {
-          .e-tbar-btn:focus .e-icons {
-            color: $rte-quick-item-active-font-color;
-          }
-        }
-
         &.e-active .e-tbar-btn,
         &.e-active .e-tbar-btn:focus {
           background: $rte-tb-item-active-bg;
@@ -2584,10 +2591,6 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
           .e-tbar-btn:hover .e-icons {
             color: $rte-tb-hover-font-color;
           }
-
-          .e-tbar-btn:focus .e-icons {
-            color: $primary-text-focus;
-          }
         }
 
         .e-dropdown-btn.e-active {
@@ -2699,9 +2702,6 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         .e-toolbar-item .e-tbar-btn:hover .e-icons {
           color: $rte-hover-icons-color;
         }
-        .e-toolbar-item .e-tbar-btn:focus .e-icons {
-          color: $rte-hover-icons-color;
-        }
         .e-toolbar-item.e-active .e-tbar-btn .e-icons {
           color: $rte-tb-active-font-color;
         }
@@ -2942,6 +2942,38 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
       .e-toolbar-items {
         background: $rte-quick-pop-bg;
 
+        .e-rte-backgroundcolor-dropdown {
+          .e-rte-color-content{
+            padding-top: $rte-dropdown-btn-color-content-padding;
+            @if $skin-name =='bootstrap' or $skin-name =='bootstrap-dark'{
+              padding-top: 5px;
+            }
+            height: $rte-dropdown-btn-color-content-height;
+            @if $skin-name == 'FluentUI' {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            }
+            &:hover {
+              background: $rte-split-btn-span-hover-bg;
+            }
+          }
+
+          .e-caret {
+            &:hover {
+              background: $rte-split-btn-span-hover-bg;
+            }
+          }
+          &.e-tbar-btn:hover {
+            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'highcontrast' {
+              background: $rte-split-btn-hover-bg;
+            }
+            @if $skin-name =='bootstrap-dark'{
+              background: $rte-tbar-default-bg;
+            }
+          }
+        }
+
         .e-separator {
           border: .5px solid $rte-quick-vr-line-color;
         }
@@ -3022,6 +3054,14 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     }
   }
 
+  .e-bigger .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown {
+    .e-rte-color-content {
+      @if $skin-name =='tailwind' or $skin-name =='tailwind-dark' or $skin-name =='bootstrap5' or $skin-name =='bootstrap5-dark' or $skin-name =='material' or $skin-name =='material-dark' {
+        padding-top: 8px;
+      }
+    }
+  }
+
   .e-dialog .e-img-uploadwrap .e-droptext,
   .e-dialog .e-aud-uploadwrap .e-droptext,
   .e-dialog .e-vid-uploadwrap .e-droptext,
@@ -3312,6 +3352,13 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
       color: $rte-icons-color;
     }
 
+    .e-bigger .e-richtexteditor,
+    .e-richtexteditor {
+      .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-overlay .e-tbar-btn .e-icons {
+        color: $icon-color-disabled;
+      }
+    }
+
     .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
       border-radius: 4px;
     }

package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap.scss

@@ -72,7 +72,7 @@ $rte-big-quick-item-line-height: normal !default;
 $rte-quick-item-line-height: 20px !default;
 $rte-quick-item-active-bg: rgba($grey-base, .12) !default;
 $rte-quick-item-active-font-color: $base-font !default;
-$rte-quick-item-border: $rte-border-size solid transparent !default;
+$rte-quick-item-border: 0 solid transparent !default;
 $rte-quick-item-hover-border-color: $grey-8c !default;
 $rte-quick-item-active-border-color: $grey-8c !default;
 $rte-content-padding: 16px !default;
@@ -110,11 +110,11 @@ $rte-big-tb-items-margin-left: 3px !default;
 $rte-tb-items-margin-left: 6px !default;
 $rte-big-tb-items-padding-left: 3px !default;
 $rte-tb-items-padding-left: 6px !default;
-$rte-big-active-tb-item-btn-padding: 0 6px !default;
-$rte-active-tb-item-btn-padding: 0 1.5px !default;
+$rte-big-active-tb-item-btn-padding: 0 7px !default;
+$rte-active-tb-item-btn-padding: 0 2.5px !default;
 $rte-tb-item-active-bg: rgba($grey-base, .12) !default;
 $rte-tb-active-font-color: $base-font !default;
-$rte-tb-item-active-border: $rte-border-size $rte-border-type $grey-8c !default;
+$rte-tb-item-active-border: 0 !default;
 $rte-expand-tb-border-bottom: $rte-border-size $rte-border-type rgb(250, 250, 250) !default;
 $rte-color-picker-active-bg: inherit !default;
 $rte-drop-btn-active-bg: $grey-e6 !default;
@@ -132,7 +132,7 @@ $rte-split-btn-span-active-bg: $grey-e6 !default;
 $rte-split-btn-bar-bg: $grey-ad !default;
 $rte-split-btn-active-bar-bg: $grey-ad !default;
 $rte-split-btn-bar-size: 0 !default;
-$rte-split-btn-active-border: 1px solid $grey-ad !default;
+$rte-split-btn-active-border: 0 solid $grey-ad !default;
 $rte-split-btn-active-color-icon-line-height: 30px !default;
 $rte-big-split-btn-active-color-icon-line-height: 34px !default;
 $rte-formatlists-dropdown-line-height: 20px;
@@ -159,15 +159,15 @@ $rte-font-name-btn-min-width: 67px !default;
 $rte-font-size-btn-min-width: 36px !default;
 $rte-drop-btn-padding-left: 9px !default;
 $rte-drop-btn-padding-right: 3.5px !default;
-$rte-drop-btn-action-padding-left: 8px !default;
-$rte-drop-btn-action-padding-right: 2.5px !default;
+$rte-drop-btn-action-padding-left: 9px !default;
+$rte-drop-btn-action-padding-right: 3.5px !default;
 $rte-big-drop-btn-padding-left: 12px !default;
 $rte-big-drop-btn-padding-right: 7px !default;
-$rte-big-drop-btn-action-padding-left: 11px !default;
-$rte-big-drop-btn-action-padding-right: 6px !default;
+$rte-big-drop-btn-action-padding-left: 12px !default;
+$rte-big-drop-btn-action-padding-right: 7px !default;
 $rte-ext-tbar-overlay-icons-color: $base-font !default;
 $rte-colorpicker-parent-padding: 1px !default;
-$rte-colorpicker-parent-padding-hover: 0 !default;
+$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;
@@ -223,7 +223,7 @@ $rte-resize-handler-height: 15px;
 $rte-resize-handler-position: 0;
 $rte-default-character-count-opacity: .54;
 
-$rte-big-color-list-span-common-padding-left-right: 0;
+$rte-big-color-list-span-common-padding-left-right: 1px;
 $rte-placeholder-padding: 16px !default;
 
 $rte-img-dlg-max-height: 426px !default;
@@ -312,9 +312,9 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
       &.e-extended-toolbar .e-toolbar-items .e-toolbar-item {
         & .e-rte-dropdown-btn.e-active.e-tbar-btn {
           background: $rte-dropdown-active-bg;
-          border: $rte-dropdown-active-border;
-          padding-left: 8px;
-          padding-right: 2.5px;
+          border: 0;
+          padding-left: 9px;
+          padding-right: 3.5px;
         }
       }
     }
@@ -1255,7 +1255,9 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
 
   .e-rte-image.e-imginline,
   .e-rte-audio.e-audio-inline,
-  .e-rte-video.e-video-inline  {
+  .e-rte-video.e-video-inline {
+    margin-left: 5px;
+    margin-right: 5px;
     display: inline-block;
     float: none;
     max-width: calc(100% - (2 * 5px));
@@ -1864,6 +1866,17 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     .e-rte-quick-toolbar {
       min-height: 48px;
 
+      .e-toolbar-items .e-rte-backgroundcolor-dropdown {
+        .e-rte-color-content,
+        .e-caret {
+          height: $rte-big-dropdown-btn-color-content-height;
+
+          &:hover {
+            height: $rte-big-dropdown-btn-color-content-height;
+          }
+        }
+      }
+
       .e-toolbar-items:not(.e-tbar-pos) {
         margin: $rte-big-quick-toolbar-items-margin;
         min-height: 48px;
@@ -2612,12 +2625,6 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
           }
         }
 
-        @if $skin-name == 'bootstrap5' {
-          .e-tbar-btn:focus .e-icons {
-            color: $rte-quick-item-active-font-color;
-          }
-        }
-
         &.e-active .e-tbar-btn,
         &.e-active .e-tbar-btn:focus {
           background: $rte-tb-item-active-bg;
@@ -2641,10 +2648,6 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
           .e-tbar-btn:hover .e-icons {
             color: $rte-tb-hover-font-color;
           }
-
-          .e-tbar-btn:focus .e-icons {
-            color: $primary-text-focus;
-          }
         }
 
         .e-dropdown-btn.e-active {
@@ -2756,9 +2759,6 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         .e-toolbar-item .e-tbar-btn:hover .e-icons {
           color: $rte-hover-icons-color;
         }
-        .e-toolbar-item .e-tbar-btn:focus .e-icons {
-          color: $rte-hover-icons-color;
-        }
         .e-toolbar-item.e-active .e-tbar-btn .e-icons {
           color: $rte-tb-active-font-color;
         }
@@ -2999,6 +2999,38 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
       .e-toolbar-items {
         background: $rte-quick-pop-bg;
 
+        .e-rte-backgroundcolor-dropdown {
+          .e-rte-color-content{
+            padding-top: $rte-dropdown-btn-color-content-padding;
+            @if $skin-name =='bootstrap' or $skin-name =='bootstrap-dark'{
+              padding-top: 5px;
+            }
+            height: $rte-dropdown-btn-color-content-height;
+            @if $skin-name == 'FluentUI' {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            }
+            &:hover {
+              background: $rte-split-btn-span-hover-bg;
+            }
+          }
+
+          .e-caret {
+            &:hover {
+              background: $rte-split-btn-span-hover-bg;
+            }
+          }
+          &.e-tbar-btn:hover {
+            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'highcontrast' {
+              background: $rte-split-btn-hover-bg;
+            }
+            @if $skin-name =='bootstrap-dark'{
+              background: $rte-tbar-default-bg;
+            }
+          }
+        }
+
         .e-separator {
           border: .5px solid $rte-quick-vr-line-color;
         }
@@ -3079,6 +3111,14 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     }
   }
 
+  .e-bigger .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown {
+    .e-rte-color-content {
+      @if $skin-name =='tailwind' or $skin-name =='tailwind-dark' or $skin-name =='bootstrap5' or $skin-name =='bootstrap5-dark' or $skin-name =='material' or $skin-name =='material-dark' {
+        padding-top: 8px;
+      }
+    }
+  }
+
   .e-dialog .e-img-uploadwrap .e-droptext,
   .e-dialog .e-aud-uploadwrap .e-droptext,
   .e-dialog .e-vid-uploadwrap .e-droptext,
@@ -3369,6 +3409,13 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
       color: $rte-icons-color;
     }
 
+    .e-bigger .e-richtexteditor,
+    .e-richtexteditor {
+      .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-overlay .e-tbar-btn .e-icons {
+        color: $icon-color-disabled;
+      }
+    }
+
     .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
       border-radius: 4px;
     }

package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap4.scss

@@ -1381,7 +1381,9 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
 
   .e-rte-image.e-imginline,
   .e-rte-audio.e-audio-inline,
-  .e-rte-video.e-video-inline  {
+  .e-rte-video.e-video-inline {
+    margin-left: 5px;
+    margin-right: 5px;
     display: inline-block;
     float: none;
     max-width: calc(100% - (2 * 5px));
@@ -1990,6 +1992,17 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     .e-rte-quick-toolbar {
       min-height: 48px;
 
+      .e-toolbar-items .e-rte-backgroundcolor-dropdown {
+        .e-rte-color-content,
+        .e-caret {
+          height: $rte-big-dropdown-btn-color-content-height;
+
+          &:hover {
+            height: $rte-big-dropdown-btn-color-content-height;
+          }
+        }
+      }
+
       .e-toolbar-items:not(.e-tbar-pos) {
         margin: $rte-big-quick-toolbar-items-margin;
         min-height: 48px;
@@ -2738,12 +2751,6 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
           }
         }
 
-        @if $skin-name == 'bootstrap5' {
-          .e-tbar-btn:focus .e-icons {
-            color: $rte-quick-item-active-font-color;
-          }
-        }
-
         &.e-active .e-tbar-btn,
         &.e-active .e-tbar-btn:focus {
           background: $rte-tb-item-active-bg;
@@ -2767,10 +2774,6 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
           .e-tbar-btn:hover .e-icons {
             color: $rte-tb-hover-font-color;
           }
-
-          .e-tbar-btn:focus .e-icons {
-            color: $primary-text-focus;
-          }
         }
 
         .e-dropdown-btn.e-active {
@@ -2882,9 +2885,6 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         .e-toolbar-item .e-tbar-btn:hover .e-icons {
           color: $rte-hover-icons-color;
         }
-        .e-toolbar-item .e-tbar-btn:focus .e-icons {
-          color: $rte-hover-icons-color;
-        }
         .e-toolbar-item.e-active .e-tbar-btn .e-icons {
           color: $rte-tb-active-font-color;
         }
@@ -3125,6 +3125,38 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
       .e-toolbar-items {
         background: $rte-quick-pop-bg;
 
+        .e-rte-backgroundcolor-dropdown {
+          .e-rte-color-content{
+            padding-top: $rte-dropdown-btn-color-content-padding;
+            @if $skin-name =='bootstrap' or $skin-name =='bootstrap-dark'{
+              padding-top: 5px;
+            }
+            height: $rte-dropdown-btn-color-content-height;
+            @if $skin-name == 'FluentUI' {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            }
+            &:hover {
+              background: $rte-split-btn-span-hover-bg;
+            }
+          }
+
+          .e-caret {
+            &:hover {
+              background: $rte-split-btn-span-hover-bg;
+            }
+          }
+          &.e-tbar-btn:hover {
+            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'highcontrast' {
+              background: $rte-split-btn-hover-bg;
+            }
+            @if $skin-name =='bootstrap-dark'{
+              background: $rte-tbar-default-bg;
+            }
+          }
+        }
+
         .e-separator {
           border: .5px solid $rte-quick-vr-line-color;
         }
@@ -3205,6 +3237,14 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     }
   }
 
+  .e-bigger .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown {
+    .e-rte-color-content {
+      @if $skin-name =='tailwind' or $skin-name =='tailwind-dark' or $skin-name =='bootstrap5' or $skin-name =='bootstrap5-dark' or $skin-name =='material' or $skin-name =='material-dark' {
+        padding-top: 8px;
+      }
+    }
+  }
+
   .e-dialog .e-img-uploadwrap .e-droptext,
   .e-dialog .e-aud-uploadwrap .e-droptext,
   .e-dialog .e-vid-uploadwrap .e-droptext,
@@ -3495,6 +3535,13 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
       color: $rte-icons-color;
     }
 
+    .e-bigger .e-richtexteditor,
+    .e-richtexteditor {
+      .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-overlay .e-tbar-btn .e-icons {
+        color: $icon-color-disabled;
+      }
+    }
+
     .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
       border-radius: 4px;
     }

package/SCSS-Themes/richtexteditor/rich-text-editor/bootstrap5-dark.scss

@@ -1183,7 +1183,9 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
 
   .e-rte-image.e-imginline,
   .e-rte-audio.e-audio-inline,
-  .e-rte-video.e-video-inline  {
+  .e-rte-video.e-video-inline {
+    margin-left: 5px;
+    margin-right: 5px;
     display: inline-block;
     float: none;
     max-width: calc(100% - (2 * 5px));
@@ -1792,6 +1794,17 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     .e-rte-quick-toolbar {
       min-height: 48px;
 
+      .e-toolbar-items .e-rte-backgroundcolor-dropdown {
+        .e-rte-color-content,
+        .e-caret {
+          height: $rte-big-dropdown-btn-color-content-height;
+
+          &:hover {
+            height: $rte-big-dropdown-btn-color-content-height;
+          }
+        }
+      }
+
       .e-toolbar-items:not(.e-tbar-pos) {
         margin: $rte-big-quick-toolbar-items-margin;
         min-height: 48px;
@@ -2540,12 +2553,6 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
           }
         }
 
-        @if $skin-name == 'bootstrap5' {
-          .e-tbar-btn:focus .e-icons {
-            color: $rte-quick-item-active-font-color;
-          }
-        }
-
         &.e-active .e-tbar-btn,
         &.e-active .e-tbar-btn:focus {
           background: $rte-tb-item-active-bg;
@@ -2569,10 +2576,6 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
           .e-tbar-btn:hover .e-icons {
             color: $rte-tb-hover-font-color;
           }
-
-          .e-tbar-btn:focus .e-icons {
-            color: $primary-text-focus;
-          }
         }
 
         .e-dropdown-btn.e-active {
@@ -2684,9 +2687,6 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         .e-toolbar-item .e-tbar-btn:hover .e-icons {
           color: $rte-hover-icons-color;
         }
-        .e-toolbar-item .e-tbar-btn:focus .e-icons {
-          color: $rte-hover-icons-color;
-        }
         .e-toolbar-item.e-active .e-tbar-btn .e-icons {
           color: $rte-tb-active-font-color;
         }
@@ -2927,6 +2927,38 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
       .e-toolbar-items {
         background: $rte-quick-pop-bg;
 
+        .e-rte-backgroundcolor-dropdown {
+          .e-rte-color-content{
+            padding-top: $rte-dropdown-btn-color-content-padding;
+            @if $skin-name =='bootstrap' or $skin-name =='bootstrap-dark'{
+              padding-top: 5px;
+            }
+            height: $rte-dropdown-btn-color-content-height;
+            @if $skin-name == 'FluentUI' {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            }
+            &:hover {
+              background: $rte-split-btn-span-hover-bg;
+            }
+          }
+
+          .e-caret {
+            &:hover {
+              background: $rte-split-btn-span-hover-bg;
+            }
+          }
+          &.e-tbar-btn:hover {
+            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'highcontrast' {
+              background: $rte-split-btn-hover-bg;
+            }
+            @if $skin-name =='bootstrap-dark'{
+              background: $rte-tbar-default-bg;
+            }
+          }
+        }
+
         .e-separator {
           border: .5px solid $rte-quick-vr-line-color;
         }
@@ -3007,6 +3039,14 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     }
   }
 
+  .e-bigger .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown {
+    .e-rte-color-content {
+      @if $skin-name =='tailwind' or $skin-name =='tailwind-dark' or $skin-name =='bootstrap5' or $skin-name =='bootstrap5-dark' or $skin-name =='material' or $skin-name =='material-dark' {
+        padding-top: 8px;
+      }
+    }
+  }
+
   .e-dialog .e-img-uploadwrap .e-droptext,
   .e-dialog .e-aud-uploadwrap .e-droptext,
   .e-dialog .e-vid-uploadwrap .e-droptext,
@@ -3297,6 +3337,13 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
       color: $rte-icons-color;
     }
 
+    .e-bigger .e-richtexteditor,
+    .e-richtexteditor {
+      .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-overlay .e-tbar-btn .e-icons {
+        color: $icon-color-disabled;
+      }
+    }
+
     .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
       border-radius: 4px;
     }