From 586f85852c3c4c9745550c1201f8e480d2c66acf Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Thu, 20 Apr 2023 15:53:00 +0200 Subject: [PATCH] Apply the style variables for the editor toolbar --- wcfsetup/install/files/style/ui/ckeditor.scss | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/wcfsetup/install/files/style/ui/ckeditor.scss b/wcfsetup/install/files/style/ui/ckeditor.scss index d6ced581eb..833ef02d4e 100644 --- a/wcfsetup/install/files/style/ui/ckeditor.scss +++ b/wcfsetup/install/files/style/ui/ckeditor.scss @@ -13,6 +13,40 @@ .ck.ck-editor { --ck-border-radius: var(--wcfBorderRadius); + --ck-color-base-border: var(--wcfContentBorderInner); + --ck-color-text: var(--wcfContentText); + --ck-color-toolbar-border: var(--wcfContentBorderInner); +} + +.ck.ck-content { + /* The content area must not contain a border radius at all, because it is + difficult to detect if there is an adjacent message tab menu. */ + border-radius: 0 !important; +} + +.ck.ck-toolbar__items { + --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); + + --ck-color-split-button-hover-background: var(--wcfEditorButtonBackground); + --ck-color-split-button-hover-border: var(--wcfEditorButtonText); + + fa-icon { + color: inherit; + } + + .ck-button:not(.ck-disabled):hover, + .ck-splitbutton:hover .ck-button:not(.ck-disabled):not(:hover), + .ck-splitbutton_open .ck-button:not(.ck-disabled):not(:hover) { + /* The editor does not support a separate text color on hover. */ + color: var(--wcfEditorButtonText); + } } html[data-color-scheme="dark"] { -- 2.20.1