From 4b101baf006fe5a759644d90b41d3f6799906e38 Mon Sep 17 00:00:00 2001 From: zadam Date: Mon, 3 Aug 2020 23:36:33 +0200 Subject: [PATCH] CKEditor 21 content styles --- libraries/ckeditor/ckeditor-content.css | 285 ++++++++++++------------ 1 file changed, 143 insertions(+), 142 deletions(-) diff --git a/libraries/ckeditor/ckeditor-content.css b/libraries/ckeditor/ckeditor-content.css index b76918034..da1213b5f 100644 --- a/libraries/ckeditor/ckeditor-content.css +++ b/libraries/ckeditor/ckeditor-content.css @@ -1,10 +1,18 @@ +/* !!!!!! TRILIUM CUSTOM CHANGES !!!!!! */ + +.ck-widget__type-around { /* gets rid of triangles: https://github.com/zadam/trilium/issues/1129 */ + display: none; +} + /* - * CKEditor 5 (v19.1.1) content styles. - * Generated on Fri, 19 Jun 2020 01:26:44 GMT. + * CKEditor 5 (v21.0.0) content styles. + * Generated on Wed, 29 Jul 2020 12:14:43 GMT. * For more information, check out https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/content-styles.html */ :root { + --ck-color-mention-background: hsla(341, 100%, 30%, 0.1); + --ck-color-mention-text: hsl(341, 100%, 30%); --ck-highlight-marker-blue: hsl(201, 97%, 72%); --ck-highlight-marker-green: hsl(120, 93%, 68%); --ck-highlight-marker-pink: hsl(345, 96%, 73%); @@ -15,6 +23,81 @@ --ck-todo-list-checkmark-size: 16px; } +/* ckeditor5-image/theme/image.css */ +.ck-content .image { + display: table; + clear: both; + text-align: center; + margin: 1em auto; +} +/* ckeditor5-image/theme/image.css */ +.ck-content .image img { + display: block; + margin: 0 auto; + max-width: 100%; + min-width: 50px; +} +/* ckeditor5-image/theme/imagecaption.css */ +.ck-content .image > figcaption { + display: table-caption; + caption-side: bottom; + word-break: break-word; + color: hsl(0, 0%, 20%); + background-color: hsl(0, 0%, 97%); + padding: .6em; + font-size: .75em; + outline-offset: -1px; +} +/* ckeditor5-image/theme/imageresize.css */ +.ck-content .image.image_resized { + max-width: 100%; + display: block; + box-sizing: border-box; +} +/* ckeditor5-image/theme/imageresize.css */ +.ck-content .image.image_resized img { + width: 100%; +} +/* ckeditor5-image/theme/imageresize.css */ +.ck-content .image.image_resized > figcaption { + display: block; +} +/* ckeditor5-image/theme/imagestyle.css */ +.ck-content .image-style-side { + float: right; + margin-left: var(--ck-image-style-spacing); + max-width: 50%; +} +/* ckeditor5-image/theme/imagestyle.css */ +.ck-content .image-style-align-left { + float: left; + margin-right: var(--ck-image-style-spacing); +} +/* ckeditor5-image/theme/imagestyle.css */ +.ck-content .image-style-align-center { + margin-left: auto; + margin-right: auto; +} +/* ckeditor5-image/theme/imagestyle.css */ +.ck-content .image-style-align-right { + float: right; + margin-left: var(--ck-image-style-spacing); +} +/* ckeditor5-block-quote/theme/blockquote.css */ +.ck-content blockquote { + overflow: hidden; + padding-right: 1.5em; + padding-left: 1.5em; + margin-left: 0; + margin-right: 0; + font-style: italic; + border-left: solid 5px hsl(0, 0%, 80%); +} +/* ckeditor5-block-quote/theme/blockquote.css */ +.ck-content[dir="rtl"] blockquote { + border-left: 0; + border-right: solid 5px hsl(0, 0%, 80%); +} /* ckeditor5-list/theme/todolist.css */ .ck-content .todo-list { list-style: none; @@ -82,12 +165,54 @@ .ck-content .todo-list .todo-list__label .todo-list__label__description { vertical-align: middle; } -/* ckeditor5-media-embed/theme/mediaembed.css */ -.ck-content .media { - clear: both; - margin: 1em 0; - display: block; - min-width: 15em; +/* ckeditor5-horizontal-line/theme/horizontalline.css */ +.ck-content hr { + margin: 15px 0; + height: 4px; + background: hsl(0, 0%, 87%); + border: 0; +} +/* ckeditor5-highlight/theme/highlight.css */ +.ck-content .marker-yellow { + background-color: var(--ck-highlight-marker-yellow); +} +/* ckeditor5-highlight/theme/highlight.css */ +.ck-content .marker-green { + background-color: var(--ck-highlight-marker-green); +} +/* ckeditor5-highlight/theme/highlight.css */ +.ck-content .marker-pink { + background-color: var(--ck-highlight-marker-pink); +} +/* ckeditor5-highlight/theme/highlight.css */ +.ck-content .marker-blue { + background-color: var(--ck-highlight-marker-blue); +} +/* ckeditor5-highlight/theme/highlight.css */ +.ck-content .pen-red { + color: var(--ck-highlight-pen-red); + background-color: transparent; +} +/* ckeditor5-highlight/theme/highlight.css */ +.ck-content .pen-green { + color: var(--ck-highlight-pen-green); + background-color: transparent; +} +/* ckeditor5-font/theme/fontsize.css */ +.ck-content .text-tiny { + font-size: .7em; +} +/* ckeditor5-font/theme/fontsize.css */ +.ck-content .text-small { + font-size: .85em; +} +/* ckeditor5-font/theme/fontsize.css */ +.ck-content .text-big { + font-size: 1.4em; +} +/* ckeditor5-font/theme/fontsize.css */ +.ck-content .text-huge { + font-size: 1.8em; } /* ckeditor5-basic-styles/theme/code.css */ .ck-content code { @@ -95,21 +220,6 @@ padding: .15em; border-radius: 2px; } -/* ckeditor5-block-quote/theme/blockquote.css */ -.ck-content blockquote { - overflow: hidden; - padding-right: 1.5em; - padding-left: 1.5em; - margin-left: 0; - margin-right: 0; - font-style: italic; - border-left: solid 5px hsl(0, 0%, 80%); -} -/* ckeditor5-block-quote/theme/blockquote.css */ -.ck-content[dir="rtl"] blockquote { - border-left: 0; - border-right: solid 5px hsl(0, 0%, 80%); -} /* ckeditor5-table/theme/table.css */ .ck-content .table { margin: 1em auto; @@ -143,98 +253,6 @@ .ck-content[dir="ltr"] .table th { text-align: left; } -/* ckeditor5-image/theme/imageresize.css */ -.ck-content .image.image_resized { - max-width: 100%; - display: block; - box-sizing: border-box; -} -/* ckeditor5-image/theme/imageresize.css */ -.ck-content .image.image_resized img { - width: 100%; -} -/* ckeditor5-image/theme/imageresize.css */ -.ck-content .image.image_resized > figcaption { - display: block; -} -/* ckeditor5-image/theme/image.css */ -.ck-content .image { - display: table; - clear: both; - text-align: center; - margin: 1em auto; -} -/* ckeditor5-image/theme/image.css */ -.ck-content .image img { - display: block; - margin: 0 auto; - max-width: 100%; - min-width: 50px; -} -/* ckeditor5-image/theme/imagecaption.css */ -.ck-content .image > figcaption { - display: table-caption; - caption-side: bottom; - word-break: break-word; - color: hsl(0, 0%, 20%); - background-color: hsl(0, 0%, 97%); - padding: .6em; - font-size: .75em; - outline-offset: -1px; -} -/* ckeditor5-highlight/theme/highlight.css */ -.ck-content .marker-yellow { - background-color: var(--ck-highlight-marker-yellow); -} -/* ckeditor5-highlight/theme/highlight.css */ -.ck-content .marker-green { - background-color: var(--ck-highlight-marker-green); -} -/* ckeditor5-highlight/theme/highlight.css */ -.ck-content .marker-pink { - background-color: var(--ck-highlight-marker-pink); -} -/* ckeditor5-highlight/theme/highlight.css */ -.ck-content .marker-blue { - background-color: var(--ck-highlight-marker-blue); -} -/* ckeditor5-highlight/theme/highlight.css */ -.ck-content .pen-red { - color: var(--ck-highlight-pen-red); - background-color: transparent; -} -/* ckeditor5-highlight/theme/highlight.css */ -.ck-content .pen-green { - color: var(--ck-highlight-pen-green); - background-color: transparent; -} -/* ckeditor5-image/theme/imagestyle.css */ -.ck-content .image-style-side, -.ck-content .image-style-align-left, -.ck-content .image-style-align-center, -.ck-content .image-style-align-right { - max-width: 50%; -} -/* ckeditor5-image/theme/imagestyle.css */ -.ck-content .image-style-side { - float: right; - margin-left: var(--ck-image-style-spacing); -} -/* ckeditor5-image/theme/imagestyle.css */ -.ck-content .image-style-align-left { - float: left; - margin-right: var(--ck-image-style-spacing); -} -/* ckeditor5-image/theme/imagestyle.css */ -.ck-content .image-style-align-center { - margin-left: auto; - margin-right: auto; -} -/* ckeditor5-image/theme/imagestyle.css */ -.ck-content .image-style-align-right { - float: right; - margin-left: var(--ck-image-style-spacing); -} /* ckeditor5-page-break/theme/pagebreak.css */ .ck-content .page-break { position: relative; @@ -271,21 +289,12 @@ -ms-user-select: none; user-select: none; } -/* ckeditor5-font/theme/fontsize.css */ -.ck-content .text-tiny { - font-size: .7em; -} -/* ckeditor5-font/theme/fontsize.css */ -.ck-content .text-small { - font-size: .85em; -} -/* ckeditor5-font/theme/fontsize.css */ -.ck-content .text-big { - font-size: 1.4em; -} -/* ckeditor5-font/theme/fontsize.css */ -.ck-content .text-huge { - font-size: 1.8em; +/* ckeditor5-media-embed/theme/mediaembed.css */ +.ck-content .media { + clear: both; + margin: 1em 0; + display: block; + min-width: 15em; } /* ckeditor5-code-block/theme/codeblock.css */ .ck-content pre { @@ -307,12 +316,10 @@ padding: 0; border-radius: 0; } -/* ckeditor5-horizontal-line/theme/horizontalline.css */ -.ck-content hr { - margin: 15px 0; - height: 4px; - background: hsl(0, 0%, 87%); - border: 0; +/* ckeditor5-mention/theme/mention.css */ +.ck-content .mention { + background: var(--ck-color-mention-background); + color: var(--ck-color-mention-text); } @media print { /* ckeditor5-page-break/theme/pagebreak.css */ @@ -324,9 +331,3 @@ display: none; } } - -/* !!!!!! TRILIUM CUSTOM CHANGES !!!!!! */ - -.ck-widget__type-around { /* gets rid of triangles: https://github.com/zadam/trilium/issues/1129 */ - display: none; -}