UNPKG

@ckeditor/ckeditor5-ui

Version:

The UI framework and standard UI library of CKEditor 5.

1,114 lines (908 loc) • 31.4 kB
/** * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ /** * 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-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ :root { --ck-z-default: 1; --ck-z-panel: calc( var(--ck-z-default) + 999 ); --ck-z-dialog: 9999; } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ /** * A class that disables all transitions of the element and its children. */ .ck-transitions-disabled, .ck-transitions-disabled * { transition: none !important; } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ :root { /* where 7.5(px) is the font size of the powered by label and 13(px) is the base font size. */ --ck-powered-by-font-size: calc(var(--ck-font-size-base) * 7.5 / 13); /* where 10(px) is the line height of the powered by label and 13(px) is the base font size. */ --ck-powered-by-line-height: calc(var(--ck-font-size-base) * 10 / 13); /* where -0.2(px) is the letter spacing of the powered by label and 13(px) is the base font size. */ --ck-powered-by-letter-spacing: calc(var(--ck-font-size-base) * -0.2 / 13); --ck-powered-by-padding-vertical: 2px; --ck-powered-by-padding-horizontal: 4px; --ck-powered-by-text-color: hsl(0, 0%, 31%); --ck-powered-by-border-radius: var(--ck-border-radius); --ck-powered-by-background: hsl(0, 0%, 100%); --ck-powered-by-border-color: var(--ck-color-focus-border); --ck-powered-by-svg-width: 53; --ck-powered-by-svg-height: 10; --ck-powered-by-icon-width: calc(var(--ck-font-size-base) * var(--ck-powered-by-svg-width) / 13); --ck-powered-by-icon-height: calc(var(--ck-font-size-base) * var(--ck-powered-by-svg-height) / 13); } .ck.ck-balloon-panel.ck-powered-by-balloon { --ck-border-radius: var(--ck-powered-by-border-radius); box-shadow: none; background: var(--ck-powered-by-background); min-height: unset; z-index: calc( var(--ck-z-panel) - 1 ); } .ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by { line-height: var(--ck-powered-by-line-height); } .ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by a { cursor: pointer; display: flex; align-items: center; opacity: .66; filter: grayscale(80%); line-height: var(--ck-powered-by-line-height); padding: var(--ck-powered-by-padding-vertical) var(--ck-powered-by-padding-horizontal); } .ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by .ck-powered-by__label { font-size: var(--ck-powered-by-font-size); letter-spacing: var(--ck-powered-by-letter-spacing); padding-left: 2px; text-transform: uppercase; font-weight: bold; margin-right: 4px; cursor: pointer; line-height: normal; color: var(--ck-powered-by-text-color); } .ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by .ck-icon { display: block; cursor: pointer; width: var(--ck-powered-by-icon-width); height: var(--ck-powered-by-icon-height); } .ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by:hover a { filter: grayscale(0%); opacity: 1; } .ck.ck-balloon-panel.ck-powered-by-balloon[class*="position_inside"] { border-color: transparent; } .ck.ck-balloon-panel.ck-powered-by-balloon[class*="position_border"] { border: var(--ck-focus-ring); border-color: var(--ck-powered-by-border-color); } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ :root { /* where 7.5(px) is the font size of the evaluation badge label and 13(px) is the base font size. */ --ck-evaluation-badge-font-size: calc(var(--ck-font-size-base) * 7.5 / 13); /* where 7.5(px) is the line height of the evaluation badge label and 13(px) is the base font size. */ --ck-evaluation-badge-line-height: calc(var(--ck-font-size-base) * 7.5 / 13); /* where -0.2(px) is the letter spacing of the evaluation badge label and 13(px) is the base font size. */ --ck-evaluation-badge-letter-spacing: calc(var(--ck-font-size-base) * -0.2 / 13); --ck-evaluation-badge-padding-vertical: 2px; --ck-evaluation-badge-padding-horizontal: 4px; --ck-evaluation-badge-text-color: hsl(0, 0%, 31%); --ck-evaluation-badge-border-radius: var(--ck-border-radius); --ck-evaluation-badge-background: hsl(0, 0%, 100%); --ck-evaluation-badge-border-color: var(--ck-color-focus-border); } .ck.ck-balloon-panel.ck-evaluation-badge-balloon { --ck-border-radius: var(--ck-evaluation-badge-border-radius); box-shadow: none; background: var(--ck-evaluation-badge-background); min-height: unset; z-index: calc( var(--ck-z-panel) - 1 ); } .ck.ck-balloon-panel.ck-evaluation-badge-balloon .ck.ck-evaluation-badge { line-height: var(--ck-evaluation-badge-line-height); padding: var(--ck-evaluation-badge-padding-vertical) var(--ck-evaluation-badge-padding-horizontal); } .ck.ck-balloon-panel.ck-evaluation-badge-balloon .ck.ck-evaluation-badge .ck-evaluation-badge__label { display: block; padding: 0 2px; font-size: var(--ck-evaluation-badge-font-size); letter-spacing: var(--ck-evaluation-badge-letter-spacing); font-weight: bold; line-height: normal; text-transform: uppercase; color: var(--ck-evaluation-badge-text-color); } .ck.ck-balloon-panel.ck-evaluation-badge-balloon[class*="position_inside"] { border-color: transparent; } .ck.ck-balloon-panel.ck-evaluation-badge-balloon[class*="position_border"] { border: var(--ck-focus-ring); border-color: var(--ck-evaluation-badge-border-color); } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ /** * Makes element unselectable. */ /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ .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; } [dir="ltr"] .ck.ck-button, [dir="ltr"] a.ck.ck-button { justify-content: left; } [dir="rtl"] .ck.ck-button, [dir="rtl"] a.ck.ck-button { justify-content: right; } .ck.ck-button .ck-button__label, a.ck.ck-button .ck-button__label { display: none; } .ck.ck-button.ck-button_with-text .ck-button__label, a.ck.ck-button.ck-button_with-text .ck-button__label { display: inline-block; } /* Center the icon horizontally in a button without text. */ .ck.ck-button:not(.ck-button_with-text), a.ck.ck-button:not(.ck-button_with-text) { justify-content: center; } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ .ck.ck-button.ck-switchbutton .ck-button__toggle { display: block; } .ck.ck-button.ck-switchbutton .ck-button__toggle .ck-button__toggle__inner { display: block; } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ .ck.ck-list-item-button { min-height: unset; width: 100%; border-radius: 0; } [dir="ltr"] .ck.ck-list-item-button { text-align: left; } [dir="rtl"] .ck.ck-list-item-button { text-align: right; } [dir="ltr"] .ck.ck-list-item-button.ck-list-item-button_toggleable { padding-left: var(--ck-spacing-small); } [dir="rtl"] .ck.ck-list-item-button.ck-list-item-button_toggleable { padding-right: var(--ck-spacing-small); } .ck.ck-list-item-button .ck-list-item-button__check-holder { display: inline-flex; width: .9em; height: .9em; } [dir="ltr"] .ck.ck-list-item-button .ck-list-item-button__check-holder { margin-right: var(--ck-spacing-small); } [dir="rtl"] .ck.ck-list-item-button .ck-list-item-button__check-holder { margin-left: var(--ck-spacing-small); } .ck.ck-list-item-button .ck-list-item-button__check-icon { height: 100%; } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ .ck.ck-collapsible.ck-collapsible_collapsed > .ck-collapsible__children { display: none; } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ .ck.ck-color-grid { display: grid; } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ .color-picker-hex-input { width: max-content; } .color-picker-hex-input .ck.ck-input { min-width: unset; } .ck.ck-color-picker__row { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; margin: var(--ck-spacing-large) 0 0; width: unset; } .ck.ck-color-picker__row .ck.ck-labeled-field-view { padding-top: unset; } .ck.ck-color-picker__row .ck.ck-input-text { width: unset; } .ck.ck-color-picker__row .ck-color-picker__hash-view { padding-top: var(--ck-spacing-tiny); padding-right: var(--ck-spacing-medium); } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ /* View fragment with color grids. */ .ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__remove-color, .ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__color-picker { display: flex; align-items: center; } [dir="rtl"] .ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__remove-color, [dir="rtl"] .ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__color-picker { justify-content: flex-start; } /* View fragment with a color picker. */ .ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-selector_action-bar { display: flex; flex-direction: row; justify-content: space-around; } .ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-selector_action-bar .ck-button-save, .ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-selector_action-bar .ck-button-cancel { flex: 1 } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ .ck.ck-dialog .ck.ck-dialog__actions { display: flex; justify-content: flex-end; } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ .ck.ck-dialog-overlay { user-select: none; overscroll-behavior: none; position: fixed; bottom: 0; left: 0; right: 0; top: 0; } .ck.ck-dialog-overlay.ck-dialog-overlay__transparent { pointer-events: none; animation: none; background: none; } .ck.ck-dialog { overscroll-behavior: none; width: fit-content; position: absolute; } .ck.ck-dialog .ck.ck-form__header { flex-shrink: 0; } /* Modals should not be draggable. */ .ck.ck-dialog:not(.ck-dialog_modal) .ck.ck-form__header .ck-form__header__label { cursor: grab; } .ck.ck-dialog-overlay.ck-dialog-overlay__transparent .ck.ck-dialog { pointer-events: all; } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ :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-panel); 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-panel) + 1 ); } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ .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); } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ :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); } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ .ck.ck-dropdown-menu-list__nested-menu__button > .ck-dropdown-menu-list__nested-menu__button__arrow { pointer-events: none; z-index: var(--ck-z-default); } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ .ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel { position: absolute; max-height: 314px; /* With the default settings, this is equal to 10 menu items. */ overflow-y: auto; z-index: calc(var(--ck-z-panel) + 1); } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ .ck.ck-dropdown-menu-list__nested-menu { display: block; } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ .ck.ck-aria-live-announcer { position: absolute; left: -10000px; top: -10000px; } .ck.ck-aria-live-region-list { list-style-type: none; } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ .ck.ck-form__row { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; padding: var(--ck-spacing-standard) var(--ck-spacing-large) 0; } .ck.ck-form__row.ck-form__row_large-top-padding { padding-top: var(--ck-spacing-large); } .ck.ck-form__row.ck-form__row_large-bottom-padding { padding-bottom: var(--ck-spacing-large); } .ck.ck-form__row.ck-form__row_with-submit { flex-wrap: nowrap; } .ck.ck-form__row.ck-form__row_with-submit > *:not(:first-child) { margin-inline-start: var(--ck-spacing-standard); } .ck.ck-form__row > .ck.ck-form__row { padding: 0; } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ .ck.ck-form__header { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; } .ck.ck-form__header h2.ck-form__header__label { flex-grow: 1; } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ .ck.ck-icon { vertical-align: middle; } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ .ck.ck-label { display: block; } .ck.ck-voice-label { display: none; } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ .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; } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ /** * 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); } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ :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-panel); } .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; } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ .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; } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ .ck .ck-fake-panel { position: absolute; /* Fake panels should be placed under main balloon content. */ z-index: calc(var(--ck-z-panel) - 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; } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ .ck.ck-sticky-panel .ck-sticky-panel__content_sticky { z-index: var(--ck-z-panel); /* #315 */ position: fixed; top: 0; } .ck.ck-sticky-panel .ck-sticky-panel__content_sticky_bottom-limit { top: auto; position: absolute; } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ .ck.ck-autocomplete { position: relative; } .ck.ck-autocomplete > .ck-search__results { position: absolute; z-index: var(--ck-z-panel); } .ck.ck-autocomplete > .ck-search__results.ck-search__results_n { bottom: 100%; } .ck.ck-autocomplete > .ck-search__results.ck-search__results_s { top: 100%; bottom: auto; } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ .ck.ck-search > .ck-labeled-field-view > .ck-labeled-field-view__input-wrapper > .ck-icon { position: absolute; top: 50%; transform: translateY(-50%); } [dir="ltr"] .ck.ck-search > .ck-labeled-field-view > .ck-labeled-field-view__input-wrapper > .ck-icon { left: var(--ck-spacing-medium); } [dir="rtl"] .ck.ck-search > .ck-labeled-field-view > .ck-labeled-field-view__input-wrapper > .ck-icon { right: var(--ck-spacing-medium); } .ck.ck-search > .ck-labeled-field-view .ck-search__reset { position: absolute; top: 50%; transform: translateY(-50%); } .ck.ck-search > .ck-search__results > .ck-search__info > span:first-child { display: block; } /* Hide the filtered view when nothing was found */ .ck.ck-search > .ck-search__results > .ck-search__info:not(.ck-hidden) ~ * { display: none; } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ .ck.ck-highlighted-text mark { background: var(--ck-color-highlight-background); vertical-align: initial; font-weight: inherit; line-height: inherit; font-size: inherit; } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ /** * Makes element unselectable. */ .ck.ck-balloon-panel.ck-tooltip { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; z-index: calc( var(--ck-z-dialog) + 100 ); } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ :root { --ck-toolbar-spinner-size: 18px; } .ck.ck-spinner-container { display: block; position: relative; } .ck.ck-spinner { position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto; transform: translateY(-50%); z-index: 1; } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ /** * 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; } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ .ck.ck-block-toolbar-button { position: absolute; z-index: var(--ck-z-default); } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ .ck.ck-menu-bar__menu > .ck-menu-bar__menu__button > .ck-menu-bar__menu__button__arrow { pointer-events: none; z-index: var(--ck-z-default); } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ :root { --ck-menu-bar-menu-max-width: 75vw; --ck-menu-bar-nested-menu-horizontal-offset: 5px; } .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel { z-index: var(--ck-z-panel); max-width: var(--ck-menu-bar-menu-max-width); position: absolute; } .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_ne, .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_nw { bottom: 100%; } .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_se, .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_sw { top: 100%; bottom: auto; } .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_ne, .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_se { left: 0px; } .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_nw, .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_sw { right: 0px; } .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_es, .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_en { left: calc( 100% - var(--ck-menu-bar-nested-menu-horizontal-offset) ); } .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_es { top: 0px; } .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_en { bottom: 0px; } .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_ws, .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_wn { right: calc( 100% - var(--ck-menu-bar-nested-menu-horizontal-offset) ); } .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_ws { top: 0px; } .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_wn { bottom: 0px; } /* * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ .ck.ck-menu-bar__menu { display: block; position: relative; } /*# sourceMappingURL=index.css.map */