From 703315fea986a9a05c2ebf49d81652f4ed364d1f Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Wed, 1 Apr 2020 12:32:15 +0200 Subject: [PATCH 1/4] Other: Made the selection inside blurred inline editable gray to better convey its state. --- .../components/editorui/editorui.css | 8 ++++++++ .../components/formheader/formheader.css | 19 ------------------- 2 files changed, 8 insertions(+), 19 deletions(-) delete mode 100644 packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/formheader/formheader.css diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css index 24b6d9e4809..7c8eabd990b 100644 --- a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css +++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css @@ -9,6 +9,10 @@ @import "../../../mixins/_focus.css"; @import "../../mixins/_button.css"; +:root { + --ck-color-editable-blur-selection: hsl(0, 0%, 77%); +} + .ck.ck-editor__editable:not(.ck-editor__nested-editable) { @mixin ck-rounded-corners; @@ -40,6 +44,10 @@ & > *:last-child { margin-bottom: var(--ck-spacing-large); } + + &:not(:focus) ::selection { + background: var(--ck-color-editable-blur-selection); + } } /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/111 */ diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/formheader/formheader.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/formheader/formheader.css deleted file mode 100644 index 11363fe7e05..00000000000 --- a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/formheader/formheader.css +++ /dev/null @@ -1,19 +0,0 @@ -/* - * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. - * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license - */ - -:root { - --ck-table-form-header-height: 38px; -} - -.ck.ck-form__header { - padding: var(--ck-spacing-small) var(--ck-spacing-large); - height: var(--ck-table-form-header-height); - line-height: var(--ck-table-form-header-height); - border-bottom: 1px solid var(--ck-color-base-border); - - & .ck-form__header__label { - font-weight: bold; - } -} From 18481d1ed3f157943ed15e6a4cfc82b56fbd9981 Mon Sep 17 00:00:00 2001 From: panr Date: Fri, 3 Apr 2020 10:32:10 +0200 Subject: [PATCH 2/4] Change target selector to .ck-blurred --- .../theme/ckeditor5-ui/components/editorui/editorui.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css index 7c8eabd990b..538383e73cb 100644 --- a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css +++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css @@ -10,7 +10,7 @@ @import "../../mixins/_button.css"; :root { - --ck-color-editable-blur-selection: hsl(0, 0%, 77%); + --ck-color-editable-blur-selection: hsl(0, 0%, 90%); } .ck.ck-editor__editable:not(.ck-editor__nested-editable) { @@ -45,7 +45,7 @@ margin-bottom: var(--ck-spacing-large); } - &:not(:focus) ::selection { + &.ck-blurred ::selection { background: var(--ck-color-editable-blur-selection); } } From f7c1d636ecf4b3ea8e6dcc1566589cc81d824338 Mon Sep 17 00:00:00 2001 From: panr Date: Tue, 7 Apr 2020 10:08:30 +0200 Subject: [PATCH 3/4] Change inactive selection color --- .../theme/ckeditor5-ui/components/editorui/editorui.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css index 538383e73cb..b48c7c63b26 100644 --- a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css +++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css @@ -10,7 +10,7 @@ @import "../../mixins/_button.css"; :root { - --ck-color-editable-blur-selection: hsl(0, 0%, 90%); + --ck-color-editable-blur-selection: hsl(0, 0%, 85%); } .ck.ck-editor__editable:not(.ck-editor__nested-editable) { From f525206442c28dd403caf0cd40f499ba77475aaf Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Thu, 9 Apr 2020 09:53:14 +0200 Subject: [PATCH 4/4] Docs: Added a link to the original issue next to the code. --- .../theme/ckeditor5-ui/components/editorui/editorui.css | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css index b48c7c63b26..b8326cfb494 100644 --- a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css +++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css @@ -45,6 +45,7 @@ margin-bottom: var(--ck-spacing-large); } + /* https://github.com/ckeditor/ckeditor5/issues/6517 */ &.ck-blurred ::selection { background: var(--ck-color-editable-blur-selection); }