/* ============================================= */ /* Tailwind CSS Reset Overrides for CKEditor 5 */ /* ============================================= */ /* * Tailwind v4 @layer base sets on *: * box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; * * CKEditor's own ck-reset_all also sets border: 0; margin: 0; padding: 0 * on its descendants, then layers specific styles on top. * * Since CKEditor CSS is un-layered and loads after Tailwind's @layer base, * CKEditor's specific rules (.ck.ck-input, .ck.ck-dropdown__panel, etc.) * should win by specificity. The problem is Tailwind's NON-layered rules * in @layer components and @layer utilities that may conflict. */ /* Tailwind base sets "svg { display: block }" which can break inline CKEditor icons */ .ck svg { display: inline; } /* Tailwind base sets "img, video { max-width: 100%; height: auto }" CKEditor uses SVGs for icons with specific sizes */ .ck svg.ck-icon__selected-indicator, .ck .ck-icon svg { width: var(--ck-icon-size); height: var(--ck-icon-size); } /* Ensure CKEditor input elements are visible and properly styled. Tailwind base sets transparent background and border-radius: 0 on inputs. CKEditor's .ck.ck-input has its own styles but we add !important to override any Tailwind utility classes that may interfere. */ .ck.ck-input, .ck .ck-input, .ck-body-wrapper .ck-input { position: static !important; inset: auto !important; appearance: auto !important; opacity: 1 !important; } /* Ensure CKEditor labeled field inputs are visible */ .ck.ck-labeled-field-view .ck-input { display: block !important; position: static !important; width: 100% !important; } /* Ensure balloon panels and dropdowns are positioned and visible */ .ck.ck-balloon-panel { z-index: var(--ck-z-modal, 999) !important; } .ck.ck-balloon-panel.ck-balloon-panel_visible { display: block !important; } /* The ck-body-wrapper is appended to by CKEditor for floating UI elements (balloon panels, dropdowns, tooltips) */ .ck-body-wrapper { z-index: 9999; } .ck-body-wrapper .ck.ck-balloon-panel { z-index: 9999 !important; } /* Ensure dropdown panels are properly positioned */ .ck.ck-dropdown .ck-dropdown__panel { z-index: var(--ck-z-modal, 999) !important; } /* Tailwind sets list-style: none on ul, ol, menu. CKEditor handles this itself, no override needed. */ /* Tailwind sets "a { color: inherit; text-decoration: inherit }" CKEditor link form elements need their styling preserved */ .ck .ck-link-form, .ck .ck-link-actions { display: flex; } /* Fix: Tailwind's focus-visible style may override CKEditor focus rings */ .ck *:focus-visible { outline: none !important; transition-property: all !important; } /* Tailwind base: "button, [type=button], [type=reset], [type=submit] { appearance: button }" This is fine for CKEditor buttons */ /* Ensure CKEditor text inputs show cursor correctly */ .ck input[type="text"], .ck-body-wrapper input[type="text"], .ck .ck-input-text, .ck-body-wrapper .ck-input-text { cursor: text !important; position: static !important; inset: auto !important; } /* Source: ckeditor5-basic-styles/theme/code.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck-content code { background-color: hsla(0, 0%, 78%, 0.3); padding: .15em; border-radius: 2px; } .ck.ck-editor__editable .ck-code_selected { background-color: hsla(0, 0%, 78%, 0.5); } /* Source: ckeditor5-block-quote/theme/blockquote.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck-content blockquote { /* See #12 */ overflow: hidden; /* https://github.com/ckeditor/ckeditor5-block-quote/issues/15 */ 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%); } .ck-content[dir="rtl"] blockquote { border-left: 0; border-right: solid 5px hsl(0, 0%, 80%); } /* Source: ckeditor5-clipboard/theme/clipboard.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Vertical drop target (in text). */ .ck.ck-editor__editable .ck.ck-clipboard-drop-target-position { display: inline; position: relative; pointer-events: none; } .ck.ck-editor__editable .ck.ck-clipboard-drop-target-position span { position: absolute; width: 0; } /* * Styles of the widget being dragged (its preview). */ .ck.ck-editor__editable .ck-widget:-webkit-drag > .ck-widget__selection-handle { display: none; } .ck.ck-editor__editable .ck-widget:-webkit-drag > .ck-widget__type-around { display: none; } /* Source: ckeditor5-code-block/theme/codeblock.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .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; /* Code block are language direction–agnostic. */ text-align: left; direction: ltr; tab-size: 4; white-space: pre-wrap; /* Don't inherit the style, e.g. when in a block quote. */ font-style: normal; /* Don't let the code be squashed e.g. when in a table cell. */ min-width: 200px; } .ck-content pre code { background: unset; padding: 0; border-radius: 0; } .ck.ck-editor__editable pre { position: relative; } .ck.ck-editor__editable pre[data-language]::after { content: attr(data-language); position: absolute; } /* Source: ckeditor5-collaboration-core/theme/integrations/codeblock.css */ .ck-content pre > code.ck-suggestion-marker-formatBlock { display: block; box-shadow: -7px 0 0 0 hsl(0deg 0% 93%), -10px 0 0 0 var(--ck-color-suggestion-marker-format-border); } .ck-content pre > code.ck-suggestion-marker-formatBlock.ck-suggestion-marker--active { box-shadow: -5px 0 0 0 hsl(0deg 0% 93%), -8px 0 0 0 var(--ck-color-suggestion-marker-format-border-active); } /* Source: ckeditor5-collaboration-core/theme/integrations/horizontalline.css */ .ck-content .ck-suggestion-marker-deletion.ck-widget.ck-horizontal-line { background-color: var(--ck-color-suggestion-widget-deletion-background); } .ck-content .ck-suggestion-marker-deletion.ck-widget.ck-horizontal-line.ck-suggestion-marker--active { background-color: var(--ck-color-suggestion-widget-deletion-background-active); } .ck-content .ck-suggestion-marker-insertion.ck-widget.ck-horizontal-line { background-color: var(--ck-color-suggestion-widget-insertion-background); } .ck-content .ck-suggestion-marker-insertion.ck-widget.ck-horizontal-line.ck-suggestion-marker--active { background-color: var(--ck-color-suggestion-widget-insertion-background-active); } /* Source: ckeditor5-collaboration-core/theme/integrations/image.css */ .ck-content .ck-suggestion-marker-deletion.ck-widget.image { background-color: var(--ck-color-suggestion-widget-deletion-background); } .ck-content .ck-suggestion-marker-deletion.ck-widget.image img { opacity: 0.6; } .ck-content .ck-suggestion-marker-deletion.ck-widget.image figcaption { background-color: var(--ck-color-suggestion-widget-deletion-background); } .ck-content .ck-suggestion-marker-deletion.ck-widget.image.ck-suggestion-marker--active { background-color: var(--ck-color-suggestion-widget-deletion-background-active); } .ck-content .ck-suggestion-marker-deletion.ck-widget.image.ck-suggestion-marker--active figcaption { background-color: var(--ck-color-suggestion-widget-deletion-background-active); } .ck-content .ck-suggestion-marker-insertion.ck-widget.image { background-color: var(--ck-color-suggestion-widget-insertion-background); } .ck-content .ck-suggestion-marker-insertion.ck-widget.image figcaption { background-color: var(--ck-color-suggestion-widget-insertion-background); } .ck-content .ck-suggestion-marker-insertion.ck-widget.image.ck-suggestion-marker--active { background-color: var(--ck-color-suggestion-widget-insertion-background-active); } .ck-content .ck-suggestion-marker-insertion.ck-widget.image.ck-suggestion-marker--active figcaption { background-color: var(--ck-color-suggestion-widget-insertion-background-active); } .ck-content .ck-widget.image > figcaption.ck-suggestion-marker-deletion { background-color: var(--ck-color-suggestion-widget-deletion-background); border: none; } .ck-content .ck-widget.image > figcaption.ck-suggestion-marker-deletion.ck-suggestion-marker--active { background-color: var(--ck-color-suggestion-widget-deletion-background-active); } .ck-content .ck-widget.image > figcaption.ck-suggestion-marker-insertion { background-color: var(--ck-color-suggestion-widget-insertion-background); border: none; } .ck-content .ck-widget.image > figcaption.ck-suggestion-marker-insertion.ck-suggestion-marker--active { background-color: var(--ck-color-suggestion-widget-insertion-background-active); } /* Source: ckeditor5-collaboration-core/theme/integrations/mediaembed.css */ .ck-content .ck-suggestion-marker-deletion.ck-widget.media { background-color: var(--ck-color-suggestion-widget-deletion-background); } .ck-content .ck-suggestion-marker-deletion.ck-widget.media .ck-media__wrapper { opacity: 0.6; } .ck-content .ck-suggestion-marker-deletion.ck-widget.media.ck-suggestion-marker--active { background-color: var(--ck-color-suggestion-widget-deletion-background-active); } .ck-content .ck-suggestion-marker-insertion.ck-widget.media { background-color: var(--ck-color-suggestion-widget-insertion-background); } .ck-content .ck-suggestion-marker-insertion.ck-widget.media.ck-suggestion-marker--active { background-color: var(--ck-color-suggestion-widget-insertion-background-active); } /* Source: ckeditor5-collaboration-core/theme/integrations/pagebreak.css */ .ck-content .ck-suggestion-marker-deletion.ck-widget.page-break { background-color: var(--ck-color-suggestion-widget-deletion-background); } .ck-content .ck-suggestion-marker-deletion.ck-widget.page-break.ck-suggestion-marker--active { background-color: var(--ck-color-suggestion-widget-deletion-background-active); } .ck-content .ck-suggestion-marker-insertion.ck-widget.page-break { background-color: var(--ck-color-suggestion-widget-insertion-background); } .ck-content .ck-suggestion-marker-insertion.ck-widget.page-break.ck-suggestion-marker--active { background-color: var(--ck-color-suggestion-widget-insertion-background-active); } /* Source: ckeditor5-collaboration-core/theme/integrations/table.css */ :root { --ck-color-suggestion-widget-th-insertion-background: hsla(128, 71%, 65%, .12); --ck-color-suggestion-widget-th-insertion-background-active: hsla(128, 71%, 50%, .14); --ck-color-suggestion-widget-th-deletion-background: hsla(345, 71%, 65%, .14); --ck-color-suggestion-widget-th-deletion-background-active: hsla(345, 71%, 45%, .16); } .ck-content figure.table .ck-suggestion-marker-formatBlock { box-shadow: -3px 0 0 0 var(--ck-color-suggestion-marker-format-border); } .ck-content figure.table .ck-suggestion-marker-formatBlock.ck-suggestion-marker--active { box-shadow: -3px 0 0 0 var(--ck-color-suggestion-marker-format-border-active); } .ck-content .ck-suggestion-marker-insertion.table { border-color: var(--ck-color-suggestion-marker-insertion-border); } .ck-content .ck-suggestion-marker-insertion.table > figcaption { background-color: var(--ck-color-suggestion-widget-insertion-background); } .ck-content .ck-suggestion-marker-insertion.table > table > tbody > tr > th { background-color: var(--ck-color-suggestion-widget-th-insertion-background); border-color: var(--ck-color-suggestion-marker-insertion-border); } .ck-content .ck-suggestion-marker-insertion.table > table > thead > tr > th { background-color: var(--ck-color-suggestion-widget-th-insertion-background); border-color: var(--ck-color-suggestion-marker-insertion-border); } .ck-content .ck-suggestion-marker-insertion.table > table > tbody > tr > td { background-color: var(--ck-color-suggestion-widget-insertion-background); border-color: var(--ck-color-suggestion-marker-insertion-border); } .ck-content .ck-suggestion-marker-insertion.ck-suggestion-marker--active.table { border-color: var(--ck-color-suggestion-marker-insertion-border-active); } .ck-content .ck-suggestion-marker-insertion.ck-suggestion-marker--active.table > figcaption { background-color: var(--ck-color-suggestion-widget-insertion-background-active); } .ck-content .ck-suggestion-marker-insertion.ck-suggestion-marker--active.table > table > tbody > tr > th { background-color: var(--ck-color-suggestion-widget-th-insertion-background-active); border-color: var(--ck-color-suggestion-marker-insertion-border-active); } .ck-content .ck-suggestion-marker-insertion.ck-suggestion-marker--active.table > table > thead > tr > th { background-color: var(--ck-color-suggestion-widget-th-insertion-background-active); border-color: var(--ck-color-suggestion-marker-insertion-border-active); } .ck-content .ck-suggestion-marker-insertion.ck-suggestion-marker--active.table > table > tbody > tr > td { background-color: var(--ck-color-suggestion-widget-insertion-background-active); border-color: var(--ck-color-suggestion-marker-insertion-border-active); } .ck-content .ck-suggestion-marker-deletion.ck-widget.table { border-color: var(--ck-color-suggestion-marker-deletion-border); } .ck-content .ck-suggestion-marker-deletion.ck-widget.table > figcaption { background-color: var(--ck-color-suggestion-widget-deletion-background); } .ck-content .ck-suggestion-marker-deletion.ck-widget.table > table > tbody > tr > th { background-color: var(--ck-color-suggestion-widget-th-deletion-background); border-color: var(--ck-color-suggestion-marker-deletion-border); text-decoration: none; } .ck-content .ck-suggestion-marker-deletion.ck-widget.table > table > thead > tr > th { background-color: var(--ck-color-suggestion-widget-th-deletion-background); border-color: var(--ck-color-suggestion-marker-deletion-border); text-decoration: none; } .ck-content .ck-suggestion-marker-deletion.ck-widget.table > table > tbody > tr > td { background-color: var(--ck-color-suggestion-widget-deletion-background); border-color: var(--ck-color-suggestion-marker-deletion-border); text-decoration: none; } .ck-content .ck-suggestion-marker-deletion.ck-suggestion-marker--active.table { border-color: var(--ck-color-suggestion-marker-deletion-border-active); } .ck-content .ck-suggestion-marker-deletion.ck-suggestion-marker--active.table > figcaption { background-color: var(--ck-color-suggestion-widget-deletion-background-active); } .ck-content .ck-suggestion-marker-deletion.ck-suggestion-marker--active.table > table > tbody > tr > th { background-color: var(--ck-color-suggestion-widget-th-deletion-background-active); border-color: var(--ck-color-suggestion-marker-deletion-border-active); } .ck-content .ck-suggestion-marker-deletion.ck-suggestion-marker--active.table > table > thead > tr > th { background-color: var(--ck-color-suggestion-widget-th-deletion-background-active); border-color: var(--ck-color-suggestion-marker-deletion-border-active); } .ck-content .ck-suggestion-marker-deletion.ck-suggestion-marker--active.table > table > tbody > tr > td { background-color: var(--ck-color-suggestion-widget-deletion-background-active); border-color: var(--ck-color-suggestion-marker-deletion-border-active); } .ck-content .ck-widget.table > figcaption.ck-suggestion-marker-deletion { background-color: var(--ck-color-suggestion-widget-deletion-background); border: none; } .ck-content .ck-widget.table > figcaption.ck-suggestion-marker-deletion.ck-suggestion-marker--active { background-color: var(--ck-color-suggestion-widget-deletion-background-active); } .ck-content .ck-widget.table > figcaption.ck-suggestion-marker-insertion { background-color: var(--ck-color-suggestion-widget-insertion-background); border: none; } .ck-content .ck-widget.table > figcaption.ck-suggestion-marker-insertion.ck-suggestion-marker--active { background-color: var(--ck-color-suggestion-widget-insertion-background-active); } /* * We need here at least 022 CSS Specificity because of table styles like `.ck-content .table table th { background: ... } * See: https://github.com/ckeditor/ckeditor5-table/blob/master/theme/table.css#L29 */ .ck-content .table th.ck-suggestion-marker-insertion { background-color: var(--ck-color-suggestion-widget-th-insertion-background); } .ck-content .table th.ck-suggestion-marker-insertion.ck-suggestion-marker--active { background-color: var(--ck-color-suggestion-widget-th-insertion-background-active); } .ck-content .table th.ck-suggestion-marker-deletion { background-color: var(--ck-color-suggestion-widget-th-deletion-background); text-decoration: none; } .ck-content .table th.ck-suggestion-marker-deletion.ck-suggestion-marker--active { background-color: var(--ck-color-suggestion-widget-th-deletion-background-active); } .ck-content .table td.ck-suggestion-marker-insertion { background-color: var(--ck-color-suggestion-widget-insertion-background); } .ck-content .table td.ck-suggestion-marker-insertion.ck-suggestion-marker--active { background-color: var(--ck-color-suggestion-widget-insertion-background-active); } .ck-content .table td.ck-suggestion-marker-deletion { background-color: var(--ck-color-suggestion-widget-deletion-background); text-decoration: none; } .ck-content .table td.ck-suggestion-marker-deletion.ck-suggestion-marker--active { background-color: var(--ck-color-suggestion-widget-deletion-background-active); } .ck-content .table th.ck-suggestion-marker-formatInline, .ck-content .table td.ck-suggestion-marker-formatInline, .ck-content .table th.ck-suggestion-marker-formatBlock, .ck-content .table td.ck-suggestion-marker-formatBlock { background-color: var(--ck-color-suggestion-widget-format-background); box-shadow: none; } .ck-content .table th.ck-suggestion-marker-formatInline.ck-suggestion-marker--active, .ck-content .table td.ck-suggestion-marker-formatInline.ck-suggestion-marker--active, .ck-content .table th.ck-suggestion-marker-formatBlock.ck-suggestion-marker--active, .ck-content .table td.ck-suggestion-marker-formatBlock.ck-suggestion-marker--active { background-color: var(--ck-color-suggestion-widget-format-background-active); box-shadow: none; } /* Source: ckeditor5-collaboration-core/theme/suggestion.css */ :root { --ck-color-comment-box-border: hsl(55, 98%, 48%); --ck-color-suggestion-box-deletion-border: hsl(345, 62%, 60%); --ck-color-suggestion-box-insertion-border: hsl(128, 62%, 60%); --ck-color-suggestion-box-format-border: transparent; } .ck .ck-suggestion { border-top-left-radius: var(--ck-border-radius); } .ck .ck-annotation { border-left: 3px solid transparent; } /* See: #3683. * Inline Suggestion annotations that can't be commented on contains a scrollbar by default */ .ck .ck-suggestion--disabled-comments .ck-annotation { min-height: 80px; } /* See: #2459. With track-changes feature enabled, we need to distinguish various types of annotations (comments and suggestions). */ .ck .ck-comment, .ck .ck-thread__comment-count, .ck .ck-comment__input-container { border-left: 3px solid var(--ck-color-comment-box-border); } .ck .ck-suggestion-insertion .ck-suggestion { border-left-color: var(--ck-color-suggestion-box-insertion-border); } .ck .ck-suggestion-deletion .ck-suggestion { border-left-color: var(--ck-color-suggestion-box-deletion-border); } .ck .ck-suggestion-replace .ck-suggestion { border-left-color: var(--ck-color-suggestion-box-insertion-border); } .ck .ck-suggestion-format .ck-suggestion { border-left-color: var(--ck-color-suggestion-box-format-border); } .ck .ck-suggestion-wrapper { outline: 0; } .ck .ck-suggestion-type { font-weight: bold; } .ck .ck-suggestion-color { display: inline-block; width: 14px; height: 14px; border-radius: 14px; vertical-align: text-bottom; margin: 0 5px; box-shadow: 0 0 0 1px #444; } /* Comments inside suggestion. */ /* Handle comments inside suggestion keep same border-color. */ .ck .ck-suggestion-insertion .ck-comment, .ck .ck-suggestion-insertion .ck-thread__comment-count, .ck .ck-suggestion-insertion .ck-comment__input-container, .ck .ck-suggestion-replace .ck-comment, .ck .ck-suggestion-replace .ck-thread__comment-count, .ck .ck-suggestion-replace .ck-comment__input-container { border-left-color: var(--ck-color-suggestion-box-insertion-border); } .ck .ck-suggestion-deletion .ck-comment, .ck .ck-suggestion-deletion .ck-thread__comment-count, .ck .ck-suggestion-deletion .ck-comment__input-container { border-left-color: var(--ck-color-suggestion-box-deletion-border); } .ck .ck-suggestion-format .ck-comment, .ck .ck-suggestion-format .ck-thread__comment-count, .ck .ck-suggestion-format .ck-comment__input-container { border-left-color: var(--ck-color-suggestion-box-format-border); } /* Source: ckeditor5-collaboration-core/theme/suggestionmarker.css */ /* * What you're currently looking at is the source code of a legally protected, proprietary software. * Letters is licensed under a commercial license and protected by copyright law. Where not otherwise indicated, * all Letters content is authored by CKSource engineers and consists of CKSource-owned intellectual property. * * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved. */ :root { --ck-color-suggestion-marker-insertion-border: hsla(128, 71%, 40%, .35); --ck-color-suggestion-marker-insertion-border-active: hsla(128, 71%, 25%, .5); --ck-color-suggestion-marker-insertion-background: hsla(128, 71%, 65%, .35); --ck-color-suggestion-marker-insertion-background-active: hsla(128, 71%, 50%, .5); --ck-color-suggestion-marker-deletion-border: hsla(345, 71%, 40%, .35); --ck-color-suggestion-marker-deletion-border-active: hsla(345, 71%, 25%, .5); --ck-color-suggestion-marker-deletion-background: hsla(345, 71%, 65%, .35); --ck-color-suggestion-marker-deletion-background-active: hsla(345, 71%, 50%, .5); --ck-color-suggestion-marker-deletion-stroke: hsla(345, 71%, 20%, .5); --ck-color-suggestion-marker-format-border: transparent; --ck-color-suggestion-marker-format-border-active: transparent; --ck-color-suggestion-widget-insertion-background: hsla(128, 71%, 65%, .05); --ck-color-suggestion-widget-insertion-background-active: hsla(128, 71%, 50%, .07); --ck-color-suggestion-widget-deletion-background: hsla(345, 71%, 65%, .05); --ck-color-suggestion-widget-deletion-background-active: hsla(345, 71%, 45%, .07); --ck-color-suggestion-widget-format-background: hsla(191, 90%, 40%, .09); --ck-color-suggestion-widget-format-background-active: hsla(191, 90%, 40%, .16); } .ck-content .ck-suggestion-marker-insertion { border-top: 3px solid var(--ck-color-suggestion-marker-insertion-border); border-bottom: 3px solid var(--ck-color-suggestion-marker-insertion-border); background: var(--ck-color-suggestion-marker-insertion-background); } .ck-content .ck-suggestion-marker-insertion.ck-suggestion-marker--active { border-color: var(--ck-color-suggestion-marker-insertion-border-active); background: var(--ck-color-suggestion-marker-insertion-background-active); } /* Disable background of marker inside widget. */ .ck-content .ck-suggestion-marker-insertion.ck-widget { background: none; text-decoration: none; border: 3px solid var(--ck-color-suggestion-marker-insertion-border); } .ck-content .ck-suggestion-marker-insertion.ck-widget.ck-suggestion-marker--active { border-color: var(--ck-color-suggestion-marker-insertion-border-active); } .ck-content .ck-suggestion-marker-deletion { border-top: 3px solid var(--ck-color-suggestion-marker-deletion-border); border-bottom: 3px solid var(--ck-color-suggestion-marker-deletion-border); /* #2810. Safari doesn't support combined text-decoration values. */ text-decoration: line-through; text-decoration-color: var(--ck-color-suggestion-marker-deletion-stroke); text-decoration-thickness: 3px; background: var(--ck-color-suggestion-marker-deletion-background); } .ck-content .ck-suggestion-marker-deletion.ck-suggestion-marker--active { border-color: var(--ck-color-suggestion-marker-deletion-border-active); background: var(--ck-color-suggestion-marker-deletion-background-active); } /* Disable background of marker inside widget. */ .ck-content .ck-suggestion-marker-deletion.ck-widget { background: none; text-decoration: none; border: 3px solid var(--ck-color-suggestion-marker-deletion-border); } .ck-content .ck-suggestion-marker-deletion.ck-widget.ck-suggestion-marker--active { border-color: var(--ck-color-suggestion-marker-deletion-border-active); } .ck-content .ck-suggestion-marker-merge::after { border-top: 3px solid var(--ck-color-suggestion-marker-deletion-border); border-bottom: 3px solid var(--ck-color-suggestion-marker-deletion-border); /* #2810. Safari doesn't support combined text-decoration values. */ text-decoration: line-through; text-decoration-color: var(--ck-color-suggestion-marker-deletion-stroke); background: var(--ck-color-suggestion-marker-deletion-background); color: var(--ck-color-suggestion-marker-deletion-stroke); content: '¶'; } .ck-content .ck-suggestion-marker-merge.ck-suggestion-marker--active::after { border-color: var(--ck-color-suggestion-marker-deletion-border-active); background: var(--ck-color-suggestion-marker-deletion-background-active); } .ck-content .ck-suggestion-marker-split::after { border-top: 3px solid var(--ck-color-suggestion-marker-insertion-border); border-bottom: 3px solid var(--ck-color-suggestion-marker-insertion-border); background: var(--ck-color-suggestion-marker-insertion-background); color: var(--ck-color-suggestion-marker-insertion-border); content: '¶'; } .ck-content .ck-suggestion-marker-split.ck-suggestion-marker--active::after { border-color: var(--ck-color-suggestion-marker-insertion-border-active); background: var(--ck-color-suggestion-marker-insertion-background-active); } .ck-content .ck-suggestion-marker-formatInline { border-top: 3px solid var(--ck-color-suggestion-marker-format-border); border-bottom: 3px solid var(--ck-color-suggestion-marker-format-border); } .ck-content .ck-suggestion-marker-formatInline.ck-suggestion-marker--active { border-color: var(--ck-color-suggestion-marker-format-border-active); } .ck-content .ck-suggestion-marker-formatInline.ck-widget { background: none; border: 3px solid var(--ck-color-suggestion-marker-format-border); } .ck-content .ck-suggestion-marker-formatInline.ck-widget.ck-suggestion-marker--active { border-color: var(--ck-color-suggestion-marker-format-border-active); } /* This is a tricky case. * We can't use `border-left` because sticky marker to the element looks kinda ugly. * We can't use `::before` pseudoelement because it requires `position: relative` of parent, which breaks side-image. * We can't use `outline` because it's impossible to display only left side of outline. * So... we need to use power of CSS hacks <3 and use doubled box-shadow. */ .ck-content .ck-suggestion-marker-formatBlock { border: 0; background: none; box-shadow: -7px 0 0 0 var(--ck-color-base-background), -10px 0 0 0 var(--ck-color-suggestion-marker-format-border); } .ck-content .ck-suggestion-marker-formatBlock.ck-suggestion-marker--active { box-shadow: -5px 0 0 0 var(--ck-color-base-background), -8px 0 0 0 var(--ck-color-suggestion-marker-format-border-active); } .ck-content ul .ck-suggestion-marker-formatBlock, .ck-content ol .ck-suggestion-marker-formatBlock { box-shadow: -2px 0 0 0 var(--ck-color-base-background), -5px 0 0 0 var(--ck-color-suggestion-marker-format-border); } .ck-content ul .ck-suggestion-marker-formatBlock.ck-suggestion-marker--active, .ck-content ol .ck-suggestion-marker-formatBlock.ck-suggestion-marker--active { box-shadow: -2px 0 0 0 var(--ck-color-base-background), -5px 0 0 0 var(--ck-color-suggestion-marker-format-border-active); } /* Source: ckeditor5-collaboration-core/theme/usercolormixin.css */ /* Source: ckeditor5-collaboration-core/theme/usercolors.css */ /* * What you're currently looking at is the source code of a legally protected, proprietary software. * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated, * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property. * * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved. */ :root { --ck-user-colors--0: hsla(235, 73%, 67%, 1); --ck-user-colors--0-alpha: hsla(235, 73%, 67%, 0.15); --ck-user-colors--1: hsla(173, 100%, 24%, 1); --ck-user-colors--1-alpha: hsla(173, 100%, 24%, 0.15); --ck-user-colors--2: hsla(0, 46%, 50%, 1); --ck-user-colors--2-alpha: hsla(0, 46%, 50%, 0.15); --ck-user-colors--3: hsla(256, 54%, 45%, 1); --ck-user-colors--3-alpha: hsla(256, 54%, 45%, 0.15); --ck-user-colors--4: hsla(95, 50%, 36%, 1); --ck-user-colors--4-alpha: hsla(95, 50%, 36%, 0.15); --ck-user-colors--5: hsla(336, 78%, 43%, 1); --ck-user-colors--5-alpha: hsla(336, 78%, 43%, 0.15); --ck-user-colors--6: hsla(0, 80%, 59%, 1); --ck-user-colors--6-alpha: hsla(0, 80%, 59%, 0.15); --ck-user-colors--7: hsla(184, 90%, 43%, 1); --ck-user-colors--7-alpha: hsla(184, 90%, 43%, 0.15); --ck-user-dot-size: 6px; } /* We are using mixins here because of lack of PostCSS loop plugin. */ .ck .ck-user__color--0 { color: var(--ck-user-colors--0); } .ck .ck-user__bg-color--0 { background-color: var(--ck-user-colors--0); } .ck .ck-user__selection--0 { background-color: var(--ck-user-colors--0-alpha); } .ck .ck-user__selection--0.ck-widget { background-color: transparent; border: 3px solid var(--ck-user-colors--0); } .ck .ck-user__marker--0, .ck .ck-user__marker--0:after, .ck .ck-user__marker--0 .ck-user__marker-dot { background-color: var(--ck-user-colors--0); } .ck .ck-user__marker--0 .ck-user__marker-line { border: 1px solid var(--ck-user-colors--0); } .ck .ck-user__color--1 { color: var(--ck-user-colors--1); } .ck .ck-user__bg-color--1 { background-color: var(--ck-user-colors--1); } .ck .ck-user__selection--1 { background-color: var(--ck-user-colors--1-alpha); } .ck .ck-user__selection--1.ck-widget { background-color: transparent; border: 3px solid var(--ck-user-colors--1); } .ck .ck-user__marker--1, .ck .ck-user__marker--1:after, .ck .ck-user__marker--1 .ck-user__marker-dot { background-color: var(--ck-user-colors--1); } .ck .ck-user__marker--1 .ck-user__marker-line { border: 1px solid var(--ck-user-colors--1); } .ck .ck-user__color--2 { color: var(--ck-user-colors--2); } .ck .ck-user__bg-color--2 { background-color: var(--ck-user-colors--2); } .ck .ck-user__selection--2 { background-color: var(--ck-user-colors--2-alpha); } .ck .ck-user__selection--2.ck-widget { background-color: transparent; border: 3px solid var(--ck-user-colors--2); } .ck .ck-user__marker--2, .ck .ck-user__marker--2:after, .ck .ck-user__marker--2 .ck-user__marker-dot { background-color: var(--ck-user-colors--2); } .ck .ck-user__marker--2 .ck-user__marker-line { border: 1px solid var(--ck-user-colors--2); } .ck .ck-user__color--3 { color: var(--ck-user-colors--3); } .ck .ck-user__bg-color--3 { background-color: var(--ck-user-colors--3); } .ck .ck-user__selection--3 { background-color: var(--ck-user-colors--3-alpha); } .ck .ck-user__selection--3.ck-widget { background-color: transparent; border: 3px solid var(--ck-user-colors--3); } .ck .ck-user__marker--3, .ck .ck-user__marker--3:after, .ck .ck-user__marker--3 .ck-user__marker-dot { background-color: var(--ck-user-colors--3); } .ck .ck-user__marker--3 .ck-user__marker-line { border: 1px solid var(--ck-user-colors--3); } .ck .ck-user__color--4 { color: var(--ck-user-colors--4); } .ck .ck-user__bg-color--4 { background-color: var(--ck-user-colors--4); } .ck .ck-user__selection--4 { background-color: var(--ck-user-colors--4-alpha); } .ck .ck-user__selection--4.ck-widget { background-color: transparent; border: 3px solid var(--ck-user-colors--4); } .ck .ck-user__marker--4, .ck .ck-user__marker--4:after, .ck .ck-user__marker--4 .ck-user__marker-dot { background-color: var(--ck-user-colors--4); } .ck .ck-user__marker--4 .ck-user__marker-line { border: 1px solid var(--ck-user-colors--4); } .ck .ck-user__color--5 { color: var(--ck-user-colors--5); } .ck .ck-user__bg-color--5 { background-color: var(--ck-user-colors--5); } .ck .ck-user__selection--5 { background-color: var(--ck-user-colors--5-alpha); } .ck .ck-user__selection--5.ck-widget { background-color: transparent; border: 3px solid var(--ck-user-colors--5); } .ck .ck-user__marker--5, .ck .ck-user__marker--5:after, .ck .ck-user__marker--5 .ck-user__marker-dot { background-color: var(--ck-user-colors--5); } .ck .ck-user__marker--5 .ck-user__marker-line { border: 1px solid var(--ck-user-colors--5); } .ck .ck-user__color--6 { color: var(--ck-user-colors--6); } .ck .ck-user__bg-color--6 { background-color: var(--ck-user-colors--6); } .ck .ck-user__selection--6 { background-color: var(--ck-user-colors--6-alpha); } .ck .ck-user__selection--6.ck-widget { background-color: transparent; border: 3px solid var(--ck-user-colors--6); } .ck .ck-user__marker--6, .ck .ck-user__marker--6:after, .ck .ck-user__marker--6 .ck-user__marker-dot { background-color: var(--ck-user-colors--6); } .ck .ck-user__marker--6 .ck-user__marker-line { border: 1px solid var(--ck-user-colors--6); } .ck .ck-user__color--7 { color: var(--ck-user-colors--7); } .ck .ck-user__bg-color--7 { background-color: var(--ck-user-colors--7); } .ck .ck-user__selection--7 { background-color: var(--ck-user-colors--7-alpha); } .ck .ck-user__selection--7.ck-widget { background-color: transparent; border: 3px solid var(--ck-user-colors--7); } .ck .ck-user__marker--7, .ck .ck-user__marker--7:after, .ck .ck-user__marker--7 .ck-user__marker-dot { background-color: var(--ck-user-colors--7); } .ck .ck-user__marker--7 .ck-user__marker-line { border: 1px solid var(--ck-user-colors--7); } /* Source: ckeditor5-collaboration-core/theme/users.css */ /* * What you're currently looking at is the source code of a legally protected, proprietary software. * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated, * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property. * * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved. */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Makes element unselectable. */ :root { --ck-user-avatar-size: 40px; --ck-user-avatar-background: hsl(210, 52%, 44%); --ck-user-avatar-color: hsl(0, 0%, 100%); } .ck.ck-user { display: flex; justify-content: center; align-items: center; position: relative; border-radius: 50%; background-color: var(--ck-user-avatar-background); height: var(--ck-user-avatar-size); width: var(--ck-user-avatar-size); min-width: var(--ck-user-avatar-size); min-height: var(--ck-user-avatar-size); } .ck.ck-user__name { color: var(--ck-user-avatar-color); cursor: default; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ck.ck-user__name.ck-user__name--hidden { display: none; } .ck.ck-user__img { display: none; width: inherit; height: inherit; background-position: center center; background-repeat: no-repeat; background-size: cover; background-color: var(--ck-user-avatar-background); border-radius: 50%; border: 2px solid var(--ck-user-avatar-background); } .ck.ck-user__img.ck-user__anonymous { display: block; background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M9.8%2020H2c0-5.7%205-5.7%206-7l.2-.8c-1.6-.8-2.7-2.7-2.7-5%200-2.8%202-5.2%204.3-5.2S14%204.4%2014%207.3c0%202.2-1%204-2.6%205l.2.6c1.2%201.3%206%201.4%206%207H9.8z%22%2F%3E%0A%3C%2Fsvg%3E); /* Do not display initials when user is anonymous. */ } .ck.ck-user__img.ck-user__anonymous + .ck-user__name { display: none; } .ck.ck-user__img.ck-user__avatar { display: block; /* In case if avatar is transparent make background white. */ background-color: hsl(0, 0%, 100%); } .ck.ck-user__img.ck-user__img--hidden { display: none; } .ck.ck-user__notification { display: flex; width: 15px; height: 15px; justify-content: center; align-items: center; background: white; border: 2px solid white; border-radius: 50%; box-sizing: content-box; position: absolute; top: -8px; right: -7px; overflow: hidden; transform: translateZ(0); } .ck.ck-user__notification .ck-user__icon { color: var(--ck-color-annotation-info); background: white; width: 19px; height: 19px; max-width: 19px; max-height: 19px; min-width: 19px; min-height: 19px; } /* Source: ckeditor5-comments/theme/annotation-inline.css */ /* * What you're currently looking at is the source code of a legally protected, proprietary software. * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated, * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property. * * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved. */ /* Common styles for inline comment and inline suggestion. */ :root { --ck-inline-annotation-container-width: 300px; --ck-inline-annotation-container-max-height: 400px; } .ck.ck-balloon-panel .ck-annotation-wrapper { /* Override default `position: absolute`. */ position: static; width: var(--ck-inline-annotation-container-width); max-height: var(--ck-inline-annotation-container-max-height); overflow-y: auto; /* Get rid of scroll chaining. */ overscroll-behavior-y: contain; /* We need to hide overflow in x-axis to prevent container stretching because of buttons tooltip. */ overflow-x: hidden; } .ck.ck-balloon-panel .ck-annotation { /* We don't need fadeInLeft animation for inline annotations. */ animation: none; } .ck.ck-balloon-panel .ck-annotation-wrapper * { /* Default `.ck.ck-reset_all *` has `white-space: nowrap` and display content in one line. */ white-space: normal; } /* Because `.ck.ck-reset_all *` is overriding default font property. */ .ck.ck-balloon-panel .ck-annotation-wrapper strong { font-weight: bold; } .ck.ck-balloon-panel .ck-annotation-wrapper i { font-style: italic; } /* Source: ckeditor5-comments/theme/annotation.css */ /* * What you're currently looking at is the source code of a legally protected, proprietary software. * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated, * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property. * * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved. */ /* Common styles for single comment and single suggestion. */ :root { --ck-color-annotation-icon: hsl(0, 0%, 50%); --ck-color-annotation-info: hsl(0, 0%, 46%); --ck-annotation-button-size: 0.85em; } .ck .ck-annotation { /* Make avatar size in the comment smaller than in presence list. */ --ck-user-avatar-size: 28px; font-size: var(--ck-font-size-base); display: flex; position: relative; animation: fadeInLeft 300ms; transition: background-color 300ms ease; padding: var(--ck-spacing-standard); } .ck .ck-annotation .ck-button { /* Overwrite CK5 button default styles. */ background-color: transparent; min-width: unset; min-height: unset; cursor: pointer; color: var(--ck-color-annotation-icon); border-radius: var(--ck-border-radius); font-size: var(--ck-annotation-button-size); } .ck .ck-annotation__main { display: grid; grid-template-areas: "info actions" "content content"; grid-template-columns: minmax(0, 1fr) auto; /* #1829. Firefox is wrongly rendering flex container width 100% with overflowed (non-spaced) text. */ width: calc( 100% - var(--ck-user-avatar-size) ); transition: all 200ms ease; border-radius: var(--ck-border-radius); padding-left: var(--ck-spacing-standard); } .ck .ck-annotation__main p { margin: 0; /* We need it to prevent `.ck.ck-reset` ovverride. */ white-space: normal; font-size: var(--ck-font-size-base); /* TODO: refactor this value later. */ line-height: 1.5em; } .ck .ck-annotation__user { margin-top: var(--ck-spacing-small); } .ck .ck-annotation__info { grid-area: info; display: flex; align-items: center; color: var(--ck-color-annotation-info); /* #156. Edit & remove icon are higher than plain text with the same font-size, so we need to take care if icons are hidden. */ min-height: 2.4em; } .ck .ck-annotation__info-name, .ck .ck-annotation__info-time { font-weight: bold; white-space: nowrap; overflow: hidden; /* We need it to prevent `.ck.ck-reset` ovverride. */ color: var(--ck-color-annotation-info); font-size: var(--ck-font-size-small); } .ck .ck-annotation__info-name { text-overflow: ellipsis; } .ck .ck-annotation__info-time { flex: 0 0 auto; margin: 0 var(--ck-spacing-large); } .ck.ck-balloon-panel .ck-annotation-wrapper .ck-annotation__info-name, .ck.ck-balloon-panel .ck-annotation-wrapper .ck-annotation__info-time { white-space: nowrap; } .ck .ck-annotation__actions { grid-area: actions; transition: opacity 200ms ease; opacity: 0.5; } /* Because of display flex, we need to strech out annotation content to 100%. */ .ck .ck-annotation__content-wrapper { grid-area: content; width: 100%; } @keyframes fadeInLeft { from { transform: translate3d( -5%, 0, 0 ); opacity: 0; } to { transform: translate3d( 0, 0, 0 ); opacity: 1; } } /* Source: ckeditor5-comments/theme/comment.css */ /* * What you're currently looking at is the source code of a legally protected, proprietary software. * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated, * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property. * * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved. */ :root { --ck-color-comment-background: hsl(210, 52%, 97%); --ck-color-comment-separator: hsl(210, 52%, 87%); --ck-color-comment-remove-background: hsl(0, 100%, 90%); --ck-color-comment-input-background: var(--ck-color-comment-background); } .ck .ck-comment__wrapper { font-size: var(--ck-font-size-base); position: relative; outline: 0; transition: all 300ms linear; } .ck .ck-comment__wrapper.ck-comment--remove-confirmation { transform: translate3d( -100%, 0, 0 ); } .ck .ck-comment__wrapper:first-of-type { border-top-right-radius: var(--ck-border-radius); border-top-left-radius: var(--ck-border-radius); } /* Removed: .ck .ck-comment::after blue connector line */ .ck .ck-comment--remove { background-color: var(--ck-color-comment-remove-background); } .ck .ck-comment--remove::after { opacity: 0; } .ck .ck-comment--edit { background-color: var(--ck-color-comment-input-background); } .ck .ck-comment--edit::after { opacity: 0; } .ck .ck-comment__main .ck-comment__input-wrapper { display: flex; flex-direction: column; position: relative; transition: all 300ms linear; } .ck .ck-comment__main .ck-comment__input-wrapper .ck-comment__input { padding: 0; } .ck .ck-comment__content { word-break: break-word; } .ck .ck-comment__user { /* Display user above vertical line. */ z-index: var(--ck-z-default); } /* We need specificity 030 to beat styles in `commentinput.css`. */ .ck-comment__input-actions .ck.ck-button.ck-comment__input-actions--submit { color: var(--ck-color-button-save); } .ck-comment__input-actions .ck.ck-button.ck-comment__input-actions--cancel { color: var(--ck-color-button-cancel); } /* Common styles for typography inside comment element and editable input. We are styling resetting list-style because of parent

` from user agent stylesheet */ background-color: transparent; } .ck-content .pen-green { color: var(--ck-highlight-pen-green); /* Override default yellow background of `` from user agent stylesheet */ background-color: transparent; } /* Source: ckeditor5-horizontal-line/theme/horizontalline.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck-editor__editable .ck-horizontal-line { /* Necessary to render properly next to floated objects, e.g. side image case. */ display: flow-root; } .ck-content hr { margin: 15px 0; height: 4px; background: hsl(0, 0%, 87%); border: 0; } /* Source: ckeditor5-link/theme/linkactions.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-link-actions { display: flex; flex-direction: row; flex-wrap: nowrap; } .ck.ck-link-actions .ck-link-actions__preview { display: inline-block; } .ck.ck-link-actions .ck-link-actions__preview .ck-button__label { overflow: hidden; } @media screen and (max-width: 600px) { .ck.ck-link-actions { flex-wrap: wrap; } .ck.ck-link-actions .ck-link-actions__preview { flex-basis: 100%; } .ck.ck-link-actions .ck-button:not(.ck-link-actions__preview) { flex-basis: 50%; } } /* Source: ckeditor5-link/theme/linkform.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-link-form { display: flex; } .ck.ck-link-form .ck-label { display: none; } @media screen and (max-width: 600px) { .ck.ck-link-form { flex-wrap: wrap; } .ck.ck-link-form .ck-labeled-field-view { flex-basis: 100%; } .ck.ck-link-form .ck-button { flex-basis: 50%; } } /* * Style link form differently when manual decorators are available. * See: https://github.com/ckeditor/ckeditor5-link/issues/186. */ .ck.ck-link-form_layout-vertical { display: block; /* * Whether the form is in the responsive mode or not, if there are decorator buttons * keep the top margin of action buttons medium. */ } .ck.ck-link-form_layout-vertical .ck-button.ck-button-save, .ck.ck-link-form_layout-vertical .ck-button.ck-button-cancel { margin-top: var(--ck-spacing-medium); } /* Source: ckeditor5-link/theme/linkimage.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* Linked image indicator */ .ck.ck-editor__editable figure.image > a::after, .ck.ck-editor__editable a span.image-inline::after { display: block; position: absolute; } /* Source: ckeditor5-list/theme/collapsible.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-collapsible.ck-collapsible_collapsed > .ck-collapsible__children { display: none; } /* Source: ckeditor5-list/theme/documentlist.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck-editor__editable .ck-list-bogus-paragraph { display: block; } /* Source: ckeditor5-list/theme/list.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck-content ol { list-style-type: decimal; } .ck-content ol ol { list-style-type: lower-latin; } .ck-content ol ol ol { list-style-type: lower-roman; } .ck-content ol ol ol ol { list-style-type: upper-latin; } .ck-content ol ol ol ol ol { list-style-type: upper-roman; } .ck-content ul { list-style-type: disc; } .ck-content ul ul { list-style-type: circle; } .ck-content ul ul ul { list-style-type: square; } .ck-content ul ul ul ul { list-style-type: square; } /* Source: ckeditor5-list/theme/liststyles.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-list-styles-list { display: grid; } /* Source: ckeditor5-list/theme/todolist.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-todo-list-checkmark-size: 16px; } .ck-content .todo-list { list-style: none; } .ck-content .todo-list li { margin-bottom: 5px; } .ck-content .todo-list li .todo-list { margin-top: 5px; } .ck-content .todo-list .todo-list__label > input { -webkit-appearance: none; display: inline-block; position: relative; width: var(--ck-todo-list-checkmark-size); height: var(--ck-todo-list-checkmark-size); vertical-align: middle; /* Needed on iOS */ border: 0; /* LTR styles */ left: -25px; margin-right: -15px; right: 0; margin-left: 0; } .ck-content .todo-list .todo-list__label > input::before { display: block; position: absolute; box-sizing: border-box; content: ''; width: 100%; height: 100%; border: 1px solid hsl(0, 0%, 20%); border-radius: 2px; transition: 250ms ease-in-out box-shadow, 250ms ease-in-out background, 250ms ease-in-out border; } .ck-content .todo-list .todo-list__label > input::after { display: block; position: absolute; box-sizing: content-box; pointer-events: none; content: ''; /* Calculate tick position, size and border-width proportional to the checkmark size. */ left: calc( var(--ck-todo-list-checkmark-size) / 3 ); top: calc( var(--ck-todo-list-checkmark-size) / 5.3 ); width: calc( var(--ck-todo-list-checkmark-size) / 5.3 ); height: calc( var(--ck-todo-list-checkmark-size) / 2.6 ); border-style: solid; border-color: transparent; border-width: 0 calc( var(--ck-todo-list-checkmark-size) / 8 ) calc( var(--ck-todo-list-checkmark-size) / 8 ) 0; transform: rotate(45deg); } .ck-content .todo-list .todo-list__label > input[checked]::before { background: hsl(126, 64%, 41%); border-color: hsl(126, 64%, 41%); } .ck-content .todo-list .todo-list__label > input[checked]::after { border-color: hsl(0, 0%, 100%); } .ck-content .todo-list .todo-list__label .todo-list__label__description { vertical-align: middle; } /* RTL styles */ [dir="rtl"] .todo-list .todo-list__label > input { left: 0; margin-right: 0; right: -25px; margin-left: -15px; } /* * To-do list should be interactive only during the editing * (https://github.com/ckeditor/ckeditor5/issues/2090). */ .ck-editor__editable .todo-list .todo-list__label > input { cursor: pointer; } .ck-editor__editable .todo-list .todo-list__label > input:hover::before { box-shadow: 0 0 0 5px hsla(0, 0%, 0%, 0.1); } /* Source: ckeditor5-revision-history/theme/changesnavigation.css */ .ck.ck-revision-history-ui.ck-revision-history-ui__changes-navigation { display: flex; align-items: center; margin-left: auto; } .ck.ck-revision-history-ui.ck-revision-history-ui__changes-navigation .ck-revision-history-ui__changes-navigation__wrapper { display: flex; margin-right: var(--ck-spacing-standard); } .ck.ck-revision-history-ui.ck-revision-history-ui__changes-navigation .ck-revision-history-ui__changes-navigation__label { font-weight: bold; white-space: pre; } .ck.ck-revision-history-ui.ck-revision-history-ui__changes-navigation .ck-revision-history-ui__changes-navigation__navigation { margin-left: var(--ck-spacing-small); } /* Source: ckeditor5-revision-history/theme/revision/revision.css */ .ck { --ck-revision-history-revision-background-color: var(--ck-color-base-background); --ck-revision-history-revision-border-color: hsl(213deg 20% 35%); --ck-revision-history-revision-box-shadow: 0 1px 1px 1px hsl(0deg 0% 90%); --ck-revision-history-revision-author-icon-offset: 20px; --ck-revision-history-revision-transitions: background 100ms ease-in, border 100ms ease-in; --ck-revision-history-revision-selected-text-color: var(--ck-color-base-background); --ck-revision-history-revision-selected-input-text-color-empty: var(--ck-color-base-background); --ck-revision-history-revision-selected-background-color: var(--ck-color-base-active); --ck-revision-history-revision-highlighted-background-color: hsl(208deg 100% 94%); --ck-revision-history-revision-highlighted-background-color-hover: hsl(208deg 100% 90%); --ck-revision-history-revision-delete-confirmation-background: hsl(0deg 100% 90%); --ck-revision-history-revision-delete-confirmation-active-button-background: hsl(0deg 100% 85%); } .ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision { position: relative; display: block; background: var(--ck-revision-history-revision-background-color); padding: var(--ck-spacing-large) calc(2 * var(--ck-spacing-standard)); border-radius: var(--ck-border-radius); border-left: 3px solid var(--ck-revision-history-revision-border-color); box-shadow: var(--ck-revision-history-revision-box-shadow); width: 100%; /*transition: var(--ck-revision-history-revision-transitions), transform .3s ease-in-out;*/ transition: transform .3s ease; } .ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision:last-child { margin-bottom: 0; } .ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision .ck-revision-history-sidebar__revision__date { display: block; font-size: var(--ck-font-size-small); font-weight: bold; opacity: .8; overflow: hidden; text-overflow: ellipsis; width: 100%; white-space: nowrap; /*transition: var(--ck-revision-history-revision-transitions);*/ } .ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision .ck-revision-history-sidebar__revision__controls-wrapper { display: flex; flex-direction: row; align-items: flex-start; margin: var(--ck-spacing-standard) 0 0; } .ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision .ck-revision-history-sidebar__revision-authors { padding: 0; margin: 0 0 0 var(--ck-revision-history-revision-author-icon-offset); flex: 0 1 auto; min-width: 0; } .ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision.ck-revision-history-sidebar__revision_selected, .ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision.ck-revision-history-sidebar__revision_highlighted { border-left-color: transparent; transform: translateX(calc(-1 * var(--ck-revision-history-sidebar-timeline-padding))); border-top-left-radius: 0; border-bottom-left-radius: 0; } .ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision.ck-revision-history-sidebar__revision_selected { background: var(--ck-revision-history-revision-selected-background-color); color: var(--ck-revision-history-revision-selected-text-color); } .ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision.ck-revision-history-sidebar__revision_selected .ck-revision-history-sidebar__revision-name .ck-input { color: var(--ck-revision-history-revision-selected-text-color); /* The placeholder displays the date but without a different opacity it would not be unclear whether this is an actual input value or not */ } .ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision.ck-revision-history-sidebar__revision_selected .ck-revision-history-sidebar__revision-name .ck-input.ck-input-text_empty::placeholder { opacity: .7; } .ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision.ck-revision-history-sidebar__revision_highlighted { background: var(--ck-revision-history-revision-highlighted-background-color); } .ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision.ck-revision-history-sidebar__actions_dropdown_open { z-index: var(--ck-z-default); } /* Slide the revision to the left when the delete confirmation prompt shows up. */ .ck.ck-revision-history-sidebar__revision-wrapper.ck-revision-history-sidebar__revision-wrapper_confirmation_visible .ck-revision-history-sidebar__revision { box-shadow: none; position: relative; transform: translate3d( -100%, 0, 0 ); } .ck.ck-revision-history-sidebar__revision-wrapper.ck-revision-history-sidebar__revision-wrapper_confirmation_visible .ck-revision-history-sidebar__revision, .ck.ck-revision-history-sidebar__revision-wrapper.ck-revision-history-sidebar__revision-wrapper_confirmation_visible .ck-revision-history-sidebar__revision * { --ck-revision-history-revision-background-color: transparent; --ck-revision-history-revision-selected-background-color: transparent; --ck-revision-history-revision-highlighted-background-color: transparent; } /* A confirmation that shows up when attempting to delete a revision */ .ck.ck-revision-history-sidebar__revision-wrapper .ck-thread__remove-confirm { display: flex; flex-direction: row; justify-content: space-around; align-items: center; position: absolute; top: 0; left: 100%; width: 100%; height: 100%; border-radius: var(--ck-border-radius); box-shadow: var(--ck-revision-history-revision-box-shadow); background: var(--ck-revision-history-revision-delete-confirmation-background); user-select: none; } .ck.ck-revision-history-sidebar__revision-wrapper .ck-thread__remove-confirm .ck-thread__remove-confirm-inner { text-align: center; margin-top: var(--ck-spacing-small); /* Confirmation message */ } .ck.ck-revision-history-sidebar__revision-wrapper .ck-thread__remove-confirm .ck-thread__remove-confirm-inner p { margin: 0; font-weight: bold; color: var(--ck-color-text); } /* Confirmation buttons */ .ck.ck-revision-history-sidebar__revision-wrapper .ck-thread__remove-confirm .ck-thread__remove-confirm-inner .ck-thread__remove-confirm-actions { display: flex; flex-direction: row; justify-content: space-evenly; } .ck.ck-revision-history-sidebar__revision-wrapper .ck-thread__remove-confirm .ck-thread__remove-confirm-inner .ck-thread__remove-confirm-actions .ck.ck-button:hover, .ck.ck-revision-history-sidebar__revision-wrapper .ck-thread__remove-confirm .ck-thread__remove-confirm-inner .ck-thread__remove-confirm-actions .ck.ck-button:focus, .ck.ck-revision-history-sidebar__revision-wrapper .ck-thread__remove-confirm .ck-thread__remove-confirm-inner .ck-thread__remove-confirm-actions .ck.ck-button:active { background: var(--ck-revision-history-revision-delete-confirmation-active-button-background); } .ck.ck-revision-history-sidebar__revision-wrapper .ck-thread__remove-confirm .ck-thread__remove-confirm-inner .ck-thread__remove-confirm-actions .ck.ck-button.ck-thread__remove-confirm-submit { color: var(--ck-color-button-save); } .ck.ck-revision-history-sidebar__revision-wrapper .ck-thread__remove-confirm .ck-thread__remove-confirm-inner .ck-thread__remove-confirm-actions .ck.ck-button.ck-thread__remove-confirm-cancel { color: var(--ck-color-button-cancel); } .ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__subrevisions { margin-left: var(--ck-spacing-large); } /* Source: ckeditor5-revision-history/theme/revision/revisionactions.css */ .ck.ck-revision-history-sidebar__revision .ck-revision-history-sidebar__revision__actions { display: none; position: absolute; top: var(--ck-spacing-small); right: var(--ck-spacing-small); } .ck.ck-revision-history-sidebar__revision .ck-revision-history-sidebar__revision__actions .ck-dropdown__button { min-width: unset; min-height: unset; } .ck.ck-revision-history-sidebar__revision .ck-revision-history-sidebar__revision__actions .ck-dropdown__button .ck-button__icon { transform: scale( .7 ); } .ck.ck-revision-history-sidebar__revision .ck-revision-history-sidebar__revision__actions .ck-dropdown__arrow { display: none; } .ck.ck-revision-history-sidebar__revision .ck-revision-history-sidebar__revision__actions .ck-list__item__danger { color: var(--ck-color-button-cancel); } .ck.ck-revision-history-sidebar__revision.ck-revision-history-sidebar__revision_selected .ck-revision-history-sidebar__revision__actions .ck-dropdown__button { color: var(--ck-color-base-background); } .ck.ck-revision-history-sidebar__revision.ck-revision-history-sidebar__revision_selected .ck-revision-history-sidebar__revision__actions .ck-dropdown__button:hover, .ck.ck-revision-history-sidebar__revision.ck-revision-history-sidebar__revision_selected .ck-revision-history-sidebar__revision__actions .ck-dropdown__button.ck-on { background: var(--ck-color-base-active-focus); } .ck.ck-revision-history-sidebar__revision.ck-revision-history-sidebar__revision_selected .ck-revision-history-sidebar__revision__actions .ck-dropdown__button:hover:hover, .ck.ck-revision-history-sidebar__revision.ck-revision-history-sidebar__revision_selected .ck-revision-history-sidebar__revision__actions .ck-dropdown__button.ck-on:hover { filter: brightness(95%); } .ck.ck-revision-history-sidebar__revision.ck-revision-history-sidebar__revision_highlighted .ck-revision-history-sidebar__revision__actions .ck-dropdown__button:hover, .ck.ck-revision-history-sidebar__revision.ck-revision-history-sidebar__revision_highlighted .ck-revision-history-sidebar__revision__actions .ck-dropdown__button.ck-on { background: var(--ck-revision-history-revision-highlighted-background-color-hover); } .ck.ck-revision-history-sidebar__revision.ck-revision-history-sidebar__revision_highlighted .ck-revision-history-sidebar__revision__actions .ck-dropdown__button:hover:hover, .ck.ck-revision-history-sidebar__revision.ck-revision-history-sidebar__revision_highlighted .ck-revision-history-sidebar__revision__actions .ck-dropdown__button.ck-on:hover { filter: brightness(95%); } .ck.ck-revision-history-sidebar__revision:hover:not(.ck-disabled) .ck-revision-history-sidebar__revision__actions, .ck.ck-revision-history-sidebar__revision:not(.ck-disabled) .ck-revision-history-sidebar__revision__actions.ck-on { display: block; } /* Source: ckeditor5-revision-history/theme/revision/revisionauthor.css */ .ck.ck-revision-history-sidebar__revision-author { display: block; position: relative; transition: var(--ck-revision-history-revision-transitions); } .ck.ck-revision-history-sidebar__revision-author .ck-revision-history-sidebar__revision-author__name { overflow: hidden; text-overflow: ellipsis; width: 100%; white-space: nowrap; display: block; font-weight: bold; } .ck.ck-revision-history-sidebar__revision-author .ck-icon { position: absolute; left: calc(-1 * var(--ck-revision-history-revision-author-icon-offset)); top: 3px; width: 11px; height: 10px; } .ck.ck-revision-history-sidebar__revision-author:not(:first-of-type) .ck-icon { display: none; } /* Source: ckeditor5-revision-history/theme/revision/revisionname.css */ .ck.ck-revision-history-sidebar__revision-name { display: block; font-size: 1.2em; font-weight: bold; position: relative; left: calc(-1 * var(--ck-spacing-small)); margin-right: 30px; } .ck.ck-revision-history-sidebar__revision-name > .ck-labeled-field-view__input-wrapper > .ck-label { display: none; } .ck.ck-revision-history-sidebar__revision-name > .ck-labeled-field-view__input-wrapper > .ck-input { padding: var(--ck-spacing-tiny) var(--ck-spacing-small); min-height: auto; color: inherit; font-family: inherit; font-weight: bold; font-size: var(--ck-font-size-normal); min-width: auto; width: 100%; border-radius: var(--ck-border-radius); transition: var(--ck-revision-history-revision-transitions); background: transparent; } .ck.ck-revision-history-sidebar__revision-name > .ck-labeled-field-view__input-wrapper > .ck-input, .ck.ck-revision-history-sidebar__revision-name > .ck-labeled-field-view__input-wrapper > .ck-input:focus, .ck.ck-revision-history-sidebar__revision-name > .ck-labeled-field-view__input-wrapper > .ck-input[readonly] { background: transparent; } .ck.ck-revision-history-sidebar__revision-name > .ck-labeled-field-view__input-wrapper > .ck-input:not(.ck-input_focused) { /* Only when the input is focused, it should look like an input. By default, it should not be obvious that revision names are inputs. */ border-color: transparent; } .ck.ck-revision-history-sidebar__revision-name > .ck-labeled-field-view__input-wrapper > .ck-input::placeholder { /* The placeholder should be transparent to the users. When there is no name (whis is not mandatory), the date is displayed instead of a name and it should look like this is normal. */ color: inherit; } /* Don't put the selection in the revision name when clicking an unselected revision. This is annoying. */ .ck.ck-revision-history-sidebar__revision-name > .ck-labeled-field-view__input-wrapper > .ck-input[readonly] { pointer-events: none; } /* Source: ckeditor5-revision-history/theme/revision/subrevision.css */ .ck { --ck-revision-history-subrevision-connector-background: hsl(0deg 0% 91%); } .ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision.ck-revision-history-sidebar__subrevision { position: relative; margin: var(--ck-revision-history-sidebar-revision-vertical-spacing) 0; } .ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision.ck-revision-history-sidebar__subrevision:last-of-type { margin-bottom: 0; } .ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision.ck-revision-history-sidebar__subrevision::before { content: ""; display: block; width: 3px; height: var(--ck-revision-history-sidebar-revision-vertical-spacing); background: var(--ck-revision-history-subrevision-connector-background); position: absolute; top: calc(-1 * var(--ck-revision-history-sidebar-revision-vertical-spacing)); left: var(--ck-spacing-large); transition: var(--ck-revision-history-revision-transitions), transform 100ms ease-in-out; } /* Subrevisions don't move when getting selected. */ .ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision.ck-revision-history-sidebar__subrevision.ck-revision-history-sidebar__revision_selected { border-radius: var(--ck-border-radius); } .ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision.ck-revision-history-sidebar__subrevision.ck-revision-history-sidebar__revision_selected::before { transform: translateX(var(--ck-revision-history-sidebar-timeline-padding)); } .ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision.ck-revision-history-sidebar__subrevision .ck-revision-history-sidebar__revision-authors { margin-top: var(--ck-spacing-standard); } .ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision.ck-revision-history-sidebar__subrevision .ck-revision-history-sidebar__revision-author_creator { font-weight: normal; } /* Source: ckeditor5-revision-history/theme/revision/subrevisioncollapser.css */ .ck { --ck-revision-history-revision-subrevision-collapser-color: hsl(213deg 20% 35%); } .ck.ck-revision-history-sidebar__subrevision-collapser { display: block; padding: var(--ck-spacing-standard); margin-top: calc(var(--ck-spacing-small) - var(--ck-spacing-standard)); margin-right: calc(var(--ck-spacing-standard) - var(--ck-spacing-standard)); margin-left: calc(-1 * var(--ck-spacing-standard)); opacity: .8; } .ck.ck-revision-history-sidebar__subrevision-collapser:hover { opacity: 1; } .ck.ck-revision-history-sidebar__subrevision-collapser .ck-revision-history-sidebar__subrevision-collapser__inner { display: block; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8.7px; border-color: transparent transparent transparent var(--ck-revision-history-revision-subrevision-collapser-color); transform: rotate(90deg); transition: transform 100ms ease-in-out; } .ck.ck-revision-history-sidebar__subrevision-collapser.ck-revision-history-sidebar__subrevision-collapser_collapsed .ck-revision-history-sidebar__subrevision-collapser__inner { transform: rotate(0deg); } .ck.ck-revision-history-sidebar__revision_selected .ck-revision-history-sidebar__subrevision-collapser .ck-revision-history-sidebar__subrevision-collapser__inner { --ck-revision-history-revision-subrevision-collapser-color: var(--ck-revision-history-revision-selected-text-color); } /* Source: ckeditor5-revision-history/theme/revisionhistorysaverevisionform.css */ /* * Copyright (c) 2003-2020, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-revision-history-save-revision-form { display: flex; align-items: flex-start; flex-direction: row; flex-wrap: nowrap; } .ck.ck-revision-history-save-revision-form .ck-labeled-field-view { display: inline-block; } .ck.ck-revision-history-save-revision-form .ck-label { display: none; } @media screen and (max-width: 600px) { .ck.ck-revision-history-save-revision-form { flex-wrap: wrap; } .ck.ck-revision-history-save-revision-form .ck-labeled-field-view { flex-basis: 100%; } .ck.ck-revision-history-save-revision-form .ck-button { flex-basis: 50%; } } /* Source: ckeditor5-revision-history/theme/revisionssidebar/revisionssidebar.css */ .ck { --ck-revision-history-sidebar-period-background: hsl(14deg 100% 57%); --ck-revision-history-sidebar-timeline-padding: var(--ck-spacing-large); } .ck.ck-revision-history-sidebar { display: flex; flex-direction: column; } .ck.ck-revision-history-sidebar .ck-revision-history-sidebar__timeline { display: flex; flex-direction: column; align-items: start; padding: var(--ck-revision-history-sidebar-timeline-padding); font-size: var(--ck-font-size-base); overflow-y: auto; height: 100%; /* * Required for the revision delete confirmation slide-to-the-left effect. * Without it, a h-scroll shows up for a while */ overflow-x: hidden; } .ck.ck-revision-history-sidebar .ck-revision-history-sidebar__timeline.ck-disabled { filter: grayscale(1) opacity(var(--ck-disabled-opacity)); } /* Source: ckeditor5-revision-history/theme/revisionssidebar/revisionssidebarheader.css */ .ck.ck-revision-history-sidebar__header { --header-height: calc(var(--ck-ui-component-min-height) + 2 * var(--ck-spacing-small) + 1px); height: var(--header-height); min-height: var(--header-height); line-height: var(--header-height); border-bottom: 1px solid var(--ck-color-toolbar-border); overflow: hidden; font-family: inherit; font-weight: bold; color: inherit; padding: 0 var(--ck-revision-history-sidebar-timeline-padding); display: flex; flex-direction: row; align-items: center; } .ck.ck-revision-history-sidebar__header .ck-revision-history-sidebar__header__label { font-family: inherit; font-weight: bold; color: inherit; font-size: 1.2em; } .ck.ck-revision-history-sidebar__header .ck-icon { margin-right: var(--ck-spacing-large); } /* Source: ckeditor5-revision-history/theme/revisionssidebar/revisionssidebartimeperiod.css */ .ck { --ck-revision-history-sidebar-revision-vertical-spacing: calc(2 * var(--ck-spacing-standard)); } .ck.ck-revision-history-sidebar__time-period { width: 100%; } .ck.ck-revision-history-sidebar__time-period .ck-revision-history-sidebar__time-period__label { background: var(--ck-revision-history-sidebar-period-background); font-size: 9px; font-weight: bold; padding: var(--ck-spacing-tiny) var(--ck-spacing-standard); border-radius: var(--ck-border-radius); color: var(--ck-color-base-background); text-transform: uppercase; } .ck.ck-revision-history-sidebar__time-period .ck-revision-history-sidebar__time-period__label:first-child { margin-top: var(--ck-spacing-standard); } .ck.ck-revision-history-sidebar__time-period .ck-revision-history-sidebar__time-period__revisions { display: flex; flex-direction: column; } .ck.ck-revision-history-sidebar__time-period .ck-revision-history-sidebar__time-period__revisions .ck-revision-history-sidebar__revision-wrapper { margin-top: var(--ck-revision-history-sidebar-revision-vertical-spacing); } .ck.ck-revision-history-sidebar__time-period:not(.ck-hidden) + .ck-revision-history-sidebar__time-period { margin-top: var(--ck-revision-history-sidebar-revision-vertical-spacing); } /* Source: ckeditor5-revision-history/theme/revisionviewer.css */ .ck .ck-revision-change { padding: var(--ck-spacing-small) var(--ck-spacing-large); border-top-left-radius: var(--ck-border-radius); outline: 0; } .ck .ck-revision-change > * { vertical-align: bottom; font-size: var(--ck-font-size-standard); } .ck .ck-revision-change.ck-revision-change__add { border-left-color: var(--ck-color-suggestion-box-insertion-border); } .ck .ck-revision-change.ck-revision-change__remove { border-left-color: var(--ck-color-suggestion-box-deletion-border); } .ck .ck-revision-change .ck-revision-change__label { font-weight: bold; font-size: inherit; vertical-align: inherit; } .ck.ck-button.ck-revision-history-ui__back-to-editing { background: var(--ck-color-base-active); color: var(--ck-color-base-background); } .ck.ck-button.ck-revision-history-ui__back-to-editing:hover:not(.ck-disabled) { background: var(--ck-color-base-active-focus); } .ck-content .ck-suggestion-preview-marker { opacity: 0.75; } .ck-content .ck-suggestion-preview-marker-split { opacity: 0.75; } .ck-content .ck-suggestion-preview-marker-split::after { content: '¶'; } .ck-content .ck-suggestion-preview-marker-merge { opacity: 0.75; text-decoration: line-through; } .ck-content .ck-suggestion-preview-marker-merge::after { content: '¶'; } .ck-content .ck-suggestion-preview-marker-deletion { text-decoration: line-through; } .ck-content .ck-suggestion-marker-deletion-new:not(.ck-widget), .ck-content .ck-suggestion-marker-merge-new { --ck-color-suggestion-marker-deletion-border: none; --ck-color-suggestion-marker-deletion-border-active: none; --ck-color-suggestion-marker-deletion-background: none; --ck-color-suggestion-marker-deletion-background-active: none; --ck-color-suggestion-marker-deletion-stroke: hsla(345, 60%, 30%, .8); --ck-color-suggestion-widget-deletion-background: hsla(345, 71%, 65%, .03); --ck-color-suggestion-widget-deletion-background-active: hsla(345, 71%, 45%, .05); } .ck-content .ck-suggestion-marker-merge-new::after { color: inherit; } .ck-content .ck-suggestion-marker-insertion-new, .ck-content .ck-suggestion-marker-split-new { opacity: 0.75; } .ck-content .ck-suggestion-marker-deletion-new.ck-suggestion-marker--active:not(.table), .ck-content .ck-suggestion-marker-merge-new.ck-suggestion-marker--active { --ck-color-suggestion-marker-deletion-background-active: hsla(345, 71%, 50%, .08); --ck-color-suggestion-marker-deletion-stroke: hsla(345, 60%, 30%, 1); opacity: 1; } .ck-content .ck-suggestion-marker-insertion-new.ck-suggestion-marker--active, .ck-content .ck-suggestion-marker-split-new.ck-suggestion-marker--active { opacity: 1; } /* Source: ckeditor5-revision-history/theme/revisionviewerloadingoverlay.css */ .ck { --ck-revision-history-loading-overlay-transition-duration: .2s; --ck-revision-history-loading-overlay-transition-delay: 0s; --ck-revision-history-loading-overlay-spinner-rotation-duration: 1s; --ck-revision-history-loading-overlay-spinner-size: 60px; --ck-revision-history-loading-overlay-visible-background: hsla(0, 0%, 100%, 1); } .ck.ck-editor__editable::before, .ck.ck-editor__editable::after { visibility: hidden; transition: opacity var(--ck-revision-history-loading-overlay-transition-duration) ease; opacity: 0; content: ''; position: absolute; transition-delay: 0; } .ck.ck-editor__editable::before { top: 0; left: 0; width: 100%; height: 100%; background: var(--ck-revision-history-loading-overlay-visible-background); z-index: var(--ck-z-default); } .ck.ck-editor__editable::after { box-sizing: border-box; top: 50%; left: 50%; width: var(--ck-revision-history-loading-overlay-spinner-size); height: var(--ck-revision-history-loading-overlay-spinner-size); transform: translate(-50%, -50%); border-radius: 50%; border-top: 3px solid var(--ck-color-base-text); border-right: 3px solid transparent; animation: ck-revision-history-spinner-animation var(--ck-revision-history-loading-overlay-spinner-rotation-duration) linear infinite; z-index: var(--ck-z-default); } .ck.ck-editor__editable.ck-editor__editable__loading-overlay, .ck.ck-editor__editable.ck-editor__editable__overlay { position: relative; min-height: calc(var(--ck-revision-history-loading-overlay-spinner-size) + 2 * var(--ck-spacing-large)); } .ck.ck-editor__editable.ck-editor__editable__loading-overlay::before, .ck.ck-editor__editable.ck-editor__editable__overlay::before, .ck.ck-editor__editable.ck-editor__editable__loading-overlay::after, .ck.ck-editor__editable.ck-editor__editable__overlay::after { visibility: visible; opacity: .8; transition-delay: var(--ck-revision-history-loading-overlay-transition-delay); } .ck.ck-editor__editable.ck-editor__editable__overlay::after { visibility: hidden; } @keyframes ck-revision-history-spinner-animation { /* Safari needs this 0deg step. */ from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } /* Source: ckeditor5-table/theme/colorinput.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-input-color { width: 100%; display: flex; flex-direction: row-reverse; } .ck.ck-input-color > input.ck.ck-input-text { min-width: auto; flex-grow: 1; } .ck.ck-input-color > div.ck.ck-dropdown { min-width: auto; /* This dropdown has no arrow but a color preview instead. */ } .ck.ck-input-color > div.ck.ck-dropdown > .ck-input-color__button .ck-dropdown__arrow { display: none; } .ck.ck-input-color .ck.ck-input-color__button { /* Resolving issue with misaligned buttons on Safari (see #10589) */ display: flex; } .ck.ck-input-color .ck.ck-input-color__button .ck.ck-input-color__button__preview { position: relative; overflow: hidden; } .ck.ck-input-color .ck.ck-input-color__button .ck.ck-input-color__button__preview > .ck.ck-input-color__button__preview__no-color-indicator { position: absolute; display: block; } /* Source: ckeditor5-table/theme/formrow.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-form__row { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; /* Ignore labels that work as fieldset legends */ } .ck.ck-form__row > *:not(.ck-label) { flex-grow: 1; } .ck.ck-form__row.ck-table-form__action-row .ck-button-save, .ck.ck-form__row.ck-table-form__action-row .ck-button-cancel { justify-content: center; } /* Source: ckeditor5-table/theme/inserttable.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck .ck-insert-table-dropdown__grid { display: flex; flex-direction: row; flex-wrap: wrap; } /* Source: ckeditor5-table/theme/table.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck-content .table { /* Give the table widget some air and center it horizontally */ /* The first value should be equal to --ck-spacing-large variable if used in the editor context to avoid the content jumping (See https://github.com/ckeditor/ckeditor5/issues/9825). */ margin: 0.9em auto; display: table; } .ck-content .table table { /* The table cells should have slight borders */ border-collapse: collapse; border-spacing: 0; /* Table width and height are set on the parent

. Make sure the table inside stretches to the full dimensions of the container (https://github.com/ckeditor/ckeditor5/issues/6186). */ width: 100%; height: 100%; /* The outer border of the table should be slightly darker than the inner lines. Also see https://github.com/ckeditor/ckeditor5-table/issues/50. */ border: 1px double hsl(0, 0%, 70%); } .ck-content .table table td, .ck-content .table table th { min-width: 2em; padding: .4em; /* The border is inherited from .ck-editor__nested-editable styles, so theoretically it's not necessary here. However, the border is a content style, so it should use .ck-content (so it works outside the editor). Hence, the duplication. See https://github.com/ckeditor/ckeditor5/issues/6314 */ border: 1px solid hsl(0, 0%, 75%); } .ck-content .table table th { font-weight: bold; background: hsla(0, 0%, 0%, 5%); } /* Text alignment of the table header should match the editor settings and override the native browser styling, when content is available outside the editor. See https://github.com/ckeditor/ckeditor5/issues/6638 */ .ck-content[dir="rtl"] .table th { text-align: right; } .ck-content[dir="ltr"] .table th { text-align: left; } .ck-editor__editable .ck-table-bogus-paragraph { /* * Use display:inline-block to force Chrome/Safari to limit text mutations to this element. * See https://github.com/ckeditor/ckeditor5/issues/6062. */ display: inline-block; /* * Inline HTML elements nested in the span should always be dimensioned in relation to the whole cell width. * See https://github.com/ckeditor/ckeditor5/issues/9117. */ width: 100%; } /* Source: ckeditor5-table/theme/tablecaption.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-color-table-caption-background: hsl(0, 0%, 97%); --ck-color-table-caption-text: hsl(0, 0%, 20%); --ck-color-table-caption-highlighted-background: hsl(52deg 100% 50%); } /* Content styles */ .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; } /* Editing styles */ .ck.ck-editor__editable .table > figcaption.table__caption_highlighted { animation: ck-table-caption-highlight .6s ease-out; } .ck.ck-editor__editable .table > figcaption.ck-placeholder::before { padding-left: inherit; padding-right: inherit; /* * Make sure the table caption placeholder doesn't overflow the placeholder area. * See https://github.com/ckeditor/ckeditor5/issues/9162. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @keyframes ck-table-caption-highlight { 0% { background-color: var(--ck-color-table-caption-highlighted-background); } 100% { background-color: var(--ck-color-table-caption-background); } } /* Source: ckeditor5-table/theme/tablecellproperties.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row { flex-wrap: wrap; } .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar:first-of-type { /* 4 buttons out of 7 (h-alignment + v-alignment) = 0.57 */ flex-grow: 0.57; } .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar:last-of-type { /* 3 buttons out of 7 (h-alignment + v-alignment) = 0.43 */ flex-grow: 0.43; } .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar .ck-button { flex-grow: 1; } /* Source: ckeditor5-table/theme/tablecolumnresize.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-color-table-column-resizer-hover: var(--ck-color-base-active); --ck-table-column-resizer-width: 7px; /* The offset used for absolute positioning of the resizer element, so that it is placed exactly above the cell border. The value is: minus half the width of the resizer decreased additionaly by the half the width of the border (0.5px). */ --ck-table-column-resizer-position-offset: calc(var(--ck-table-column-resizer-width) * -0.5 - 0.5px); } .ck-content .table .ck-table-resized { table-layout: fixed; } .ck-content .table table { overflow: hidden; } .ck-content .table td, .ck-content .table th { position: relative; } .ck.ck-editor__editable .table .ck-table-column-resizer { position: absolute; /* The resizer element resides in each cell so to occupy the entire height of the table, which is unknown from a CSS point of view, it is extended to an extremely high height. Even for screens with a very high pixel density, the resizer will fulfill its role as it should, i.e. for a screen of 476 ppi the total height of the resizer will take over 350 sheets of A4 format, which is totally unrealistic height for a single table. */ top: -999999px; bottom: -999999px; right: var(--ck-table-column-resizer-position-offset); width: var(--ck-table-column-resizer-width); cursor: col-resize; user-select: none; z-index: var(--ck-z-default); } .ck.ck-editor__editable.ck-column-resize_disabled .table .ck-table-column-resizer { display: none; } /* The resizer elements, which are extended to an extremely high height, break the drag & drop feature in Chrome. To make it work again, all resizers must be hidden while the table is dragged. */ .ck.ck-editor__editable .table[draggable] .ck-table-column-resizer { display: none; } .ck.ck-editor__editable .table .ck-table-column-resizer:hover, .ck.ck-editor__editable .table .ck-table-column-resizer__active { background-color: var(--ck-color-table-column-resizer-hover); opacity: 0.25; } .ck.ck-editor__editable[dir=rtl] .table .ck-table-column-resizer { left: var(--ck-table-column-resizer-position-offset); right: unset; } /* Source: ckeditor5-table/theme/tableform.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-table-form .ck-form__row.ck-table-form__border-row { flex-wrap: wrap; } .ck.ck-table-form .ck-form__row.ck-table-form__background-row { flex-wrap: wrap; } .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row { flex-wrap: wrap; align-items: center; } .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-labeled-field-view { display: flex; flex-direction: column-reverse; align-items: center; } .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-labeled-field-view .ck.ck-dropdown { flex-grow: 0; } .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-table-form__dimension-operator { flex-grow: 0; } .ck.ck-table-form .ck.ck-labeled-field-view { /* Allow absolute positioning of the status (error) balloons. */ position: relative; } .ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status { position: absolute; left: 50%; bottom: calc( -1 * var(--ck-table-properties-error-arrow-size) ); transform: translate(-50%,100%); /* Make sure the balloon status stays on top of other form elements. */ z-index: 1; /* The arrow pointing towards the field. */ } .ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status::after { content: ""; position: absolute; top: calc( -1 * var(--ck-table-properties-error-arrow-size) ); left: 50%; transform: translateX( -50% ); } /* Source: ckeditor5-table/theme/tableproperties.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row { flex-wrap: wrap; flex-basis: 0; align-content: baseline; } .ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row .ck.ck-toolbar .ck-toolbar__items { flex-wrap: nowrap; } /* Source: ckeditor5-theme-lark/theme/ckeditor5-clipboard/clipboard.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-clipboard-drop-target-dot-width: 12px; --ck-clipboard-drop-target-dot-height: 8px; --ck-clipboard-drop-target-color: var(--ck-color-focus-border) } /* * Vertical drop target (in text). */ .ck.ck-editor__editable .ck.ck-clipboard-drop-target-position span { bottom: calc(-.5 * var(--ck-clipboard-drop-target-dot-height)); top: calc(-.5 * var(--ck-clipboard-drop-target-dot-height)); border: 1px solid var(--ck-clipboard-drop-target-color); background: var(--ck-clipboard-drop-target-color); margin-left: -1px; /* The triangle above the marker */ } .ck.ck-editor__editable .ck.ck-clipboard-drop-target-position span::after { content: ""; width: 0; height: 0; display: block; position: absolute; left: 50%; top: calc(var(--ck-clipboard-drop-target-dot-height) * -.5); transform: translateX(-50%); border-color: var(--ck-clipboard-drop-target-color) transparent transparent transparent; border-width: calc(var(--ck-clipboard-drop-target-dot-height)) calc(.5 * var(--ck-clipboard-drop-target-dot-width)) 0 calc(.5 * var(--ck-clipboard-drop-target-dot-width)); border-style: solid; } /* // Horizontal drop target (between blocks). & .ck.ck-clipboard-drop-target-position { display: block; position: relative; width: 100%; height: 0; margin: 0; text-align: initial; & .ck-clipboard-drop-target__line { position: absolute; width: 100%; height: 0; border: 1px solid var(--ck-clipboard-drop-target-color); margin-top: -1px; &::before { content: ""; width: 0; height: 0; display: block; position: absolute; left: calc(-1 * var(--ck-clipboard-drop-target-dot-size)); top: 0; transform: translateY(-50%); border-color: transparent transparent transparent var(--ck-clipboard-drop-target-color); border-width: var(--ck-clipboard-drop-target-dot-size) 0 var(--ck-clipboard-drop-target-dot-size) calc(2 * var(--ck-clipboard-drop-target-dot-size)); border-style: solid; } &::after { content: ""; width: 0; height: 0; display: block; position: absolute; right: calc(-1 * var(--ck-clipboard-drop-target-dot-size)); top: 0; transform: translateY(-50%); border-color: transparent var(--ck-clipboard-drop-target-color) transparent transparent; border-width: var(--ck-clipboard-drop-target-dot-size) calc(2 * var(--ck-clipboard-drop-target-dot-size)) var(--ck-clipboard-drop-target-dot-size) 0; border-style: solid; } } } */ /* * Styles of the widget that it a drop target. */ .ck.ck-editor__editable .ck-widget.ck-clipboard-drop-target-range { outline: var(--ck-widget-outline-thickness) solid var(--ck-clipboard-drop-target-color) !important; } /* * Styles of the widget being dragged (its preview). */ .ck.ck-editor__editable .ck-widget:-webkit-drag { zoom: 0.6; outline: none !important; } /* Source: ckeditor5-theme-lark/theme/ckeditor5-code-block/codeblock.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-color-code-block-label-background: hsl(0, 0%, 46%); } .ck.ck-editor__editable pre[data-language]::after { top: -1px; right: 10px; background: var(--ck-color-code-block-label-background); font-size: 10px; font-family: var(--ck-font-face); line-height: 16px; padding: var(--ck-spacing-tiny) var(--ck-spacing-medium); color: hsl(0, 0%, 100%); white-space: nowrap; } .ck.ck-code-block-dropdown .ck-dropdown__panel { /* There could be dozens of languages available. Use scroll to prevent a 10e6px dropdown. */ max-height: 250px; overflow-y: auto; overflow-x: hidden; } /* Source: ckeditor5-theme-lark/theme/ckeditor5-editor-classic/classiceditor.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ .ck.ck-editor__top .ck-sticky-panel .ck-toolbar { border-radius: 0; } .ck-rounded-corners :is(.ck.ck-editor__top .ck-sticky-panel .ck-toolbar), .ck.ck-editor__top .ck-sticky-panel .ck-toolbar.ck-rounded-corners { border-radius: var(--ck-border-radius); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ck.ck-editor__top .ck-sticky-panel .ck-toolbar { border-bottom-width: 0; } .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content_sticky .ck-toolbar { border-bottom-width: 1px; border-radius: 0; } .ck-rounded-corners :is(.ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content_sticky .ck-toolbar), .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content_sticky .ck-toolbar.ck-rounded-corners { border-radius: var(--ck-border-radius); border-radius: 0; } /* Note: Use ck-editor__main to make sure these styles don't apply to other editor types */ .ck.ck-editor__main > .ck-editor__editable { /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/113 */ background: var(--ck-color-base-background); border-radius: 0; } .ck-rounded-corners :is(.ck.ck-editor__main > .ck-editor__editable), .ck.ck-editor__main > .ck-editor__editable.ck-rounded-corners { border-radius: var(--ck-border-radius); border-top-left-radius: 0; border-top-right-radius: 0; } .ck.ck-editor__main > .ck-editor__editable:not(.ck-focused) { border-color: var(--ck-color-base-border); } /* Source: ckeditor5-theme-lark/theme/ckeditor5-engine/placeholder.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* See ckeditor/ckeditor5#936. */ .ck.ck-placeholder::before, .ck .ck-placeholder::before { cursor: text; color: var(--ck-color-engine-placeholder-text); } /* Source: ckeditor5-theme-lark/theme/ckeditor5-find-and-replace/findandreplaceform.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-find-and-replace-form { width: 400px; /* * The

needs tabindex="-1" for proper Esc handling after being clicked * but the side effect is that this creates a nasty focus outline in some browsers. */ } .ck.ck-find-and-replace-form:focus { outline: none; } .ck.ck-find-and-replace-form fieldset { flex-direction: row; flex-wrap: nowrap; align-items: center; align-content: stretch; padding: var(--ck-spacing-large); border: 0; margin: 0; } .ck.ck-find-and-replace-form fieldset > .ck-button { flex: 0 0 auto; } :is([dir="ltr"] :is(.ck.ck-find-and-replace-form fieldset)) > * + * { margin-left: var(--ck-spacing-standard); } :is([dir="rtl"] :is(.ck.ck-find-and-replace-form fieldset)) > * + * { margin-right: var(--ck-spacing-standard); } .ck.ck-find-and-replace-form fieldset .ck-labeled-field-view { flex: 1 1 auto; } .ck.ck-find-and-replace-form fieldset .ck-labeled-field-view .ck-input { width: 100%; min-width: 50px; } /* The find fieldset */ .ck.ck-find-and-replace-form fieldset.ck-find-and-replace-form__find { /* To display all controls in line when there's an error under the input */ align-items: flex-start; } .ck.ck-find-and-replace-form fieldset.ck-find-and-replace-form__find > .ck-button-find { font-weight: bold; /* Beef the find button up a little. It's the main action button in the form */ } .ck.ck-find-and-replace-form fieldset.ck-find-and-replace-form__find > .ck-button-find .ck-button__label { padding-left: var(--ck-spacing-large); padding-right: var(--ck-spacing-large); } .ck.ck-find-and-replace-form fieldset.ck-find-and-replace-form__find > .ck-button-prev > .ck-icon { transform: rotate(90deg); } .ck.ck-find-and-replace-form fieldset.ck-find-and-replace-form__find > .ck-button-next > .ck-icon { transform: rotate(-90deg); } .ck.ck-find-and-replace-form fieldset.ck-find-and-replace-form__find .ck-results-counter { top: 50%; transform: translateY(-50%); } [dir="ltr"] :is(.ck.ck-find-and-replace-form fieldset.ck-find-and-replace-form__find .ck-results-counter) { right: var(--ck-spacing-standard); } [dir="rtl"] :is(.ck.ck-find-and-replace-form fieldset.ck-find-and-replace-form__find .ck-results-counter) { left: var(--ck-spacing-standard); } .ck.ck-find-and-replace-form fieldset.ck-find-and-replace-form__find .ck-results-counter { color: var(--ck-color-base-border); } /* The replace fieldset */ .ck.ck-find-and-replace-form fieldset.ck-find-and-replace-form__replace { flex-wrap: wrap; justify-content: flex-end; margin-top: calc( -1 * var(--ck-spacing-large) ); } .ck.ck-find-and-replace-form fieldset.ck-find-and-replace-form__replace > .ck-labeled-field-view { margin-bottom: var(--ck-spacing-large); } .ck.ck-find-and-replace-form fieldset.ck-find-and-replace-form__replace > .ck-options-dropdown { margin-right: auto; margin-left: 0; } .ck.ck-find-and-replace-form fieldset.ck-find-and-replace-form__replace > .ck-labeled-field-view, .ck.ck-find-and-replace-form fieldset.ck-find-and-replace-form__replace > .ck-labeled-field-view .ck-input { width: 100%; } @media screen and (max-width: 600px) { .ck.ck-find-and-replace-form { width: 300px; } .ck.ck-find-and-replace-form fieldset { flex-wrap: wrap; /* The find fieldset */ } .ck.ck-find-and-replace-form fieldset.ck-find-and-replace-form__find .ck-labeled-field-view { flex: 1 0 auto; width: 100%; margin-bottom: var(--ck-spacing-standard); } .ck.ck-find-and-replace-form fieldset.ck-find-and-replace-form__find > .ck-button { text-align: center; } .ck.ck-find-and-replace-form fieldset.ck-find-and-replace-form__find > .ck-button:first-of-type { flex: 1 1 auto; } [dir="ltr"] :is(.ck.ck-find-and-replace-form fieldset.ck-find-and-replace-form__find > .ck-button:first-of-type) { margin-left: 0; } [dir="rtl"] :is(.ck.ck-find-and-replace-form fieldset.ck-find-and-replace-form__find > .ck-button:first-of-type) { margin-right: 0; } .ck.ck-find-and-replace-form fieldset.ck-find-and-replace-form__find > .ck-button:first-of-type .ck-button__label { width: 100%; text-align: center; } /* The replace fieldset */ .ck.ck-find-and-replace-form fieldset.ck-find-and-replace-form__replace > :not(.ck-labeled-field-view) { flex: 1 1 auto; } .ck.ck-find-and-replace-form fieldset.ck-find-and-replace-form__replace > .ck-dropdown:not(.ck-labeled-field-view) { flex-grow: 0; } .ck.ck-find-and-replace-form fieldset.ck-find-and-replace-form__replace > .ck-button:not(.ck-labeled-field-view) > .ck-button__label { width: 100%; text-align: center; } } /* Source: ckeditor5-theme-lark/theme/ckeditor5-font/fontcolor.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck .ck-button.ck-color-table__remove-color { padding: calc(var(--ck-spacing-standard) / 2 ) var(--ck-spacing-standard); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ck .ck-button.ck-color-table__remove-color:not(:focus) { border-bottom: 1px solid var(--ck-color-base-border); } [dir="ltr"] :is(.ck .ck-button.ck-color-table__remove-color .ck.ck-icon) { margin-right: var(--ck-spacing-standard); } [dir="rtl"] :is(.ck .ck-button.ck-color-table__remove-color .ck.ck-icon) { margin-left: var(--ck-spacing-standard); } /* Source: ckeditor5-theme-lark/theme/ckeditor5-heading/heading.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* Resize dropdown's button label. */ .ck.ck-dropdown.ck-heading-dropdown .ck-dropdown__button .ck-button__label { width: 8em; } .ck.ck-dropdown.ck-heading-dropdown .ck-dropdown__panel .ck-list__item { min-width: 18em; } /* Source: ckeditor5-theme-lark/theme/ckeditor5-html-embed/htmlembed.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-html-embed-content-width: calc(100% - 1.5 * var(--ck-icon-size)); --ck-html-embed-source-height: 10em; --ck-html-embed-unfocused-outline-width: 1px; --ck-html-embed-content-min-height: calc(var(--ck-icon-size) + var(--ck-spacing-standard)); --ck-html-embed-source-disabled-background: var(--ck-color-base-foreground); --ck-html-embed-source-disabled-color: hsl(0deg 0% 45%); } /* The feature container. */ .ck-widget.raw-html-embed { font-size: var(--ck-font-size-base); background-color: var(--ck-color-base-foreground); } .ck-widget.raw-html-embed:not(.ck-widget_selected):not(:hover) { outline: var(--ck-html-embed-unfocused-outline-width) dashed var(--ck-color-widget-blurred-border); } /* HTML embed widget itself should respect UI language direction */ .ck-widget.raw-html-embed[dir="ltr"] { text-align: left; } .ck-widget.raw-html-embed[dir="rtl"] { text-align: right; } /* ----- Embed label in the upper left corner ----------------------------------------------- */ .ck-widget.raw-html-embed::before { content: attr(data-html-embed-label); top: calc(-1 * var(--ck-html-embed-unfocused-outline-width)); left: var(--ck-spacing-standard); background: hsl(0deg 0% 60%); transition: background var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve); padding: calc(var(--ck-spacing-tiny) + var(--ck-html-embed-unfocused-outline-width)) var(--ck-spacing-small) var(--ck-spacing-tiny); border-radius: 0 0 var(--ck-border-radius) var(--ck-border-radius); color: var(--ck-color-base-background); font-size: var(--ck-font-size-tiny); font-family: var(--ck-font-face); } .ck-widget.raw-html-embed[dir="rtl"]::before { left: auto; right: var(--ck-spacing-standard); } /* Make space for label but it only collides in LTR languages */ .ck-widget.raw-html-embed[dir="ltr"] .ck-widget__type-around .ck-widget__type-around__button.ck-widget__type-around__button_before { margin-left: 50px; } .ck.ck-editor__editable.ck-blurred .ck-widget.raw-html-embed.ck-widget_selected::before { top: 0px; padding: var(--ck-spacing-tiny) var(--ck-spacing-small); } .ck.ck-editor__editable:not(.ck-blurred) .ck-widget.raw-html-embed.ck-widget_selected::before { top: 0; padding: var(--ck-spacing-tiny) var(--ck-spacing-small); background: var(--ck-color-focus-border); } .ck.ck-editor__editable .ck-widget.raw-html-embed:not(.ck-widget_selected):hover::before { top: 0px; padding: var(--ck-spacing-tiny) var(--ck-spacing-small); } /* ----- Emebed internals --------------------------------------------------------------------- */ .ck-widget.raw-html-embed .raw-html-embed__content-wrapper { padding: var(--ck-spacing-standard); } /* The switch mode button wrapper. */ .ck-widget.raw-html-embed .raw-html-embed__buttons-wrapper { top: var(--ck-spacing-standard); right: var(--ck-spacing-standard); } .ck-widget.raw-html-embed .raw-html-embed__buttons-wrapper .ck-button.raw-html-embed__save-button { color: var(--ck-color-button-save); } .ck-widget.raw-html-embed .raw-html-embed__buttons-wrapper .ck-button.raw-html-embed__cancel-button { color: var(--ck-color-button-cancel); } .ck-widget.raw-html-embed .raw-html-embed__buttons-wrapper .ck-button:not(:first-child) { margin-top: var(--ck-spacing-small); } .ck-widget.raw-html-embed[dir="rtl"] .raw-html-embed__buttons-wrapper { left: var(--ck-spacing-standard); right: auto; } /* The edit source element. */ .ck-widget.raw-html-embed .raw-html-embed__source { box-sizing: border-box; height: var(--ck-html-embed-source-height); width: var(--ck-html-embed-content-width); resize: none; min-width: 0; padding: var(--ck-spacing-standard); font-family: monospace; tab-size: 4; white-space: pre-wrap; font-size: var(--ck-font-size-base); /* Safari needs this. */ /* HTML code is direction–agnostic. */ text-align: left; direction: ltr; } .ck-widget.raw-html-embed .raw-html-embed__source[disabled] { background: var(--ck-html-embed-source-disabled-background); color: var(--ck-html-embed-source-disabled-color); /* Safari needs this for the proper text color in disabled input (https://github.com/ckeditor/ckeditor5/issues/8320). */ -webkit-text-fill-color: var(--ck-html-embed-source-disabled-color); opacity: 1; } /* The preview data container. */ .ck-widget.raw-html-embed .raw-html-embed__preview { min-height: var(--ck-html-embed-content-min-height); width: var(--ck-html-embed-content-width); /* Disable all mouse interaction as long as the editor is not read–only. */ } .ck-editor__editable:not(.ck-read-only) :is(.ck-widget.raw-html-embed .raw-html-embed__preview) { pointer-events: none; } .ck-widget.raw-html-embed .raw-html-embed__preview-content { box-sizing: border-box; background-color: var(--ck-color-base-foreground); } .ck-widget.raw-html-embed .raw-html-embed__preview-content > * { margin-left: auto; margin-right: auto; } .ck-widget.raw-html-embed .raw-html-embed__preview-placeholder { color: var(--ck-html-embed-source-disabled-color) } /* Source: ckeditor5-theme-lark/theme/ckeditor5-image/imageuploadicon.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-color-image-upload-icon: hsl(0, 0%, 100%); --ck-color-image-upload-icon-background: hsl(120, 100%, 27%); /* Match the icon size with the linked image indicator brought by the link image feature. */ --ck-image-upload-icon-size: 20; --ck-image-upload-icon-width: 2px; --ck-image-upload-icon-is-visible: clamp(0px, 100% - 50px, 1px); } .ck-image-upload-complete-icon { opacity: 0; background: var(--ck-color-image-upload-icon-background); animation-name: ck-upload-complete-icon-show, ck-upload-complete-icon-hide; animation-fill-mode: forwards, forwards; animation-duration: 500ms, 500ms; /* To make animation scalable. */ font-size: calc(1px * var(--ck-image-upload-icon-size)); /* Hide completed upload icon after 3 seconds. */ animation-delay: 0ms, 3000ms; /* * Use CSS math to simulate container queries. * https://css-tricks.com/the-raven-technique-one-step-closer-to-container-queries/#what-about-showing-and-hiding-things */ overflow: hidden; width: calc(var(--ck-image-upload-icon-is-visible) * var(--ck-image-upload-icon-size)); height: calc(var(--ck-image-upload-icon-is-visible) * var(--ck-image-upload-icon-size)); /* This is check icon element made from border-width mixed with animations. */ } .ck-image-upload-complete-icon::after { /* Because of border transformation we need to "hard code" left position. */ left: 25%; top: 50%; opacity: 0; height: 0; width: 0; transform: scaleX(-1) rotate(135deg); transform-origin: left top; border-top: var(--ck-image-upload-icon-width) solid var(--ck-color-image-upload-icon); border-right: var(--ck-image-upload-icon-width) solid var(--ck-color-image-upload-icon); animation-name: ck-upload-complete-icon-check; animation-duration: 500ms; animation-delay: 500ms; animation-fill-mode: forwards; /* #1095. While reset is not providing proper box-sizing for pseudoelements, we need to handle it. */ box-sizing: border-box; } @keyframes ck-upload-complete-icon-show { from { opacity: 0; } to { opacity: 1; } } @keyframes ck-upload-complete-icon-hide { from { opacity: 1; } to { opacity: 0; } } @keyframes ck-upload-complete-icon-check { 0% { opacity: 1; width: 0; height: 0; } 33% { width: 0.3em; height: 0; } 100% { opacity: 1; width: 0.3em; height: 0.45em; } } /* Source: ckeditor5-theme-lark/theme/ckeditor5-image/imageuploadloader.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-color-upload-placeholder-loader: hsl(0, 0%, 70%); --ck-upload-placeholder-loader-size: 32px; --ck-upload-placeholder-image-aspect-ratio: 2.8; } .ck .ck-image-upload-placeholder { /* We need to control the full width of the SVG gray background. */ width: 100%; margin: 0; } .ck .ck-image-upload-placeholder.image-inline { width: calc( 2 * var(--ck-upload-placeholder-loader-size) * var(--ck-upload-placeholder-image-aspect-ratio) ); } .ck .ck-image-upload-placeholder img { /* * This is an arbitrary aspect for a 1x1 px GIF to display to the user. Not too tall, not too short. * There's nothing special about this number except that it should make the image placeholder look like * a real image during this short period after the upload started and before the image was read from the * file system (and a rich preview was loaded). */ aspect-ratio: var(--ck-upload-placeholder-image-aspect-ratio); } .ck .ck-upload-placeholder-loader { width: 100%; height: 100%; } .ck .ck-upload-placeholder-loader::before { width: var(--ck-upload-placeholder-loader-size); height: var(--ck-upload-placeholder-loader-size); border-radius: 50%; border-top: 3px solid var(--ck-color-upload-placeholder-loader); border-right: 2px solid transparent; animation: ck-upload-placeholder-loader 1s linear infinite; } @keyframes ck-upload-placeholder-loader { to { transform: rotate( 360deg ); } } /* Source: ckeditor5-theme-lark/theme/ckeditor5-image/imageuploadprogress.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* Showing animation. */ .ck.ck-editor__editable .image.ck-appear, .ck.ck-editor__editable .image-inline.ck-appear { animation: fadeIn 700ms; } /* Upload progress bar. */ .ck.ck-editor__editable .image .ck-progress-bar, .ck.ck-editor__editable .image-inline .ck-progress-bar { height: 2px; width: 0; background: var(--ck-color-upload-bar-background); transition: width 100ms; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Source: ckeditor5-theme-lark/theme/ckeditor5-link/link.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* Class added to span element surrounding currently selected link. */ .ck .ck-link_selected { background: var(--ck-color-link-selected-background); /* Give linked inline images some outline to let the user know they are also part of the link. */ } .ck .ck-link_selected span.image-inline { outline: var(--ck-widget-outline-thickness) solid var(--ck-color-link-selected-background); } /* * Classes used by the "fake visual selection" displayed in the content when an input * in the link UI has focus (the browser does not render the native selection in this state). */ .ck .ck-fake-link-selection { background: var(--ck-color-link-fake-selection); } /* A collapsed fake visual selection. */ .ck .ck-fake-link-selection_collapsed { height: 100%; border-right: 1px solid var(--ck-color-base-text); margin-right: -1px; outline: solid 1px hsla(0, 0%, 100%, .5); } /* Source: ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Makes element unselectable. */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A visual style of focused element's border. */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A helper to combine multiple shadows. */ /** * Gives an element a drop shadow so it looks like a floating panel. */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-link-actions .ck-button.ck-link-actions__preview { padding-left: 0; padding-right: 0; } .ck.ck-link-actions .ck-button.ck-link-actions__preview .ck-button__label { padding: 0 var(--ck-spacing-medium); color: var(--ck-color-link-default); text-overflow: ellipsis; cursor: pointer; /* Match the box model of the link editor form's input so the balloon does not change width when moving between actions and the form. */ max-width: var(--ck-input-width); min-width: 3em; text-align: center; } .ck.ck-link-actions .ck-button.ck-link-actions__preview .ck-button__label:hover { text-decoration: underline; } .ck.ck-link-actions .ck-button.ck-link-actions__preview, .ck.ck-link-actions .ck-button.ck-link-actions__preview:hover, .ck.ck-link-actions .ck-button.ck-link-actions__preview:focus, .ck.ck-link-actions .ck-button.ck-link-actions__preview:active { background: none; } .ck.ck-link-actions .ck-button.ck-link-actions__preview:active { box-shadow: none; } .ck.ck-link-actions .ck-button.ck-link-actions__preview:focus .ck-button__label { text-decoration: underline; } [dir="ltr"] .ck.ck-link-actions .ck-button:not(:first-child) { margin-left: var(--ck-spacing-standard); } [dir="rtl"] .ck.ck-link-actions .ck-button:not(:last-child) { margin-left: var(--ck-spacing-standard); } @media screen and (max-width: 600px) { .ck.ck-link-actions .ck-button.ck-link-actions__preview { margin: var(--ck-spacing-standard) var(--ck-spacing-standard) 0; } .ck.ck-link-actions .ck-button.ck-link-actions__preview .ck-button__label { min-width: 0; max-width: 100%; } [dir="ltr"] :is(.ck.ck-link-actions .ck-button:not(.ck-link-actions__preview)) { margin-left: 0; } [dir="rtl"] :is(.ck.ck-link-actions .ck-button:not(.ck-link-actions__preview)) { margin-left: 0; } } /* Source: ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Style link form differently when manual decorators are available. * See: https://github.com/ckeditor/ckeditor5-link/issues/186. */ .ck.ck-link-form_layout-vertical { padding: 0; min-width: var(--ck-input-width); } .ck.ck-link-form_layout-vertical .ck-labeled-field-view { margin: var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-small); } .ck.ck-link-form_layout-vertical .ck-labeled-field-view .ck-input-text { min-width: 0; width: 100%; } .ck.ck-link-form_layout-vertical > .ck-button { padding: var(--ck-spacing-standard); margin: 0; width: 50%; border-radius: 0; } .ck.ck-link-form_layout-vertical > .ck-button:not(:focus) { border-top: 1px solid var(--ck-color-base-border); } [dir="ltr"] :is(.ck.ck-link-form_layout-vertical > .ck-button) { margin-left: 0; } [dir="rtl"] :is(.ck.ck-link-form_layout-vertical > .ck-button) { margin-left: 0; } [dir="rtl"] :is(.ck.ck-link-form_layout-vertical > .ck-button):last-of-type { border-right: 1px solid var(--ck-color-base-border); } /* Using additional `.ck` class for stronger CSS specificity than `.ck.ck-link-form > :not(:first-child)`. */ .ck.ck-link-form_layout-vertical .ck.ck-list { margin: var(--ck-spacing-standard) var(--ck-spacing-large); } .ck.ck-link-form_layout-vertical .ck.ck-list .ck-button.ck-switchbutton { padding: 0; width: 100%; } .ck.ck-link-form_layout-vertical .ck.ck-list .ck-button.ck-switchbutton:hover { background: none; } /* Source: ckeditor5-theme-lark/theme/ckeditor5-link/linkimage.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { /* Match the icon size with the upload indicator brought by the image upload feature. */ --ck-link-image-indicator-icon-size: 20; --ck-link-image-indicator-icon-is-visible: clamp(0px, 100% - 50px, 1px); } /* Linked image indicator */ .ck.ck-editor__editable figure.image > a::after, .ck.ck-editor__editable a span.image-inline::after { content: ""; /* * Smaller images should have the icon closer to the border. * Match the icon position with the upload indicator brought by the image upload feature. */ top: min(var(--ck-spacing-medium), 6%); right: min(var(--ck-spacing-medium), 6%); background-color: hsla(0, 0%, 0%, .4); background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI2ZmZiIgZD0ibTExLjA3NyAxNSAuOTkxLTEuNDE2YS43NS43NSAwIDEgMSAxLjIyOS44NmwtMS4xNDggMS42NGEuNzQ4Ljc0OCAwIDAgMS0uMjE3LjIwNiA1LjI1MSA1LjI1MSAwIDAgMS04LjUwMy01Ljk1NS43NDEuNzQxIDAgMCAxIC4xMi0uMjc0bDEuMTQ3LTEuNjM5YS43NS43NSAwIDEgMSAxLjIyOC44Nkw0LjkzMyAxMC43bC4wMDYuMDAzYTMuNzUgMy43NSAwIDAgMCA2LjEzMiA0LjI5NGwuMDA2LjAwNHptNS40OTQtNS4zMzVhLjc0OC43NDggMCAwIDEtLjEyLjI3NGwtMS4xNDcgMS42MzlhLjc1Ljc1IDAgMSAxLTEuMjI4LS44NmwuODYtMS4yM2EzLjc1IDMuNzUgMCAwIDAtNi4xNDQtNC4zMDFsLS44NiAxLjIyOWEuNzUuNzUgMCAwIDEtMS4yMjktLjg2bDEuMTQ4LTEuNjRhLjc0OC43NDggMCAwIDEgLjIxNy0uMjA2IDUuMjUxIDUuMjUxIDAgMCAxIDguNTAzIDUuOTU1em0tNC41NjMtMi41MzJhLjc1Ljc1IDAgMCAxIC4xODQgMS4wNDVsLTMuMTU1IDQuNTA1YS43NS43NSAwIDEgMS0xLjIyOS0uODZsMy4xNTUtNC41MDZhLjc1Ljc1IDAgMCAxIDEuMDQ1LS4xODR6Ii8+PC9zdmc+"); background-size: 14px; background-repeat: no-repeat; background-position: center; border-radius: 100%; /* * Use CSS math to simulate container queries. * https://css-tricks.com/the-raven-technique-one-step-closer-to-container-queries/#what-about-showing-and-hiding-things */ overflow: hidden; width: calc(var(--ck-link-image-indicator-icon-is-visible) * var(--ck-link-image-indicator-icon-size)); height: calc(var(--ck-link-image-indicator-icon-is-visible) * var(--ck-link-image-indicator-icon-size)); } /* Source: ckeditor5-theme-lark/theme/ckeditor5-list/collapsible.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-collapsible-arrow-size: calc(0.5 * var(--ck-icon-size)); } .ck.ck-collapsible > .ck.ck-button { width: 100%; font-weight: bold; padding: var(--ck-spacing-medium) var(--ck-spacing-large); border-radius: 0; color: inherit; } .ck.ck-collapsible > .ck.ck-button:focus { background: transparent; } .ck.ck-collapsible > .ck.ck-button:active, .ck.ck-collapsible > .ck.ck-button:not(:focus), .ck.ck-collapsible > .ck.ck-button:hover:not(:focus) { background: transparent; border-color: transparent; box-shadow: none; } .ck.ck-collapsible > .ck.ck-button > .ck-icon { margin-right: var(--ck-spacing-medium); width: var(--ck-collapsible-arrow-size); } .ck.ck-collapsible > .ck-collapsible__children { padding: 0 var(--ck-spacing-large) var(--ck-spacing-large); } .ck.ck-collapsible.ck-collapsible_collapsed > .ck.ck-button .ck-icon { transform: rotate(-90deg); } /* Source: ckeditor5-theme-lark/theme/ckeditor5-list/listproperties.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* When there are no list styles and there is no collapsible. */ .ck.ck-list-properties.ck-list-properties_without-styles { padding: var(--ck-spacing-large); } .ck.ck-list-properties.ck-list-properties_without-styles > * { min-width: 14em; } :is(.ck.ck-list-properties.ck-list-properties_without-styles > *) + * { margin-top: var(--ck-spacing-standard); } /* * When the numbered list property fields (start at, reversed) should be displayed, * more horizontal space is needed. Reconfigure the style grid to create that space. */ .ck.ck-list-properties.ck-list-properties_with-numbered-properties > .ck-list-styles-list { grid-template-columns: repeat( 4, auto ); } /* When list styles are rendered and property fields are in a collapsible. */ .ck.ck-list-properties.ck-list-properties_with-numbered-properties > .ck-collapsible { border-top: 1px solid var(--ck-color-base-border); } .ck.ck-list-properties.ck-list-properties_with-numbered-properties > .ck-collapsible > .ck-collapsible__children > * { width: 100%; } :is(.ck.ck-list-properties.ck-list-properties_with-numbered-properties > .ck-collapsible > .ck-collapsible__children > *) + * { margin-top: var(--ck-spacing-standard); } .ck.ck-list-properties .ck.ck-numbered-list-properties__start-index .ck-input { min-width: auto; width: 100%; } .ck.ck-list-properties .ck.ck-numbered-list-properties__reversed-order { background: transparent; padding-left: 0; padding-right: 0; margin-bottom: calc(-1 * var(--ck-spacing-tiny)); } .ck.ck-list-properties .ck.ck-numbered-list-properties__reversed-order:active, .ck.ck-list-properties .ck.ck-numbered-list-properties__reversed-order:hover { box-shadow: none; border-color: transparent; background: none; } /* Source: ckeditor5-theme-lark/theme/ckeditor5-list/liststyles.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-list-style-button-size: 44px; } .ck.ck-list-styles-list { grid-template-columns: repeat( 3, auto ); row-gap: var(--ck-spacing-medium); column-gap: var(--ck-spacing-medium); padding: var(--ck-spacing-large); } .ck.ck-list-styles-list .ck-button { /* Make the button look like a thumbnail (the icon "takes it all"). */ width: var(--ck-list-style-button-size); height: var(--ck-list-style-button-size); padding: 0; /* * Buttons are aligned by the grid so disable default button margins to not collide with the * gaps in the grid. */ margin: 0; /* * Make sure the button border (which is displayed on focus, BTW) does not steal pixels * from the button dimensions and, as a result, decrease the size of the icon * (which becomes blurry as it scales down). */ box-sizing: content-box; } .ck.ck-list-styles-list .ck-button .ck-icon { width: var(--ck-list-style-button-size); height: var(--ck-list-style-button-size); } /* Source: ckeditor5-theme-lark/theme/ckeditor5-media-embed/mediaembedediting.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-media-embed-placeholder-icon-size: 3em; --ck-color-media-embed-placeholder-url-text: hsl(0, 0%, 46%); --ck-color-media-embed-placeholder-url-text-hover: var(--ck-color-base-text); } .ck-media__wrapper { margin: 0 auto; } .ck-media__wrapper .ck-media__placeholder { padding: calc( 3 * var(--ck-spacing-standard) ); background: var(--ck-color-base-foreground); } .ck-media__wrapper .ck-media__placeholder .ck-media__placeholder__icon { min-width: var(--ck-media-embed-placeholder-icon-size); height: var(--ck-media-embed-placeholder-icon-size); margin-bottom: var(--ck-spacing-large); background-position: center; background-size: cover; } .ck-media__wrapper .ck-media__placeholder .ck-media__placeholder__icon .ck-icon { width: 100%; height: 100%; } .ck-media__wrapper .ck-media__placeholder .ck-media__placeholder__url__text { color: var(--ck-color-media-embed-placeholder-url-text); white-space: nowrap; text-align: center; font-style: italic; text-overflow: ellipsis; } .ck-media__wrapper .ck-media__placeholder .ck-media__placeholder__url__text:hover { color: var(--ck-color-media-embed-placeholder-url-text-hover); cursor: pointer; text-decoration: underline; } .ck-media__wrapper[data-oembed-url*="open.spotify.com"] { max-width: 300px; max-height: 380px; } .ck-media__wrapper[data-oembed-url*="google.com/maps"] .ck-media__placeholder__icon, .ck-media__wrapper[data-oembed-url*="goo.gl/maps"] .ck-media__placeholder__icon, .ck-media__wrapper[data-oembed-url*="maps.google.com"] .ck-media__placeholder__icon, .ck-media__wrapper[data-oembed-url*="maps.app.goo.gl"] .ck-media__placeholder__icon { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTAuMzc4IiBoZWlnaHQ9IjI1NC4xNjciIHZpZXdCb3g9IjAgMCA2Ni4yNDYgNjcuMjQ4Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTcyLjUzMSAtMjE4LjQ1NSkgc2NhbGUoLjk4MDEyKSI+PHJlY3Qgcnk9IjUuMjM4IiByeD0iNS4yMzgiIHk9IjIzMS4zOTkiIHg9IjE3Ni4wMzEiIGhlaWdodD0iNjAuMDk5IiB3aWR0aD0iNjAuMDk5IiBmaWxsPSIjMzRhNjY4IiBwYWludC1vcmRlcj0ibWFya2VycyBzdHJva2UgZmlsbCIvPjxwYXRoIGQ9Ik0yMDYuNDc3IDI2MC45bC0yOC45ODcgMjguOTg3YTUuMjE4IDUuMjE4IDAgMCAwIDMuNzggMS42MWg0OS42MjFjMS42OTQgMCAzLjE5LS43OTggNC4xNDYtMi4wMzd6IiBmaWxsPSIjNWM4OGM1Ii8+PHBhdGggZD0iTTIyNi43NDIgMjIyLjk4OGMtOS4yNjYgMC0xNi43NzcgNy4xNy0xNi43NzcgMTYuMDE0LjAwNyAyLjc2Mi42NjMgNS40NzQgMi4wOTMgNy44NzUuNDMuNzAzLjgzIDEuNDA4IDEuMTkgMi4xMDcuMzMzLjUwMi42NSAxLjAwNS45NSAxLjUwOC4zNDMuNDc3LjY3My45NTcuOTg4IDEuNDQgMS4zMSAxLjc2OSAyLjUgMy41MDIgMy42MzcgNS4xNjguNzkzIDEuMjc1IDEuNjgzIDIuNjQgMi40NjYgMy45OSAyLjM2MyA0LjA5NCA0LjAwNyA4LjA5MiA0LjYgMTMuOTE0di4wMTJjLjE4Mi40MTIuNTE2LjY2Ni44NzkuNjY3LjQwMy0uMDAxLjc2OC0uMzE0LjkzLS43OTkuNjAzLTUuNzU2IDIuMjM4LTkuNzI5IDQuNTg1LTEzLjc5NC43ODItMS4zNSAxLjY3My0yLjcxNSAyLjQ2NS0zLjk5IDEuMTM3LTEuNjY2IDIuMzI4LTMuNCAzLjYzOC01LjE2OS4zMTUtLjQ4Mi42NDUtLjk2Mi45ODgtMS40MzkuMy0uNTAzLjYxNy0xLjAwNi45NS0xLjUwOC4zNTktLjcuNzYtMS40MDQgMS4xOS0yLjEwNyAxLjQyNi0yLjQwMiAyLTUuMTE0IDIuMDA0LTcuODc1IDAtOC44NDQtNy41MTEtMTYuMDE0LTE2Ljc3Ni0xNi4wMTR6IiBmaWxsPSIjZGQ0YjNlIiBwYWludC1vcmRlcj0ibWFya2VycyBzdHJva2UgZmlsbCIvPjxlbGxpcHNlIHJ5PSI1LjU2NCIgcng9IjUuODI4IiBjeT0iMjM5LjAwMiIgY3g9IjIyNi43NDIiIGZpbGw9IiM4MDJkMjciIHBhaW50LW9yZGVyPSJtYXJrZXJzIHN0cm9rZSBmaWxsIi8+PHBhdGggZD0iTTE5MC4zMDEgMjM3LjI4M2MtNC42NyAwLTguNDU3IDMuODUzLTguNDU3IDguNjA2czMuNzg2IDguNjA3IDguNDU3IDguNjA3YzMuMDQzIDAgNC44MDYtLjk1OCA2LjMzNy0yLjUxNiAxLjUzLTEuNTU3IDIuMDg3LTMuOTEzIDIuMDg3LTYuMjkgMC0uMzYyLS4wMjMtLjcyMi0uMDY0LTEuMDc5aC04LjI1N3YzLjA0M2g0Ljg1Yy0uMTk3Ljc1OS0uNTMxIDEuNDUtMS4wNTggMS45ODYtLjk0Mi45NTgtMi4wMjggMS41NDgtMy45MDEgMS41NDgtMi44NzYgMC01LjIwOC0yLjM3Mi01LjIwOC01LjI5OSAwLTIuOTI2IDIuMzMyLTUuMjk5IDUuMjA4LTUuMjk5IDEuMzk5IDAgMi42MTguNDA3IDMuNTg0IDEuMjkzbDIuMzgxLTIuMzhjMC0uMDAyLS4wMDMtLjAwNC0uMDA0LS4wMDUtMS41ODgtMS41MjQtMy42Mi0yLjIxNS01Ljk1NS0yLjIxNXptNC40MyA1LjY2bC4wMDMuMDA2di0uMDAzeiIgZmlsbD0iI2ZmZiIgcGFpbnQtb3JkZXI9Im1hcmtlcnMgc3Ryb2tlIGZpbGwiLz48cGF0aCBkPSJNMjE1LjE4NCAyNTEuOTI5bC03Ljk4IDcuOTc5IDI4LjQ3NyAyOC40NzVjLjI4Ny0uNjQ5LjQ0OS0xLjM2Ni40NDktMi4xMjN2LTMxLjE2NWMtLjQ2OS42NzUtLjkzNCAxLjM0OS0xLjM4MiAyLjAwNS0uNzkyIDEuMjc1LTEuNjgyIDIuNjQtMi40NjUgMy45OS0yLjM0NyA0LjA2NS0zLjk4MiA4LjAzOC00LjU4NSAxMy43OTQtLjE2Mi40ODUtLjUyNy43OTgtLjkzLjc5OS0uMzYzLS4wMDEtLjY5Ny0uMjU1LS44NzktLjY2N3YtLjAxMmMtLjU5My01LjgyMi0yLjIzNy05LjgyLTQuNi0xMy45MTQtLjc4My0xLjM1LTEuNjczLTIuNzE1LTIuNDY2LTMuOTktMS4xMzctMS42NjYtMi4zMjctMy40LTMuNjM3LTUuMTY5bC0uMDAyLS4wMDN6IiBmaWxsPSIjYzNjM2MzIi8+PHBhdGggZD0iTTIxMi45ODMgMjQ4LjQ5NWwtMzYuOTUyIDM2Ljk1M3YuODEyYTUuMjI3IDUuMjI3IDAgMCAwIDUuMjM4IDUuMjM4aDEuMDE1bDM1LjY2Ni0zNS42NjZhMTM2LjI3NSAxMzYuMjc1IDAgMCAwLTIuNzY0LTMuOSAzNy41NzUgMzcuNTc1IDAgMCAwLS45ODktMS40NGMtLjI5OS0uNTAzLS42MTYtMS4wMDYtLjk1LTEuNTA4LS4wODMtLjE2Mi0uMTc2LS4zMjYtLjI2NC0uNDg5eiIgZmlsbD0iI2ZkZGM0ZiIgcGFpbnQtb3JkZXI9Im1hcmtlcnMgc3Ryb2tlIGZpbGwiLz48cGF0aCBkPSJNMjExLjk5OCAyNjEuMDgzbC02LjE1MiA2LjE1MSAyNC4yNjQgMjQuMjY0aC43ODFhNS4yMjcgNS4yMjcgMCAwIDAgNS4yMzktNS4yMzh2LTEuMDQ1eiIgZmlsbD0iI2ZmZiIgcGFpbnQtb3JkZXI9Im1hcmtlcnMgc3Ryb2tlIGZpbGwiLz48L2c+PC9zdmc+); } .ck-media__wrapper[data-oembed-url*="facebook.com"] .ck-media__placeholder { background: hsl(220, 46%, 48%); } .ck-media__wrapper[data-oembed-url*="facebook.com"] .ck-media__placeholder .ck-media__placeholder__icon { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxMDI0cHgiIGhlaWdodD0iMTAyNHB4IiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPiAgICAgICAgPHRpdGxlPkZpbGwgMTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9ImZMb2dvX1doaXRlIiBmaWxsPSIjRkZGRkZFIj4gICAgICAgICAgICA8cGF0aCBkPSJNOTY3LjQ4NCwwIEw1Ni41MTcsMCBDMjUuMzA0LDAgMCwyNS4zMDQgMCw1Ni41MTcgTDAsOTY3LjQ4MyBDMCw5OTguNjk0IDI1LjI5NywxMDI0IDU2LjUyMiwxMDI0IEw1NDcsMTAyNCBMNTQ3LDYyOCBMNDE0LDYyOCBMNDE0LDQ3MyBMNTQ3LDQ3MyBMNTQ3LDM1OS4wMjkgQzU0NywyMjYuNzY3IDYyNy43NzMsMTU0Ljc0NyA3NDUuNzU2LDE1NC43NDcgQzgwMi4yNjksMTU0Ljc0NyA4NTAuODQyLDE1OC45NTUgODY1LDE2MC44MzYgTDg2NSwyOTkgTDc4My4zODQsMjk5LjAzNyBDNzE5LjM5MSwyOTkuMDM3IDcwNywzMjkuNTI5IDcwNywzNzQuMjczIEw3MDcsNDczIEw4NjAuNDg3LDQ3MyBMODQwLjUwMSw2MjggTDcwNyw2MjggTDcwNywxMDI0IEw5NjcuNDg0LDEwMjQgQzk5OC42OTcsMTAyNCAxMDI0LDk5OC42OTcgMTAyNCw5NjcuNDg0IEwxMDI0LDU2LjUxNSBDMTAyNCwyNS4zMDMgOTk4LjY5NywwIDk2Ny40ODQsMCIgaWQ9IkZpbGwtMSI+PC9wYXRoPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+); } .ck-media__wrapper[data-oembed-url*="facebook.com"] .ck-media__placeholder .ck-media__placeholder__url__text { color: hsl(220, 100%, 90%); } .ck-media__wrapper[data-oembed-url*="facebook.com"] .ck-media__placeholder .ck-media__placeholder__url__text:hover { color: hsl(0, 0%, 100%); } .ck-media__wrapper[data-oembed-url*="instagram.com"] .ck-media__placeholder { background: linear-gradient(-135deg,hsl(246, 100%, 39%),hsl(302, 100%, 36%),hsl(0, 100%, 48%)); } .ck-media__wrapper[data-oembed-url*="instagram.com"] .ck-media__placeholder .ck-media__placeholder__icon { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI1MDRweCIgaGVpZ2h0PSI1MDRweCIgdmlld0JveD0iMCAwIDUwNCA1MDQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+Z2x5cGgtbG9nb19NYXkyMDE2PC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxkZWZzPiAgICAgICAgPHBvbHlnb24gaWQ9InBhdGgtMSIgcG9pbnRzPSIwIDAuMTU5IDUwMy44NDEgMC4xNTkgNTAzLjg0MSA1MDMuOTQgMCA1MDMuOTQiPjwvcG9seWdvbj4gICAgPC9kZWZzPiAgICA8ZyBpZD0iZ2x5cGgtbG9nb19NYXkyMDE2IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxnIGlkPSJHcm91cC0zIj4gICAgICAgICAgICA8bWFzayBpZD0ibWFzay0yIiBmaWxsPSJ3aGl0ZSI+ICAgICAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+ICAgICAgICAgICAgPC9tYXNrPiAgICAgICAgICAgIDxnIGlkPSJDbGlwLTIiPjwvZz4gICAgICAgICAgICA8cGF0aCBkPSJNMjUxLjkyMSwwLjE1OSBDMTgzLjUwMywwLjE1OSAxNzQuOTI0LDAuNDQ5IDE0OC4wNTQsMS42NzUgQzEyMS4yNCwyLjg5OCAxMDIuOTI3LDcuMTU3IDg2LjkwMywxMy4zODUgQzcwLjMzNywxOS44MjIgNTYuMjg4LDI4LjQzNiA0Mi4yODIsNDIuNDQxIEMyOC4yNzcsNTYuNDQ3IDE5LjY2Myw3MC40OTYgMTMuMjI2LDg3LjA2MiBDNi45OTgsMTAzLjA4NiAyLjczOSwxMjEuMzk5IDEuNTE2LDE0OC4yMTMgQzAuMjksMTc1LjA4MyAwLDE4My42NjIgMCwyNTIuMDggQzAsMzIwLjQ5NyAwLjI5LDMyOS4wNzYgMS41MTYsMzU1Ljk0NiBDMi43MzksMzgyLjc2IDYuOTk4LDQwMS4wNzMgMTMuMjI2LDQxNy4wOTcgQzE5LjY2Myw0MzMuNjYzIDI4LjI3Nyw0NDcuNzEyIDQyLjI4Miw0NjEuNzE4IEM1Ni4yODgsNDc1LjcyMyA3MC4zMzcsNDg0LjMzNyA4Ni45MDMsNDkwLjc3NSBDMTAyLjkyNyw0OTcuMDAyIDEyMS4yNCw1MDEuMjYxIDE0OC4wNTQsNTAyLjQ4NCBDMTc0LjkyNCw1MDMuNzEgMTgzLjUwMyw1MDQgMjUxLjkyMSw1MDQgQzMyMC4zMzgsNTA0IDMyOC45MTcsNTAzLjcxIDM1NS43ODcsNTAyLjQ4NCBDMzgyLjYwMSw1MDEuMjYxIDQwMC45MTQsNDk3LjAwMiA0MTYuOTM4LDQ5MC43NzUgQzQzMy41MDQsNDg0LjMzNyA0NDcuNTUzLDQ3NS43MjMgNDYxLjU1OSw0NjEuNzE4IEM0NzUuNTY0LDQ0Ny43MTIgNDg0LjE3OCw0MzMuNjYzIDQ5MC42MTYsNDE3LjA5NyBDNDk2Ljg0Myw0MDEuMDczIDUwMS4xMDIsMzgyLjc2IDUwMi4zMjUsMzU1Ljk0NiBDNTAzLjU1MSwzMjkuMDc2IDUwMy44NDEsMzIwLjQ5NyA1MDMuODQxLDI1Mi4wOCBDNTAzLjg0MSwxODMuNjYyIDUwMy41NTEsMTc1LjA4MyA1MDIuMzI1LDE0OC4yMTMgQzUwMS4xMDIsMTIxLjM5OSA0OTYuODQzLDEwMy4wODYgNDkwLjYxNiw4Ny4wNjIgQzQ4NC4xNzgsNzAuNDk2IDQ3NS41NjQsNTYuNDQ3IDQ2MS41NTksNDIuNDQxIEM0NDcuNTUzLDI4LjQzNiA0MzMuNTA0LDE5LjgyMiA0MTYuOTM4LDEzLjM4NSBDNDAwLjkxNCw3LjE1NyAzODIuNjAxLDIuODk4IDM1NS43ODcsMS42NzUgQzMyOC45MTcsMC40NDkgMzIwLjMzOCwwLjE1OSAyNTEuOTIxLDAuMTU5IFogTTI1MS45MjEsNDUuNTUgQzMxOS4xODYsNDUuNTUgMzI3LjE1NCw0NS44MDcgMzUzLjcxOCw0Ny4wMTkgQzM3OC4yOCw0OC4xMzkgMzkxLjYxOSw1Mi4yNDMgNDAwLjQ5Niw1NS42OTMgQzQxMi4yNTUsNjAuMjYzIDQyMC42NDcsNjUuNzIyIDQyOS40NjIsNzQuNTM4IEM0MzguMjc4LDgzLjM1MyA0NDMuNzM3LDkxLjc0NSA0NDguMzA3LDEwMy41MDQgQzQ1MS43NTcsMTEyLjM4MSA0NTUuODYxLDEyNS43MiA0NTYuOTgxLDE1MC4yODIgQzQ1OC4xOTMsMTc2Ljg0NiA0NTguNDUsMTg0LjgxNCA0NTguNDUsMjUyLjA4IEM0NTguNDUsMzE5LjM0NSA0NTguMTkzLDMyNy4zMTMgNDU2Ljk4MSwzNTMuODc3IEM0NTUuODYxLDM3OC40MzkgNDUxLjc1NywzOTEuNzc4IDQ0OC4zMDcsNDAwLjY1NSBDNDQzLjczNyw0MTIuNDE0IDQzOC4yNzgsNDIwLjgwNiA0MjkuNDYyLDQyOS42MjEgQzQyMC42NDcsNDM4LjQzNyA0MTIuMjU1LDQ0My44OTYgNDAwLjQ5Niw0NDguNDY2IEMzOTEuNjE5LDQ1MS45MTYgMzc4LjI4LDQ1Ni4wMiAzNTMuNzE4LDQ1Ny4xNCBDMzI3LjE1OCw0NTguMzUyIDMxOS4xOTEsNDU4LjYwOSAyNTEuOTIxLDQ1OC42MDkgQzE4NC42NSw0NTguNjA5IDE3Ni42ODQsNDU4LjM1MiAxNTAuMTIzLDQ1Ny4xNCBDMTI1LjU2MSw0NTYuMDIgMTEyLjIyMiw0NTEuOTE2IDEwMy4zNDUsNDQ4LjQ2NiBDOTEuNTg2LDQ0My44OTYgODMuMTk0LDQzOC40MzcgNzQuMzc5LDQyOS42MjEgQzY1LjU2NCw0MjAuODA2IDYwLjEwNCw0MTIuNDE0IDU1LjUzNCw0MDAuNjU1IEM1Mi4wODQsMzkxLjc3OCA0Ny45OCwzNzguNDM5IDQ2Ljg2LDM1My44NzcgQzQ1LjY0OCwzMjcuMzEzIDQ1LjM5MSwzMTkuMzQ1IDQ1LjM5MSwyNTIuMDggQzQ1LjM5MSwxODQuODE0IDQ1LjY0OCwxNzYuODQ2IDQ2Ljg2LDE1MC4yODIgQzQ3Ljk4LDEyNS43MiA1Mi4wODQsMTEyLjM4MSA1NS41MzQsMTAzLjUwNCBDNjAuMTA0LDkxLjc0NSA2NS41NjMsODMuMzUzIDc0LjM3OSw3NC41MzggQzgzLjE5NCw2NS43MjIgOTEuNTg2LDYwLjI2MyAxMDMuMzQ1LDU1LjY5MyBDMTEyLjIyMiw1Mi4yNDMgMTI1LjU2MSw0OC4xMzkgMTUwLjEyMyw0Ny4wMTkgQzE3Ni42ODcsNDUuODA3IDE4NC42NTUsNDUuNTUgMjUxLjkyMSw0NS41NSBaIiBpZD0iRmlsbC0xIiBmaWxsPSIjRkZGRkZGIiBtYXNrPSJ1cmwoI21hc2stMikiPjwvcGF0aD4gICAgICAgIDwvZz4gICAgICAgIDxwYXRoIGQ9Ik0yNTEuOTIxLDMzNi4wNTMgQzIwNS41NDMsMzM2LjA1MyAxNjcuOTQ3LDI5OC40NTcgMTY3Ljk0NywyNTIuMDggQzE2Ny45NDcsMjA1LjcwMiAyMDUuNTQzLDE2OC4xMDYgMjUxLjkyMSwxNjguMTA2IEMyOTguMjk4LDE2OC4xMDYgMzM1Ljg5NCwyMDUuNzAyIDMzNS44OTQsMjUyLjA4IEMzMzUuODk0LDI5OC40NTcgMjk4LjI5OCwzMzYuMDUzIDI1MS45MjEsMzM2LjA1MyBaIE0yNTEuOTIxLDEyMi43MTUgQzE4MC40NzQsMTIyLjcxNSAxMjIuNTU2LDE4MC42MzMgMTIyLjU1NiwyNTIuMDggQzEyMi41NTYsMzIzLjUyNiAxODAuNDc0LDM4MS40NDQgMjUxLjkyMSwzODEuNDQ0IEMzMjMuMzY3LDM4MS40NDQgMzgxLjI4NSwzMjMuNTI2IDM4MS4yODUsMjUyLjA4IEMzODEuMjg1LDE4MC42MzMgMzIzLjM2NywxMjIuNzE1IDI1MS45MjEsMTIyLjcxNSBaIiBpZD0iRmlsbC00IiBmaWxsPSIjRkZGRkZGIj48L3BhdGg+ICAgICAgICA8cGF0aCBkPSJNNDE2LjYyNywxMTcuNjA0IEM0MTYuNjI3LDEzNC4zIDQwMy4wOTIsMTQ3LjgzNCAzODYuMzk2LDE0Ny44MzQgQzM2OS43MDEsMTQ3LjgzNCAzNTYuMTY2LDEzNC4zIDM1Ni4xNjYsMTE3LjYwNCBDMzU2LjE2NiwxMDAuOTA4IDM2OS43MDEsODcuMzczIDM4Ni4zOTYsODcuMzczIEM0MDMuMDkyLDg3LjM3MyA0MTYuNjI3LDEwMC45MDggNDE2LjYyNywxMTcuNjA0IiBpZD0iRmlsbC01IiBmaWxsPSIjRkZGRkZGIj48L3BhdGg+ICAgIDwvZz48L3N2Zz4=); } /* stylelint-disable-next-line no-descending-specificity */ .ck-media__wrapper[data-oembed-url*="instagram.com"] .ck-media__placeholder .ck-media__placeholder__url__text { color: hsl(302, 100%, 94%); } .ck-media__wrapper[data-oembed-url*="instagram.com"] .ck-media__placeholder .ck-media__placeholder__url__text:hover { color: hsl(0, 0%, 100%); } .ck-media__wrapper[data-oembed-url*="twitter.com"] .ck.ck-media__placeholder { /* Use gradient to contrast with focused widget (ckeditor/ckeditor5-media-embed#22). */ background: linear-gradient( to right, hsl(201, 85%, 70%), hsl(201, 85%, 35%) ); } .ck-media__wrapper[data-oembed-url*="twitter.com"] .ck.ck-media__placeholder .ck-media__placeholder__icon { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IldoaXRlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQwMCA0MDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQwMCA0MDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MDAsMjAwYzAsMTEwLjUtODkuNSwyMDAtMjAwLDIwMFMwLDMxMC41LDAsMjAwUzg5LjUsMCwyMDAsMFM0MDAsODkuNSw0MDAsMjAweiBNMTYzLjQsMzA1LjVjODguNywwLDEzNy4yLTczLjUsMTM3LjItMTM3LjJjMC0yLjEsMC00LjItMC4xLTYuMmM5LjQtNi44LDE3LjYtMTUuMywyNC4xLTI1Yy04LjYsMy44LTE3LjksNi40LTI3LjcsNy42YzEwLTYsMTcuNi0xNS40LDIxLjItMjYuN2MtOS4zLDUuNS0xOS42LDkuNS0zMC42LDExLjdjLTguOC05LjQtMjEuMy0xNS4yLTM1LjItMTUuMmMtMjYuNiwwLTQ4LjIsMjEuNi00OC4yLDQ4LjJjMCwzLjgsMC40LDcuNSwxLjMsMTFjLTQwLjEtMi03NS42LTIxLjItOTkuNC01MC40Yy00LjEsNy4xLTYuNSwxNS40LTYuNSwyNC4yYzAsMTYuNyw4LjUsMzEuNSwyMS41LDQwLjFjLTcuOS0wLjItMTUuMy0yLjQtMjEuOC02YzAsMC4yLDAsMC40LDAsMC42YzAsMjMuNCwxNi42LDQyLjgsMzguNyw0Ny4zYy00LDEuMS04LjMsMS43LTEyLjcsMS43Yy0zLjEsMC02LjEtMC4zLTkuMS0wLjljNi4xLDE5LjIsMjMuOSwzMy4xLDQ1LDMzLjVjLTE2LjUsMTIuOS0zNy4zLDIwLjYtNTkuOSwyMC42Yy0zLjksMC03LjctMC4yLTExLjUtMC43QzExMC44LDI5Ny41LDEzNi4yLDMwNS41LDE2My40LDMwNS41Ii8+PC9zdmc+); } .ck-media__wrapper[data-oembed-url*="twitter.com"] .ck.ck-media__placeholder .ck-media__placeholder__url__text { color: hsl(201, 100%, 86%); } .ck-media__wrapper[data-oembed-url*="twitter.com"] .ck.ck-media__placeholder .ck-media__placeholder__url__text:hover { color: hsl(0, 0%, 100%); } /* Source: ckeditor5-theme-lark/theme/ckeditor5-mention/mention.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-color-mention-background: hsla(341, 100%, 30%, 0.1); --ck-color-mention-text: hsl(341, 100%, 30%); } .ck-content .mention { background: var(--ck-color-mention-background); color: var(--ck-color-mention-text); } /* Source: ckeditor5-theme-lark/theme/ckeditor5-restricted-editing/restrictedediting.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-color-restricted-editing-exception-background: hsla(31, 100%, 65%, .2); --ck-color-restricted-editing-exception-hover-background: hsla(31, 100%, 65%, .35); --ck-color-restricted-editing-exception-brackets: hsla(31, 100%, 40%, .4); --ck-color-restricted-editing-selected-exception-background: hsla(31, 100%, 65%, .5); --ck-color-restricted-editing-selected-exception-brackets: hsla(31, 100%, 40%, .6); } .ck-editor__editable .restricted-editing-exception { transition: .2s ease-in-out background; background-color: var(--ck-color-restricted-editing-exception-background); border: 1px solid; border-image: linear-gradient( to right, var(--ck-color-restricted-editing-exception-brackets) 0%, var(--ck-color-restricted-editing-exception-brackets) 5px, hsla(0, 0%, 0%, 0) 6px, hsla(0, 0%, 0%, 0) calc(100% - 6px), var(--ck-color-restricted-editing-exception-brackets) calc(100% - 5px), var(--ck-color-restricted-editing-exception-brackets) 100% ) 1; } .ck-editor__editable .restricted-editing-exception.restricted-editing-exception_selected { background-color: var(--ck-color-restricted-editing-selected-exception-background); border-image: linear-gradient( to right, var(--ck-color-restricted-editing-selected-exception-brackets) 0%, var(--ck-color-restricted-editing-selected-exception-brackets) 5px, var(--ck-color-restricted-editing-selected-exception-brackets) calc(100% - 5px), var(--ck-color-restricted-editing-selected-exception-brackets) 100% ) 1; } .ck-editor__editable .restricted-editing-exception.restricted-editing-exception_collapsed { /* Empty exception should have the same width as exception with at least 1 char */ padding-left: 1ch; } .ck-restricted-editing_mode_restricted { cursor: default; /* We also have to override all elements inside the restricted editable to prevent cursor switching between default and text during the pointer movement. */ } .ck-restricted-editing_mode_restricted * { cursor: default; } .ck-restricted-editing_mode_restricted .restricted-editing-exception { cursor: text; } .ck-restricted-editing_mode_restricted .restricted-editing-exception * { cursor: text; } .ck-restricted-editing_mode_restricted .restricted-editing-exception:hover { background: var(--ck-color-restricted-editing-exception-hover-background); } /* Source: ckeditor5-theme-lark/theme/ckeditor5-special-characters/charactergrid.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ :root { --ck-character-grid-tile-size: 24px; } .ck.ck-character-grid { overflow-y: auto; overflow-x: hidden; width: 350px; max-height: 200px; } @media screen and (max-width: 600px) { .ck.ck-character-grid { width: 190px; } } .ck.ck-character-grid .ck-character-grid__tiles { grid-template-columns: repeat(10, 1fr); margin: var(--ck-spacing-standard) var(--ck-spacing-large); grid-gap: var(--ck-spacing-standard); } @media screen and (max-width: 600px) { .ck.ck-character-grid .ck-character-grid__tiles { grid-template-columns: repeat(5, 1fr); } } .ck.ck-character-grid .ck-character-grid__tile { width: var(--ck-character-grid-tile-size); height: var(--ck-character-grid-tile-size); min-width: var(--ck-character-grid-tile-size); min-height: var(--ck-character-grid-tile-size); font-size: 1.2em; padding: 0; transition: .2s ease box-shadow; border: 0; } .ck.ck-character-grid .ck-character-grid__tile:focus:not( .ck-disabled ), .ck.ck-character-grid .ck-character-grid__tile:hover:not( .ck-disabled ) { /* Disable the default .ck-button's border ring. */ border: 0; box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-focus-border); } /* Make sure the glyph is rendered in the center of the button */ .ck.ck-character-grid .ck-character-grid__tile .ck-button__label { line-height: var(--ck-character-grid-tile-size); width: 100%; text-align: center; } /* Source: ckeditor5-theme-lark/theme/ckeditor5-special-characters/characterinfo.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-character-info { padding: var(--ck-spacing-small) var(--ck-spacing-large); border-top: 1px solid var(--ck-color-base-border); } .ck.ck-character-info > * { text-transform: uppercase; font-size: var(--ck-font-size-small); } .ck.ck-character-info .ck-character-info__name { max-width: 280px; text-overflow: ellipsis; overflow: hidden; } .ck.ck-character-info .ck-character-info__code { opacity: .6; } @media screen and (max-width: 600px) { .ck.ck-character-info { max-width: 190px; } } /* Source: ckeditor5-theme-lark/theme/ckeditor5-special-characters/specialcharacters.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-special-characters-navigation > .ck-label { max-width: 160px; text-overflow: ellipsis; overflow: hidden; } .ck.ck-special-characters-navigation > .ck-dropdown .ck-dropdown__panel { /* There could be dozens of categories available. Use scroll to prevent a 10e6px dropdown. */ max-height: 250px; overflow-y: auto; overflow-x: hidden; } @media screen and (max-width: 600px) { .ck.ck-special-characters-navigation { max-width: 190px; } .ck.ck-special-characters-navigation > .ck-form__header__label { text-overflow: ellipsis; overflow: hidden; } } /* Source: ckeditor5-theme-lark/theme/ckeditor5-style/style.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-dropdown.ck-style-dropdown.ck-style-dropdown_multiple-active > .ck-button > .ck-button__label { font-style: italic; } /* Source: ckeditor5-theme-lark/theme/ckeditor5-style/stylegrid.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-style-panel-button-width: 120px; --ck-style-panel-button-height: 80px; --ck-style-panel-button-label-background: hsl(0, 0%, 94.1%); --ck-style-panel-button-hover-label-background: hsl(0, 0%, 92.1%); --ck-style-panel-button-hover-border-color: hsl(0, 0%, 70%); } .ck.ck-style-panel .ck-style-grid { row-gap: var(--ck-spacing-large); column-gap: var(--ck-spacing-large); } .ck.ck-style-panel .ck-style-grid .ck-style-grid__button { --ck-color-button-default-hover-background: var(--ck-color-base-background); --ck-color-button-default-active-background: var(--ck-color-base-background); padding: 0; width: var(--ck-style-panel-button-width); height: var(--ck-style-panel-button-height); /* Let default .ck-button :focus styles apply */ } .ck.ck-style-panel .ck-style-grid .ck-style-grid__button:not(:focus) { border: 1px solid var(--ck-color-base-border); } .ck.ck-style-panel .ck-style-grid .ck-style-grid__button .ck-button__label { height: 22px; line-height: 22px; width: 100%; padding: 0 var(--ck-spacing-medium); overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; } .ck.ck-style-panel .ck-style-grid .ck-style-grid__button .ck-style-grid__button__preview { width: 100%; overflow: hidden; opacity: .9; padding: var(--ck-spacing-medium); background: var(--ck-color-base-background); border: 2px solid var(--ck-color-base-background); } .ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-disabled { --ck-color-button-default-disabled-background: var(--ck-color-base-foreground); /* Let default .ck-button :focus styles apply */ } .ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-disabled:not(:focus) { border-color: var(--ck-style-panel-button-label-background); } .ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-disabled .ck-style-grid__button__preview { opacity: .4; border-color: var(--ck-color-base-foreground); filter: saturate(.3); } .ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-on { border-color: var(--ck-color-base-active); } .ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-on .ck-button__label { box-shadow: 0 -1px 0 var(--ck-color-base-active); z-index: 1; /* Stay on top of the preview with the shadow. */ } .ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-on:hover { border-color: var(--ck-color-base-active-focus); } .ck.ck-style-panel .ck-style-grid .ck-style-grid__button:not(.ck-on) .ck-button__label { background: var(--ck-style-panel-button-label-background); } .ck.ck-style-panel .ck-style-grid .ck-style-grid__button:not(.ck-on):hover .ck-button__label { background: var(--ck-style-panel-button-hover-label-background); } .ck.ck-style-panel .ck-style-grid .ck-style-grid__button:hover:not(.ck-disabled):not(.ck-on) { border-color: var(--ck-style-panel-button-hover-border-color); } .ck.ck-style-panel .ck-style-grid .ck-style-grid__button:hover:not(.ck-disabled):not(.ck-on) .ck-style-grid__button__preview { opacity: 1; } /* Source: ckeditor5-theme-lark/theme/ckeditor5-style/stylegroup.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-style-panel .ck-style-panel__style-group > .ck-label { margin: var(--ck-spacing-large) 0; } .ck.ck-style-panel .ck-style-panel__style-group:first-child > .ck-label { margin-top: 0; } /* Source: ckeditor5-theme-lark/theme/ckeditor5-style/stylepanel.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-style-panel-max-height: 470px; } .ck.ck-style-panel { padding: var(--ck-spacing-large); overflow-y: auto; max-height: var(--ck-style-panel-max-height); } /* Source: ckeditor5-theme-lark/theme/ckeditor5-table/colorinput.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ [dir="ltr"] :is(.ck.ck-input-color > .ck.ck-input-text) { border-top-right-radius: 0; border-bottom-right-radius: 0; } [dir="rtl"] :is(.ck.ck-input-color > .ck.ck-input-text) { border-top-left-radius: 0; border-bottom-left-radius: 0; } /* Make sure the focused input is always on top of the dropdown button so its outline and border are never cropped (also when the input is read-only). */ .ck.ck-input-color > .ck.ck-input-text:focus { z-index: 0; } .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button { padding: 0; } [dir="ltr"] :is(.ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button) { border-top-left-radius: 0; border-bottom-left-radius: 0; } [dir="ltr"] :is(.ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button):not(:focus) { border-left: 1px solid transparent; } [dir="rtl"] :is(.ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button) { border-top-right-radius: 0; border-bottom-right-radius: 0; } [dir="rtl"] :is(.ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button):not(:focus) { border-right: 1px solid transparent; } .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button.ck-disabled { background: var(--ck-color-input-disabled-background); } .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button > .ck.ck-input-color__button__preview { border-radius: 0; } .ck-rounded-corners :is(.ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button > .ck.ck-input-color__button__preview), .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button > .ck.ck-input-color__button__preview.ck-rounded-corners { border-radius: var(--ck-border-radius); } .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button > .ck.ck-input-color__button__preview { width: 20px; height: 20px; border: 1px solid var(--ck-color-input-border); } .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button > .ck.ck-input-color__button__preview > .ck.ck-input-color__button__preview__no-color-indicator { top: -30%; left: 50%; height: 150%; width: 8%; background: hsl(0, 100%, 50%); border-radius: 2px; transform: rotate(45deg); transform-origin: 50%; } .ck.ck-input-color .ck.ck-input-color__remove-color { width: 100%; padding: calc(var(--ck-spacing-standard) / 2) var(--ck-spacing-standard); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ck.ck-input-color .ck.ck-input-color__remove-color:not(:focus) { border-bottom: 1px solid var(--ck-color-input-border); } [dir="ltr"] :is(.ck.ck-input-color .ck.ck-input-color__remove-color) { border-top-right-radius: 0; } [dir="rtl"] :is(.ck.ck-input-color .ck.ck-input-color__remove-color) { border-top-left-radius: 0; } .ck.ck-input-color .ck.ck-input-color__remove-color .ck.ck-icon { margin-right: var(--ck-spacing-standard); } [dir="rtl"] :is(.ck.ck-input-color .ck.ck-input-color__remove-color .ck.ck-icon) { margin-right: 0; margin-left: var(--ck-spacing-standard); } /* Source: ckeditor5-theme-lark/theme/ckeditor5-table/form.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-form { padding: 0 0 var(--ck-spacing-large); } .ck.ck-form:focus { /* See: https://github.com/ckeditor/ckeditor5/issues/4773 */ outline: none; } .ck.ck-form .ck.ck-input-text { min-width: 100%; width: 0; } .ck.ck-form .ck.ck-dropdown { min-width: 100%; } .ck.ck-form .ck.ck-dropdown .ck-dropdown__button:not(:focus) { border: 1px solid var(--ck-color-base-border); } .ck.ck-form .ck.ck-dropdown .ck-dropdown__button .ck-button__label { width: 100%; } /* Source: ckeditor5-theme-lark/theme/ckeditor5-table/formrow.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-form__row { padding: var(--ck-spacing-standard) var(--ck-spacing-large) 0; /* Ignore labels that work as fieldset legends */ } [dir="ltr"] :is(:is(.ck.ck-form__row > *:not(.ck-label)) + *) { margin-left: var(--ck-spacing-large); } [dir="rtl"] :is(:is(.ck.ck-form__row > *:not(.ck-label)) + *) { margin-right: var(--ck-spacing-large); } .ck.ck-form__row > .ck-label { width: 100%; min-width: 100%; } .ck.ck-form__row.ck-table-form__action-row { margin-top: var(--ck-spacing-large); } .ck.ck-form__row.ck-table-form__action-row .ck-button .ck-button__label { color: var(--ck-color-text); } /* Source: ckeditor5-theme-lark/theme/ckeditor5-table/inserttable.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-insert-table-dropdown-padding: 10px; --ck-insert-table-dropdown-box-height: 11px; --ck-insert-table-dropdown-box-width: 12px; --ck-insert-table-dropdown-box-margin: 1px; } .ck .ck-insert-table-dropdown__grid { /* The width of a container should match 10 items in a row so there will be a 10x10 grid. */ width: calc(var(--ck-insert-table-dropdown-box-width) * 10 + var(--ck-insert-table-dropdown-box-margin) * 20 + var(--ck-insert-table-dropdown-padding) * 2); padding: var(--ck-insert-table-dropdown-padding) var(--ck-insert-table-dropdown-padding) 0; } .ck .ck-insert-table-dropdown__label, .ck[dir=rtl] .ck-insert-table-dropdown__label { text-align: center; } .ck .ck-insert-table-dropdown-grid-box { min-width: var(--ck-insert-table-dropdown-box-width); min-height: var(--ck-insert-table-dropdown-box-height); margin: var(--ck-insert-table-dropdown-box-margin); border: 1px solid var(--ck-color-base-border); border-radius: 1px; outline: none; transition: none; } .ck .ck-insert-table-dropdown-grid-box:focus { box-shadow: none; } .ck .ck-insert-table-dropdown-grid-box.ck-on { border-color: var(--ck-color-focus-border); background: var(--ck-color-focus-outer-shadow); } /* Source: ckeditor5-theme-lark/theme/ckeditor5-table/tablecellproperties.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-table-cell-properties-form { width: 320px; } .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__padding-row { align-self: flex-end; padding: 0; width: 25%; } .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar { background: none; /* Compensate for missing input label that would push the margin (toolbar has no inputs). */ margin-top: var(--ck-spacing-standard); } /* Source: ckeditor5-theme-lark/theme/ckeditor5-table/tableediting.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-color-table-focused-cell-background: hsla(212, 90%, 80%, .3); } .ck-widget.table td.ck-editor__nested-editable.ck-editor__nested-editable_focused, .ck-widget.table th.ck-editor__nested-editable.ck-editor__nested-editable_focused, .ck-widget.table td.ck-editor__nested-editable:focus, .ck-widget.table th.ck-editor__nested-editable:focus { /* A very slight background to highlight the focused cell */ background: var(--ck-color-table-focused-cell-background); /* Fixes the problem where surrounding cells cover the focused cell's border. It does not fix the problem in all places but the UX is improved. See https://github.com/ckeditor/ckeditor5-table/issues/29. */ border-style: none; outline: 1px solid var(--ck-color-focus-border); outline-offset: -1px; /* progressive enhancement - no IE support */ } /* Source: ckeditor5-theme-lark/theme/ckeditor5-table/tableform.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ :root { --ck-table-properties-error-arrow-size: 6px; --ck-table-properties-min-error-width: 150px; } .ck.ck-table-form .ck-form__row.ck-table-form__border-row .ck-labeled-field-view > .ck-label { font-size: var(--ck-font-size-tiny); text-align: center; } .ck.ck-table-form .ck-form__row.ck-table-form__border-row .ck-table-form__border-style, .ck.ck-table-form .ck-form__row.ck-table-form__border-row .ck-table-form__border-width { width: 80px; min-width: 80px; max-width: 80px; } .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row { padding: 0; } .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-table-form__dimensions-row__width, .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-table-form__dimensions-row__height { margin: 0 } .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-table-form__dimension-operator { align-self: flex-end; display: inline-block; height: var(--ck-ui-component-min-height); line-height: var(--ck-ui-component-min-height); margin: 0 var(--ck-spacing-small); } .ck.ck-table-form .ck.ck-labeled-field-view { padding-top: var(--ck-spacing-standard); } .ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status { border-radius: 0; } .ck-rounded-corners :is(.ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status), .ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status.ck-rounded-corners { border-radius: var(--ck-border-radius); } .ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status { background: var(--ck-color-base-error); color: var(--ck-color-base-background); padding: var(--ck-spacing-small) var(--ck-spacing-medium); min-width: var(--ck-table-properties-min-error-width); text-align: center; animation: ck-table-form-labeled-view-status-appear .15s ease both; /* The arrow pointing towards the field. */ } .ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status::after { border-color: transparent transparent var(--ck-color-base-error) transparent; border-width: 0 var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size); border-style: solid; } /* Hide the error balloon when the field is blurred. Makes the experience much more clear. */ :is(.ck.ck-table-form .ck.ck-labeled-field-view) .ck-input.ck-error:not(:focus) + .ck.ck-labeled-field-view__status { display: none; } @keyframes ck-table-form-labeled-view-status-appear { 0% { opacity: 0; } 100% { opacity: 1; } } /* Source: ckeditor5-theme-lark/theme/ckeditor5-table/tableproperties.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-table-properties-form { width: 320px; } .ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row { align-self: flex-end; padding: 0; } .ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row .ck.ck-toolbar { background: none; /* Compensate for missing input label that would push the margin (toolbar has no inputs). */ margin-top: var(--ck-spacing-standard); } .ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row .ck.ck-toolbar .ck-toolbar__items > * { width: 40px; } /* Source: ckeditor5-theme-lark/theme/ckeditor5-table/tableselection.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-table-selected-cell-background: hsla(208, 90%, 80%, .3); } .ck.ck-editor__editable .table table td.ck-editor__editable_selected, .ck.ck-editor__editable .table table th.ck-editor__editable_selected { position: relative; caret-color: transparent; outline: unset; box-shadow: unset; /* https://github.com/ckeditor/ckeditor5/issues/6446 */ } .ck.ck-editor__editable .table table td.ck-editor__editable_selected:after, .ck.ck-editor__editable .table table th.ck-editor__editable_selected:after { content: ''; pointer-events: none; background-color: var(--ck-table-selected-cell-background); position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .ck.ck-editor__editable .table table td.ck-editor__editable_selected ::selection, .ck.ck-editor__editable .table table th.ck-editor__editable_selected ::selection, .ck.ck-editor__editable .table table td.ck-editor__editable_selected:focus, .ck.ck-editor__editable .table table th.ck-editor__editable_selected:focus { background-color: transparent; } /* * To reduce the amount of noise, all widgets in the table selection have no outline and no selection handle. * See https://github.com/ckeditor/ckeditor5/issues/9491. */ .ck.ck-editor__editable .table table td.ck-editor__editable_selected .ck-widget, .ck.ck-editor__editable .table table th.ck-editor__editable_selected .ck-widget { outline: unset; } .ck.ck-editor__editable .table table td.ck-editor__editable_selected .ck-widget > .ck-widget__selection-handle, .ck.ck-editor__editable .table table th.ck-editor__editable_selected .ck-widget > .ck-widget__selection-handle { display: none; } /* Source: ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/button.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A visual style of focused element's border. */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A helper to combine multiple shadows. */ /** * Gives an element a drop shadow so it looks like a floating panel. */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A class which indicates that an element holding it is disabled. */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements a button of given background color. * * @param {String} $background - Background color of the button. * @param {String} $border - Border color of the button. */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-button, a.ck.ck-button { background: var(--ck-color-button-default-background); border-radius: 0; white-space: nowrap; cursor: default; vertical-align: middle; padding: var(--ck-spacing-tiny); text-align: center; /* A very important piece of styling. Go to variable declaration to learn more. */ min-width: var(--ck-ui-component-min-height); min-height: var(--ck-ui-component-min-height); /* Normalize the height of the line. Removing this will break consistent height among text and text-less buttons (with icons). */ line-height: 1; /* Enable font size inheritance, which allows fluid UI scaling. */ font-size: inherit; /* Avoid flickering when the foucs border shows up. */ border: 1px solid transparent; /* Apply some smooth transition to the box-shadow and border. */ transition: box-shadow .2s ease-in-out, border .2s ease-in-out; /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/189 */ -webkit-appearance: none; } :is(.ck.ck-button,a.ck.ck-button):not(.ck-disabled):hover { background: var(--ck-color-button-default-hover-background); } :is(.ck.ck-button,a.ck.ck-button):not(.ck-disabled):active { background: var(--ck-color-button-default-active-background); } /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/98 */ .ck-disabled:is(.ck.ck-button,a.ck.ck-button) { background: var(--ck-color-button-default-disabled-background); } .ck-rounded-corners :is(.ck.ck-button,a.ck.ck-button), .ck-rounded-corners:is(.ck.ck-button,a.ck.ck-button) { border-radius: var(--ck-border-radius); } :is(.ck.ck-button,a.ck.ck-button):active, :is(.ck.ck-button,a.ck.ck-button):focus { /* Disable native outline. */ outline: none; border: var(--ck-focus-ring); box-shadow: var(--ck-focus-outer-shadow), 0 0; } /* Allow icon coloring using the text "color" property. */ :is(.ck.ck-button,a.ck.ck-button) .ck-button__icon use, :is(.ck.ck-button,a.ck.ck-button) .ck-button__icon use * { color: inherit; } :is(.ck.ck-button,a.ck.ck-button) .ck-button__label { /* Enable font size inheritance, which allows fluid UI scaling. */ font-size: inherit; font-weight: inherit; color: inherit; cursor: inherit; /* Must be consistent with .ck-icon's vertical align. Otherwise, buttons with and without labels (but with icons) have different sizes in Chrome */ vertical-align: middle; } [dir="ltr"] :is(:is(.ck.ck-button,a.ck.ck-button) .ck-button__label) { text-align: left; } [dir="rtl"] :is(:is(.ck.ck-button,a.ck.ck-button) .ck-button__label) { text-align: right; } :is(.ck.ck-button,a.ck.ck-button) .ck-button__keystroke { color: inherit; } [dir="ltr"] :is(:is(.ck.ck-button,a.ck.ck-button) .ck-button__keystroke) { margin-left: var(--ck-spacing-large); } [dir="rtl"] :is(:is(.ck.ck-button,a.ck.ck-button) .ck-button__keystroke) { margin-right: var(--ck-spacing-large); } :is(.ck.ck-button,a.ck.ck-button) .ck-button__keystroke { font-weight: bold; opacity: .7; } /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */ .ck-disabled:is(.ck.ck-button,a.ck.ck-button):active, .ck-disabled:is(.ck.ck-button,a.ck.ck-button):focus { /* The disabled button should have a slightly less visible shadow when focused. */ box-shadow: var(--ck-focus-disabled-outer-shadow), 0 0; } .ck-disabled:is(.ck.ck-button,a.ck.ck-button) .ck-button__icon { opacity: var(--ck-disabled-opacity); } /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/98 */ .ck-disabled:is(.ck.ck-button,a.ck.ck-button) .ck-button__label { opacity: var(--ck-disabled-opacity); } .ck-disabled:is(.ck.ck-button,a.ck.ck-button) .ck-button__keystroke { opacity: .3; } .ck-button_with-text:is(.ck.ck-button,a.ck.ck-button) { padding: var(--ck-spacing-tiny) var(--ck-spacing-standard); /* stylelint-disable-next-line no-descending-specificity */ } [dir="ltr"] :is(.ck-button_with-text:is(.ck.ck-button,a.ck.ck-button) .ck-button__icon) { margin-left: calc(-1 * var(--ck-spacing-small)); margin-right: var(--ck-spacing-small); } [dir="rtl"] :is(.ck-button_with-text:is(.ck.ck-button,a.ck.ck-button) .ck-button__icon) { margin-right: calc(-1 * var(--ck-spacing-small)); margin-left: var(--ck-spacing-small); } /* stylelint-disable-next-line no-descending-specificity */ .ck-button_with-keystroke:is(.ck.ck-button,a.ck.ck-button) .ck-button__label { flex-grow: 1; } /* A style of the button which is currently on, e.g. its feature is active. */ .ck-on:is(.ck.ck-button,a.ck.ck-button) { background: var(--ck-color-button-on-background); color: var(--ck-color-button-on-color); } .ck-on:is(.ck.ck-button,a.ck.ck-button):not(.ck-disabled):hover { background: var(--ck-color-button-on-hover-background); } .ck-on:is(.ck.ck-button,a.ck.ck-button):not(.ck-disabled):active { background: var(--ck-color-button-on-active-background); } /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/98 */ .ck-on.ck-disabled:is(.ck.ck-button,a.ck.ck-button) { background: var(--ck-color-button-on-disabled-background); } .ck-button-save:is(.ck.ck-button,a.ck.ck-button) { color: var(--ck-color-button-save); } .ck-button-cancel:is(.ck.ck-button,a.ck.ck-button) { color: var(--ck-color-button-cancel); } /* A style of the button which handles the primary action. */ .ck.ck-button-action, a.ck.ck-button-action { background: var(--ck-color-button-action-background); color: var(--ck-color-button-action-text); } :is(.ck.ck-button-action,a.ck.ck-button-action):not(.ck-disabled):hover { background: var(--ck-color-button-action-hover-background); } :is(.ck.ck-button-action,a.ck.ck-button-action):not(.ck-disabled):active { background: var(--ck-color-button-action-active-background); } /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/98 */ .ck-disabled:is(.ck.ck-button-action,a.ck.ck-button-action) { background: var(--ck-color-button-action-disabled-background); } .ck.ck-button-bold, a.ck.ck-button-bold { font-weight: bold; } /* Source: ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/switchbutton.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A class which indicates that an element holding it is disabled. */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* Note: To avoid rendering issues (aliasing) but to preserve the responsive nature of the component, floating–point numbers have been used which, for the default font size (see: --ck-font-size-base), will generate simple integers. */ :root { /* 34px at 13px font-size */ --ck-switch-button-toggle-width: 2.6153846154em; /* 14px at 13px font-size */ --ck-switch-button-toggle-inner-size: calc(1.0769230769em + 1px); --ck-switch-button-translation: calc( var(--ck-switch-button-toggle-width) - var(--ck-switch-button-toggle-inner-size) - 2px /* Border */ ); --ck-switch-button-inner-hover-shadow: 0 0 0 5px var(--ck-color-switch-button-inner-shadow); } /* Unlike a regular button, the switch button text color and background should never change. * Changing toggle switch (background, outline) is enough to carry the information about the * state of the entire component (https://github.com/ckeditor/ckeditor5/issues/12519) */ .ck.ck-button.ck-switchbutton, .ck.ck-button.ck-switchbutton:hover, .ck.ck-button.ck-switchbutton:focus, .ck.ck-button.ck-switchbutton:active, .ck.ck-button.ck-switchbutton.ck-on:hover, .ck.ck-button.ck-switchbutton.ck-on:focus, .ck.ck-button.ck-switchbutton.ck-on:active { color: inherit; background: transparent; } [dir="ltr"] :is(.ck.ck-button.ck-switchbutton .ck-button__label) { /* Separate the label from the switch */ margin-right: calc(2 * var(--ck-spacing-large)); } [dir="rtl"] :is(.ck.ck-button.ck-switchbutton .ck-button__label) { /* Separate the label from the switch */ margin-left: calc(2 * var(--ck-spacing-large)); } .ck.ck-button.ck-switchbutton .ck-button__toggle { border-radius: 0; } .ck-rounded-corners :is(.ck.ck-button.ck-switchbutton .ck-button__toggle), .ck.ck-button.ck-switchbutton .ck-button__toggle.ck-rounded-corners { border-radius: var(--ck-border-radius); } [dir="ltr"] :is(.ck.ck-button.ck-switchbutton .ck-button__toggle) { /* Make sure the toggle is always to the right as far as possible. */ margin-left: auto; } [dir="rtl"] :is(.ck.ck-button.ck-switchbutton .ck-button__toggle) { /* Make sure the toggle is always to the left as far as possible. */ margin-right: auto; } .ck.ck-button.ck-switchbutton .ck-button__toggle { /* Apply some smooth transition to the box-shadow and border. */ /* Gently animate the background color of the toggle switch */ transition: background 400ms ease, box-shadow .2s ease-in-out, outline .2s ease-in-out; border: 1px solid transparent; width: var(--ck-switch-button-toggle-width); background: var(--ck-color-switch-button-off-background); } .ck.ck-button.ck-switchbutton .ck-button__toggle .ck-button__toggle__inner { border-radius: 0; } .ck-rounded-corners :is(.ck.ck-button.ck-switchbutton .ck-button__toggle .ck-button__toggle__inner), .ck.ck-button.ck-switchbutton .ck-button__toggle .ck-button__toggle__inner.ck-rounded-corners { border-radius: var(--ck-border-radius); border-radius: calc(.5 * var(--ck-border-radius)); } .ck.ck-button.ck-switchbutton .ck-button__toggle .ck-button__toggle__inner { width: var(--ck-switch-button-toggle-inner-size); height: var(--ck-switch-button-toggle-inner-size); background: var(--ck-color-switch-button-inner-background); /* Gently animate the inner part of the toggle switch */ transition: all 300ms ease; } .ck.ck-button.ck-switchbutton .ck-button__toggle:hover { background: var(--ck-color-switch-button-off-hover-background); } .ck.ck-button.ck-switchbutton .ck-button__toggle:hover .ck-button__toggle__inner { box-shadow: var(--ck-switch-button-inner-hover-shadow); } .ck.ck-button.ck-switchbutton.ck-disabled .ck-button__toggle { opacity: var(--ck-disabled-opacity); } /* Overriding default .ck-button:focus styles + an outline around the toogle */ .ck.ck-button.ck-switchbutton:focus { border-color: transparent; outline: none; box-shadow: none; } .ck.ck-button.ck-switchbutton:focus .ck-button__toggle { box-shadow: 0 0 0 1px var(--ck-color-base-background), 0 0 0 5px var(--ck-color-focus-outer-shadow); outline-offset: 1px; outline: var(--ck-focus-ring); } /* stylelint-disable-next-line no-descending-specificity */ .ck.ck-button.ck-switchbutton.ck-on .ck-button__toggle { background: var(--ck-color-switch-button-on-background); } .ck.ck-button.ck-switchbutton.ck-on .ck-button__toggle:hover { background: var(--ck-color-switch-button-on-hover-background); } /* * Move the toggle switch to the right. It will be animated. */ [dir="ltr"] :is(.ck.ck-button.ck-switchbutton.ck-on .ck-button__toggle .ck-button__toggle__inner) { transform: translateX( var( --ck-switch-button-translation ) ); } [dir="rtl"] :is(.ck.ck-button.ck-switchbutton.ck-on .ck-button__toggle .ck-button__toggle__inner) { transform: translateX( calc( -1 * var( --ck-switch-button-translation ) ) ); } /* Source: ckeditor5-theme-lark/theme/ckeditor5-ui/components/colorgrid/colorgrid.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ :root { --ck-color-grid-tile-size: 24px; /* Not using global colors here because these may change but some colors in a pallette * require special treatment. For instance, this ensures no matter what the UI text color is, * the check icon will look good on the black color tile. */ --ck-color-color-grid-check-icon: hsl(212, 81%, 46%); } .ck.ck-color-grid { grid-gap: 5px; padding: 8px; } .ck.ck-color-grid__tile { width: var(--ck-color-grid-tile-size); height: var(--ck-color-grid-tile-size); min-width: var(--ck-color-grid-tile-size); min-height: var(--ck-color-grid-tile-size); padding: 0; transition: .2s ease box-shadow; border: 0; } .ck.ck-color-grid__tile.ck-disabled { cursor: unset; transition: unset; } .ck.ck-color-grid__tile.ck-color-table__color-tile_bordered { box-shadow: 0 0 0 1px var(--ck-color-base-border); } .ck.ck-color-grid__tile .ck.ck-icon { display: none; color: var(--ck-color-color-grid-check-icon); } .ck.ck-color-grid__tile.ck-on { box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-base-text); } .ck.ck-color-grid__tile.ck-on .ck.ck-icon { display: block; } .ck.ck-color-grid__tile.ck-on, .ck.ck-color-grid__tile:focus:not( .ck-disabled ), .ck.ck-color-grid__tile:hover:not( .ck-disabled ) { /* Disable the default .ck-button's border ring. */ border: 0; } .ck.ck-color-grid__tile:focus:not( .ck-disabled ), .ck.ck-color-grid__tile:hover:not( .ck-disabled ) { box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-focus-border); } .ck.ck-color-grid__label { padding: 0 var(--ck-spacing-standard); } /* Source: ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/dropdown.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A class which indicates that an element holding it is disabled. */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A helper to combine multiple shadows. */ /** * Gives an element a drop shadow so it looks like a floating panel. */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-dropdown-arrow-size: calc(0.5 * var(--ck-icon-size)); } .ck.ck-dropdown { /* Enable font size inheritance, which allows fluid UI scaling. */ font-size: inherit; } .ck.ck-dropdown .ck-dropdown__arrow { width: var(--ck-dropdown-arrow-size); } [dir="ltr"] .ck.ck-dropdown .ck-dropdown__arrow { right: var(--ck-spacing-standard); /* A space to accommodate the triangle. */ margin-left: var(--ck-spacing-standard); } [dir="rtl"] .ck.ck-dropdown .ck-dropdown__arrow { left: var(--ck-spacing-standard); /* A space to accommodate the triangle. */ margin-right: var(--ck-spacing-small); } .ck.ck-dropdown.ck-disabled .ck-dropdown__arrow { opacity: var(--ck-disabled-opacity); } [dir="ltr"] :is(.ck.ck-dropdown .ck-button.ck-dropdown__button):not(.ck-button_with-text) { /* Make sure dropdowns with just an icon have the right inner spacing */ padding-left: var(--ck-spacing-small); } [dir="rtl"] :is(.ck.ck-dropdown .ck-button.ck-dropdown__button):not(.ck-button_with-text) { /* Make sure dropdowns with just an icon have the right inner spacing */ padding-right: var(--ck-spacing-small); } /* #23 */ .ck.ck-dropdown .ck-button.ck-dropdown__button .ck-button__label { width: 7em; overflow: hidden; text-overflow: ellipsis; } /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */ .ck.ck-dropdown .ck-button.ck-dropdown__button.ck-disabled .ck-button__label { opacity: var(--ck-disabled-opacity); } /* https://github.com/ckeditor/ckeditor5/issues/816 */ .ck.ck-dropdown .ck-button.ck-dropdown__button.ck-on { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ck.ck-dropdown .ck-button.ck-dropdown__button.ck-dropdown__button_label-width_auto .ck-button__label { width: auto; } /* https://github.com/ckeditor/ckeditor5/issues/8699 */ .ck.ck-dropdown .ck-button.ck-dropdown__button.ck-off:active, .ck.ck-dropdown .ck-button.ck-dropdown__button.ck-on:active { box-shadow: none; } .ck.ck-dropdown .ck-button.ck-dropdown__button.ck-off:active:focus, .ck.ck-dropdown .ck-button.ck-dropdown__button.ck-on:active:focus { box-shadow: var(--ck-focus-outer-shadow), 0 0; } .ck.ck-dropdown__panel { border-radius: 0; } .ck-rounded-corners .ck.ck-dropdown__panel, .ck.ck-dropdown__panel.ck-rounded-corners { border-radius: var(--ck-border-radius); } .ck.ck-dropdown__panel { box-shadow: var(--ck-drop-shadow), 0 0; background: var(--ck-color-dropdown-panel-background); border: 1px solid var(--ck-color-dropdown-panel-border); bottom: 0; /* Make sure the panel is at least as wide as the drop-down's button. */ min-width: 100%; /* Disabled corner border radius to be consistent with the .dropdown__button https://github.com/ckeditor/ckeditor5/issues/816 */ } .ck.ck-dropdown__panel.ck-dropdown__panel_se { border-top-left-radius: 0; } .ck.ck-dropdown__panel.ck-dropdown__panel_sw { border-top-right-radius: 0; } .ck.ck-dropdown__panel.ck-dropdown__panel_ne { border-bottom-left-radius: 0; } .ck.ck-dropdown__panel.ck-dropdown__panel_nw { border-bottom-right-radius: 0; } /* Source: ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/listdropdown.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ .ck.ck-dropdown .ck-dropdown__panel .ck-list { /* Disabled radius of top-left border to be consistent with .dropdown__button https://github.com/ckeditor/ckeditor5/issues/816 */ border-radius: 0; } .ck-rounded-corners :is(.ck.ck-dropdown .ck-dropdown__panel .ck-list), .ck.ck-dropdown .ck-dropdown__panel .ck-list.ck-rounded-corners { border-radius: var(--ck-border-radius); border-top-left-radius: 0; } /* Make sure the button belonging to the first/last child of the list goes well with the border radius of the entire panel. */ .ck.ck-dropdown .ck-dropdown__panel .ck-list .ck-list__item:first-child .ck-button { border-radius: 0; } .ck-rounded-corners :is(.ck.ck-dropdown .ck-dropdown__panel .ck-list .ck-list__item:first-child .ck-button), .ck.ck-dropdown .ck-dropdown__panel .ck-list .ck-list__item:first-child .ck-button.ck-rounded-corners { border-radius: var(--ck-border-radius); border-top-left-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ck.ck-dropdown .ck-dropdown__panel .ck-list .ck-list__item:last-child .ck-button { border-radius: 0; } .ck-rounded-corners :is(.ck.ck-dropdown .ck-dropdown__panel .ck-list .ck-list__item:last-child .ck-button), .ck.ck-dropdown .ck-dropdown__panel .ck-list .ck-list__item:last-child .ck-button.ck-rounded-corners { border-radius: var(--ck-border-radius); border-top-left-radius: 0; border-top-right-radius: 0; } /* Source: ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/splitbutton.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ :root { --ck-color-split-button-hover-background: hsl(0, 0%, 92%); --ck-color-split-button-hover-border: hsl(0, 0%, 70%); } /* * Note: ck-rounded and ck-dir mixins don't go together (because they both use @nest). */ [dir="ltr"] :is(.ck.ck-splitbutton:hover > .ck-splitbutton__action), [dir="ltr"] :is(.ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__action) { /* Don't round the action button on the right side */ border-top-right-radius: unset; border-bottom-right-radius: unset; } [dir="rtl"] :is(.ck.ck-splitbutton:hover > .ck-splitbutton__action), [dir="rtl"] :is(.ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__action) { /* Don't round the action button on the left side */ border-top-left-radius: unset; border-bottom-left-radius: unset; } .ck.ck-splitbutton > .ck-splitbutton__arrow { /* It's a text-less button and since the icon is positioned absolutely in such situation, it must get some arbitrary min-width. */ min-width: unset; } [dir="ltr"] :is(.ck.ck-splitbutton > .ck-splitbutton__arrow) { /* Don't round the arrow button on the left side */ border-top-left-radius: unset; border-bottom-left-radius: unset; } [dir="rtl"] :is(.ck.ck-splitbutton > .ck-splitbutton__arrow) { /* Don't round the arrow button on the right side */ border-top-right-radius: unset; border-bottom-right-radius: unset; } .ck.ck-splitbutton > .ck-splitbutton__arrow svg { width: var(--ck-dropdown-arrow-size); } /* Make sure the divider stretches 100% height of the button https://github.com/ckeditor/ckeditor5/issues/10936 */ .ck.ck-splitbutton > .ck-splitbutton__arrow:not(:focus) { border-top-width: 0px; border-bottom-width: 0px; } /* When the split button is "open" (the arrow is on) or being hovered, it should get some styling as a whole. The background of both buttons should stand out and there should be a visual separation between both buttons. */ /* When the split button hovered as a whole, not as individual buttons. */ .ck.ck-splitbutton.ck-splitbutton_open > .ck-button:not(.ck-on):not(.ck-disabled):not(:hover), .ck.ck-splitbutton:hover > .ck-button:not(.ck-on):not(.ck-disabled):not(:hover) { background: var(--ck-color-split-button-hover-background); } /* Splitbutton separator needs to be set with the ::after pseudoselector to display properly the borders on focus */ .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__arrow:not(.ck-disabled)::after, .ck.ck-splitbutton:hover > .ck-splitbutton__arrow:not(.ck-disabled)::after { content: ''; position: absolute; width: 1px; height: 100%; background-color: var(--ck-color-split-button-hover-border); } /* Make sure the divider between the buttons looks fine when the button is focused */ .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__arrow:focus::after, .ck.ck-splitbutton:hover > .ck-splitbutton__arrow:focus::after { --ck-color-split-button-hover-border: var(--ck-color-focus-border); } [dir="ltr"] .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__arrow:not(.ck-disabled)::after, [dir="ltr"] .ck.ck-splitbutton:hover > .ck-splitbutton__arrow:not(.ck-disabled)::after { left: -1px; } [dir="rtl"] .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__arrow:not(.ck-disabled)::after, [dir="rtl"] .ck.ck-splitbutton:hover > .ck-splitbutton__arrow:not(.ck-disabled)::after { right: -1px; } /* Don't round the bottom left and right corners of the buttons when "open" https://github.com/ckeditor/ckeditor5/issues/816 */ .ck.ck-splitbutton.ck-splitbutton_open { border-radius: 0; } .ck-rounded-corners .ck.ck-splitbutton.ck-splitbutton_open, .ck.ck-splitbutton.ck-splitbutton_open.ck-rounded-corners { border-radius: var(--ck-border-radius); } .ck-rounded-corners .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__action, .ck.ck-splitbutton.ck-splitbutton_open.ck-rounded-corners > .ck-splitbutton__action { border-bottom-left-radius: 0; } .ck-rounded-corners .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__arrow, .ck.ck-splitbutton.ck-splitbutton_open.ck-rounded-corners > .ck-splitbutton__arrow { border-bottom-right-radius: 0; } /* Source: ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/toolbardropdown.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-toolbar-dropdown .ck-toolbar { border: 0; } /* Source: ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A class which indicates that an element holding it is disabled. */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A helper to combine multiple shadows. */ /** * Gives an element a drop shadow so it looks like a floating panel. */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A visual style of focused element's border. */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements a button of given background color. * * @param {String} $background - Background color of the button. * @param {String} $border - Border color of the button. */ :root { --ck-color-editable-blur-selection: hsl(0, 0%, 85%); } .ck.ck-editor__editable:not(.ck-editor__nested-editable) { border-radius: 0; } .ck-rounded-corners .ck.ck-editor__editable:not(.ck-editor__nested-editable), .ck.ck-editor__editable.ck-rounded-corners:not(.ck-editor__nested-editable) { border-radius: var(--ck-border-radius); } .ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) { /* Disable native outline. */ outline: none; border: var(--ck-focus-ring); box-shadow: var(--ck-inner-shadow), 0 0; } .ck.ck-editor__editable_inline { overflow: auto; padding: 0 var(--ck-spacing-standard); border: 1px solid transparent; } .ck.ck-editor__editable_inline[dir="ltr"] { text-align: left; } .ck.ck-editor__editable_inline[dir="rtl"] { text-align: right; } /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/116 */ .ck.ck-editor__editable_inline > *:first-child { margin-top: var(--ck-spacing-large); } /* https://github.com/ckeditor/ckeditor5/issues/847 */ .ck.ck-editor__editable_inline > *:last-child { /* * This value should match with the default margins of the block elements (like .media or .image) * to avoid a content jumping when the fake selection container shows up (See https://github.com/ckeditor/ckeditor5/issues/9825). */ margin-bottom: var(--ck-spacing-large); } /* https://github.com/ckeditor/ckeditor5/issues/6517 */ .ck.ck-editor__editable_inline.ck-blurred ::selection { background: var(--ck-color-editable-blur-selection); } /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/111 */ .ck.ck-balloon-panel.ck-toolbar-container[class*="arrow_n"]::after { border-bottom-color: var(--ck-color-base-foreground); } .ck.ck-balloon-panel.ck-toolbar-container[class*="arrow_s"]::after { border-top-color: var(--ck-color-base-foreground); } /* Source: ckeditor5-theme-lark/theme/ckeditor5-ui/components/formheader/formheader.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-form-header-height: 38px; } .ck.ck-form__header { padding: var(--ck-spacing-small) var(--ck-spacing-large); height: var(--ck-form-header-height); line-height: var(--ck-form-header-height); border-bottom: 1px solid var(--ck-color-base-border); } .ck.ck-form__header .ck-form__header__label { font-weight: bold; } /* Source: ckeditor5-theme-lark/theme/ckeditor5-ui/components/icon/icon.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-icon-size: calc(var(--ck-line-height-base) * var(--ck-font-size-normal)); } .ck.ck-icon { width: var(--ck-icon-size); height: var(--ck-icon-size); /* Multiplied by the height of the line in "px" should give SVG "viewport" dimensions */ font-size: .8333350694em; /* Inherit cursor style (#5). */ cursor: inherit; /* This will prevent blurry icons on Firefox. See #340. */ will-change: transform; } .ck.ck-icon * { /* Inherit cursor style (#5). */ cursor: inherit; } /* Allows dynamic coloring of an icon by inheriting its color from the parent. */ .ck.ck-icon.ck-icon_inherit-color { color: inherit; } .ck.ck-icon.ck-icon_inherit-color * { color: inherit; } .ck.ck-icon.ck-icon_inherit-color *:not([fill]) { /* Needed by FF. */ fill: currentColor; } /* Source: ckeditor5-theme-lark/theme/ckeditor5-ui/components/input/input.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A visual style of focused element's border. */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A helper to combine multiple shadows. */ /** * Gives an element a drop shadow so it looks like a floating panel. */ :root { --ck-input-width: 18em; /* Backward compatibility. */ --ck-input-text-width: var(--ck-input-width); } .ck.ck-input { border-radius: 0; } .ck-rounded-corners .ck.ck-input, .ck.ck-input.ck-rounded-corners { border-radius: var(--ck-border-radius); } .ck.ck-input { background: var(--ck-color-input-background); border: 1px solid var(--ck-color-input-border); padding: var(--ck-spacing-extra-tiny) var(--ck-spacing-medium); min-width: var(--ck-input-width); /* This is important to stay of the same height as surrounding buttons */ min-height: var(--ck-ui-component-min-height); /* Apply some smooth transition to the box-shadow and border. */ transition: box-shadow .1s ease-in-out, border .1s ease-in-out; } .ck.ck-input:focus { /* Disable native outline. */ outline: none; border: var(--ck-focus-ring); box-shadow: var(--ck-focus-outer-shadow), 0 0; } .ck.ck-input[readonly] { border: 1px solid var(--ck-color-input-disabled-border); background: var(--ck-color-input-disabled-background); color: var(--ck-color-input-disabled-text); } .ck.ck-input[readonly]:focus { /* The read-only input should have a slightly less visible shadow when focused. */ box-shadow: var(--ck-focus-disabled-outer-shadow), 0 0; } .ck.ck-input.ck-error { border-color: var(--ck-color-input-error-border); animation: ck-input-shake .3s ease both; } .ck.ck-input.ck-error:focus { box-shadow: var(--ck-focus-error-outer-shadow), 0 0; } @keyframes ck-input-shake { 20% { transform: translateX(-2px); } 40% { transform: translateX(2px); } 60% { transform: translateX(-1px); } 80% { transform: translateX(1px); } } /* Source: ckeditor5-theme-lark/theme/ckeditor5-ui/components/label/label.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-label { font-weight: bold; } /* Source: ckeditor5-theme-lark/theme/ckeditor5-ui/components/labeledfield/labeledfieldview.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ :root { --ck-labeled-field-view-transition: .1s cubic-bezier(0, 0, 0.24, 0.95); --ck-labeled-field-empty-unfocused-max-width: 100% - 2 * var(--ck-spacing-medium); --ck-labeled-field-label-default-position-x: var(--ck-spacing-medium); --ck-labeled-field-label-default-position-y: calc(0.6 * var(--ck-font-size-base)); --ck-color-labeled-field-label-background: var(--ck-color-base-background); } .ck.ck-labeled-field-view { border-radius: 0; } .ck-rounded-corners .ck.ck-labeled-field-view, .ck.ck-labeled-field-view.ck-rounded-corners { border-radius: var(--ck-border-radius); } .ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper { width: 100%; } .ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label { top: 0px; } [dir="ltr"] :is(.ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label) { left: 0px; } [dir="rtl"] :is(.ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label) { right: 0px; } .ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label { pointer-events: none; transform-origin: 0 0; /* By default, display the label scaled down above the field. */ transform: translate(var(--ck-spacing-medium), -6px) scale(.75); background: var(--ck-color-labeled-field-label-background); padding: 0 calc(.5 * var(--ck-font-size-tiny)); line-height: initial; font-weight: normal; /* Prevent overflow when the label is longer than the input */ text-overflow: ellipsis; overflow: hidden; max-width: 100%; transition: transform var(--ck-labeled-field-view-transition), padding var(--ck-labeled-field-view-transition), background var(--ck-labeled-field-view-transition); } .ck.ck-labeled-field-view.ck-error > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label { color: var(--ck-color-base-error); } .ck.ck-labeled-field-view.ck-error .ck-input:not([readonly]) + .ck.ck-label { color: var(--ck-color-base-error); } .ck.ck-labeled-field-view .ck-labeled-field-view__status { font-size: var(--ck-font-size-small); margin-top: var(--ck-spacing-small); /* Let the info wrap to the next line to avoid stretching the layout horizontally. The status could be very long. */ white-space: normal; } .ck.ck-labeled-field-view .ck-labeled-field-view__status.ck-labeled-field-view__status_error { color: var(--ck-color-base-error); } /* Disabled fields and fields that have no focus should fade out. */ .ck.ck-labeled-field-view.ck-disabled > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label, .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(--ck-color-input-disabled-text); } /* Fields that are disabled or not focused and without a placeholder should have full-sized labels. */ /* stylelint-disable-next-line no-descending-specificity */ [dir="ltr"] :is(.ck.ck-labeled-field-view.ck-disabled.ck-labeled-field-view_empty > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label,.ck.ck-labeled-field-view.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused):not(.ck-labeled-field-view_placeholder) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label) { transform: translate(var(--ck-labeled-field-label-default-position-x), var(--ck-labeled-field-label-default-position-y)) scale(1); } [dir="rtl"] :is(.ck.ck-labeled-field-view.ck-disabled.ck-labeled-field-view_empty > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label,.ck.ck-labeled-field-view.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused):not(.ck-labeled-field-view_placeholder) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label) { transform: translate(calc(-1 * var(--ck-labeled-field-label-default-position-x)), var(--ck-labeled-field-label-default-position-y)) scale(1); } .ck.ck-labeled-field-view.ck-disabled.ck-labeled-field-view_empty > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label, .ck.ck-labeled-field-view.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused):not(.ck-labeled-field-view_placeholder) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label { /* Compensate for the default translate position. */ max-width: calc(var(--ck-labeled-field-empty-unfocused-max-width)); background: transparent; padding: 0; } /*------ DropdownView integration ----------------------------------------------------------------------------------- */ /* Make sure dropdown' background color in any of dropdown's state does not collide with labeled field. */ .ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > .ck-dropdown > .ck.ck-button { background: transparent; } /* When the dropdown is "empty", the labeled field label replaces its label. */ .ck.ck-labeled-field-view.ck-labeled-field-view_empty > .ck.ck-labeled-field-view__input-wrapper > .ck-dropdown > .ck-button > .ck-button__label { opacity: 0; } /* Make sure the label of the empty, unfocused input does not cover the dropdown arrow. */ .ck.ck-labeled-field-view.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused):not(.ck-labeled-field-view_placeholder) > .ck.ck-labeled-field-view__input-wrapper > .ck-dropdown + .ck-label { max-width: calc(var(--ck-labeled-field-empty-unfocused-max-width) - var(--ck-dropdown-arrow-size) - var(--ck-spacing-standard)); } /* Source: ckeditor5-theme-lark/theme/ckeditor5-ui/components/labeledinput/labeledinput.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-labeled-input .ck-labeled-input__status { font-size: var(--ck-font-size-small); margin-top: var(--ck-spacing-small); /* Let the info wrap to the next line to avoid stretching the layout horizontally. The status could be very long. */ white-space: normal; } .ck.ck-labeled-input .ck-labeled-input__status_error { color: var(--ck-color-base-error); } /* Source: ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A class which indicates that an element holding it is disabled. */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A helper to combine multiple shadows. */ /** * Gives an element a drop shadow so it looks like a floating panel. */ .ck.ck-list { border-radius: 0; } .ck-rounded-corners .ck.ck-list, .ck.ck-list.ck-rounded-corners { border-radius: var(--ck-border-radius); } .ck.ck-list { list-style-type: none; background: var(--ck-color-list-background); } .ck.ck-list__item { cursor: default; min-width: 12em; } .ck.ck-list__item .ck-button { min-height: unset; width: 100%; text-align: left; border-radius: 0; /* List items should have the same height. Use absolute units to make sure it is so because e.g. different heading styles may have different height https://github.com/ckeditor/ckeditor5-heading/issues/63 */ padding: calc(.2 * var(--ck-line-height-base) * var(--ck-font-size-base)) calc(.4 * var(--ck-line-height-base) * var(--ck-font-size-base)); } .ck.ck-list__item .ck-button .ck-button__label { /* https://github.com/ckeditor/ckeditor5-heading/issues/63 */ line-height: calc(1.2 * var(--ck-line-height-base) * var(--ck-font-size-base)); } .ck.ck-list__item .ck-button:active { box-shadow: none; } .ck.ck-list__item .ck-button.ck-on { background: var(--ck-color-list-button-on-background); color: var(--ck-color-list-button-on-text); } .ck.ck-list__item .ck-button.ck-on:active { box-shadow: none; } .ck.ck-list__item .ck-button.ck-on:hover:not(.ck-disabled) { background: var(--ck-color-list-button-on-background-focus); } .ck.ck-list__item .ck-button.ck-on:focus:not(.ck-switchbutton):not(.ck-disabled) { border-color: var(--ck-color-base-background); } .ck.ck-list__item .ck-button:hover:not(.ck-disabled) { background: var(--ck-color-list-button-hover-background); } /* It's unnecessary to change the background/text of a switch toggle; it has different ways of conveying its state (like the switcher) */ .ck.ck-list__item .ck-switchbutton.ck-on { background: var(--ck-color-list-background); color: inherit; } .ck.ck-list__item .ck-switchbutton.ck-on:hover:not(.ck-disabled) { background: var(--ck-color-list-button-hover-background); color: inherit; } .ck.ck-list__separator { height: 1px; width: 100%; background: var(--ck-color-base-border); } /* Source: ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/balloonpanel.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A helper to combine multiple shadows. */ /** * Gives an element a drop shadow so it looks like a floating panel. */ :root { --ck-balloon-border-width: 1px; --ck-balloon-arrow-offset: 2px; --ck-balloon-arrow-height: 10px; --ck-balloon-arrow-half-width: 8px; --ck-balloon-arrow-drop-shadow: 0 2px 2px var(--ck-color-shadow-drop); } .ck.ck-balloon-panel { border-radius: 0; } .ck-rounded-corners .ck.ck-balloon-panel, .ck.ck-balloon-panel.ck-rounded-corners { border-radius: var(--ck-border-radius); } .ck.ck-balloon-panel { box-shadow: var(--ck-drop-shadow), 0 0; min-height: 15px; background: var(--ck-color-panel-background); border: var(--ck-balloon-border-width) solid var(--ck-color-panel-border); } .ck.ck-balloon-panel.ck-balloon-panel_with-arrow::before, .ck.ck-balloon-panel.ck-balloon-panel_with-arrow::after { width: 0; height: 0; border-style: solid; } .ck.ck-balloon-panel[class*="arrow_n"]::before, .ck.ck-balloon-panel[class*="arrow_n"]::after { border-width: 0 var(--ck-balloon-arrow-half-width) var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width); } .ck.ck-balloon-panel[class*="arrow_n"]::before { border-color: transparent transparent var(--ck-color-panel-border) transparent; margin-top: calc( -1 * var(--ck-balloon-border-width) ); } .ck.ck-balloon-panel[class*="arrow_n"]::after { border-color: transparent transparent var(--ck-color-panel-background) transparent; margin-top: calc( var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width) ); } .ck.ck-balloon-panel[class*="arrow_s"]::before, .ck.ck-balloon-panel[class*="arrow_s"]::after { border-width: var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width) 0 var(--ck-balloon-arrow-half-width); } .ck.ck-balloon-panel[class*="arrow_s"]::before { border-color: var(--ck-color-panel-border) transparent transparent; filter: drop-shadow(var(--ck-balloon-arrow-drop-shadow)); margin-bottom: calc( -1 * var(--ck-balloon-border-width) ); } .ck.ck-balloon-panel[class*="arrow_s"]::after { border-color: var(--ck-color-panel-background) transparent transparent transparent; margin-bottom: calc( var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width) ); } .ck.ck-balloon-panel[class*="arrow_e"]::before, .ck.ck-balloon-panel[class*="arrow_e"]::after { border-width: var(--ck-balloon-arrow-half-width) 0 var(--ck-balloon-arrow-half-width) var(--ck-balloon-arrow-height); } .ck.ck-balloon-panel[class*="arrow_e"]::before { border-color: transparent transparent transparent var(--ck-color-panel-border); margin-right: calc( -1 * var(--ck-balloon-border-width) ); } .ck.ck-balloon-panel[class*="arrow_e"]::after { border-color: transparent transparent transparent var(--ck-color-panel-background); margin-right: calc( var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width) ); } .ck.ck-balloon-panel[class*="arrow_w"]::before, .ck.ck-balloon-panel[class*="arrow_w"]::after { border-width: var(--ck-balloon-arrow-half-width) var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width) 0; } .ck.ck-balloon-panel[class*="arrow_w"]::before { border-color: transparent var(--ck-color-panel-border) transparent transparent; margin-left: calc( -1 * var(--ck-balloon-border-width) ); } .ck.ck-balloon-panel[class*="arrow_w"]::after { border-color: transparent var(--ck-color-panel-background) transparent transparent; margin-left: calc( var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width) ); } .ck.ck-balloon-panel.ck-balloon-panel_arrow_n::before, .ck.ck-balloon-panel.ck-balloon-panel_arrow_n::after { left: 50%; margin-left: calc(-1 * var(--ck-balloon-arrow-half-width)); top: calc(-1 * var(--ck-balloon-arrow-height)); } .ck.ck-balloon-panel.ck-balloon-panel_arrow_nw::before, .ck.ck-balloon-panel.ck-balloon-panel_arrow_nw::after { left: calc(2 * var(--ck-balloon-arrow-half-width)); top: calc(-1 * var(--ck-balloon-arrow-height)); } .ck.ck-balloon-panel.ck-balloon-panel_arrow_ne::before, .ck.ck-balloon-panel.ck-balloon-panel_arrow_ne::after { right: calc(2 * var(--ck-balloon-arrow-half-width)); top: calc(-1 * var(--ck-balloon-arrow-height)); } .ck.ck-balloon-panel.ck-balloon-panel_arrow_s::before, .ck.ck-balloon-panel.ck-balloon-panel_arrow_s::after { left: 50%; margin-left: calc(-1 * var(--ck-balloon-arrow-half-width)); bottom: calc(-1 * var(--ck-balloon-arrow-height)); } .ck.ck-balloon-panel.ck-balloon-panel_arrow_sw::before, .ck.ck-balloon-panel.ck-balloon-panel_arrow_sw::after { left: calc(2 * var(--ck-balloon-arrow-half-width)); bottom: calc(-1 * var(--ck-balloon-arrow-height)); } .ck.ck-balloon-panel.ck-balloon-panel_arrow_se::before, .ck.ck-balloon-panel.ck-balloon-panel_arrow_se::after { right: calc(2 * var(--ck-balloon-arrow-half-width)); bottom: calc(-1 * var(--ck-balloon-arrow-height)); } .ck.ck-balloon-panel.ck-balloon-panel_arrow_sme::before, .ck.ck-balloon-panel.ck-balloon-panel_arrow_sme::after { right: 25%; margin-right: calc(2 * var(--ck-balloon-arrow-half-width)); bottom: calc(-1 * var(--ck-balloon-arrow-height)); } .ck.ck-balloon-panel.ck-balloon-panel_arrow_smw::before, .ck.ck-balloon-panel.ck-balloon-panel_arrow_smw::after { left: 25%; margin-left: calc(2 * var(--ck-balloon-arrow-half-width)); bottom: calc(-1 * var(--ck-balloon-arrow-height)); } .ck.ck-balloon-panel.ck-balloon-panel_arrow_nme::before, .ck.ck-balloon-panel.ck-balloon-panel_arrow_nme::after { right: 25%; margin-right: calc(2 * var(--ck-balloon-arrow-half-width)); top: calc(-1 * var(--ck-balloon-arrow-height)); } .ck.ck-balloon-panel.ck-balloon-panel_arrow_nmw::before, .ck.ck-balloon-panel.ck-balloon-panel_arrow_nmw::after { left: 25%; margin-left: calc(2 * var(--ck-balloon-arrow-half-width)); top: calc(-1 * var(--ck-balloon-arrow-height)); } .ck.ck-balloon-panel.ck-balloon-panel_arrow_e::before, .ck.ck-balloon-panel.ck-balloon-panel_arrow_e::after { right: calc(-1 * var(--ck-balloon-arrow-height)); margin-top: calc(-1 * var(--ck-balloon-arrow-half-width)); top: 50%; } .ck.ck-balloon-panel.ck-balloon-panel_arrow_w::before, .ck.ck-balloon-panel.ck-balloon-panel_arrow_w::after { left: calc(-1 * var(--ck-balloon-arrow-height)); margin-top: calc(-1 * var(--ck-balloon-arrow-half-width)); top: 50%; } /* Source: ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/balloonrotator.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck .ck-balloon-rotator__navigation { background: var(--ck-color-toolbar-background); border-bottom: 1px solid var(--ck-color-toolbar-border); padding: 0 var(--ck-spacing-small); /* Let's keep similar appearance to `ck-toolbar`. */ } .ck .ck-balloon-rotator__navigation > * { margin-right: var(--ck-spacing-small); margin-top: var(--ck-spacing-small); margin-bottom: var(--ck-spacing-small); } /* Gives counter more breath than buttons. */ .ck .ck-balloon-rotator__navigation .ck-balloon-rotator__counter { margin-right: var(--ck-spacing-standard); /* We need to use smaller margin because of previous button's right margin. */ margin-left: var(--ck-spacing-small); } /* Disable default annotation shadow inside rotator with fake panels. */ .ck .ck-balloon-rotator__content .ck.ck-annotation-wrapper { box-shadow: none; } /* Source: ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/fakepanel.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A helper to combine multiple shadows. */ /** * Gives an element a drop shadow so it looks like a floating panel. */ :root { --ck-balloon-fake-panel-offset-horizontal: 6px; --ck-balloon-fake-panel-offset-vertical: 6px; } /* Let's use `.ck-balloon-panel` appearance. See: balloonpanel.css. */ .ck .ck-fake-panel div { box-shadow: var(--ck-drop-shadow), 0 0; min-height: 15px; background: var(--ck-color-panel-background); border: 1px solid var(--ck-color-panel-border); border-radius: var(--ck-border-radius); width: 100%; height: 100%; } .ck .ck-fake-panel div:nth-child( 1 ) { margin-left: var(--ck-balloon-fake-panel-offset-horizontal); margin-top: var(--ck-balloon-fake-panel-offset-vertical); } .ck .ck-fake-panel div:nth-child( 2 ) { margin-left: calc(var(--ck-balloon-fake-panel-offset-horizontal) * 2); margin-top: calc(var(--ck-balloon-fake-panel-offset-vertical) * 2); } .ck .ck-fake-panel div:nth-child( 3 ) { margin-left: calc(var(--ck-balloon-fake-panel-offset-horizontal) * 3); margin-top: calc(var(--ck-balloon-fake-panel-offset-vertical) * 3); } /* If balloon is positioned above element, we need to move fake panel to the top. */ .ck .ck-balloon-panel_arrow_s + .ck-fake-panel, .ck .ck-balloon-panel_arrow_se + .ck-fake-panel, .ck .ck-balloon-panel_arrow_sw + .ck-fake-panel { --ck-balloon-fake-panel-offset-vertical: -6px; } /* Source: ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/stickypanel.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A helper to combine multiple shadows. */ /** * Gives an element a drop shadow so it looks like a floating panel. */ .ck.ck-sticky-panel .ck-sticky-panel__content_sticky { box-shadow: var(--ck-drop-shadow), 0 0; border-width: 0 1px 1px; border-top-left-radius: 0; border-top-right-radius: 0; } /* Source: ckeditor5-theme-lark/theme/ckeditor5-ui/components/responsive-form/responsiveform.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck-vertical-form > .ck-button:nth-last-child(2)::after { border-right: 1px solid var(--ck-color-base-border); } .ck.ck-responsive-form { padding: var(--ck-spacing-large); } .ck.ck-responsive-form:focus { /* See: https://github.com/ckeditor/ckeditor5/issues/4773 */ outline: none; } [dir="ltr"] .ck.ck-responsive-form > :not(:first-child) { margin-left: var(--ck-spacing-standard); } [dir="rtl"] .ck.ck-responsive-form > :not(:last-child) { margin-left: var(--ck-spacing-standard); } @media screen and (max-width: 600px) { .ck.ck-responsive-form { padding: 0; width: calc(.8 * var(--ck-input-width)); } .ck.ck-responsive-form .ck-labeled-field-view { margin: var(--ck-spacing-large) var(--ck-spacing-large) 0; } .ck.ck-responsive-form .ck-labeled-field-view .ck-input-text { min-width: 0; width: 100%; } /* Let the long error messages wrap in the narrow form. */ .ck.ck-responsive-form .ck-labeled-field-view .ck-labeled-field-view__error { white-space: normal; } /* Styles for two last buttons in the form (save&cancel, edit&unlink, etc.). */ .ck.ck-responsive-form > .ck-button:nth-last-child(2)::after { border-right: 1px solid var(--ck-color-base-border); } .ck.ck-responsive-form > .ck-button:nth-last-child(1), .ck.ck-responsive-form > .ck-button:nth-last-child(2) { padding: var(--ck-spacing-standard); margin-top: var(--ck-spacing-large); border-radius: 0; } .ck.ck-responsive-form > .ck-button:nth-last-child(1):not(:focus), .ck.ck-responsive-form > .ck-button:nth-last-child(2):not(:focus) { border-top: 1px solid var(--ck-color-base-border); } [dir="ltr"] :is(.ck.ck-responsive-form > .ck-button:nth-last-child(1)), [dir="ltr"] :is(.ck.ck-responsive-form > .ck-button:nth-last-child(2)) { margin-left: 0; } [dir="rtl"] :is(.ck.ck-responsive-form > .ck-button:nth-last-child(1)), [dir="rtl"] :is(.ck.ck-responsive-form > .ck-button:nth-last-child(2)) { margin-left: 0; } [dir="rtl"] :is(.ck.ck-responsive-form > .ck-button:nth-last-child(1)):last-of-type, [dir="rtl"] :is(.ck.ck-responsive-form > .ck-button:nth-last-child(2)):last-of-type { border-right: 1px solid var(--ck-color-base-border); } } /* Source: ckeditor5-theme-lark/theme/ckeditor5-ui/components/toolbar/blocktoolbar.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-color-block-toolbar-button: var(--ck-color-text); --ck-block-toolbar-button-size: var(--ck-font-size-normal); } .ck.ck-block-toolbar-button { color: var(--ck-color-block-toolbar-button); font-size: var(--ck-block-toolbar-size); } /* Source: ckeditor5-theme-lark/theme/ckeditor5-ui/components/toolbar/toolbar.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-toolbar { border-radius: 0; } .ck-rounded-corners .ck.ck-toolbar, .ck.ck-toolbar.ck-rounded-corners { border-radius: var(--ck-border-radius); } .ck.ck-toolbar { background: var(--ck-color-toolbar-background); padding: 0 var(--ck-spacing-small); border: 1px solid var(--ck-color-toolbar-border); } .ck.ck-toolbar .ck.ck-toolbar__separator { align-self: stretch; width: 1px; min-width: 1px; background: var(--ck-color-toolbar-border); /* * These margins make the separators look better in balloon toolbars (when aligned with the "tip"). * See https://github.com/ckeditor/ckeditor5/issues/7493. */ margin-top: var(--ck-spacing-small); margin-bottom: var(--ck-spacing-small); } .ck.ck-toolbar .ck-toolbar__line-break { height: 0; } .ck.ck-toolbar > .ck-toolbar__items > *:not(.ck-toolbar__line-break) { /* (#11) Separate toolbar items. */ margin-right: var(--ck-spacing-small); } /* Don't display a separator after an empty items container, for instance, when all items were grouped */ :is(.ck.ck-toolbar > .ck-toolbar__items):empty + .ck.ck-toolbar__separator { display: none; } .ck.ck-toolbar > .ck-toolbar__items > *:not(.ck-toolbar__line-break), .ck.ck-toolbar > .ck.ck-toolbar__grouped-dropdown { /* Make sure items wrapped to the next line have v-spacing */ margin-top: var(--ck-spacing-small); margin-bottom: var(--ck-spacing-small); } .ck.ck-toolbar.ck-toolbar_vertical { /* Items in a vertical toolbar span the entire width. */ padding: 0; /* Specificity matters here. See https://github.com/ckeditor/ckeditor5-theme-lark/issues/168. */ } .ck.ck-toolbar.ck-toolbar_vertical > .ck-toolbar__items > .ck { /* Items in a vertical toolbar should span the horizontal space. */ width: 100%; /* Items in a vertical toolbar should have no margin. */ margin: 0; /* Items in a vertical toolbar span the entire width so rounded corners are pointless. */ border-radius: 0; } .ck.ck-toolbar.ck-toolbar_compact { /* No spacing around items. */ padding: 0; } .ck.ck-toolbar.ck-toolbar_compact > .ck-toolbar__items > * { /* Compact toolbar items have no spacing between them. */ margin: 0; /* "Middle" children should have no rounded corners. */ } .ck.ck-toolbar.ck-toolbar_compact > .ck-toolbar__items > *:not(:first-child):not(:last-child) { border-radius: 0; } /* * Dropdown button has asymmetric padding to fit the arrow. * This button has no arrow so let's revert that padding back to normal. */ .ck.ck-toolbar > .ck.ck-toolbar__grouped-dropdown > .ck.ck-button.ck-dropdown__button { padding-left: var(--ck-spacing-tiny); } /* A drop-down containing the nested toolbar with configured items. */ /* Prevent empty space in the panel when the dropdown label is visible and long but the toolbar has few items. */ .ck.ck-toolbar .ck-toolbar__nested-toolbar-dropdown > .ck-dropdown__panel { min-width: auto; } .ck.ck-toolbar .ck-toolbar__nested-toolbar-dropdown > .ck-button > .ck-button__label { max-width: 7em; width: auto; } .ck-toolbar-container .ck.ck-toolbar { border: 0; } /* stylelint-disable */ /* * Styles for RTL toolbars. * * Note: In some cases (e.g. a decoupled editor), the toolbar has its own "dir" * because its parent is not controlled by the editor framework. */ [dir="rtl"] .ck.ck-toolbar > .ck-toolbar__items > .ck, .ck.ck-toolbar[dir="rtl"] > .ck-toolbar__items > .ck { margin-right: 0; } [dir="rtl"] .ck.ck-toolbar:not(.ck-toolbar_compact) > .ck-toolbar__items > .ck, .ck.ck-toolbar[dir="rtl"]:not(.ck-toolbar_compact) > .ck-toolbar__items > .ck { /* (#11) Separate toolbar items. */ margin-left: var(--ck-spacing-small); } [dir="rtl"] .ck.ck-toolbar > .ck-toolbar__items > .ck:last-child, .ck.ck-toolbar[dir="rtl"] > .ck-toolbar__items > .ck:last-child { margin-left: 0; } /* No rounded corners on the right side of the first child. */ [dir="rtl"] .ck.ck-toolbar.ck-toolbar_compact > .ck-toolbar__items > .ck:first-child, .ck.ck-toolbar.ck-toolbar_compact[dir="rtl"] > .ck-toolbar__items > .ck:first-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } /* No rounded corners on the left side of the last child. */ [dir="rtl"] .ck.ck-toolbar.ck-toolbar_compact > .ck-toolbar__items > .ck:last-child, .ck.ck-toolbar.ck-toolbar_compact[dir="rtl"] > .ck-toolbar__items > .ck:last-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } /* Separate the the separator form the grouping dropdown when some items are grouped. */ [dir="rtl"] .ck.ck-toolbar > .ck.ck-toolbar__separator, .ck.ck-toolbar[dir="rtl"] > .ck.ck-toolbar__separator { margin-left: var(--ck-spacing-small); } /* Some spacing between the items and the separator before the grouped items dropdown. */ [dir="rtl"] .ck.ck-toolbar.ck-toolbar_grouping > .ck-toolbar__items:not(:empty):not(:only-child), .ck.ck-toolbar.ck-toolbar_grouping[dir="rtl"] > .ck-toolbar__items:not(:empty):not(:only-child) { margin-left: var(--ck-spacing-small); } /* * Styles for LTR toolbars. * * Note: In some cases (e.g. a decoupled editor), the toolbar has its own "dir" * because its parent is not controlled by the editor framework. */ [dir="ltr"] .ck.ck-toolbar > .ck-toolbar__items > .ck:last-child, .ck.ck-toolbar[dir="ltr"] > .ck-toolbar__items > .ck:last-child { margin-right: 0; } /* No rounded corners on the right side of the first child. */ [dir="ltr"] .ck.ck-toolbar.ck-toolbar_compact > .ck-toolbar__items > .ck:first-child, .ck.ck-toolbar.ck-toolbar_compact[dir="ltr"] > .ck-toolbar__items > .ck:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } /* No rounded corners on the left side of the last child. */ [dir="ltr"] .ck.ck-toolbar.ck-toolbar_compact > .ck-toolbar__items > .ck:last-child, .ck.ck-toolbar.ck-toolbar_compact[dir="ltr"] > .ck-toolbar__items > .ck:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } /* Separate the the separator form the grouping dropdown when some items are grouped. */ [dir="ltr"] .ck.ck-toolbar > .ck.ck-toolbar__separator, .ck.ck-toolbar[dir="ltr"] > .ck.ck-toolbar__separator { margin-right: var(--ck-spacing-small); } /* Some spacing between the items and the separator before the grouped items dropdown. */ [dir="ltr"] .ck.ck-toolbar.ck-toolbar_grouping > .ck-toolbar__items:not(:empty):not(:only-child), .ck.ck-toolbar.ck-toolbar_grouping[dir="ltr"] > .ck-toolbar__items:not(:empty):not(:only-child) { margin-right: var(--ck-spacing-small); } /* stylelint-enable */ /* Source: ckeditor5-theme-lark/theme/ckeditor5-ui/components/tooltip/tooltip.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ .ck.ck-balloon-panel.ck-tooltip { --ck-balloon-border-width: 0px; --ck-balloon-arrow-offset: 0px; --ck-balloon-arrow-half-width: 4px; --ck-balloon-arrow-height: 4px; --ck-color-panel-background: var(--ck-color-tooltip-background); padding: 0 var(--ck-spacing-medium); /* Reset balloon panel styles */ box-shadow: none; } .ck.ck-balloon-panel.ck-tooltip .ck-tooltip__text { font-size: .9em; line-height: 1.5; color: var(--ck-color-tooltip-text); } /* Hide the default shadow of the .ck-balloon-panel tip */ .ck.ck-balloon-panel.ck-tooltip::before { display: none; } /* Source: ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_colors.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-color-base-foreground: hsl(0, 0%, 98%); --ck-color-base-background: hsl(0, 0%, 100%); --ck-color-base-border: hsl(220, 6%, 81%); --ck-color-base-action: hsl(104, 50.2%, 42.5%); --ck-color-base-focus: hsl(209, 92%, 70%); --ck-color-base-text: hsl(0, 0%, 20%); --ck-color-base-active: hsl(218.1, 100%, 58%); --ck-color-base-active-focus: hsl(218.2, 100%, 52.5%); --ck-color-base-error: hsl(15, 100%, 43%); /* -- Generic colors ------------------------------------------------------------------------ */ --ck-color-focus-border-coordinates: 218, 81.8%, 56.9%; --ck-color-focus-border: hsl(var(--ck-color-focus-border-coordinates)); --ck-color-focus-outer-shadow: hsl(212.4, 89.3%, 89%); --ck-color-focus-disabled-shadow: hsla(209, 90%, 72%,.3); --ck-color-focus-error-shadow: hsla(9,100%,56%,.3); --ck-color-text: var(--ck-color-base-text); --ck-color-shadow-drop: hsla(0, 0%, 0%, 0.15); --ck-color-shadow-drop-active: hsla(0, 0%, 0%, 0.2); --ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1); /* -- Buttons ------------------------------------------------------------------------------- */ --ck-color-button-default-background: transparent; --ck-color-button-default-hover-background: hsl(0, 0%, 94.1%); --ck-color-button-default-active-background: hsl(0, 0%, 94.1%); --ck-color-button-default-disabled-background: transparent; --ck-color-button-on-background: hsl(212, 100%, 97.1%); --ck-color-button-on-hover-background: hsl(211.7, 100%, 92.9%); --ck-color-button-on-active-background: hsl(211.7, 100%, 92.9%); --ck-color-button-on-disabled-background: hsl(211, 15%, 95%); --ck-color-button-on-color: hsl(218.1, 100%, 58%); --ck-color-button-action-background: var(--ck-color-base-action); --ck-color-button-action-hover-background: hsl(104, 53.2%, 40.2%); --ck-color-button-action-active-background: hsl(104, 53.2%, 40.2%); --ck-color-button-action-disabled-background: hsl(104, 44%, 58%); --ck-color-button-action-text: var(--ck-color-base-background); --ck-color-button-save: hsl(120, 100%, 27%); --ck-color-button-cancel: hsl(15, 100%, 43%); --ck-color-switch-button-off-background: hsl(0, 0%, 57.6%); --ck-color-switch-button-off-hover-background: hsl(0, 0%, 49%); --ck-color-switch-button-on-background: var(--ck-color-button-action-background); --ck-color-switch-button-on-hover-background: hsl(104, 53.2%, 40.2%); --ck-color-switch-button-inner-background: var(--ck-color-base-background); --ck-color-switch-button-inner-shadow: hsla(0, 0%, 0%, 0.1); /* -- Dropdown ------------------------------------------------------------------------------ */ --ck-color-dropdown-panel-background: var(--ck-color-base-background); --ck-color-dropdown-panel-border: var(--ck-color-base-border); /* -- Input --------------------------------------------------------------------------------- */ --ck-color-input-background: var(--ck-color-base-background); --ck-color-input-border: var(--ck-color-base-border); --ck-color-input-error-border: var(--ck-color-base-error); --ck-color-input-text: var(--ck-color-base-text); --ck-color-input-disabled-background: hsl(0, 0%, 95%); --ck-color-input-disabled-border: var(--ck-color-base-border); --ck-color-input-disabled-text: hsl(0, 0%, 46%); /* -- List ---------------------------------------------------------------------------------- */ --ck-color-list-background: var(--ck-color-base-background); --ck-color-list-button-hover-background: var(--ck-color-button-default-hover-background); --ck-color-list-button-on-background: var(--ck-color-button-on-color); --ck-color-list-button-on-background-focus: var(--ck-color-button-on-color); --ck-color-list-button-on-text: var(--ck-color-base-background); /* -- Panel --------------------------------------------------------------------------------- */ --ck-color-panel-background: var(--ck-color-base-background); --ck-color-panel-border: var(--ck-color-base-border); /* -- Toolbar ------------------------------------------------------------------------------- */ --ck-color-toolbar-background: var(--ck-color-base-background); --ck-color-toolbar-border: var(--ck-color-base-border); /* -- Tooltip ------------------------------------------------------------------------------- */ --ck-color-tooltip-background: var(--ck-color-base-text); --ck-color-tooltip-text: var(--ck-color-base-background); /* -- Engine -------------------------------------------------------------------------------- */ --ck-color-engine-placeholder-text: hsl(0, 0%, 44%); /* -- Upload -------------------------------------------------------------------------------- */ --ck-color-upload-bar-background: hsl(209, 92%, 70%); /* -- Link -------------------------------------------------------------------------------- */ --ck-color-link-default: hsl(240, 100%, 47%); --ck-color-link-selected-background: hsla(201, 100%, 56%, 0.1); --ck-color-link-fake-selection: hsla(201, 100%, 56%, 0.3); /* -- Search result highlight ---------------------------------------------------------------- */ --ck-color-highlight-background: hsl(60, 100%, 50%) } /* Source: ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_disabled.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { /** * An opacity value of disabled UI item. */ --ck-disabled-opacity: .5; } /* Source: ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_focus.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { /** * The geometry of the of focused element's outer shadow. */ --ck-focus-outer-shadow-geometry: 0 0 0 3px; /** * A visual style of focused element's outer shadow. */ --ck-focus-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-outer-shadow); /** * A visual style of focused element's outer shadow (when disabled). */ --ck-focus-disabled-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-disabled-shadow); /** * A visual style of focused element's outer shadow (when has errors). */ --ck-focus-error-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-error-shadow); /** * A visual style of focused element's border or outline. */ --ck-focus-ring: 1px solid var(--ck-color-focus-border); } /* Source: ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_fonts.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-font-size-base: 13px; --ck-line-height-base: 1.84615; --ck-font-face: Helvetica, Arial, Tahoma, Verdana, Sans-Serif; --ck-font-size-tiny: 0.7em; --ck-font-size-small: 0.75em; --ck-font-size-normal: 1em; --ck-font-size-big: 1.4em; --ck-font-size-large: 1.8em; } /* Source: ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_reset.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { /* This is super-important. This is **manually** adjusted so a button without an icon is never smaller than a button with icon, additionally making sure that text-less buttons are perfect squares. The value is also shared by other components which should stay "in-line" with buttons. */ --ck-ui-component-min-height: 2.3em; } /** * Resets an element, ignoring its children. */ .ck.ck-reset, .ck.ck-reset_all, .ck-reset_all *:not(.ck-reset_all-excluded *) { /* Do not include inheritable rules here. */ margin: 0; padding: 0; border: 0; background: transparent; text-decoration: none; vertical-align: middle; transition: none; /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/105 */ word-wrap: break-word; } /** * Resets an element AND its children. */ .ck.ck-reset_all, .ck-reset_all *:not(.ck-reset_all-excluded *) { /* These are rule inherited by all children elements. */ border-collapse: collapse; font: normal normal normal var(--ck-font-size-base)/var(--ck-line-height-base) var(--ck-font-face); color: var(--ck-color-text); text-align: left; white-space: nowrap; cursor: auto; float: none; } .ck-reset_all .ck-rtl *:not(.ck-reset_all-excluded *) { text-align: right; } .ck-reset_all iframe:not(.ck-reset_all-excluded *) { /* For IE */ vertical-align: inherit; } .ck-reset_all textarea:not(.ck-reset_all-excluded *) { white-space: pre-wrap; } .ck-reset_all textarea:not(.ck-reset_all-excluded *), .ck-reset_all input[type="text"]:not(.ck-reset_all-excluded *), .ck-reset_all input[type="password"]:not(.ck-reset_all-excluded *) { cursor: text; } .ck-reset_all textarea[disabled]:not(.ck-reset_all-excluded *), .ck-reset_all input[type="text"][disabled]:not(.ck-reset_all-excluded *), .ck-reset_all input[type="password"][disabled]:not(.ck-reset_all-excluded *) { cursor: default; } .ck-reset_all fieldset:not(.ck-reset_all-excluded *) { padding: 10px; border: 2px groove hsl(255, 7%, 88%); } .ck-reset_all button:not(.ck-reset_all-excluded *)::-moz-focus-inner { /* See http://stackoverflow.com/questions/5517744/remove-extra-button-spacing-padding-in-firefox */ padding: 0; border: 0 } /** * Default UI rules for RTL languages. */ .ck[dir="rtl"], .ck[dir="rtl"] .ck { text-align: right; } /* Source: ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_rounded.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Default border-radius value. */ :root{ --ck-border-radius: 2px; } /* Source: ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_shadow.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { /** * A visual style of element's inner shadow (i.e. input). */ --ck-inner-shadow: 2px 2px 3px var(--ck-color-shadow-inner) inset; /** * A visual style of element's drop shadow (i.e. panel). */ --ck-drop-shadow: 0 1px 2px 1px var(--ck-color-shadow-drop); /** * A visual style of element's active shadow (i.e. comment or suggestion). */ --ck-drop-shadow-active: 0 3px 6px 1px var(--ck-color-shadow-drop-active); } /* Source: ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_spacing.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-spacing-unit: 0.6em; --ck-spacing-large: calc(var(--ck-spacing-unit) * 1.5); --ck-spacing-standard: var(--ck-spacing-unit); --ck-spacing-medium: calc(var(--ck-spacing-unit) * 0.8); --ck-spacing-small: calc(var(--ck-spacing-unit) * 0.5); --ck-spacing-tiny: calc(var(--ck-spacing-unit) * 0.3); --ck-spacing-extra-tiny: calc(var(--ck-spacing-unit) * 0.16); } /* Source: ckeditor5-theme-lark/theme/ckeditor5-ui/globals/globals.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-color-base-foreground: hsl(0, 0%, 98%); --ck-color-base-background: hsl(0, 0%, 100%); --ck-color-base-border: hsl(220, 6%, 81%); --ck-color-base-action: hsl(104, 50.2%, 42.5%); --ck-color-base-focus: hsl(209, 92%, 70%); --ck-color-base-text: hsl(0, 0%, 20%); --ck-color-base-active: hsl(218.1, 100%, 58%); --ck-color-base-active-focus: hsl(218.2, 100%, 52.5%); --ck-color-base-error: hsl(15, 100%, 43%); /* -- Generic colors ------------------------------------------------------------------------ */ --ck-color-focus-border-coordinates: 218, 81.8%, 56.9%; --ck-color-focus-border: hsl(var(--ck-color-focus-border-coordinates)); --ck-color-focus-outer-shadow: hsl(212.4, 89.3%, 89%); --ck-color-focus-disabled-shadow: hsla(209, 90%, 72%,.3); --ck-color-focus-error-shadow: hsla(9,100%,56%,.3); --ck-color-text: var(--ck-color-base-text); --ck-color-shadow-drop: hsla(0, 0%, 0%, 0.15); --ck-color-shadow-drop-active: hsla(0, 0%, 0%, 0.2); --ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1); /* -- Buttons ------------------------------------------------------------------------------- */ --ck-color-button-default-background: transparent; --ck-color-button-default-hover-background: hsl(0, 0%, 94.1%); --ck-color-button-default-active-background: hsl(0, 0%, 94.1%); --ck-color-button-default-disabled-background: transparent; --ck-color-button-on-background: hsl(212, 100%, 97.1%); --ck-color-button-on-hover-background: hsl(211.7, 100%, 92.9%); --ck-color-button-on-active-background: hsl(211.7, 100%, 92.9%); --ck-color-button-on-disabled-background: hsl(211, 15%, 95%); --ck-color-button-on-color: hsl(218.1, 100%, 58%); --ck-color-button-action-background: var(--ck-color-base-action); --ck-color-button-action-hover-background: hsl(104, 53.2%, 40.2%); --ck-color-button-action-active-background: hsl(104, 53.2%, 40.2%); --ck-color-button-action-disabled-background: hsl(104, 44%, 58%); --ck-color-button-action-text: var(--ck-color-base-background); --ck-color-button-save: hsl(120, 100%, 27%); --ck-color-button-cancel: hsl(15, 100%, 43%); --ck-color-switch-button-off-background: hsl(0, 0%, 57.6%); --ck-color-switch-button-off-hover-background: hsl(0, 0%, 49%); --ck-color-switch-button-on-background: var(--ck-color-button-action-background); --ck-color-switch-button-on-hover-background: hsl(104, 53.2%, 40.2%); --ck-color-switch-button-inner-background: var(--ck-color-base-background); --ck-color-switch-button-inner-shadow: hsla(0, 0%, 0%, 0.1); /* -- Dropdown ------------------------------------------------------------------------------ */ --ck-color-dropdown-panel-background: var(--ck-color-base-background); --ck-color-dropdown-panel-border: var(--ck-color-base-border); /* -- Input --------------------------------------------------------------------------------- */ --ck-color-input-background: var(--ck-color-base-background); --ck-color-input-border: var(--ck-color-base-border); --ck-color-input-error-border: var(--ck-color-base-error); --ck-color-input-text: var(--ck-color-base-text); --ck-color-input-disabled-background: hsl(0, 0%, 95%); --ck-color-input-disabled-border: var(--ck-color-base-border); --ck-color-input-disabled-text: hsl(0, 0%, 46%); /* -- List ---------------------------------------------------------------------------------- */ --ck-color-list-background: var(--ck-color-base-background); --ck-color-list-button-hover-background: var(--ck-color-button-default-hover-background); --ck-color-list-button-on-background: var(--ck-color-button-on-color); --ck-color-list-button-on-background-focus: var(--ck-color-button-on-color); --ck-color-list-button-on-text: var(--ck-color-base-background); /* -- Panel --------------------------------------------------------------------------------- */ --ck-color-panel-background: var(--ck-color-base-background); --ck-color-panel-border: var(--ck-color-base-border); /* -- Toolbar ------------------------------------------------------------------------------- */ --ck-color-toolbar-background: var(--ck-color-base-background); --ck-color-toolbar-border: var(--ck-color-base-border); /* -- Tooltip ------------------------------------------------------------------------------- */ --ck-color-tooltip-background: var(--ck-color-base-text); --ck-color-tooltip-text: var(--ck-color-base-background); /* -- Engine -------------------------------------------------------------------------------- */ --ck-color-engine-placeholder-text: hsl(0, 0%, 44%); /* -- Upload -------------------------------------------------------------------------------- */ --ck-color-upload-bar-background: hsl(209, 92%, 70%); /* -- Link -------------------------------------------------------------------------------- */ --ck-color-link-default: hsl(240, 100%, 47%); --ck-color-link-selected-background: hsla(201, 100%, 56%, 0.1); --ck-color-link-fake-selection: hsla(201, 100%, 56%, 0.3); /* -- Search result highlight ---------------------------------------------------------------- */ --ck-color-highlight-background: hsl(60, 100%, 50%) } /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { /** * An opacity value of disabled UI item. */ --ck-disabled-opacity: .5; } /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { /** * The geometry of the of focused element's outer shadow. */ --ck-focus-outer-shadow-geometry: 0 0 0 3px; /** * A visual style of focused element's outer shadow. */ --ck-focus-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-outer-shadow); /** * A visual style of focused element's outer shadow (when disabled). */ --ck-focus-disabled-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-disabled-shadow); /** * A visual style of focused element's outer shadow (when has errors). */ --ck-focus-error-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-error-shadow); /** * A visual style of focused element's border or outline. */ --ck-focus-ring: 1px solid var(--ck-color-focus-border); } /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-font-size-base: 13px; --ck-line-height-base: 1.84615; --ck-font-face: Helvetica, Arial, Tahoma, Verdana, Sans-Serif; --ck-font-size-tiny: 0.7em; --ck-font-size-small: 0.75em; --ck-font-size-normal: 1em; --ck-font-size-big: 1.4em; --ck-font-size-large: 1.8em; } /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { /* This is super-important. This is **manually** adjusted so a button without an icon is never smaller than a button with icon, additionally making sure that text-less buttons are perfect squares. The value is also shared by other components which should stay "in-line" with buttons. */ --ck-ui-component-min-height: 2.3em; } /** * Resets an element, ignoring its children. */ .ck.ck-reset, .ck.ck-reset_all, .ck-reset_all *:not(.ck-reset_all-excluded *) { /* Do not include inheritable rules here. */ margin: 0; padding: 0; border: 0; background: transparent; text-decoration: none; vertical-align: middle; transition: none; /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/105 */ word-wrap: break-word; } /** * Resets an element AND its children. */ .ck.ck-reset_all, .ck-reset_all *:not(.ck-reset_all-excluded *) { /* These are rule inherited by all children elements. */ border-collapse: collapse; font: normal normal normal var(--ck-font-size-base)/var(--ck-line-height-base) var(--ck-font-face); color: var(--ck-color-text); text-align: left; white-space: nowrap; cursor: auto; float: none; } .ck-reset_all .ck-rtl *:not(.ck-reset_all-excluded *) { text-align: right; } .ck-reset_all iframe:not(.ck-reset_all-excluded *) { /* For IE */ vertical-align: inherit; } .ck-reset_all textarea:not(.ck-reset_all-excluded *) { white-space: pre-wrap; } .ck-reset_all textarea:not(.ck-reset_all-excluded *), .ck-reset_all input[type="text"]:not(.ck-reset_all-excluded *), .ck-reset_all input[type="password"]:not(.ck-reset_all-excluded *) { cursor: text; } .ck-reset_all textarea[disabled]:not(.ck-reset_all-excluded *), .ck-reset_all input[type="text"][disabled]:not(.ck-reset_all-excluded *), .ck-reset_all input[type="password"][disabled]:not(.ck-reset_all-excluded *) { cursor: default; } .ck-reset_all fieldset:not(.ck-reset_all-excluded *) { padding: 10px; border: 2px groove hsl(255, 7%, 88%); } .ck-reset_all button:not(.ck-reset_all-excluded *)::-moz-focus-inner { /* See http://stackoverflow.com/questions/5517744/remove-extra-button-spacing-padding-in-firefox */ padding: 0; border: 0 } /** * Default UI rules for RTL languages. */ .ck[dir="rtl"], .ck[dir="rtl"] .ck { text-align: right; } /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Default border-radius value. */ :root{ --ck-border-radius: 2px; } /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { /** * A visual style of element's inner shadow (i.e. input). */ --ck-inner-shadow: 2px 2px 3px var(--ck-color-shadow-inner) inset; /** * A visual style of element's drop shadow (i.e. panel). */ --ck-drop-shadow: 0 1px 2px 1px var(--ck-color-shadow-drop); /** * A visual style of element's active shadow (i.e. comment or suggestion). */ --ck-drop-shadow-active: 0 3px 6px 1px var(--ck-color-shadow-drop-active); } /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-spacing-unit: 0.6em; --ck-spacing-large: calc(var(--ck-spacing-unit) * 1.5); --ck-spacing-standard: var(--ck-spacing-unit); --ck-spacing-medium: calc(var(--ck-spacing-unit) * 0.8); --ck-spacing-small: calc(var(--ck-spacing-unit) * 0.5); --ck-spacing-tiny: calc(var(--ck-spacing-unit) * 0.3); --ck-spacing-extra-tiny: calc(var(--ck-spacing-unit) * 0.16); } /* Source: ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A visual style of focused element's border. */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A helper to combine multiple shadows. */ /** * Gives an element a drop shadow so it looks like a floating panel. */ :root { --ck-widget-outline-thickness: 3px; --ck-widget-handler-icon-size: 16px; --ck-widget-handler-animation-duration: 200ms; --ck-widget-handler-animation-curve: ease; --ck-color-widget-blurred-border: hsl(0, 0%, 87%); --ck-color-widget-hover-border: hsl(43, 100%, 62%); --ck-color-widget-editable-focus-background: var(--ck-color-base-background); --ck-color-widget-drag-handler-icon-color: var(--ck-color-base-background); } .ck .ck-widget { outline-width: var(--ck-widget-outline-thickness); outline-style: solid; outline-color: transparent; transition: outline-color var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve); } .ck .ck-widget.ck-widget_selected, .ck .ck-widget.ck-widget_selected:hover { outline: var(--ck-widget-outline-thickness) solid var(--ck-color-focus-border); } .ck .ck-widget:hover { outline-color: var(--ck-color-widget-hover-border); } .ck .ck-editor__nested-editable { border: 1px solid transparent; /* The :focus style is applied before .ck-editor__nested-editable_focused class is rendered in the view. These styles show a different border for a blink of an eye, so `:focus` need to have same styles applied. */ } .ck .ck-editor__nested-editable.ck-editor__nested-editable_focused, .ck .ck-editor__nested-editable:focus { /* Disable native outline. */ outline: none; border: var(--ck-focus-ring); box-shadow: var(--ck-inner-shadow), 0 0; background-color: var(--ck-color-widget-editable-focus-background); } .ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle { padding: 4px; box-sizing: border-box; /* Background and opacity will be animated as the handler shows up or the widget gets selected. */ background-color: transparent; opacity: 0; /* Transition: * background-color for the .ck-widget_selected state change, * visibility for hiding the handler, * opacity for the proper look of the icon when the handler disappears. */ transition: background-color var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve), visibility var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve), opacity var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve); /* Make only top corners round. */ border-radius: var(--ck-border-radius) var(--ck-border-radius) 0 0; /* Place the drag handler outside the widget wrapper. */ transform: translateY(-100%); left: calc(0px - var(--ck-widget-outline-thickness)); top: 0; } .ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle .ck-icon { /* Make sure the dimensions of the icon are independent of the fon-size of the content. */ width: var(--ck-widget-handler-icon-size); height: var(--ck-widget-handler-icon-size); color: var(--ck-color-widget-drag-handler-icon-color); /* The "selected" part of the icon is invisible by default */ } .ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle .ck-icon .ck-icon__selected-indicator { opacity: 0; /* Note: The animation is longer on purpose. Simply feels better. */ transition: opacity 300ms var(--ck-widget-handler-animation-curve); } /* Advertise using the look of the icon that once clicked the handler, the widget will be selected. */ .ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle:hover .ck-icon .ck-icon__selected-indicator { opacity: 1; } /* Show the selection handler on mouse hover over the widget, but not for nested widgets. */ .ck .ck-widget.ck-widget_with-selection-handle:hover > .ck-widget__selection-handle { opacity: 1; background-color: var(--ck-color-widget-hover-border); } /* Show the selection handler when the widget is selected, but not for nested widgets. */ :is(.ck .ck-widget.ck-widget_with-selection-handle.ck-widget_selected,.ck .ck-widget.ck-widget_with-selection-handle.ck-widget_selected:hover) > .ck-widget__selection-handle { opacity: 1; background-color: var(--ck-color-focus-border); /* When the widget is selected, notify the user using the proper look of the icon. */ } :is(.ck .ck-widget.ck-widget_with-selection-handle.ck-widget_selected,.ck .ck-widget.ck-widget_with-selection-handle.ck-widget_selected:hover) > .ck-widget__selection-handle .ck-icon .ck-icon__selected-indicator { opacity: 1; } /* In a RTL environment, align the selection handler to the right side of the widget */ /* stylelint-disable-next-line no-descending-specificity */ .ck[dir="rtl"] .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle { left: auto; right: calc(0px - var(--ck-widget-outline-thickness)); } /* https://github.com/ckeditor/ckeditor5/issues/6415 */ .ck.ck-editor__editable.ck-read-only .ck-widget { /* Prevent the :hover outline from showing up because of the used outline-color transition. */ transition: none; } .ck.ck-editor__editable.ck-read-only .ck-widget:not(.ck-widget_selected) { /* Disable visual effects of hover/active widget when CKEditor is in readOnly mode. * See: https://github.com/ckeditor/ckeditor5/issues/1261 * * Leave the unit because this custom property is used in calc() by other features. * See: https://github.com/ckeditor/ckeditor5/issues/6775 */ --ck-widget-outline-thickness: 0px; } .ck.ck-editor__editable.ck-read-only .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle, .ck.ck-editor__editable.ck-read-only .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle:hover { background: var(--ck-color-widget-blurred-border); } /* Style the widget when it's selected but the editable it belongs to lost focus. */ /* stylelint-disable-next-line no-descending-specificity */ .ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected, .ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected:hover { outline-color: var(--ck-color-widget-blurred-border); } .ck-widget_with-selection-handle:is(.ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected,.ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected:hover) > .ck-widget__selection-handle, .ck-widget_with-selection-handle:is(.ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected,.ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected:hover) > .ck-widget__selection-handle:hover { background: var(--ck-color-widget-blurred-border); } .ck.ck-editor__editable > .ck-widget.ck-widget_with-selection-handle:first-child, .ck.ck-editor__editable blockquote > .ck-widget.ck-widget_with-selection-handle:first-child { /* Do not crop selection handler if a widget is a first-child in the blockquote or in the root editable. In fact, anything with overflow: hidden. https://github.com/ckeditor/ckeditor5-block-quote/issues/28 https://github.com/ckeditor/ckeditor5-widget/issues/44 https://github.com/ckeditor/ckeditor5-widget/issues/66 */ margin-top: calc(1em + var(--ck-widget-handler-icon-size)); } /* Source: ckeditor5-theme-lark/theme/ckeditor5-widget/widgetresize.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-resizer-size: 10px; /* Set the resizer with a 50% offset. */ --ck-resizer-offset: calc( ( var(--ck-resizer-size) / -2 ) - 2px); --ck-resizer-border-width: 1px; } .ck .ck-widget__resizer { outline: 1px solid var(--ck-color-resizer); } .ck .ck-widget__resizer__handle { width: var(--ck-resizer-size); height: var(--ck-resizer-size); background: var(--ck-color-focus-border); border: var(--ck-resizer-border-width) solid hsl(0, 0%, 100%); border-radius: var(--ck-resizer-border-radius); } .ck .ck-widget__resizer__handle.ck-widget__resizer__handle-top-left { top: var(--ck-resizer-offset); left: var(--ck-resizer-offset); } .ck .ck-widget__resizer__handle.ck-widget__resizer__handle-top-right { top: var(--ck-resizer-offset); right: var(--ck-resizer-offset); } .ck .ck-widget__resizer__handle.ck-widget__resizer__handle-bottom-right { bottom: var(--ck-resizer-offset); right: var(--ck-resizer-offset); } .ck .ck-widget__resizer__handle.ck-widget__resizer__handle-bottom-left { bottom: var(--ck-resizer-offset); left: var(--ck-resizer-offset); } /* Source: ckeditor5-theme-lark/theme/ckeditor5-widget/widgettypearound.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-widget-type-around-button-size: 20px; --ck-color-widget-type-around-button-active: var(--ck-color-focus-border); --ck-color-widget-type-around-button-hover: var(--ck-color-widget-hover-border); --ck-color-widget-type-around-button-blurred-editable: var(--ck-color-widget-blurred-border); --ck-color-widget-type-around-button-radar-start-alpha: 0; --ck-color-widget-type-around-button-radar-end-alpha: .3; --ck-color-widget-type-around-button-icon: var(--ck-color-base-background); } /* * Styles of the type around buttons */ .ck .ck-widget .ck-widget__type-around__button { width: var(--ck-widget-type-around-button-size); height: var(--ck-widget-type-around-button-size); background: var(--ck-color-widget-type-around-button); border-radius: 100px; transition: opacity var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve), background var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve); opacity: 0; pointer-events: none; } .ck .ck-widget .ck-widget__type-around__button svg { width: 10px; height: 8px; transform: translate(-50%,-50%); transition: transform .5s ease; margin-top: 1px; } .ck .ck-widget .ck-widget__type-around__button svg * { stroke-dasharray: 10; stroke-dashoffset: 0; fill: none; stroke: var(--ck-color-widget-type-around-button-icon); stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; } .ck .ck-widget .ck-widget__type-around__button svg line { stroke-dasharray: 7; } .ck .ck-widget .ck-widget__type-around__button:hover { /* * Display the "sonar" around the button when hovered. */ animation: ck-widget-type-around-button-sonar 1s ease infinite; /* * Animate active button's icon. */ } .ck .ck-widget .ck-widget__type-around__button:hover svg polyline { animation: ck-widget-type-around-arrow-dash 2s linear; } .ck .ck-widget .ck-widget__type-around__button:hover svg line { animation: ck-widget-type-around-arrow-tip-dash 2s linear; } /* * Show type around buttons when the widget gets selected or being hovered. */ .ck .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button, .ck .ck-widget:hover > .ck-widget__type-around > .ck-widget__type-around__button { opacity: 1; pointer-events: auto; } /* * Styles for the buttons when the widget is NOT selected (but the buttons are visible * and still can be hovered). */ .ck .ck-widget:not(.ck-widget_selected) > .ck-widget__type-around > .ck-widget__type-around__button { background: var(--ck-color-widget-type-around-button-hover); } /* * Styles for the buttons when: * - the widget is selected, * - or the button is being hovered (regardless of the widget state). */ .ck .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button, .ck .ck-widget > .ck-widget__type-around > .ck-widget__type-around__button:hover { background: var(--ck-color-widget-type-around-button-active); } .ck .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button::after, .ck .ck-widget > .ck-widget__type-around > .ck-widget__type-around__button:hover::after { width: calc(var(--ck-widget-type-around-button-size) - 2px); height: calc(var(--ck-widget-type-around-button-size) - 2px); border-radius: 100px; background: linear-gradient(135deg, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,.3) 100%); } /* * Styles for the "before" button when the widget has a selection handle. Because some space * is consumed by the handle, the button must be moved slightly to the right to let it breathe. */ .ck .ck-widget.ck-widget_with-selection-handle > .ck-widget__type-around > .ck-widget__type-around__button_before { margin-left: 20px; } /* * Styles for the horizontal "fake caret" which is displayed when the user navigates using the keyboard. */ .ck .ck-widget .ck-widget__type-around__fake-caret { pointer-events: none; height: 1px; animation: ck-widget-type-around-fake-caret-pulse linear 1s infinite normal forwards; /* * The semi-transparent-outline+background combo improves the contrast * when the background underneath the fake caret is dark. */ outline: solid 1px hsla(0, 0%, 100%, .5); background: var(--ck-color-base-text); } /* * Styles of the widget when the "fake caret" is blinking (e.g. upon keyboard navigation). * Despite the widget being physically selected in the model, its outline should disappear. */ .ck .ck-widget.ck-widget_selected.ck-widget_type-around_show-fake-caret_before, .ck .ck-widget.ck-widget_selected.ck-widget_type-around_show-fake-caret_after { outline-color: transparent; } /* * When the "fake caret" is visible we simulate that the widget is not selected * (despite being physically selected), so the outline color should be for the * unselected widget. */ .ck .ck-widget.ck-widget_type-around_show-fake-caret_before.ck-widget_selected:hover, .ck .ck-widget.ck-widget_type-around_show-fake-caret_after.ck-widget_selected:hover { outline-color: var(--ck-color-widget-hover-border); } /* * Styles of the type around buttons when the "fake caret" is blinking (e.g. upon keyboard navigation). * In this state, the type around buttons would collide with the fake carets so they should disappear. */ .ck .ck-widget.ck-widget_type-around_show-fake-caret_before > .ck-widget__type-around > .ck-widget__type-around__button, .ck .ck-widget.ck-widget_type-around_show-fake-caret_after > .ck-widget__type-around > .ck-widget__type-around__button { opacity: 0; pointer-events: none; } /* * Fake horizontal caret integration with the selection handle. When the caret is visible, simply * hide the handle because it intersects with the caret (and does not make much sense anyway). */ :is(.ck .ck-widget.ck-widget_type-around_show-fake-caret_before.ck-widget_with-selection-handle.ck-widget_selected,.ck .ck-widget.ck-widget_type-around_show-fake-caret_after.ck-widget_with-selection-handle.ck-widget_selected,.ck .ck-widget.ck-widget_type-around_show-fake-caret_before.ck-widget_with-selection-handle.ck-widget_selected:hover,.ck .ck-widget.ck-widget_type-around_show-fake-caret_after.ck-widget_with-selection-handle.ck-widget_selected:hover) > .ck-widget__selection-handle { opacity: 0 } /* * Fake horizontal caret integration with the resize UI. When the caret is visible, simply * hide the resize UI because it creates too much noise. It can be visible when the user * hovers the widget, though. */ .ck .ck-widget.ck-widget_type-around_show-fake-caret_before.ck-widget_selected.ck-widget_with-resizer > .ck-widget__resizer, .ck .ck-widget.ck-widget_type-around_show-fake-caret_after.ck-widget_selected.ck-widget_with-resizer > .ck-widget__resizer { opacity: 0 } /* * Styles for the "before" button when the widget has a selection handle in an RTL environment. * The selection handler is aligned to the right side of the widget so there is no need to create * additional space for it next to the "before" button. */ .ck[dir="rtl"] .ck-widget.ck-widget_with-selection-handle .ck-widget__type-around > .ck-widget__type-around__button_before { margin-left: 0; margin-right: 20px; } /* * Hide type around buttons when the widget is selected as a child of a selected * nested editable (e.g. mulit-cell table selection). * * See https://github.com/ckeditor/ckeditor5/issues/7263. */ .ck-editor__nested-editable.ck-editor__editable_selected .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button, .ck-editor__nested-editable.ck-editor__editable_selected .ck-widget:hover > .ck-widget__type-around > .ck-widget__type-around__button { opacity: 0; pointer-events: none; } /* * Styles for the buttons when the widget is selected but the user clicked outside of the editor (blurred the editor). */ .ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button:not(:hover) { background: var(--ck-color-widget-type-around-button-blurred-editable); } .ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button:not(:hover) svg * { stroke: hsl(0,0%,60%); } @keyframes ck-widget-type-around-arrow-dash { 0% { stroke-dashoffset: 10; } 20%, 100% { stroke-dashoffset: 0; } } @keyframes ck-widget-type-around-arrow-tip-dash { 0%, 20% { stroke-dashoffset: 7; } 40%, 100% { stroke-dashoffset: 0; } } @keyframes ck-widget-type-around-button-sonar { 0% { box-shadow: 0 0 0 0 hsla(var(--ck-color-focus-border-coordinates), var(--ck-color-widget-type-around-button-radar-start-alpha)); } 50% { box-shadow: 0 0 0 5px hsla(var(--ck-color-focus-border-coordinates), var(--ck-color-widget-type-around-button-radar-end-alpha)); } 100% { box-shadow: 0 0 0 5px hsla(var(--ck-color-focus-border-coordinates), var(--ck-color-widget-type-around-button-radar-start-alpha)); } } @keyframes ck-widget-type-around-fake-caret-pulse { 0% { opacity: 1; } 49% { opacity: 1; } 50% { opacity: 0; } 99% { opacity: 0; } 100% { opacity: 1; } } /* Source: ckeditor5-track-changes/node_modules/@ckeditor/ckeditor5-style/theme/stylegrid.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-style-panel-columns: 3; } .ck.ck-style-panel .ck-style-grid { display: grid; grid-template-columns: repeat(var(--ck-style-panel-columns),auto); justify-content: start; } .ck.ck-style-panel .ck-style-grid .ck-style-grid__button { display: flex; justify-content: space-between; flex-direction: column; } .ck.ck-style-panel .ck-style-grid .ck-style-grid__button .ck-style-grid__button__preview { display: flex; align-content: center; justify-content: flex-start; align-items: center; flex-grow: 1; flex-basis: 100%; } /* Source: ckeditor5-ui/theme/components/button/button.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Makes element unselectable. */ .ck.ck-button, a.ck.ck-button { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; position: relative; display: inline-flex; align-items: center; justify-content: left; } :is(.ck.ck-button,a.ck.ck-button) .ck-button__label { display: none; } .ck-button_with-text:is(.ck.ck-button,a.ck.ck-button) .ck-button__label { display: inline-block; } /* Center the icon horizontally in a button without text. */ :is(.ck.ck-button,a.ck.ck-button):not(.ck-button_with-text) { justify-content: center; } /* Source: ckeditor5-ui/theme/components/button/switchbutton.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-button.ck-switchbutton .ck-button__toggle { display: block; } .ck.ck-button.ck-switchbutton .ck-button__toggle .ck-button__toggle__inner { display: block; } /* Source: ckeditor5-ui/theme/components/colorgrid/colorgrid.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-color-grid { display: grid; } /* Source: ckeditor5-ui/theme/components/dropdown/dropdown.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-dropdown-max-width: 75vw; } .ck.ck-dropdown { display: inline-block; position: relative; } .ck.ck-dropdown .ck-dropdown__arrow { pointer-events: none; z-index: var(--ck-z-default); } /* Dropdown button should span horizontally, e.g. in vertical toolbars */ .ck.ck-dropdown .ck-button.ck-dropdown__button { width: 100%; } .ck.ck-dropdown .ck-dropdown__panel { display: none; z-index: var(--ck-z-modal); max-width: var(--ck-dropdown-max-width); position: absolute; } .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel-visible { display: inline-block; } .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_ne, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_nw, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_n, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_nmw, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_nme { bottom: 100%; } .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_se, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sw, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_smw, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sme, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_s { /* * Using transform: translate3d( 0, 100%, 0 ) causes blurry dropdown on Chrome 67-78+ on non-retina displays. * See https://github.com/ckeditor/ckeditor5/issues/1053. */ top: 100%; bottom: auto; } .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_ne, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_se { left: 0px; } .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_nw, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sw { right: 0px; } .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_s, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_n { /* Positioning panels relative to the center of the button */ left: 50%; transform: translateX(-50%); } .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_nmw, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_smw { /* Positioning panels relative to the middle-west of the button */ left: 75%; transform: translateX(-75%); } .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_nme, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sme { /* Positioning panels relative to the middle-east of the button */ left: 25%; transform: translateX(-25%); } /* * Toolbar dropdown panels should be always above the UI (eg. other dropdown panels) from the editor's content. * See https://github.com/ckeditor/ckeditor5/issues/7874 */ .ck.ck-toolbar .ck-dropdown__panel { z-index: calc( var(--ck-z-modal) + 1 ); } /* Source: ckeditor5-ui/theme/components/dropdown/splitbutton.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-splitbutton { /* Enable font size inheritance, which allows fluid UI scaling. */ font-size: inherit; } .ck.ck-splitbutton .ck-splitbutton__action:focus { z-index: calc(var(--ck-z-default) + 1); } /* Source: ckeditor5-ui/theme/components/dropdown/toolbardropdown.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-toolbar-dropdown-max-width: 60vw; } .ck.ck-toolbar-dropdown > .ck-dropdown__panel { /* https://github.com/ckeditor/ckeditor5/issues/5586 */ width: max-content; max-width: var(--ck-toolbar-dropdown-max-width); } .ck.ck-toolbar-dropdown > .ck-dropdown__panel .ck-button:focus { z-index: calc(var(--ck-z-default) + 1); } /* Source: ckeditor5-ui/theme/components/formheader/formheader.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-form__header { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; } /* Source: ckeditor5-ui/theme/components/icon/icon.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-icon { vertical-align: middle; } /* Source: ckeditor5-ui/theme/components/label/label.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-label { display: block; } .ck.ck-voice-label { display: none; } /* Source: ckeditor5-ui/theme/components/labeledfield/labeledfieldview.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper { display: flex; position: relative; } .ck.ck-labeled-field-view .ck.ck-label { display: block; position: absolute; } /* Source: ckeditor5-ui/theme/components/list/list.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Makes element unselectable. */ .ck.ck-list { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; display: flex; flex-direction: column; } .ck.ck-list .ck-list__item, .ck.ck-list .ck-list__separator { display: block; } /* Make sure that whatever child of the list item gets focus, it remains on the top. Thanks to that, styles like box-shadow, outline, etc. are not masked by adjacent list items. */ .ck.ck-list .ck-list__item > *:focus { position: relative; z-index: var(--ck-z-default); } /* Source: ckeditor5-ui/theme/components/panel/balloonpanel.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { /* Make sure the balloon arrow does not float over its children. */ --ck-balloon-panel-arrow-z-index: calc(var(--ck-z-default) - 3); } .ck.ck-balloon-panel { display: none; position: absolute; z-index: var(--ck-z-modal); } .ck.ck-balloon-panel.ck-balloon-panel_with-arrow::before, .ck.ck-balloon-panel.ck-balloon-panel_with-arrow::after { content: ""; position: absolute; } .ck.ck-balloon-panel.ck-balloon-panel_with-arrow::before { z-index: var(--ck-balloon-panel-arrow-z-index); } .ck.ck-balloon-panel.ck-balloon-panel_with-arrow::after { z-index: calc(var(--ck-balloon-panel-arrow-z-index) + 1); } .ck.ck-balloon-panel[class*="arrow_n"]::before { z-index: var(--ck-balloon-panel-arrow-z-index); } .ck.ck-balloon-panel[class*="arrow_n"]::after { z-index: calc(var(--ck-balloon-panel-arrow-z-index) + 1); } .ck.ck-balloon-panel[class*="arrow_s"]::before { z-index: var(--ck-balloon-panel-arrow-z-index); } .ck.ck-balloon-panel[class*="arrow_s"]::after { z-index: calc(var(--ck-balloon-panel-arrow-z-index) + 1); } .ck.ck-balloon-panel.ck-balloon-panel_visible { display: block; } /* Source: ckeditor5-ui/theme/components/panel/balloonrotator.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck .ck-balloon-rotator__navigation { display: flex; align-items: center; justify-content: center; } /* Buttons inside a toolbar should be centered when rotator bar is wider. * See: https://github.com/ckeditor/ckeditor5-ui/issues/495 */ .ck .ck-balloon-rotator__content .ck-toolbar { justify-content: center; } /* Source: ckeditor5-ui/theme/components/panel/fakepanel.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck .ck-fake-panel { position: absolute; /* Fake panels should be placed under main balloon content. */ z-index: calc(var(--ck-z-modal) - 1); } .ck .ck-fake-panel div { position: absolute; } .ck .ck-fake-panel div:nth-child( 1 ) { z-index: 2; } .ck .ck-fake-panel div:nth-child( 2 ) { z-index: 1; } /* Source: ckeditor5-ui/theme/components/panel/stickypanel.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-sticky-panel .ck-sticky-panel__content_sticky { z-index: var(--ck-z-modal); /* #315 */ position: fixed; top: 0; } .ck.ck-sticky-panel .ck-sticky-panel__content_sticky_bottom-limit { top: auto; position: absolute; } /* Source: ckeditor5-ui/theme/components/responsive-form/responsiveform.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck-vertical-form .ck-button::after { content: ""; width: 0; position: absolute; right: -1px; top: -1px; bottom: -1px; z-index: 1; } .ck-vertical-form .ck-button:focus::after { display: none; } @media screen and (max-width: 600px) { .ck.ck-responsive-form .ck-button::after { content: ""; width: 0; position: absolute; right: -1px; top: -1px; bottom: -1px; z-index: 1; } .ck.ck-responsive-form .ck-button:focus::after { display: none; } } /* Source: ckeditor5-ui/theme/components/toolbar/blocktoolbar.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-block-toolbar-button { position: absolute; z-index: var(--ck-z-default); } /* Source: ckeditor5-ui/theme/components/toolbar/toolbar.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Makes element unselectable. */ .ck.ck-toolbar { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; display: flex; flex-flow: row nowrap; align-items: center; } .ck.ck-toolbar > .ck-toolbar__items { display: flex; flex-flow: row wrap; align-items: center; flex-grow: 1; } .ck.ck-toolbar .ck.ck-toolbar__separator { display: inline-block; /* * A leading or trailing separator makes no sense (separates from nothing on one side). * For instance, it can happen when toolbar items (also separators) are getting grouped one by one and * moved to another toolbar in the dropdown. */ } .ck.ck-toolbar .ck.ck-toolbar__separator:first-child, .ck.ck-toolbar .ck.ck-toolbar__separator:last-child { display: none; } .ck.ck-toolbar .ck-toolbar__line-break { flex-basis: 100%; } .ck.ck-toolbar.ck-toolbar_grouping > .ck-toolbar__items { flex-wrap: nowrap; } .ck.ck-toolbar.ck-toolbar_vertical > .ck-toolbar__items { flex-direction: column; } .ck.ck-toolbar.ck-toolbar_floating > .ck-toolbar__items { flex-wrap: nowrap; } .ck.ck-toolbar > .ck.ck-toolbar__grouped-dropdown > .ck-dropdown__button .ck-dropdown__arrow { display: none; } /* Source: ckeditor5-ui/theme/components/tooltip/tooltip.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-balloon-panel.ck-tooltip { /* Keep tooltips transparent for any interactions. */ pointer-events: none; z-index: calc( var(--ck-z-modal) + 100 ); } /* Source: ckeditor5-ui/theme/globals/_hidden.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A class which hides an element in DOM. */ .ck-hidden { /* Override selector specificity. Otherwise, all elements with some display style defined will override this one, which is not a desired result. */ display: none !important; } /* Source: ckeditor5-ui/theme/globals/_reset.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-reset, .ck.ck-reset_all, .ck-reset_all *:not(.ck-reset_all-excluded *) { box-sizing: border-box; width: auto; height: auto; position: static; } /* Source: ckeditor5-ui/theme/globals/_transition.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A class that disables all transitions of the element and its children. */ .ck-transitions-disabled, .ck-transitions-disabled * { transition: none !important; } /* Source: ckeditor5-ui/theme/globals/_zindex.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-z-default: 1; --ck-z-modal: calc( var(--ck-z-default) + 999 ); } /* Source: ckeditor5-ui/theme/globals/globals.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A class which hides an element in DOM. */ .ck-hidden { /* Override selector specificity. Otherwise, all elements with some display style defined will override this one, which is not a desired result. */ display: none !important; } /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-reset, .ck.ck-reset_all, .ck-reset_all *:not(.ck-reset_all-excluded *) { box-sizing: border-box; width: auto; height: auto; position: static; } /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-z-default: 1; --ck-z-modal: calc( var(--ck-z-default) + 999 ); } /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A class that disables all transitions of the element and its children. */ .ck-transitions-disabled, .ck-transitions-disabled * { transition: none !important; } /* Source: ckeditor5-widget/theme/widget.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-color-resizer: var(--ck-color-focus-border); --ck-color-resizer-tooltip-background: hsl(0, 0%, 15%); --ck-color-resizer-tooltip-text: hsl(0, 0%, 95%); --ck-resizer-border-radius: var(--ck-border-radius); --ck-resizer-tooltip-offset: 10px; --ck-resizer-tooltip-height: calc(var(--ck-spacing-small) * 2 + 10px); } .ck .ck-widget { /* This is neccessary for type around UI to be positioned properly. */ position: relative; } .ck .ck-widget.ck-widget_with-selection-handle { /* Make the widget wrapper a relative positioning container for the drag handle. */ position: relative; } .ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle { position: absolute; } .ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle .ck-icon { /* Make sure the icon in not a subject to font-size or line-height to avoid unnecessary spacing around it. */ display: block; } /* Show the selection handle on mouse hover over the widget, but not for nested widgets. */ .ck .ck-widget.ck-widget_with-selection-handle:hover > .ck-widget__selection-handle { visibility: visible; } /* Show the selection handle when the widget is selected, but not for nested widgets. */ .ck .ck-widget.ck-widget_with-selection-handle.ck-widget_selected > .ck-widget__selection-handle { visibility: visible; } .ck .ck-size-view { background: var(--ck-color-resizer-tooltip-background); color: var(--ck-color-resizer-tooltip-text); border: 1px solid var(--ck-color-resizer-tooltip-text); border-radius: var(--ck-resizer-border-radius); font-size: var(--ck-font-size-tiny); display: block; padding: 0 var(--ck-spacing-small); height: var(--ck-resizer-tooltip-height); line-height: var(--ck-resizer-tooltip-height); } .ck .ck-size-view.ck-orientation-top-left, .ck .ck-size-view.ck-orientation-top-right, .ck .ck-size-view.ck-orientation-bottom-right, .ck .ck-size-view.ck-orientation-bottom-left, .ck .ck-size-view.ck-orientation-above-center { position: absolute; } .ck .ck-size-view.ck-orientation-top-left { top: var(--ck-resizer-tooltip-offset); left: var(--ck-resizer-tooltip-offset); } .ck .ck-size-view.ck-orientation-top-right { top: var(--ck-resizer-tooltip-offset); right: var(--ck-resizer-tooltip-offset); } .ck .ck-size-view.ck-orientation-bottom-right { bottom: var(--ck-resizer-tooltip-offset); right: var(--ck-resizer-tooltip-offset); } .ck .ck-size-view.ck-orientation-bottom-left { bottom: var(--ck-resizer-tooltip-offset); left: var(--ck-resizer-tooltip-offset); } /* Class applied if the widget is too small to contain the size label */ .ck .ck-size-view.ck-orientation-above-center { top: calc(var(--ck-resizer-tooltip-height) * -1); left: 50%; transform: translate(-50%); } /* Source: ckeditor5-widget/theme/widgetresize.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck .ck-widget_with-resizer { /* Make the widget wrapper a relative positioning container for the drag handle. */ position: relative; } .ck .ck-widget__resizer { display: none; position: absolute; /* The wrapper itself should not interfere with the pointer device, only the handles should. */ pointer-events: none; left: 0; top: 0; } .ck-focused .ck-widget_with-resizer.ck-widget_selected > .ck-widget__resizer { display: block; } .ck .ck-widget__resizer__handle { position: absolute; /* Resizers are the only UI elements that should interfere with a pointer device. */ pointer-events: all; } .ck .ck-widget__resizer__handle.ck-widget__resizer__handle-top-left, .ck .ck-widget__resizer__handle.ck-widget__resizer__handle-bottom-right { cursor: nwse-resize; } .ck .ck-widget__resizer__handle.ck-widget__resizer__handle-top-right, .ck .ck-widget__resizer__handle.ck-widget__resizer__handle-bottom-left { cursor: nesw-resize; } /* Source: ckeditor5-widget/theme/widgettypearound.css */ /* * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Styles of the type around buttons */ .ck .ck-widget .ck-widget__type-around__button { display: block; position: absolute; overflow: hidden; z-index: var(--ck-z-default); } .ck .ck-widget .ck-widget__type-around__button svg { position: absolute; top: 50%; left: 50%; z-index: calc(var(--ck-z-default) + 2); } .ck .ck-widget .ck-widget__type-around__button.ck-widget__type-around__button_before { /* Place it in the middle of the outline */ top: calc(-0.5 * var(--ck-widget-outline-thickness)); left: min(10%, 30px); transform: translateY(-50%); } .ck .ck-widget .ck-widget__type-around__button.ck-widget__type-around__button_after { /* Place it in the middle of the outline */ bottom: calc(-0.5 * var(--ck-widget-outline-thickness)); right: min(10%, 30px); transform: translateY(50%); } /* * Styles for the buttons when: * - the widget is selected, * - or the button is being hovered (regardless of the widget state). */ .ck .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button::after, .ck .ck-widget > .ck-widget__type-around > .ck-widget__type-around__button:hover::after { content: ""; display: block; position: absolute; top: 1px; left: 1px; z-index: calc(var(--ck-z-default) + 1); } /* * Styles for the horizontal "fake caret" which is displayed when the user navigates using the keyboard. */ .ck .ck-widget > .ck-widget__type-around > .ck-widget__type-around__fake-caret { display: none; position: absolute; left: 0; right: 0; } /* * When the widget is hovered the "fake caret" would normally be narrower than the * extra outline displayed around the widget. Let's extend the "fake caret" to match * the full width of the widget. */ .ck .ck-widget:hover > .ck-widget__type-around > .ck-widget__type-around__fake-caret { left: calc( -1 * var(--ck-widget-outline-thickness) ); right: calc( -1 * var(--ck-widget-outline-thickness) ); } /* * Styles for the horizontal "fake caret" when it should be displayed before the widget (backward keyboard navigation). */ .ck .ck-widget.ck-widget_type-around_show-fake-caret_before > .ck-widget__type-around > .ck-widget__type-around__fake-caret { top: calc( -1 * var(--ck-widget-outline-thickness) - 1px ); display: block; } /* * Styles for the horizontal "fake caret" when it should be displayed after the widget (forward keyboard navigation). */ .ck .ck-widget.ck-widget_type-around_show-fake-caret_after > .ck-widget__type-around > .ck-widget__type-around__fake-caret { bottom: calc( -1 * var(--ck-widget-outline-thickness) - 1px ); display: block; } /* * Integration with the read-only mode of the editor. */ .ck.ck-editor__editable.ck-read-only .ck-widget__type-around { display: none; } /* * Integration with the restricted editing mode (feature) of the editor. */ .ck.ck-editor__editable.ck-restricted-editing_mode_restricted .ck-widget__type-around { display: none; } /* * Integration with the #isEnabled property of the WidgetTypeAround plugin. */ .ck.ck-editor__editable.ck-widget__type-around_disabled .ck-widget__type-around { display: none; } /* ============================================= */ /* FINAL OVERRIDES - Appended last for maximum */ /* source-order priority with !important */ /* ============================================= */ /* ---- Dropdown Panels ---- */ .ck.ck-dropdown__panel { background: var(--ck-color-dropdown-panel-background, hsl(0, 0%, 100%)) !important; border: 1px solid var(--ck-color-dropdown-panel-border, hsl(0, 0%, 77%)) !important; border-radius: var(--ck-border-radius, 2px) !important; box-shadow: var(--ck-drop-shadow, 0 1px 2px 1px hsla(0, 0%, 0%, 0.15)) !important; } .ck.ck-dropdown__panel[class*="ck-dropdown__panel_s"] { border-top: 0 !important; } /* ---- Balloon Panels (link, image, table dialogs) ---- */ /* Balloon panels are rendered in ck-body-wrapper (appended to ). CKEditor JS sets top/left as inline styles. We ensure position: absolute and width: auto so the panel sizes to its content, not stretches to 100%. */ .ck.ck-balloon-panel { background: var(--ck-color-panel-background, hsl(0, 0%, 100%)) !important; border: 1px solid var(--ck-color-panel-border, hsl(0, 0%, 77%)) !important; border-radius: var(--ck-border-radius, 2px) !important; box-shadow: var(--ck-drop-shadow, 0 1px 2px 1px hsla(0, 0%, 0%, 0.15)) !important; z-index: var(--ck-z-modal, 999) !important; min-height: 15px !important; position: absolute !important; width: auto !important; } .ck.ck-balloon-panel.ck-balloon-panel_visible { display: block !important; opacity: 1 !important; visibility: visible !important; } /* ---- Toolbar ---- */ .ck.ck-toolbar { background: var(--ck-color-toolbar-background, hsl(0, 0%, 97%)) !important; border: 1px solid var(--ck-color-toolbar-border, hsl(0, 0%, 77%)) !important; padding: 0 var(--ck-spacing-small, 6px) !important; } /* ---- Buttons ---- */ .ck.ck-button, .ck.ck-button.ck-off { background: transparent !important; border-color: transparent !important; cursor: pointer !important; opacity: 1 !important; } .ck.ck-button:hover, .ck.ck-button.ck-off:hover { background: var(--ck-color-button-default-hover-background, hsl(0, 0%, 90%)) !important; } .ck.ck-button.ck-on { background: var(--ck-color-button-on-background, hsl(0, 0%, 87%)) !important; color: var(--ck-color-button-on-color, var(--ck-color-text, hsl(0, 0%, 20%))) !important; } .ck.ck-button .ck-button__label { color: inherit !important; opacity: 1 !important; } /* ---- List items in dropdowns ---- */ .ck.ck-list { background: var(--ck-color-list-background, hsl(0, 0%, 100%)) !important; } .ck.ck-list__item .ck-button.ck-on { background: var(--ck-color-list-button-on-background, hsl(208, 88%, 52%)) !important; color: var(--ck-color-list-button-on-text, hsl(0, 0%, 100%)) !important; } .ck.ck-list__item .ck-button:hover:not(.ck-disabled) { background: var(--ck-color-list-button-hover-background, hsl(208, 88%, 97%)) !important; } /* ---- Input fields ---- */ .ck.ck-input, .ck.ck-input-text { background: var(--ck-color-input-background, hsl(0, 0%, 100%)) !important; border: 1px solid var(--ck-color-input-border, hsl(0, 0%, 78%)) !important; border-radius: var(--ck-border-radius, 2px) !important; padding: var(--ck-spacing-extra-tiny, 2px) var(--ck-spacing-medium, 12px) !important; min-width: 150px !important; min-height: var(--ck-ui-component-min-height, 28px) !important; opacity: 1 !important; position: static !important; inset: auto !important; appearance: none !important; cursor: text !important; color: var(--ck-color-input-text, hsl(0, 0%, 20%)) !important; } .ck.ck-input:focus, .ck.ck-input-text:focus { border-color: var(--ck-color-input-focused-border, var(--ck-color-focus-border, hsl(208, 88%, 52%))) !important; box-shadow: var(--ck-focus-ring, var(--ck-focus-outer-shadow, 0 0 3px hsla(208, 79%, 51%, 0.3))) !important; outline: none !important; } /* ---- Labeled fields ---- */ .ck.ck-labeled-field-view .ck-labeled-field-view__input-wrapper { display: flex !important; position: relative !important; } .ck.ck-labeled-field-view .ck-label { display: block !important; opacity: 1 !important; } /* ---- Link form ---- */ .ck.ck-link-form { display: flex !important; align-items: flex-start !important; padding: var(--ck-spacing-standard, 8px) !important; } .ck.ck-link-form .ck-labeled-field-view { display: inline-block !important; } .ck.ck-link-actions { display: flex !important; align-items: center !important; padding: var(--ck-spacing-standard, 8px) !important; } /* ---- SVG icons inside CKEditor ---- */ .ck svg, .ck-body-wrapper svg { display: inline !important; vertical-align: middle !important; } .ck .ck-icon svg, .ck-body-wrapper .ck-icon svg { width: var(--ck-icon-size, 20px) !important; height: var(--ck-icon-size, 20px) !important; } /* ---- Separator ---- */ .ck.ck-toolbar__separator { background: var(--ck-color-toolbar-border, hsl(0, 0%, 77%)) !important; width: 1px !important; min-height: calc(0.8 * var(--ck-ui-component-min-height, 28px)) !important; } /* ---- Body wrapper for floating panels ---- */ /* IMPORTANT: ck-body-wrapper must NOT be position:relative. CKEditor JS calculates absolute pixel coordinates for balloon panels relative to the viewport. If ck-body-wrapper is position:relative, those coordinates become relative to this div instead. */ .ck-body-wrapper { z-index: 99999 !important; position: static !important; } .ck-body-wrapper .ck.ck-balloon-panel { z-index: 99999 !important; } /* ---- Dropdown positioning (must be on parent) ---- */ .ck.ck-dropdown { display: inline-block !important; position: relative !important; } /* Dropdown panel must be absolute within its dropdown parent */ .ck.ck-dropdown .ck-dropdown__panel { position: absolute !important; z-index: var(--ck-z-modal, 999) !important; max-width: var(--ck-dropdown-max-width, 300px) !important; } /* Southward panels (below the button) */ .ck.ck-dropdown .ck-dropdown__panel[class*="panel_s"] { top: 100% !important; bottom: auto !important; } /* Northward panels (above the button) */ .ck.ck-dropdown .ck-dropdown__panel[class*="panel_n"] { bottom: 100% !important; top: auto !important; } /* East-aligned panels (left-aligned) */ .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_se, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_ne, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sme, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_nme { left: 0px !important; right: auto !important; } /* West-aligned panels (right-aligned) */ .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sw, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_nw, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_smw, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_nmw { right: 0px !important; left: auto !important; } /* ---- Reset CKEditor elements against Tailwind preflight ---- */ .ck.ck-reset, .ck.ck-reset_all, .ck.ck-reset_all *, .ck-body-wrapper .ck-reset_all, .ck-body-wrapper .ck-reset_all * { box-sizing: border-box !important; text-decoration: none !important; word-wrap: break-word !important; } /* Ensure all CKEditor buttons are NOT affected by Tailwind base transparent bg */ .ck button.ck-button, .ck-body-wrapper button.ck-button { background-color: transparent !important; border-radius: var(--ck-border-radius, 2px) !important; } .ck button.ck-button:hover, .ck-body-wrapper button.ck-button:hover { background-color: var(--ck-color-button-default-hover-background, hsl(0, 0%, 90%)) !important; } /* ---- Focus visible override ---- */ .ck *:focus-visible, .ck-body-wrapper *:focus-visible { outline: none !important; border-radius: inherit !important; transition-property: none !important; box-shadow: none !important; } /* ---- Ensure form header in balloon is styled ---- */ .ck.ck-form__header { background: var(--ck-color-base-foreground, hsl(0, 0%, 98%)) !important; border-bottom: 1px solid var(--ck-color-base-border, hsl(0, 0%, 77%)) !important; padding: var(--ck-spacing-small, 6px) var(--ck-spacing-standard, 8px) !important; } /* ---- Table-related UI ---- */ .ck .ck-insert-table-dropdown__grid { display: flex !important; flex-wrap: wrap !important; width: calc(10 * 16px + 2px) !important; padding: 4px !important; } .ck .ck-insert-table-dropdown__grid .ck-insert-table-dropdown-grid-box { width: 14px !important; height: 14px !important; margin: 1px !important; border: 1px solid var(--ck-color-base-border, hsl(0, 0%, 77%)) !important; border-radius: 1px !important; } /* ---- Alignment dropdown ---- */ .ck.ck-toolbar.ck-toolbar_vertical { flex-direction: column !important; } /* ---- Color grid (font color, highlight color) ---- */ .ck .ck-color-grid { display: grid !important; grid-template-columns: repeat(var(--ck-color-grid-columns, 5), 1fr) !important; gap: 4px !important; padding: 8px !important; } .ck .ck-color-grid__tile { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; border: 1px solid var(--ck-color-base-border, hsl(0, 0%, 77%)) !important; border-radius: 3px !important; padding: 0 !important; } /* ---- Sidebar & Annotations ---- */ .ck.ck-sidebar { background: #fafafa !important; border-left: 1px solid #ddd !important; padding: 0 !important; position: relative !important; overflow-y: auto !important; } .ck-sidebar-item { position: absolute !important; width: 100% !important; padding: 0 8px !important; box-sizing: border-box !important; transition: top 0.3s ease !important; } /* ---- Annotation Wrapper ---- */ .ck.ck-annotation-wrapper { background: #fff !important; border: 1px solid #e0e0e0 !important; border-radius: 6px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important; padding: 0 !important; margin-bottom: 8px !important; overflow: hidden !important; } /* ---- Suggestion Wrapper ---- */ .ck-suggestion-wrapper { padding: 0 !important; } .ck-suggestion-wrapper.ck-suggestion-insertion { border-left: 3px solid #48bb78 !important; } .ck-suggestion-wrapper.ck-suggestion-deletion { border-left: 3px solid #f56565 !important; } .ck-suggestion-wrapper.ck-suggestion-format { border-left: 3px solid transparent !important; } /* ---- Suggestion / Annotation inner ---- */ .ck-suggestion.ck-annotation, .ck-annotation { display: flex !important; padding: 10px 12px !important; gap: 8px !important; align-items: flex-start !important; } /* ---- User avatar ---- */ .ck.ck-user { display: flex !important; align-items: center !important; gap: 4px !important; flex-shrink: 0 !important; } .ck-suggestion__user, .ck-annotation__user, .ck-thread__user { flex-shrink: 0 !important; } .ck.ck-user__img { width: 28px !important; height: 28px !important; border-radius: 50% !important; flex-shrink: 0 !important; } .ck.ck-user__img:not(.ck-user__avatar) { background: var(--ck-user-avatar-background, #6366f1) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #fff !important; font-size: 12px !important; font-weight: 600 !important; } .ck.ck-user__img.ck-user__avatar { display: block !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; } .ck.ck-user__name { font-size: 12px !important; font-weight: 600 !important; color: #444 !important; display: none !important; } /* ---- Main content area ---- */ .ck-suggestion__main, .ck-annotation__main { flex: 1 !important; min-width: 0 !important; } /* ---- Info bar (name + time) ---- */ .ck-suggestion__info, .ck-annotation__info { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 4px !important; } .ck-suggestion__info-name, .ck-annotation__info-name { font-size: 13px !important; font-weight: 600 !important; color: #333 !important; } .ck-comment__info-time, .ck-annotation__info-time { font-size: 11px !important; color: #999 !important; } /* ---- Actions (accept / discard buttons) ---- */ .ck-suggestion__actions, .ck-annotation__actions { display: flex !important; gap: 4px !important; margin-left: auto !important; flex-shrink: 0 !important; } .ck-suggestion__actions .ck-button, .ck-annotation__actions .ck-button { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; padding: 2px !important; border-radius: 4px !important; border: 1px solid #e0e0e0 !important; background: #fff !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; } .ck-suggestion__actions .ck-button:hover, .ck-annotation__actions .ck-button:hover { background: #f5f5f5 !important; } .ck-suggestion--accept .ck-icon { color: #48bb78 !important; } .ck-suggestion--discard .ck-icon { color: #f56565 !important; } .ck-suggestion__actions .ck-button .ck-button__label, .ck-annotation__actions .ck-button .ck-button__label { display: none !important; } .ck-suggestion__actions .ck-button .ck-icon, .ck-annotation__actions .ck-button .ck-icon { width: 16px !important; height: 16px !important; } /* ---- Annotation content (suggestion text) ---- */ .ck-annotation__content-wrapper { margin-top: 4px !important; font-size: 13px !important; color: #555 !important; line-height: 1.4 !important; } .ck-annotation__content-wrapper p { margin: 0 !important; } .ck-suggestion-type { font-weight: 600 !important; color: #48bb78 !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: 0.02em !important; } .ck-suggestion-deletion .ck-suggestion-type { color: #f56565 !important; } /* ---- Comment thread ---- */ .ck-thread__comments { list-style: none !important; margin: 0 !important; padding: 0 !important; } .ck-thread__comments > li { padding: 8px 12px !important; border-top: 1px solid #f0f0f0 !important; } /* ---- Comment input ---- */ .ck-comment__input-container { border-top: 1px solid #f0f0f0 !important; padding: 8px 12px !important; display: flex !important; gap: 8px !important; align-items: flex-start !important; } .ck-comment__input-wrapper, .ck-thread__input { flex: 1 !important; min-width: 0 !important; } .ck-comment__input .ck-editor__editable { min-height: 36px !important; max-height: 100px !important; padding: 6px 8px !important; border: 1px solid #ddd !important; border-radius: 4px !important; font-size: 13px !important; background: #fff !important; overflow-y: auto !important; } .ck-comment__input .ck-editor__editable:focus { border-color: #4299e1 !important; box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.2) !important; } .ck-comment__input .ck-editor__editable p { margin: 0 !important; color: #333 !important; } /* ---- Comment input actions (submit/cancel) ---- */ .ck-comment__input-actions { display: flex !important; gap: 4px !important; margin-top: 6px !important; } .ck-comment__input-actions .ck-button { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; padding: 4px !important; border-radius: 4px !important; border: 1px solid #e0e0e0 !important; background: #fff !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; } .ck-comment__input-actions .ck-button:hover { background: #f5f5f5 !important; } .ck-comment__input-actions--submit .ck-icon { color: #48bb78 !important; } .ck-comment__input-actions--cancel .ck-icon { color: #f56565 !important; } .ck-comment__input-actions .ck-button .ck-button__label { display: none !important; } .ck-comment__input-actions .ck-button .ck-icon { width: 16px !important; height: 16px !important; } /* ---- Sidebar nested CKEditor (comment input) ---- */ .ck-comment__input .ck-editor__top { display: none !important; } .ck-comment__input .ck.ck-editor { border: 0 !important; } .ck-comment__input .ck.ck-editor__main { border: 0 !important; }