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,377 lines (1,330 loc) • 280 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 */ :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%); --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); --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); --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:hsl(0, 0%, 95%); --ck-color-input-disabled-border:var(--ck-color-base-border); --ck-color-input-disabled-text:hsl(0, 0%, 46%); --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:hsl(0, 0%, 44%); --ck-color-upload-bar-background:hsl(209, 92%, 70%); --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); --ck-color-highlight-background:hsl(60, 100%, 50%); --ck-color-light-red:hsl(0, 100%, 90%); } :root{ --ck-disabled-opacity:.5; } :root{ --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); } :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; } :root{ --ck-ui-component-min-height:2.3em; } .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; margin:0; padding:0; border:0; background:transparent; text-decoration:none; vertical-align:middle; transition:none; word-wrap:break-word; } .ck.ck-reset_all, .ck-reset_all *:not(.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 *){ 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 *){ padding:10px; border:2px groove hsl(255, 7%, 88%); } .ck-reset_all button:not(.ck-reset_all-excluded *)::-moz-focus-inner{ padding:0; border:0 } .ck[dir="rtl"], .ck[dir="rtl"] .ck{ text-align:right; } :root{ --ck-border-radius:2px; } :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); } :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); } .ck.ck-autocomplete > .ck-search__results{ border-radius:0; max-height:200px; overflow-y:auto; background:var(--ck-color-base-background); border:1px solid var(--ck-color-dropdown-panel-border); min-width:auto; } .ck-rounded-corners .ck.ck-autocomplete > .ck-search__results, .ck.ck-autocomplete > .ck-search__results.ck-rounded-corners{ border-radius:var(--ck-border-radius); } .ck.ck-autocomplete > .ck-search__results{ box-shadow:var(--ck-drop-shadow), 0 0; } .ck.ck-autocomplete > .ck-search__results.ck-search__results_n{ border-bottom-left-radius:0; border-bottom-right-radius:0; margin-bottom:-1px; } .ck.ck-autocomplete > .ck-search__results.ck-search__results_s{ border-top-left-radius:0; border-top-right-radius:0; margin-top:-1px; } .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; min-width:var(--ck-ui-component-min-height); min-height:var(--ck-ui-component-min-height); line-height:1; font-size:inherit; border:1px solid transparent; transition:box-shadow .2s ease-in-out, border .2s ease-in-out; -webkit-appearance:none; } .ck.ck-button:not(.ck-disabled):hover, a.ck.ck-button:not(.ck-disabled):hover{ background:var(--ck-color-button-default-hover-background); } .ck.ck-button:not(.ck-disabled):active, a.ck.ck-button:not(.ck-disabled):active{ background:var(--ck-color-button-default-active-background); } .ck.ck-button.ck-disabled, a.ck.ck-button.ck-disabled{ background:var(--ck-color-button-default-disabled-background); } .ck-rounded-corners .ck.ck-button, .ck-rounded-corners a.ck.ck-button, .ck.ck-button.ck-rounded-corners, a.ck.ck-button.ck-rounded-corners{ border-radius:var(--ck-border-radius); } @media (prefers-reduced-motion: reduce){ .ck.ck-button, a.ck.ck-button{ transition:none; } } .ck.ck-button:active, a.ck.ck-button:active, .ck.ck-button:focus, a.ck.ck-button:focus{ outline:none; border:var(--ck-focus-ring); box-shadow:var(--ck-focus-outer-shadow), 0 0; } .ck.ck-button .ck-button__icon use, a.ck.ck-button .ck-button__icon use, .ck.ck-button .ck-button__icon use *, a.ck.ck-button .ck-button__icon use *{ color:inherit; } .ck.ck-button .ck-button__label, a.ck.ck-button .ck-button__label{ font-size:inherit; font-weight:inherit; color:inherit; cursor:inherit; vertical-align:middle; } [dir="ltr"] .ck.ck-button .ck-button__label, [dir="ltr"] a.ck.ck-button .ck-button__label{ text-align:left; } [dir="rtl"] .ck.ck-button .ck-button__label, [dir="rtl"] a.ck.ck-button .ck-button__label{ text-align:right; } .ck.ck-button .ck-button__keystroke, a.ck.ck-button .ck-button__keystroke{ color:inherit; opacity:.5; } [dir="ltr"] .ck.ck-button .ck-button__keystroke, [dir="ltr"] a.ck.ck-button .ck-button__keystroke{ margin-left:var(--ck-spacing-large); } [dir="rtl"] .ck.ck-button .ck-button__keystroke, [dir="rtl"] a.ck.ck-button .ck-button__keystroke{ margin-right:var(--ck-spacing-large); } .ck.ck-button.ck-disabled:active, a.ck.ck-button.ck-disabled:active, .ck.ck-button.ck-disabled:focus, a.ck.ck-button.ck-disabled:focus{ box-shadow:var(--ck-focus-disabled-outer-shadow), 0 0; } .ck.ck-button.ck-disabled .ck-button__icon, a.ck.ck-button.ck-disabled .ck-button__icon{ opacity:var(--ck-disabled-opacity); } .ck.ck-button.ck-disabled .ck-button__label, a.ck.ck-button.ck-disabled .ck-button__label{ opacity:var(--ck-disabled-opacity); } .ck.ck-button.ck-disabled .ck-button__keystroke, a.ck.ck-button.ck-disabled .ck-button__keystroke{ opacity:.3; } .ck.ck-button.ck-button_with-text, a.ck.ck-button.ck-button_with-text{ padding:var(--ck-spacing-tiny) var(--ck-spacing-standard); } [dir="ltr"] .ck.ck-button.ck-button_with-text .ck-button__icon, [dir="ltr"] a.ck.ck-button.ck-button_with-text .ck-button__icon{ margin-right:var(--ck-spacing-medium); } [dir="rtl"] .ck.ck-button.ck-button_with-text .ck-button__icon, [dir="rtl"] a.ck.ck-button.ck-button_with-text .ck-button__icon{ margin-left:var(--ck-spacing-medium); } .ck.ck-button.ck-button_with-keystroke .ck-button__label, a.ck.ck-button.ck-button_with-keystroke .ck-button__label{ flex-grow:1; } .ck.ck-button.ck-on, a.ck.ck-button.ck-on{ background:var(--ck-color-button-on-background); color:var(--ck-color-button-on-color); } .ck.ck-button.ck-on:not(.ck-disabled):hover, a.ck.ck-button.ck-on:not(.ck-disabled):hover{ background:var(--ck-color-button-on-hover-background); } .ck.ck-button.ck-on:not(.ck-disabled):active, a.ck.ck-button.ck-on:not(.ck-disabled):active{ background:var(--ck-color-button-on-active-background); } .ck.ck-button.ck-on.ck-disabled, a.ck.ck-button.ck-on.ck-disabled{ background:var(--ck-color-button-on-disabled-background); } .ck.ck-button.ck-button-save, a.ck.ck-button.ck-button-save{ color:var(--ck-color-button-save); } .ck.ck-button.ck-button-cancel, a.ck.ck-button.ck-button-cancel{ color:var(--ck-color-button-cancel); } .ck.ck-button-action, a.ck.ck-button-action{ background:var(--ck-color-button-action-background); color:var(--ck-color-button-action-text); } .ck.ck-button-action:not(.ck-disabled):hover, a.ck.ck-button-action:not(.ck-disabled):hover{ background:var(--ck-color-button-action-hover-background); } .ck.ck-button-action:not(.ck-disabled):active, a.ck.ck-button-action:not(.ck-disabled):active{ background:var(--ck-color-button-action-active-background); } .ck.ck-button-action.ck-disabled, a.ck.ck-button-action.ck-disabled{ background:var(--ck-color-button-action-disabled-background); } .ck.ck-button-bold, a.ck.ck-button-bold{ font-weight:bold; } :root{ --ck-switch-button-toggle-width:2.6153846154em; --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 ); --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:transparent; } [dir="ltr"] .ck.ck-button.ck-switchbutton .ck-button__label{ margin-right:calc(2 * var(--ck-spacing-large)); } [dir="rtl"] .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:0; 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-rounded-corners .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"] .ck.ck-button.ck-switchbutton .ck-button__toggle{ margin-left:auto; } [dir="rtl"] .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:0; 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 300ms ease; } .ck-rounded-corners .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)); } @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: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); } .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); } .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"] .ck.ck-button.ck-switchbutton.ck-on .ck-button__toggle .ck-button__toggle__inner{ transform:translateX( var(--ck-switch-button-translation)); } [dir="rtl"] .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); } .ck.ck-button.ck-list-item-button:hover:not(.ck-disabled):not(.ck-disabled), .ck.ck-button.ck-list-item-button.ck-button.ck-on:hover:not(.ck-disabled), .ck.ck-button.ck-list-item-button.ck-on:not(.ck-list-item-button_toggleable):not(.ck-disabled), .ck.ck-button.ck-list-item-button.ck-on:hover:not(.ck-disabled){ color:var(--ck-color-text); } :root{ --ck-collapsible-arrow-size:calc(0.5 * var(--ck-icon-size)); } .ck.ck-collapsible > .ck.ck-button{ width:100%; font-weight:bold; 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: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); } :root{ --ck-color-grid-tile-size:24px; --ck-color-color-grid-check-icon:hsl(212, 81%, 46%); } .ck.ck-color-grid{ grid-gap:5px; padding:8px; } .ck.ck-color-grid__tile{ transition:.2s ease box-shadow; } @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); padding:0; border: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{ display:none; color:var(--ck-color-color-grid-check-icon); } .ck.ck-color-grid__tile.ck-on .ck.ck-icon{ display:block; } .ck.ck-color-grid__label{ padding:0 var(--ck-spacing-standard); } .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{ width:100%; } .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-left-radius:0; border-bottom-right-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"] .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"] .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{ height:100px; min-width:180px; } .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{ padding:0 8px 8px; } :root{ --ck-dialog-overlay-background-color:hsla( 0, 0%, 0%, .5); --ck-dialog-drop-shadow:0px 0px 6px 2px hsl(0deg 0% 0% / 15%); --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{ animation:ck-dialog-fade-in .3s; background:var(--ck-dialog-overlay-background-color); z-index:var(--ck-z-dialog); } .ck.ck-dialog{ border-radius: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; } .ck-rounded-corners .ck.ck-dialog, .ck.ck-dialog.ck-rounded-corners{ border-radius:var(--ck-border-radius); } .ck.ck-dialog{ box-shadow:var(--ck-drop-shadow), 0 0; } .ck.ck-dialog .ck.ck-form__header{ border-bottom:1px solid var(--ck-color-dialog-form-header-border); } .ck-dialog-scroll-locked{ overflow:hidden; } @keyframes ck-dialog-fade-in{ 0%{ background:hsla( 0, 0%, 0%, 0); } 100%{ background:var(--ck-dialog-overlay-background-color); } } .ck.ck-dialog .ck.ck-dialog__actions{ padding:var(--ck-spacing-large); } .ck.ck-dialog .ck.ck-dialog__actions > * + *{ margin-left:var(--ck-spacing-large); } :root{ --ck-dropdown-arrow-size:calc(0.5 * var(--ck-icon-size)); } .ck.ck-dropdown{ 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); 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"] .ck.ck-dropdown .ck-button.ck-dropdown__button:not(.ck-button_with-text){ padding-left:var(--ck-spacing-small); } [dir="rtl"] .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{ width:7em; overflow:hidden; text-overflow:ellipsis; } .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-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; } .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; background:var(--ck-color-dropdown-panel-background); border:1px solid var(--ck-color-dropdown-panel-border); bottom:0; min-width:100%; } .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; } .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-dropdown > .ck-dropdown__panel > .ck-list{ border-radius:0; } .ck-rounded-corners .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; } .ck.ck-dropdown > .ck-dropdown__panel > .ck-list .ck-list__item:first-child > .ck-button{ border-radius:0; } .ck-rounded-corners .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 .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; } :root{ --ck-color-split-button-hover-background:hsl(0, 0%, 92%); --ck-color-split-button-hover-border:hsl(0, 0%, 70%); } [dir="ltr"] .ck.ck-splitbutton:hover > .ck-splitbutton__action, [dir="ltr"] .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__action{ border-top-right-radius:unset; border-bottom-right-radius:unset; } [dir="rtl"] .ck.ck-splitbutton:hover > .ck-splitbutton__action, [dir="rtl"] .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"] .ck.ck-splitbutton > .ck-splitbutton__arrow{ border-top-left-radius:unset; border-bottom-left-radius:unset; } [dir="rtl"] .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:0px; border-bottom-width:0px; } .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; } .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); } .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); } .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; } .ck.ck-toolbar-dropdown .ck-toolbar{ border:0; } .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{ border-color:transparent; box-shadow:none; } .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{ flex-grow:1; overflow:hidden; text-overflow:ellipsis; } .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); } [dir="ltr"] .ck.ck-button.ck-dropdown-menu-list__nested-menu__button > .ck-dropdown-menu-list__nested-menu__button__arrow{ transform:rotate(-90deg); margin-right:calc(-1 * var(--ck-spacing-small)); } [dir="rtl"] .ck.ck-button.ck-dropdown-menu-list__nested-menu__button > .ck-dropdown-menu-list__nested-menu__button__arrow{ transform:rotate(90deg); margin-left:calc(-1 * var(--ck-spacing-small)); } .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="ltr"] .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); } [dir="rtl"] .ck.ck-button.ck-dropdown-menu-list__nested-menu__button:not(.ck-button_with-text){ padding-right:var(--ck-spacing-small); } [dir="rtl"] .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); } :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{ border-color:transparent; box-shadow:none; } .ck-button.ck-dropdown-menu-list__nested-menu__item__button:focus:not(.ck-on){ background:var(--ck-color-button-default-hover-background); } :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); bottom:0; height:fit-content; max-width:var(--ck-dropdown-menu-menu-panel-max-width); } .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; } :root{ --ck-accessibility-help-dialog-max-width:600px; --ck-accessibility-help-dialog-max-height:400px; --ck-accessibility-help-dialog-border-color:hsl(220, 6%, 81%); --ck-accessibility-help-dialog-code-background-color:hsl(0deg 0% 92.94%); --ck-accessibility-help-dialog-kbd-shadow-color:hsl(0deg 0% 61%); } .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); overflow:auto; user-select:text; border:1px solid transparent; } .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content:focus{ outline:none; border:var(--ck-focus-ring); box-shadow:var(--ck-focus-outer-shadow), 0 0; } .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-weight:bold; font-size:1.2em; } .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content h4{ font-weight:bold; font-size:1em; } .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{ display:grid; grid-template-columns:2fr 1fr; border-top:1px solid var(--ck-accessibility-help-dialog-border-color); border-bottom:none; } .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{ grid-column-start:2; text-align:right; } .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content kbd, .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content code{ display:inline-block; background:var(--ck-accessibility-help-dialog-code-background-color); padding:.4em; vertical-align:middle; line-height:1; border-radius:2px; text-align:center; font-size:.9em; } .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; } :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){ 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; } .ck.ck-editor__editable_inline > *:first-child{ margin-top:var(--ck-spacing-large); } .ck.ck-editor__editable_inline > *:last-child{ margin-bottom:var(--ck-spacing-large); } .ck.ck-editor__editable_inline.ck-blurred ::selection{ background:var(--ck-color-editable-blur-selection); } .ck.ck-balloon-panel.ck-toolbar-container[class*="arrow_n"]::after{ border-bottom-color:var(--ck-color-panel-background); } .ck.ck-balloon-panel.ck-toolbar-container[class*="arrow_s"]::after{ border-top-color:var(--ck-color-panel-background); } :root{ --ck-form-header-height:44px; } .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); } [dir="ltr"] .ck.ck-form__header > .ck-icon{ margin-right:var(--ck-spacing-medium); } [dir="rtl"] .ck.ck-form__header > .ck-icon{ margin-left:var(--ck-spacing-medium); } .ck.ck-form__header .ck-form__header__label{ --ck-font-size-base:15px; font-weight:bold; } .ck.ck-form__header:has(.ck-button-back.ck-hidden){ padding-inline:var(--ck-spacing-large) var(--ck-spacing-large); } .ck.ck-form__header:has(.ck-button-back:not(.ck-hidden)){ padding-inline:var(--ck-spacing-small) var(--ck-spacing-small); } .ck.ck-form__header > .ck-button-back{ margin-inline-end:var(--ck-spacing-small); } :root{ --ck-icon-size:calc(var(--ck-line-height-base) * var(--ck-font-size-normal)); --ck-icon-font-size:.8333350694em; } .ck.ck-icon{ width:var(--ck-icon-size); height:var(--ck-icon-size); font-size:var(--ck-icon-font-size); cursor:inherit; } .ck.ck-icon *{ cursor:inherit; } .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]){ fill:currentColor; } :root{ --ck-input-width:18em; --ck-input-text-width:var(--ck-input-width); } .ck.ck-input{ border-radius:0; 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); min-height:var(--ck-ui-component-min-height); transition:box-shadow .1s ease-in-out, border .1s ease-in-out; } .ck-rounded-corners .ck.ck-input, .ck.ck-input.ck-rounded-corners{ border-radius:var(--ck-border-radius); } @media (prefers-reduced-motion: reduce){ .ck.ck-input{ transition:none; } } .ck.ck-input:focus{ 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{ 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; } @media (prefers-reduced-motion: reduce){ .ck.ck-input.ck-error{ animation:none; } } .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); } } .ck.ck-label{ font-weight:bold; } :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; pointer-events:none; background:var(--ck-color-labeled-field-label-background); padding:0 calc(.5 * var(--ck-font-size-tiny)); line-height:initial; font-weight:normal; 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); } [dir="ltr"] .ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label{ left:0px; transform-origin:0 0; transform:translate(var(--ck-spacing-medium), -6px) scale(.75); } [dir="rtl"] .ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label{ right:0px; transform-origin:100% 0; transform:translate(calc(-1 * var(--ck-spacing-medium)), -6px) scale(.75); } @media (prefers-reduced-motion: reduce){ .ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label{ transition:none; } } .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); 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); } .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); } .ck.ck-labeled-field-view.ck-disabled.ck-labeled-field-view_empty:not(.ck-labeled-field-view_placeholder) > .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):not(.ck-error) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label{ max-width:calc(var(--ck-labeled-field-empty-unfocused-max-width)); background:transparent; padding:0; } [dir="ltr"] .ck.ck-labeled-field-view.ck-disabled.ck-labeled-field-view_empty:not(.ck-labeled-field-view_placeholder) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label, [dir="ltr"] .ck.ck-labeled-field-view.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused):not(.ck-labeled-field-view_placeholder):not(.ck-error) > .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"] .ck.ck-labeled-field-view.ck-disabled.ck-labeled-field-view_empty:not(.ck-labeled-field-view_placeholder) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label, [dir="rtl"] .ck.ck-labeled-field-view.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused):not(.ck-labeled-field-view_placeholder):not(.ck-error) > .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.ck-labeled-field-view__input-wrapper > .ck-dropdown > .ck.ck-button{ background:transparent; } .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; } .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)); } .ck.ck-labeled-field-view.ck-labeled-field-view_full-width{ flex-grow:1; } .ck.ck-labeled-input .ck-labeled-input__status{ font-size:var(--ck-font-size-small); margin-top:var(--ck-spacing-small); white-space:normal; } .ck.ck-labeled-input .ck-labeled-input__status_error{ color:var(--ck-color-base-error); } .ck.ck-list{ border-radius:0; list-style-type:none; background:var(--ck-color-list-background); padding:var(--ck-spacing-small) 0; } .ck-rounded-corners .ck.ck-list, .ck.ck-list.ck-rounded-corners{ border-radius:var(--ck-border-radius); } .ck.ck-list__item{ cursor:default; min-width:15em; } .ck.ck-list__item > .ck-button:not(.ck-list-item-button){ padding:var(--ck-spacing-tiny) calc(2 * var(--ck-spacing-standard)); min-height:unset; width:100%; border-radius:0; } [dir="ltr"] .ck.ck-list__item > .ck-button:not(.ck-list-item-button){ text-align:left; } [dir="rtl"] .ck.ck-list__item > .ck-button:not(.ck-list-item-button){ text-align:right; } .ck.ck-list__item > .ck-button:not(.ck-list-item-button) .ck-button__label{ line-height:calc(var(--ck-line-height-base) * var(--ck-font-size-base)); } .ck.ck-list__item > .ck-button:not(.ck-list-item-button):active{ box-shadow:none; } .ck.ck-list__item > .ck-button.ck-on:not(.ck-list-item-button){ background:var(--ck-color-list-button-on-background); color:var(--ck-color-list-button-on-text); } .ck.ck-list__item > .ck-button.ck-on:not(.ck-list-item-button):active{ box-shadow:none; } .ck.ck-list__item > .ck-button.ck-on:not(.ck-list-item-button):hover:not(.ck-disabled){ background:var(--ck-color-list-button-on-background-focus); } .ck.ck-list__item > .ck-button.ck-on:not(.ck-list-item-button):focus:not(.ck-disabled){ border-color:var(--ck-color-base-background); } .ck.ck-list__item > .ck-button:not(.ck-list-item-button):hover:not(.ck-disabled){ background:var(--ck-color-list-button-hover-background); } .ck.ck-list__item > .ck-button.ck-switchbutton.ck-on{ background:var(--ck-color-list-background); color:inherit; } .ck.ck-list__item > .ck-button.ck-switchbutton.ck-on:hover:not(.ck-disabled){ background:var(--ck-color-list-button-hover-background); color:inherit; } .ck-list .ck-list__group{ padding-top:var(--ck-spacing-medium); } .ck-list .ck-list__group:first-child{ padding-top:0; } *:not(.ck-hidden) ~ .ck-list .ck-list__group{ border-top:1px solid var(--ck-color-base-border); } .ck-list .ck-list__group > .ck-label{ font-size:11px; font-weight:bold; padding:var(--ck-spacing-medium) var(--ck-spacing-large) 0; } .ck.ck-list__separator{ height:1px; width:100%; background:var(--ck-color-base-border); margin:var(--ck-spacing-small) 0; } .ck.ck-menu-bar{ display:flex; flex-wrap:wrap; justify-content:flex-start; background:var(--ck-color-base-background); padding:var(--ck-spacing-small); gap:var(--ck-spacing-small); border:1px solid var(--ck-color-toolbar-border); width:100%; } .ck.ck-menu-bar__menu{ font-size:inherit; } .ck.ck-menu-bar__menu.ck-menu-bar__menu_top-level{ max-width:100%; } .ck.ck-menu-bar__menu > .ck-menu-bar__menu__button{ width:100%; } .ck.ck-menu-bar__menu > .ck-menu-bar__menu__button > .ck-button__label{ flex