@ckeditor/ckeditor5-image/dist/index-editor.css

Image feature for CKEditor 5.

/**
 * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
 */
:root, :host {
  --ck-content-color-image-caption-background: #f7f7f7;
  --ck-color-image-caption-highlighted-background: #fd0;
}

.ck.ck-editor__editable .image > figcaption.image__caption_highlighted {
  @media (forced-colors: none) {
    animation: .6s ease-out ck-image-caption-highlight;
  }

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

@keyframes ck-image-caption-highlight {
  0% {
    background-color: var(--ck-color-image-caption-highlighted-background);
  }

  100% {
    background-color: var(--ck-content-color-image-caption-background);
  }
}

.ck.ck-editor__editable {
  & td, & th {
    & .image-inline.image_resized img {
      max-width: 100%;
    }
  }
}

[dir="ltr"] .ck.ck-button.ck-button_with-text.ck-resize-image-button .ck-button__icon {
  margin-right: var(--ck-spacing-standard, var(--ck-spacing-base));
}

[dir="rtl"] .ck.ck-button.ck-button_with-text.ck-resize-image-button .ck-button__icon {
  margin-left: var(--ck-spacing-standard, var(--ck-spacing-base));
}

.ck.ck-dropdown .ck-button.ck-resize-image-button .ck-button__label {
  width: 4em;
}

.ck.ck-editor__editable {
  & .image, & .image-inline {
    &.ck-appear {
      animation: .7s fadeIn;

      @media (prefers-reduced-motion: reduce) {
        opacity: 1;
        animation: none;
      }
    }

    position: relative;
  }

  & .image .ck-progress-bar, & .image-inline .ck-progress-bar {
    background: var(--ck-color-upload-bar-background);
    width: 0;
    height: 2px;
    transition: width .1s;
    position: absolute;
    top: 0;
    left: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

:root, :host {
  --ck-color-image-upload-icon: var(--ck-color-base-background);
  --ck-color-image-upload-icon-background: var(--ck-color-base-success);
  --ck-image-upload-icon-size: 20;
  --ck-image-upload-icon-width: 2px;
  --ck-image-upload-icon-is-visible: clamp(0px, 100% - 50px, 1px);
}

.ck-image-upload-complete-icon {
  opacity: 0;
  background: var(--ck-color-image-upload-icon-background);
  font-size: calc(1px * var(--ck-image-upload-icon-size));
  width: calc(var(--ck-image-upload-icon-is-visible) * var(--ck-image-upload-icon-size));
  height: calc(var(--ck-image-upload-icon-is-visible) * var(--ck-image-upload-icon-size));
  top: min(var(--ck-spacing-medium, var(--ck-spacing-base)), 6%);
  right: min(var(--ck-spacing-medium, var(--ck-spacing-base)), 6%);
  border-radius: 50%;
  animation-name: ck-upload-complete-icon-show, ck-upload-complete-icon-hide;
  animation-duration: .5s, .5s;
  animation-delay: 0s, 3s;
  animation-fill-mode: forwards, forwards;
  display: block;
  position: absolute;
  overflow: hidden;

  &:after {
    opacity: 0;
    transform-origin: 0 0;
    border-top: var(--ck-image-upload-icon-width) solid var(--ck-color-image-upload-icon);
    border-right: var(--ck-image-upload-icon-width) solid var(--ck-color-image-upload-icon);
    box-sizing: border-box;
    content: "";
    width: 0;
    height: 0;
    animation-name: ck-upload-complete-icon-check;
    animation-duration: .5s;
    animation-delay: .5s;
    animation-fill-mode: forwards;
    position: absolute;
    top: 50%;
    left: 25%;
    transform: scaleX(-1) rotate(135deg);
  }

  @media (prefers-reduced-motion: reduce) {
    animation-duration: 0s;

    &:after {
      opacity: 1;
      width: .3em;
      height: .45em;
      animation: none;
    }
  }

  z-index: 1;
}

@keyframes ck-upload-complete-icon-show {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes ck-upload-complete-icon-hide {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes ck-upload-complete-icon-check {
  0% {
    opacity: 1;
    width: 0;
    height: 0;
  }

  33% {
    width: .3em;
    height: 0;
  }

  100% {
    opacity: 1;
    width: .3em;
    height: .45em;
  }
}

:root, :host {
  --ck-color-upload-placeholder-loader: #b3b3b3;
  --ck-upload-placeholder-loader-size: 32px;
  --ck-upload-placeholder-image-aspect-ratio: 2.8;
}

.ck .ck-image-upload-placeholder {
  width: 100%;
  margin: 0;

  &.image-inline {
    width: calc(2 * var(--ck-upload-placeholder-loader-size) * var(--ck-upload-placeholder-image-aspect-ratio));
  }

  & img {
    aspect-ratio: var(--ck-upload-placeholder-image-aspect-ratio);
  }
}

.ck .ck-upload-placeholder-loader {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;

  &:before {
    width: var(--ck-upload-placeholder-loader-size);
    height: var(--ck-upload-placeholder-loader-size);
    border-top: 3px solid var(--ck-color-upload-placeholder-loader);
    content: "";
    border-right: 2px solid #0000;
    border-radius: 50%;
    animation: 1s linear infinite ck-upload-placeholder-loader;
    position: relative;
  }

  left: 0;
}

@keyframes ck-upload-placeholder-loader {
  to {
    transform: rotate(360deg);
  }
}

.ck.ck-editor__editable {
  & .image > figcaption.ck-placeholder:before {
    padding-left: inherit;
    padding-right: inherit;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  & .image {
    z-index: 1;

    &.ck-widget_selected {
      z-index: 2;
    }
  }

  & .image-inline {
    z-index: 1;

    &.ck-widget_selected {
      z-index: 2;

      & ::selection {
        display: none;
      }
    }
  }

  & .image-inline img {
    height: auto;
  }

  & td, & th {
    & .image-inline img {
      max-width: none;
    }
  }
}

.ck.ck-editor__editable {
  & img.image_placeholder {
    background-size: 100% 100%;
  }
}

:root, :host {
  --ck-image-insert-insert-by-url-width: var(--ck-width-md);
  --ck-image-insert-form-padding: var(--ck-spacing-padding);
  --ck-image-insert-form-button-gap: var(--ck-spacing-gap-tight);
}

.ck.ck-image-insert-url {
  --ck-input-width: 100%;
  width: 400px;

  & .ck-image-insert-url__action-row {
    grid-column-gap: var(--ck-spacing-large, var(--ck-spacing-lg));
    margin-top: var(--ck-spacing-large, var(--ck-spacing-lg));
    display: grid;

    &:empty {
      margin-top: 0;
    }

    & .ck-button-save, & .ck-button-cancel {
      justify-content: center;
      min-width: auto;
    }

    & .ck-button .ck-button__label {
      color: var(--ck-color-text);
    }

    grid-template-columns: repeat(2, 1fr);
  }

  padding: var(--ck-dialog-content-padding);
}

.ck.ck-image-insert-form {
  padding: var(--ck-image-insert-form-padding);

  & > .ck.ck-button {
    width: 100%;
    display: block;

    [dir="ltr"] & {
      text-align: left;
    }

    [dir="rtl"] & {
      text-align: right;
    }

    &:not(:last-child) {
      margin-bottom: var(--ck-image-insert-form-button-gap);
    }
  }

  & > .ck.ck-collapsible {
    &:not(:first-child) {
      border-top: 1px solid var(--ck-color-base-border);
    }

    &:not(:last-child) {
      border-bottom: 1px solid var(--ck-color-base-border);
    }

    min-width: var(--ck-image-insert-insert-by-url-width);
  }

  &:focus {
    outline: none;
  }
}

:root, :host {
  --ck-image-custom-resize-form-width: var(--ck-width-balloon-form);
}

.ck.ck-image-custom-resize-form {
  &.ck-responsive-form {
    width: var(--ck-image-custom-resize-form-width);
  }
}

:root, :host {
  --ck-text-alternative-form-width: var(--ck-width-balloon-form);
}

.ck.ck-text-alternative-form {
  &.ck-responsive-form {
    width: var(--ck-text-alternative-form-width);
  }
}

/*# sourceMappingURL=index-editor.css.map */