@ckeditor/ckeditor5-image 48.8.1-alpha.4 → 49.0.0-alpha.0

package/dist/index-editor.css

@@ -2,383 +2,366 @@
  * @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;
+:root, :host {
+  --ck-content-color-image-caption-background: #f7f7f7;
+  --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;
+.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){
-  .ck.ck-editor__editable .image > figcaption.image__caption_highlighted{
-    animation:none;
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
   }
 }
 
-@keyframes ck-image-caption-highlight{
-  0%{
-    background-color:var(--ck-color-image-caption-highlighted-background);
+@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);
+  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;
+.ck.ck-editor__editable {
+  & td, & th {
+    & .image-inline.image_resized img {
+      max-width: 100%;
+    }
+  }
 }
 
-:root{
-  --ck-content-image-style-spacing:1.5em;
-  --ck-content-inline-image-style-spacing:calc(var(--ck-content-image-style-spacing) / 2);
+[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));
 }
 
-: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);
+[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));
 }
 
-: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-dropdown .ck-button.ck-resize-image-button .ck-button__label {
+  width: 4em;
 }
 
-.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, & .image-inline {
+    &.ck-appear {
+      animation: .7s fadeIn;
 
-:is(.ck.ck-editor__editable .image, .ck.ck-editor__editable .image-inline).ck-appear{
-  animation:.7s fadeIn;
-}
+      @media (prefers-reduced-motion: reduce) {
+        opacity: 1;
+        animation: none;
+      }
+    }
 
-@media (prefers-reduced-motion: reduce){
-  :is(.ck.ck-editor__editable .image, .ck.ck-editor__editable .image-inline).ck-appear{
-    opacity:1;
-    animation:none;
+    position: relative;
   }
-}
-
-.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;
+  & .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;
+@keyframes fadeIn {
+  from {
+    opacity: 0;
   }
 
-  to{
-    opacity:1;
+  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;
+: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);
   }
 
-  .ck-image-upload-complete-icon:after{
-    opacity:1;
-    width:.3em;
-    height:.45em;
-    animation:none;
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0s;
+
+    &:after {
+      opacity: 1;
+      width: .3em;
+      height: .45em;
+      animation: none;
+    }
   }
-}
 
-.ck-image-upload-complete-icon{
-  z-index:1;
+  z-index: 1;
 }
 
-@keyframes ck-upload-complete-icon-show{
-  from{
-    opacity:0;
+@keyframes ck-upload-complete-icon-show {
+  from {
+    opacity: 0;
   }
 
-  to{
-    opacity:1;
+  to {
+    opacity: 1;
   }
 }
 
-@keyframes ck-upload-complete-icon-hide{
-  from{
-    opacity:1;
+@keyframes ck-upload-complete-icon-hide {
+  from {
+    opacity: 1;
   }
 
-  to{
-    opacity:0;
+  to {
+    opacity: 0;
   }
 }
 
-@keyframes ck-upload-complete-icon-check{
-  0%{
-    opacity:1;
-    width:0;
-    height:0;
+@keyframes ck-upload-complete-icon-check {
+  0% {
+    opacity: 1;
+    width: 0;
+    height: 0;
   }
 
-  33%{
-    width:.3em;
-    height:0;
+  33% {
+    width: .3em;
+    height: 0;
   }
 
-  100%{
-    opacity:1;
-    width:.3em;
-    height:.45em;
+  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;
+: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;
-}
+.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));
-}
+  &.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);
+  & 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 {
+  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;
+  }
 
-.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;
+  left: 0;
 }
 
-.ck .ck-upload-placeholder-loader{
-  left:0;
+@keyframes ck-upload-placeholder-loader {
+  to {
+    transform: rotate(360deg);
+  }
 }
 
-@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 > figcaption.ck-placeholder:before{
-  padding-left:inherit;
-  padding-right:inherit;
-  white-space:nowrap;
-  text-overflow:ellipsis;
-  overflow:hidden;
-}
+  & .image {
+    z-index: 1;
 
-.ck.ck-editor__editable .image{
-  z-index:1;
-}
+    &.ck-widget_selected {
+      z-index: 2;
+    }
+  }
 
-.ck.ck-editor__editable .image.ck-widget_selected{
-  z-index:2;
-}
+  & .image-inline {
+    z-index: 1;
 
-.ck.ck-editor__editable .image-inline{
-  z-index:1;
-}
+    &.ck-widget_selected {
+      z-index: 2;
 
-.ck.ck-editor__editable .image-inline.ck-widget_selected{
-  z-index:2;
-}
+      & ::selection {
+        display: none;
+      }
+    }
+  }
 
-.ck.ck-editor__editable .image-inline.ck-widget_selected ::selection{
-  display:none;
-}
+  & .image-inline img {
+    height: auto;
+  }
 
-.ck.ck-editor__editable .image-inline img{
-  height:auto;
+  & td, & 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%;
+  }
 }
 
-.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);
 }
 
-: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-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;
 
-.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;
-}
+    &:empty {
+      margin-top: 0;
+    }
 
-.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-button-save, & .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-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);
-}
+    grid-template-columns: repeat(2, 1fr);
+  }
 
