@ckeditor/ckeditor5-image 48.3.1 → 48.4.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,371 +2,367 @@
2
2
  * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
3
3
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
4
4
  */
5
- :root{
6
- --ck-content-color-image-caption-background:#f7f7f7;
7
- --ck-content-color-image-caption-text:#333;
8
- --ck-color-image-caption-highlighted-background:#fd0;
5
+ :root {
6
+ --ck-content-color-image-caption-background: #f7f7f7;
7
+ --ck-color-image-caption-highlighted-background: #fd0;
9
8
  }
10
9
 
11
- @media (forced-colors: none){
12
- .ck.ck-editor__editable .image > figcaption.image__caption_highlighted{
13
- animation:.6s ease-out ck-image-caption-highlight;
10
+ @media (forced-colors: none) {
11
+ .ck.ck-editor__editable .image > figcaption.image__caption_highlighted {
12
+ animation: .6s ease-out ck-image-caption-highlight;
14
13
  }
15
14
  }
16
15
 
17
- @media (prefers-reduced-motion: reduce){
18
- .ck.ck-editor__editable .image > figcaption.image__caption_highlighted{
19
- animation:none;
16
+ @media (prefers-reduced-motion: reduce) {
17
+ .ck.ck-editor__editable .image > figcaption.image__caption_highlighted {
18
+ animation: none;
20
19
  }
21
20
  }
22
21
 
23
- @keyframes ck-image-caption-highlight{
24
- 0%{
25
- background-color:var(--ck-color-image-caption-highlighted-background);
22
+ @keyframes ck-image-caption-highlight {
23
+ 0% {
24
+ background-color: var(--ck-color-image-caption-highlighted-background);
26
25
  }
27
26
 
28
- 100%{
29
- background-color:var(--ck-content-color-image-caption-background);
27
+ 100% {
28
+ background-color: var(--ck-content-color-image-caption-background);
30
29
  }
31
30
  }
32
31
 
33
- :is(.ck.ck-editor__editable td, .ck.ck-editor__editable th) .image-inline.image_resized img{
34
- max-width:100%;
32
+ :is(.ck.ck-editor__editable td, .ck.ck-editor__editable th) .image-inline.image_resized img {
33
+ max-width: 100%;
35
34
  }
36
35
 
37
- [dir="ltr"] .ck.ck-button.ck-button_with-text.ck-resize-image-button .ck-button__icon{
38
- margin-right:var(--ck-spacing-standard);
36
+ [dir="ltr"] .ck.ck-button.ck-button_with-text.ck-resize-image-button .ck-button__icon {
37
+ margin-right: var(--ck-spacing-standard);
39
38
  }
40
39
 
41
- [dir="rtl"] .ck.ck-button.ck-button_with-text.ck-resize-image-button .ck-button__icon{
42
- margin-left:var(--ck-spacing-standard);
40
+ [dir="rtl"] .ck.ck-button.ck-button_with-text.ck-resize-image-button .ck-button__icon {
41
+ margin-left: var(--ck-spacing-standard);
43
42
  }
44
43
 
45
- .ck.ck-dropdown .ck-button.ck-resize-image-button .ck-button__label{
46
- width:4em;
44
+ .ck.ck-dropdown .ck-button.ck-resize-image-button .ck-button__label {
45
+ width: 4em;
47
46
  }
48
47
 
49
- :root{
50
- --ck-content-image-style-spacing:1.5em;
51
- --ck-content-inline-image-style-spacing:calc(var(--ck-content-image-style-spacing) / 2);
48
+ :is(.ck.ck-editor__editable .image, .ck.ck-editor__editable .image-inline).ck-appear {
49
+ animation: .7s fadeIn;
52
50
  }
53
51
 
54
- :is(.ck.ck-editor__editable .image, .ck.ck-editor__editable .image-inline).ck-appear{
55
- animation:.7s fadeIn;
56
- }
57
-
58
- @media (prefers-reduced-motion: reduce){
59
- :is(.ck.ck-editor__editable .image, .ck.ck-editor__editable .image-inline).ck-appear{
60
- opacity:1;
61
- animation:none;
52
+ @media (prefers-reduced-motion: reduce) {
53
+ :is(.ck.ck-editor__editable .image, .ck.ck-editor__editable .image-inline).ck-appear {
54
+ opacity: 1;
55
+ animation: none;
62
56
  }
63
57
  }
64
58
 
65
- .ck.ck-editor__editable .image, .ck.ck-editor__editable .image-inline{
66
- position:relative;
59
+ .ck.ck-editor__editable .image, .ck.ck-editor__editable .image-inline {
60
+ position: relative;
67
61
  }
68
62
 
69
- .ck.ck-editor__editable .image .ck-progress-bar, .ck.ck-editor__editable .image-inline .ck-progress-bar{
70
- background:var(--ck-color-upload-bar-background);
71
- width:0;
72
- height:2px;
73
- transition:width .1s;
74
- position:absolute;
75
- top:0;
76
- left:0;
63
+ .ck.ck-editor__editable .image .ck-progress-bar, .ck.ck-editor__editable .image-inline .ck-progress-bar {
64
+ background: var(--ck-color-upload-bar-background);
65
+ width: 0;
66
+ height: 2px;
67
+ transition: width .1s;
68
+ position: absolute;
69
+ top: 0;
70
+ left: 0;
77
71
  }
78
72
 
79
- @keyframes fadeIn{
80
- from{
81
- opacity:0;
73
+ @keyframes fadeIn {
74
+ from {
75
+ opacity: 0;
82
76
  }
83
77
 
84
- to{
85
- opacity:1;
78
+ to {
79
+ opacity: 1;
86
80
  }
87
81
  }
88
82
 
89
- :root{
90
- --ck-color-image-upload-icon:#fff;
91
- --ck-color-image-upload-icon-background:#008a00;
92
- --ck-image-upload-icon-size:20;
93
- --ck-image-upload-icon-width:2px;
94
- --ck-image-upload-icon-is-visible:clamp(0px, 100% - 50px, 1px);
95
- }
96
-
97
- .ck-image-upload-complete-icon{
98
- opacity:0;
99
- background:var(--ck-color-image-upload-icon-background);
100
- font-size:calc(1px * var(--ck-image-upload-icon-size));
101
- width:calc(var(--ck-image-upload-icon-is-visible) * var(--ck-image-upload-icon-size));
102
- height:calc(var(--ck-image-upload-icon-is-visible) * var(--ck-image-upload-icon-size));
103
- top:min(var(--ck-spacing-medium), 6%);
104
- right:min(var(--ck-spacing-medium), 6%);
105
- border-radius:50%;
106
- animation-name:ck-upload-complete-icon-show, ck-upload-complete-icon-hide;
107
- animation-duration:.5s, .5s;
108
- animation-delay:0s, 3s;
109
- animation-fill-mode:forwards, forwards;
110
- display:block;
111
- position:absolute;
112
- overflow:hidden;
113
- }
114
-
115
- .ck-image-upload-complete-icon:after{
116
- opacity:0;
117
- transform-origin:0 0;
118
- border-top:var(--ck-image-upload-icon-width) solid var(--ck-color-image-upload-icon);
119
- border-right:var(--ck-image-upload-icon-width) solid var(--ck-color-image-upload-icon);
120
- box-sizing:border-box;
121
- content:"";
122
- width:0;
123
- height:0;
124
- animation-name:ck-upload-complete-icon-check;
125
- animation-duration:.5s;
126
- animation-delay:.5s;
127
- animation-fill-mode:forwards;
128
- position:absolute;
129
- top:50%;
130
- left:25%;
131
- transform:scaleX(-1) rotate(135deg);
132
- }
133
-
134
- @media (prefers-reduced-motion: reduce){
135
- .ck-image-upload-complete-icon{
136
- animation-duration:0s;
83
+ :root {
84
+ --ck-color-image-upload-icon: #fff;
85
+ --ck-color-image-upload-icon-background: #008a00;
86
+ --ck-image-upload-icon-size: 20;
87
+ --ck-image-upload-icon-width: 2px;
88
+ --ck-image-upload-icon-is-visible: clamp(0px, 100% - 50px, 1px);
89
+ }
90
+
91
+ .ck-image-upload-complete-icon {
92
+ opacity: 0;
93
+ background: var(--ck-color-image-upload-icon-background);
94
+ font-size: calc(1px * var(--ck-image-upload-icon-size));
95
+ width: calc(var(--ck-image-upload-icon-is-visible) * var(--ck-image-upload-icon-size));
96
+ height: calc(var(--ck-image-upload-icon-is-visible) * var(--ck-image-upload-icon-size));
97
+ top: min(var(--ck-spacing-medium), 6%);
98
+ right: min(var(--ck-spacing-medium), 6%);
99
+ border-radius: 50%;
100
+ animation-name: ck-upload-complete-icon-show, ck-upload-complete-icon-hide;
101
+ animation-duration: .5s, .5s;
102
+ animation-delay: 0s, 3s;
103
+ animation-fill-mode: forwards, forwards;
104
+ display: block;
105
+ position: absolute;
106
+ overflow: hidden;
107
+ }
108
+
109
+ .ck-image-upload-complete-icon:after {
110
+ opacity: 0;
111
+ transform-origin: 0 0;
112
+ border-top: var(--ck-image-upload-icon-width) solid var(--ck-color-image-upload-icon);
113
+ border-right: var(--ck-image-upload-icon-width) solid var(--ck-color-image-upload-icon);
114
+ box-sizing: border-box;
115
+ content: "";
116
+ width: 0;
117
+ height: 0;
118
+ animation-name: ck-upload-complete-icon-check;
119
+ animation-duration: .5s;
120
+ animation-delay: .5s;
121
+ animation-fill-mode: forwards;
122
+ position: absolute;
123
+ top: 50%;
124
+ left: 25%;
125
+ transform: scaleX(-1) rotate(135deg);
126
+ }
127
+
128
+ @media (prefers-reduced-motion: reduce) {
129
+ .ck-image-upload-complete-icon {
130
+ animation-duration: 0s;
137
131
  }
138
132
 
139
- .ck-image-upload-complete-icon:after{
140
- opacity:1;
141
- width:.3em;
142
- height:.45em;
143
- animation:none;
133
+ .ck-image-upload-complete-icon:after {
134
+ opacity: 1;
135
+ width: .3em;
136
+ height: .45em;
137
+ animation: none;
144
138
  }
145
139
  }
146
140
 
147
- .ck-image-upload-complete-icon{
148
- z-index:1;
141
+ .ck-image-upload-complete-icon {
142
+ z-index: 1;
149
143
  }
150
144
 
151
- @keyframes ck-upload-complete-icon-show{
152
- from{
153
- opacity:0;
145
+ @keyframes ck-upload-complete-icon-show {
146
+ from {
147
+ opacity: 0;
154
148
  }
155
149
 
156
- to{
157
- opacity:1;
150
+ to {
151
+ opacity: 1;
158
152
  }
159
153
  }
160
154
 
161
- @keyframes ck-upload-complete-icon-hide{
162
- from{
163
- opacity:1;
155
+ @keyframes ck-upload-complete-icon-hide {
156
+ from {
157
+ opacity: 1;
164
158
  }
165
159
 
166
- to{
167
- opacity:0;
160
+ to {
161
+ opacity: 0;
168
162
  }
169
163
  }
170
164
 
171
- @keyframes ck-upload-complete-icon-check{
172
- 0%{
173
- opacity:1;
174
- width:0;
175
- height:0;
165
+ @keyframes ck-upload-complete-icon-check {
166
+ 0% {
167
+ opacity: 1;
168
+ width: 0;
169
+ height: 0;
176
170
  }
177
171
 
178
- 33%{
179
- width:.3em;
180
- height:0;
172
+ 33% {
173
+ width: .3em;
174
+ height: 0;
181
175
  }
182
176
 
183
- 100%{
184
- opacity:1;
185
- width:.3em;
186
- height:.45em;
177
+ 100% {
178
+ opacity: 1;
179
+ width: .3em;
180
+ height: .45em;
187
181
  }
188
182
  }
189
183
 
190
- :root{
191
- --ck-color-upload-placeholder-loader:#b3b3b3;
192
- --ck-upload-placeholder-loader-size:32px;
193
- --ck-upload-placeholder-image-aspect-ratio:2.8;
184
+ :root {
185
+ --ck-color-upload-placeholder-loader: #b3b3b3;
186
+ --ck-upload-placeholder-loader-size: 32px;
187
+ --ck-upload-placeholder-image-aspect-ratio: 2.8;
194
188
  }
195
189
 
196
- .ck .ck-image-upload-placeholder{
197
- width:100%;
198
- margin:0;
190
+ .ck .ck-image-upload-placeholder {
191
+ width: 100%;
192
+ margin: 0;
199
193
  }
200
194
 
201
- .ck .ck-image-upload-placeholder.image-inline{
202
- width:calc(2 * var(--ck-upload-placeholder-loader-size) * var(--ck-upload-placeholder-image-aspect-ratio));
195
+ .ck .ck-image-upload-placeholder.image-inline {
196
+ width: calc(2 * var(--ck-upload-placeholder-loader-size) * var(--ck-upload-placeholder-image-aspect-ratio));
203
197
  }
204
198
 
205
- .ck .ck-image-upload-placeholder img{
206
- aspect-ratio:var(--ck-upload-placeholder-image-aspect-ratio);
199
+ .ck .ck-image-upload-placeholder img {
200
+ aspect-ratio: var(--ck-upload-placeholder-image-aspect-ratio);
207
201
  }
208
202
 
209
- .ck .ck-upload-placeholder-loader{
210
- justify-content:center;
211
- align-items:center;
212
- width:100%;
213
- height:100%;
214
- display:flex;
215
- position:absolute;
216
- top:0;
203
+ .ck .ck-upload-placeholder-loader {
204
+ justify-content: center;
205
+ align-items: center;
206
+ width: 100%;
207
+ height: 100%;
208
+ display: flex;
209
+ position: absolute;
210
+ top: 0;
217
211
  }
218
212
 
219
- .ck .ck-upload-placeholder-loader:before{
220
- width:var(--ck-upload-placeholder-loader-size);
221
- height:var(--ck-upload-placeholder-loader-size);
222
- border-top:3px solid var(--ck-color-upload-placeholder-loader);
223
- content:"";
224
- border-right:2px solid #0000;
225
- border-radius:50%;
226
- animation:1s linear infinite ck-upload-placeholder-loader;
227
- position:relative;
213
+ .ck .ck-upload-placeholder-loader:before {
214
+ width: var(--ck-upload-placeholder-loader-size);
215
+ height: var(--ck-upload-placeholder-loader-size);
216
+ border-top: 3px solid var(--ck-color-upload-placeholder-loader);
217
+ content: "";
218
+ border-right: 2px solid #0000;
219
+ border-radius: 50%;
220
+ animation: 1s linear infinite ck-upload-placeholder-loader;
221
+ position: relative;
228
222
  }
229
223
 
230
- .ck .ck-upload-placeholder-loader{
231
- left:0;
224
+ .ck .ck-upload-placeholder-loader {
225
+ left: 0;
232
226
  }
233
227
 
234
- @keyframes ck-upload-placeholder-loader{
235
- to{
236
- transform:rotate(360deg);
228
+ @keyframes ck-upload-placeholder-loader {
229
+ to {
230
+ transform: rotate(360deg);
237
231
  }
238
232
  }
239
233
 
240
- .ck.ck-editor__editable .image > figcaption.ck-placeholder:before{
241
- padding-left:inherit;
242
- padding-right:inherit;
243
- white-space:nowrap;
244
- text-overflow:ellipsis;
245
- overflow:hidden;
234
+ .ck.ck-editor__editable .image > figcaption.ck-placeholder:before {
235
+ padding-left: inherit;
236
+ padding-right: inherit;
237
+ white-space: nowrap;
238
+ text-overflow: ellipsis;
239
+ overflow: hidden;
246
240
  }
247
241
 
248
- .ck.ck-editor__editable .image{
249
- z-index:1;
242
+ .ck.ck-editor__editable .image {
243
+ z-index: 1;
250
244
  }
251
245
 
252
- .ck.ck-editor__editable .image.ck-widget_selected{
253
- z-index:2;
246
+ .ck.ck-editor__editable .image.ck-widget_selected {
247
+ z-index: 2;
254
248
  }
255
249
 
256
- .ck.ck-editor__editable .image-inline{
257
- z-index:1;
250
+ .ck.ck-editor__editable .image-inline {
251
+ z-index: 1;
258
252
  }
259
253
 
260
- .ck.ck-editor__editable .image-inline.ck-widget_selected{
261
- z-index:2;
254
+ .ck.ck-editor__editable .image-inline.ck-widget_selected {
255
+ z-index: 2;
262
256
  }
263
257
 
264
- .ck.ck-editor__editable .image-inline.ck-widget_selected ::selection{
265
- display:none;
258
+ .ck.ck-editor__editable .image-inline.ck-widget_selected ::selection {
259
+ display: none;
266
260
  }
267
261
 
268
- .ck.ck-editor__editable .image-inline img{
269
- height:auto;
262
+ .ck.ck-editor__editable .image-inline img {
263
+ height: auto;
270
264
  }
271
265
 
272
- :is(.ck.ck-editor__editable td, .ck.ck-editor__editable th) .image-inline img{
273
- max-width:none;
266
+ :is(.ck.ck-editor__editable td, .ck.ck-editor__editable th) .image-inline img {
267
+ max-width: none;
274
268
  }
275
269
 
276
- .ck.ck-editor__editable img.image_placeholder{
277
- background-size:100% 100%;
270
+ .ck.ck-editor__editable img.image_placeholder {
271
+ background-size: 100% 100%;
278
272
  }
279
273
 
280
- :root{
281
- --ck-image-insert-insert-by-url-width:250px;
274
+ :root {
275
+ --ck-image-insert-insert-by-url-width: 250px;
282
276
  }
283
277
 
284
- .ck.ck-image-insert-url{
285
- --ck-input-width:100%;
286
- width:400px;
278
+ .ck.ck-image-insert-url {
279
+ --ck-input-width: 100%;
280
+ width: 400px;
287
281
  }
288
282
 
289
- .ck.ck-image-insert-url .ck-image-insert-url__action-row{
290
- grid-column-gap:var(--ck-spacing-large);
291
- margin-top:var(--ck-spacing-large);
292
- display:grid;
283
+ .ck.ck-image-insert-url .ck-image-insert-url__action-row {
284
+ grid-column-gap: var(--ck-spacing-large);
285
+ margin-top: var(--ck-spacing-large);
286
+ display: grid;
293
287
  }
294
288
 
295
- .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{
296
- justify-content:center;
297
- min-width:auto;
289
+ .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 {
290
+ justify-content: center;
291
+ min-width: auto;
298
292
  }
299
293
 
300
- .ck.ck-image-insert-url .ck-image-insert-url__action-row .ck-button .ck-button__label{
301
- color:var(--ck-color-text);
294
+ .ck.ck-image-insert-url .ck-image-insert-url__action-row .ck-button .ck-button__label {
295
+ color: var(--ck-color-text);
302
296
  }
303
297
 
304
- .ck.ck-image-insert-url .ck-image-insert-url__action-row{
305
- grid-template-columns:repeat(2, 1fr);
298
+ .ck.ck-image-insert-url .ck-image-insert-url__action-row {
299
+ grid-template-columns: repeat(2, 1fr);
306
300
  }
307
301
 
308
- .ck.ck-image-insert-url{
309
- padding:var(--ck-spacing-large) var(--ck-spacing-large) 0;
302
+ .ck.ck-image-insert-url {
303
+ padding: var(--ck-spacing-large) var(--ck-spacing-large) 0;
310
304
  }
311
305
 
312
- .ck.ck-image-insert-form > .ck.ck-button{
313
- width:100%;
314
- display:block;
306
+ .ck.ck-image-insert-form > .ck.ck-button {
307
+ width: 100%;
308
+ display: block;
315
309
  }
316
310
 
317
- [dir="ltr"] :is(.ck.ck-image-insert-form > .ck.ck-button){
318
- text-align:left;
311
+ [dir="ltr"] :is(.ck.ck-image-insert-form > .ck.ck-button) {
312
+ text-align: left;
319
313
  }
320
314
 
321
- [dir="rtl"] :is(.ck.ck-image-insert-form > .ck.ck-button){
322
- text-align:right;
315
+ [dir="rtl"] :is(.ck.ck-image-insert-form > .ck.ck-button) {
316
+ text-align: right;
323
317
  }
324
318
 
325
- .ck.ck-image-insert-form > .ck.ck-collapsible:not(:first-child){
326
- border-top:1px solid var(--ck-color-base-border);
319
+ .ck.ck-image-insert-form > .ck.ck-collapsible:not(:first-child) {
320
+ border-top: 1px solid var(--ck-color-base-border);
327
321
  }
328
322
 
329
- .ck.ck-image-insert-form > .ck.ck-collapsible:not(:last-child){
330
- border-bottom:1px solid var(--ck-color-base-border);
323
+ .ck.ck-image-insert-form > .ck.ck-collapsible:not(:last-child) {
324
+ border-bottom: 1px solid var(--ck-color-base-border);
331
325
  }
332
326
 
333
- .ck.ck-image-insert-form > .ck.ck-collapsible{
334
- min-width:var(--ck-image-insert-insert-by-url-width);
327
+ .ck.ck-image-insert-form > .ck.ck-collapsible {
328
+ min-width: var(--ck-image-insert-insert-by-url-width);
335
329
  }
336
330
 
337
- .ck.ck-image-insert-form > .ck.ck-image-insert-url{
338
- min-width:var(--ck-image-insert-insert-by-url-width);
339
- padding:var(--ck-spacing-large);
331
+ .ck.ck-image-insert-form > .ck.ck-image-insert-url {
332
+ min-width: var(--ck-image-insert-insert-by-url-width);
333
+ padding: var(--ck-spacing-large);
340
334
  }
341
335
 
342
- .ck.ck-image-insert-form:focus{
343
- outline:none;
336
+ .ck.ck-image-insert-form:focus {
337
+ outline: none;
344
338
  }
345
339
 
346
- :root{
347
- --ck-image-custom-resize-form-width:340px;
340
+ :root {
341
+ --ck-image-custom-resize-form-width: 340px;
348
342
  }
349
343
 
350
- @media screen and (width <= 600px){
351
- :root{
352
- --ck-image-custom-resize-form-width:300px;
344
+ @media screen and (width <= 600px) {
345
+ :root {
346
+ --ck-image-custom-resize-form-width: 300px;
353
347
  }
354
348
  }
355
349
 
356
- .ck.ck-image-custom-resize-form.ck-responsive-form{
357
- width:var(--ck-image-custom-resize-form-width);
350
+ .ck.ck-image-custom-resize-form.ck-responsive-form {
351
+ width: var(--ck-image-custom-resize-form-width);
358
352
  }
359
353
 
360
- :root{
361
- --ck-text-alternative-form-width:340px;
354
+ :root {
355
+ --ck-text-alternative-form-width: 340px;
362
356
  }
363
357
 
364
- @media screen and (width <= 600px){
365
- :root{
366
- --ck-text-alternative-form-width:300px;
358
+ @media screen and (width <= 600px) {
359
+ :root {
360
+ --ck-text-alternative-form-width: 300px;
367
361
  }
368
362
  }
369
363
 
370
- .ck.ck-text-alternative-form.ck-responsive-form{
371
- width:var(--ck-text-alternative-form-width);
372
- }
364
+ .ck.ck-text-alternative-form.ck-responsive-form {
365
+ width: var(--ck-text-alternative-form-width);
366
+ }
367
+
368
+ /*# sourceMappingURL=index-editor.css.map */