@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{
  --ck-content-color-image-caption-background:#f7f7f7;
  --ck-content-color-image-caption-text:#333;
  --ck-color-image-caption-highlighted-background:#fd0;
}

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

@media (prefers-reduced-motion: reduce){
  .ck.ck-editor__editable .image > figcaption.image__caption_highlighted{
    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);
  }
}

:is(.ck.ck-editor__editable td, .ck.ck-editor__editable 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);
}

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

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

:root{
  --ck-content-image-style-spacing:1.5em;
  --ck-content-inline-image-style-spacing:calc(var(--ck-content-image-style-spacing) / 2);
}

:is(.ck.ck-splitbutton.ck-splitbutton_flatten:hover, .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open) > .ck-splitbutton__action:not(.ck-disabled), :is(.ck.ck-splitbutton.ck-splitbutton_flatten:hover, .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open) > .ck-splitbutton__arrow:not(.ck-disabled), :is(.ck.ck-splitbutton.ck-splitbutton_flatten:hover, .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open) > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover){
  background-color:var(--ck-color-button-on-background);
}

:is(:is(.ck.ck-splitbutton.ck-splitbutton_flatten:hover, .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open) > .ck-splitbutton__action:not(.ck-disabled), :is(.ck.ck-splitbutton.ck-splitbutton_flatten:hover, .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open) > .ck-splitbutton__arrow:not(.ck-disabled), :is(.ck.ck-splitbutton.ck-splitbutton_flatten:hover, .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open) > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover)):after{
  display:none;
}

.ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open:hover > .ck-splitbutton__action:not(.ck-disabled), .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open:hover > .ck-splitbutton__arrow:not(.ck-disabled), .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open:hover > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover){
  background-color:var(--ck-color-button-on-hover-background);
}

:is(.ck.ck-editor__editable .image, .ck.ck-editor__editable .image-inline).ck-appear{
  animation:.7s fadeIn;
}

@media (prefers-reduced-motion: reduce){
  :is(.ck.ck-editor__editable .image, .ck.ck-editor__editable .image-inline).ck-appear{
    opacity:1;
    animation:none;
  }
}

.ck.ck-editor__editable .image, .ck.ck-editor__editable .image-inline{
  position:relative;
}

.ck.ck-editor__editable .image .ck-progress-bar, .ck.ck-editor__editable .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{
  --ck-color-image-upload-icon:#fff;
  --ck-color-image-upload-icon-background:#008a00;
  --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), 6%);
  right:min(var(--ck-spacing-medium), 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;
}

.ck-image-upload-complete-icon: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){
  .ck-image-upload-complete-icon{
    animation-duration:0s;
  }

  .ck-image-upload-complete-icon:after{
    opacity:1;
    width:.3em;
    height:.45em;
    animation:none;
  }
}

.ck-image-upload-complete-icon{
  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{
  --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;
}

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

.ck .ck-image-upload-placeholder 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;
}

.ck .ck-upload-placeholder-loader: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;
}

.ck .ck-upload-placeholder-loader{
  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;
}

.ck.ck-editor__editable .image{
  z-index:1;
}

.ck.ck-editor__editable .image.ck-widget_selected{
  z-index:2;
}

.ck.ck-editor__editable .image-inline{
  z-index:1;
}

.ck.ck-editor__editable .image-inline.ck-widget_selected{
  z-index:2;
}

.ck.ck-editor__editable .image-inline.ck-widget_selected ::selection{
  display:none;
}

.ck.ck-editor__editable .image-inline img{
  height:auto;
}

:is(.ck.ck-editor__editable td, .ck.ck-editor__editable th) .image-inline img{
  max-width:none;
}

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

:root{
  --ck-image-insert-insert-by-url-width:250px;
}

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

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

.ck.ck-image-insert-url .ck-image-insert-url__action-row .ck-button-save, .ck.ck-image-insert-url .ck-image-insert-url__action-row .ck-button-cancel{
  justify-content:center;
  min-width:auto;
}

.ck.ck-image-insert-url .ck-image-insert-url__action-row .ck-button .ck-button__label{
  color:var(--ck-color-text);
}

.ck.ck-image-insert-url .ck-image-insert-url__action-row{
  grid-template-columns:repeat(2, 1fr);
}

.ck.ck-image-insert-url{
  padding:var(--ck-spacing-large) var(--ck-spacing-large) 0;
}

.ck.ck-image-insert-form > .ck.ck-button{
  width:100%;
  display:block;
}

[dir="ltr"] :is(.ck.ck-image-insert-form > .ck.ck-button){
  text-align:left;
}

[dir="rtl"] :is(.ck.ck-image-insert-form > .ck.ck-button){
  text-align:right;
}

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

.ck.ck-image-insert-form > .ck.ck-collapsible:not(:last-child){
  border-bottom:1px solid var(--ck-color-base-border);
}

.ck.ck-image-insert-form > .ck.ck-collapsible{
  min-width:var(--ck-image-insert-insert-by-url-width);
}

.ck.ck-image-insert-form > .ck.ck-image-insert-url{
  min-width:var(--ck-image-insert-insert-by-url-width);
  padding:var(--ck-spacing-large);
}

.ck.ck-image-insert-form:focus{
  outline:none;
}

:root{
  --ck-image-custom-resize-form-width:340px;
}

@media screen and (width <= 600px){
  :root{
    --ck-image-custom-resize-form-width:300px;
  }
}

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

:root{
  --ck-text-alternative-form-width:340px;
}

@media screen and (width <= 600px){
  :root{
    --ck-text-alternative-form-width:300px;
  }
}

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