@ckeditor/ckeditor5-image 47.6.1 → 48.0.0-alpha.1

package/dist/index-editor.css

@@ -3,259 +3,382 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 :root{
-	--ck-content-color-image-caption-background:hsl(0, 0%, 97%);
-	--ck-content-color-image-caption-text:hsl(0, 0%, 20%);
-	--ck-color-image-caption-highlighted-background:hsl(52deg 100% 50%);
+  --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:ck-image-caption-highlight .6s ease-out;
-		}
-	}
+  .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;
+  .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);
-	}
+  0%{
+    background-color:var(--ck-color-image-caption-highlighted-background);
+  }
 
-	100%{
-		background-color:var(--ck-content-color-image-caption-background);
-	}
+  100%{
+    background-color:var(--ck-content-color-image-caption-background);
+  }
 }
 
-.ck.ck-editor__editable td .image-inline.image_resized img, .ck.ck-editor__editable th .image-inline.image_resized img{
-			max-width:100%;
-		}
+: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);
+  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);
+  margin-left:var(--ck-spacing-standard);
 }
 
 .ck.ck-dropdown .ck-button.ck-resize-image-button .ck-button__label{
-	width:4em;
+  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-content-image-style-spacing:1.5em;
-	--ck-content-inline-image-style-spacing:calc(var(--ck-content-image-style-spacing) / 2);
-}
-
-.ck.ck-splitbutton.ck-splitbutton_flatten:hover > .ck-splitbutton__action:not(.ck-disabled),
-			.ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open > .ck-splitbutton__action:not(.ck-disabled),
-			.ck.ck-splitbutton.ck-splitbutton_flatten:hover > .ck-splitbutton__arrow:not(.ck-disabled),
-			.ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open > .ck-splitbutton__arrow:not(.ck-disabled),
-			.ck.ck-splitbutton.ck-splitbutton_flatten:hover > .ck-splitbutton__arrow:not(.ck-disabled):not(: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);
-			}
-
-.ck.ck-splitbutton.ck-splitbutton_flatten:hover > .ck-splitbutton__action:not(.ck-disabled)::after, .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open > .ck-splitbutton__action:not(.ck-disabled)::after, .ck.ck-splitbutton.ck-splitbutton_flatten:hover > .ck-splitbutton__arrow:not(.ck-disabled)::after, .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open > .ck-splitbutton__arrow:not(.ck-disabled)::after, .ck.ck-splitbutton.ck-splitbutton_flatten:hover > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover)::after, .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);
-			}
-
-.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{
-		position:absolute;
-		top:0;
-		left:0;
-	}
+  --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{
-	display:block;
-	position:absolute;
-	top:min(var(--ck-spacing-medium), 6%);
-	right:min(var(--ck-spacing-medium), 6%);
-	border-radius:50%;
-	z-index:1;
+  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-image-upload-complete-icon::after{
-		content:"";
-		position:absolute;
-	}
+.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{
-	position:absolute;
-	display:flex;
-	align-items:center;
-	justify-content:center;
-	top:0;
-	left:0;
-}
-
-.ck .ck-upload-placeholder-loader::before{
-		content:'';
-		position:relative;
-	}
-
-.ck.ck-editor__editable .image > figcaption.ck-placeholder::before{
-		padding-left:inherit;
-		padding-right:inherit;
-		white-space:nowrap;
-		overflow:hidden;
-		text-overflow:ellipsis;
-	}
+  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;
-	}
+  z-index:1;
+}
 
 .ck.ck-editor__editable .image.ck-widget_selected{
-			z-index:2;
-		}
+  z-index:2;
+}
 
 .ck.ck-editor__editable .image-inline{
-		z-index:1;
-	}
+  z-index:1;
+}
 
 .ck.ck-editor__editable .image-inline.ck-widget_selected{
-			z-index:2;
-		}
+  z-index:2;
+}
 
 .ck.ck-editor__editable .image-inline.ck-widget_selected ::selection{
-				display:none;
-			}
+  display:none;
+}
 
 .ck.ck-editor__editable .image-inline img{
-		height:auto;
-	}
+  height:auto;
+}
 
