CKEditor 30 content styles

This commit is contained in:
zadam 2021-10-08 18:17:17 +02:00
parent 79f54b4e97
commit a08690b123
2 changed files with 74 additions and 80 deletions

Binary file not shown.

View File

@ -4,12 +4,6 @@
display: none; display: none;
} }
/*
* CKEditor 5 (v29.2.0) content styles.
* Generated on Fri, 10 Sep 2021 10:54:09 GMT.
* For more information, check out https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/content-styles.html
*/
:root { :root {
--ck-color-image-caption-background: hsl(0, 0%, 97%); --ck-color-image-caption-background: hsl(0, 0%, 97%);
--ck-color-image-caption-text: hsl(0, 0%, 20%); --ck-color-image-caption-text: hsl(0, 0%, 20%);
@ -28,16 +22,31 @@
--ck-todo-list-checkmark-size: 16px; --ck-todo-list-checkmark-size: 16px;
} }
/* ckeditor5-image/theme/imagecaption.css */ /* ckeditor5-highlight/theme/highlight.css */
.ck-content .image > figcaption { .ck-content .marker-yellow {
display: table-caption; background-color: var(--ck-highlight-marker-yellow);
caption-side: bottom; }
word-break: break-word; /* ckeditor5-highlight/theme/highlight.css */
color: var(--ck-color-image-caption-text); .ck-content .marker-green {
background-color: var(--ck-color-image-caption-background); background-color: var(--ck-highlight-marker-green);
padding: .6em; }
font-size: .75em; /* ckeditor5-highlight/theme/highlight.css */
outline-offset: -1px; .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 */ /* ckeditor5-font/theme/fontsize.css */
.ck-content .text-tiny { .ck-content .text-tiny {
@ -116,38 +125,16 @@
.ck-content .image-inline.image-style-align-right { .ck-content .image-inline.image-style-align-right {
margin-left: var(--ck-inline-image-style-spacing); margin-left: var(--ck-inline-image-style-spacing);
} }
/* ckeditor5-highlight/theme/highlight.css */ /* ckeditor5-image/theme/imagecaption.css */
.ck-content .marker-yellow { .ck-content .image > figcaption {
background-color: var(--ck-highlight-marker-yellow); display: table-caption;
} caption-side: bottom;
/* ckeditor5-highlight/theme/highlight.css */ word-break: break-word;
.ck-content .marker-green { color: var(--ck-color-image-caption-text);
background-color: var(--ck-highlight-marker-green); background-color: var(--ck-color-image-caption-background);
} padding: .6em;
/* ckeditor5-highlight/theme/highlight.css */ font-size: .75em;
.ck-content .marker-pink { outline-offset: -1px;
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-horizontal-line/theme/horizontalline.css */
.ck-content hr {
margin: 15px 0;
height: 4px;
background: hsl(0, 0%, 87%);
border: 0;
} }
/* ckeditor5-image/theme/image.css */ /* ckeditor5-image/theme/image.css */
.ck-content .image { .ck-content .image {
@ -200,6 +187,33 @@
.ck-content .image.image_resized > figcaption { .ck-content .image.image_resized > figcaption {
display: block; display: block;
} }
/* ckeditor5-code-block/theme/codeblock.css */
.ck-content pre {
padding: 1em;
color: hsl(0, 0%, 20.8%);
background: hsla(0, 0%, 78%, 0.3);
border: 1px solid hsl(0, 0%, 77%);
border-radius: 2px;
text-align: left;
direction: ltr;
tab-size: 4;
white-space: pre-wrap;
font-style: normal;
min-width: 200px;
}
/* ckeditor5-code-block/theme/codeblock.css */
.ck-content pre code {
background: unset;
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-block-quote/theme/blockquote.css */ /* ckeditor5-block-quote/theme/blockquote.css */
.ck-content blockquote { .ck-content blockquote {
overflow: hidden; overflow: hidden;
@ -221,18 +235,6 @@
padding: .15em; padding: .15em;
border-radius: 2px; border-radius: 2px;
} }
/* ckeditor5-table/theme/tablecaption.css */
.ck-content .table > figcaption {
display: table-caption;
caption-side: top;
word-break: break-word;
text-align: center;
color: var(--ck-color-table-caption-text);
background-color: var(--ck-color-table-caption-background);
padding: .6em;
font-size: .75em;
outline-offset: -1px;
}
/* ckeditor5-table/theme/table.css */ /* ckeditor5-table/theme/table.css */
.ck-content .table { .ck-content .table {
margin: 0.9em auto; margin: 0.9em auto;
@ -266,6 +268,18 @@
.ck-content[dir="ltr"] .table th { .ck-content[dir="ltr"] .table th {
text-align: left; text-align: left;
} }
/* ckeditor5-table/theme/tablecaption.css */
.ck-content .table > figcaption {
display: table-caption;
caption-side: top;
word-break: break-word;
text-align: center;
color: var(--ck-color-table-caption-text);
background-color: var(--ck-color-table-caption-background);
padding: .6em;
font-size: .75em;
outline-offset: -1px;
}
/* ckeditor5-page-break/theme/pagebreak.css */ /* ckeditor5-page-break/theme/pagebreak.css */
.ck-content .page-break { .ck-content .page-break {
position: relative; position: relative;
@ -380,26 +394,6 @@
.ck-content span[lang] { .ck-content span[lang] {
font-style: italic; font-style: italic;
} }
/* ckeditor5-code-block/theme/codeblock.css */
.ck-content pre {
padding: 1em;
color: hsl(0, 0%, 20.8%);
background: hsla(0, 0%, 78%, 0.3);
border: 1px solid hsl(0, 0%, 77%);
border-radius: 2px;
text-align: left;
direction: ltr;
tab-size: 4;
white-space: pre-wrap;
font-style: normal;
min-width: 200px;
}
/* ckeditor5-code-block/theme/codeblock.css */
.ck-content pre code {
background: unset;
padding: 0;
border-radius: 0;
}
/* ckeditor5-mention/theme/mention.css */ /* ckeditor5-mention/theme/mention.css */
.ck-content .mention { .ck-content .mention {
background: var(--ck-color-mention-background); background: var(--ck-color-mention-background);