UNPKG

ckeditor5

Version:

A set of ready-to-use rich text editors created with a powerful framework. Made with real-time collaborative editing in mind.

1,622 lines (1,325 loc) • 234 kB
/** * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ :root { --ck-color-base-foreground: #fafafa; --ck-color-base-background: #fff; --ck-color-base-border: #ccced1; --ck-color-base-action: #53a336; --ck-color-base-focus: #6cb5f9; --ck-color-base-text: #333; --ck-color-base-active: #2977ff; --ck-color-base-active-focus: #0d65ff; --ck-color-base-error: #db3700; --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: #cae1fc; --ck-color-focus-disabled-shadow: #77baf84d; --ck-color-focus-error-shadow: #ff401f4d; --ck-color-text: var(--ck-color-base-text); --ck-color-shadow-drop: #00000026; --ck-color-shadow-drop-active: #0003; --ck-color-shadow-inner: #0000001a; --ck-color-button-default-background: transparent; --ck-color-button-default-hover-background: #f0f0f0; --ck-color-button-default-active-background: #f0f0f0; --ck-color-button-default-disabled-background: transparent; --ck-color-button-on-background: #f0f7ff; --ck-color-button-on-hover-background: #dbecff; --ck-color-button-on-active-background: #dbecff; --ck-color-button-on-disabled-background: #f0f2f4; --ck-color-button-on-color: #2977ff; --ck-color-button-action-background: var(--ck-color-base-action); --ck-color-button-action-hover-background: #4d9d30; --ck-color-button-action-active-background: #4d9d30; --ck-color-button-action-disabled-background: #7ec365; --ck-color-button-action-text: var(--ck-color-base-background); --ck-color-button-save: #008a00; --ck-color-button-cancel: #db3700; --ck-color-switch-button-off-background: #939393; --ck-color-switch-button-off-hover-background: #7d7d7d; --ck-color-switch-button-on-background: var(--ck-color-button-action-background); --ck-color-switch-button-on-hover-background: #4d9d30; --ck-color-switch-button-inner-background: var(--ck-color-base-background); --ck-color-switch-button-inner-shadow: #0000001a; --ck-color-dropdown-panel-background: var(--ck-color-base-background); --ck-color-dropdown-panel-border: var(--ck-color-base-border); --ck-color-dialog-background: var(--ck-custom-background); --ck-color-dialog-form-header-border: var(--ck-custom-border); --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: #f2f2f2; --ck-color-input-disabled-border: var(--ck-color-base-border); --ck-color-input-disabled-text: #757575; --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); --ck-color-panel-background: var(--ck-color-base-background); --ck-color-panel-border: var(--ck-color-base-border); --ck-color-toolbar-background: var(--ck-color-base-background); --ck-color-toolbar-border: var(--ck-color-base-border); --ck-color-tooltip-background: var(--ck-color-base-text); --ck-color-tooltip-text: var(--ck-color-base-background); --ck-color-engine-placeholder-text: #707070; --ck-color-upload-bar-background: #6cb5f9; --ck-color-link-default: #0000f0; --ck-color-link-selected-background: #1fb0ff1a; --ck-color-link-fake-selection: #1fb0ff4d; --ck-color-highlight-background: #ff0; --ck-color-light-red: #fcc; --ck-disabled-opacity: .5; --ck-focus-outer-shadow-geometry: 0 0 0 3px; --ck-focus-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-outer-shadow); --ck-focus-disabled-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-disabled-shadow); --ck-focus-error-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-error-shadow); --ck-focus-ring: 1px solid var(--ck-color-focus-border); --ck-font-size-base: 13px; --ck-line-height-base: 1.84615; --ck-font-face: Helvetica, Arial, Tahoma, Verdana, Sans-Serif; --ck-font-size-tiny: .7em; --ck-font-size-small: .75em; --ck-font-size-normal: 1em; --ck-font-size-big: 1.4em; --ck-font-size-large: 1.8em; --ck-ui-component-min-height: 2.3em; } .ck.ck-reset, .ck.ck-reset_all, .ck-reset_all :not(.ck-reset_all-excluded, .ck-reset_all-excluded *) { box-sizing: border-box; vertical-align: middle; word-wrap: break-word; background: none; border: 0; width: auto; height: auto; margin: 0; padding: 0; text-decoration: none; transition: none; position: static; } .ck.ck-reset_all, .ck-reset_all :not(.ck-reset_all-excluded, .ck-reset_all-excluded *) { 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, .ck-reset_all-excluded *) { text-align: right; } .ck-reset_all iframe:not(.ck-reset_all-excluded *) { 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 *) { border: 2px groove #dfdee3; padding: 10px; } .ck-reset_all button:not(.ck-reset_all-excluded *)::-moz-focus-inner { border: 0; padding: 0; } .ck[dir="rtl"], .ck[dir="rtl"] .ck { text-align: right; } :root { --ck-border-radius: 2px; --ck-rounded-corners-radius: 0; } .ck-rounded-corners { --ck-rounded-corners-radius: var(--ck-border-radius); } :root { --ck-inner-shadow: 2px 2px 3px var(--ck-color-shadow-inner) inset; --ck-drop-shadow: 0 1px 2px 1px var(--ck-color-shadow-drop); --ck-drop-shadow-active: 0 3px 6px 1px var(--ck-color-shadow-drop-active); --ck-spacing-unit: .6em; --ck-spacing-extra-large: calc(var(--ck-spacing-unit) * 2); --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) * .8); --ck-spacing-medium-small: calc(var(--ck-spacing-unit) * .667); --ck-spacing-small: calc(var(--ck-spacing-unit) * .5); --ck-spacing-tiny: calc(var(--ck-spacing-unit) * .3); --ck-spacing-extra-tiny: calc(var(--ck-spacing-unit) * .16); } .ck-hidden { display: none !important; } :root { --ck-z-default: 1; --ck-z-panel: calc(var(--ck-z-default) + 999); --ck-z-dialog: 9999; } .ck-transitions-disabled, .ck-transitions-disabled * { transition: none !important; } :root { --ck-powered-by-font-size: calc(var(--ck-font-size-base) * 7.5 / 13); --ck-powered-by-line-height: calc(var(--ck-font-size-base) * 10 / 13); --ck-powered-by-letter-spacing: calc(var(--ck-font-size-base) * -.2 / 13); --ck-powered-by-padding-vertical: 2px; --ck-powered-by-padding-horizontal: 4px; --ck-powered-by-text-color: #4f4f4f; --ck-powered-by-border-radius: var(--ck-border-radius); --ck-powered-by-background: #fff; --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; 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); align-items: center; display: flex; } .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); text-transform: uppercase; cursor: pointer; color: var(--ck-powered-by-text-color); margin-right: 4px; padding-left: 2px; font-weight: bold; line-height: normal; } .ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by .ck-icon { cursor: pointer; width: var(--ck-powered-by-icon-width); height: var(--ck-powered-by-icon-height); display: block; } .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: #0000; } .ck.ck-balloon-panel.ck-powered-by-balloon[class*="position_border"] { border: var(--ck-focus-ring); border-color: var(--ck-powered-by-border-color); } :root { --ck-evaluation-badge-font-size: calc(var(--ck-font-size-base) * 7.5 / 13); --ck-evaluation-badge-line-height: calc(var(--ck-font-size-base) * 7.5 / 13); --ck-evaluation-badge-letter-spacing: calc(var(--ck-font-size-base) * -.2 / 13); --ck-evaluation-badge-padding-vertical: 2px; --ck-evaluation-badge-padding-horizontal: 4px; --ck-evaluation-badge-text-color: #4f4f4f; --ck-evaluation-badge-border-radius: var(--ck-border-radius); --ck-evaluation-badge-background: #fff; --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 { font-size: var(--ck-evaluation-badge-font-size); letter-spacing: var(--ck-evaluation-badge-letter-spacing); text-transform: uppercase; color: var(--ck-evaluation-badge-text-color); padding: 0 2px; font-weight: bold; line-height: normal; display: block; } .ck.ck-balloon-panel.ck-evaluation-badge-balloon[class*="position_inside"] { border-color: #0000; } .ck.ck-balloon-panel.ck-evaluation-badge-balloon[class*="position_border"] { border: var(--ck-focus-ring); border-color: var(--ck-evaluation-badge-border-color); } .ck.ck-responsive-form { padding: var(--ck-spacing-large); } .ck.ck-responsive-form:focus { 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 (width <= 600px) { .ck.ck-responsive-form { width: calc(.8 * var(--ck-input-width)); padding: 0; } .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, .ck.ck-responsive-form .ck-labeled-field-view .ck-input-number { width: 100%; min-width: 0; } .ck.ck-responsive-form .ck-labeled-field-view .ck-labeled-field-view__error { white-space: normal; } .ck.ck-responsive-form > .ck-button:last-child, .ck.ck-responsive-form > .ck-button:nth-last-child(2) { padding: var(--ck-spacing-standard); margin-top: var(--ck-spacing-large); border-radius: 0; } :is(.ck.ck-responsive-form > .ck-button:last-child, .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:last-child, .ck.ck-responsive-form > .ck-button:nth-last-child(2)) { margin-left: 0; } [dir="rtl"] :is(.ck.ck-responsive-form > .ck-button:last-child, .ck.ck-responsive-form > .ck-button:nth-last-child(2)) { margin-left: 0; } [dir="rtl"] :is(.ck.ck-responsive-form > .ck-button:last-child, .ck.ck-responsive-form > .ck-button:nth-last-child(2)):last-of-type { border-right: 1px solid var(--ck-color-base-border); } .ck.ck-responsive-form .ck-button:after { content: ""; z-index: 1; width: 0; position: absolute; top: -1px; bottom: -1px; right: -1px; } .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:focus:after { display: none; } } .ck-vertical-form > .ck-button:nth-last-child(2):after { border-right: 1px solid var(--ck-color-base-border); } .ck-vertical-form .ck-button:after { content: ""; z-index: 1; width: 0; position: absolute; top: -1px; bottom: -1px; right: -1px; } .ck-vertical-form .ck-button:focus:after { display: none; } :root { --ck-form-default-width: 340px; } .ck.ck-form { padding: 0 0 var(--ck-spacing-large); } .ck.ck-form.ck-form_default-width { width: var(--ck-form-default-width); } .ck.ck-form:focus { outline: none; } .ck.ck-form .ck.ck-input-text, .ck.ck-form .ck.ck-input-number { width: 0; min-width: 100%; } .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%; } @media screen and (width <= 600px) { .ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit { flex-direction: column; align-items: stretch; padding: 0; } } @media screen and (width <= 600px) { .ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit > .ck { margin: var(--ck-spacing-large) var(--ck-spacing-large) 0; } } @media screen and (width <= 600px) { .ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit .ck-button_with-text { justify-content: center; } } @media screen and (width <= 600px) { .ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_large-bottom-padding { padding-bottom: var(--ck-spacing-large); } } [dir="ltr"] .ck.ck-form.ck-responsive-form > :not(:first-child) { margin-left: 0; } [dir="rtl"] .ck.ck-form.ck-responsive-form > :not(:last-child) { margin-left: 0; } .ck.ck-aria-live-announcer { position: absolute; top: -10000px; left: -10000px; } .ck.ck-aria-live-region-list { list-style-type: none; } :root { --ck-accessibility-help-dialog-max-width: 600px; --ck-accessibility-help-dialog-max-height: 400px; --ck-accessibility-help-dialog-border-color: #ccced1; --ck-accessibility-help-dialog-code-background-color: #ededed; --ck-accessibility-help-dialog-kbd-shadow-color: #9c9c9c; } .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content { padding: var(--ck-spacing-large); max-width: var(--ck-accessibility-help-dialog-max-width); max-height: var(--ck-accessibility-help-dialog-max-height); user-select: text; border: 1px solid #0000; overflow: auto; } .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content:focus { border: var(--ck-focus-ring); box-shadow: var(--ck-focus-outer-shadow), 0 0; outline: none; } .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content * { white-space: normal; } .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content .ck-label { display: none; } .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content h3 { font-size: 1.2em; font-weight: bold; } .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content h4 { font-size: 1em; font-weight: bold; } .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content p, .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content h3, .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content h4, .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content table { margin: 1em 0; } .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content dl { border-top: 1px solid var(--ck-accessibility-help-dialog-border-color); border-bottom: none; grid-template-columns: 2fr 1fr; display: grid; } .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content dl dt, .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content dl dd { border-bottom: 1px solid var(--ck-accessibility-help-dialog-border-color); padding: .4em 0; } .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content dl dt { grid-column-start: 1; } .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content dl dd { text-align: right; grid-column-start: 2; } .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content kbd, .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content code { background: var(--ck-accessibility-help-dialog-code-background-color); vertical-align: middle; text-align: center; border-radius: 2px; padding: .4em; font-size: .9em; line-height: 1; display: inline-block; } .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content code { font-family: monospace; } .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content kbd { min-width: 1.8em; box-shadow: 0px 1px 1px var(--ck-accessibility-help-dialog-kbd-shadow-color); margin: 0 1px; } .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content kbd + kbd { margin-left: 2px; } .ck.ck-button, :where(a).ck.ck-button { --ck-button-background: var(--ck-color-button-default-background); --ck-button-hover-background: var(--ck-color-button-default-hover-background); --ck-button-active-background: var(--ck-color-button-default-active-background); --ck-button-disabled-background: var(--ck-color-button-default-disabled-background); background: var(--ck-button-background); } :is(.ck.ck-button, :where(a).ck.ck-button):not(.ck-disabled):hover { background: var(--ck-button-hover-background); } :is(.ck.ck-button, :where(a).ck.ck-button):not(.ck-disabled):active { background: var(--ck-button-active-background); } .ck.ck-button, :where(a).ck.ck-button { border-radius: var(--ck-rounded-corners-radius); white-space: nowrap; cursor: default; vertical-align: middle; padding: var(--ck-spacing-tiny); text-align: center; min-width: var(--ck-ui-component-min-height); min-height: var(--ck-ui-component-min-height); line-height: 1; font-size: inherit; -webkit-appearance: none; -webkit-user-select: none; user-select: none; border: 1px solid #0000; align-items: center; transition: box-shadow .2s ease-in-out, border .2s ease-in-out; display: inline-flex; position: relative; } @media (prefers-reduced-motion: reduce) { .ck.ck-button, :where(a).ck.ck-button { transition: none; } } :is(.ck.ck-button, :where(a).ck.ck-button):active, :is(.ck.ck-button, :where(a).ck.ck-button):focus { border: var(--ck-focus-ring); box-shadow: var(--ck-focus-outer-shadow), 0 0; outline: none; } :is(.ck.ck-button, :where(a).ck.ck-button) .ck-button__icon use, :is(.ck.ck-button, :where(a).ck.ck-button) .ck-button__icon use * { color: inherit; } :is(.ck.ck-button, :where(a).ck.ck-button) .ck-button__label { font-size: inherit; font-weight: inherit; color: inherit; cursor: inherit; vertical-align: middle; } [dir="ltr"] :is(:is(.ck.ck-button, :where(a).ck.ck-button) .ck-button__label) { text-align: left; } [dir="rtl"] :is(:is(.ck.ck-button, :where(a).ck.ck-button) .ck-button__label) { text-align: right; } :is(.ck.ck-button, :where(a).ck.ck-button) .ck-button__label { display: none; } :is(.ck.ck-button, :where(a).ck.ck-button) .ck-button__keystroke { color: inherit; opacity: .5; } [dir="ltr"] :is(:is(.ck.ck-button, :where(a).ck.ck-button) .ck-button__keystroke) { margin-left: var(--ck-spacing-large); } [dir="rtl"] :is(:is(.ck.ck-button, :where(a).ck.ck-button) .ck-button__keystroke) { margin-right: var(--ck-spacing-large); } :is(.ck.ck-button, :where(a).ck.ck-button).ck-disabled { background: var(--ck-button-disabled-background); } :is(.ck.ck-button, :where(a).ck.ck-button).ck-disabled:active, :is(.ck.ck-button, :where(a).ck.ck-button).ck-disabled:focus { box-shadow: var(--ck-focus-disabled-outer-shadow), 0 0; } :is(.ck.ck-button, :where(a).ck.ck-button).ck-disabled .ck-button__icon, :is(.ck.ck-button, :where(a).ck.ck-button).ck-disabled .ck-button__label { opacity: var(--ck-disabled-opacity); } :is(.ck.ck-button, :where(a).ck.ck-button).ck-disabled .ck-button__keystroke { opacity: .3; } :is(.ck.ck-button, :where(a).ck.ck-button).ck-button_with-text { padding: var(--ck-spacing-tiny) var(--ck-spacing-standard); } [dir="ltr"] :is(:is(.ck.ck-button, :where(a).ck.ck-button).ck-button_with-text .ck-button__icon) { margin-right: var(--ck-spacing-medium); } [dir="rtl"] :is(:is(.ck.ck-button, :where(a).ck.ck-button).ck-button_with-text .ck-button__icon) { margin-left: var(--ck-spacing-medium); } :is(.ck.ck-button, :where(a).ck.ck-button).ck-button_with-text .ck-button__label { display: inline-block; } :is(.ck.ck-button, :where(a).ck.ck-button).ck-button_with-keystroke .ck-button__label { flex-grow: 1; } :is(.ck.ck-button, :where(a).ck.ck-button).ck-on { --ck-button-background: var(--ck-color-button-on-background); --ck-button-hover-background: var(--ck-color-button-on-hover-background); --ck-button-active-background: var(--ck-color-button-on-active-background); --ck-button-disabled-background: var(--ck-color-button-on-disabled-background); color: var(--ck-color-button-on-color); } :is(.ck.ck-button, :where(a).ck.ck-button).ck-button-save { color: var(--ck-color-button-save); } :is(.ck.ck-button, :where(a).ck.ck-button).ck-button-cancel { color: var(--ck-color-button-cancel); } [dir="ltr"] :is(.ck.ck-button, :where(a).ck.ck-button) { justify-content: left; } [dir="rtl"] :is(.ck.ck-button, :where(a).ck.ck-button) { justify-content: right; } :is(.ck.ck-button, :where(a).ck.ck-button):not(.ck-button_with-text) { justify-content: center; } .ck.ck-button-action, a.ck.ck-button-action { --ck-button-background: var(--ck-color-button-action-background); --ck-button-hover-background: var(--ck-color-button-action-hover-background); --ck-button-active-background: var(--ck-color-button-action-active-background); --ck-button-disabled-background: var(--ck-color-button-action-disabled-background); color: var(--ck-color-button-action-text); } .ck.ck-button-bold, a.ck.ck-button-bold { font-weight: bold; } :root { --ck-switch-button-toggle-width: 2.61538em; --ck-switch-button-toggle-inner-size: calc(1.07692em + 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); } .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: none; } [dir="ltr"] :is(.ck.ck-button.ck-switchbutton .ck-button__label) { margin-right: calc(2 * var(--ck-spacing-large)); } [dir="rtl"] :is(.ck.ck-button.ck-switchbutton .ck-button__label) { margin-left: calc(2 * var(--ck-spacing-large)); } .ck.ck-button.ck-switchbutton .ck-button__toggle { border-radius: var(--ck-rounded-corners-radius); width: var(--ck-switch-button-toggle-width); background: var(--ck-color-switch-button-off-background); border: 1px solid #0000; transition: background .4s, box-shadow .2s ease-in-out, outline .2s ease-in-out; } [dir="ltr"] :is(.ck.ck-button.ck-switchbutton .ck-button__toggle) { margin-left: auto; } [dir="rtl"] :is(.ck.ck-button.ck-switchbutton .ck-button__toggle) { margin-right: auto; } .ck.ck-button.ck-switchbutton .ck-button__toggle .ck-button__toggle__inner { border-radius: calc(.5 * var(--ck-rounded-corners-radius)); width: var(--ck-switch-button-toggle-inner-size); height: var(--ck-switch-button-toggle-inner-size); background: var(--ck-color-switch-button-inner-background); transition: all .3s; } @media (prefers-reduced-motion: reduce) { .ck.ck-button.ck-switchbutton .ck-button__toggle .ck-button__toggle__inner { transition: none; } } .ck.ck-button.ck-switchbutton .ck-button__toggle .ck-button__toggle__inner { display: block; } .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-button__toggle { display: block; } .ck.ck-button.ck-switchbutton.ck-disabled .ck-button__toggle { opacity: var(--ck-disabled-opacity); } .ck.ck-button.ck-switchbutton:focus { box-shadow: none; border-color: #0000; outline: 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); } .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); } [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))); } .ck.ck-button.ck-list-item-button { padding: var(--ck-spacing-tiny) calc(2 * var(--ck-spacing-standard)); } .ck.ck-button.ck-list-item-button, .ck.ck-button.ck-list-item-button.ck-on { background: var(--ck-color-list-background); color: var(--ck-color-text); } [dir="ltr"] .ck.ck-button.ck-list-item-button:has(.ck-list-item-button__check-holder) { padding-left: var(--ck-spacing-small); } [dir="rtl"] .ck.ck-button.ck-list-item-button:has(.ck-list-item-button__check-holder) { padding-right: var(--ck-spacing-small); } .ck.ck-button.ck-list-item-button:hover:not(.ck-disabled), .ck.ck-button.ck-list-item-button.ck-button.ck-on:hover, .ck.ck-button.ck-list-item-button.ck-on:not(.ck-list-item-button_toggleable), .ck.ck-button.ck-list-item-button.ck-on:hover { background: var(--ck-color-list-button-hover-background); } :is(.ck.ck-button.ck-list-item-button:hover:not(.ck-disabled), .ck.ck-button.ck-list-item-button.ck-button.ck-on:hover, .ck.ck-button.ck-list-item-button.ck-on:not(.ck-list-item-button_toggleable), .ck.ck-button.ck-list-item-button.ck-on:hover):not(.ck-disabled) { color: var(--ck-color-text); } .ck.ck-list-item-button { min-height: unset; border-radius: 0; width: 100%; } [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 { width: .9em; height: .9em; display: inline-flex; } [dir="ltr"] :is(.ck.ck-list-item-button .ck-list-item-button__check-holder) { margin-right: var(--ck-spacing-small); } [dir="rtl"] :is(.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%; } :root { --ck-collapsible-arrow-size: calc(.5 * var(--ck-icon-size)); } .ck.ck-collapsible > .ck.ck-button { width: 100%; color: inherit; border-radius: 0; font-weight: bold; } .ck.ck-collapsible > .ck.ck-button:focus { background: none; } .ck.ck-collapsible > .ck.ck-button:active, .ck.ck-collapsible > .ck.ck-button:not(:focus), .ck.ck-collapsible > .ck.ck-button:hover:not(:focus) { box-shadow: none; background: none; border-color: #0000; } .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: var(--ck-spacing-medium) var(--ck-spacing-large) var(--ck-spacing-large); } .ck.ck-collapsible.ck-collapsible_collapsed > .ck.ck-button .ck-icon { transform: rotate(-90deg); } .ck.ck-collapsible.ck-collapsible_collapsed > .ck-collapsible__children { display: none; } :root { --ck-color-grid-tile-size: 24px; --ck-color-color-grid-check-icon: #166fd4; } .ck.ck-color-grid { grid-gap: 5px; padding: 8px; display: grid; } .ck.ck-color-grid__tile { transition: box-shadow .2s; } @media (forced-colors: none) { .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); border: 0; padding: 0; } .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) { border: 0; } .ck.ck-color-grid__tile.ck-color-selector__color-tile_bordered { box-shadow: 0 0 0 1px var(--ck-color-base-border); } .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: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); } } @media (forced-colors: active) { .ck.ck-color-grid__tile { width: unset; height: unset; min-width: unset; min-height: unset; padding: 0 var(--ck-spacing-small); } .ck.ck-color-grid__tile .ck-button__label { display: inline-block; } } @media (prefers-reduced-motion: reduce) { .ck.ck-color-grid__tile { transition: none; } } .ck.ck-color-grid__tile.ck-disabled { cursor: unset; transition: unset; } .ck.ck-color-grid__tile .ck.ck-icon { color: var(--ck-color-color-grid-check-icon); display: none; } .ck.ck-color-grid__tile.ck-on .ck.ck-icon { display: block; } .ck.ck-color-grid__label { padding: 0 var(--ck-spacing-standard); } .color-picker-hex-input { width: max-content; } .color-picker-hex-input .ck.ck-input { min-width: unset; } .ck.ck-color-picker__row { margin: var(--ck-spacing-large) 0 0; width: unset; flex-flow: row; justify-content: space-between; display: flex; } .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); } .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 { align-items: center; width: 100%; display: flex; } [dir="rtl"] :is(.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) { justify-content: flex-start; } .ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__color-picker { padding: calc(var(--ck-spacing-standard) / 2) var(--ck-spacing-standard); border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__color-picker:not(:focus) { border-top: 1px solid var(--ck-color-base-border); } [dir="ltr"] :is(.ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__color-picker .ck.ck-icon) { margin-right: var(--ck-spacing-standard); } [dir="rtl"] :is(.ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__color-picker .ck.ck-icon) { margin-left: var(--ck-spacing-standard); } .ck.ck-color-selector .ck-color-grids-fragment label.ck.ck-color-grid__label { font-weight: unset; } .ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-picker { padding: 8px; } .ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-picker .hex-color-picker { min-width: 180px; height: 100px; } .ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-picker .hex-color-picker::part(saturation) { border-radius: var(--ck-border-radius) var(--ck-border-radius) 0 0; } .ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-picker .hex-color-picker::part(hue) { border-radius: 0 0 var(--ck-border-radius) var(--ck-border-radius); } .ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-picker .hex-color-picker::part(saturation-pointer), .ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-picker .hex-color-picker::part(hue-pointer) { width: 15px; height: 15px; } .ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-selector_action-bar { flex-direction: row; justify-content: space-around; padding: 0 8px 8px; display: flex; } .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; } :root { --ck-dialog-overlay-background-color: #00000080; --ck-dialog-drop-shadow: 0px 0px 6px 2px #00000026; --ck-dialog-max-width: 100vw; --ck-dialog-max-height: 90vh; --ck-color-dialog-background: var(--ck-color-base-background); --ck-color-dialog-form-header-border: var(--ck-color-base-border); } .ck.ck-dialog-overlay { background: var(--ck-dialog-overlay-background-color); z-index: var(--ck-z-dialog); user-select: none; overscroll-behavior: none; animation: .3s ck-dialog-fade-in; position: fixed; inset: 0; } .ck.ck-dialog-overlay.ck-dialog-overlay__transparent { pointer-events: none; background: none; animation: none; } .ck.ck-dialog { border-radius: var(--ck-rounded-corners-radius); box-shadow: var(--ck-drop-shadow), 0 0; --ck-drop-shadow: var(--ck-dialog-drop-shadow); background: var(--ck-color-dialog-background); max-height: var(--ck-dialog-max-height); max-width: var(--ck-dialog-max-width); border: 1px solid var(--ck-color-base-border); overscroll-behavior: contain; overscroll-behavior: none; width: fit-content; position: absolute; } .ck.ck-dialog .ck.ck-form__header { border-bottom: 1px solid var(--ck-color-dialog-form-header-border); flex-shrink: 0; } .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; } .ck-dialog-scroll-locked { overflow: hidden; } @keyframes ck-dialog-fade-in { 0% { background: none; } 100% { background: var(--ck-dialog-overlay-background-color); } } .ck.ck-dialog .ck.ck-dialog__actions { padding: var(--ck-spacing-large); display: flex; } .ck.ck-dialog .ck.ck-dialog__actions > * + * { margin-left: var(--ck-spacing-large); } .ck.ck-dialog .ck.ck-dialog__actions { justify-content: flex-end; } :root { --ck-dropdown-arrow-size: calc(.5 * var(--ck-icon-size)); --ck-dropdown-max-width: 75vw; } .ck.ck-dropdown { font-size: inherit; display: inline-block; position: relative; } .ck.ck-dropdown .ck-dropdown__arrow { width: var(--ck-dropdown-arrow-size); pointer-events: none; z-index: var(--ck-z-default); } [dir="ltr"] .ck.ck-dropdown .ck-dropdown__arrow { right: var(--ck-spacing-standard); margin-left: var(--ck-spacing-standard); } [dir="rtl"] .ck.ck-dropdown .ck-dropdown__arrow { left: var(--ck-spacing-standard); 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) { padding-left: var(--ck-spacing-small); } [dir="rtl"] :is(.ck.ck-dropdown .ck-button.ck-dropdown__button):not(.ck-button_with-text) { padding-right: var(--ck-spacing-small); } .ck.ck-dropdown .ck-button.ck-dropdown__button .ck-button__label { text-overflow: ellipsis; width: 7em; overflow: hidden; } .ck.ck-dropdown .ck-button.ck-dropdown__button.ck-disabled .ck-button__label { opacity: var(--ck-disabled-opacity); } .ck.ck-dropdown .ck-button.ck-dropdown__button.ck-on { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .ck.ck-dropdown .ck-button.ck-dropdown__button.ck-dropdown__button_label-width_auto .ck-button__label { width: auto; } .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; } :is(.ck.ck-dropdown .ck-button.ck-dropdown__button.ck-off:active, .ck.ck-dropdown .ck-button.ck-dropdown__button.ck-on:active):focus { box-shadow: var(--ck-focus-outer-shadow), 0 0; } .ck.ck-dropdown .ck-button.ck-dropdown__button { width: 100%; } .ck.ck-dropdown .ck-dropdown__panel { z-index: var(--ck-z-panel); max-width: var(--ck-dropdown-max-width); display: none; 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 { 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: 0; } .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_nw, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sw { right: 0; } .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_s, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_n { 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 { 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 { left: 25%; transform: translateX(-25%); } .ck.ck-dropdown__panel { border-radius: var(--ck-rounded-corners-radius); box-shadow: var(--ck-drop-shadow), 0 0; background: var(--ck-color-dropdown-panel-background); border: 1px solid var(--ck-color-dropdown-panel-border); min-width: 100%; bottom: 0; } .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; } .ck.ck-dropdown__panel:focus { outline: none; } .ck.ck-toolbar .ck-dropdown__panel { z-index: calc(var(--ck-z-panel) + 1); } :root { --ck-color-split-button-hover-background: #ebebeb; --ck-color-split-button-hover-border: #b3b3b3; } .ck.ck-splitbutton .ck-splitbutton__action:focus { z-index: calc(var(--ck-z-default) + 1); } [dir="ltr"] :is(.ck.ck-splitbutton:hover > .ck-splitbutton__action, .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__action) { border-top-right-radius: unset; border-bottom-right-radius: unset; } [dir="rtl"] :is(.ck.ck-splitbutton:hover > .ck-splitbutton__action, .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__action) { border-top-left-radius: unset; border-bottom-left-radius: unset; } .ck.ck-splitbutton > .ck-splitbutton__arrow { min-width: unset; } [dir="ltr"] :is(.ck.ck-splitbutton > .ck-splitbutton__arrow) { border-top-left-radius: unset; border-bottom-left-radius: unset; } [dir="rtl"] :is(.ck.ck-splitbutton > .ck-splitbutton__arrow) { border-top-right-radius: unset; border-bottom-right-radius: unset; } .ck.ck-splitbutton > .ck-splitbutton__arrow svg { width: var(--ck-dropdown-arrow-size); } .ck.ck-splitbutton > .ck-splitbutton__arrow:not(:focus) { border-top-width: 0; border-bottom-width: 0; } .ck.ck-splitbutton.ck-splitbutton_open { border-radius: var(--ck-rounded-corners-radius); } .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__action { border-bottom-left-radius: 0; } .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__arrow { border-bottom-right-radius: 0; } :is(.ck.ck-splitbutton.ck-splitbutton_open, .ck.ck-splitbutton:hover) > .ck-button:not(.ck-on):not(.ck-disabled):not(:hover) { background: var(--ck-color-split-button-hover-background); } :is(.ck.ck-splitbutton.ck-splitbutton_open, .ck.ck-splitbutton:hover) > .ck-splitbutton__arrow:not(.ck-disabled):after { content: ""; background-color: var(--ck-color-split-button-hover-border); width: 1px; height: 100%; position: absolute; } :is(.ck.ck-splitbutton.ck-splitbutton_open, .ck.ck-splitbutton:hover) > .ck-splitbutton__arrow:focus:after { --ck-color-split-button-hover-border: var(--ck-color-focus-border); } [dir="ltr"] :is(.ck.ck-splitbutton.ck-splitbutton_open, .ck.ck-splitbutton:hover) > .ck-splitbutton__arrow:not(.ck-disabled):after { left: -1px; } [dir="rtl"] :is(.ck.ck-splitbutton.ck-splitbutton_open, .ck.ck-splitbutton:hover) > .ck-splitbutton__arrow:not(.ck-disabled):after { right: -1px; } .ck.ck-splitbutton { font-size: inherit; } .ck.ck-toolbar-dropdown .ck-toolbar { border: 0; } :root { --ck-toolbar-dropdown-max-width: 60vw; } .ck.ck-toolbar-dropdown > .ck-dropdown__panel { 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); } .ck.ck-dropdown > .ck-dropdown__panel > .ck-list { border-radius: var(--ck-rounded-corners-radius); border-top-left-radius: 0; } .ck.ck-dropdown > .ck-dropdown__panel > .ck-list .ck-list__item:first-child > .ck-button { border-radius: var(--ck-rounded-corners-radius); border-top-left-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .ck.ck-dropdown > .ck-dropdown__panel > .ck-list .ck-list__item:last-child > .ck-button { border-radius: var(--ck-rounded-corners-radius); border-top-left-radius: 0; border-top-right-radius: 0; } .ck.ck-dropdown-menu-list__nested-menu { display: block; } :root { --ck-dropdown-menu-menu-item-min-width: 18em; } .ck.ck-dropdown-menu-list__nested-menu__item { min-width: var(--ck-dropdown-menu-menu-item-min-width); } .ck-button.ck-dropdown-menu-list__nested-menu__item__button { border-radius: 0; } .ck-button.ck-dropdown-menu-list__nested-menu__item__button > .ck-spinner-container, .ck-button.ck-dropdown-menu-list__nested-menu__item__button > .ck-spinner-container .ck-spinner { --ck-toolbar-spinner-size: 20px; } .ck-button.ck-dropdown-menu-list__nested-menu__item__button > .ck-spinner-container { margin-left: calc(-1 * var(--ck-spacing-small)); margin-right: var(--ck-spacing-small); } .ck-button.ck-dropdown-menu-list__nested-menu__item__button:focus { box-shadow: none; border-color: #0000; } .ck-button.ck-dropdown-menu-list__nested-menu__item__button:focus:not(.ck-on) { background: var(--ck-color-button-default-hover-background); } .ck.ck-button.ck-dropdown-menu-list__nested-menu__button { width: 100%; padding: var(--ck-spacing-tiny) calc(2 * var(--ck-spacing-standard)); border-radius: 0; } .ck.ck-button.ck-dropdown-menu-list__nested-menu__button:focus { box-shadow: none; border-color: #0000; } .ck.ck-button.ck-dropdown-menu-list__nested-menu__button:focus:not(.ck-on) { background: var(--ck-color-button-default-hover-background); } .ck.ck-button.ck-dropdown-menu-list__nested-menu__button > .ck-button__label { text-overflow: ellipsis; flex-grow: 1; overflow: hidden; } .ck.ck-button.ck-dropdown-menu-list__nested-menu__button.ck-disabled > .ck-button__label { opacity: var(--ck-disabled-opacity); } .ck.ck-button.ck-dropdown-menu-list__nested-menu__button.ck-icon-spacing:not(:has(.ck-button__icon)) > .ck-button__label { margin-left: calc(var(--ck-icon-size) - var(--ck-spacing-small)); } .ck.ck-button.ck-dropdown-menu-list__nested-menu__button > .ck-dropdown-menu-list__nested-menu__button__arrow { width: var(--ck-dropdown-arrow-size); pointer-events: none; z-index: var(--ck-z-default); } [dir="ltr"] :is(.ck.ck-button.ck-dropdown-menu-list__nested-menu__button > .ck-dropdown-menu-list__nested-menu__button__arrow) { right: var(--ck-spacing-standard); margin-left: var(--ck-spacing-standard); margin-right: calc(-1 * var(--ck-spacing-small)); transform: rotate(-90deg); } [dir="rtl"] :is(.ck.ck-button.ck-dropdown-menu-list__nested-menu__button > .ck-dropdown-menu-list__nested-menu__button__arrow) { left: var(--ck-spacing-standard); margin-right: var(--ck-spacing-small); margin-left: calc(-1 * var(--ck-spacing-small)); transform: rotate(90deg); } .ck.ck-button.ck-dropdown-menu-list__nested-menu__button.ck-disabled > .ck-dropdown-menu-list__nested-menu__button__arrow { opacity: var(--ck-disabled-opacity); } [dir="ltr"] .ck.ck-button.ck-dropdown-menu-list__nested-menu__button:not(.ck-button_with-text) { padding-left: var(--ck-spacing-small); } [dir="rtl"] .ck.ck-button.ck-dropdown-menu-list__nested-menu__button:not(.ck-button_with-text) { padding-right: var(--ck-spacing-small); } :root { --ck-dropdown-menu-menu-panel-max-width: 75vw; } .ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__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); height: fit-content; max-width: var(--ck-dropdown-menu-menu-panel-max-width); max-height: 314px; position: absolute; bottom: 0; overflow-y: auto; } .ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel:after, .ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel:before { display: none; } .ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel.ck-balloon-panel_es, .ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel.ck-balloon-panel_se { border-top-left-radius: 0; } .ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel.ck-balloon-panel_ws, .ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel.ck-balloon-panel_sw { border-top-right-radius: 0; } .ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel.ck-balloon-panel_en, .ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel.ck-balloon-panel_ne { border-bottom-left-radius: 0; } .ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel.ck-balloon-panel_wn, .ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel.ck-balloon-panel_nw { border-bottom-right-radius: 0; } .ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel:focus { outline: none; } .ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel { z-index: calc(var(--ck-z-panel) + 1); } :root { --ck-color-editable-blur-selection: #d9d9d9; } .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content { border-radius: var(--ck-rounded-corners-radius); border: 1px solid var(--ck-color-base-border); border-bottom-width: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content.ck-sticky-panel__content_sticky { border-bottom-width: 1px; } .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content .ck-menu-bar { border: 0; border-bottom: 1px solid var(--ck-color-base-border); } .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content .ck-toolbar { border: 0; } .ck.ck-editor__editable:not(.ck-editor__nested-editable) { border-radius: var(--ck-rounded-corners-radius); } .ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused { border: var(--ck-focus-ring); box-shadow: var(--ck-inner-shadow), 0 0; outline: none; } .ck.ck-editor__