[BUGFIX] Hide deactivated options in CKEditor5 style dropdown

Adapt to the user expection for a style selector to only show
applicable styles. The list becomes overwhelming in case a lot of
specific styles (like table formatting) are shown for unrelated
elements.

Resolves: #99673
Related: #101627
Releases: main, 12.4
Change-Id: I482935e91c863b601676b078fab0e9ba3acd62fa
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/81281
Reviewed-by: Benjamin Franzke <ben@bnf.dev>
Tested-by: Benjamin Franzke <ben@bnf.dev>
Tested-by: core-ci <typo3@b13.com>

Build/Sources/Sass/backend.scss

@@ -61,6 +61,7 @@
 @import "element/typo3-backend-security-sudo-mode";
 @import "element/typo3-backend-table-wizard";
 @import "element/typo3-notification-message";
+@import "element/typo3-rte-ckeditor-ckeditor5";
 
 //
 // TYPO3 Backend Components

Build/Sources/Sass/element/typo3-rte-ckeditor-ckeditor5.scss

@@ -0,0 +1,6 @@
+typo3-rte-ckeditor-ckeditor5 {
+    /* Hide inactive styles, see https://forge.typo3.org/issues/99673 */
+    .ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-disabled {
+        display: none;
+    }
+}

typo3/sysext/backend/Resources/Public/Css/backend.css

@@ -3925,6 +3925,7 @@ typo3-backend-table-wizard{display:inline-block}
 #alert-container typo3-notification-message{margin-top:5px}
 typo3-notification-message{display:block}
 typo3-notification-message .alert{box-shadow:var(--typo3-component-box-shadow);margin:0}
+typo3-rte-ckeditor-ckeditor5 .ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-disabled{display:none}
 .collapse-horizontal{height:auto;width:0;vertical-align:middle;overflow:hidden}
 .collapse-horizontal.show{display:inline-block;width:auto}
 .collapse-horizontal.collapsing{display:inline-block;transition-property:width,visibility;width:0}