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,307 lines (1,231 loc) • 413 kB
CSS
/**
* @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/* Reset */
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
:root {
--ck-color-base-foreground: hsl(0, 0%, 98%);
--ck-color-base-background: hsl(0, 0%, 100%);
--ck-color-base-border: hsl(220, 6%, 81%);
--ck-color-base-action: hsl(104, 50.2%, 42.5%);
--ck-color-base-focus: hsl(209, 92%, 70%);
--ck-color-base-text: hsl(0, 0%, 20%);
--ck-color-base-active: hsl(218.1, 100%, 58%);
--ck-color-base-active-focus: hsl(218.2, 100%, 52.5%);
--ck-color-base-error: hsl(15, 100%, 43%);
/* -- Generic colors ------------------------------------------------------------------------ */
--ck-color-focus-border-coordinates: 218, 81.8%, 56.9%;
--ck-color-focus-border: hsl(var(--ck-color-focus-border-coordinates));
--ck-color-focus-outer-shadow: hsl(212.4, 89.3%, 89%);
--ck-color-focus-disabled-shadow: hsla(209, 90%, 72%,.3);
--ck-color-focus-error-shadow: hsla(9,100%,56%,.3);
--ck-color-text: var(--ck-color-base-text);
--ck-color-shadow-drop: hsla(0, 0%, 0%, 0.15);
--ck-color-shadow-drop-active: hsla(0, 0%, 0%, 0.2);
--ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1);
/* -- Buttons ------------------------------------------------------------------------------- */
--ck-color-button-default-background: transparent;
--ck-color-button-default-hover-background: hsl(0, 0%, 94.1%);
--ck-color-button-default-active-background: hsl(0, 0%, 94.1%);
--ck-color-button-default-disabled-background: transparent;
--ck-color-button-on-background: hsl(212, 100%, 97.1%);
--ck-color-button-on-hover-background: hsl(211.7, 100%, 92.9%);
--ck-color-button-on-active-background: hsl(211.7, 100%, 92.9%);
--ck-color-button-on-disabled-background: hsl(211, 15%, 95%);
--ck-color-button-on-color: hsl(218.1, 100%, 58%);
--ck-color-button-action-background: var(--ck-color-base-action);
--ck-color-button-action-hover-background: hsl(104, 53.2%, 40.2%);
--ck-color-button-action-active-background: hsl(104, 53.2%, 40.2%);
--ck-color-button-action-disabled-background: hsl(104, 44%, 58%);
--ck-color-button-action-text: var(--ck-color-base-background);
--ck-color-button-save: hsl(120, 100%, 27%);
--ck-color-button-cancel: hsl(15, 100%, 43%);
--ck-color-switch-button-off-background: hsl(0, 0%, 57.6%);
--ck-color-switch-button-off-hover-background: hsl(0, 0%, 49%);
--ck-color-switch-button-on-background: var(--ck-color-button-action-background);
--ck-color-switch-button-on-hover-background: hsl(104, 53.2%, 40.2%);
--ck-color-switch-button-inner-background: var(--ck-color-base-background);
--ck-color-switch-button-inner-shadow: hsla(0, 0%, 0%, 0.1);
/* -- Dropdown ------------------------------------------------------------------------------ */
--ck-color-dropdown-panel-background: var(--ck-color-base-background);
--ck-color-dropdown-panel-border: var(--ck-color-base-border);
/* -- Dialog -------------------------------------------------------------------------------- */
--ck-color-dialog-background: var(--ck-custom-background);
--ck-color-dialog-form-header-border: var(--ck-custom-border);
/* -- Input --------------------------------------------------------------------------------- */
--ck-color-input-background: var(--ck-color-base-background);
--ck-color-input-border: var(--ck-color-base-border);
--ck-color-input-error-border: var(--ck-color-base-error);
--ck-color-input-text: var(--ck-color-base-text);
--ck-color-input-disabled-background: hsl(0, 0%, 95%);
--ck-color-input-disabled-border: var(--ck-color-base-border);
--ck-color-input-disabled-text: hsl(0, 0%, 46%);
/* -- List ---------------------------------------------------------------------------------- */
--ck-color-list-background: var(--ck-color-base-background);
--ck-color-list-button-hover-background: var(--ck-color-button-default-hover-background);
--ck-color-list-button-on-background: var(--ck-color-button-on-color);
--ck-color-list-button-on-background-focus: var(--ck-color-button-on-color);
--ck-color-list-button-on-text: var(--ck-color-base-background);
/* -- Panel --------------------------------------------------------------------------------- */
--ck-color-panel-background: var(--ck-color-base-background);
--ck-color-panel-border: var(--ck-color-base-border);
/* -- Toolbar ------------------------------------------------------------------------------- */
--ck-color-toolbar-background: var(--ck-color-base-background);
--ck-color-toolbar-border: var(--ck-color-base-border);
/* -- Tooltip ------------------------------------------------------------------------------- */
--ck-color-tooltip-background: var(--ck-color-base-text);
--ck-color-tooltip-text: var(--ck-color-base-background);
/* -- Engine -------------------------------------------------------------------------------- */
--ck-color-engine-placeholder-text: hsl(0, 0%, 44%);
/* -- Upload -------------------------------------------------------------------------------- */
--ck-color-upload-bar-background: hsl(209, 92%, 70%);
/* -- Link -------------------------------------------------------------------------------- */
--ck-color-link-default: hsl(240, 100%, 47%);
--ck-color-link-selected-background: hsla(201, 100%, 56%, 0.1);
--ck-color-link-fake-selection: hsla(201, 100%, 56%, 0.3);
/* -- Search result highlight ---------------------------------------------------------------- */
--ck-color-highlight-background: hsl(60, 100%, 50%);
/* -- Generic colors ------------------------------------------------------------------------- */
--ck-color-light-red: hsl(0, 100%, 90%);
}
/*
* 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 {
/**
* An opacity value of disabled UI item.
*/
--ck-disabled-opacity: .5;
}
/*
* 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 {
/**
* The geometry of the of focused element's outer shadow.
*/
--ck-focus-outer-shadow-geometry: 0 0 0 3px;
/**
* A visual style of focused element's outer shadow.
*/
--ck-focus-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-outer-shadow);
/**
* A visual style of focused element's outer shadow (when disabled).
*/
--ck-focus-disabled-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-disabled-shadow);
/**
* A visual style of focused element's outer shadow (when has errors).
*/
--ck-focus-error-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-error-shadow);
/**
* A visual style of focused element's border or outline.
*/
--ck-focus-ring: 1px solid var(--ck-color-focus-border);
}
/*
* Copyright (c) 2003-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-font-size-base: 13px;
--ck-line-height-base: 1.84615;
--ck-font-face: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
--ck-font-size-tiny: 0.7em;
--ck-font-size-small: 0.75em;
--ck-font-size-normal: 1em;
--ck-font-size-big: 1.4em;
--ck-font-size-large: 1.8em;
}
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
:root {
/* This is super-important. This is **manually** adjusted so a button without an icon
is never smaller than a button with icon, additionally making sure that text-less buttons
are perfect squares. The value is also shared by other components which should stay "in-line"
with buttons. */
--ck-ui-component-min-height: 2.3em;
}
/**
* Resets an element, ignoring its children.
*/
.ck.ck-reset,
.ck.ck-reset_all,
.ck-reset_all *:not(.ck-reset_all-excluded *) {
box-sizing: border-box;
width: auto;
height: auto;
position: static;
/* Do not include inheritable rules here. */
margin: 0;
padding: 0;
border: 0;
background: transparent;
text-decoration: none;
vertical-align: middle;
transition: none;
/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/105 */
word-wrap: break-word;
}
/**
* Resets an element AND its children.
*/
.ck.ck-reset_all,
.ck-reset_all *:not(.ck-reset_all-excluded *) {
/* These are rule inherited by all children elements. */
border-collapse: collapse;
font: normal normal normal var(--ck-font-size-base)/var(--ck-line-height-base) var(--ck-font-face);
color: var(--ck-color-text);
text-align: left;
white-space: nowrap;
cursor: auto;
float: none;
}
.ck-reset_all .ck-rtl *:not(.ck-reset_all-excluded *) {
text-align: right;
}
.ck-reset_all iframe:not(.ck-reset_all-excluded *) {
/* For IE */
vertical-align: inherit;
}
.ck-reset_all textarea:not(.ck-reset_all-excluded *) {
white-space: pre-wrap;
}
.ck-reset_all textarea:not(.ck-reset_all-excluded *),
.ck-reset_all input[type="text"]:not(.ck-reset_all-excluded *),
.ck-reset_all input[type="password"]:not(.ck-reset_all-excluded *) {
cursor: text;
}
.ck-reset_all textarea[disabled]:not(.ck-reset_all-excluded *),
.ck-reset_all input[type="text"][disabled]:not(.ck-reset_all-excluded *),
.ck-reset_all input[type="password"][disabled]:not(.ck-reset_all-excluded *) {
cursor: default;
}
.ck-reset_all fieldset:not(.ck-reset_all-excluded *) {
padding: 10px;
border: 2px groove hsl(255, 7%, 88%);
}
.ck-reset_all button:not(.ck-reset_all-excluded *)::-moz-focus-inner {
/* See http://stackoverflow.com/questions/5517744/remove-extra-button-spacing-padding-in-firefox */
padding: 0;
border: 0
}
/**
* Default UI rules for RTL languages.
*/
.ck[dir="rtl"],
.ck[dir="rtl"] .ck {
text-align: right;
}
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/**
* Default border-radius value.
*/
:root{
--ck-border-radius: 2px;
}
/*
* 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 {
/**
* A visual style of element's inner shadow (i.e. input).
*/
--ck-inner-shadow: 2px 2px 3px var(--ck-color-shadow-inner) inset;
/**
* A visual style of element's drop shadow (i.e. panel).
*/
--ck-drop-shadow: 0 1px 2px 1px var(--ck-color-shadow-drop);
/**
* A visual style of element's active shadow (i.e. comment or suggestion).
*/
--ck-drop-shadow-active: 0 3px 6px 1px var(--ck-color-shadow-drop-active);
}
/*
* Copyright (c) 2003-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-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);
}
/* Components */
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/**
* Implements rounded corner interface for .ck-rounded-corners class.
*
* @see $ck-border-radius
*/
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/**
* A helper to combine multiple shadows.
*/
/**
* Gives an element a drop shadow so it looks like a floating panel.
*/
.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;
/* Prevent duplicated borders between the input and the results pane. */
margin-bottom: -1px;
}
.ck.ck-autocomplete > .ck-search__results.ck-search__results_s {
border-top-left-radius: 0;
border-top-right-radius: 0;
/* Prevent duplicated borders between the input and the results pane. */
margin-top: -1px;
}
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/**
* A visual style of focused element's border.
*/
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/**
* A helper to combine multiple shadows.
*/
/**
* Gives an element a drop shadow so it looks like a floating panel.
*/
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/**
* A class which indicates that an element holding it is disabled.
*/
/*
* 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
*/
/**
* Implements rounded corner interface for .ck-rounded-corners class.
*
* @see $ck-border-radius
*/
/*
* 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
*/
/**
* Implements a button of given background color.
*
* @param {String} $background - Background color of the button.
* @param {String} $border - Border color of the button.
*/
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
.ck.ck-button,
a.ck.ck-button {
background: var(--ck-color-button-default-background);
border-radius: 0;
white-space: nowrap;
cursor: default;
vertical-align: middle;
padding: var(--ck-spacing-tiny);
text-align: center;
/* A very important piece of styling. Go to variable declaration to learn more. */
min-width: var(--ck-ui-component-min-height);
min-height: var(--ck-ui-component-min-height);
/* Normalize the height of the line. Removing this will break consistent height
among text and text-less buttons (with icons). */
line-height: 1;
/* Enable font size inheritance, which allows fluid UI scaling. */
font-size: inherit;
/* Avoid flickering when the foucs border shows up. */
border: 1px solid transparent;
/* Apply some smooth transition to the box-shadow and border. */
transition: box-shadow .2s ease-in-out, border .2s ease-in-out;
/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/189 */
-webkit-appearance: none;
}
.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);
}
/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/98 */
.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 {
/* Disable native outline. */
outline: none;
border: var(--ck-focus-ring);
box-shadow: var(--ck-focus-outer-shadow), 0 0;
}
/* Allow icon coloring using the text "color" property. */
.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 {
/* Enable font size inheritance, which allows fluid UI scaling. */
font-size: inherit;
font-weight: inherit;
color: inherit;
cursor: inherit;
/* Must be consistent with .ck-icon's vertical align. Otherwise, buttons with and
without labels (but with icons) have different sizes in Chrome */
vertical-align: middle;
}
[dir="ltr"] .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);
}
/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */
.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 {
/* The disabled button should have a slightly less visible shadow when focused. */
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);
}
/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/98 */
.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);
/* stylelint-disable-next-line no-descending-specificity */
}
[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);
}
/* stylelint-disable-next-line no-descending-specificity */
.ck.ck-button.ck-button_with-keystroke .ck-button__label, a.ck.ck-button.ck-button_with-keystroke .ck-button__label {
flex-grow: 1;
}
/* A style of the button which is currently on, e.g. its feature is active. */
.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);
}
/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/98 */
.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);
}
/* A style of the button which handles the primary action. */
.ck.ck-button-action,
a.ck.ck-button-action {
background: var(--ck-color-button-action-background);
color: var(--ck-color-button-action-text);
}
.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);
}
/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/98 */
.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;
}
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/**
* Implements rounded corner interface for .ck-rounded-corners class.
*
* @see $ck-border-radius
*/
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/**
* A class which indicates that an element holding it is disabled.
*/
/*
* 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
*/
/* Note: To avoid rendering issues (aliasing) but to preserve the responsive nature
of the component, floating–point numbers have been used which, for the default font size
(see: --ck-font-size-base), will generate simple integers. */
:root {
/* 34px at 13px font-size */
--ck-switch-button-toggle-width: 2.6153846154em;
/* 14px at 13px font-size */
--ck-switch-button-toggle-inner-size: calc(1.0769230769em + 1px);
--ck-switch-button-translation: calc(
var(--ck-switch-button-toggle-width) -
var(--ck-switch-button-toggle-inner-size) -
2px /* Border */
);
--ck-switch-button-inner-hover-shadow: 0 0 0 5px var(--ck-color-switch-button-inner-shadow);
}
/* Unlike a regular button, the switch button text color and background should never change.
* Changing toggle switch (background, outline) is enough to carry the information about the
* state of the entire component (https://github.com/ckeditor/ckeditor5/issues/12519)
*/
.ck.ck-button.ck-switchbutton, .ck.ck-button.ck-switchbutton:hover, .ck.ck-button.ck-switchbutton:focus, .ck.ck-button.ck-switchbutton:active, .ck.ck-button.ck-switchbutton.ck-on:hover, .ck.ck-button.ck-switchbutton.ck-on:focus, .ck.ck-button.ck-switchbutton.ck-on:active {
color: inherit;
background: transparent;
}
[dir="ltr"] .ck.ck-button.ck-switchbutton .ck-button__label {
/* Separate the label from the switch */
margin-right: calc(2 * var(--ck-spacing-large));
}
[dir="rtl"] .ck.ck-button.ck-switchbutton .ck-button__label {
/* Separate the label from the switch */
margin-left: calc(2 * var(--ck-spacing-large));
}
.ck.ck-button.ck-switchbutton .ck-button__toggle {
border-radius: 0;
/* Apply some smooth transition to the box-shadow and border. */
/* Gently animate the background color of the toggle switch */
transition: background 400ms ease, box-shadow .2s ease-in-out, outline .2s ease-in-out;
border: 1px solid transparent;
width: var(--ck-switch-button-toggle-width);
background: var(--ck-color-switch-button-off-background);
}
.ck-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 {
/* Make sure the toggle is always to the right as far as possible. */
margin-left: auto;
}
[dir="rtl"] .ck.ck-button.ck-switchbutton .ck-button__toggle {
/* Make sure the toggle is always to the left as far as possible. */
margin-right: auto;
}
.ck.ck-button.ck-switchbutton .ck-button__toggle .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);
/* Gently animate the inner part of the toggle switch */
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);
}
/* Overriding default .ck-button:focus styles + an outline around the toogle */
.ck.ck-button.ck-switchbutton:focus {
border-color: transparent;
outline: none;
box-shadow: none;
}
.ck.ck-button.ck-switchbutton:focus .ck-button__toggle {
box-shadow: 0 0 0 1px var(--ck-color-base-background), 0 0 0 5px var(--ck-color-focus-outer-shadow);
outline-offset: 1px;
outline: var(--ck-focus-ring);
}
/* stylelint-disable-next-line no-descending-specificity */
.ck.ck-button.ck-switchbutton.ck-on .ck-button__toggle {
background: var(--ck-color-switch-button-on-background);
}
.ck.ck-button.ck-switchbutton.ck-on .ck-button__toggle:hover {
background: var(--ck-color-switch-button-on-hover-background);
}
/*
* Move the toggle switch to the right. It will be animated.
*/
[dir="ltr"] .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 ) ) );
}
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
.ck.ck-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-on` class and background styling is overridden for `ck-button` in many places.
* This is a workaround to make sure that the background is not overridden and uses similar
* selector specificity as the other overrides.
*/
.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);
}
/*
* 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-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);
}
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/**
* Implements rounded corner interface for .ck-rounded-corners class.
*
* @see $ck-border-radius
*/
/*
* 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-grid-tile-size: 24px;
/* Not using global colors here because these may change but some colors in a pallette
* require special treatment. For instance, this ensures no matter what the UI text color is,
* the check icon will look good on the black color tile. */
--ck-color-color-grid-check-icon: hsl(212, 81%, 46%);
}
.ck.ck-color-grid {
grid-gap: 5px;
padding: 8px;
}
.ck.ck-color-grid__tile {
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 ) {
/* Disable the default .ck-button's border ring. */
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);
}
}
/*
* In high contrast mode, the colors are replaced with text labels.
* See https://github.com/ckeditor/ckeditor5/issues/14907.
*/
@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);
}
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/* View fragment with color grids. */
.ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__remove-color,
.ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__color-picker {
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;
}
/* View fragment with a color picker. */
.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;
}
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/**
* Implements rounded corner interface for .ck-rounded-corners class.
*
* @see $ck-border-radius
*/
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/**
* A helper to combine multiple shadows.
*/
/**
* Gives an element a drop shadow so it looks like a floating panel.
*/
/*
* 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-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);
}
}
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
.ck.ck-dialog .ck.ck-dialog__actions {
padding: var(--ck-spacing-large);
}
.ck.ck-dialog .ck.ck-dialog__actions > * + * {
margin-left: var(--ck-spacing-large);
}
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/**
* Implements rounded corner interface for .ck-rounded-corners class.
*
* @see $ck-border-radius
*/
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/**
* A class which indicates that an element holding it is disabled.
*/
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/**
* A helper to combine multiple shadows.
*/
/**
* Gives an element a drop shadow so it looks like a floating panel.
*/
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
:root {
--ck-dropdown-arrow-size: calc(0.5 * var(--ck-icon-size));
}
.ck.ck-dropdown {
/* Enable font size inheritance, which allows fluid UI scaling. */
font-size: inherit;
}
.ck.ck-dropdown .ck-dropdown__arrow {
width: var(--ck-dropdown-arrow-size);
}
[dir="ltr"] .ck.ck-dropdown .ck-dropdown__arrow {
right: var(--ck-spacing-standard);
/* A space to accommodate the triangle. */
margin-left: var(--ck-spacing-standard);
}
[dir="rtl"] .ck.ck-dropdown .ck-dropdown__arrow {
left: var(--ck-spacing-standard);
/* A space to accommodate the triangle. */
margin-right: var(--ck-spacing-small);
}
.ck.ck-dropdown.ck-disabled .ck-dropdown__arrow {
opacity: var(--ck-disabled-opacity);
}
[dir="ltr"] .ck.ck-dropdown .ck-button.ck-dropdown__button:not(.ck-button_with-text) {
/* Make sure dropdowns with just an icon have the right inner spacing */
padding-left: var(--ck-spacing-small);
}
[dir="rtl"] .ck.ck-dropdown .ck-button.ck-dropdown__button:not(.ck-button_with-text) {
/* Make sure dropdowns with just an icon have the right inner spacing */
padding-right: var(--ck-spacing-small);
}
/* #23 */
.ck.ck-dropdown .ck-button.ck-dropdown__button .ck-button__label {
width: 7em;
overflow: hidden;
text-overflow: ellipsis;
}
/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */
.ck.ck-dropdown .ck-button.ck-dropdown__button.ck-disabled .ck-button__label {
opacity: var(--ck-disabled-opacity);
}
/* https://github.com/ckeditor/ckeditor5/issues/816 */
.ck.ck-dropdown .ck-button.ck-dropdown__button.ck-on {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.ck.ck-dropdown .ck-button.ck-dropdown__button.ck-dropdown__button_label-width_auto .ck-button__label {
width: auto;
}
/* https://github.com/ckeditor/ckeditor5/issues/8699 */
.ck.ck-dropdown .ck-button.ck-dropdown__button.ck-off:active,
.ck.ck-dropdown .ck-button.ck-dropdown__button.ck-on:active {
box-shadow: none;
}
.ck.ck-dropdown .ck-button.ck-dropdown__button.ck-off:active:focus, .ck.ck-dropdown .ck-button.ck-dropdown__button.ck-on:active:focus {
box-shadow: var(--ck-focus-outer-shadow), 0 0;
}
.ck.ck-dropdown__panel {
border-radius: 0;
background: var(--ck-color-dropdown-panel-background);
border: 1px solid var(--ck-color-dropdown-panel-border);
bottom: 0;
/* Make sure the panel is at least as wide as the drop-down's button. */
min-width: 100%;
}
.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;
/* Disabled corner border radius to be consistent with the .dropdown__button
https://github.com/ckeditor/ckeditor5/issues/816 */
}
.ck.ck-dropdown__panel.ck-dropdown__panel_se {
border-top-left-radius: 0;
}
.ck.ck-dropdown__panel.ck-dropdown__panel_sw {
border-top-right-radius: 0;
}
.ck.ck-dropdown__panel.ck-dropdown__panel_ne {
border-bottom-left-radius: 0;
}
.ck.ck-dropdown__panel.ck-dropdown__panel_nw {
border-bottom-right-radius: 0;
}
.ck.ck-dropdown__panel:focus {
outline: none;
}
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/*
* 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
*/
/**
* Implements rounded corner interface for .ck-rounded-corners class.
*
* @see $ck-border-radius
*/
.ck.ck-dropdown > .ck-dropdown__panel > .ck-list {
/* Disabled radius of top-left border to be consistent with .dropdown__button
https://github.com/ckeditor/ckeditor5/issues/816 */
border-radius: 0;
}
.ck-rounded-corners .ck.ck-dropdown > .ck-dropdown__panel > .ck-list,
.ck.ck-dropdown > .ck-dropdown__panel > .ck-list.ck-rounded-corners {
border-radius: var(--ck-border-radius);
border-top-left-radius: 0;
}
/* Make sure the button belonging to the first/last child of the list goes well with the
border radius of the entire panel. */
.ck.ck-dropdown > .ck-dropdown__panel > .ck-list .ck-list__item:first-child > .ck-button {
border-radius: 0;
}
.ck-rounded-corners .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;
}
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/**
* Implements rounded corner interface for .ck-rounded-corners class.
*
* @see $ck-border-radius
*/
:root {
--ck-color-split-button-hover-background: hsl(0, 0%, 92%);
--ck-color-split-button-hover-border: hsl(0, 0%, 70%);
}
/*
* Note: ck-rounded and ck-dir mixins don't go together (because they both use @nest).
*/
[dir="ltr"] .ck.ck-splitbutton:hover > .ck-splitbutton__action, [dir="ltr"] .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__action {
/* Don't round the action button on the right side */
border-top-right-radius: unset;
border-bottom-right-radius: unset;
}
[dir="rtl"] .ck.ck-splitbutton:hover > .ck-splitbutton__action, [dir="rtl"] .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__action {
/* Don't round the action button on the left side */
border-top-left-radius: unset;
border-bottom-left-radius: unset;
}
.ck.ck-splitbutton > .ck-splitbutton__arrow {
/* It's a text-less button and since the icon is positioned absolutely in such situation,
it must get some arbitrary min-width. */
min-width: unset;
}
[dir="ltr"] .ck.ck-splitbutton > .ck-splitbutton__arrow {
/* Don't round the arrow button on the left side */
border-top-left-radius: unset;
border-bottom-left-radius: unset;
}
[dir="rtl"] .ck.ck-splitbutton > .ck-splitbutton__arrow {
/* Don't round the arrow button on the right side */
border-top-right-radius: unset;
border-bottom-right-radius: unset;
}
.ck.ck-splitbutton > .ck-splitbutton__arrow svg {
width: var(--ck-dropdown-arrow-size);
}
/* Make sure the divider stretches 100% height of the button
https://github.com/ckeditor/ckeditor5/issues/10936 */
.ck.ck-splitbutton > .ck-splitbutton__arrow:not(:focus) {
border-top-width: 0px;
border-bottom-width: 0px;
}
/* Don't round the bottom left and right corners of the buttons when "open"
https://github.com/ckeditor/ckeditor5/issues/816 */
.ck.ck-splitbutton.ck-splitbutton_open {
border-radius: 0;
}
.ck-rounded-corners .ck.ck-splitbutton.ck-splitbutton_open,
.ck.ck-splitbutton.ck-splitbutton_open.ck-rounded-corners {
border-radius: var(--ck-border-radius);
}
.ck-rounded-corners .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__action, .ck.ck-splitbutton.ck-splitbutton_open.ck-rounded-corners > .ck-splitbutton__action {
border-bottom-left-radius: 0;
}
.ck-rounded-corners .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__arrow, .ck.ck-splitbutton.ck-splitbutton_open.ck-rounded-corners > .ck-splitbutton__arrow {
border-bottom-right-radius: 0;
}
/* When the split button is "open" (the arrow is on) or being hovered, it should get some styling
as a whole. The background of both buttons should stand out and there should be a visual
separation between both buttons. */
/* When the split button hovered as a whole, not as individual buttons. */
.ck.ck-splitbutton.ck-splitbutton_open > .ck-button:not(.ck-on):not(.ck-disabled):not(:hover), .ck.ck-splitbutton:hover > .ck-button:not(.ck-on):not(.ck-disabled):not(:hover) {
background: var(--ck-color-split-button-hover-background);
}
/* Splitbutton separator needs to be set with the ::after pseudoselector
to display properly the borders on focus */
.ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__arrow:not(.ck-disabled)::after, .ck.ck-splitbutton:hover > .ck-splitbutton__arrow:not(.ck-disabled)::after {
content: '';
position: absolute;
width: 1px;
height: 100%;
background-color: var(--ck-color-split-button-hover-border);
}
/* Make sure the divider between the buttons looks fine when the button is focused */
.ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__arrow:focus::after, .ck.ck-splitbutton:hover > .ck-splitbutton__arrow:focus::after {
--ck-color-split-button-hover-border: var(--ck-color-focus-border);
}
[dir="ltr"] .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__arrow:not(.ck-disabled)::after, [dir="ltr"] .ck.ck-splitbutton:hover > .ck-splitbutton__arrow:not(.ck-disabled)::after {
left: -1px;
}
[dir="rtl"] .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__arrow:not(.ck-disabled)::after, [dir="rtl"] .ck.ck-splitbutton:hover > .ck-splitbutton__arrow:not(.ck-disabled)::after {
right: -1px;
}
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
.ck.ck-toolbar-dropdown .ck-toolbar {
border: 0;
}
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE