From 057f8bf3b47195ae99f5e15fbb5bf2ae59e1625f Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Thu, 20 Apr 2023 19:19:10 +0200 Subject: [PATCH] =?utf8?q?Apply=20the=20framework=E2=80=99s=20style=20to?= =?utf8?q?=20CKEditor?= MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit --- wcfsetup/install/files/style/ui/ckeditor.scss | 183 +++++++++--------- 1 file changed, 90 insertions(+), 93 deletions(-) diff --git a/wcfsetup/install/files/style/ui/ckeditor.scss b/wcfsetup/install/files/style/ui/ckeditor.scss index 833ef02d4e..9525ef39c5 100644 --- a/wcfsetup/install/files/style/ui/ckeditor.scss +++ b/wcfsetup/install/files/style/ui/ckeditor.scss @@ -11,11 +11,34 @@ vertical-align: middle; } -.ck.ck-editor { +.ck.ck-editor, +.ck.ck-body { + --ck-color-base-background: var(--wcfContentContainerBackground); + --ck-border-radius: var(--wcfBorderRadius); --ck-color-base-border: var(--wcfContentBorderInner); --ck-color-text: var(--wcfContentText); --ck-color-toolbar-border: var(--wcfContentBorderInner); + --ck-color-toolbar-background: var(--wcfContentContainerBackground); + + --ck-color-dropdown-panel-background: var(--wcfDropdownBackground); + --ck-color-dropdown-panel-border: var(--wcfDropdownBorderInner); + --ck-color-panel-background: var(--wcfDropdownBackground); + --ck-color-panel-border: var(--wcfDropdownBorderInner); + + --ck-color-input-background: var(--wcfInputBackground); + --ck-color-input-border: var(--wcfInputBorder); + --ck-color-input-error-border: var(--ck-color-base-error); + --ck-color-input-text: var(--wcfInputText); + --ck-color-input-disabled-background: var(--wcfInputDisabledBackground); + --ck-color-input-disabled-border: var(--wcfInputDisabledBorder); + --ck-color-input-disabled-text: var(--wcfInputDisabledText); + + --ck-color-list-background: var(--wcfDropdownBackground); + --ck-color-list-button-hover-background: var(--wcfDropdownBackgroundActive); + --ck-color-list-button-on-background: var(--wcfDropdownBackgroundActive); + --ck-color-list-button-on-background-focus: var(--wcfDropdownBackgroundActive); + --ck-color-list-button-on-text: var(--wcfDropdownLink); } .ck.ck-content { @@ -49,119 +72,93 @@ } } -html[data-color-scheme="dark"] { - /* - Override some of the color values of the built-in “Lark” theme. - https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/ui/theme-customization.html - */ - .ck.ck-editor { - /* Helper variables to avoid duplication in the colors. */ - --ck-custom-background: hsl(270, 1%, 29%); - --ck-custom-foreground: hsl(255, 3%, 18%); - --ck-custom-border: hsl(300, 1%, 22%); - --ck-custom-white: hsl(0, 0%, 100%); - - /* -- Overrides generic colors. ------------------------------------------------------------- */ - - --ck-color-base-foreground: var(--ck-custom-background); - --ck-color-focus-border: hsl(208, 90%, 62%); - --ck-color-text: hsl(0, 0%, 98%); - --ck-color-shadow-drop: hsla(0, 0%, 0%, 0.2); - --ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1); - - /* -- Overrides the default .ck-button class colors. ---------------------------------------- */ - - --ck-color-button-default-background: var(--ck-custom-background); - --ck-color-button-default-hover-background: hsl(270, 1%, 22%); - --ck-color-button-default-active-background: hsl(270, 2%, 20%); - --ck-color-button-default-active-shadow: hsl(270, 2%, 23%); - --ck-color-button-default-disabled-background: var(--ck-custom-background); - - --ck-color-button-on-background: var(--ck-custom-foreground); - --ck-color-button-on-hover-background: hsl(255, 4%, 16%); - --ck-color-button-on-active-background: hsl(255, 4%, 14%); - --ck-color-button-on-active-shadow: hsl(240, 3%, 19%); - --ck-color-button-on-disabled-background: var(--ck-custom-foreground); - - --ck-color-button-action-background: hsl(168, 76%, 42%); - --ck-color-button-action-hover-background: hsl(168, 76%, 38%); - --ck-color-button-action-active-background: hsl(168, 76%, 36%); - --ck-color-button-action-active-shadow: hsl(168, 75%, 34%); - --ck-color-button-action-disabled-background: hsl(168, 76%, 42%); - --ck-color-button-action-text: var(--ck-custom-white); - - --ck-color-button-save: hsl(120, 100%, 46%); - --ck-color-button-cancel: hsl(15, 100%, 56%); - - /* -- Overrides the default .ck-dropdown class colors. -------------------------------------- */ - - --ck-color-dropdown-panel-background: var(--ck-custom-background); - --ck-color-dropdown-panel-border: var(--ck-custom-foreground); - - /* -- Overrides the default .ck-splitbutton class colors. ----------------------------------- */ +/* TODO: DEV ONLY */ +.ck.ck-dropdown .ck-dropdown__panel { + display: block !important; +} - --ck-color-split-button-hover-background: var(--ck-color-button-default-hover-background); - --ck-color-split-button-hover-border: var(--ck-custom-foreground); +.ck.ck-reset.ck-dropdown__panel, +.ck.ck-balloon-panel { + border-color: transparent; + box-shadow: var(--wcfBoxShadow); +} - /* -- Overrides the default .ck-input class colors. ----------------------------------------- */ +.ck.ck-editor + .ck.ck-labeled-field-view.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused) + > .ck.ck-labeled-field-view__input-wrapper + > .ck.ck-label { + color: var(--wcfInputPlaceholder); +} - --ck-color-input-background: var(--ck-custom-background); - --ck-color-input-border: hsl(257, 3%, 43%); - --ck-color-input-text: hsl(0, 0%, 98%); - --ck-color-input-disabled-background: hsl(255, 4%, 21%); - --ck-color-input-disabled-border: hsl(250, 3%, 38%); - --ck-color-input-disabled-text: hsl(0, 0%, 78%); +.ck.ck-list .ck-list__item .ck-button:not(.ck-disabled):hover { + color: var(--wcfDropdownLink); + cursor: pointer; +} - /* -- Overrides the default .ck-labeled-field-view class colors. ---------------------------- */ +.ck.ck-form__row .ck-button, +.ck.ck-vertical-form .ck-button { + --ck-color-text: var(--wcfButtonText); - --ck-color-labeled-field-label-background: var(--ck-custom-background); + background-color: var(--wcfButtonBackground); + border-color: transparent; + font-size: var(--wcfFontSizeSmall); + padding: 4px 12px !important; +} - /* -- Overrides the default .ck-list class colors. ------------------------------------------ */ +.ck.ck-form__row { + column-gap: 10px; + justify-content: flex-end !important; - --ck-color-list-background: var(--ck-custom-background); - --ck-color-list-button-hover-background: var(--ck-color-base-foreground); - --ck-color-list-button-on-background: var(--ck-color-base-active); - --ck-color-list-button-on-background-focus: var(--ck-color-base-active-focus); - --ck-color-list-button-on-text: var(--ck-color-base-background); + .ck-button__icon { + display: none; + } - /* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */ + .ck-button { + flex: 0 0 auto !important; + margin: 0 !important; - --ck-color-panel-background: var(--ck-custom-background); - --ck-color-panel-border: var(--ck-custom-border); + &:not(.ck-disabled) { + cursor: pointer; + } - /* -- Overrides the default .ck-toolbar class colors. --------------------------------------- */ + &.ck-disabled { + --ck-color-text: var(--wcfButtonDisabledText) !important; - --ck-color-toolbar-background: var(--ck-custom-background); - --ck-color-toolbar-border: var(--ck-custom-border); + background-color: var(--wcfButtonDisabledBackground) !important; + } + } - /* -- Overrides the default .ck-tooltip class colors. --------------------------------------- */ + .ck-button[type="button"] { + order: 1; + } - --ck-color-tooltip-background: hsl(252, 7%, 14%); - --ck-color-tooltip-text: hsl(0, 0%, 93%); + .ck-button[type="submit"] { + order: 2; + } - /* -- Overrides the default colors used by the ckeditor5-image package. --------------------- */ + .ck-button[type="button"]:not(.ck-disabled):hover { + --ck-color-text: var(--wcfButtonTextActive); - --ck-color-image-caption-background: hsl(0, 0%, 97%); - --ck-color-image-caption-text: hsl(0, 0%, 20%); + background-color: var(--wcfButtonBackgroundActive); + } - /* -- Overrides the default colors used by the ckeditor5-widget package. -------------------- */ + .ck-button[type="submit"]:not(.ck-disabled) { + --ck-color-text: var(--wcfButtonPrimaryText); - --ck-color-widget-blurred-border: hsl(0, 0%, 87%); - --ck-color-widget-hover-border: hsl(43, 100%, 68%); - --ck-color-widget-editable-focus-background: var(--ck-custom-white); + background-color: var(--wcfButtonPrimaryBackground); - /* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */ + &:hover { + --ck-color-text: var(--wcfButtonPrimaryTextActive); - --ck-color-link-default: hsl(190, 100%, 75%); + background-color: var(--wcfButtonPrimaryBackgroundActive); + } } +} - /* WoltLab overrides */ - .ck.ck-editor { - --ck-color-base-background: var(--wcfContentContainerBackground); - --ck-custom-border: #808080; - } - .ck.ck-editor .ck.ck-editor__main > .ck-editor__editable:not(.ck-focused) { - border-color: var(--ck-custom-border); +html[data-color-scheme="dark"] { + .ck.ck-reset.ck-dropdown__panel, + .ck.ck-balloon-panel { + border-color: var(--wcfDropdownBorderInner); } } -- 2.20.1