-.ck.ck-image-insert-url{
-  padding:var(--ck-spacing-large) var(--ck-spacing-large) 0;
+  padding: var(--ck-dialog-content-padding);
 }
 
-.ck.ck-image-insert-form > .ck.ck-button{
-  width:100%;
-  display:block;
-}
+.ck.ck-image-insert-form {
+  padding: var(--ck-image-insert-form-padding);
 
-[dir="ltr"] :is(.ck.ck-image-insert-form > .ck.ck-button){
-  text-align:left;
-}
+  & > .ck.ck-button {
+    width: 100%;
+    display: block;
 
-[dir="rtl"] :is(.ck.ck-image-insert-form > .ck.ck-button){
-  text-align:right;
-}
+    [dir="ltr"] & {
+      text-align: left;
+    }
 
-.ck.ck-image-insert-form > .ck.ck-collapsible:not(:first-child){
-  border-top:1px solid var(--ck-color-base-border);
-}
+    [dir="rtl"] & {
+      text-align: right;
+    }
 
-.ck.ck-image-insert-form > .ck.ck-collapsible:not(:last-child){
-  border-bottom:1px solid var(--ck-color-base-border);
-}
+    &:not(:last-child) {
+      margin-bottom: var(--ck-image-insert-form-button-gap);
+    }
+  }
 
-.ck.ck-image-insert-form > .ck.ck-collapsible{
-  min-width:var(--ck-image-insert-insert-by-url-width);
-}
+  & > .ck.ck-collapsible {
+    &:not(:first-child) {
+      border-top: 1px solid var(--ck-color-base-border);
+    }
 
-.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);
-}
+    &:not(:last-child) {
+      border-bottom: 1px solid var(--ck-color-base-border);
+    }
 
-.ck.ck-image-insert-form:focus{
-  outline:none;
-}
+    min-width: var(--ck-image-insert-insert-by-url-width);
+  }
 
-:root{
-  --ck-image-custom-resize-form-width:340px;
+  &:focus {
+    outline: none;
+  }
 }
 
-@media screen and (width <= 600px){
-  :root{
-    --ck-image-custom-resize-form-width:300px;
-  }
+: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);
+.ck.ck-image-custom-resize-form {
+  &.ck-responsive-form {
+    width: var(--ck-image-custom-resize-form-width);
+  }
 }
 
-:root{
-  --ck-text-alternative-form-width:340px;
+:root, :host {
+  --ck-text-alternative-form-width: var(--ck-width-balloon-form);
 }
 
-@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);
   }
 }
 
-.ck.ck-text-alternative-form.ck-responsive-form{
-  width:var(--ck-text-alternative-form-width);
-}
+/*# sourceMappingURL=index-editor.css.map */