-.ck.ck-editor__editable td .image-inline img, .ck.ck-editor__editable th .image-inline img{
-			max-width:none;
-		}
+: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%;
-	}
+  background-size:100% 100%;
+}
+
+:root{
+  --ck-image-insert-insert-by-url-width:250px;
+}
 
 .ck.ck-image-insert-url{
-	width:400px;
-	padding:var(--ck-spacing-large) var(--ck-spacing-large) 0;
+  --ck-input-width:100%;
+  width:400px;
 }
 
 .ck.ck-image-insert-url .ck-image-insert-url__action-row{
-		display:grid;
-		grid-template-columns:repeat(2, 1fr);
-	}
-
-.ck-vertical-form .ck-button::after{
-		content:"";
-		width:0;
-		position:absolute;
-		right:-1px;
-		top:-1px;
-		bottom:-1px;
-		z-index:1;
-	}
-
-.ck-vertical-form .ck-button:focus::after{
-		display:none;
-	}
-
-@media screen and (max-width: 600px){
-			.ck.ck-responsive-form .ck-button::after{
-				content:"";
-				width:0;
-				position:absolute;
-				right:-1px;
-				top:-1px;
-				bottom:-1px;
-				z-index:1;
-			}
-
-			.ck.ck-responsive-form .ck-button:focus::after{
-				display:none;
-			}
-	}
+  grid-column-gap:var(--ck-spacing-large);
+  margin-top:var(--ck-spacing-large);
+  display:grid;
+}
 
-:root{
-	--ck-form-default-width:340px;
+.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-form{
-	padding:0 0 var(--ck-spacing-large);
+.ck.ck-image-insert-url .ck-image-insert-url__action-row .ck-button .ck-button__label{
+  color:var(--ck-color-text);
 }
 
-.ck.ck-form.ck-form_default-width{
-		width:var(--ck-form-default-width);
-	}
+.ck.ck-image-insert-url .ck-image-insert-url__action-row{
+  grid-template-columns:repeat(2, 1fr);
+}
 
-.ck.ck-form:focus{
-		outline:none;
-	}
+.ck.ck-image-insert-url{
+  padding:var(--ck-spacing-large) var(--ck-spacing-large) 0;
+}
 
-.ck.ck-form .ck.ck-input-text,
-	.ck.ck-form .ck.ck-input-number{
-		min-width:100%;
-		width:0;
-	}
+.ck.ck-image-insert-form > .ck.ck-button{
+  width:100%;
+  display:block;
+}
 
-.ck.ck-form .ck.ck-dropdown{
-		min-width:100%;
-	}
+[dir="ltr"] :is(.ck.ck-image-insert-form > .ck.ck-button){
+  text-align:left;
+}
 
-.ck.ck-form .ck.ck-dropdown .ck-dropdown__button:not(:focus){
-				border:1px solid var(--ck-color-base-border);
-			}
+[dir="rtl"] :is(.ck.ck-image-insert-form > .ck.ck-button){
+  text-align:right;
+}
 
-.ck.ck-form .ck.ck-dropdown .ck-dropdown__button .ck-button__label{
-				width:100%;
-			}
+.ck.ck-image-insert-form > .ck.ck-collapsible:not(:first-child){
+  border-top:1px solid var(--ck-color-base-border);
+}
 
-@media screen and (max-width: 600px){
+.ck.ck-image-insert-form > .ck.ck-collapsible:not(:last-child){
+  border-bottom:1px solid var(--ck-color-base-border);
+}
 
-.ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit{
-					flex-direction:column;
-					align-items:stretch;
-					padding:0;
-			}
-	}
+.ck.ck-image-insert-form > .ck.ck-collapsible{
+  min-width:var(--ck-image-insert-insert-by-url-width);
+}
 
-@media screen and (max-width: 600px){
+.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-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit > .ck{
-						margin:var(--ck-spacing-large) var(--ck-spacing-large) 0;
-				}
-	}
+.ck.ck-image-insert-form:focus{
+  outline:none;
+}
 
-@media screen and (max-width: 600px){
+:root{
+  --ck-image-custom-resize-form-width:340px;
+}
 
-.ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit .ck-button_with-text{
-						justify-content:center;
-				}
-	}
+@media screen and (width <= 600px){
+  :root{
+    --ck-image-custom-resize-form-width:300px;
+  }
+}
 
-@media screen and (max-width: 600px){
+.ck.ck-image-custom-resize-form.ck-responsive-form{
+  width:var(--ck-image-custom-resize-form-width);
+}
 
-.ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_large-bottom-padding{
-					padding-bottom:var(--ck-spacing-large);
-			}
-	}
+:root{
+  --ck-text-alternative-form-width:340px;
+}
 
-[dir="ltr"] .ck.ck-form.ck-responsive-form > :not(:first-child){
-				margin-left:0;
-			}
+@media screen and (width <= 600px){
+  :root{
+    --ck-text-alternative-form-width:300px;
+  }
+}
 
-[dir="rtl"] .ck.ck-form.ck-responsive-form > :not(:last-child){
-				margin-left:0;
-			}
+.ck.ck-text-alternative-form.ck-responsive-form{
+  width:var(--ck-text-alternative-form-width);
+}