ckeditor5.pcss.css

/**
 * @file
 * CKEditor 5 integration styles.
 */

/* cspell:ignore fullscreeneditor */
.ck {
  --ck-color-text: var(--admin-color-text);
  --ck-content-font-color: var(--admin-color-text);
  --ck-color-toolbar-background: var(--admin-color-bg-raised);
  --ck-color-toolbar-border: var(--admin-color-border-input);
  --ck-color-base-foreground: var(--admin-color-bg-raised);
  --ck-color-base-background: var(--admin-color-bg-input);
  --ck-color-base-border: var(--ck-color-toolbar-border);
  --ck-color-list-button-on-text: var(--admin-color-text-on-primary);
  --ck-color-list-button-on-background: var(--admin-color-primary);
  --ck-color-list-button-on-background-focus: var(--admin-color-primary-hover);
  --ck-color-list-button-hover-background: var(--admin-color-primary-soft-hover);
  --ck-color-panel-background: var(--admin-color-bg-raised);
  --ck-color-panel-border: transparent;
  --ck-color-dialog-background: var(--admin-color-bg-raised);
  --ck-color-dialog-form-header-border: var(--admin-color-border-input);
  --ck-accessibility-help-dialog-code-background-color: var(--admin-color-bg-sunken);
  --ck-color-button-default-background: transparent;
  --ck-color-button-default-hover-background: var(--admin-color-primary-soft);
  --ck-color-button-default-active-background: var(--admin-color-primary-soft-active);
  --ck-color-button-default-disabled-background: transparent;
  --ck-color-button-on-color: var(--admin-color-primary);
  --ck-color-button-on-background: var(--admin-color-primary-soft);
  --ck-color-button-on-hover-background: var(--admin-color-primary-soft-hover);
  --ck-color-button-on-active-background: var(--admin-color-primary-active);
  --ck-color-split-button-hover-background: var(--admin-color-bg-surface-nested);
  --ck-color-split-button-hover-border: var(--admin-color-border-soft);
  --ck-color-button-save: var(--admin-color-success);
  --ck-color-button-cancel: var(--admin-color-error);
  --ck-color-link-default: var(--admin-color-primary);
  --ck-color-link-selected-background: var(--admin-color-bg-item-hover);
  --ck-color-input-background: var(--admin-color-bg-input);
  --ck-color-input-border: var(--admin-color-border-input);
  --ck-color-labeled-field-label-background: var(--admin-color-bg-raised);
  --ck-color-list-background: var(--admin-color-bg-raised);
  --ck-focus-ring: 1px solid var(--admin-color-focus);
  --ck-focus-outer-shadow: 0 0 0 1px var(--admin-color-focus-border), 0 0 0 4px var(--admin-color-focus);
  --ck-inner-shadow: var(--ck-focus-outer-shadow);
  --ck-drop-shadow: var(--admin-shadow-2);
  --ck-color-focus-border: var(--admin-color-primary);
  --ck-color-widget-type-around-button-active: var(--admin-color-primary);
  --ck-color-widget-blurred-border: var(--admin-color-primary-hover);
  --ck-color-widget-hover-border: var(--admin-color-text);
  --ck-color-widget-type-around-button-hover: var(--admin-color-text);
  --ck-color-image-caption-text: var(--admin-color-text-soft);
  --ck-color-image-caption-background: transparent;
  --ck-border-radius: var(--admin-radius-m);
  --ck-style-panel-button-label-background: var(--admin-color-bg-sunken);
  --ck-style-panel-button-hover-label-background: var(--admin-color-bg-sunken);
  --ck-style-panel-button-hover-border-color: var(--admin-color-primary);

  .ck-style-grid__button__preview {
    border-top-left-radius: var(--ck-border-radius);
    border-top-right-radius: var(--ck-border-radius);
  }

  .ck-style-panel .ck-style-grid .ck-style-grid__button:not(.ck-on) .ck-button__label {
    border-bottom-right-radius: var(--ck-border-radius);
    border-bottom-left-radius: var(--ck-border-radius);
  }

  .ck-dropdown__panel {
    --ck-color-dropdown-panel-background: var(--admin-color-bg-input);
  }

  .ck-content blockquote {
    border: none;
  }

  .ck-toolbar__separator {
    opacity: 0.3;
  }

  .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content .ck-toolbar {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }

  .ck-toolbar_grouping:focus,
  .ck-toolbar__items:focus {
    box-shadow: none;
  }

  .ck.ck-editor__editable_inline {
    padding: 0 var(--admin-space-s);
  }

  :is(.ck.ck-button, :where(a).ck.ck-button):focus,
  .ck-editor__editable:not(.ck-editor__nested-editable).ck-focused {
    outline: var(--focus-outline);
    box-shadow: none;
  }

  .ck.ck-content {
    padding-bottom: var(--admin-space-l);
  }

  .ck-button[aria-pressed="true"] {
    color: var(--admin-color-primary-active);
    border: 2px solid var(--admin-color-primary);
  }

  .ck-button.ck-source-editing-button {
    padding-inline-start: var(--admin-space-m);
  }

  .ck-source-editing-area {
    overflow: inherit;
  }

  textarea {
    color: var(--ck-color-text);
    background: var(--ck-color-base-background);
  }

  .ck.ck-media-alternative-text-form .ck-button {
    border: none;
  }

  .ck-content .drupal-media > figcaption {
    color: var(--ck-color-image-caption-text);
    background: var(--ck-color-image-caption-background);
  }

  .ck.ck.ck-balloon-panel.ck-powered-by-balloon {
    z-index: 2;
    transform: translateY(-13px);
  }

  & .ck.ck-dropdown__panel {
    border: none;
  }

  &.ck-sticky-panel .ck-sticky-panel__content.ck-sticky-panel__content_sticky {
    z-index: 2;
    inset-block-start: calc(var(--admin-theme-toolbar-y-offset) + var(--admin-theme-sticky-offset)) !important;
  }

  &[data-fullscreen="fullscreeneditor"] .ck-sticky-panel__content.ck-sticky-panel__content_sticky {
    inset-block-start: 0 !important;
  }

  &.ck-button:not(.ck-disabled):hover {
    color: var(--admin-color-primary-active);
  }
}