Fix the visuals of the unsafe HTML block

See #5606

diff --git a/wcfsetup/install/files/style/ui/ckeditor.scss b/wcfsetup/install/files/style/ui/ckeditor.scss
index 6e8221ebcdc52a048a3b6f28e62d5415c0590409..a0005c403099d54fe2fd35b33c65d55856e559de 100644 (file)
--- a/wcfsetup/install/files/style/ui/ckeditor.scss
+++ b/wcfsetup/install/files/style/ui/ckeditor.scss
@@ -525,6 +525,31 @@ html.touch .ck.ck-balloon-panel.ck-tooltip {
        display: none;
 }
 
+/* HTML Embed */
+.ck .ck-widget.raw-html-embed {
+       --ck-color-button-default-hover-background: var(--wcfEditorButtonBackground);
+       --ck-color-button-default-active-background: var(--wcfEditorButtonBackground);
+
+       --ck-color-button-on-background: var(--wcfEditorButtonBackgroundActive);
+       --ck-color-button-on-hover-background: var(--wcfEditorButtonBackgroundActive);
+       --ck-color-button-on-active-background: var(--wcfEditorButtonBackgroundActive);
+       --ck-color-button-on-disabled-background: transparent;
+       --ck-color-button-on-color: var(--wcfEditorButtonTextActive);
+
+       background-color: var(--wcfContentContainerBackground);
+       font-size: var(--wcfFontSizeSmall);
+
+       &::before {
+               padding: 0 var(--ck-spacing-tiny) !important;
+       }
+}
+
+@media (hover: hover) {
+       .ck-widget.raw-html-embed .ck.ck-button.ck-button:not(.ck-disabled):hover {
+               background-color: var(--ck-color-button-default-hover-background);
+       }
+}
+
 @include screen-xs {
        html.iOS .ck.ck-content {
                /* Font sizes below 16px cause iOS to zoom when moving the focus inside of it. */