@ckeditor/ckeditor5-theme-lark 41.3.0-alpha.3 → 41.3.0
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.
- package/package.json +2 -3
- package/theme/ckeditor5-editor-classic/classiceditor.css +8 -6
- package/theme/ckeditor5-ui/components/button/button.css +1 -2
- package/theme/ckeditor5-ui/components/dropdown/listdropdown.css +3 -3
- package/theme/ckeditor5-ui/components/list/list.css +3 -8
- package/theme/ckeditor5-ui/components/menubar/menubar.css +15 -0
- package/theme/ckeditor5-ui/components/menubar/menubarmenu.css +13 -0
- package/theme/ckeditor5-ui/components/menubar/menubarmenubutton.css +117 -0
- package/theme/ckeditor5-ui/components/menubar/menubarmenulistitem.css +12 -0
- package/theme/ckeditor5-ui/components/menubar/menubarmenulistitembutton.css +50 -0
- package/theme/ckeditor5-ui/components/menubar/menubarmenupanel.css +47 -0
- package/theme/ckeditor5-ui/globals/_reset.css +0 -5
- package/dist/content-index.css +0 -12
- package/dist/editor-index.css +0 -2703
- package/dist/index.css +0 -4703
- package/dist/index.css.map +0 -1
- package/dist/index.js +0 -6
- package/dist/index.js.map +0 -1
- package/theme/index.css +0 -86
package/dist/index.css
DELETED
@@ -1,4703 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4
|
-
*/
|
5
|
-
/*
|
6
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
7
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
8
|
-
*/
|
9
|
-
|
10
|
-
/* Reset */
|
11
|
-
/*
|
12
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
13
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
14
|
-
*/
|
15
|
-
/*
|
16
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
17
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
18
|
-
*/
|
19
|
-
:root {
|
20
|
-
--ck-color-base-foreground: hsl(0, 0%, 98%);
|
21
|
-
--ck-color-base-background: hsl(0, 0%, 100%);
|
22
|
-
--ck-color-base-border: hsl(220, 6%, 81%);
|
23
|
-
--ck-color-base-action: hsl(104, 50.2%, 42.5%);
|
24
|
-
--ck-color-base-focus: hsl(209, 92%, 70%);
|
25
|
-
--ck-color-base-text: hsl(0, 0%, 20%);
|
26
|
-
--ck-color-base-active: hsl(218.1, 100%, 58%);
|
27
|
-
--ck-color-base-active-focus: hsl(218.2, 100%, 52.5%);
|
28
|
-
--ck-color-base-error: hsl(15, 100%, 43%);
|
29
|
-
|
30
|
-
/* -- Generic colors ------------------------------------------------------------------------ */
|
31
|
-
|
32
|
-
--ck-color-focus-border-coordinates: 218, 81.8%, 56.9%;
|
33
|
-
--ck-color-focus-border: hsl(var(--ck-color-focus-border-coordinates));
|
34
|
-
--ck-color-focus-outer-shadow: hsl(212.4, 89.3%, 89%);
|
35
|
-
--ck-color-focus-disabled-shadow: hsla(209, 90%, 72%,.3);
|
36
|
-
--ck-color-focus-error-shadow: hsla(9,100%,56%,.3);
|
37
|
-
--ck-color-text: var(--ck-color-base-text);
|
38
|
-
--ck-color-shadow-drop: hsla(0, 0%, 0%, 0.15);
|
39
|
-
--ck-color-shadow-drop-active: hsla(0, 0%, 0%, 0.2);
|
40
|
-
--ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1);
|
41
|
-
|
42
|
-
/* -- Buttons ------------------------------------------------------------------------------- */
|
43
|
-
|
44
|
-
--ck-color-button-default-background: transparent;
|
45
|
-
--ck-color-button-default-hover-background: hsl(0, 0%, 94.1%);
|
46
|
-
--ck-color-button-default-active-background: hsl(0, 0%, 94.1%);
|
47
|
-
--ck-color-button-default-disabled-background: transparent;
|
48
|
-
|
49
|
-
--ck-color-button-on-background: hsl(212, 100%, 97.1%);
|
50
|
-
--ck-color-button-on-hover-background: hsl(211.7, 100%, 92.9%);
|
51
|
-
--ck-color-button-on-active-background: hsl(211.7, 100%, 92.9%);
|
52
|
-
--ck-color-button-on-disabled-background: hsl(211, 15%, 95%);
|
53
|
-
--ck-color-button-on-color: hsl(218.1, 100%, 58%);
|
54
|
-
|
55
|
-
|
56
|
-
--ck-color-button-action-background: var(--ck-color-base-action);
|
57
|
-
--ck-color-button-action-hover-background: hsl(104, 53.2%, 40.2%);
|
58
|
-
--ck-color-button-action-active-background: hsl(104, 53.2%, 40.2%);
|
59
|
-
--ck-color-button-action-disabled-background: hsl(104, 44%, 58%);
|
60
|
-
--ck-color-button-action-text: var(--ck-color-base-background);
|
61
|
-
|
62
|
-
--ck-color-button-save: hsl(120, 100%, 27%);
|
63
|
-
--ck-color-button-cancel: hsl(15, 100%, 43%);
|
64
|
-
|
65
|
-
--ck-color-switch-button-off-background: hsl(0, 0%, 57.6%);
|
66
|
-
--ck-color-switch-button-off-hover-background: hsl(0, 0%, 49%);
|
67
|
-
--ck-color-switch-button-on-background: var(--ck-color-button-action-background);
|
68
|
-
--ck-color-switch-button-on-hover-background: hsl(104, 53.2%, 40.2%);
|
69
|
-
--ck-color-switch-button-inner-background: var(--ck-color-base-background);
|
70
|
-
--ck-color-switch-button-inner-shadow: hsla(0, 0%, 0%, 0.1);
|
71
|
-
|
72
|
-
/* -- Dropdown ------------------------------------------------------------------------------ */
|
73
|
-
|
74
|
-
--ck-color-dropdown-panel-background: var(--ck-color-base-background);
|
75
|
-
--ck-color-dropdown-panel-border: var(--ck-color-base-border);
|
76
|
-
|
77
|
-
/* -- Dialog -------------------------------------------------------------------------------- */
|
78
|
-
|
79
|
-
--ck-color-dialog-background: var(--ck-custom-background);
|
80
|
-
--ck-color-dialog-form-header-border: var(--ck-custom-border);
|
81
|
-
|
82
|
-
/* -- Input --------------------------------------------------------------------------------- */
|
83
|
-
|
84
|
-
--ck-color-input-background: var(--ck-color-base-background);
|
85
|
-
--ck-color-input-border: var(--ck-color-base-border);
|
86
|
-
--ck-color-input-error-border: var(--ck-color-base-error);
|
87
|
-
--ck-color-input-text: var(--ck-color-base-text);
|
88
|
-
--ck-color-input-disabled-background: hsl(0, 0%, 95%);
|
89
|
-
--ck-color-input-disabled-border: var(--ck-color-base-border);
|
90
|
-
--ck-color-input-disabled-text: hsl(0, 0%, 46%);
|
91
|
-
|
92
|
-
/* -- List ---------------------------------------------------------------------------------- */
|
93
|
-
|
94
|
-
--ck-color-list-background: var(--ck-color-base-background);
|
95
|
-
--ck-color-list-button-hover-background: var(--ck-color-button-default-hover-background);
|
96
|
-
--ck-color-list-button-on-background: var(--ck-color-button-on-color);
|
97
|
-
--ck-color-list-button-on-background-focus: var(--ck-color-button-on-color);
|
98
|
-
--ck-color-list-button-on-text: var(--ck-color-base-background);
|
99
|
-
|
100
|
-
/* -- Panel --------------------------------------------------------------------------------- */
|
101
|
-
|
102
|
-
--ck-color-panel-background: var(--ck-color-base-background);
|
103
|
-
--ck-color-panel-border: var(--ck-color-base-border);
|
104
|
-
|
105
|
-
/* -- Toolbar ------------------------------------------------------------------------------- */
|
106
|
-
|
107
|
-
--ck-color-toolbar-background: var(--ck-color-base-background);
|
108
|
-
--ck-color-toolbar-border: var(--ck-color-base-border);
|
109
|
-
|
110
|
-
/* -- Tooltip ------------------------------------------------------------------------------- */
|
111
|
-
|
112
|
-
--ck-color-tooltip-background: var(--ck-color-base-text);
|
113
|
-
--ck-color-tooltip-text: var(--ck-color-base-background);
|
114
|
-
|
115
|
-
/* -- Engine -------------------------------------------------------------------------------- */
|
116
|
-
|
117
|
-
--ck-color-engine-placeholder-text: hsl(0, 0%, 44%);
|
118
|
-
|
119
|
-
/* -- Upload -------------------------------------------------------------------------------- */
|
120
|
-
|
121
|
-
--ck-color-upload-bar-background: hsl(209, 92%, 70%);
|
122
|
-
|
123
|
-
/* -- Link -------------------------------------------------------------------------------- */
|
124
|
-
|
125
|
-
--ck-color-link-default: hsl(240, 100%, 47%);
|
126
|
-
--ck-color-link-selected-background: hsla(201, 100%, 56%, 0.1);
|
127
|
-
--ck-color-link-fake-selection: hsla(201, 100%, 56%, 0.3);
|
128
|
-
|
129
|
-
/* -- Search result highlight ---------------------------------------------------------------- */
|
130
|
-
|
131
|
-
--ck-color-highlight-background: hsl(60, 100%, 50%);
|
132
|
-
|
133
|
-
/* -- Generic colors ------------------------------------------------------------------------- */
|
134
|
-
|
135
|
-
--ck-color-light-red: hsl(0, 100%, 90%);
|
136
|
-
}
|
137
|
-
/*
|
138
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
139
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
140
|
-
*/
|
141
|
-
:root {
|
142
|
-
/**
|
143
|
-
* An opacity value of disabled UI item.
|
144
|
-
*/
|
145
|
-
--ck-disabled-opacity: .5;
|
146
|
-
}
|
147
|
-
/*
|
148
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
149
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
150
|
-
*/
|
151
|
-
:root {
|
152
|
-
/**
|
153
|
-
* The geometry of the of focused element's outer shadow.
|
154
|
-
*/
|
155
|
-
--ck-focus-outer-shadow-geometry: 0 0 0 3px;
|
156
|
-
|
157
|
-
/**
|
158
|
-
* A visual style of focused element's outer shadow.
|
159
|
-
*/
|
160
|
-
--ck-focus-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-outer-shadow);
|
161
|
-
|
162
|
-
/**
|
163
|
-
* A visual style of focused element's outer shadow (when disabled).
|
164
|
-
*/
|
165
|
-
--ck-focus-disabled-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-disabled-shadow);
|
166
|
-
|
167
|
-
/**
|
168
|
-
* A visual style of focused element's outer shadow (when has errors).
|
169
|
-
*/
|
170
|
-
--ck-focus-error-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-error-shadow);
|
171
|
-
|
172
|
-
/**
|
173
|
-
* A visual style of focused element's border or outline.
|
174
|
-
*/
|
175
|
-
--ck-focus-ring: 1px solid var(--ck-color-focus-border);
|
176
|
-
}
|
177
|
-
/*
|
178
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
179
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
180
|
-
*/
|
181
|
-
:root {
|
182
|
-
--ck-font-size-base: 13px;
|
183
|
-
--ck-line-height-base: 1.84615;
|
184
|
-
--ck-font-face: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
|
185
|
-
|
186
|
-
--ck-font-size-tiny: 0.7em;
|
187
|
-
--ck-font-size-small: 0.75em;
|
188
|
-
--ck-font-size-normal: 1em;
|
189
|
-
--ck-font-size-big: 1.4em;
|
190
|
-
--ck-font-size-large: 1.8em;
|
191
|
-
}
|
192
|
-
/*
|
193
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
194
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
195
|
-
*/
|
196
|
-
:root {
|
197
|
-
/* This is super-important. This is **manually** adjusted so a button without an icon
|
198
|
-
is never smaller than a button with icon, additionally making sure that text-less buttons
|
199
|
-
are perfect squares. The value is also shared by other components which should stay "in-line"
|
200
|
-
with buttons. */
|
201
|
-
--ck-ui-component-min-height: 2.3em;
|
202
|
-
}
|
203
|
-
/**
|
204
|
-
* Resets an element, ignoring its children.
|
205
|
-
*/
|
206
|
-
.ck.ck-reset,
|
207
|
-
.ck.ck-reset_all,
|
208
|
-
.ck-reset_all *:not(.ck-reset_all-excluded *) {
|
209
|
-
box-sizing: border-box;
|
210
|
-
width: auto;
|
211
|
-
height: auto;
|
212
|
-
position: static;
|
213
|
-
|
214
|
-
/* Do not include inheritable rules here. */
|
215
|
-
margin: 0;
|
216
|
-
padding: 0;
|
217
|
-
border: 0;
|
218
|
-
background: transparent;
|
219
|
-
text-decoration: none;
|
220
|
-
vertical-align: middle;
|
221
|
-
transition: none;
|
222
|
-
|
223
|
-
/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/105 */
|
224
|
-
word-wrap: break-word;
|
225
|
-
}
|
226
|
-
/**
|
227
|
-
* Resets an element AND its children.
|
228
|
-
*/
|
229
|
-
.ck.ck-reset_all,
|
230
|
-
.ck-reset_all *:not(.ck-reset_all-excluded *) {
|
231
|
-
/* These are rule inherited by all children elements. */
|
232
|
-
border-collapse: collapse;
|
233
|
-
font: normal normal normal var(--ck-font-size-base)/var(--ck-line-height-base) var(--ck-font-face);
|
234
|
-
color: var(--ck-color-text);
|
235
|
-
text-align: left;
|
236
|
-
white-space: nowrap;
|
237
|
-
cursor: auto;
|
238
|
-
float: none;
|
239
|
-
}
|
240
|
-
.ck-reset_all .ck-rtl *:not(.ck-reset_all-excluded *) {
|
241
|
-
text-align: right;
|
242
|
-
}
|
243
|
-
.ck-reset_all iframe:not(.ck-reset_all-excluded *) {
|
244
|
-
/* For IE */
|
245
|
-
vertical-align: inherit;
|
246
|
-
}
|
247
|
-
.ck-reset_all textarea:not(.ck-reset_all-excluded *) {
|
248
|
-
white-space: pre-wrap;
|
249
|
-
}
|
250
|
-
.ck-reset_all textarea:not(.ck-reset_all-excluded *),
|
251
|
-
.ck-reset_all input[type="text"]:not(.ck-reset_all-excluded *),
|
252
|
-
.ck-reset_all input[type="password"]:not(.ck-reset_all-excluded *) {
|
253
|
-
cursor: text;
|
254
|
-
}
|
255
|
-
.ck-reset_all textarea[disabled]:not(.ck-reset_all-excluded *),
|
256
|
-
.ck-reset_all input[type="text"][disabled]:not(.ck-reset_all-excluded *),
|
257
|
-
.ck-reset_all input[type="password"][disabled]:not(.ck-reset_all-excluded *) {
|
258
|
-
cursor: default;
|
259
|
-
}
|
260
|
-
.ck-reset_all fieldset:not(.ck-reset_all-excluded *) {
|
261
|
-
padding: 10px;
|
262
|
-
border: 2px groove hsl(255, 7%, 88%);
|
263
|
-
}
|
264
|
-
.ck-reset_all button:not(.ck-reset_all-excluded *)::-moz-focus-inner {
|
265
|
-
/* See http://stackoverflow.com/questions/5517744/remove-extra-button-spacing-padding-in-firefox */
|
266
|
-
padding: 0;
|
267
|
-
border: 0
|
268
|
-
}
|
269
|
-
/**
|
270
|
-
* Default UI rules for RTL languages.
|
271
|
-
*/
|
272
|
-
.ck[dir="rtl"],
|
273
|
-
.ck[dir="rtl"] .ck {
|
274
|
-
text-align: right;
|
275
|
-
}
|
276
|
-
/*
|
277
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
278
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
279
|
-
*/
|
280
|
-
/**
|
281
|
-
* Default border-radius value.
|
282
|
-
*/
|
283
|
-
:root{
|
284
|
-
--ck-border-radius: 2px;
|
285
|
-
}
|
286
|
-
/*
|
287
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
288
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
289
|
-
*/
|
290
|
-
:root {
|
291
|
-
/**
|
292
|
-
* A visual style of element's inner shadow (i.e. input).
|
293
|
-
*/
|
294
|
-
--ck-inner-shadow: 2px 2px 3px var(--ck-color-shadow-inner) inset;
|
295
|
-
|
296
|
-
/**
|
297
|
-
* A visual style of element's drop shadow (i.e. panel).
|
298
|
-
*/
|
299
|
-
--ck-drop-shadow: 0 1px 2px 1px var(--ck-color-shadow-drop);
|
300
|
-
|
301
|
-
/**
|
302
|
-
* A visual style of element's active shadow (i.e. comment or suggestion).
|
303
|
-
*/
|
304
|
-
--ck-drop-shadow-active: 0 3px 6px 1px var(--ck-color-shadow-drop-active);
|
305
|
-
}
|
306
|
-
/*
|
307
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
308
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
309
|
-
*/
|
310
|
-
:root {
|
311
|
-
--ck-spacing-unit: 0.6em;
|
312
|
-
--ck-spacing-large: calc(var(--ck-spacing-unit) * 1.5);
|
313
|
-
--ck-spacing-standard: var(--ck-spacing-unit);
|
314
|
-
--ck-spacing-medium: calc(var(--ck-spacing-unit) * 0.8);
|
315
|
-
--ck-spacing-small: calc(var(--ck-spacing-unit) * 0.5);
|
316
|
-
--ck-spacing-tiny: calc(var(--ck-spacing-unit) * 0.3);
|
317
|
-
--ck-spacing-extra-tiny: calc(var(--ck-spacing-unit) * 0.16);
|
318
|
-
}
|
319
|
-
|
320
|
-
/* Components */
|
321
|
-
/*
|
322
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
323
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
324
|
-
*/
|
325
|
-
/*
|
326
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
327
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
328
|
-
*/
|
329
|
-
/**
|
330
|
-
* Implements rounded corner interface for .ck-rounded-corners class.
|
331
|
-
*
|
332
|
-
* @see $ck-border-radius
|
333
|
-
*/
|
334
|
-
/*
|
335
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
336
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
337
|
-
*/
|
338
|
-
/**
|
339
|
-
* A helper to combine multiple shadows.
|
340
|
-
*/
|
341
|
-
/**
|
342
|
-
* Gives an element a drop shadow so it looks like a floating panel.
|
343
|
-
*/
|
344
|
-
.ck.ck-autocomplete > .ck-search__results {
|
345
|
-
border-radius: 0;
|
346
|
-
}
|
347
|
-
.ck-rounded-corners .ck.ck-autocomplete > .ck-search__results, .ck.ck-autocomplete > .ck-search__results.ck-rounded-corners {
|
348
|
-
border-radius: var(--ck-border-radius);
|
349
|
-
}
|
350
|
-
.ck.ck-autocomplete > .ck-search__results {
|
351
|
-
box-shadow: var(--ck-drop-shadow), 0 0;
|
352
|
-
|
353
|
-
max-height: 200px;
|
354
|
-
overflow-y: auto;
|
355
|
-
background: var(--ck-color-base-background);
|
356
|
-
border: 1px solid var(--ck-color-dropdown-panel-border);
|
357
|
-
min-width: auto;
|
358
|
-
}
|
359
|
-
.ck.ck-autocomplete > .ck-search__results.ck-search__results_n {
|
360
|
-
border-bottom-left-radius: 0;
|
361
|
-
border-bottom-right-radius: 0;
|
362
|
-
|
363
|
-
/* Prevent duplicated borders between the input and the results pane. */
|
364
|
-
margin-bottom: -1px;
|
365
|
-
}
|
366
|
-
.ck.ck-autocomplete > .ck-search__results.ck-search__results_s {
|
367
|
-
border-top-left-radius: 0;
|
368
|
-
border-top-right-radius: 0;
|
369
|
-
|
370
|
-
/* Prevent duplicated borders between the input and the results pane. */
|
371
|
-
margin-top: -1px;
|
372
|
-
}
|
373
|
-
/*
|
374
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
375
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
376
|
-
*/
|
377
|
-
/*
|
378
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
379
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
380
|
-
*/
|
381
|
-
/**
|
382
|
-
* A visual style of focused element's border.
|
383
|
-
*/
|
384
|
-
/*
|
385
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
386
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
387
|
-
*/
|
388
|
-
/**
|
389
|
-
* A helper to combine multiple shadows.
|
390
|
-
*/
|
391
|
-
/**
|
392
|
-
* Gives an element a drop shadow so it looks like a floating panel.
|
393
|
-
*/
|
394
|
-
/*
|
395
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
396
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
397
|
-
*/
|
398
|
-
/**
|
399
|
-
* A class which indicates that an element holding it is disabled.
|
400
|
-
*/
|
401
|
-
/*
|
402
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
403
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
404
|
-
*/
|
405
|
-
/**
|
406
|
-
* Implements rounded corner interface for .ck-rounded-corners class.
|
407
|
-
*
|
408
|
-
* @see $ck-border-radius
|
409
|
-
*/
|
410
|
-
/*
|
411
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
412
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
413
|
-
*/
|
414
|
-
/**
|
415
|
-
* Implements a button of given background color.
|
416
|
-
*
|
417
|
-
* @param {String} $background - Background color of the button.
|
418
|
-
* @param {String} $border - Border color of the button.
|
419
|
-
*/
|
420
|
-
/*
|
421
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
422
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
423
|
-
*/
|
424
|
-
.ck.ck-button,
|
425
|
-
a.ck.ck-button {
|
426
|
-
background: var(--ck-color-button-default-background);
|
427
|
-
border-radius: 0;
|
428
|
-
|
429
|
-
white-space: nowrap;
|
430
|
-
cursor: default;
|
431
|
-
vertical-align: middle;
|
432
|
-
padding: var(--ck-spacing-tiny);
|
433
|
-
text-align: center;
|
434
|
-
|
435
|
-
/* A very important piece of styling. Go to variable declaration to learn more. */
|
436
|
-
min-width: var(--ck-ui-component-min-height);
|
437
|
-
min-height: var(--ck-ui-component-min-height);
|
438
|
-
|
439
|
-
/* Normalize the height of the line. Removing this will break consistent height
|
440
|
-
among text and text-less buttons (with icons). */
|
441
|
-
line-height: 1;
|
442
|
-
|
443
|
-
/* Enable font size inheritance, which allows fluid UI scaling. */
|
444
|
-
font-size: inherit;
|
445
|
-
|
446
|
-
/* Avoid flickering when the foucs border shows up. */
|
447
|
-
border: 1px solid transparent;
|
448
|
-
|
449
|
-
/* Apply some smooth transition to the box-shadow and border. */
|
450
|
-
transition: box-shadow .2s ease-in-out, border .2s ease-in-out;
|
451
|
-
|
452
|
-
/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/189 */
|
453
|
-
-webkit-appearance: none;
|
454
|
-
}
|
455
|
-
.ck.ck-button:not(.ck-disabled):hover, a.ck.ck-button:not(.ck-disabled):hover {
|
456
|
-
background: var(--ck-color-button-default-hover-background);
|
457
|
-
}
|
458
|
-
.ck.ck-button:not(.ck-disabled):active, a.ck.ck-button:not(.ck-disabled):active {
|
459
|
-
background: var(--ck-color-button-default-active-background);
|
460
|
-
}
|
461
|
-
/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/98 */
|
462
|
-
.ck.ck-button.ck-disabled, a.ck.ck-button.ck-disabled {
|
463
|
-
background: var(--ck-color-button-default-disabled-background);
|
464
|
-
}
|
465
|
-
.ck-rounded-corners .ck.ck-button,
|
466
|
-
.ck-rounded-corners a.ck.ck-button,
|
467
|
-
.ck.ck-button.ck-rounded-corners,
|
468
|
-
a.ck.ck-button.ck-rounded-corners {
|
469
|
-
border-radius: var(--ck-border-radius);
|
470
|
-
}
|
471
|
-
.ck.ck-button:active,
|
472
|
-
a.ck.ck-button:active,
|
473
|
-
.ck.ck-button:focus,
|
474
|
-
a.ck.ck-button:focus {
|
475
|
-
/* Disable native outline. */
|
476
|
-
outline: none;
|
477
|
-
border: var(--ck-focus-ring);
|
478
|
-
box-shadow: var(--ck-focus-outer-shadow), 0 0;
|
479
|
-
}
|
480
|
-
/* Allow icon coloring using the text "color" property. */
|
481
|
-
.ck.ck-button .ck-button__icon use,
|
482
|
-
a.ck.ck-button .ck-button__icon use,
|
483
|
-
.ck.ck-button .ck-button__icon use *,
|
484
|
-
a.ck.ck-button .ck-button__icon use * {
|
485
|
-
color: inherit;
|
486
|
-
}
|
487
|
-
.ck.ck-button .ck-button__label, a.ck.ck-button .ck-button__label {
|
488
|
-
/* Enable font size inheritance, which allows fluid UI scaling. */
|
489
|
-
font-size: inherit;
|
490
|
-
font-weight: inherit;
|
491
|
-
color: inherit;
|
492
|
-
cursor: inherit;
|
493
|
-
|
494
|
-
/* Must be consistent with .ck-icon's vertical align. Otherwise, buttons with and
|
495
|
-
without labels (but with icons) have different sizes in Chrome */
|
496
|
-
vertical-align: middle;
|
497
|
-
}
|
498
|
-
[dir="ltr"] .ck.ck-button .ck-button__label, [dir="ltr"] a.ck.ck-button .ck-button__label {
|
499
|
-
text-align: left;
|
500
|
-
}
|
501
|
-
[dir="rtl"] .ck.ck-button .ck-button__label, [dir="rtl"] a.ck.ck-button .ck-button__label {
|
502
|
-
text-align: right;
|
503
|
-
}
|
504
|
-
.ck.ck-button .ck-button__keystroke, a.ck.ck-button .ck-button__keystroke {
|
505
|
-
color: inherit;
|
506
|
-
}
|
507
|
-
[dir="ltr"] .ck.ck-button .ck-button__keystroke, [dir="ltr"] a.ck.ck-button .ck-button__keystroke {
|
508
|
-
margin-left: var(--ck-spacing-large);
|
509
|
-
}
|
510
|
-
[dir="rtl"] .ck.ck-button .ck-button__keystroke, [dir="rtl"] a.ck.ck-button .ck-button__keystroke {
|
511
|
-
margin-right: var(--ck-spacing-large);
|
512
|
-
}
|
513
|
-
.ck.ck-button .ck-button__keystroke, a.ck.ck-button .ck-button__keystroke {
|
514
|
-
|
515
|
-
font-weight: bold;
|
516
|
-
opacity: .7;
|
517
|
-
}
|
518
|
-
/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */
|
519
|
-
.ck.ck-button.ck-disabled:active,
|
520
|
-
a.ck.ck-button.ck-disabled:active,
|
521
|
-
.ck.ck-button.ck-disabled:focus,
|
522
|
-
a.ck.ck-button.ck-disabled:focus {
|
523
|
-
/* The disabled button should have a slightly less visible shadow when focused. */
|
524
|
-
box-shadow: var(--ck-focus-disabled-outer-shadow), 0 0;
|
525
|
-
}
|
526
|
-
.ck.ck-button.ck-disabled .ck-button__icon, a.ck.ck-button.ck-disabled .ck-button__icon {
|
527
|
-
opacity: var(--ck-disabled-opacity);
|
528
|
-
}
|
529
|
-
/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/98 */
|
530
|
-
.ck.ck-button.ck-disabled .ck-button__label, a.ck.ck-button.ck-disabled .ck-button__label {
|
531
|
-
opacity: var(--ck-disabled-opacity);
|
532
|
-
}
|
533
|
-
.ck.ck-button.ck-disabled .ck-button__keystroke, a.ck.ck-button.ck-disabled .ck-button__keystroke {
|
534
|
-
opacity: .3;
|
535
|
-
}
|
536
|
-
.ck.ck-button.ck-button_with-text, a.ck.ck-button.ck-button_with-text {
|
537
|
-
padding: var(--ck-spacing-tiny) var(--ck-spacing-standard);
|
538
|
-
|
539
|
-
/* stylelint-disable-next-line no-descending-specificity */
|
540
|
-
}
|
541
|
-
[dir="ltr"] .ck.ck-button.ck-button_with-text .ck-button__icon, [dir="ltr"] a.ck.ck-button.ck-button_with-text .ck-button__icon {
|
542
|
-
margin-left: calc(-1 * var(--ck-spacing-small));
|
543
|
-
margin-right: var(--ck-spacing-small);
|
544
|
-
}
|
545
|
-
[dir="rtl"] .ck.ck-button.ck-button_with-text .ck-button__icon, [dir="rtl"] a.ck.ck-button.ck-button_with-text .ck-button__icon {
|
546
|
-
margin-right: calc(-1 * var(--ck-spacing-small));
|
547
|
-
margin-left: var(--ck-spacing-small);
|
548
|
-
}
|
549
|
-
/* stylelint-disable-next-line no-descending-specificity */
|
550
|
-
.ck.ck-button.ck-button_with-keystroke .ck-button__label, a.ck.ck-button.ck-button_with-keystroke .ck-button__label {
|
551
|
-
flex-grow: 1;
|
552
|
-
}
|
553
|
-
/* A style of the button which is currently on, e.g. its feature is active. */
|
554
|
-
.ck.ck-button.ck-on, a.ck.ck-button.ck-on {
|
555
|
-
background: var(--ck-color-button-on-background);
|
556
|
-
|
557
|
-
color: var(--ck-color-button-on-color);
|
558
|
-
}
|
559
|
-
.ck.ck-button.ck-on:not(.ck-disabled):hover, a.ck.ck-button.ck-on:not(.ck-disabled):hover {
|
560
|
-
background: var(--ck-color-button-on-hover-background);
|
561
|
-
}
|
562
|
-
.ck.ck-button.ck-on:not(.ck-disabled):active, a.ck.ck-button.ck-on:not(.ck-disabled):active {
|
563
|
-
background: var(--ck-color-button-on-active-background);
|
564
|
-
}
|
565
|
-
/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/98 */
|
566
|
-
.ck.ck-button.ck-on.ck-disabled, a.ck.ck-button.ck-on.ck-disabled {
|
567
|
-
background: var(--ck-color-button-on-disabled-background);
|
568
|
-
}
|
569
|
-
.ck.ck-button.ck-button-save, a.ck.ck-button.ck-button-save {
|
570
|
-
color: var(--ck-color-button-save);
|
571
|
-
}
|
572
|
-
.ck.ck-button.ck-button-cancel, a.ck.ck-button.ck-button-cancel {
|
573
|
-
color: var(--ck-color-button-cancel);
|
574
|
-
}
|
575
|
-
/* A style of the button which handles the primary action. */
|
576
|
-
.ck.ck-button-action,
|
577
|
-
a.ck.ck-button-action {
|
578
|
-
background: var(--ck-color-button-action-background);
|
579
|
-
|
580
|
-
color: var(--ck-color-button-action-text);
|
581
|
-
}
|
582
|
-
.ck.ck-button-action:not(.ck-disabled):hover, a.ck.ck-button-action:not(.ck-disabled):hover {
|
583
|
-
background: var(--ck-color-button-action-hover-background);
|
584
|
-
}
|
585
|
-
.ck.ck-button-action:not(.ck-disabled):active, a.ck.ck-button-action:not(.ck-disabled):active {
|
586
|
-
background: var(--ck-color-button-action-active-background);
|
587
|
-
}
|
588
|
-
/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/98 */
|
589
|
-
.ck.ck-button-action.ck-disabled, a.ck.ck-button-action.ck-disabled {
|
590
|
-
background: var(--ck-color-button-action-disabled-background);
|
591
|
-
}
|
592
|
-
.ck.ck-button-bold,
|
593
|
-
a.ck.ck-button-bold {
|
594
|
-
font-weight: bold;
|
595
|
-
}
|
596
|
-
/*
|
597
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
598
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
599
|
-
*/
|
600
|
-
/*
|
601
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
602
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
603
|
-
*/
|
604
|
-
/**
|
605
|
-
* Implements rounded corner interface for .ck-rounded-corners class.
|
606
|
-
*
|
607
|
-
* @see $ck-border-radius
|
608
|
-
*/
|
609
|
-
/*
|
610
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
611
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
612
|
-
*/
|
613
|
-
/**
|
614
|
-
* A class which indicates that an element holding it is disabled.
|
615
|
-
*/
|
616
|
-
/*
|
617
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
618
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
619
|
-
*/
|
620
|
-
/* Note: To avoid rendering issues (aliasing) but to preserve the responsive nature
|
621
|
-
of the component, floating–point numbers have been used which, for the default font size
|
622
|
-
(see: --ck-font-size-base), will generate simple integers. */
|
623
|
-
:root {
|
624
|
-
/* 34px at 13px font-size */
|
625
|
-
--ck-switch-button-toggle-width: 2.6153846154em;
|
626
|
-
/* 14px at 13px font-size */
|
627
|
-
--ck-switch-button-toggle-inner-size: calc(1.0769230769em + 1px);
|
628
|
-
--ck-switch-button-translation: calc(
|
629
|
-
var(--ck-switch-button-toggle-width) -
|
630
|
-
var(--ck-switch-button-toggle-inner-size) -
|
631
|
-
2px /* Border */
|
632
|
-
);
|
633
|
-
--ck-switch-button-inner-hover-shadow: 0 0 0 5px var(--ck-color-switch-button-inner-shadow);
|
634
|
-
}
|
635
|
-
/* Unlike a regular button, the switch button text color and background should never change.
|
636
|
-
* Changing toggle switch (background, outline) is enough to carry the information about the
|
637
|
-
* state of the entire component (https://github.com/ckeditor/ckeditor5/issues/12519)
|
638
|
-
*/
|
639
|
-
.ck.ck-button.ck-switchbutton, .ck.ck-button.ck-switchbutton:hover, .ck.ck-button.ck-switchbutton:focus, .ck.ck-button.ck-switchbutton:active, .ck.ck-button.ck-switchbutton.ck-on:hover, .ck.ck-button.ck-switchbutton.ck-on:focus, .ck.ck-button.ck-switchbutton.ck-on:active {
|
640
|
-
color: inherit;
|
641
|
-
background: transparent;
|
642
|
-
}
|
643
|
-
[dir="ltr"] .ck.ck-button.ck-switchbutton .ck-button__label {
|
644
|
-
/* Separate the label from the switch */
|
645
|
-
margin-right: calc(2 * var(--ck-spacing-large));
|
646
|
-
}
|
647
|
-
[dir="rtl"] .ck.ck-button.ck-switchbutton .ck-button__label {
|
648
|
-
/* Separate the label from the switch */
|
649
|
-
margin-left: calc(2 * var(--ck-spacing-large));
|
650
|
-
}
|
651
|
-
.ck.ck-button.ck-switchbutton .ck-button__toggle {
|
652
|
-
border-radius: 0;
|
653
|
-
}
|
654
|
-
.ck-rounded-corners .ck.ck-button.ck-switchbutton .ck-button__toggle, .ck.ck-button.ck-switchbutton .ck-button__toggle.ck-rounded-corners {
|
655
|
-
border-radius: var(--ck-border-radius);
|
656
|
-
}
|
657
|
-
[dir="ltr"] .ck.ck-button.ck-switchbutton .ck-button__toggle {
|
658
|
-
/* Make sure the toggle is always to the right as far as possible. */
|
659
|
-
margin-left: auto;
|
660
|
-
}
|
661
|
-
[dir="rtl"] .ck.ck-button.ck-switchbutton .ck-button__toggle {
|
662
|
-
/* Make sure the toggle is always to the left as far as possible. */
|
663
|
-
margin-right: auto;
|
664
|
-
}
|
665
|
-
.ck.ck-button.ck-switchbutton .ck-button__toggle {
|
666
|
-
|
667
|
-
/* Apply some smooth transition to the box-shadow and border. */
|
668
|
-
/* Gently animate the background color of the toggle switch */
|
669
|
-
transition: background 400ms ease, box-shadow .2s ease-in-out, outline .2s ease-in-out;
|
670
|
-
border: 1px solid transparent;
|
671
|
-
width: var(--ck-switch-button-toggle-width);
|
672
|
-
background: var(--ck-color-switch-button-off-background);
|
673
|
-
}
|
674
|
-
.ck.ck-button.ck-switchbutton .ck-button__toggle .ck-button__toggle__inner {
|
675
|
-
border-radius: 0;
|
676
|
-
}
|
677
|
-
.ck-rounded-corners .ck.ck-button.ck-switchbutton .ck-button__toggle .ck-button__toggle__inner, .ck.ck-button.ck-switchbutton .ck-button__toggle .ck-button__toggle__inner.ck-rounded-corners {
|
678
|
-
border-radius: var(--ck-border-radius);
|
679
|
-
border-radius: calc(.5 * var(--ck-border-radius));
|
680
|
-
}
|
681
|
-
.ck.ck-button.ck-switchbutton .ck-button__toggle .ck-button__toggle__inner {
|
682
|
-
|
683
|
-
width: var(--ck-switch-button-toggle-inner-size);
|
684
|
-
height: var(--ck-switch-button-toggle-inner-size);
|
685
|
-
background: var(--ck-color-switch-button-inner-background);
|
686
|
-
|
687
|
-
/* Gently animate the inner part of the toggle switch */
|
688
|
-
transition: all 300ms ease;
|
689
|
-
}
|
690
|
-
.ck.ck-button.ck-switchbutton .ck-button__toggle:hover {
|
691
|
-
background: var(--ck-color-switch-button-off-hover-background);
|
692
|
-
}
|
693
|
-
.ck.ck-button.ck-switchbutton .ck-button__toggle:hover .ck-button__toggle__inner {
|
694
|
-
box-shadow: var(--ck-switch-button-inner-hover-shadow);
|
695
|
-
}
|
696
|
-
.ck.ck-button.ck-switchbutton.ck-disabled .ck-button__toggle {
|
697
|
-
opacity: var(--ck-disabled-opacity);
|
698
|
-
}
|
699
|
-
/* Overriding default .ck-button:focus styles + an outline around the toogle */
|
700
|
-
.ck.ck-button.ck-switchbutton:focus {
|
701
|
-
border-color: transparent;
|
702
|
-
outline: none;
|
703
|
-
box-shadow: none;
|
704
|
-
}
|
705
|
-
.ck.ck-button.ck-switchbutton:focus .ck-button__toggle {
|
706
|
-
box-shadow: 0 0 0 1px var(--ck-color-base-background), 0 0 0 5px var(--ck-color-focus-outer-shadow);
|
707
|
-
outline-offset: 1px;
|
708
|
-
outline: var(--ck-focus-ring);
|
709
|
-
}
|
710
|
-
/* stylelint-disable-next-line no-descending-specificity */
|
711
|
-
.ck.ck-button.ck-switchbutton.ck-on .ck-button__toggle {
|
712
|
-
background: var(--ck-color-switch-button-on-background);
|
713
|
-
}
|
714
|
-
.ck.ck-button.ck-switchbutton.ck-on .ck-button__toggle:hover {
|
715
|
-
background: var(--ck-color-switch-button-on-hover-background);
|
716
|
-
}
|
717
|
-
/*
|
718
|
-
* Move the toggle switch to the right. It will be animated.
|
719
|
-
*/
|
720
|
-
[dir="ltr"] .ck.ck-button.ck-switchbutton.ck-on .ck-button__toggle .ck-button__toggle__inner {
|
721
|
-
transform: translateX( var( --ck-switch-button-translation ) );
|
722
|
-
}
|
723
|
-
[dir="rtl"] .ck.ck-button.ck-switchbutton.ck-on .ck-button__toggle .ck-button__toggle__inner {
|
724
|
-
transform: translateX( calc( -1 * var( --ck-switch-button-translation ) ) );
|
725
|
-
}
|
726
|
-
/*
|
727
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
728
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
729
|
-
*/
|
730
|
-
:root {
|
731
|
-
--ck-collapsible-arrow-size: calc(0.5 * var(--ck-icon-size));
|
732
|
-
}
|
733
|
-
.ck.ck-collapsible > .ck.ck-button {
|
734
|
-
width: 100%;
|
735
|
-
font-weight: bold;
|
736
|
-
padding: var(--ck-list-button-padding);
|
737
|
-
border-radius: 0;
|
738
|
-
color: inherit;
|
739
|
-
}
|
740
|
-
.ck.ck-collapsible > .ck.ck-button:focus {
|
741
|
-
background: transparent;
|
742
|
-
}
|
743
|
-
.ck.ck-collapsible > .ck.ck-button:active, .ck.ck-collapsible > .ck.ck-button:not(:focus), .ck.ck-collapsible > .ck.ck-button:hover:not(:focus) {
|
744
|
-
background: transparent;
|
745
|
-
border-color: transparent;
|
746
|
-
box-shadow: none;
|
747
|
-
}
|
748
|
-
.ck.ck-collapsible > .ck.ck-button > .ck-icon {
|
749
|
-
margin-right: var(--ck-spacing-medium);
|
750
|
-
width: var(--ck-collapsible-arrow-size);
|
751
|
-
}
|
752
|
-
.ck.ck-collapsible > .ck-collapsible__children {
|
753
|
-
padding: var(--ck-spacing-medium) var(--ck-spacing-large) var(--ck-spacing-large);
|
754
|
-
}
|
755
|
-
.ck.ck-collapsible.ck-collapsible_collapsed > .ck.ck-button .ck-icon {
|
756
|
-
transform: rotate(-90deg);
|
757
|
-
}
|
758
|
-
/*
|
759
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
760
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
761
|
-
*/
|
762
|
-
/*
|
763
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
764
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
765
|
-
*/
|
766
|
-
/**
|
767
|
-
* Implements rounded corner interface for .ck-rounded-corners class.
|
768
|
-
*
|
769
|
-
* @see $ck-border-radius
|
770
|
-
*/
|
771
|
-
:root {
|
772
|
-
--ck-color-grid-tile-size: 24px;
|
773
|
-
|
774
|
-
/* Not using global colors here because these may change but some colors in a pallette
|
775
|
-
* require special treatment. For instance, this ensures no matter what the UI text color is,
|
776
|
-
* the check icon will look good on the black color tile. */
|
777
|
-
--ck-color-color-grid-check-icon: hsl(212, 81%, 46%);
|
778
|
-
}
|
779
|
-
.ck.ck-color-grid {
|
780
|
-
grid-gap: 5px;
|
781
|
-
padding: 8px;
|
782
|
-
}
|
783
|
-
.ck.ck-color-grid__tile {
|
784
|
-
width: var(--ck-color-grid-tile-size);
|
785
|
-
height: var(--ck-color-grid-tile-size);
|
786
|
-
min-width: var(--ck-color-grid-tile-size);
|
787
|
-
min-height: var(--ck-color-grid-tile-size);
|
788
|
-
padding: 0;
|
789
|
-
transition: .2s ease box-shadow;
|
790
|
-
border: 0;
|
791
|
-
}
|
792
|
-
.ck.ck-color-grid__tile.ck-disabled {
|
793
|
-
cursor: unset;
|
794
|
-
transition: unset;
|
795
|
-
}
|
796
|
-
.ck.ck-color-grid__tile.ck-color-selector__color-tile_bordered {
|
797
|
-
box-shadow: 0 0 0 1px var(--ck-color-base-border);
|
798
|
-
}
|
799
|
-
.ck.ck-color-grid__tile .ck.ck-icon {
|
800
|
-
display: none;
|
801
|
-
color: var(--ck-color-color-grid-check-icon);
|
802
|
-
}
|
803
|
-
.ck.ck-color-grid__tile.ck-on {
|
804
|
-
box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-base-text);
|
805
|
-
}
|
806
|
-
.ck.ck-color-grid__tile.ck-on .ck.ck-icon {
|
807
|
-
display: block;
|
808
|
-
}
|
809
|
-
.ck.ck-color-grid__tile.ck-on,
|
810
|
-
.ck.ck-color-grid__tile:focus:not( .ck-disabled ),
|
811
|
-
.ck.ck-color-grid__tile:hover:not( .ck-disabled ) {
|
812
|
-
/* Disable the default .ck-button's border ring. */
|
813
|
-
border: 0;
|
814
|
-
}
|
815
|
-
.ck.ck-color-grid__tile:focus:not( .ck-disabled ),
|
816
|
-
.ck.ck-color-grid__tile:hover:not( .ck-disabled ) {
|
817
|
-
box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-focus-border);
|
818
|
-
}
|
819
|
-
.ck.ck-color-grid__label {
|
820
|
-
padding: 0 var(--ck-spacing-standard);
|
821
|
-
}
|
822
|
-
/*
|
823
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
824
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
825
|
-
*/
|
826
|
-
/*
|
827
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
828
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
829
|
-
*/
|
830
|
-
/* View fragment with color grids. */
|
831
|
-
.ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__remove-color,
|
832
|
-
.ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__color-picker {
|
833
|
-
width: 100%;
|
834
|
-
}
|
835
|
-
.ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__color-picker {
|
836
|
-
padding: calc(var(--ck-spacing-standard) / 2) var(--ck-spacing-standard);
|
837
|
-
border-bottom-left-radius: 0;
|
838
|
-
border-bottom-right-radius: 0;
|
839
|
-
}
|
840
|
-
.ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__color-picker:not(:focus) {
|
841
|
-
border-top: 1px solid var(--ck-color-base-border);
|
842
|
-
}
|
843
|
-
[dir="ltr"] .ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__color-picker .ck.ck-icon {
|
844
|
-
margin-right: var(--ck-spacing-standard);
|
845
|
-
}
|
846
|
-
[dir="rtl"] .ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__color-picker .ck.ck-icon {
|
847
|
-
margin-left: var(--ck-spacing-standard);
|
848
|
-
}
|
849
|
-
.ck.ck-color-selector .ck-color-grids-fragment label.ck.ck-color-grid__label {
|
850
|
-
font-weight: unset;
|
851
|
-
}
|
852
|
-
/* View fragment with a color picker. */
|
853
|
-
.ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-picker {
|
854
|
-
padding: 8px;
|
855
|
-
}
|
856
|
-
.ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-picker .hex-color-picker {
|
857
|
-
height: 100px;
|
858
|
-
min-width: 180px;
|
859
|
-
}
|
860
|
-
.ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-picker .hex-color-picker::part(saturation) {
|
861
|
-
border-radius: var(--ck-border-radius) var(--ck-border-radius) 0 0;
|
862
|
-
}
|
863
|
-
.ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-picker .hex-color-picker::part(hue) {
|
864
|
-
border-radius: 0 0 var(--ck-border-radius) var(--ck-border-radius);
|
865
|
-
}
|
866
|
-
.ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-picker .hex-color-picker::part(saturation-pointer),
|
867
|
-
.ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-picker .hex-color-picker::part(hue-pointer) {
|
868
|
-
width: 15px;
|
869
|
-
height: 15px;
|
870
|
-
}
|
871
|
-
.ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-selector_action-bar {
|
872
|
-
padding: 0 8px 8px;
|
873
|
-
}
|
874
|
-
/*
|
875
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
876
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
877
|
-
*/
|
878
|
-
/*
|
879
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
880
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
881
|
-
*/
|
882
|
-
/**
|
883
|
-
* Implements rounded corner interface for .ck-rounded-corners class.
|
884
|
-
*
|
885
|
-
* @see $ck-border-radius
|
886
|
-
*/
|
887
|
-
/*
|
888
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
889
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
890
|
-
*/
|
891
|
-
/**
|
892
|
-
* A helper to combine multiple shadows.
|
893
|
-
*/
|
894
|
-
/**
|
895
|
-
* Gives an element a drop shadow so it looks like a floating panel.
|
896
|
-
*/
|
897
|
-
/*
|
898
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
899
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
900
|
-
*/
|
901
|
-
:root {
|
902
|
-
--ck-dialog-overlay-background-color: hsla( 0, 0%, 0%, .5 );
|
903
|
-
--ck-dialog-drop-shadow: 0px 0px 6px 2px hsl(0deg 0% 0% / 15%);
|
904
|
-
--ck-dialog-max-width: 100vw;
|
905
|
-
--ck-dialog-max-height: 90vh;
|
906
|
-
--ck-color-dialog-background: var(--ck-color-base-background);
|
907
|
-
--ck-color-dialog-form-header-border: var(--ck-color-base-border);
|
908
|
-
}
|
909
|
-
.ck.ck-dialog-overlay {
|
910
|
-
animation: ck-dialog-fade-in .3s;
|
911
|
-
background: var(--ck-dialog-overlay-background-color);
|
912
|
-
z-index: var(--ck-z-dialog);
|
913
|
-
}
|
914
|
-
.ck.ck-dialog {
|
915
|
-
border-radius: 0;
|
916
|
-
}
|
917
|
-
.ck-rounded-corners .ck.ck-dialog, .ck.ck-dialog.ck-rounded-corners {
|
918
|
-
border-radius: var(--ck-border-radius);
|
919
|
-
}
|
920
|
-
.ck.ck-dialog {
|
921
|
-
box-shadow: var(--ck-drop-shadow), 0 0;
|
922
|
-
|
923
|
-
--ck-drop-shadow: var(--ck-dialog-drop-shadow);
|
924
|
-
|
925
|
-
background: var(--ck-color-dialog-background);
|
926
|
-
max-height: var(--ck-dialog-max-height);
|
927
|
-
max-width: var(--ck-dialog-max-width);
|
928
|
-
border: 1px solid var(--ck-color-base-border);
|
929
|
-
}
|
930
|
-
.ck.ck-dialog .ck.ck-form__header {
|
931
|
-
border-bottom: 1px solid var(--ck-color-dialog-form-header-border);
|
932
|
-
}
|
933
|
-
@keyframes ck-dialog-fade-in {
|
934
|
-
0% {
|
935
|
-
background: hsla( 0, 0%, 0%, 0 );
|
936
|
-
}
|
937
|
-
|
938
|
-
100% {
|
939
|
-
background: var(--ck-dialog-overlay-background-color);
|
940
|
-
}
|
941
|
-
}
|
942
|
-
/*
|
943
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
944
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
945
|
-
*/
|
946
|
-
.ck.ck-dialog .ck.ck-dialog__actions {
|
947
|
-
padding: var(--ck-spacing-large);
|
948
|
-
}
|
949
|
-
.ck.ck-dialog .ck.ck-dialog__actions > * + * {
|
950
|
-
margin-left: var(--ck-spacing-large);
|
951
|
-
}
|
952
|
-
/*
|
953
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
954
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
955
|
-
*/
|
956
|
-
/*
|
957
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
958
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
959
|
-
*/
|
960
|
-
/**
|
961
|
-
* Implements rounded corner interface for .ck-rounded-corners class.
|
962
|
-
*
|
963
|
-
* @see $ck-border-radius
|
964
|
-
*/
|
965
|
-
/*
|
966
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
967
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
968
|
-
*/
|
969
|
-
/**
|
970
|
-
* A class which indicates that an element holding it is disabled.
|
971
|
-
*/
|
972
|
-
/*
|
973
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
974
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
975
|
-
*/
|
976
|
-
/**
|
977
|
-
* A helper to combine multiple shadows.
|
978
|
-
*/
|
979
|
-
/**
|
980
|
-
* Gives an element a drop shadow so it looks like a floating panel.
|
981
|
-
*/
|
982
|
-
/*
|
983
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
984
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
985
|
-
*/
|
986
|
-
:root {
|
987
|
-
--ck-dropdown-arrow-size: calc(0.5 * var(--ck-icon-size));
|
988
|
-
}
|
989
|
-
.ck.ck-dropdown {
|
990
|
-
/* Enable font size inheritance, which allows fluid UI scaling. */
|
991
|
-
font-size: inherit;
|
992
|
-
}
|
993
|
-
.ck.ck-dropdown .ck-dropdown__arrow {
|
994
|
-
width: var(--ck-dropdown-arrow-size);
|
995
|
-
}
|
996
|
-
[dir="ltr"] .ck.ck-dropdown .ck-dropdown__arrow {
|
997
|
-
right: var(--ck-spacing-standard);
|
998
|
-
|
999
|
-
/* A space to accommodate the triangle. */
|
1000
|
-
margin-left: var(--ck-spacing-standard);
|
1001
|
-
}
|
1002
|
-
[dir="rtl"] .ck.ck-dropdown .ck-dropdown__arrow {
|
1003
|
-
left: var(--ck-spacing-standard);
|
1004
|
-
|
1005
|
-
/* A space to accommodate the triangle. */
|
1006
|
-
margin-right: var(--ck-spacing-small);
|
1007
|
-
}
|
1008
|
-
.ck.ck-dropdown.ck-disabled .ck-dropdown__arrow {
|
1009
|
-
opacity: var(--ck-disabled-opacity);
|
1010
|
-
}
|
1011
|
-
[dir="ltr"] .ck.ck-dropdown .ck-button.ck-dropdown__button:not(.ck-button_with-text) {
|
1012
|
-
/* Make sure dropdowns with just an icon have the right inner spacing */
|
1013
|
-
padding-left: var(--ck-spacing-small);
|
1014
|
-
}
|
1015
|
-
[dir="rtl"] .ck.ck-dropdown .ck-button.ck-dropdown__button:not(.ck-button_with-text) {
|
1016
|
-
/* Make sure dropdowns with just an icon have the right inner spacing */
|
1017
|
-
padding-right: var(--ck-spacing-small);
|
1018
|
-
}
|
1019
|
-
/* #23 */
|
1020
|
-
.ck.ck-dropdown .ck-button.ck-dropdown__button .ck-button__label {
|
1021
|
-
width: 7em;
|
1022
|
-
overflow: hidden;
|
1023
|
-
text-overflow: ellipsis;
|
1024
|
-
}
|
1025
|
-
/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */
|
1026
|
-
.ck.ck-dropdown .ck-button.ck-dropdown__button.ck-disabled .ck-button__label {
|
1027
|
-
opacity: var(--ck-disabled-opacity);
|
1028
|
-
}
|
1029
|
-
/* https://github.com/ckeditor/ckeditor5/issues/816 */
|
1030
|
-
.ck.ck-dropdown .ck-button.ck-dropdown__button.ck-on {
|
1031
|
-
border-bottom-left-radius: 0;
|
1032
|
-
border-bottom-right-radius: 0;
|
1033
|
-
}
|
1034
|
-
.ck.ck-dropdown .ck-button.ck-dropdown__button.ck-dropdown__button_label-width_auto .ck-button__label {
|
1035
|
-
width: auto;
|
1036
|
-
}
|
1037
|
-
/* https://github.com/ckeditor/ckeditor5/issues/8699 */
|
1038
|
-
.ck.ck-dropdown .ck-button.ck-dropdown__button.ck-off:active,
|
1039
|
-
.ck.ck-dropdown .ck-button.ck-dropdown__button.ck-on:active {
|
1040
|
-
box-shadow: none;
|
1041
|
-
}
|
1042
|
-
.ck.ck-dropdown .ck-button.ck-dropdown__button.ck-off:active:focus, .ck.ck-dropdown .ck-button.ck-dropdown__button.ck-on:active:focus {
|
1043
|
-
box-shadow: var(--ck-focus-outer-shadow), 0 0;
|
1044
|
-
}
|
1045
|
-
.ck.ck-dropdown__panel {
|
1046
|
-
border-radius: 0;
|
1047
|
-
}
|
1048
|
-
.ck-rounded-corners .ck.ck-dropdown__panel, .ck.ck-dropdown__panel.ck-rounded-corners {
|
1049
|
-
border-radius: var(--ck-border-radius);
|
1050
|
-
}
|
1051
|
-
.ck.ck-dropdown__panel {
|
1052
|
-
box-shadow: var(--ck-drop-shadow), 0 0;
|
1053
|
-
|
1054
|
-
background: var(--ck-color-dropdown-panel-background);
|
1055
|
-
border: 1px solid var(--ck-color-dropdown-panel-border);
|
1056
|
-
bottom: 0;
|
1057
|
-
|
1058
|
-
/* Make sure the panel is at least as wide as the drop-down's button. */
|
1059
|
-
min-width: 100%;
|
1060
|
-
|
1061
|
-
/* Disabled corner border radius to be consistent with the .dropdown__button
|
1062
|
-
https://github.com/ckeditor/ckeditor5/issues/816 */
|
1063
|
-
}
|
1064
|
-
.ck.ck-dropdown__panel.ck-dropdown__panel_se {
|
1065
|
-
border-top-left-radius: 0;
|
1066
|
-
}
|
1067
|
-
.ck.ck-dropdown__panel.ck-dropdown__panel_sw {
|
1068
|
-
border-top-right-radius: 0;
|
1069
|
-
}
|
1070
|
-
.ck.ck-dropdown__panel.ck-dropdown__panel_ne {
|
1071
|
-
border-bottom-left-radius: 0;
|
1072
|
-
}
|
1073
|
-
.ck.ck-dropdown__panel.ck-dropdown__panel_nw {
|
1074
|
-
border-bottom-right-radius: 0;
|
1075
|
-
}
|
1076
|
-
.ck.ck-dropdown__panel:focus {
|
1077
|
-
outline: none;
|
1078
|
-
}
|
1079
|
-
/*
|
1080
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1081
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1082
|
-
*/
|
1083
|
-
/*
|
1084
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1085
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1086
|
-
*/
|
1087
|
-
/**
|
1088
|
-
* Implements rounded corner interface for .ck-rounded-corners class.
|
1089
|
-
*
|
1090
|
-
* @see $ck-border-radius
|
1091
|
-
*/
|
1092
|
-
.ck.ck-dropdown .ck-dropdown__panel .ck-list {
|
1093
|
-
/* Disabled radius of top-left border to be consistent with .dropdown__button
|
1094
|
-
https://github.com/ckeditor/ckeditor5/issues/816 */
|
1095
|
-
border-radius: 0;
|
1096
|
-
}
|
1097
|
-
.ck-rounded-corners .ck.ck-dropdown .ck-dropdown__panel .ck-list, .ck.ck-dropdown .ck-dropdown__panel .ck-list.ck-rounded-corners {
|
1098
|
-
border-radius: var(--ck-border-radius);
|
1099
|
-
border-top-left-radius: 0;
|
1100
|
-
}
|
1101
|
-
/* Make sure the button belonging to the first/last child of the list goes well with the
|
1102
|
-
border radius of the entire panel. */
|
1103
|
-
.ck.ck-dropdown .ck-dropdown__panel .ck-list .ck-list__item:first-child .ck-button {
|
1104
|
-
border-radius: 0;
|
1105
|
-
}
|
1106
|
-
.ck-rounded-corners .ck.ck-dropdown .ck-dropdown__panel .ck-list .ck-list__item:first-child .ck-button, .ck.ck-dropdown .ck-dropdown__panel .ck-list .ck-list__item:first-child .ck-button.ck-rounded-corners {
|
1107
|
-
border-radius: var(--ck-border-radius);
|
1108
|
-
border-top-left-radius: 0;
|
1109
|
-
border-bottom-left-radius: 0;
|
1110
|
-
border-bottom-right-radius: 0;
|
1111
|
-
}
|
1112
|
-
.ck.ck-dropdown .ck-dropdown__panel .ck-list .ck-list__item:last-child .ck-button {
|
1113
|
-
border-radius: 0;
|
1114
|
-
}
|
1115
|
-
.ck-rounded-corners .ck.ck-dropdown .ck-dropdown__panel .ck-list .ck-list__item:last-child .ck-button, .ck.ck-dropdown .ck-dropdown__panel .ck-list .ck-list__item:last-child .ck-button.ck-rounded-corners {
|
1116
|
-
border-radius: var(--ck-border-radius);
|
1117
|
-
border-top-left-radius: 0;
|
1118
|
-
border-top-right-radius: 0;
|
1119
|
-
}
|
1120
|
-
/*
|
1121
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1122
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1123
|
-
*/
|
1124
|
-
/*
|
1125
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1126
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1127
|
-
*/
|
1128
|
-
/**
|
1129
|
-
* Implements rounded corner interface for .ck-rounded-corners class.
|
1130
|
-
*
|
1131
|
-
* @see $ck-border-radius
|
1132
|
-
*/
|
1133
|
-
:root {
|
1134
|
-
--ck-color-split-button-hover-background: hsl(0, 0%, 92%);
|
1135
|
-
--ck-color-split-button-hover-border: hsl(0, 0%, 70%);
|
1136
|
-
}
|
1137
|
-
/*
|
1138
|
-
* Note: ck-rounded and ck-dir mixins don't go together (because they both use @nest).
|
1139
|
-
*/
|
1140
|
-
[dir="ltr"] .ck.ck-splitbutton:hover > .ck-splitbutton__action,
|
1141
|
-
[dir="ltr"] .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__action {
|
1142
|
-
/* Don't round the action button on the right side */
|
1143
|
-
border-top-right-radius: unset;
|
1144
|
-
border-bottom-right-radius: unset;
|
1145
|
-
}
|
1146
|
-
[dir="rtl"] .ck.ck-splitbutton:hover > .ck-splitbutton__action,
|
1147
|
-
[dir="rtl"] .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__action {
|
1148
|
-
/* Don't round the action button on the left side */
|
1149
|
-
border-top-left-radius: unset;
|
1150
|
-
border-bottom-left-radius: unset;
|
1151
|
-
}
|
1152
|
-
.ck.ck-splitbutton > .ck-splitbutton__arrow {
|
1153
|
-
/* It's a text-less button and since the icon is positioned absolutely in such situation,
|
1154
|
-
it must get some arbitrary min-width. */
|
1155
|
-
min-width: unset;
|
1156
|
-
}
|
1157
|
-
[dir="ltr"] .ck.ck-splitbutton > .ck-splitbutton__arrow {
|
1158
|
-
/* Don't round the arrow button on the left side */
|
1159
|
-
border-top-left-radius: unset;
|
1160
|
-
border-bottom-left-radius: unset;
|
1161
|
-
}
|
1162
|
-
[dir="rtl"] .ck.ck-splitbutton > .ck-splitbutton__arrow {
|
1163
|
-
/* Don't round the arrow button on the right side */
|
1164
|
-
border-top-right-radius: unset;
|
1165
|
-
border-bottom-right-radius: unset;
|
1166
|
-
}
|
1167
|
-
.ck.ck-splitbutton > .ck-splitbutton__arrow svg {
|
1168
|
-
width: var(--ck-dropdown-arrow-size);
|
1169
|
-
}
|
1170
|
-
/* Make sure the divider stretches 100% height of the button
|
1171
|
-
https://github.com/ckeditor/ckeditor5/issues/10936 */
|
1172
|
-
.ck.ck-splitbutton > .ck-splitbutton__arrow:not(:focus) {
|
1173
|
-
border-top-width: 0px;
|
1174
|
-
border-bottom-width: 0px;
|
1175
|
-
}
|
1176
|
-
/* When the split button is "open" (the arrow is on) or being hovered, it should get some styling
|
1177
|
-
as a whole. The background of both buttons should stand out and there should be a visual
|
1178
|
-
separation between both buttons. */
|
1179
|
-
/* When the split button hovered as a whole, not as individual buttons. */
|
1180
|
-
.ck.ck-splitbutton.ck-splitbutton_open > .ck-button:not(.ck-on):not(.ck-disabled):not(:hover), .ck.ck-splitbutton:hover > .ck-button:not(.ck-on):not(.ck-disabled):not(:hover) {
|
1181
|
-
background: var(--ck-color-split-button-hover-background);
|
1182
|
-
}
|
1183
|
-
/* Splitbutton separator needs to be set with the ::after pseudoselector
|
1184
|
-
to display properly the borders on focus */
|
1185
|
-
.ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__arrow:not(.ck-disabled)::after, .ck.ck-splitbutton:hover > .ck-splitbutton__arrow:not(.ck-disabled)::after {
|
1186
|
-
content: '';
|
1187
|
-
position: absolute;
|
1188
|
-
width: 1px;
|
1189
|
-
height: 100%;
|
1190
|
-
background-color: var(--ck-color-split-button-hover-border);
|
1191
|
-
}
|
1192
|
-
/* Make sure the divider between the buttons looks fine when the button is focused */
|
1193
|
-
.ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__arrow:focus::after, .ck.ck-splitbutton:hover > .ck-splitbutton__arrow:focus::after {
|
1194
|
-
--ck-color-split-button-hover-border: var(--ck-color-focus-border);
|
1195
|
-
}
|
1196
|
-
[dir="ltr"] .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__arrow:not(.ck-disabled)::after, [dir="ltr"] .ck.ck-splitbutton:hover > .ck-splitbutton__arrow:not(.ck-disabled)::after {
|
1197
|
-
left: -1px;
|
1198
|
-
}
|
1199
|
-
[dir="rtl"] .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__arrow:not(.ck-disabled)::after, [dir="rtl"] .ck.ck-splitbutton:hover > .ck-splitbutton__arrow:not(.ck-disabled)::after {
|
1200
|
-
right: -1px;
|
1201
|
-
}
|
1202
|
-
/* Don't round the bottom left and right corners of the buttons when "open"
|
1203
|
-
https://github.com/ckeditor/ckeditor5/issues/816 */
|
1204
|
-
.ck.ck-splitbutton.ck-splitbutton_open {
|
1205
|
-
border-radius: 0;
|
1206
|
-
}
|
1207
|
-
.ck-rounded-corners .ck.ck-splitbutton.ck-splitbutton_open, .ck.ck-splitbutton.ck-splitbutton_open.ck-rounded-corners {
|
1208
|
-
border-radius: var(--ck-border-radius);
|
1209
|
-
}
|
1210
|
-
.ck-rounded-corners .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__action, .ck.ck-splitbutton.ck-splitbutton_open.ck-rounded-corners > .ck-splitbutton__action {
|
1211
|
-
border-bottom-left-radius: 0;
|
1212
|
-
}
|
1213
|
-
.ck-rounded-corners .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__arrow, .ck.ck-splitbutton.ck-splitbutton_open.ck-rounded-corners > .ck-splitbutton__arrow {
|
1214
|
-
border-bottom-right-radius: 0;
|
1215
|
-
}
|
1216
|
-
/*
|
1217
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1218
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1219
|
-
*/
|
1220
|
-
.ck.ck-toolbar-dropdown .ck-toolbar {
|
1221
|
-
border: 0;
|
1222
|
-
}
|
1223
|
-
/*
|
1224
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1225
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1226
|
-
*/
|
1227
|
-
/*
|
1228
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1229
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1230
|
-
*/
|
1231
|
-
/**
|
1232
|
-
* A visual style of focused element's border.
|
1233
|
-
*/
|
1234
|
-
/*
|
1235
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1236
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1237
|
-
*/
|
1238
|
-
/**
|
1239
|
-
* A helper to combine multiple shadows.
|
1240
|
-
*/
|
1241
|
-
/**
|
1242
|
-
* Gives an element a drop shadow so it looks like a floating panel.
|
1243
|
-
*/
|
1244
|
-
:root {
|
1245
|
-
--ck-accessibility-help-dialog-max-width: 600px;
|
1246
|
-
--ck-accessibility-help-dialog-max-height: 400px;
|
1247
|
-
--ck-accessibility-help-dialog-border-color: hsl(220, 6%, 81%);
|
1248
|
-
--ck-accessibility-help-dialog-code-background-color: hsl(0deg 0% 92.94%);
|
1249
|
-
--ck-accessibility-help-dialog-kbd-shadow-color: hsl(0deg 0% 61%);
|
1250
|
-
}
|
1251
|
-
.ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content {
|
1252
|
-
padding: var(--ck-spacing-large);
|
1253
|
-
max-width: var(--ck-accessibility-help-dialog-max-width);
|
1254
|
-
max-height: var(--ck-accessibility-help-dialog-max-height);
|
1255
|
-
overflow: auto;
|
1256
|
-
user-select: text;
|
1257
|
-
|
1258
|
-
border: 1px solid transparent;
|
1259
|
-
}
|
1260
|
-
.ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content:focus {
|
1261
|
-
/* Disable native outline. */
|
1262
|
-
outline: none;
|
1263
|
-
border: var(--ck-focus-ring);
|
1264
|
-
box-shadow: var(--ck-focus-outer-shadow), 0 0;
|
1265
|
-
}
|
1266
|
-
.ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content * {
|
1267
|
-
white-space: normal;
|
1268
|
-
}
|
1269
|
-
/* Hide the main label of the content container. */
|
1270
|
-
.ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content .ck-label {
|
1271
|
-
display: none;
|
1272
|
-
}
|
1273
|
-
.ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content h3 {
|
1274
|
-
font-weight: bold;
|
1275
|
-
font-size: 1.2em;
|
1276
|
-
}
|
1277
|
-
.ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content h4 {
|
1278
|
-
font-weight: bold;
|
1279
|
-
font-size: 1em;
|
1280
|
-
}
|
1281
|
-
.ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content p,
|
1282
|
-
.ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content h3,
|
1283
|
-
.ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content h4,
|
1284
|
-
.ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content table {
|
1285
|
-
margin: 1em 0;
|
1286
|
-
}
|
1287
|
-
.ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content dl {
|
1288
|
-
display: grid;
|
1289
|
-
grid-template-columns: 2fr 1fr;
|
1290
|
-
border-top: 1px solid var(--ck-accessibility-help-dialog-border-color);
|
1291
|
-
border-bottom: none;
|
1292
|
-
}
|
1293
|
-
.ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content dl dt, .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content dl dd {
|
1294
|
-
border-bottom: 1px solid var(--ck-accessibility-help-dialog-border-color);
|
1295
|
-
padding: .4em 0;
|
1296
|
-
}
|
1297
|
-
.ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content dl dt {
|
1298
|
-
grid-column-start: 1;
|
1299
|
-
}
|
1300
|
-
.ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content dl dd {
|
1301
|
-
grid-column-start: 2;
|
1302
|
-
text-align: right;
|
1303
|
-
}
|
1304
|
-
.ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content kbd, .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content code {
|
1305
|
-
display: inline-block;
|
1306
|
-
background: var(--ck-accessibility-help-dialog-code-background-color);
|
1307
|
-
padding: .4em;
|
1308
|
-
vertical-align: middle;
|
1309
|
-
line-height: 1;
|
1310
|
-
border-radius: 2px;
|
1311
|
-
text-align: center;
|
1312
|
-
font-size: .9em;
|
1313
|
-
}
|
1314
|
-
.ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content code {
|
1315
|
-
font-family: monospace;
|
1316
|
-
}
|
1317
|
-
.ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content kbd {
|
1318
|
-
min-width: 1.8em;
|
1319
|
-
box-shadow: 0px 1px 1px var(--ck-accessibility-help-dialog-kbd-shadow-color);
|
1320
|
-
margin: 0 1px;
|
1321
|
-
}
|
1322
|
-
.ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content kbd + kbd {
|
1323
|
-
margin-left: 2px;
|
1324
|
-
}
|
1325
|
-
/*
|
1326
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1327
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1328
|
-
*/
|
1329
|
-
/*
|
1330
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1331
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1332
|
-
*/
|
1333
|
-
/**
|
1334
|
-
* Implements rounded corner interface for .ck-rounded-corners class.
|
1335
|
-
*
|
1336
|
-
* @see $ck-border-radius
|
1337
|
-
*/
|
1338
|
-
/*
|
1339
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1340
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1341
|
-
*/
|
1342
|
-
/**
|
1343
|
-
* A class which indicates that an element holding it is disabled.
|
1344
|
-
*/
|
1345
|
-
/*
|
1346
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1347
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1348
|
-
*/
|
1349
|
-
/**
|
1350
|
-
* A helper to combine multiple shadows.
|
1351
|
-
*/
|
1352
|
-
/**
|
1353
|
-
* Gives an element a drop shadow so it looks like a floating panel.
|
1354
|
-
*/
|
1355
|
-
/*
|
1356
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1357
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1358
|
-
*/
|
1359
|
-
/**
|
1360
|
-
* A visual style of focused element's border.
|
1361
|
-
*/
|
1362
|
-
/*
|
1363
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1364
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1365
|
-
*/
|
1366
|
-
/**
|
1367
|
-
* Implements a button of given background color.
|
1368
|
-
*
|
1369
|
-
* @param {String} $background - Background color of the button.
|
1370
|
-
* @param {String} $border - Border color of the button.
|
1371
|
-
*/
|
1372
|
-
:root {
|
1373
|
-
--ck-color-editable-blur-selection: hsl(0, 0%, 85%);
|
1374
|
-
}
|
1375
|
-
.ck.ck-editor__editable:not(.ck-editor__nested-editable) {
|
1376
|
-
border-radius: 0;
|
1377
|
-
}
|
1378
|
-
.ck-rounded-corners .ck.ck-editor__editable:not(.ck-editor__nested-editable), .ck.ck-editor__editable.ck-rounded-corners:not(.ck-editor__nested-editable) {
|
1379
|
-
border-radius: var(--ck-border-radius);
|
1380
|
-
}
|
1381
|
-
.ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) {
|
1382
|
-
/* Disable native outline. */
|
1383
|
-
outline: none;
|
1384
|
-
border: var(--ck-focus-ring);
|
1385
|
-
box-shadow: var(--ck-inner-shadow), 0 0;
|
1386
|
-
}
|
1387
|
-
.ck.ck-editor__editable_inline {
|
1388
|
-
overflow: auto;
|
1389
|
-
padding: 0 var(--ck-spacing-standard);
|
1390
|
-
border: 1px solid transparent;
|
1391
|
-
}
|
1392
|
-
.ck.ck-editor__editable_inline[dir="ltr"] {
|
1393
|
-
text-align: left;
|
1394
|
-
}
|
1395
|
-
.ck.ck-editor__editable_inline[dir="rtl"] {
|
1396
|
-
text-align: right;
|
1397
|
-
}
|
1398
|
-
/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/116 */
|
1399
|
-
.ck.ck-editor__editable_inline > *:first-child {
|
1400
|
-
margin-top: var(--ck-spacing-large);
|
1401
|
-
}
|
1402
|
-
/* https://github.com/ckeditor/ckeditor5/issues/847 */
|
1403
|
-
.ck.ck-editor__editable_inline > *:last-child {
|
1404
|
-
/*
|
1405
|
-
* This value should match with the default margins of the block elements (like .media or .image)
|
1406
|
-
* to avoid a content jumping when the fake selection container shows up (See https://github.com/ckeditor/ckeditor5/issues/9825).
|
1407
|
-
*/
|
1408
|
-
margin-bottom: var(--ck-spacing-large);
|
1409
|
-
}
|
1410
|
-
/* https://github.com/ckeditor/ckeditor5/issues/6517 */
|
1411
|
-
.ck.ck-editor__editable_inline.ck-blurred ::selection {
|
1412
|
-
background: var(--ck-color-editable-blur-selection);
|
1413
|
-
}
|
1414
|
-
/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/111 */
|
1415
|
-
.ck.ck-balloon-panel.ck-toolbar-container[class*="arrow_n"]::after {
|
1416
|
-
border-bottom-color: var(--ck-color-panel-background);
|
1417
|
-
}
|
1418
|
-
.ck.ck-balloon-panel.ck-toolbar-container[class*="arrow_s"]::after {
|
1419
|
-
border-top-color: var(--ck-color-panel-background);
|
1420
|
-
}
|
1421
|
-
/*
|
1422
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1423
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1424
|
-
*/
|
1425
|
-
/*
|
1426
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1427
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1428
|
-
*/
|
1429
|
-
:root {
|
1430
|
-
--ck-form-header-height: 44px;
|
1431
|
-
}
|
1432
|
-
.ck.ck-form__header {
|
1433
|
-
padding: var(--ck-spacing-small) var(--ck-spacing-large);
|
1434
|
-
height: var(--ck-form-header-height);
|
1435
|
-
line-height: var(--ck-form-header-height);
|
1436
|
-
border-bottom: 1px solid var(--ck-color-base-border);
|
1437
|
-
}
|
1438
|
-
[dir="ltr"] .ck.ck-form__header > .ck-icon {
|
1439
|
-
margin-right: var(--ck-spacing-medium);
|
1440
|
-
}
|
1441
|
-
[dir="rtl"] .ck.ck-form__header > .ck-icon {
|
1442
|
-
margin-left: var(--ck-spacing-medium);
|
1443
|
-
}
|
1444
|
-
.ck.ck-form__header .ck-form__header__label {
|
1445
|
-
--ck-font-size-base: 15px;
|
1446
|
-
font-weight: bold;
|
1447
|
-
}
|
1448
|
-
/*
|
1449
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1450
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1451
|
-
*/
|
1452
|
-
:root {
|
1453
|
-
--ck-icon-size: calc(var(--ck-line-height-base) * var(--ck-font-size-normal));
|
1454
|
-
}
|
1455
|
-
.ck.ck-icon {
|
1456
|
-
width: var(--ck-icon-size);
|
1457
|
-
height: var(--ck-icon-size);
|
1458
|
-
|
1459
|
-
/* Multiplied by the height of the line in "px" should give SVG "viewport" dimensions */
|
1460
|
-
font-size: .8333350694em;
|
1461
|
-
|
1462
|
-
/* Inherit cursor style (#5). */
|
1463
|
-
cursor: inherit;
|
1464
|
-
|
1465
|
-
/* This will prevent blurry icons on Firefox. See #340. */
|
1466
|
-
will-change: transform;
|
1467
|
-
}
|
1468
|
-
.ck.ck-icon * {
|
1469
|
-
/* Inherit cursor style (#5). */
|
1470
|
-
cursor: inherit;
|
1471
|
-
}
|
1472
|
-
/* Allows dynamic coloring of an icon by inheriting its color from the parent. */
|
1473
|
-
.ck.ck-icon.ck-icon_inherit-color {
|
1474
|
-
color: inherit;
|
1475
|
-
}
|
1476
|
-
.ck.ck-icon.ck-icon_inherit-color * {
|
1477
|
-
color: inherit;
|
1478
|
-
}
|
1479
|
-
.ck.ck-icon.ck-icon_inherit-color *:not([fill]) {
|
1480
|
-
/* Needed by FF. */
|
1481
|
-
fill: currentColor;
|
1482
|
-
}
|
1483
|
-
/*
|
1484
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1485
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1486
|
-
*/
|
1487
|
-
/*
|
1488
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1489
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1490
|
-
*/
|
1491
|
-
/**
|
1492
|
-
* Implements rounded corner interface for .ck-rounded-corners class.
|
1493
|
-
*
|
1494
|
-
* @see $ck-border-radius
|
1495
|
-
*/
|
1496
|
-
/*
|
1497
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1498
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1499
|
-
*/
|
1500
|
-
/**
|
1501
|
-
* A visual style of focused element's border.
|
1502
|
-
*/
|
1503
|
-
/*
|
1504
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1505
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1506
|
-
*/
|
1507
|
-
/**
|
1508
|
-
* A helper to combine multiple shadows.
|
1509
|
-
*/
|
1510
|
-
/**
|
1511
|
-
* Gives an element a drop shadow so it looks like a floating panel.
|
1512
|
-
*/
|
1513
|
-
:root {
|
1514
|
-
--ck-input-width: 18em;
|
1515
|
-
|
1516
|
-
/* Backward compatibility. */
|
1517
|
-
--ck-input-text-width: var(--ck-input-width);
|
1518
|
-
}
|
1519
|
-
.ck.ck-input {
|
1520
|
-
border-radius: 0;
|
1521
|
-
}
|
1522
|
-
.ck-rounded-corners .ck.ck-input, .ck.ck-input.ck-rounded-corners {
|
1523
|
-
border-radius: var(--ck-border-radius);
|
1524
|
-
}
|
1525
|
-
.ck.ck-input {
|
1526
|
-
|
1527
|
-
background: var(--ck-color-input-background);
|
1528
|
-
border: 1px solid var(--ck-color-input-border);
|
1529
|
-
padding: var(--ck-spacing-extra-tiny) var(--ck-spacing-medium);
|
1530
|
-
min-width: var(--ck-input-width);
|
1531
|
-
|
1532
|
-
/* This is important to stay of the same height as surrounding buttons */
|
1533
|
-
min-height: var(--ck-ui-component-min-height);
|
1534
|
-
|
1535
|
-
/* Apply some smooth transition to the box-shadow and border. */
|
1536
|
-
transition: box-shadow .1s ease-in-out, border .1s ease-in-out;
|
1537
|
-
}
|
1538
|
-
.ck.ck-input:focus {
|
1539
|
-
/* Disable native outline. */
|
1540
|
-
outline: none;
|
1541
|
-
border: var(--ck-focus-ring);
|
1542
|
-
box-shadow: var(--ck-focus-outer-shadow), 0 0;
|
1543
|
-
}
|
1544
|
-
.ck.ck-input[readonly] {
|
1545
|
-
border: 1px solid var(--ck-color-input-disabled-border);
|
1546
|
-
background: var(--ck-color-input-disabled-background);
|
1547
|
-
color: var(--ck-color-input-disabled-text);
|
1548
|
-
}
|
1549
|
-
.ck.ck-input[readonly]:focus {
|
1550
|
-
/* The read-only input should have a slightly less visible shadow when focused. */
|
1551
|
-
box-shadow: var(--ck-focus-disabled-outer-shadow), 0 0;
|
1552
|
-
}
|
1553
|
-
.ck.ck-input.ck-error {
|
1554
|
-
border-color: var(--ck-color-input-error-border);
|
1555
|
-
animation: ck-input-shake .3s ease both;
|
1556
|
-
}
|
1557
|
-
.ck.ck-input.ck-error:focus {
|
1558
|
-
box-shadow: var(--ck-focus-error-outer-shadow), 0 0;
|
1559
|
-
}
|
1560
|
-
@keyframes ck-input-shake {
|
1561
|
-
20% {
|
1562
|
-
transform: translateX(-2px);
|
1563
|
-
}
|
1564
|
-
|
1565
|
-
40% {
|
1566
|
-
transform: translateX(2px);
|
1567
|
-
}
|
1568
|
-
|
1569
|
-
60% {
|
1570
|
-
transform: translateX(-1px);
|
1571
|
-
}
|
1572
|
-
|
1573
|
-
80% {
|
1574
|
-
transform: translateX(1px);
|
1575
|
-
}
|
1576
|
-
}
|
1577
|
-
/*
|
1578
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1579
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1580
|
-
*/
|
1581
|
-
.ck.ck-label {
|
1582
|
-
font-weight: bold;
|
1583
|
-
}
|
1584
|
-
/*
|
1585
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1586
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1587
|
-
*/
|
1588
|
-
/*
|
1589
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1590
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1591
|
-
*/
|
1592
|
-
/*
|
1593
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1594
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1595
|
-
*/
|
1596
|
-
/**
|
1597
|
-
* Implements rounded corner interface for .ck-rounded-corners class.
|
1598
|
-
*
|
1599
|
-
* @see $ck-border-radius
|
1600
|
-
*/
|
1601
|
-
:root {
|
1602
|
-
--ck-labeled-field-view-transition: .1s cubic-bezier(0, 0, 0.24, 0.95);
|
1603
|
-
--ck-labeled-field-empty-unfocused-max-width: 100% - 2 * var(--ck-spacing-medium);
|
1604
|
-
--ck-labeled-field-label-default-position-x: var(--ck-spacing-medium);
|
1605
|
-
--ck-labeled-field-label-default-position-y: calc(0.6 * var(--ck-font-size-base));
|
1606
|
-
--ck-color-labeled-field-label-background: var(--ck-color-base-background);
|
1607
|
-
}
|
1608
|
-
.ck.ck-labeled-field-view {
|
1609
|
-
border-radius: 0;
|
1610
|
-
}
|
1611
|
-
.ck-rounded-corners .ck.ck-labeled-field-view, .ck.ck-labeled-field-view.ck-rounded-corners {
|
1612
|
-
border-radius: var(--ck-border-radius);
|
1613
|
-
}
|
1614
|
-
.ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper {
|
1615
|
-
width: 100%;
|
1616
|
-
}
|
1617
|
-
.ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
|
1618
|
-
top: 0px;
|
1619
|
-
}
|
1620
|
-
[dir="ltr"] .ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
|
1621
|
-
left: 0px;
|
1622
|
-
transform-origin: 0 0;
|
1623
|
-
/* By default, display the label scaled down above the field. */
|
1624
|
-
transform: translate(var(--ck-spacing-medium), -6px) scale(.75);
|
1625
|
-
}
|
1626
|
-
[dir="rtl"] .ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
|
1627
|
-
right: 0px;
|
1628
|
-
transform-origin: 100% 0;
|
1629
|
-
transform: translate(calc(-1 * var(--ck-spacing-medium)), -6px) scale(.75);
|
1630
|
-
}
|
1631
|
-
.ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
|
1632
|
-
|
1633
|
-
pointer-events: none;
|
1634
|
-
|
1635
|
-
background: var(--ck-color-labeled-field-label-background);
|
1636
|
-
padding: 0 calc(.5 * var(--ck-font-size-tiny));
|
1637
|
-
line-height: initial;
|
1638
|
-
font-weight: normal;
|
1639
|
-
|
1640
|
-
/* Prevent overflow when the label is longer than the input */
|
1641
|
-
text-overflow: ellipsis;
|
1642
|
-
overflow: hidden;
|
1643
|
-
|
1644
|
-
max-width: 100%;
|
1645
|
-
|
1646
|
-
transition:
|
1647
|
-
transform var(--ck-labeled-field-view-transition),
|
1648
|
-
padding var(--ck-labeled-field-view-transition),
|
1649
|
-
background var(--ck-labeled-field-view-transition);
|
1650
|
-
}
|
1651
|
-
.ck.ck-labeled-field-view.ck-error > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
|
1652
|
-
color: var(--ck-color-base-error);
|
1653
|
-
}
|
1654
|
-
.ck.ck-labeled-field-view.ck-error .ck-input:not([readonly]) + .ck.ck-label {
|
1655
|
-
color: var(--ck-color-base-error);
|
1656
|
-
}
|
1657
|
-
.ck.ck-labeled-field-view .ck-labeled-field-view__status {
|
1658
|
-
font-size: var(--ck-font-size-small);
|
1659
|
-
margin-top: var(--ck-spacing-small);
|
1660
|
-
|
1661
|
-
/* Let the info wrap to the next line to avoid stretching the layout horizontally.
|
1662
|
-
The status could be very long. */
|
1663
|
-
white-space: normal;
|
1664
|
-
}
|
1665
|
-
.ck.ck-labeled-field-view .ck-labeled-field-view__status.ck-labeled-field-view__status_error {
|
1666
|
-
color: var(--ck-color-base-error);
|
1667
|
-
}
|
1668
|
-
/* Disabled fields and fields that have no focus should fade out. */
|
1669
|
-
.ck.ck-labeled-field-view.ck-disabled > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label,
|
1670
|
-
.ck.ck-labeled-field-view.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
|
1671
|
-
color: var(--ck-color-input-disabled-text);
|
1672
|
-
}
|
1673
|
-
/* Fields that are disabled or not focused and without a placeholder should have full-sized labels. */
|
1674
|
-
/* stylelint-disable-next-line no-descending-specificity */
|
1675
|
-
[dir="ltr"] .ck.ck-labeled-field-view.ck-disabled.ck-labeled-field-view_empty:not(.ck-labeled-field-view_placeholder) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label,
|
1676
|
-
[dir="ltr"] .ck.ck-labeled-field-view.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused):not(.ck-labeled-field-view_placeholder):not(.ck-error) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
|
1677
|
-
transform: translate(var(--ck-labeled-field-label-default-position-x), var(--ck-labeled-field-label-default-position-y)) scale(1);
|
1678
|
-
}
|
1679
|
-
[dir="rtl"] .ck.ck-labeled-field-view.ck-disabled.ck-labeled-field-view_empty:not(.ck-labeled-field-view_placeholder) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label,
|
1680
|
-
[dir="rtl"] .ck.ck-labeled-field-view.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused):not(.ck-labeled-field-view_placeholder):not(.ck-error) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
|
1681
|
-
transform: translate(calc(-1 * var(--ck-labeled-field-label-default-position-x)), var(--ck-labeled-field-label-default-position-y)) scale(1);
|
1682
|
-
}
|
1683
|
-
.ck.ck-labeled-field-view.ck-disabled.ck-labeled-field-view_empty:not(.ck-labeled-field-view_placeholder) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label,
|
1684
|
-
.ck.ck-labeled-field-view.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused):not(.ck-labeled-field-view_placeholder):not(.ck-error) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
|
1685
|
-
|
1686
|
-
/* Compensate for the default translate position. */
|
1687
|
-
max-width: calc(var(--ck-labeled-field-empty-unfocused-max-width));
|
1688
|
-
|
1689
|
-
background: transparent;
|
1690
|
-
padding: 0;
|
1691
|
-
}
|
1692
|
-
/*------ DropdownView integration ----------------------------------------------------------------------------------- */
|
1693
|
-
/* Make sure dropdown' background color in any of dropdown's state does not collide with labeled field. */
|
1694
|
-
.ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > .ck-dropdown > .ck.ck-button {
|
1695
|
-
background: transparent;
|
1696
|
-
}
|
1697
|
-
/* When the dropdown is "empty", the labeled field label replaces its label. */
|
1698
|
-
.ck.ck-labeled-field-view.ck-labeled-field-view_empty > .ck.ck-labeled-field-view__input-wrapper > .ck-dropdown > .ck-button > .ck-button__label {
|
1699
|
-
opacity: 0;
|
1700
|
-
}
|
1701
|
-
/* Make sure the label of the empty, unfocused input does not cover the dropdown arrow. */
|
1702
|
-
.ck.ck-labeled-field-view.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused):not(.ck-labeled-field-view_placeholder) > .ck.ck-labeled-field-view__input-wrapper > .ck-dropdown + .ck-label {
|
1703
|
-
max-width: calc(var(--ck-labeled-field-empty-unfocused-max-width) - var(--ck-dropdown-arrow-size) - var(--ck-spacing-standard));
|
1704
|
-
}
|
1705
|
-
/*
|
1706
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1707
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1708
|
-
*/
|
1709
|
-
.ck.ck-labeled-input .ck-labeled-input__status {
|
1710
|
-
font-size: var(--ck-font-size-small);
|
1711
|
-
margin-top: var(--ck-spacing-small);
|
1712
|
-
|
1713
|
-
/* Let the info wrap to the next line to avoid stretching the layout horizontally.
|
1714
|
-
The status could be very long. */
|
1715
|
-
white-space: normal;
|
1716
|
-
}
|
1717
|
-
.ck.ck-labeled-input .ck-labeled-input__status_error {
|
1718
|
-
color: var(--ck-color-base-error);
|
1719
|
-
}
|
1720
|
-
/*
|
1721
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1722
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1723
|
-
*/
|
1724
|
-
/*
|
1725
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1726
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1727
|
-
*/
|
1728
|
-
/**
|
1729
|
-
* A class which indicates that an element holding it is disabled.
|
1730
|
-
*/
|
1731
|
-
/*
|
1732
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1733
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1734
|
-
*/
|
1735
|
-
/**
|
1736
|
-
* Implements rounded corner interface for .ck-rounded-corners class.
|
1737
|
-
*
|
1738
|
-
* @see $ck-border-radius
|
1739
|
-
*/
|
1740
|
-
/*
|
1741
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1742
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1743
|
-
*/
|
1744
|
-
/**
|
1745
|
-
* A helper to combine multiple shadows.
|
1746
|
-
*/
|
1747
|
-
/**
|
1748
|
-
* Gives an element a drop shadow so it looks like a floating panel.
|
1749
|
-
*/
|
1750
|
-
/*
|
1751
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1752
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1753
|
-
*/
|
1754
|
-
:root {
|
1755
|
-
--ck-list-button-padding:
|
1756
|
-
calc(.2 * var(--ck-line-height-base) * var(--ck-font-size-base))
|
1757
|
-
calc(.4 * var(--ck-line-height-base) * var(--ck-font-size-base));
|
1758
|
-
}
|
1759
|
-
.ck.ck-list {
|
1760
|
-
border-radius: 0;
|
1761
|
-
}
|
1762
|
-
.ck-rounded-corners .ck.ck-list, .ck.ck-list.ck-rounded-corners {
|
1763
|
-
border-radius: var(--ck-border-radius);
|
1764
|
-
}
|
1765
|
-
.ck.ck-list {
|
1766
|
-
|
1767
|
-
list-style-type: none;
|
1768
|
-
background: var(--ck-color-list-background);
|
1769
|
-
}
|
1770
|
-
.ck.ck-list__item {
|
1771
|
-
cursor: default;
|
1772
|
-
min-width: 12em;
|
1773
|
-
}
|
1774
|
-
.ck.ck-list__item .ck-button {
|
1775
|
-
min-height: unset;
|
1776
|
-
width: 100%;
|
1777
|
-
border-radius: 0;
|
1778
|
-
}
|
1779
|
-
[dir="ltr"] .ck.ck-list__item .ck-button {
|
1780
|
-
text-align: left;
|
1781
|
-
}
|
1782
|
-
[dir="rtl"] .ck.ck-list__item .ck-button {
|
1783
|
-
text-align: right;
|
1784
|
-
}
|
1785
|
-
.ck.ck-list__item .ck-button {
|
1786
|
-
|
1787
|
-
/* List items should have the same height. Use absolute units to make sure it is so
|
1788
|
-
because e.g. different heading styles may have different height
|
1789
|
-
https://github.com/ckeditor/ckeditor5-heading/issues/63 */
|
1790
|
-
padding: var(--ck-list-button-padding);
|
1791
|
-
}
|
1792
|
-
.ck.ck-list__item .ck-button .ck-button__label {
|
1793
|
-
/* https://github.com/ckeditor/ckeditor5-heading/issues/63 */
|
1794
|
-
line-height: calc(1.2 * var(--ck-line-height-base) * var(--ck-font-size-base));
|
1795
|
-
}
|
1796
|
-
.ck.ck-list__item .ck-button:active {
|
1797
|
-
box-shadow: none;
|
1798
|
-
}
|
1799
|
-
.ck.ck-list__item .ck-button.ck-on {
|
1800
|
-
background: var(--ck-color-list-button-on-background);
|
1801
|
-
color: var(--ck-color-list-button-on-text);
|
1802
|
-
}
|
1803
|
-
.ck.ck-list__item .ck-button.ck-on:active {
|
1804
|
-
box-shadow: none;
|
1805
|
-
}
|
1806
|
-
.ck.ck-list__item .ck-button.ck-on:hover:not(.ck-disabled) {
|
1807
|
-
background: var(--ck-color-list-button-on-background-focus);
|
1808
|
-
}
|
1809
|
-
.ck.ck-list__item .ck-button.ck-on:focus:not(.ck-switchbutton):not(.ck-disabled) {
|
1810
|
-
border-color: var(--ck-color-base-background);
|
1811
|
-
}
|
1812
|
-
.ck.ck-list__item .ck-button:hover:not(.ck-disabled) {
|
1813
|
-
background: var(--ck-color-list-button-hover-background);
|
1814
|
-
}
|
1815
|
-
/* It's unnecessary to change the background/text of a switch toggle; it has different ways
|
1816
|
-
of conveying its state (like the switcher) */
|
1817
|
-
.ck.ck-list__item .ck-switchbutton.ck-on {
|
1818
|
-
background: var(--ck-color-list-background);
|
1819
|
-
color: inherit;
|
1820
|
-
}
|
1821
|
-
.ck.ck-list__item .ck-switchbutton.ck-on:hover:not(.ck-disabled) {
|
1822
|
-
background: var(--ck-color-list-button-hover-background);
|
1823
|
-
color: inherit;
|
1824
|
-
}
|
1825
|
-
.ck-list .ck-list__group {
|
1826
|
-
padding-top: var(--ck-spacing-medium);
|
1827
|
-
|
1828
|
-
/* The group should have a border when it's not the first item. */
|
1829
|
-
}
|
1830
|
-
*:not(.ck-hidden) ~ .ck-list .ck-list__group {
|
1831
|
-
border-top: 1px solid var(--ck-color-base-border);
|
1832
|
-
}
|
1833
|
-
.ck-list .ck-list__group > .ck-label {
|
1834
|
-
font-size: 11px;
|
1835
|
-
font-weight: bold;
|
1836
|
-
padding: var(--ck-spacing-medium) var(--ck-spacing-medium) 0 var(--ck-spacing-medium);
|
1837
|
-
}
|
1838
|
-
.ck.ck-list__separator {
|
1839
|
-
height: 1px;
|
1840
|
-
width: 100%;
|
1841
|
-
background: var(--ck-color-base-border);
|
1842
|
-
}
|
1843
|
-
/*
|
1844
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1845
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1846
|
-
*/
|
1847
|
-
/*
|
1848
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1849
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1850
|
-
*/
|
1851
|
-
/**
|
1852
|
-
* Implements rounded corner interface for .ck-rounded-corners class.
|
1853
|
-
*
|
1854
|
-
* @see $ck-border-radius
|
1855
|
-
*/
|
1856
|
-
/*
|
1857
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
1858
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
1859
|
-
*/
|
1860
|
-
/**
|
1861
|
-
* A helper to combine multiple shadows.
|
1862
|
-
*/
|
1863
|
-
/**
|
1864
|
-
* Gives an element a drop shadow so it looks like a floating panel.
|
1865
|
-
*/
|
1866
|
-
:root {
|
1867
|
-
--ck-balloon-border-width: 1px;
|
1868
|
-
--ck-balloon-arrow-offset: 2px;
|
1869
|
-
--ck-balloon-arrow-height: 10px;
|
1870
|
-
--ck-balloon-arrow-half-width: 8px;
|
1871
|
-
--ck-balloon-arrow-drop-shadow: 0 2px 2px var(--ck-color-shadow-drop);
|
1872
|
-
}
|
1873
|
-
.ck.ck-balloon-panel {
|
1874
|
-
border-radius: 0;
|
1875
|
-
}
|
1876
|
-
.ck-rounded-corners .ck.ck-balloon-panel, .ck.ck-balloon-panel.ck-rounded-corners {
|
1877
|
-
border-radius: var(--ck-border-radius);
|
1878
|
-
}
|
1879
|
-
.ck.ck-balloon-panel {
|
1880
|
-
box-shadow: var(--ck-drop-shadow), 0 0;
|
1881
|
-
|
1882
|
-
min-height: 15px;
|
1883
|
-
|
1884
|
-
background: var(--ck-color-panel-background);
|
1885
|
-
border: var(--ck-balloon-border-width) solid var(--ck-color-panel-border);
|
1886
|
-
}
|
1887
|
-
.ck.ck-balloon-panel.ck-balloon-panel_with-arrow::before,
|
1888
|
-
.ck.ck-balloon-panel.ck-balloon-panel_with-arrow::after {
|
1889
|
-
width: 0;
|
1890
|
-
height: 0;
|
1891
|
-
border-style: solid;
|
1892
|
-
}
|
1893
|
-
.ck.ck-balloon-panel[class*="arrow_n"]::before,
|
1894
|
-
.ck.ck-balloon-panel[class*="arrow_n"]::after {
|
1895
|
-
border-width: 0 var(--ck-balloon-arrow-half-width) var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width);
|
1896
|
-
}
|
1897
|
-
.ck.ck-balloon-panel[class*="arrow_n"]::before {
|
1898
|
-
border-color: transparent transparent var(--ck-color-panel-border) transparent;
|
1899
|
-
margin-top: calc( -1 * var(--ck-balloon-border-width) );
|
1900
|
-
}
|
1901
|
-
.ck.ck-balloon-panel[class*="arrow_n"]::after {
|
1902
|
-
border-color: transparent transparent var(--ck-color-panel-background) transparent;
|
1903
|
-
margin-top: calc( var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width) );
|
1904
|
-
}
|
1905
|
-
.ck.ck-balloon-panel[class*="arrow_s"]::before,
|
1906
|
-
.ck.ck-balloon-panel[class*="arrow_s"]::after {
|
1907
|
-
border-width: var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width) 0 var(--ck-balloon-arrow-half-width);
|
1908
|
-
}
|
1909
|
-
.ck.ck-balloon-panel[class*="arrow_s"]::before {
|
1910
|
-
border-color: var(--ck-color-panel-border) transparent transparent;
|
1911
|
-
filter: drop-shadow(var(--ck-balloon-arrow-drop-shadow));
|
1912
|
-
margin-bottom: calc( -1 * var(--ck-balloon-border-width) );
|
1913
|
-
}
|
1914
|
-
.ck.ck-balloon-panel[class*="arrow_s"]::after {
|
1915
|
-
border-color: var(--ck-color-panel-background) transparent transparent transparent;
|
1916
|
-
margin-bottom: calc( var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width) );
|
1917
|
-
}
|
1918
|
-
.ck.ck-balloon-panel[class*="arrow_e"]::before,
|
1919
|
-
.ck.ck-balloon-panel[class*="arrow_e"]::after {
|
1920
|
-
border-width: var(--ck-balloon-arrow-half-width) 0 var(--ck-balloon-arrow-half-width) var(--ck-balloon-arrow-height);
|
1921
|
-
}
|
1922
|
-
.ck.ck-balloon-panel[class*="arrow_e"]::before {
|
1923
|
-
border-color: transparent transparent transparent var(--ck-color-panel-border);
|
1924
|
-
margin-right: calc( -1 * var(--ck-balloon-border-width) );
|
1925
|
-
}
|
1926
|
-
.ck.ck-balloon-panel[class*="arrow_e"]::after {
|
1927
|
-
border-color: transparent transparent transparent var(--ck-color-panel-background);
|
1928
|
-
margin-right: calc( var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width) );
|
1929
|
-
}
|
1930
|
-
.ck.ck-balloon-panel[class*="arrow_w"]::before,
|
1931
|
-
.ck.ck-balloon-panel[class*="arrow_w"]::after {
|
1932
|
-
border-width: var(--ck-balloon-arrow-half-width) var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width) 0;
|
1933
|
-
}
|
1934
|
-
.ck.ck-balloon-panel[class*="arrow_w"]::before {
|
1935
|
-
border-color: transparent var(--ck-color-panel-border) transparent transparent;
|
1936
|
-
margin-left: calc( -1 * var(--ck-balloon-border-width) );
|
1937
|
-
}
|
1938
|
-
.ck.ck-balloon-panel[class*="arrow_w"]::after {
|
1939
|
-
border-color: transparent var(--ck-color-panel-background) transparent transparent;
|
1940
|
-
margin-left: calc( var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width) );
|
1941
|
-
}
|
1942
|
-
.ck.ck-balloon-panel.ck-balloon-panel_arrow_n::before,
|
1943
|
-
.ck.ck-balloon-panel.ck-balloon-panel_arrow_n::after {
|
1944
|
-
left: 50%;
|
1945
|
-
margin-left: calc(-1 * var(--ck-balloon-arrow-half-width));
|
1946
|
-
top: calc(-1 * var(--ck-balloon-arrow-height));
|
1947
|
-
}
|
1948
|
-
.ck.ck-balloon-panel.ck-balloon-panel_arrow_nw::before,
|
1949
|
-
.ck.ck-balloon-panel.ck-balloon-panel_arrow_nw::after {
|
1950
|
-
left: calc(2 * var(--ck-balloon-arrow-half-width));
|
1951
|
-
top: calc(-1 * var(--ck-balloon-arrow-height));
|
1952
|
-
}
|
1953
|
-
.ck.ck-balloon-panel.ck-balloon-panel_arrow_ne::before,
|
1954
|
-
.ck.ck-balloon-panel.ck-balloon-panel_arrow_ne::after {
|
1955
|
-
right: calc(2 * var(--ck-balloon-arrow-half-width));
|
1956
|
-
top: calc(-1 * var(--ck-balloon-arrow-height));
|
1957
|
-
}
|
1958
|
-
.ck.ck-balloon-panel.ck-balloon-panel_arrow_s::before,
|
1959
|
-
.ck.ck-balloon-panel.ck-balloon-panel_arrow_s::after {
|
1960
|
-
left: 50%;
|
1961
|
-
margin-left: calc(-1 * var(--ck-balloon-arrow-half-width));
|
1962
|
-
bottom: calc(-1 * var(--ck-balloon-arrow-height));
|
1963
|
-
}
|
1964
|
-
.ck.ck-balloon-panel.ck-balloon-panel_arrow_sw::before,
|
1965
|
-
.ck.ck-balloon-panel.ck-balloon-panel_arrow_sw::after {
|
1966
|
-
left: calc(2 * var(--ck-balloon-arrow-half-width));
|
1967
|
-
bottom: calc(-1 * var(--ck-balloon-arrow-height));
|
1968
|
-
}
|
1969
|
-
.ck.ck-balloon-panel.ck-balloon-panel_arrow_se::before,
|
1970
|
-
.ck.ck-balloon-panel.ck-balloon-panel_arrow_se::after {
|
1971
|
-
right: calc(2 * var(--ck-balloon-arrow-half-width));
|
1972
|
-
bottom: calc(-1 * var(--ck-balloon-arrow-height));
|
1973
|
-
}
|
1974
|
-
.ck.ck-balloon-panel.ck-balloon-panel_arrow_sme::before,
|
1975
|
-
.ck.ck-balloon-panel.ck-balloon-panel_arrow_sme::after {
|
1976
|
-
right: 25%;
|
1977
|
-
margin-right: calc(2 * var(--ck-balloon-arrow-half-width));
|
1978
|
-
bottom: calc(-1 * var(--ck-balloon-arrow-height));
|
1979
|
-
}
|
1980
|
-
.ck.ck-balloon-panel.ck-balloon-panel_arrow_smw::before,
|
1981
|
-
.ck.ck-balloon-panel.ck-balloon-panel_arrow_smw::after {
|
1982
|
-
left: 25%;
|
1983
|
-
margin-left: calc(2 * var(--ck-balloon-arrow-half-width));
|
1984
|
-
bottom: calc(-1 * var(--ck-balloon-arrow-height));
|
1985
|
-
}
|
1986
|
-
.ck.ck-balloon-panel.ck-balloon-panel_arrow_nme::before,
|
1987
|
-
.ck.ck-balloon-panel.ck-balloon-panel_arrow_nme::after {
|
1988
|
-
right: 25%;
|
1989
|
-
margin-right: calc(2 * var(--ck-balloon-arrow-half-width));
|
1990
|
-
top: calc(-1 * var(--ck-balloon-arrow-height));
|
1991
|
-
}
|
1992
|
-
.ck.ck-balloon-panel.ck-balloon-panel_arrow_nmw::before,
|
1993
|
-
.ck.ck-balloon-panel.ck-balloon-panel_arrow_nmw::after {
|
1994
|
-
left: 25%;
|
1995
|
-
margin-left: calc(2 * var(--ck-balloon-arrow-half-width));
|
1996
|
-
top: calc(-1 * var(--ck-balloon-arrow-height));
|
1997
|
-
}
|
1998
|
-
.ck.ck-balloon-panel.ck-balloon-panel_arrow_e::before,
|
1999
|
-
.ck.ck-balloon-panel.ck-balloon-panel_arrow_e::after {
|
2000
|
-
right: calc(-1 * var(--ck-balloon-arrow-height));
|
2001
|
-
margin-top: calc(-1 * var(--ck-balloon-arrow-half-width));
|
2002
|
-
top: 50%;
|
2003
|
-
}
|
2004
|
-
.ck.ck-balloon-panel.ck-balloon-panel_arrow_w::before,
|
2005
|
-
.ck.ck-balloon-panel.ck-balloon-panel_arrow_w::after {
|
2006
|
-
left: calc(-1 * var(--ck-balloon-arrow-height));
|
2007
|
-
margin-top: calc(-1 * var(--ck-balloon-arrow-half-width));
|
2008
|
-
top: 50%;
|
2009
|
-
}
|
2010
|
-
/*
|
2011
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
2012
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
2013
|
-
*/
|
2014
|
-
.ck .ck-balloon-rotator__navigation {
|
2015
|
-
background: var(--ck-color-toolbar-background);
|
2016
|
-
border-bottom: 1px solid var(--ck-color-toolbar-border);
|
2017
|
-
padding: 0 var(--ck-spacing-small);
|
2018
|
-
|
2019
|
-
/* Let's keep similar appearance to `ck-toolbar`. */
|
2020
|
-
}
|
2021
|
-
.ck .ck-balloon-rotator__navigation > * {
|
2022
|
-
margin-right: var(--ck-spacing-small);
|
2023
|
-
margin-top: var(--ck-spacing-small);
|
2024
|
-
margin-bottom: var(--ck-spacing-small);
|
2025
|
-
}
|
2026
|
-
/* Gives counter more breath than buttons. */
|
2027
|
-
.ck .ck-balloon-rotator__navigation .ck-balloon-rotator__counter {
|
2028
|
-
margin-right: var(--ck-spacing-standard);
|
2029
|
-
|
2030
|
-
/* We need to use smaller margin because of previous button's right margin. */
|
2031
|
-
margin-left: var(--ck-spacing-small);
|
2032
|
-
}
|
2033
|
-
/* Disable default annotation shadow inside rotator with fake panels. */
|
2034
|
-
.ck .ck-balloon-rotator__content .ck.ck-annotation-wrapper {
|
2035
|
-
box-shadow: none;
|
2036
|
-
}
|
2037
|
-
/*
|
2038
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
2039
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
2040
|
-
*/
|
2041
|
-
/*
|
2042
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
2043
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
2044
|
-
*/
|
2045
|
-
/**
|
2046
|
-
* A helper to combine multiple shadows.
|
2047
|
-
*/
|
2048
|
-
/**
|
2049
|
-
* Gives an element a drop shadow so it looks like a floating panel.
|
2050
|
-
*/
|
2051
|
-
:root {
|
2052
|
-
--ck-balloon-fake-panel-offset-horizontal: 6px;
|
2053
|
-
--ck-balloon-fake-panel-offset-vertical: 6px;
|
2054
|
-
}
|
2055
|
-
/* Let's use `.ck-balloon-panel` appearance. See: balloonpanel.css. */
|
2056
|
-
.ck .ck-fake-panel div {
|
2057
|
-
box-shadow: var(--ck-drop-shadow), 0 0;
|
2058
|
-
|
2059
|
-
min-height: 15px;
|
2060
|
-
|
2061
|
-
background: var(--ck-color-panel-background);
|
2062
|
-
border: 1px solid var(--ck-color-panel-border);
|
2063
|
-
border-radius: var(--ck-border-radius);
|
2064
|
-
|
2065
|
-
width: 100%;
|
2066
|
-
height: 100%;
|
2067
|
-
}
|
2068
|
-
.ck .ck-fake-panel div:nth-child( 1 ) {
|
2069
|
-
margin-left: var(--ck-balloon-fake-panel-offset-horizontal);
|
2070
|
-
margin-top: var(--ck-balloon-fake-panel-offset-vertical);
|
2071
|
-
}
|
2072
|
-
.ck .ck-fake-panel div:nth-child( 2 ) {
|
2073
|
-
margin-left: calc(var(--ck-balloon-fake-panel-offset-horizontal) * 2);
|
2074
|
-
margin-top: calc(var(--ck-balloon-fake-panel-offset-vertical) * 2);
|
2075
|
-
}
|
2076
|
-
.ck .ck-fake-panel div:nth-child( 3 ) {
|
2077
|
-
margin-left: calc(var(--ck-balloon-fake-panel-offset-horizontal) * 3);
|
2078
|
-
margin-top: calc(var(--ck-balloon-fake-panel-offset-vertical) * 3);
|
2079
|
-
}
|
2080
|
-
/* If balloon is positioned above element, we need to move fake panel to the top. */
|
2081
|
-
.ck .ck-balloon-panel_arrow_s + .ck-fake-panel,
|
2082
|
-
.ck .ck-balloon-panel_arrow_se + .ck-fake-panel,
|
2083
|
-
.ck .ck-balloon-panel_arrow_sw + .ck-fake-panel {
|
2084
|
-
--ck-balloon-fake-panel-offset-vertical: -6px;
|
2085
|
-
}
|
2086
|
-
/*
|
2087
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
2088
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
2089
|
-
*/
|
2090
|
-
/*
|
2091
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
2092
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
2093
|
-
*/
|
2094
|
-
/**
|
2095
|
-
* A helper to combine multiple shadows.
|
2096
|
-
*/
|
2097
|
-
/**
|
2098
|
-
* Gives an element a drop shadow so it looks like a floating panel.
|
2099
|
-
*/
|
2100
|
-
.ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
|
2101
|
-
box-shadow: var(--ck-drop-shadow), 0 0;
|
2102
|
-
|
2103
|
-
border-width: 0 1px 1px;
|
2104
|
-
border-top-left-radius: 0;
|
2105
|
-
border-top-right-radius: 0;
|
2106
|
-
}
|
2107
|
-
/*
|
2108
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
2109
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
2110
|
-
*/
|
2111
|
-
/*
|
2112
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
2113
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
2114
|
-
*/
|
2115
|
-
/*
|
2116
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
2117
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
2118
|
-
*/
|
2119
|
-
.ck-vertical-form > .ck-button:nth-last-child(2)::after {
|
2120
|
-
border-right: 1px solid var(--ck-color-base-border);
|
2121
|
-
}
|
2122
|
-
.ck.ck-responsive-form {
|
2123
|
-
padding: var(--ck-spacing-large);
|
2124
|
-
}
|
2125
|
-
.ck.ck-responsive-form:focus {
|
2126
|
-
/* See: https://github.com/ckeditor/ckeditor5/issues/4773 */
|
2127
|
-
outline: none;
|
2128
|
-
}
|
2129
|
-
[dir="ltr"] .ck.ck-responsive-form > :not(:first-child) {
|
2130
|
-
margin-left: var(--ck-spacing-standard);
|
2131
|
-
}
|
2132
|
-
[dir="rtl"] .ck.ck-responsive-form > :not(:last-child) {
|
2133
|
-
margin-left: var(--ck-spacing-standard);
|
2134
|
-
}
|
2135
|
-
@media screen and (max-width: 600px) {
|
2136
|
-
.ck.ck-responsive-form {
|
2137
|
-
padding: 0;
|
2138
|
-
width: calc(.8 * var(--ck-input-width));
|
2139
|
-
}
|
2140
|
-
|
2141
|
-
.ck.ck-responsive-form .ck-labeled-field-view {
|
2142
|
-
margin: var(--ck-spacing-large) var(--ck-spacing-large) 0;
|
2143
|
-
}
|
2144
|
-
|
2145
|
-
.ck.ck-responsive-form .ck-labeled-field-view .ck-input-text {
|
2146
|
-
min-width: 0;
|
2147
|
-
width: 100%;
|
2148
|
-
}
|
2149
|
-
|
2150
|
-
/* Let the long error messages wrap in the narrow form. */
|
2151
|
-
.ck.ck-responsive-form .ck-labeled-field-view .ck-labeled-field-view__error {
|
2152
|
-
white-space: normal;
|
2153
|
-
}
|
2154
|
-
|
2155
|
-
/* Styles for two last buttons in the form (save&cancel, edit&unlink, etc.). */
|
2156
|
-
.ck.ck-responsive-form > .ck-button:nth-last-child(2)::after {
|
2157
|
-
border-right: 1px solid var(--ck-color-base-border);
|
2158
|
-
}
|
2159
|
-
|
2160
|
-
.ck.ck-responsive-form > .ck-button:nth-last-child(1),
|
2161
|
-
.ck.ck-responsive-form > .ck-button:nth-last-child(2) {
|
2162
|
-
padding: var(--ck-spacing-standard);
|
2163
|
-
margin-top: var(--ck-spacing-large);
|
2164
|
-
border-radius: 0;
|
2165
|
-
}
|
2166
|
-
|
2167
|
-
.ck.ck-responsive-form > .ck-button:nth-last-child(1):not(:focus), .ck.ck-responsive-form > .ck-button:nth-last-child(2):not(:focus) {
|
2168
|
-
border-top: 1px solid var(--ck-color-base-border);
|
2169
|
-
}
|
2170
|
-
|
2171
|
-
[dir="ltr"] .ck.ck-responsive-form > .ck-button:nth-last-child(1),
|
2172
|
-
[dir="ltr"] .ck.ck-responsive-form > .ck-button:nth-last-child(2) {
|
2173
|
-
margin-left: 0;
|
2174
|
-
}
|
2175
|
-
|
2176
|
-
[dir="rtl"] .ck.ck-responsive-form > .ck-button:nth-last-child(1),
|
2177
|
-
[dir="rtl"] .ck.ck-responsive-form > .ck-button:nth-last-child(2) {
|
2178
|
-
margin-left: 0;
|
2179
|
-
}
|
2180
|
-
|
2181
|
-
[dir="rtl"] .ck.ck-responsive-form > .ck-button:nth-last-child(1):last-of-type, [dir="rtl"] .ck.ck-responsive-form > .ck-button:nth-last-child(2):last-of-type {
|
2182
|
-
border-right: 1px solid var(--ck-color-base-border);
|
2183
|
-
}
|
2184
|
-
}
|
2185
|
-
/*
|
2186
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
2187
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
2188
|
-
*/
|
2189
|
-
/*
|
2190
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
2191
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
2192
|
-
*/
|
2193
|
-
:root {
|
2194
|
-
--ck-search-field-view-horizontal-spacing: calc(var(--ck-icon-size) + var(--ck-spacing-medium));
|
2195
|
-
}
|
2196
|
-
.ck.ck-search > .ck-labeled-field-view .ck-input {
|
2197
|
-
width: 100%;
|
2198
|
-
}
|
2199
|
-
.ck.ck-search > .ck-labeled-field-view.ck-search__query_with-icon {
|
2200
|
-
--ck-labeled-field-label-default-position-x: var(--ck-search-field-view-horizontal-spacing);
|
2201
|
-
}
|
2202
|
-
.ck.ck-search > .ck-labeled-field-view.ck-search__query_with-icon > .ck-labeled-field-view__input-wrapper > .ck-icon {
|
2203
|
-
opacity: .5;
|
2204
|
-
pointer-events: none;
|
2205
|
-
}
|
2206
|
-
.ck.ck-search > .ck-labeled-field-view.ck-search__query_with-icon .ck-input {
|
2207
|
-
width: 100%;
|
2208
|
-
}
|
2209
|
-
[dir="ltr"] .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-icon .ck-input {
|
2210
|
-
padding-left: var(--ck-search-field-view-horizontal-spacing);
|
2211
|
-
}
|
2212
|
-
[dir="rtl"] .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-icon .ck-input:not(.ck-input-text_empty) {
|
2213
|
-
padding-left: var(--ck-search-field-view-horizontal-spacing);
|
2214
|
-
}
|
2215
|
-
.ck.ck-search > .ck-labeled-field-view.ck-search__query_with-reset {
|
2216
|
-
--ck-labeled-field-empty-unfocused-max-width: 100% - 2 * var(--ck-search-field-view-horizontal-spacing);
|
2217
|
-
}
|
2218
|
-
.ck.ck-search > .ck-labeled-field-view.ck-search__query_with-reset.ck-labeled-field-view_empty {
|
2219
|
-
--ck-labeled-field-empty-unfocused-max-width: 100% - var(--ck-search-field-view-horizontal-spacing) - var(--ck-spacing-medium);
|
2220
|
-
}
|
2221
|
-
.ck.ck-search > .ck-labeled-field-view.ck-search__query_with-reset .ck-search__reset {
|
2222
|
-
min-width: auto;
|
2223
|
-
min-height: auto;
|
2224
|
-
|
2225
|
-
background: none;
|
2226
|
-
opacity: .5;
|
2227
|
-
padding: 0;
|
2228
|
-
}
|
2229
|
-
[dir="ltr"] .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-reset .ck-search__reset {
|
2230
|
-
right: var(--ck-spacing-medium);
|
2231
|
-
}
|
2232
|
-
[dir="rtl"] .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-reset .ck-search__reset {
|
2233
|
-
left: var(--ck-spacing-medium);
|
2234
|
-
}
|
2235
|
-
.ck.ck-search > .ck-labeled-field-view.ck-search__query_with-reset .ck-search__reset:hover {
|
2236
|
-
opacity: 1;
|
2237
|
-
}
|
2238
|
-
.ck.ck-search > .ck-labeled-field-view.ck-search__query_with-reset .ck-input {
|
2239
|
-
width: 100%;
|
2240
|
-
}
|
2241
|
-
[dir="ltr"] .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-reset .ck-input:not(.ck-input-text_empty) {
|
2242
|
-
padding-right: var(--ck-search-field-view-horizontal-spacing);
|
2243
|
-
}
|
2244
|
-
[dir="rtl"] .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-reset .ck-input {
|
2245
|
-
padding-right: var(--ck-search-field-view-horizontal-spacing);
|
2246
|
-
}
|
2247
|
-
.ck.ck-search > .ck-search__results {
|
2248
|
-
min-width: 100%;
|
2249
|
-
}
|
2250
|
-
.ck.ck-search > .ck-search__results > .ck-search__info {
|
2251
|
-
width: 100%;
|
2252
|
-
padding: var(--ck-spacing-medium) var(--ck-spacing-large);
|
2253
|
-
}
|
2254
|
-
.ck.ck-search > .ck-search__results > .ck-search__info * {
|
2255
|
-
white-space: normal;
|
2256
|
-
}
|
2257
|
-
.ck.ck-search > .ck-search__results > .ck-search__info > span:first-child {
|
2258
|
-
font-weight: bold;
|
2259
|
-
}
|
2260
|
-
.ck.ck-search > .ck-search__results > .ck-search__info > span:last-child {
|
2261
|
-
margin-top: var(--ck-spacing-medium);
|
2262
|
-
}
|
2263
|
-
/*
|
2264
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
2265
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
2266
|
-
*/
|
2267
|
-
:root {
|
2268
|
-
--ck-toolbar-spinner-size: 18px;
|
2269
|
-
}
|
2270
|
-
.ck.ck-spinner-container {
|
2271
|
-
width: var(--ck-toolbar-spinner-size);
|
2272
|
-
height: var(--ck-toolbar-spinner-size);
|
2273
|
-
animation: 1.5s infinite rotate linear;
|
2274
|
-
}
|
2275
|
-
.ck.ck-spinner {
|
2276
|
-
width: var(--ck-toolbar-spinner-size);
|
2277
|
-
height: var(--ck-toolbar-spinner-size);
|
2278
|
-
border-radius: 50%;
|
2279
|
-
border: 2px solid var(--ck-color-text);
|
2280
|
-
border-top-color: transparent;
|
2281
|
-
}
|
2282
|
-
@keyframes rotate {
|
2283
|
-
to {
|
2284
|
-
transform: rotate(360deg)
|
2285
|
-
}
|
2286
|
-
}
|
2287
|
-
/*
|
2288
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
2289
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
2290
|
-
*/
|
2291
|
-
/*
|
2292
|
-
* This fixes a problem in Firefox when the initial height of the complement does not match the number of rows.
|
2293
|
-
* This bug is especially visible when rows=1.
|
2294
|
-
*/
|
2295
|
-
.ck-textarea {
|
2296
|
-
overflow-x: hidden
|
2297
|
-
}
|
2298
|
-
/*
|
2299
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
2300
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
2301
|
-
*/
|
2302
|
-
:root {
|
2303
|
-
--ck-color-block-toolbar-button: var(--ck-color-text);
|
2304
|
-
--ck-block-toolbar-button-size: var(--ck-font-size-normal);
|
2305
|
-
}
|
2306
|
-
.ck.ck-block-toolbar-button {
|
2307
|
-
color: var(--ck-color-block-toolbar-button);
|
2308
|
-
font-size: var(--ck-block-toolbar-size);
|
2309
|
-
}
|
2310
|
-
/*
|
2311
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
2312
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
2313
|
-
*/
|
2314
|
-
/*
|
2315
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
2316
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
2317
|
-
*/
|
2318
|
-
/**
|
2319
|
-
* Implements rounded corner interface for .ck-rounded-corners class.
|
2320
|
-
*
|
2321
|
-
* @see $ck-border-radius
|
2322
|
-
*/
|
2323
|
-
/*
|
2324
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
2325
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
2326
|
-
*/
|
2327
|
-
.ck.ck-toolbar {
|
2328
|
-
border-radius: 0;
|
2329
|
-
}
|
2330
|
-
.ck-rounded-corners .ck.ck-toolbar, .ck.ck-toolbar.ck-rounded-corners {
|
2331
|
-
border-radius: var(--ck-border-radius);
|
2332
|
-
}
|
2333
|
-
.ck.ck-toolbar {
|
2334
|
-
|
2335
|
-
background: var(--ck-color-toolbar-background);
|
2336
|
-
padding: 0 var(--ck-spacing-small);
|
2337
|
-
border: 1px solid var(--ck-color-toolbar-border);
|
2338
|
-
}
|
2339
|
-
.ck.ck-toolbar .ck.ck-toolbar__separator {
|
2340
|
-
align-self: stretch;
|
2341
|
-
width: 1px;
|
2342
|
-
min-width: 1px;
|
2343
|
-
background: var(--ck-color-toolbar-border);
|
2344
|
-
|
2345
|
-
/*
|
2346
|
-
* These margins make the separators look better in balloon toolbars (when aligned with the "tip").
|
2347
|
-
* See https://github.com/ckeditor/ckeditor5/issues/7493.
|
2348
|
-
*/
|
2349
|
-
margin-top: var(--ck-spacing-small);
|
2350
|
-
margin-bottom: var(--ck-spacing-small);
|
2351
|
-
}
|
2352
|
-
.ck.ck-toolbar .ck-toolbar__line-break {
|
2353
|
-
height: 0;
|
2354
|
-
}
|
2355
|
-
.ck.ck-toolbar > .ck-toolbar__items > *:not(.ck-toolbar__line-break) {
|
2356
|
-
/* (#11) Separate toolbar items. */
|
2357
|
-
margin-right: var(--ck-spacing-small);
|
2358
|
-
}
|
2359
|
-
/* Don't display a separator after an empty items container, for instance,
|
2360
|
-
when all items were grouped */
|
2361
|
-
.ck.ck-toolbar > .ck-toolbar__items:empty + .ck.ck-toolbar__separator {
|
2362
|
-
display: none;
|
2363
|
-
}
|
2364
|
-
.ck.ck-toolbar > .ck-toolbar__items > *:not(.ck-toolbar__line-break),
|
2365
|
-
.ck.ck-toolbar > .ck.ck-toolbar__grouped-dropdown {
|
2366
|
-
/* Make sure items wrapped to the next line have v-spacing */
|
2367
|
-
margin-top: var(--ck-spacing-small);
|
2368
|
-
margin-bottom: var(--ck-spacing-small);
|
2369
|
-
}
|
2370
|
-
.ck.ck-toolbar.ck-toolbar_vertical {
|
2371
|
-
/* Items in a vertical toolbar span the entire width. */
|
2372
|
-
padding: 0;
|
2373
|
-
|
2374
|
-
/* Specificity matters here. See https://github.com/ckeditor/ckeditor5-theme-lark/issues/168. */
|
2375
|
-
}
|
2376
|
-
.ck.ck-toolbar.ck-toolbar_vertical > .ck-toolbar__items > .ck {
|
2377
|
-
/* Items in a vertical toolbar should span the horizontal space. */
|
2378
|
-
width: 100%;
|
2379
|
-
|
2380
|
-
/* Items in a vertical toolbar should have no margin. */
|
2381
|
-
margin: 0;
|
2382
|
-
|
2383
|
-
/* Items in a vertical toolbar span the entire width so rounded corners are pointless. */
|
2384
|
-
border-radius: 0;
|
2385
|
-
}
|
2386
|
-
.ck.ck-toolbar.ck-toolbar_compact {
|
2387
|
-
/* No spacing around items. */
|
2388
|
-
padding: 0;
|
2389
|
-
}
|
2390
|
-
.ck.ck-toolbar.ck-toolbar_compact > .ck-toolbar__items > * {
|
2391
|
-
/* Compact toolbar items have no spacing between them. */
|
2392
|
-
margin: 0;
|
2393
|
-
|
2394
|
-
/* "Middle" children should have no rounded corners. */
|
2395
|
-
}
|
2396
|
-
.ck.ck-toolbar.ck-toolbar_compact > .ck-toolbar__items > *:not(:first-child):not(:last-child) {
|
2397
|
-
border-radius: 0;
|
2398
|
-
}
|
2399
|
-
/*
|
2400
|
-
* Dropdown button has asymmetric padding to fit the arrow.
|
2401
|
-
* This button has no arrow so let's revert that padding back to normal.
|
2402
|
-
*/
|
2403
|
-
.ck.ck-toolbar > .ck.ck-toolbar__grouped-dropdown > .ck.ck-button.ck-dropdown__button {
|
2404
|
-
padding-left: var(--ck-spacing-tiny);
|
2405
|
-
}
|
2406
|
-
/* A drop-down containing the nested toolbar with configured items. */
|
2407
|
-
/* Prevent empty space in the panel when the dropdown label is visible and long but the toolbar has few items. */
|
2408
|
-
.ck.ck-toolbar .ck-toolbar__nested-toolbar-dropdown > .ck-dropdown__panel {
|
2409
|
-
min-width: auto;
|
2410
|
-
}
|
2411
|
-
.ck.ck-toolbar .ck-toolbar__nested-toolbar-dropdown > .ck-button > .ck-button__label {
|
2412
|
-
max-width: 7em;
|
2413
|
-
width: auto;
|
2414
|
-
}
|
2415
|
-
.ck.ck-toolbar:focus {
|
2416
|
-
outline: none;
|
2417
|
-
}
|
2418
|
-
.ck-toolbar-container .ck.ck-toolbar {
|
2419
|
-
border: 0;
|
2420
|
-
}
|
2421
|
-
/* stylelint-disable */
|
2422
|
-
/*
|
2423
|
-
* Styles for RTL toolbars.
|
2424
|
-
*
|
2425
|
-
* Note: In some cases (e.g. a decoupled editor), the toolbar has its own "dir"
|
2426
|
-
* because its parent is not controlled by the editor framework.
|
2427
|
-
*/
|
2428
|
-
[dir="rtl"] .ck.ck-toolbar > .ck-toolbar__items > .ck, .ck.ck-toolbar[dir="rtl"] > .ck-toolbar__items > .ck {
|
2429
|
-
margin-right: 0;
|
2430
|
-
}
|
2431
|
-
[dir="rtl"] .ck.ck-toolbar:not(.ck-toolbar_compact) > .ck-toolbar__items > .ck, .ck.ck-toolbar[dir="rtl"]:not(.ck-toolbar_compact) > .ck-toolbar__items > .ck {
|
2432
|
-
/* (#11) Separate toolbar items. */
|
2433
|
-
margin-left: var(--ck-spacing-small);
|
2434
|
-
}
|
2435
|
-
[dir="rtl"] .ck.ck-toolbar > .ck-toolbar__items > .ck:last-child, .ck.ck-toolbar[dir="rtl"] > .ck-toolbar__items > .ck:last-child {
|
2436
|
-
margin-left: 0;
|
2437
|
-
}
|
2438
|
-
/* No rounded corners on the right side of the first child. */
|
2439
|
-
[dir="rtl"] .ck.ck-toolbar.ck-toolbar_compact > .ck-toolbar__items > .ck:first-child, .ck.ck-toolbar.ck-toolbar_compact[dir="rtl"] > .ck-toolbar__items > .ck:first-child {
|
2440
|
-
border-top-left-radius: 0;
|
2441
|
-
border-bottom-left-radius: 0;
|
2442
|
-
}
|
2443
|
-
/* No rounded corners on the left side of the last child. */
|
2444
|
-
[dir="rtl"] .ck.ck-toolbar.ck-toolbar_compact > .ck-toolbar__items > .ck:last-child, .ck.ck-toolbar.ck-toolbar_compact[dir="rtl"] > .ck-toolbar__items > .ck:last-child {
|
2445
|
-
border-top-right-radius: 0;
|
2446
|
-
border-bottom-right-radius: 0;
|
2447
|
-
}
|
2448
|
-
/* Separate the the separator form the grouping dropdown when some items are grouped. */
|
2449
|
-
[dir="rtl"] .ck.ck-toolbar > .ck.ck-toolbar__separator, .ck.ck-toolbar[dir="rtl"] > .ck.ck-toolbar__separator {
|
2450
|
-
margin-left: var(--ck-spacing-small);
|
2451
|
-
}
|
2452
|
-
/* Some spacing between the items and the separator before the grouped items dropdown. */
|
2453
|
-
[dir="rtl"] .ck.ck-toolbar.ck-toolbar_grouping > .ck-toolbar__items:not(:empty):not(:only-child), .ck.ck-toolbar.ck-toolbar_grouping[dir="rtl"] > .ck-toolbar__items:not(:empty):not(:only-child) {
|
2454
|
-
margin-left: var(--ck-spacing-small);
|
2455
|
-
}
|
2456
|
-
/*
|
2457
|
-
* Styles for LTR toolbars.
|
2458
|
-
*
|
2459
|
-
* Note: In some cases (e.g. a decoupled editor), the toolbar has its own "dir"
|
2460
|
-
* because its parent is not controlled by the editor framework.
|
2461
|
-
*/
|
2462
|
-
[dir="ltr"] .ck.ck-toolbar > .ck-toolbar__items > .ck:last-child, .ck.ck-toolbar[dir="ltr"] > .ck-toolbar__items > .ck:last-child {
|
2463
|
-
margin-right: 0;
|
2464
|
-
}
|
2465
|
-
/* No rounded corners on the right side of the first child. */
|
2466
|
-
[dir="ltr"] .ck.ck-toolbar.ck-toolbar_compact > .ck-toolbar__items > .ck:first-child, .ck.ck-toolbar.ck-toolbar_compact[dir="ltr"] > .ck-toolbar__items > .ck:first-child {
|
2467
|
-
border-top-right-radius: 0;
|
2468
|
-
border-bottom-right-radius: 0;
|
2469
|
-
}
|
2470
|
-
/* No rounded corners on the left side of the last child. */
|
2471
|
-
[dir="ltr"] .ck.ck-toolbar.ck-toolbar_compact > .ck-toolbar__items > .ck:last-child, .ck.ck-toolbar.ck-toolbar_compact[dir="ltr"] > .ck-toolbar__items > .ck:last-child {
|
2472
|
-
border-top-left-radius: 0;
|
2473
|
-
border-bottom-left-radius: 0;
|
2474
|
-
}
|
2475
|
-
/* Separate the the separator form the grouping dropdown when some items are grouped. */
|
2476
|
-
[dir="ltr"] .ck.ck-toolbar > .ck.ck-toolbar__separator, .ck.ck-toolbar[dir="ltr"] > .ck.ck-toolbar__separator {
|
2477
|
-
margin-right: var(--ck-spacing-small);
|
2478
|
-
}
|
2479
|
-
/* Some spacing between the items and the separator before the grouped items dropdown. */
|
2480
|
-
[dir="ltr"] .ck.ck-toolbar.ck-toolbar_grouping > .ck-toolbar__items:not(:empty):not(:only-child), .ck.ck-toolbar.ck-toolbar_grouping[dir="ltr"] > .ck-toolbar__items:not(:empty):not(:only-child) {
|
2481
|
-
margin-right: var(--ck-spacing-small);
|
2482
|
-
}
|
2483
|
-
/* stylelint-enable */
|
2484
|
-
/*
|
2485
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
2486
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
2487
|
-
*/
|
2488
|
-
/*
|
2489
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
2490
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
2491
|
-
*/
|
2492
|
-
/**
|
2493
|
-
* Implements rounded corner interface for .ck-rounded-corners class.
|
2494
|
-
*
|
2495
|
-
* @see $ck-border-radius
|
2496
|
-
*/
|
2497
|
-
.ck.ck-balloon-panel.ck-tooltip {
|
2498
|
-
--ck-balloon-border-width: 0px;
|
2499
|
-
--ck-balloon-arrow-offset: 0px;
|
2500
|
-
--ck-balloon-arrow-half-width: 4px;
|
2501
|
-
--ck-balloon-arrow-height: 4px;
|
2502
|
-
--ck-tooltip-text-padding: 4px;
|
2503
|
-
--ck-color-panel-background: var(--ck-color-tooltip-background);
|
2504
|
-
|
2505
|
-
padding: 0 var(--ck-spacing-medium);
|
2506
|
-
|
2507
|
-
/* Reset balloon panel styles */
|
2508
|
-
box-shadow: none;
|
2509
|
-
}
|
2510
|
-
.ck.ck-balloon-panel.ck-tooltip .ck-tooltip__text {
|
2511
|
-
font-size: .9em;
|
2512
|
-
line-height: 1.5;
|
2513
|
-
color: var(--ck-color-tooltip-text);
|
2514
|
-
}
|
2515
|
-
.ck.ck-balloon-panel.ck-tooltip.ck-tooltip_multi-line .ck-tooltip__text {
|
2516
|
-
white-space: break-spaces;
|
2517
|
-
display: inline-block;
|
2518
|
-
padding: var(--ck-tooltip-text-padding) 0;
|
2519
|
-
max-width: 200px;
|
2520
|
-
}
|
2521
|
-
/* Hide the default shadow of the .ck-balloon-panel tip */
|
2522
|
-
.ck.ck-balloon-panel.ck-tooltip::before {
|
2523
|
-
display: none;
|
2524
|
-
}
|
2525
|
-
|
2526
|
-
/* Editor */
|
2527
|
-
/*
|
2528
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
2529
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
2530
|
-
*/
|
2531
|
-
/*
|
2532
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
2533
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
2534
|
-
*/
|
2535
|
-
/**
|
2536
|
-
* Implements rounded corner interface for .ck-rounded-corners class.
|
2537
|
-
*
|
2538
|
-
* @see $ck-border-radius
|
2539
|
-
*/
|
2540
|
-
.ck.ck-editor__top .ck-sticky-panel .ck-toolbar {
|
2541
|
-
border-radius: 0;
|
2542
|
-
}
|
2543
|
-
.ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-toolbar, .ck.ck-editor__top .ck-sticky-panel .ck-toolbar.ck-rounded-corners {
|
2544
|
-
border-radius: var(--ck-border-radius);
|
2545
|
-
border-bottom-left-radius: 0;
|
2546
|
-
border-bottom-right-radius: 0;
|
2547
|
-
}
|
2548
|
-
.ck.ck-editor__top .ck-sticky-panel .ck-toolbar {
|
2549
|
-
|
2550
|
-
border-bottom-width: 0;
|
2551
|
-
}
|
2552
|
-
.ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content_sticky .ck-toolbar {
|
2553
|
-
border-bottom-width: 1px;
|
2554
|
-
|
2555
|
-
border-radius: 0;
|
2556
|
-
}
|
2557
|
-
.ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content_sticky .ck-toolbar, .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content_sticky .ck-toolbar.ck-rounded-corners {
|
2558
|
-
border-radius: var(--ck-border-radius);
|
2559
|
-
border-radius: 0;
|
2560
|
-
}
|
2561
|
-
/* Note: Use ck-editor__main to make sure these styles don't apply to other editor types */
|
2562
|
-
.ck.ck-editor__main > .ck-editor__editable {
|
2563
|
-
/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/113 */
|
2564
|
-
background: var(--ck-color-base-background);
|
2565
|
-
|
2566
|
-
border-radius: 0;
|
2567
|
-
}
|
2568
|
-
.ck-rounded-corners .ck.ck-editor__main > .ck-editor__editable, .ck.ck-editor__main > .ck-editor__editable.ck-rounded-corners {
|
2569
|
-
border-radius: var(--ck-border-radius);
|
2570
|
-
border-top-left-radius: 0;
|
2571
|
-
border-top-right-radius: 0;
|
2572
|
-
}
|
2573
|
-
.ck.ck-editor__main > .ck-editor__editable:not(.ck-focused) {
|
2574
|
-
border-color: var(--ck-color-base-border);
|
2575
|
-
}
|
2576
|
-
|
2577
|
-
/* Plugins */
|
2578
|
-
/*
|
2579
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
2580
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
2581
|
-
*/
|
2582
|
-
/*
|
2583
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
2584
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
2585
|
-
*/
|
2586
|
-
:root {
|
2587
|
-
--ck-clipboard-drop-target-dot-width: 12px;
|
2588
|
-
--ck-clipboard-drop-target-dot-height: 8px;
|
2589
|
-
--ck-clipboard-drop-target-color: var(--ck-color-focus-border);
|
2590
|
-
}
|
2591
|
-
/*
|
2592
|
-
* Vertical drop target (in text).
|
2593
|
-
*/
|
2594
|
-
.ck.ck-editor__editable .ck.ck-clipboard-drop-target-position span {
|
2595
|
-
bottom: calc(-.5 * var(--ck-clipboard-drop-target-dot-height));
|
2596
|
-
top: calc(-.5 * var(--ck-clipboard-drop-target-dot-height));
|
2597
|
-
border: 1px solid var(--ck-clipboard-drop-target-color);
|
2598
|
-
background: var(--ck-clipboard-drop-target-color);
|
2599
|
-
margin-left: -1px;
|
2600
|
-
|
2601
|
-
/* The triangle above the marker */
|
2602
|
-
}
|
2603
|
-
.ck.ck-editor__editable .ck.ck-clipboard-drop-target-position span::after {
|
2604
|
-
content: '';
|
2605
|
-
width: 0;
|
2606
|
-
height: 0;
|
2607
|
-
|
2608
|
-
display: block;
|
2609
|
-
position: absolute;
|
2610
|
-
left: 50%;
|
2611
|
-
top: calc(-.5 * var(--ck-clipboard-drop-target-dot-height));
|
2612
|
-
|
2613
|
-
transform: translateX(-50%);
|
2614
|
-
border-color: var(--ck-clipboard-drop-target-color) transparent transparent transparent;
|
2615
|
-
border-width: calc(var(--ck-clipboard-drop-target-dot-height)) calc(.5 * var(--ck-clipboard-drop-target-dot-width)) 0 calc(.5 * var(--ck-clipboard-drop-target-dot-width));
|
2616
|
-
border-style: solid;
|
2617
|
-
}
|
2618
|
-
/*
|
2619
|
-
* Styles of the widget that it a drop target.
|
2620
|
-
*/
|
2621
|
-
.ck.ck-editor__editable .ck-widget.ck-clipboard-drop-target-range {
|
2622
|
-
outline: var(--ck-widget-outline-thickness) solid var(--ck-clipboard-drop-target-color) !important;
|
2623
|
-
}
|
2624
|
-
/*
|
2625
|
-
* Styles of the widget being dragged (its preview).
|
2626
|
-
*/
|
2627
|
-
.ck.ck-editor__editable .ck-widget:-webkit-drag {
|
2628
|
-
zoom: 0.6;
|
2629
|
-
outline: none !important;
|
2630
|
-
}
|
2631
|
-
.ck.ck-clipboard-drop-target-line {
|
2632
|
-
height: 0;
|
2633
|
-
border: 1px solid var(--ck-clipboard-drop-target-color);
|
2634
|
-
background: var(--ck-clipboard-drop-target-color);
|
2635
|
-
margin-top: -1px;
|
2636
|
-
}
|
2637
|
-
.ck.ck-clipboard-drop-target-line::before {
|
2638
|
-
content: '';
|
2639
|
-
position: absolute;
|
2640
|
-
top: calc(-.5 * var(--ck-clipboard-drop-target-dot-width));
|
2641
|
-
width: 0;
|
2642
|
-
height: 0;
|
2643
|
-
border-style: solid;
|
2644
|
-
}
|
2645
|
-
[dir="ltr"] .ck.ck-clipboard-drop-target-line::before {
|
2646
|
-
left: -1px;
|
2647
|
-
|
2648
|
-
border-width: calc(.5 * var(--ck-clipboard-drop-target-dot-width)) 0 calc(.5 * var(--ck-clipboard-drop-target-dot-width)) var(--ck-clipboard-drop-target-dot-height);
|
2649
|
-
border-color: transparent transparent transparent var(--ck-clipboard-drop-target-color);
|
2650
|
-
}
|
2651
|
-
[dir="rtl"] .ck.ck-clipboard-drop-target-line::before {
|
2652
|
-
right: -1px;
|
2653
|
-
|
2654
|
-
border-width:calc(.5 * var(--ck-clipboard-drop-target-dot-width)) var(--ck-clipboard-drop-target-dot-height) calc(.5 * var(--ck-clipboard-drop-target-dot-width)) 0;
|
2655
|
-
border-color: transparent var(--ck-clipboard-drop-target-color) transparent transparent;
|
2656
|
-
}
|
2657
|
-
/*
|
2658
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
2659
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
2660
|
-
*/
|
2661
|
-
:root {
|
2662
|
-
--ck-color-code-block-label-background: hsl(0, 0%, 46%);
|
2663
|
-
}
|
2664
|
-
.ck.ck-editor__editable pre[data-language]::after {
|
2665
|
-
top: -1px;
|
2666
|
-
right: 10px;
|
2667
|
-
background: var(--ck-color-code-block-label-background);
|
2668
|
-
|
2669
|
-
font-size: 10px;
|
2670
|
-
font-family: var(--ck-font-face);
|
2671
|
-
line-height: 16px;
|
2672
|
-
padding: var(--ck-spacing-tiny) var(--ck-spacing-medium);
|
2673
|
-
color: hsl(0, 0%, 100%);
|
2674
|
-
white-space: nowrap;
|
2675
|
-
}
|
2676
|
-
.ck.ck-code-block-dropdown .ck-dropdown__panel {
|
2677
|
-
/* There could be dozens of languages available. Use scroll to prevent a 10e6px dropdown. */
|
2678
|
-
max-height: 250px;
|
2679
|
-
overflow-y: auto;
|
2680
|
-
overflow-x: hidden;
|
2681
|
-
}
|
2682
|
-
/*
|
2683
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
2684
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
2685
|
-
*/
|
2686
|
-
/* See ckeditor/ckeditor5#936. */
|
2687
|
-
.ck.ck-placeholder::before, .ck .ck-placeholder::before {
|
2688
|
-
cursor: text;
|
2689
|
-
color: var(--ck-color-engine-placeholder-text);
|
2690
|
-
}
|
2691
|
-
/*
|
2692
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
2693
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
2694
|
-
*/
|
2695
|
-
/*
|
2696
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
2697
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
2698
|
-
*/
|
2699
|
-
/*
|
2700
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
2701
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
2702
|
-
*/
|
2703
|
-
.ck.ck-find-and-replace-form {
|
2704
|
-
width: 400px;
|
2705
|
-
|
2706
|
-
/*
|
2707
|
-
* The <form> needs tabindex="-1" for proper Esc handling after being clicked
|
2708
|
-
* but the side effect is that this creates a nasty focus outline in some browsers.
|
2709
|
-
*/
|
2710
|
-
}
|
2711
|
-
.ck.ck-find-and-replace-form:focus {
|
2712
|
-
outline: none;
|
2713
|
-
}
|
2714
|
-
/* Generic styles for the form inputs and actions. */
|
2715
|
-
.ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs,
|
2716
|
-
.ck.ck-find-and-replace-form .ck-find-and-replace-form__actions {
|
2717
|
-
flex: 1 1 auto;
|
2718
|
-
flex-direction: row;
|
2719
|
-
flex-wrap: wrap;
|
2720
|
-
align-items: center;
|
2721
|
-
align-content: stretch;
|
2722
|
-
|
2723
|
-
padding: var(--ck-spacing-large);
|
2724
|
-
margin: 0;
|
2725
|
-
|
2726
|
-
}
|
2727
|
-
.ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs > .ck-button, .ck.ck-find-and-replace-form .ck-find-and-replace-form__actions > .ck-button {
|
2728
|
-
flex: 0 0 auto;
|
2729
|
-
}
|
2730
|
-
[dir="ltr"] .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs > * + *, [dir="ltr"] .ck.ck-find-and-replace-form .ck-find-and-replace-form__actions > * + * {
|
2731
|
-
margin-left: var(--ck-spacing-standard);
|
2732
|
-
}
|
2733
|
-
[dir="rtl"] .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs > * + *, [dir="rtl"] .ck.ck-find-and-replace-form .ck-find-and-replace-form__actions > * + * {
|
2734
|
-
margin-right: var(--ck-spacing-standard);
|
2735
|
-
}
|
2736
|
-
.ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs .ck-labeled-field-view, .ck.ck-find-and-replace-form .ck-find-and-replace-form__actions .ck-labeled-field-view {
|
2737
|
-
flex: 1 1 auto;
|
2738
|
-
}
|
2739
|
-
.ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs .ck-labeled-field-view .ck-input, .ck.ck-find-and-replace-form .ck-find-and-replace-form__actions .ck-labeled-field-view .ck-input {
|
2740
|
-
width: 100%;
|
2741
|
-
min-width: 50px;
|
2742
|
-
}
|
2743
|
-
/* Styles specific for inputs area. */
|
2744
|
-
.ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs {
|
2745
|
-
/* To display all controls in line when there's an error under the input */
|
2746
|
-
align-items: flex-start;
|
2747
|
-
}
|
2748
|
-
.ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs > .ck-button-prev > .ck-icon {
|
2749
|
-
transform: rotate(90deg);
|
2750
|
-
}
|
2751
|
-
.ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs > .ck-button-next > .ck-icon {
|
2752
|
-
transform: rotate(-90deg);
|
2753
|
-
}
|
2754
|
-
.ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs .ck-results-counter {
|
2755
|
-
top: 50%;
|
2756
|
-
transform: translateY(-50%);
|
2757
|
-
}
|
2758
|
-
[dir="ltr"] .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs .ck-results-counter {
|
2759
|
-
right: var(--ck-spacing-standard);
|
2760
|
-
}
|
2761
|
-
[dir="rtl"] .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs .ck-results-counter {
|
2762
|
-
left: var(--ck-spacing-standard);
|
2763
|
-
}
|
2764
|
-
.ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs .ck-results-counter {
|
2765
|
-
|
2766
|
-
color: var(--ck-color-base-border);
|
2767
|
-
}
|
2768
|
-
.ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs > .ck-labeled-field-replace {
|
2769
|
-
flex: 0 0 100%;
|
2770
|
-
padding-top: var(--ck-spacing-standard);
|
2771
|
-
}
|
2772
|
-
[dir="ltr"] .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs > .ck-labeled-field-replace {
|
2773
|
-
margin-left: 0;
|
2774
|
-
}
|
2775
|
-
[dir="rtl"] .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs > .ck-labeled-field-replace {
|
2776
|
-
margin-right: 0;
|
2777
|
-
}
|
2778
|
-
/* Styles specific for actions area. */
|
2779
|
-
.ck.ck-find-and-replace-form .ck-find-and-replace-form__actions {
|
2780
|
-
flex-wrap: wrap;
|
2781
|
-
justify-content: flex-end;
|
2782
|
-
margin-top: calc( -1 * var(--ck-spacing-large) );
|
2783
|
-
}
|
2784
|
-
.ck.ck-find-and-replace-form .ck-find-and-replace-form__actions > .ck-button-find {
|
2785
|
-
font-weight: bold;
|
2786
|
-
|
2787
|
-
/* Beef the find button up a little. It's the main action button in the form */
|
2788
|
-
}
|
2789
|
-
.ck.ck-find-and-replace-form .ck-find-and-replace-form__actions > .ck-button-find .ck-button__label {
|
2790
|
-
padding-left: var(--ck-spacing-large);
|
2791
|
-
padding-right: var(--ck-spacing-large);
|
2792
|
-
}
|
2793
|
-
.ck.ck-find-and-replace-form .ck-switchbutton {
|
2794
|
-
width: 100%;
|
2795
|
-
display: flex;
|
2796
|
-
flex-direction: row;
|
2797
|
-
flex-wrap: nowrap;
|
2798
|
-
justify-content: space-between;
|
2799
|
-
align-items: center;
|
2800
|
-
}
|
2801
|
-
@media screen and (max-width: 600px) {
|
2802
|
-
.ck.ck-find-and-replace-form {
|
2803
|
-
width: 300px;
|
2804
|
-
|
2805
|
-
/* Don't let the form overflow from the dialog (https://github.com/cksource/ckeditor5-commercial/issues/5913) */
|
2806
|
-
max-width: 100%;
|
2807
|
-
|
2808
|
-
/* Styles specific for inputs area. */
|
2809
|
-
}
|
2810
|
-
.ck.ck-find-and-replace-form.ck-find-and-replace-form__input {
|
2811
|
-
flex-wrap: wrap;
|
2812
|
-
}
|
2813
|
-
|
2814
|
-
.ck.ck-find-and-replace-form.ck-find-and-replace-form__input .ck-labeled-field-view {
|
2815
|
-
flex: 1 0 auto;
|
2816
|
-
width: 100%;
|
2817
|
-
margin-bottom: var(--ck-spacing-standard);
|
2818
|
-
}
|
2819
|
-
|
2820
|
-
.ck.ck-find-and-replace-form.ck-find-and-replace-form__input > .ck-button {
|
2821
|
-
text-align: center;
|
2822
|
-
}
|
2823
|
-
|
2824
|
-
.ck.ck-find-and-replace-form.ck-find-and-replace-form__input > .ck-button:first-of-type {
|
2825
|
-
flex: 1 1 auto;
|
2826
|
-
}
|
2827
|
-
|
2828
|
-
[dir="ltr"] .ck.ck-find-and-replace-form.ck-find-and-replace-form__input > .ck-button:first-of-type {
|
2829
|
-
margin-left: 0;
|
2830
|
-
}
|
2831
|
-
|
2832
|
-
[dir="rtl"] .ck.ck-find-and-replace-form.ck-find-and-replace-form__input > .ck-button:first-of-type {
|
2833
|
-
margin-right: 0;
|
2834
|
-
}
|
2835
|
-
|
2836
|
-
.ck.ck-find-and-replace-form.ck-find-and-replace-form__input > .ck-button:first-of-type .ck-button__label {
|
2837
|
-
width: 100%;
|
2838
|
-
text-align: center;
|
2839
|
-
}
|
2840
|
-
|
2841
|
-
/* Styles specific for actions area. */
|
2842
|
-
.ck.ck-find-and-replace-form.ck-find-and-replace-form__actions > :not(.ck-labeled-field-view) {
|
2843
|
-
flex-wrap: wrap;
|
2844
|
-
flex: 1 1 auto;
|
2845
|
-
}
|
2846
|
-
|
2847
|
-
.ck.ck-find-and-replace-form.ck-find-and-replace-form__actions > :not(.ck-labeled-field-view) > .ck-button {
|
2848
|
-
text-align: center;
|
2849
|
-
}
|
2850
|
-
|
2851
|
-
.ck.ck-find-and-replace-form.ck-find-and-replace-form__actions > :not(.ck-labeled-field-view) > .ck-button:first-of-type {
|
2852
|
-
flex: 1 1 auto;
|
2853
|
-
}
|
2854
|
-
|
2855
|
-
[dir="ltr"] .ck.ck-find-and-replace-form.ck-find-and-replace-form__actions > :not(.ck-labeled-field-view) > .ck-button:first-of-type {
|
2856
|
-
margin-left: 0;
|
2857
|
-
}
|
2858
|
-
|
2859
|
-
[dir="rtl"] .ck.ck-find-and-replace-form.ck-find-and-replace-form__actions > :not(.ck-labeled-field-view) > .ck-button:first-of-type {
|
2860
|
-
margin-right: 0;
|
2861
|
-
}
|
2862
|
-
|
2863
|
-
.ck.ck-find-and-replace-form.ck-find-and-replace-form__actions > :not(.ck-labeled-field-view) > .ck-button .ck-button__label {
|
2864
|
-
width: 100%;
|
2865
|
-
text-align: center;
|
2866
|
-
}
|
2867
|
-
}
|
2868
|
-
/*
|
2869
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
2870
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
2871
|
-
*/
|
2872
|
-
/* Resize dropdown's button label. */
|
2873
|
-
.ck.ck-dropdown.ck-heading-dropdown .ck-dropdown__button .ck-button__label {
|
2874
|
-
width: 8em;
|
2875
|
-
}
|
2876
|
-
.ck.ck-dropdown.ck-heading-dropdown .ck-dropdown__panel .ck-list__item {
|
2877
|
-
min-width: 18em;
|
2878
|
-
}
|
2879
|
-
/*
|
2880
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
2881
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
2882
|
-
*/
|
2883
|
-
/*
|
2884
|
-
* Note: This file should contain the wireframe styles only. But since there are no such styles,
|
2885
|
-
* it acts as a message to the builder telling that it should look for the corresponding styles
|
2886
|
-
* **in the theme** when compiling the editor.
|
2887
|
-
*/
|
2888
|
-
/*
|
2889
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
2890
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
2891
|
-
*/
|
2892
|
-
:root {
|
2893
|
-
--ck-html-embed-content-width: calc(100% - 1.5 * var(--ck-icon-size));
|
2894
|
-
--ck-html-embed-source-height: 10em;
|
2895
|
-
--ck-html-embed-unfocused-outline-width: 1px;
|
2896
|
-
--ck-html-embed-content-min-height: calc(var(--ck-icon-size) + var(--ck-spacing-standard));
|
2897
|
-
|
2898
|
-
--ck-html-embed-source-disabled-background: var(--ck-color-base-foreground);
|
2899
|
-
--ck-html-embed-source-disabled-color: hsl(0deg 0% 45%);
|
2900
|
-
}
|
2901
|
-
/* The feature container. */
|
2902
|
-
.ck-widget.raw-html-embed {
|
2903
|
-
font-size: var(--ck-font-size-base);
|
2904
|
-
background-color: var(--ck-color-base-foreground);
|
2905
|
-
}
|
2906
|
-
.ck-widget.raw-html-embed:not(.ck-widget_selected):not(:hover) {
|
2907
|
-
outline: var(--ck-html-embed-unfocused-outline-width) dashed var(--ck-color-widget-blurred-border);
|
2908
|
-
}
|
2909
|
-
/* HTML embed widget itself should respect UI language direction */
|
2910
|
-
.ck-widget.raw-html-embed[dir="ltr"] {
|
2911
|
-
text-align: left;
|
2912
|
-
}
|
2913
|
-
.ck-widget.raw-html-embed[dir="rtl"] {
|
2914
|
-
text-align: right;
|
2915
|
-
}
|
2916
|
-
/* ----- Embed label in the upper left corner ----------------------------------------------- */
|
2917
|
-
.ck-widget.raw-html-embed::before {
|
2918
|
-
content: attr(data-html-embed-label);
|
2919
|
-
top: calc(-1 * var(--ck-html-embed-unfocused-outline-width));
|
2920
|
-
left: var(--ck-spacing-standard);
|
2921
|
-
background: hsl(0deg 0% 60%);
|
2922
|
-
transition: background var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
|
2923
|
-
padding: calc(var(--ck-spacing-tiny) + var(--ck-html-embed-unfocused-outline-width)) var(--ck-spacing-small) var(--ck-spacing-tiny);
|
2924
|
-
border-radius: 0 0 var(--ck-border-radius) var(--ck-border-radius);
|
2925
|
-
color: var(--ck-color-base-background);
|
2926
|
-
font-size: var(--ck-font-size-tiny);
|
2927
|
-
font-family: var(--ck-font-face);
|
2928
|
-
}
|
2929
|
-
.ck-widget.raw-html-embed[dir="rtl"]::before {
|
2930
|
-
left: auto;
|
2931
|
-
right: var(--ck-spacing-standard);
|
2932
|
-
}
|
2933
|
-
/* Make space for label but it only collides in LTR languages */
|
2934
|
-
.ck-widget.raw-html-embed[dir="ltr"] .ck-widget__type-around .ck-widget__type-around__button.ck-widget__type-around__button_before {
|
2935
|
-
margin-left: 50px;
|
2936
|
-
}
|
2937
|
-
.ck.ck-editor__editable.ck-blurred .ck-widget.raw-html-embed.ck-widget_selected::before {
|
2938
|
-
top: 0px;
|
2939
|
-
padding: var(--ck-spacing-tiny) var(--ck-spacing-small);
|
2940
|
-
}
|
2941
|
-
.ck.ck-editor__editable:not(.ck-blurred) .ck-widget.raw-html-embed.ck-widget_selected::before {
|
2942
|
-
top: 0;
|
2943
|
-
padding: var(--ck-spacing-tiny) var(--ck-spacing-small);
|
2944
|
-
background: var(--ck-color-focus-border);
|
2945
|
-
}
|
2946
|
-
.ck.ck-editor__editable .ck-widget.raw-html-embed:not(.ck-widget_selected):hover::before {
|
2947
|
-
top: 0px;
|
2948
|
-
padding: var(--ck-spacing-tiny) var(--ck-spacing-small);
|
2949
|
-
}
|
2950
|
-
/* ----- Emebed internals --------------------------------------------------------------------- */
|
2951
|
-
.ck-widget.raw-html-embed .raw-html-embed__content-wrapper {
|
2952
|
-
padding: var(--ck-spacing-standard);
|
2953
|
-
}
|
2954
|
-
/* The switch mode button wrapper. */
|
2955
|
-
.ck-widget.raw-html-embed .raw-html-embed__buttons-wrapper {
|
2956
|
-
top: var(--ck-spacing-standard);
|
2957
|
-
right: var(--ck-spacing-standard);
|
2958
|
-
}
|
2959
|
-
.ck-widget.raw-html-embed .raw-html-embed__buttons-wrapper .ck-button.raw-html-embed__save-button {
|
2960
|
-
color: var(--ck-color-button-save);
|
2961
|
-
}
|
2962
|
-
.ck-widget.raw-html-embed .raw-html-embed__buttons-wrapper .ck-button.raw-html-embed__cancel-button {
|
2963
|
-
color: var(--ck-color-button-cancel);
|
2964
|
-
}
|
2965
|
-
.ck-widget.raw-html-embed .raw-html-embed__buttons-wrapper .ck-button:not(:first-child) {
|
2966
|
-
margin-top: var(--ck-spacing-small);
|
2967
|
-
}
|
2968
|
-
.ck-widget.raw-html-embed[dir="rtl"] .raw-html-embed__buttons-wrapper {
|
2969
|
-
left: var(--ck-spacing-standard);
|
2970
|
-
right: auto;
|
2971
|
-
}
|
2972
|
-
/* The edit source element. */
|
2973
|
-
.ck-widget.raw-html-embed .raw-html-embed__source {
|
2974
|
-
box-sizing: border-box;
|
2975
|
-
height: var(--ck-html-embed-source-height);
|
2976
|
-
width: var(--ck-html-embed-content-width);
|
2977
|
-
resize: none;
|
2978
|
-
min-width: 0;
|
2979
|
-
padding: var(--ck-spacing-standard);
|
2980
|
-
|
2981
|
-
font-family: monospace;
|
2982
|
-
tab-size: 4;
|
2983
|
-
white-space: pre-wrap;
|
2984
|
-
font-size: var(--ck-font-size-base); /* Safari needs this. */
|
2985
|
-
|
2986
|
-
/* HTML code is direction–agnostic. */
|
2987
|
-
text-align: left;
|
2988
|
-
direction: ltr;
|
2989
|
-
}
|
2990
|
-
.ck-widget.raw-html-embed .raw-html-embed__source[disabled] {
|
2991
|
-
background: var(--ck-html-embed-source-disabled-background);
|
2992
|
-
color: var(--ck-html-embed-source-disabled-color);
|
2993
|
-
|
2994
|
-
/* Safari needs this for the proper text color in disabled input (https://github.com/ckeditor/ckeditor5/issues/8320). */
|
2995
|
-
-webkit-text-fill-color: var(--ck-html-embed-source-disabled-color);
|
2996
|
-
opacity: 1;
|
2997
|
-
}
|
2998
|
-
/* The preview data container. */
|
2999
|
-
.ck-widget.raw-html-embed .raw-html-embed__preview {
|
3000
|
-
min-height: var(--ck-html-embed-content-min-height);
|
3001
|
-
width: var(--ck-html-embed-content-width);
|
3002
|
-
|
3003
|
-
/* Disable all mouse interaction as long as the editor is not read–only. */
|
3004
|
-
}
|
3005
|
-
.ck-editor__editable:not(.ck-read-only) .ck-widget.raw-html-embed .raw-html-embed__preview {
|
3006
|
-
pointer-events: none;
|
3007
|
-
}
|
3008
|
-
.ck-widget.raw-html-embed .raw-html-embed__preview-content {
|
3009
|
-
box-sizing: border-box;
|
3010
|
-
background-color: var(--ck-color-base-foreground);
|
3011
|
-
}
|
3012
|
-
.ck-widget.raw-html-embed .raw-html-embed__preview-content > * {
|
3013
|
-
margin-left: auto;
|
3014
|
-
margin-right: auto;
|
3015
|
-
}
|
3016
|
-
.ck-widget.raw-html-embed .raw-html-embed__preview-placeholder {
|
3017
|
-
color: var(--ck-html-embed-source-disabled-color)
|
3018
|
-
}
|
3019
|
-
/*
|
3020
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3021
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3022
|
-
*/
|
3023
|
-
/*
|
3024
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3025
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3026
|
-
*/
|
3027
|
-
:root {
|
3028
|
-
--ck-image-insert-insert-by-url-width: 250px;
|
3029
|
-
}
|
3030
|
-
.ck.ck-image-insert-url {
|
3031
|
-
--ck-input-width: 100%;
|
3032
|
-
}
|
3033
|
-
.ck.ck-image-insert-url .ck-image-insert-url__action-row {
|
3034
|
-
grid-column-gap: var(--ck-spacing-large);
|
3035
|
-
margin-top: var(--ck-spacing-large);
|
3036
|
-
}
|
3037
|
-
.ck.ck-image-insert-url .ck-image-insert-url__action-row .ck-button-save,
|
3038
|
-
.ck.ck-image-insert-url .ck-image-insert-url__action-row .ck-button-cancel {
|
3039
|
-
justify-content: center;
|
3040
|
-
min-width: auto;
|
3041
|
-
}
|
3042
|
-
.ck.ck-image-insert-url .ck-image-insert-url__action-row .ck-button .ck-button__label {
|
3043
|
-
color: var(--ck-color-text);
|
3044
|
-
}
|
3045
|
-
.ck.ck-image-insert-form > .ck.ck-button {
|
3046
|
-
display: block;
|
3047
|
-
width: 100%;
|
3048
|
-
padding: var(--ck-list-button-padding);
|
3049
|
-
}
|
3050
|
-
[dir="ltr"] .ck.ck-image-insert-form > .ck.ck-button {
|
3051
|
-
text-align: left;
|
3052
|
-
}
|
3053
|
-
[dir="rtl"] .ck.ck-image-insert-form > .ck.ck-button {
|
3054
|
-
text-align: right;
|
3055
|
-
}
|
3056
|
-
.ck.ck-image-insert-form > .ck.ck-collapsible {
|
3057
|
-
|
3058
|
-
min-width: var(--ck-image-insert-insert-by-url-width);
|
3059
|
-
}
|
3060
|
-
.ck.ck-image-insert-form > .ck.ck-collapsible:not(:first-child) {
|
3061
|
-
border-top: 1px solid var(--ck-color-base-border);
|
3062
|
-
}
|
3063
|
-
.ck.ck-image-insert-form > .ck.ck-collapsible:not(:last-child) {
|
3064
|
-
border-bottom: 1px solid var(--ck-color-base-border);
|
3065
|
-
}
|
3066
|
-
/* This is the case when there are no other integrations configured than insert by URL */
|
3067
|
-
.ck.ck-image-insert-form > .ck.ck-image-insert-url {
|
3068
|
-
min-width: var(--ck-image-insert-insert-by-url-width);
|
3069
|
-
padding: var(--ck-spacing-large);
|
3070
|
-
}
|
3071
|
-
.ck.ck-image-insert-form:focus {
|
3072
|
-
outline: none;
|
3073
|
-
}
|
3074
|
-
/*
|
3075
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3076
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3077
|
-
*/
|
3078
|
-
/*
|
3079
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3080
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3081
|
-
*/
|
3082
|
-
:root {
|
3083
|
-
--ck-color-image-upload-icon: hsl(0, 0%, 100%);
|
3084
|
-
--ck-color-image-upload-icon-background: hsl(120, 100%, 27%);
|
3085
|
-
|
3086
|
-
/* Match the icon size with the linked image indicator brought by the link image feature. */
|
3087
|
-
--ck-image-upload-icon-size: 20;
|
3088
|
-
--ck-image-upload-icon-width: 2px;
|
3089
|
-
--ck-image-upload-icon-is-visible: clamp(0px, 100% - 50px, 1px);
|
3090
|
-
}
|
3091
|
-
.ck-image-upload-complete-icon {
|
3092
|
-
opacity: 0;
|
3093
|
-
background: var(--ck-color-image-upload-icon-background);
|
3094
|
-
animation-name: ck-upload-complete-icon-show, ck-upload-complete-icon-hide;
|
3095
|
-
animation-fill-mode: forwards, forwards;
|
3096
|
-
animation-duration: 500ms, 500ms;
|
3097
|
-
|
3098
|
-
/* To make animation scalable. */
|
3099
|
-
font-size: calc(1px * var(--ck-image-upload-icon-size));
|
3100
|
-
|
3101
|
-
/* Hide completed upload icon after 3 seconds. */
|
3102
|
-
animation-delay: 0ms, 3000ms;
|
3103
|
-
|
3104
|
-
/*
|
3105
|
-
* Use CSS math to simulate container queries.
|
3106
|
-
* https://css-tricks.com/the-raven-technique-one-step-closer-to-container-queries/#what-about-showing-and-hiding-things
|
3107
|
-
*/
|
3108
|
-
overflow: hidden;
|
3109
|
-
width: calc(var(--ck-image-upload-icon-is-visible) * var(--ck-image-upload-icon-size));
|
3110
|
-
height: calc(var(--ck-image-upload-icon-is-visible) * var(--ck-image-upload-icon-size));
|
3111
|
-
|
3112
|
-
/* This is check icon element made from border-width mixed with animations. */
|
3113
|
-
}
|
3114
|
-
.ck-image-upload-complete-icon::after {
|
3115
|
-
/* Because of border transformation we need to "hard code" left position. */
|
3116
|
-
left: 25%;
|
3117
|
-
|
3118
|
-
top: 50%;
|
3119
|
-
opacity: 0;
|
3120
|
-
height: 0;
|
3121
|
-
width: 0;
|
3122
|
-
|
3123
|
-
transform: scaleX(-1) rotate(135deg);
|
3124
|
-
transform-origin: left top;
|
3125
|
-
border-top: var(--ck-image-upload-icon-width) solid var(--ck-color-image-upload-icon);
|
3126
|
-
border-right: var(--ck-image-upload-icon-width) solid var(--ck-color-image-upload-icon);
|
3127
|
-
|
3128
|
-
animation-name: ck-upload-complete-icon-check;
|
3129
|
-
animation-duration: 500ms;
|
3130
|
-
animation-delay: 500ms;
|
3131
|
-
animation-fill-mode: forwards;
|
3132
|
-
|
3133
|
-
/* #1095. While reset is not providing proper box-sizing for pseudoelements, we need to handle it. */
|
3134
|
-
box-sizing: border-box;
|
3135
|
-
}
|
3136
|
-
@keyframes ck-upload-complete-icon-show {
|
3137
|
-
from {
|
3138
|
-
opacity: 0;
|
3139
|
-
}
|
3140
|
-
|
3141
|
-
to {
|
3142
|
-
opacity: 1;
|
3143
|
-
}
|
3144
|
-
}
|
3145
|
-
@keyframes ck-upload-complete-icon-hide {
|
3146
|
-
from {
|
3147
|
-
opacity: 1;
|
3148
|
-
}
|
3149
|
-
|
3150
|
-
to {
|
3151
|
-
opacity: 0;
|
3152
|
-
}
|
3153
|
-
}
|
3154
|
-
@keyframes ck-upload-complete-icon-check {
|
3155
|
-
0% {
|
3156
|
-
opacity: 1;
|
3157
|
-
width: 0;
|
3158
|
-
height: 0;
|
3159
|
-
}
|
3160
|
-
33% {
|
3161
|
-
width: 0.3em;
|
3162
|
-
height: 0;
|
3163
|
-
}
|
3164
|
-
100% {
|
3165
|
-
opacity: 1;
|
3166
|
-
width: 0.3em;
|
3167
|
-
height: 0.45em;
|
3168
|
-
}
|
3169
|
-
}
|
3170
|
-
/*
|
3171
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3172
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3173
|
-
*/
|
3174
|
-
:root {
|
3175
|
-
--ck-color-upload-placeholder-loader: hsl(0, 0%, 70%);
|
3176
|
-
--ck-upload-placeholder-loader-size: 32px;
|
3177
|
-
--ck-upload-placeholder-image-aspect-ratio: 2.8;
|
3178
|
-
}
|
3179
|
-
.ck .ck-image-upload-placeholder {
|
3180
|
-
/* We need to control the full width of the SVG gray background. */
|
3181
|
-
width: 100%;
|
3182
|
-
margin: 0;
|
3183
|
-
}
|
3184
|
-
.ck .ck-image-upload-placeholder.image-inline {
|
3185
|
-
width: calc( 2 * var(--ck-upload-placeholder-loader-size) * var(--ck-upload-placeholder-image-aspect-ratio) );
|
3186
|
-
}
|
3187
|
-
.ck .ck-image-upload-placeholder img {
|
3188
|
-
/*
|
3189
|
-
* This is an arbitrary aspect for a 1x1 px GIF to display to the user. Not too tall, not too short.
|
3190
|
-
* There's nothing special about this number except that it should make the image placeholder look like
|
3191
|
-
* a real image during this short period after the upload started and before the image was read from the
|
3192
|
-
* file system (and a rich preview was loaded).
|
3193
|
-
*/
|
3194
|
-
aspect-ratio: var(--ck-upload-placeholder-image-aspect-ratio);
|
3195
|
-
}
|
3196
|
-
.ck .ck-upload-placeholder-loader {
|
3197
|
-
width: 100%;
|
3198
|
-
height: 100%;
|
3199
|
-
}
|
3200
|
-
.ck .ck-upload-placeholder-loader::before {
|
3201
|
-
width: var(--ck-upload-placeholder-loader-size);
|
3202
|
-
height: var(--ck-upload-placeholder-loader-size);
|
3203
|
-
border-radius: 50%;
|
3204
|
-
border-top: 3px solid var(--ck-color-upload-placeholder-loader);
|
3205
|
-
border-right: 2px solid transparent;
|
3206
|
-
animation: ck-upload-placeholder-loader 1s linear infinite;
|
3207
|
-
}
|
3208
|
-
@keyframes ck-upload-placeholder-loader {
|
3209
|
-
to {
|
3210
|
-
transform: rotate( 360deg );
|
3211
|
-
}
|
3212
|
-
}
|
3213
|
-
/*
|
3214
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3215
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3216
|
-
*/
|
3217
|
-
/* Showing animation. */
|
3218
|
-
.ck.ck-editor__editable .image.ck-appear, .ck.ck-editor__editable .image-inline.ck-appear {
|
3219
|
-
animation: fadeIn 700ms;
|
3220
|
-
}
|
3221
|
-
/* Upload progress bar. */
|
3222
|
-
.ck.ck-editor__editable .image .ck-progress-bar,
|
3223
|
-
.ck.ck-editor__editable .image-inline .ck-progress-bar {
|
3224
|
-
height: 2px;
|
3225
|
-
width: 0;
|
3226
|
-
background: var(--ck-color-upload-bar-background);
|
3227
|
-
transition: width 100ms;
|
3228
|
-
}
|
3229
|
-
@keyframes fadeIn {
|
3230
|
-
from { opacity: 0; }
|
3231
|
-
to { opacity: 1; }
|
3232
|
-
}
|
3233
|
-
/*
|
3234
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3235
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3236
|
-
*/
|
3237
|
-
/* Class added to span element surrounding currently selected link. */
|
3238
|
-
.ck .ck-link_selected {
|
3239
|
-
background: var(--ck-color-link-selected-background);
|
3240
|
-
|
3241
|
-
/* Give linked inline images some outline to let the user know they are also part of the link. */
|
3242
|
-
}
|
3243
|
-
.ck .ck-link_selected span.image-inline {
|
3244
|
-
outline: var(--ck-widget-outline-thickness) solid var(--ck-color-link-selected-background);
|
3245
|
-
}
|
3246
|
-
/*
|
3247
|
-
* Classes used by the "fake visual selection" displayed in the content when an input
|
3248
|
-
* in the link UI has focus (the browser does not render the native selection in this state).
|
3249
|
-
*/
|
3250
|
-
.ck .ck-fake-link-selection {
|
3251
|
-
background: var(--ck-color-link-fake-selection);
|
3252
|
-
}
|
3253
|
-
/* A collapsed fake visual selection. */
|
3254
|
-
.ck .ck-fake-link-selection_collapsed {
|
3255
|
-
height: 100%;
|
3256
|
-
border-right: 1px solid var(--ck-color-base-text);
|
3257
|
-
margin-right: -1px;
|
3258
|
-
outline: solid 1px hsla(0, 0%, 100%, .5);
|
3259
|
-
}
|
3260
|
-
/*
|
3261
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3262
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3263
|
-
*/
|
3264
|
-
/*
|
3265
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3266
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3267
|
-
*/
|
3268
|
-
/**
|
3269
|
-
* Makes element unselectable.
|
3270
|
-
*/
|
3271
|
-
/*
|
3272
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3273
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3274
|
-
*/
|
3275
|
-
/*
|
3276
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3277
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3278
|
-
*/
|
3279
|
-
/**
|
3280
|
-
* A visual style of focused element's border.
|
3281
|
-
*/
|
3282
|
-
/*
|
3283
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3284
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3285
|
-
*/
|
3286
|
-
/**
|
3287
|
-
* A helper to combine multiple shadows.
|
3288
|
-
*/
|
3289
|
-
/**
|
3290
|
-
* Gives an element a drop shadow so it looks like a floating panel.
|
3291
|
-
*/
|
3292
|
-
/*
|
3293
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3294
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3295
|
-
*/
|
3296
|
-
.ck.ck-link-actions .ck-button.ck-link-actions__preview {
|
3297
|
-
padding-left: 0;
|
3298
|
-
padding-right: 0;
|
3299
|
-
}
|
3300
|
-
.ck.ck-link-actions .ck-button.ck-link-actions__preview .ck-button__label {
|
3301
|
-
padding: 0 var(--ck-spacing-medium);
|
3302
|
-
color: var(--ck-color-link-default);
|
3303
|
-
text-overflow: ellipsis;
|
3304
|
-
cursor: pointer;
|
3305
|
-
|
3306
|
-
/* Match the box model of the link editor form's input so the balloon
|
3307
|
-
does not change width when moving between actions and the form. */
|
3308
|
-
max-width: var(--ck-input-width);
|
3309
|
-
min-width: 3em;
|
3310
|
-
text-align: center;
|
3311
|
-
}
|
3312
|
-
.ck.ck-link-actions .ck-button.ck-link-actions__preview .ck-button__label:hover {
|
3313
|
-
text-decoration: underline;
|
3314
|
-
}
|
3315
|
-
.ck.ck-link-actions .ck-button.ck-link-actions__preview,
|
3316
|
-
.ck.ck-link-actions .ck-button.ck-link-actions__preview:hover,
|
3317
|
-
.ck.ck-link-actions .ck-button.ck-link-actions__preview:focus,
|
3318
|
-
.ck.ck-link-actions .ck-button.ck-link-actions__preview:active {
|
3319
|
-
background: none;
|
3320
|
-
}
|
3321
|
-
.ck.ck-link-actions .ck-button.ck-link-actions__preview:active {
|
3322
|
-
box-shadow: none;
|
3323
|
-
}
|
3324
|
-
.ck.ck-link-actions .ck-button.ck-link-actions__preview:focus .ck-button__label {
|
3325
|
-
text-decoration: underline;
|
3326
|
-
}
|
3327
|
-
[dir="ltr"] .ck.ck-link-actions .ck-button:not(:first-child) {
|
3328
|
-
margin-left: var(--ck-spacing-standard);
|
3329
|
-
}
|
3330
|
-
[dir="rtl"] .ck.ck-link-actions .ck-button:not(:last-child) {
|
3331
|
-
margin-left: var(--ck-spacing-standard);
|
3332
|
-
}
|
3333
|
-
@media screen and (max-width: 600px) {
|
3334
|
-
.ck.ck-link-actions .ck-button.ck-link-actions__preview {
|
3335
|
-
margin: var(--ck-spacing-standard) var(--ck-spacing-standard) 0;
|
3336
|
-
}
|
3337
|
-
|
3338
|
-
.ck.ck-link-actions .ck-button.ck-link-actions__preview .ck-button__label {
|
3339
|
-
min-width: 0;
|
3340
|
-
max-width: 100%;
|
3341
|
-
}
|
3342
|
-
|
3343
|
-
[dir="ltr"] .ck.ck-link-actions .ck-button:not(.ck-link-actions__preview) {
|
3344
|
-
margin-left: 0;
|
3345
|
-
}
|
3346
|
-
|
3347
|
-
[dir="rtl"] .ck.ck-link-actions .ck-button:not(.ck-link-actions__preview) {
|
3348
|
-
margin-left: 0;
|
3349
|
-
}
|
3350
|
-
}
|
3351
|
-
/*
|
3352
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3353
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3354
|
-
*/
|
3355
|
-
/*
|
3356
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3357
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3358
|
-
*/
|
3359
|
-
/*
|
3360
|
-
* Style link form differently when manual decorators are available.
|
3361
|
-
* See: https://github.com/ckeditor/ckeditor5-link/issues/186.
|
3362
|
-
*/
|
3363
|
-
.ck.ck-link-form_layout-vertical {
|
3364
|
-
padding: 0;
|
3365
|
-
min-width: var(--ck-input-width);
|
3366
|
-
}
|
3367
|
-
.ck.ck-link-form_layout-vertical .ck-labeled-field-view {
|
3368
|
-
margin: var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-small);
|
3369
|
-
}
|
3370
|
-
.ck.ck-link-form_layout-vertical .ck-labeled-field-view .ck-input-text {
|
3371
|
-
min-width: 0;
|
3372
|
-
width: 100%;
|
3373
|
-
}
|
3374
|
-
.ck.ck-link-form_layout-vertical > .ck-button {
|
3375
|
-
padding: var(--ck-spacing-standard);
|
3376
|
-
margin: 0;
|
3377
|
-
width: 50%;
|
3378
|
-
border-radius: 0;
|
3379
|
-
}
|
3380
|
-
.ck.ck-link-form_layout-vertical > .ck-button:not(:focus) {
|
3381
|
-
border-top: 1px solid var(--ck-color-base-border);
|
3382
|
-
}
|
3383
|
-
[dir="ltr"] .ck.ck-link-form_layout-vertical > .ck-button {
|
3384
|
-
margin-left: 0;
|
3385
|
-
}
|
3386
|
-
[dir="rtl"] .ck.ck-link-form_layout-vertical > .ck-button {
|
3387
|
-
margin-left: 0;
|
3388
|
-
}
|
3389
|
-
[dir="rtl"] .ck.ck-link-form_layout-vertical > .ck-button:last-of-type {
|
3390
|
-
border-right: 1px solid var(--ck-color-base-border);
|
3391
|
-
}
|
3392
|
-
/* Using additional `.ck` class for stronger CSS specificity than `.ck.ck-link-form > :not(:first-child)`. */
|
3393
|
-
.ck.ck-link-form_layout-vertical .ck.ck-list {
|
3394
|
-
margin: var(--ck-spacing-standard) var(--ck-spacing-large);
|
3395
|
-
}
|
3396
|
-
.ck.ck-link-form_layout-vertical .ck.ck-list .ck-button.ck-switchbutton {
|
3397
|
-
padding: 0;
|
3398
|
-
width: 100%;
|
3399
|
-
}
|
3400
|
-
.ck.ck-link-form_layout-vertical .ck.ck-list .ck-button.ck-switchbutton:hover {
|
3401
|
-
background: none;
|
3402
|
-
}
|
3403
|
-
/*
|
3404
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3405
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3406
|
-
*/
|
3407
|
-
:root {
|
3408
|
-
/* Match the icon size with the upload indicator brought by the image upload feature. */
|
3409
|
-
--ck-link-image-indicator-icon-size: 20;
|
3410
|
-
--ck-link-image-indicator-icon-is-visible: clamp(0px, 100% - 50px, 1px);
|
3411
|
-
}
|
3412
|
-
/* Linked image indicator */
|
3413
|
-
.ck.ck-editor__editable figure.image > a::after, .ck.ck-editor__editable a span.image-inline::after {
|
3414
|
-
content: "";
|
3415
|
-
|
3416
|
-
/*
|
3417
|
-
* Smaller images should have the icon closer to the border.
|
3418
|
-
* Match the icon position with the upload indicator brought by the image upload feature.
|
3419
|
-
*/
|
3420
|
-
top: min(var(--ck-spacing-medium), 6%);
|
3421
|
-
right: min(var(--ck-spacing-medium), 6%);
|
3422
|
-
|
3423
|
-
background-color: hsla(0, 0%, 0%, .4);
|
3424
|
-
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI2ZmZiIgZD0ibTExLjA3NyAxNSAuOTkxLTEuNDE2YS43NS43NSAwIDEgMSAxLjIyOS44NmwtMS4xNDggMS42NGEuNzQ4Ljc0OCAwIDAgMS0uMjE3LjIwNiA1LjI1MSA1LjI1MSAwIDAgMS04LjUwMy01Ljk1NS43NDEuNzQxIDAgMCAxIC4xMi0uMjc0bDEuMTQ3LTEuNjM5YS43NS43NSAwIDEgMSAxLjIyOC44Nkw0LjkzMyAxMC43bC4wMDYuMDAzYTMuNzUgMy43NSAwIDAgMCA2LjEzMiA0LjI5NGwuMDA2LjAwNHptNS40OTQtNS4zMzVhLjc0OC43NDggMCAwIDEtLjEyLjI3NGwtMS4xNDcgMS42MzlhLjc1Ljc1IDAgMSAxLTEuMjI4LS44NmwuODYtMS4yM2EzLjc1IDMuNzUgMCAwIDAtNi4xNDQtNC4zMDFsLS44NiAxLjIyOWEuNzUuNzUgMCAwIDEtMS4yMjktLjg2bDEuMTQ4LTEuNjRhLjc0OC43NDggMCAwIDEgLjIxNy0uMjA2IDUuMjUxIDUuMjUxIDAgMCAxIDguNTAzIDUuOTU1em0tNC41NjMtMi41MzJhLjc1Ljc1IDAgMCAxIC4xODQgMS4wNDVsLTMuMTU1IDQuNTA1YS43NS43NSAwIDEgMS0xLjIyOS0uODZsMy4xNTUtNC41MDZhLjc1Ljc1IDAgMCAxIDEuMDQ1LS4xODR6Ii8+PC9zdmc+");
|
3425
|
-
background-size: 14px;
|
3426
|
-
background-repeat: no-repeat;
|
3427
|
-
background-position: center;
|
3428
|
-
border-radius: 100%;
|
3429
|
-
|
3430
|
-
/*
|
3431
|
-
* Use CSS math to simulate container queries.
|
3432
|
-
* https://css-tricks.com/the-raven-technique-one-step-closer-to-container-queries/#what-about-showing-and-hiding-things
|
3433
|
-
*/
|
3434
|
-
overflow: hidden;
|
3435
|
-
width: calc(var(--ck-link-image-indicator-icon-is-visible) * var(--ck-link-image-indicator-icon-size));
|
3436
|
-
height: calc(var(--ck-link-image-indicator-icon-is-visible) * var(--ck-link-image-indicator-icon-size));
|
3437
|
-
}
|
3438
|
-
/*
|
3439
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3440
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3441
|
-
*/
|
3442
|
-
/* When there are no list styles and there is no collapsible. */
|
3443
|
-
.ck.ck-list-properties.ck-list-properties_without-styles {
|
3444
|
-
padding: var(--ck-spacing-large);
|
3445
|
-
}
|
3446
|
-
.ck.ck-list-properties.ck-list-properties_without-styles > * {
|
3447
|
-
min-width: 14em;
|
3448
|
-
}
|
3449
|
-
.ck.ck-list-properties.ck-list-properties_without-styles > * + * {
|
3450
|
-
margin-top: var(--ck-spacing-standard);
|
3451
|
-
}
|
3452
|
-
/*
|
3453
|
-
* When the numbered list property fields (start at, reversed) should be displayed,
|
3454
|
-
* more horizontal space is needed. Reconfigure the style grid to create that space.
|
3455
|
-
*/
|
3456
|
-
.ck.ck-list-properties.ck-list-properties_with-numbered-properties > .ck-list-styles-list {
|
3457
|
-
grid-template-columns: repeat( 4, auto );
|
3458
|
-
}
|
3459
|
-
/* When list styles are rendered and property fields are in a collapsible. */
|
3460
|
-
.ck.ck-list-properties.ck-list-properties_with-numbered-properties > .ck-collapsible {
|
3461
|
-
border-top: 1px solid var(--ck-color-base-border);
|
3462
|
-
}
|
3463
|
-
.ck.ck-list-properties.ck-list-properties_with-numbered-properties > .ck-collapsible > .ck-collapsible__children > * {
|
3464
|
-
width: 100%;
|
3465
|
-
}
|
3466
|
-
.ck.ck-list-properties.ck-list-properties_with-numbered-properties > .ck-collapsible > .ck-collapsible__children > * + * {
|
3467
|
-
margin-top: var(--ck-spacing-standard);
|
3468
|
-
}
|
3469
|
-
.ck.ck-list-properties .ck.ck-numbered-list-properties__start-index .ck-input {
|
3470
|
-
min-width: auto;
|
3471
|
-
width: 100%;
|
3472
|
-
}
|
3473
|
-
.ck.ck-list-properties .ck.ck-numbered-list-properties__reversed-order {
|
3474
|
-
background: transparent;
|
3475
|
-
padding-left: 0;
|
3476
|
-
padding-right: 0;
|
3477
|
-
margin-bottom: calc(-1 * var(--ck-spacing-tiny));
|
3478
|
-
}
|
3479
|
-
.ck.ck-list-properties .ck.ck-numbered-list-properties__reversed-order:active, .ck.ck-list-properties .ck.ck-numbered-list-properties__reversed-order:hover {
|
3480
|
-
box-shadow: none;
|
3481
|
-
border-color: transparent;
|
3482
|
-
background: none;
|
3483
|
-
}
|
3484
|
-
/*
|
3485
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3486
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3487
|
-
*/
|
3488
|
-
:root {
|
3489
|
-
--ck-list-style-button-size: 44px;
|
3490
|
-
}
|
3491
|
-
.ck.ck-list-styles-list {
|
3492
|
-
grid-template-columns: repeat( 3, auto );
|
3493
|
-
row-gap: var(--ck-spacing-medium);
|
3494
|
-
column-gap: var(--ck-spacing-medium);
|
3495
|
-
padding: var(--ck-spacing-large);
|
3496
|
-
}
|
3497
|
-
.ck.ck-list-styles-list .ck-button {
|
3498
|
-
/* Make the button look like a thumbnail (the icon "takes it all"). */
|
3499
|
-
width: var(--ck-list-style-button-size);
|
3500
|
-
height: var(--ck-list-style-button-size);
|
3501
|
-
padding: 0;
|
3502
|
-
|
3503
|
-
/*
|
3504
|
-
* Buttons are aligned by the grid so disable default button margins to not collide with the
|
3505
|
-
* gaps in the grid.
|
3506
|
-
*/
|
3507
|
-
margin: 0;
|
3508
|
-
|
3509
|
-
/*
|
3510
|
-
* Make sure the button border (which is displayed on focus, BTW) does not steal pixels
|
3511
|
-
* from the button dimensions and, as a result, decrease the size of the icon
|
3512
|
-
* (which becomes blurry as it scales down).
|
3513
|
-
*/
|
3514
|
-
box-sizing: content-box;
|
3515
|
-
}
|
3516
|
-
.ck.ck-list-styles-list .ck-button .ck-icon {
|
3517
|
-
width: var(--ck-list-style-button-size);
|
3518
|
-
height: var(--ck-list-style-button-size);
|
3519
|
-
}
|
3520
|
-
/*
|
3521
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3522
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3523
|
-
*/
|
3524
|
-
:root {
|
3525
|
-
--ck-media-embed-placeholder-icon-size: 3em;
|
3526
|
-
|
3527
|
-
--ck-color-media-embed-placeholder-url-text: hsl(0, 0%, 46%);
|
3528
|
-
--ck-color-media-embed-placeholder-url-text-hover: var(--ck-color-base-text);
|
3529
|
-
}
|
3530
|
-
.ck-media__wrapper {
|
3531
|
-
margin: 0 auto;
|
3532
|
-
}
|
3533
|
-
.ck-media__wrapper .ck-media__placeholder {
|
3534
|
-
padding: calc( 3 * var(--ck-spacing-standard) );
|
3535
|
-
background: var(--ck-color-base-foreground);
|
3536
|
-
}
|
3537
|
-
.ck-media__wrapper .ck-media__placeholder .ck-media__placeholder__icon {
|
3538
|
-
min-width: var(--ck-media-embed-placeholder-icon-size);
|
3539
|
-
height: var(--ck-media-embed-placeholder-icon-size);
|
3540
|
-
margin-bottom: var(--ck-spacing-large);
|
3541
|
-
background-position: center;
|
3542
|
-
background-size: cover;
|
3543
|
-
}
|
3544
|
-
.ck-media__wrapper .ck-media__placeholder .ck-media__placeholder__icon .ck-icon {
|
3545
|
-
width: 100%;
|
3546
|
-
height: 100%;
|
3547
|
-
}
|
3548
|
-
.ck-media__wrapper .ck-media__placeholder .ck-media__placeholder__url__text {
|
3549
|
-
color: var(--ck-color-media-embed-placeholder-url-text);
|
3550
|
-
white-space: nowrap;
|
3551
|
-
text-align: center;
|
3552
|
-
font-style: italic;
|
3553
|
-
text-overflow: ellipsis;
|
3554
|
-
}
|
3555
|
-
.ck-media__wrapper .ck-media__placeholder .ck-media__placeholder__url__text:hover {
|
3556
|
-
color: var(--ck-color-media-embed-placeholder-url-text-hover);
|
3557
|
-
cursor: pointer;
|
3558
|
-
text-decoration: underline;
|
3559
|
-
}
|
3560
|
-
.ck-media__wrapper[data-oembed-url*="open.spotify.com"] {
|
3561
|
-
max-width: 300px;
|
3562
|
-
max-height: 380px;
|
3563
|
-
}
|
3564
|
-
.ck-media__wrapper[data-oembed-url*="google.com/maps"] .ck-media__placeholder__icon,
|
3565
|
-
.ck-media__wrapper[data-oembed-url*="goo.gl/maps"] .ck-media__placeholder__icon,
|
3566
|
-
.ck-media__wrapper[data-oembed-url*="maps.google.com"] .ck-media__placeholder__icon,
|
3567
|
-
.ck-media__wrapper[data-oembed-url*="maps.app.goo.gl"] .ck-media__placeholder__icon {
|
3568
|
-
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTAuMzc4IiBoZWlnaHQ9IjI1NC4xNjciIHZpZXdCb3g9IjAgMCA2Ni4yNDYgNjcuMjQ4Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTcyLjUzMSAtMjE4LjQ1NSkgc2NhbGUoLjk4MDEyKSI+PHJlY3Qgcnk9IjUuMjM4IiByeD0iNS4yMzgiIHk9IjIzMS4zOTkiIHg9IjE3Ni4wMzEiIGhlaWdodD0iNjAuMDk5IiB3aWR0aD0iNjAuMDk5IiBmaWxsPSIjMzRhNjY4IiBwYWludC1vcmRlcj0ibWFya2VycyBzdHJva2UgZmlsbCIvPjxwYXRoIGQ9Ik0yMDYuNDc3IDI2MC45bC0yOC45ODcgMjguOTg3YTUuMjE4IDUuMjE4IDAgMCAwIDMuNzggMS42MWg0OS42MjFjMS42OTQgMCAzLjE5LS43OTggNC4xNDYtMi4wMzd6IiBmaWxsPSIjNWM4OGM1Ii8+PHBhdGggZD0iTTIyNi43NDIgMjIyLjk4OGMtOS4yNjYgMC0xNi43NzcgNy4xNy0xNi43NzcgMTYuMDE0LjAwNyAyLjc2Mi42NjMgNS40NzQgMi4wOTMgNy44NzUuNDMuNzAzLjgzIDEuNDA4IDEuMTkgMi4xMDcuMzMzLjUwMi42NSAxLjAwNS45NSAxLjUwOC4zNDMuNDc3LjY3My45NTcuOTg4IDEuNDQgMS4zMSAxLjc2OSAyLjUgMy41MDIgMy42MzcgNS4xNjguNzkzIDEuMjc1IDEuNjgzIDIuNjQgMi40NjYgMy45OSAyLjM2MyA0LjA5NCA0LjAwNyA4LjA5MiA0LjYgMTMuOTE0di4wMTJjLjE4Mi40MTIuNTE2LjY2Ni44NzkuNjY3LjQwMy0uMDAxLjc2OC0uMzE0LjkzLS43OTkuNjAzLTUuNzU2IDIuMjM4LTkuNzI5IDQuNTg1LTEzLjc5NC43ODItMS4zNSAxLjY3My0yLjcxNSAyLjQ2NS0zLjk5IDEuMTM3LTEuNjY2IDIuMzI4LTMuNCAzLjYzOC01LjE2OS4zMTUtLjQ4Mi42NDUtLjk2Mi45ODgtMS40MzkuMy0uNTAzLjYxNy0xLjAwNi45NS0xLjUwOC4zNTktLjcuNzYtMS40MDQgMS4xOS0yLjEwNyAxLjQyNi0yLjQwMiAyLTUuMTE0IDIuMDA0LTcuODc1IDAtOC44NDQtNy41MTEtMTYuMDE0LTE2Ljc3Ni0xNi4wMTR6IiBmaWxsPSIjZGQ0YjNlIiBwYWludC1vcmRlcj0ibWFya2VycyBzdHJva2UgZmlsbCIvPjxlbGxpcHNlIHJ5PSI1LjU2NCIgcng9IjUuODI4IiBjeT0iMjM5LjAwMiIgY3g9IjIyNi43NDIiIGZpbGw9IiM4MDJkMjciIHBhaW50LW9yZGVyPSJtYXJrZXJzIHN0cm9rZSBmaWxsIi8+PHBhdGggZD0iTTE5MC4zMDEgMjM3LjI4M2MtNC42NyAwLTguNDU3IDMuODUzLTguNDU3IDguNjA2czMuNzg2IDguNjA3IDguNDU3IDguNjA3YzMuMDQzIDAgNC44MDYtLjk1OCA2LjMzNy0yLjUxNiAxLjUzLTEuNTU3IDIuMDg3LTMuOTEzIDIuMDg3LTYuMjkgMC0uMzYyLS4wMjMtLjcyMi0uMDY0LTEuMDc5aC04LjI1N3YzLjA0M2g0Ljg1Yy0uMTk3Ljc1OS0uNTMxIDEuNDUtMS4wNTggMS45ODYtLjk0Mi45NTgtMi4wMjggMS41NDgtMy45MDEgMS41NDgtMi44NzYgMC01LjIwOC0yLjM3Mi01LjIwOC01LjI5OSAwLTIuOTI2IDIuMzMyLTUuMjk5IDUuMjA4LTUuMjk5IDEuMzk5IDAgMi42MTguNDA3IDMuNTg0IDEuMjkzbDIuMzgxLTIuMzhjMC0uMDAyLS4wMDMtLjAwNC0uMDA0LS4wMDUtMS41ODgtMS41MjQtMy42Mi0yLjIxNS01Ljk1NS0yLjIxNXptNC40MyA1LjY2bC4wMDMuMDA2di0uMDAzeiIgZmlsbD0iI2ZmZiIgcGFpbnQtb3JkZXI9Im1hcmtlcnMgc3Ryb2tlIGZpbGwiLz48cGF0aCBkPSJNMjE1LjE4NCAyNTEuOTI5bC03Ljk4IDcuOTc5IDI4LjQ3NyAyOC40NzVjLjI4Ny0uNjQ5LjQ0OS0xLjM2Ni40NDktMi4xMjN2LTMxLjE2NWMtLjQ2OS42NzUtLjkzNCAxLjM0OS0xLjM4MiAyLjAwNS0uNzkyIDEuMjc1LTEuNjgyIDIuNjQtMi40NjUgMy45OS0yLjM0NyA0LjA2NS0zLjk4MiA4LjAzOC00LjU4NSAxMy43OTQtLjE2Mi40ODUtLjUyNy43OTgtLjkzLjc5OS0uMzYzLS4wMDEtLjY5Ny0uMjU1LS44NzktLjY2N3YtLjAxMmMtLjU5My01LjgyMi0yLjIzNy05LjgyLTQuNi0xMy45MTQtLjc4My0xLjM1LTEuNjczLTIuNzE1LTIuNDY2LTMuOTktMS4xMzctMS42NjYtMi4zMjctMy40LTMuNjM3LTUuMTY5bC0uMDAyLS4wMDN6IiBmaWxsPSIjYzNjM2MzIi8+PHBhdGggZD0iTTIxMi45ODMgMjQ4LjQ5NWwtMzYuOTUyIDM2Ljk1M3YuODEyYTUuMjI3IDUuMjI3IDAgMCAwIDUuMjM4IDUuMjM4aDEuMDE1bDM1LjY2Ni0zNS42NjZhMTM2LjI3NSAxMzYuMjc1IDAgMCAwLTIuNzY0LTMuOSAzNy41NzUgMzcuNTc1IDAgMCAwLS45ODktMS40NGMtLjI5OS0uNTAzLS42MTYtMS4wMDYtLjk1LTEuNTA4LS4wODMtLjE2Mi0uMTc2LS4zMjYtLjI2NC0uNDg5eiIgZmlsbD0iI2ZkZGM0ZiIgcGFpbnQtb3JkZXI9Im1hcmtlcnMgc3Ryb2tlIGZpbGwiLz48cGF0aCBkPSJNMjExLjk5OCAyNjEuMDgzbC02LjE1MiA2LjE1MSAyNC4yNjQgMjQuMjY0aC43ODFhNS4yMjcgNS4yMjcgMCAwIDAgNS4yMzktNS4yMzh2LTEuMDQ1eiIgZmlsbD0iI2ZmZiIgcGFpbnQtb3JkZXI9Im1hcmtlcnMgc3Ryb2tlIGZpbGwiLz48L2c+PC9zdmc+);
|
3569
|
-
}
|
3570
|
-
.ck-media__wrapper[data-oembed-url*="facebook.com"] .ck-media__placeholder {
|
3571
|
-
background: hsl(220, 46%, 48%);
|
3572
|
-
}
|
3573
|
-
.ck-media__wrapper[data-oembed-url*="facebook.com"] .ck-media__placeholder .ck-media__placeholder__icon {
|
3574
|
-
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxMDI0cHgiIGhlaWdodD0iMTAyNHB4IiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPiAgICAgICAgPHRpdGxlPkZpbGwgMTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9ImZMb2dvX1doaXRlIiBmaWxsPSIjRkZGRkZFIj4gICAgICAgICAgICA8cGF0aCBkPSJNOTY3LjQ4NCwwIEw1Ni41MTcsMCBDMjUuMzA0LDAgMCwyNS4zMDQgMCw1Ni41MTcgTDAsOTY3LjQ4MyBDMCw5OTguNjk0IDI1LjI5NywxMDI0IDU2LjUyMiwxMDI0IEw1NDcsMTAyNCBMNTQ3LDYyOCBMNDE0LDYyOCBMNDE0LDQ3MyBMNTQ3LDQ3MyBMNTQ3LDM1OS4wMjkgQzU0NywyMjYuNzY3IDYyNy43NzMsMTU0Ljc0NyA3NDUuNzU2LDE1NC43NDcgQzgwMi4yNjksMTU0Ljc0NyA4NTAuODQyLDE1OC45NTUgODY1LDE2MC44MzYgTDg2NSwyOTkgTDc4My4zODQsMjk5LjAzNyBDNzE5LjM5MSwyOTkuMDM3IDcwNywzMjkuNTI5IDcwNywzNzQuMjczIEw3MDcsNDczIEw4NjAuNDg3LDQ3MyBMODQwLjUwMSw2MjggTDcwNyw2MjggTDcwNywxMDI0IEw5NjcuNDg0LDEwMjQgQzk5OC42OTcsMTAyNCAxMDI0LDk5OC42OTcgMTAyNCw5NjcuNDg0IEwxMDI0LDU2LjUxNSBDMTAyNCwyNS4zMDMgOTk4LjY5NywwIDk2Ny40ODQsMCIgaWQ9IkZpbGwtMSI+PC9wYXRoPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+);
|
3575
|
-
}
|
3576
|
-
.ck-media__wrapper[data-oembed-url*="facebook.com"] .ck-media__placeholder .ck-media__placeholder__url__text {
|
3577
|
-
color: hsl(220, 100%, 90%);
|
3578
|
-
}
|
3579
|
-
.ck-media__wrapper[data-oembed-url*="facebook.com"] .ck-media__placeholder .ck-media__placeholder__url__text:hover {
|
3580
|
-
color: hsl(0, 0%, 100%);
|
3581
|
-
}
|
3582
|
-
.ck-media__wrapper[data-oembed-url*="instagram.com"] .ck-media__placeholder {
|
3583
|
-
background: linear-gradient(-135deg,hsl(246, 100%, 39%),hsl(302, 100%, 36%),hsl(0, 100%, 48%));
|
3584
|
-
}
|
3585
|
-
.ck-media__wrapper[data-oembed-url*="instagram.com"] .ck-media__placeholder .ck-media__placeholder__icon {
|
3586
|
-
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI1MDRweCIgaGVpZ2h0PSI1MDRweCIgdmlld0JveD0iMCAwIDUwNCA1MDQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+Z2x5cGgtbG9nb19NYXkyMDE2PC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxkZWZzPiAgICAgICAgPHBvbHlnb24gaWQ9InBhdGgtMSIgcG9pbnRzPSIwIDAuMTU5IDUwMy44NDEgMC4xNTkgNTAzLjg0MSA1MDMuOTQgMCA1MDMuOTQiPjwvcG9seWdvbj4gICAgPC9kZWZzPiAgICA8ZyBpZD0iZ2x5cGgtbG9nb19NYXkyMDE2IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxnIGlkPSJHcm91cC0zIj4gICAgICAgICAgICA8bWFzayBpZD0ibWFzay0yIiBmaWxsPSJ3aGl0ZSI+ICAgICAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+ICAgICAgICAgICAgPC9tYXNrPiAgICAgICAgICAgIDxnIGlkPSJDbGlwLTIiPjwvZz4gICAgICAgICAgICA8cGF0aCBkPSJNMjUxLjkyMSwwLjE1OSBDMTgzLjUwMywwLjE1OSAxNzQuOTI0LDAuNDQ5IDE0OC4wNTQsMS42NzUgQzEyMS4yNCwyLjg5OCAxMDIuOTI3LDcuMTU3IDg2LjkwMywxMy4zODUgQzcwLjMzNywxOS44MjIgNTYuMjg4LDI4LjQzNiA0Mi4yODIsNDIuNDQxIEMyOC4yNzcsNTYuNDQ3IDE5LjY2Myw3MC40OTYgMTMuMjI2LDg3LjA2MiBDNi45OTgsMTAzLjA4NiAyLjczOSwxMjEuMzk5IDEuNTE2LDE0OC4yMTMgQzAuMjksMTc1LjA4MyAwLDE4My42NjIgMCwyNTIuMDggQzAsMzIwLjQ5NyAwLjI5LDMyOS4wNzYgMS41MTYsMzU1Ljk0NiBDMi43MzksMzgyLjc2IDYuOTk4LDQwMS4wNzMgMTMuMjI2LDQxNy4wOTcgQzE5LjY2Myw0MzMuNjYzIDI4LjI3Nyw0NDcuNzEyIDQyLjI4Miw0NjEuNzE4IEM1Ni4yODgsNDc1LjcyMyA3MC4zMzcsNDg0LjMzNyA4Ni45MDMsNDkwLjc3NSBDMTAyLjkyNyw0OTcuMDAyIDEyMS4yNCw1MDEuMjYxIDE0OC4wNTQsNTAyLjQ4NCBDMTc0LjkyNCw1MDMuNzEgMTgzLjUwMyw1MDQgMjUxLjkyMSw1MDQgQzMyMC4zMzgsNTA0IDMyOC45MTcsNTAzLjcxIDM1NS43ODcsNTAyLjQ4NCBDMzgyLjYwMSw1MDEuMjYxIDQwMC45MTQsNDk3LjAwMiA0MTYuOTM4LDQ5MC43NzUgQzQzMy41MDQsNDg0LjMzNyA0NDcuNTUzLDQ3NS43MjMgNDYxLjU1OSw0NjEuNzE4IEM0NzUuNTY0LDQ0Ny43MTIgNDg0LjE3OCw0MzMuNjYzIDQ5MC42MTYsNDE3LjA5NyBDNDk2Ljg0Myw0MDEuMDczIDUwMS4xMDIsMzgyLjc2IDUwMi4zMjUsMzU1Ljk0NiBDNTAzLjU1MSwzMjkuMDc2IDUwMy44NDEsMzIwLjQ5NyA1MDMuODQxLDI1Mi4wOCBDNTAzLjg0MSwxODMuNjYyIDUwMy41NTEsMTc1LjA4MyA1MDIuMzI1LDE0OC4yMTMgQzUwMS4xMDIsMTIxLjM5OSA0OTYuODQzLDEwMy4wODYgNDkwLjYxNiw4Ny4wNjIgQzQ4NC4xNzgsNzAuNDk2IDQ3NS41NjQsNTYuNDQ3IDQ2MS41NTksNDIuNDQxIEM0NDcuNTUzLDI4LjQzNiA0MzMuNTA0LDE5LjgyMiA0MTYuOTM4LDEzLjM4NSBDNDAwLjkxNCw3LjE1NyAzODIuNjAxLDIuODk4IDM1NS43ODcsMS42NzUgQzMyOC45MTcsMC40NDkgMzIwLjMzOCwwLjE1OSAyNTEuOTIxLDAuMTU5IFogTTI1MS45MjEsNDUuNTUgQzMxOS4xODYsNDUuNTUgMzI3LjE1NCw0NS44MDcgMzUzLjcxOCw0Ny4wMTkgQzM3OC4yOCw0OC4xMzkgMzkxLjYxOSw1Mi4yNDMgNDAwLjQ5Niw1NS42OTMgQzQxMi4yNTUsNjAuMjYzIDQyMC42NDcsNjUuNzIyIDQyOS40NjIsNzQuNTM4IEM0MzguMjc4LDgzLjM1MyA0NDMuNzM3LDkxLjc0NSA0NDguMzA3LDEwMy41MDQgQzQ1MS43NTcsMTEyLjM4MSA0NTUuODYxLDEyNS43MiA0NTYuOTgxLDE1MC4yODIgQzQ1OC4xOTMsMTc2Ljg0NiA0NTguNDUsMTg0LjgxNCA0NTguNDUsMjUyLjA4IEM0NTguNDUsMzE5LjM0NSA0NTguMTkzLDMyNy4zMTMgNDU2Ljk4MSwzNTMuODc3IEM0NTUuODYxLDM3OC40MzkgNDUxLjc1NywzOTEuNzc4IDQ0OC4zMDcsNDAwLjY1NSBDNDQzLjczNyw0MTIuNDE0IDQzOC4yNzgsNDIwLjgwNiA0MjkuNDYyLDQyOS42MjEgQzQyMC42NDcsNDM4LjQzNyA0MTIuMjU1LDQ0My44OTYgNDAwLjQ5Niw0NDguNDY2IEMzOTEuNjE5LDQ1MS45MTYgMzc4LjI4LDQ1Ni4wMiAzNTMuNzE4LDQ1Ny4xNCBDMzI3LjE1OCw0NTguMzUyIDMxOS4xOTEsNDU4LjYwOSAyNTEuOTIxLDQ1OC42MDkgQzE4NC42NSw0NTguNjA5IDE3Ni42ODQsNDU4LjM1MiAxNTAuMTIzLDQ1Ny4xNCBDMTI1LjU2MSw0NTYuMDIgMTEyLjIyMiw0NTEuOTE2IDEwMy4zNDUsNDQ4LjQ2NiBDOTEuNTg2LDQ0My44OTYgODMuMTk0LDQzOC40MzcgNzQuMzc5LDQyOS42MjEgQzY1LjU2NCw0MjAuODA2IDYwLjEwNCw0MTIuNDE0IDU1LjUzNCw0MDAuNjU1IEM1Mi4wODQsMzkxLjc3OCA0Ny45OCwzNzguNDM5IDQ2Ljg2LDM1My44NzcgQzQ1LjY0OCwzMjcuMzEzIDQ1LjM5MSwzMTkuMzQ1IDQ1LjM5MSwyNTIuMDggQzQ1LjM5MSwxODQuODE0IDQ1LjY0OCwxNzYuODQ2IDQ2Ljg2LDE1MC4yODIgQzQ3Ljk4LDEyNS43MiA1Mi4wODQsMTEyLjM4MSA1NS41MzQsMTAzLjUwNCBDNjAuMTA0LDkxLjc0NSA2NS41NjMsODMuMzUzIDc0LjM3OSw3NC41MzggQzgzLjE5NCw2NS43MjIgOTEuNTg2LDYwLjI2MyAxMDMuMzQ1LDU1LjY5MyBDMTEyLjIyMiw1Mi4yNDMgMTI1LjU2MSw0OC4xMzkgMTUwLjEyMyw0Ny4wMTkgQzE3Ni42ODcsNDUuODA3IDE4NC42NTUsNDUuNTUgMjUxLjkyMSw0NS41NSBaIiBpZD0iRmlsbC0xIiBmaWxsPSIjRkZGRkZGIiBtYXNrPSJ1cmwoI21hc2stMikiPjwvcGF0aD4gICAgICAgIDwvZz4gICAgICAgIDxwYXRoIGQ9Ik0yNTEuOTIxLDMzNi4wNTMgQzIwNS41NDMsMzM2LjA1MyAxNjcuOTQ3LDI5OC40NTcgMTY3Ljk0NywyNTIuMDggQzE2Ny45NDcsMjA1LjcwMiAyMDUuNTQzLDE2OC4xMDYgMjUxLjkyMSwxNjguMTA2IEMyOTguMjk4LDE2OC4xMDYgMzM1Ljg5NCwyMDUuNzAyIDMzNS44OTQsMjUyLjA4IEMzMzUuODk0LDI5OC40NTcgMjk4LjI5OCwzMzYuMDUzIDI1MS45MjEsMzM2LjA1MyBaIE0yNTEuOTIxLDEyMi43MTUgQzE4MC40NzQsMTIyLjcxNSAxMjIuNTU2LDE4MC42MzMgMTIyLjU1NiwyNTIuMDggQzEyMi41NTYsMzIzLjUyNiAxODAuNDc0LDM4MS40NDQgMjUxLjkyMSwzODEuNDQ0IEMzMjMuMzY3LDM4MS40NDQgMzgxLjI4NSwzMjMuNTI2IDM4MS4yODUsMjUyLjA4IEMzODEuMjg1LDE4MC42MzMgMzIzLjM2NywxMjIuNzE1IDI1MS45MjEsMTIyLjcxNSBaIiBpZD0iRmlsbC00IiBmaWxsPSIjRkZGRkZGIj48L3BhdGg+ICAgICAgICA8cGF0aCBkPSJNNDE2LjYyNywxMTcuNjA0IEM0MTYuNjI3LDEzNC4zIDQwMy4wOTIsMTQ3LjgzNCAzODYuMzk2LDE0Ny44MzQgQzM2OS43MDEsMTQ3LjgzNCAzNTYuMTY2LDEzNC4zIDM1Ni4xNjYsMTE3LjYwNCBDMzU2LjE2NiwxMDAuOTA4IDM2OS43MDEsODcuMzczIDM4Ni4zOTYsODcuMzczIEM0MDMuMDkyLDg3LjM3MyA0MTYuNjI3LDEwMC45MDggNDE2LjYyNywxMTcuNjA0IiBpZD0iRmlsbC01IiBmaWxsPSIjRkZGRkZGIj48L3BhdGg+ICAgIDwvZz48L3N2Zz4=);
|
3587
|
-
}
|
3588
|
-
/* stylelint-disable-next-line no-descending-specificity */
|
3589
|
-
.ck-media__wrapper[data-oembed-url*="instagram.com"] .ck-media__placeholder .ck-media__placeholder__url__text {
|
3590
|
-
color: hsl(302, 100%, 94%);
|
3591
|
-
}
|
3592
|
-
.ck-media__wrapper[data-oembed-url*="instagram.com"] .ck-media__placeholder .ck-media__placeholder__url__text:hover {
|
3593
|
-
color: hsl(0, 0%, 100%);
|
3594
|
-
}
|
3595
|
-
.ck-media__wrapper[data-oembed-url*="twitter.com"] .ck.ck-media__placeholder {
|
3596
|
-
/* Use gradient to contrast with focused widget (ckeditor/ckeditor5-media-embed#22). */
|
3597
|
-
background: linear-gradient( to right, hsl(201, 85%, 70%), hsl(201, 85%, 35%) );
|
3598
|
-
}
|
3599
|
-
.ck-media__wrapper[data-oembed-url*="twitter.com"] .ck.ck-media__placeholder .ck-media__placeholder__icon {
|
3600
|
-
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IldoaXRlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQwMCA0MDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQwMCA0MDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MDAsMjAwYzAsMTEwLjUtODkuNSwyMDAtMjAwLDIwMFMwLDMxMC41LDAsMjAwUzg5LjUsMCwyMDAsMFM0MDAsODkuNSw0MDAsMjAweiBNMTYzLjQsMzA1LjVjODguNywwLDEzNy4yLTczLjUsMTM3LjItMTM3LjJjMC0yLjEsMC00LjItMC4xLTYuMmM5LjQtNi44LDE3LjYtMTUuMywyNC4xLTI1Yy04LjYsMy44LTE3LjksNi40LTI3LjcsNy42YzEwLTYsMTcuNi0xNS40LDIxLjItMjYuN2MtOS4zLDUuNS0xOS42LDkuNS0zMC42LDExLjdjLTguOC05LjQtMjEuMy0xNS4yLTM1LjItMTUuMmMtMjYuNiwwLTQ4LjIsMjEuNi00OC4yLDQ4LjJjMCwzLjgsMC40LDcuNSwxLjMsMTFjLTQwLjEtMi03NS42LTIxLjItOTkuNC01MC40Yy00LjEsNy4xLTYuNSwxNS40LTYuNSwyNC4yYzAsMTYuNyw4LjUsMzEuNSwyMS41LDQwLjFjLTcuOS0wLjItMTUuMy0yLjQtMjEuOC02YzAsMC4yLDAsMC40LDAsMC42YzAsMjMuNCwxNi42LDQyLjgsMzguNyw0Ny4zYy00LDEuMS04LjMsMS43LTEyLjcsMS43Yy0zLjEsMC02LjEtMC4zLTkuMS0wLjljNi4xLDE5LjIsMjMuOSwzMy4xLDQ1LDMzLjVjLTE2LjUsMTIuOS0zNy4zLDIwLjYtNTkuOSwyMC42Yy0zLjksMC03LjctMC4yLTExLjUtMC43QzExMC44LDI5Ny41LDEzNi4yLDMwNS41LDE2My40LDMwNS41Ii8+PC9zdmc+);
|
3601
|
-
}
|
3602
|
-
.ck-media__wrapper[data-oembed-url*="twitter.com"] .ck.ck-media__placeholder .ck-media__placeholder__url__text {
|
3603
|
-
color: hsl(201, 100%, 86%);
|
3604
|
-
}
|
3605
|
-
.ck-media__wrapper[data-oembed-url*="twitter.com"] .ck.ck-media__placeholder .ck-media__placeholder__url__text:hover {
|
3606
|
-
color: hsl(0, 0%, 100%);
|
3607
|
-
}
|
3608
|
-
/*
|
3609
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3610
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3611
|
-
*/
|
3612
|
-
:root {
|
3613
|
-
--ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
|
3614
|
-
--ck-color-mention-text: hsl(341, 100%, 30%);
|
3615
|
-
}
|
3616
|
-
.ck-content .mention {
|
3617
|
-
background: var(--ck-color-mention-background);
|
3618
|
-
color: var(--ck-color-mention-text);
|
3619
|
-
}
|
3620
|
-
/*
|
3621
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3622
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3623
|
-
*/
|
3624
|
-
:root {
|
3625
|
-
--ck-color-restricted-editing-exception-background: hsla(31, 100%, 65%, .2);
|
3626
|
-
--ck-color-restricted-editing-exception-hover-background: hsla(31, 100%, 65%, .35);
|
3627
|
-
--ck-color-restricted-editing-exception-brackets: hsla(31, 100%, 40%, .4);
|
3628
|
-
--ck-color-restricted-editing-selected-exception-background: hsla(31, 100%, 65%, .5);
|
3629
|
-
--ck-color-restricted-editing-selected-exception-brackets: hsla(31, 100%, 40%, .6);
|
3630
|
-
}
|
3631
|
-
.ck-editor__editable .restricted-editing-exception {
|
3632
|
-
transition: .2s ease-in-out background;
|
3633
|
-
background-color: var(--ck-color-restricted-editing-exception-background);
|
3634
|
-
border: 1px solid;
|
3635
|
-
border-image: linear-gradient(
|
3636
|
-
to right,
|
3637
|
-
var(--ck-color-restricted-editing-exception-brackets) 0%,
|
3638
|
-
var(--ck-color-restricted-editing-exception-brackets) 5px,
|
3639
|
-
hsla(0, 0%, 0%, 0) 6px,
|
3640
|
-
hsla(0, 0%, 0%, 0) calc(100% - 6px),
|
3641
|
-
var(--ck-color-restricted-editing-exception-brackets) calc(100% - 5px),
|
3642
|
-
var(--ck-color-restricted-editing-exception-brackets) 100%
|
3643
|
-
) 1;
|
3644
|
-
}
|
3645
|
-
.ck-editor__editable .restricted-editing-exception.restricted-editing-exception_selected {
|
3646
|
-
background-color: var(--ck-color-restricted-editing-selected-exception-background);
|
3647
|
-
border-image: linear-gradient(
|
3648
|
-
to right,
|
3649
|
-
var(--ck-color-restricted-editing-selected-exception-brackets) 0%,
|
3650
|
-
var(--ck-color-restricted-editing-selected-exception-brackets) 5px,
|
3651
|
-
var(--ck-color-restricted-editing-selected-exception-brackets) calc(100% - 5px),
|
3652
|
-
var(--ck-color-restricted-editing-selected-exception-brackets) 100%
|
3653
|
-
) 1;
|
3654
|
-
}
|
3655
|
-
.ck-editor__editable .restricted-editing-exception.restricted-editing-exception_collapsed {
|
3656
|
-
/* Empty exception should have the same width as exception with at least 1 char */
|
3657
|
-
padding-left: 1ch;
|
3658
|
-
}
|
3659
|
-
.ck-restricted-editing_mode_restricted {
|
3660
|
-
cursor: default;
|
3661
|
-
|
3662
|
-
/* We also have to override all elements inside the restricted editable to prevent cursor switching between default and text
|
3663
|
-
during the pointer movement. */
|
3664
|
-
}
|
3665
|
-
.ck-restricted-editing_mode_restricted * {
|
3666
|
-
cursor: default;
|
3667
|
-
}
|
3668
|
-
.ck-restricted-editing_mode_restricted .restricted-editing-exception {
|
3669
|
-
cursor: text;
|
3670
|
-
}
|
3671
|
-
.ck-restricted-editing_mode_restricted .restricted-editing-exception * {
|
3672
|
-
cursor: text;
|
3673
|
-
}
|
3674
|
-
.ck-restricted-editing_mode_restricted .restricted-editing-exception:hover {
|
3675
|
-
background: var(--ck-color-restricted-editing-exception-hover-background);
|
3676
|
-
}
|
3677
|
-
/*
|
3678
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3679
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3680
|
-
*/
|
3681
|
-
/*
|
3682
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3683
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3684
|
-
*/
|
3685
|
-
/*
|
3686
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3687
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3688
|
-
*/
|
3689
|
-
/**
|
3690
|
-
* Implements rounded corner interface for .ck-rounded-corners class.
|
3691
|
-
*
|
3692
|
-
* @see $ck-border-radius
|
3693
|
-
*/
|
3694
|
-
:root {
|
3695
|
-
--ck-character-grid-tile-size: 24px;
|
3696
|
-
}
|
3697
|
-
.ck.ck-character-grid {
|
3698
|
-
overflow-y: auto;
|
3699
|
-
overflow-x: hidden;
|
3700
|
-
width: 350px;
|
3701
|
-
max-height: 200px;
|
3702
|
-
}
|
3703
|
-
@media screen and (max-width: 600px) {
|
3704
|
-
.ck.ck-character-grid {
|
3705
|
-
width: 190px;
|
3706
|
-
}
|
3707
|
-
}
|
3708
|
-
.ck.ck-character-grid .ck-character-grid__tiles {
|
3709
|
-
grid-template-columns: repeat(10, 1fr);
|
3710
|
-
margin: var(--ck-spacing-standard) var(--ck-spacing-large);
|
3711
|
-
grid-gap: var(--ck-spacing-standard);
|
3712
|
-
}
|
3713
|
-
@media screen and (max-width: 600px) {
|
3714
|
-
.ck.ck-character-grid .ck-character-grid__tiles {
|
3715
|
-
grid-template-columns: repeat(5, 1fr);
|
3716
|
-
}
|
3717
|
-
}
|
3718
|
-
.ck.ck-character-grid .ck-character-grid__tile {
|
3719
|
-
width: var(--ck-character-grid-tile-size);
|
3720
|
-
height: var(--ck-character-grid-tile-size);
|
3721
|
-
min-width: var(--ck-character-grid-tile-size);
|
3722
|
-
min-height: var(--ck-character-grid-tile-size);
|
3723
|
-
font-size: 1.2em;
|
3724
|
-
padding: 0;
|
3725
|
-
transition: .2s ease box-shadow;
|
3726
|
-
border: 0;
|
3727
|
-
}
|
3728
|
-
.ck.ck-character-grid .ck-character-grid__tile:focus:not( .ck-disabled ),
|
3729
|
-
.ck.ck-character-grid .ck-character-grid__tile:hover:not( .ck-disabled ) {
|
3730
|
-
/* Disable the default .ck-button's border ring. */
|
3731
|
-
border: 0;
|
3732
|
-
box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-focus-border);
|
3733
|
-
}
|
3734
|
-
/* Make sure the glyph is rendered in the center of the button */
|
3735
|
-
.ck.ck-character-grid .ck-character-grid__tile .ck-button__label {
|
3736
|
-
line-height: var(--ck-character-grid-tile-size);
|
3737
|
-
width: 100%;
|
3738
|
-
text-align: center;
|
3739
|
-
}
|
3740
|
-
/*
|
3741
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3742
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3743
|
-
*/
|
3744
|
-
/*
|
3745
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3746
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3747
|
-
*/
|
3748
|
-
.ck.ck-character-info {
|
3749
|
-
padding: var(--ck-spacing-small) var(--ck-spacing-large);
|
3750
|
-
border-top: 1px solid var(--ck-color-base-border);
|
3751
|
-
}
|
3752
|
-
.ck.ck-character-info > * {
|
3753
|
-
text-transform: uppercase;
|
3754
|
-
font-size: var(--ck-font-size-small);
|
3755
|
-
}
|
3756
|
-
.ck.ck-character-info .ck-character-info__name {
|
3757
|
-
max-width: 280px;
|
3758
|
-
text-overflow: ellipsis;
|
3759
|
-
overflow: hidden;
|
3760
|
-
}
|
3761
|
-
.ck.ck-character-info .ck-character-info__code {
|
3762
|
-
opacity: .6;
|
3763
|
-
}
|
3764
|
-
@media screen and (max-width: 600px) {
|
3765
|
-
.ck.ck-character-info {
|
3766
|
-
max-width: 190px;
|
3767
|
-
}
|
3768
|
-
}
|
3769
|
-
/*
|
3770
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3771
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3772
|
-
*/
|
3773
|
-
/*
|
3774
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3775
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3776
|
-
*/
|
3777
|
-
/*
|
3778
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3779
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3780
|
-
*/
|
3781
|
-
.ck.ck-special-characters-navigation > .ck-label {
|
3782
|
-
max-width: 160px;
|
3783
|
-
text-overflow: ellipsis;
|
3784
|
-
overflow: hidden;
|
3785
|
-
}
|
3786
|
-
.ck.ck-special-characters-navigation > .ck-dropdown .ck-dropdown__panel {
|
3787
|
-
/* There could be dozens of categories available. Use scroll to prevent a 10e6px dropdown. */
|
3788
|
-
max-height: 250px;
|
3789
|
-
overflow-y: auto;
|
3790
|
-
overflow-x: hidden;
|
3791
|
-
}
|
3792
|
-
@media screen and (max-width: 600px) {
|
3793
|
-
.ck.ck-special-characters-navigation {
|
3794
|
-
max-width: 190px;
|
3795
|
-
}
|
3796
|
-
|
3797
|
-
.ck.ck-special-characters-navigation > .ck-form__header__label {
|
3798
|
-
text-overflow: ellipsis;
|
3799
|
-
overflow: hidden;
|
3800
|
-
}
|
3801
|
-
}
|
3802
|
-
/*
|
3803
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3804
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3805
|
-
*/
|
3806
|
-
.ck.ck-dropdown.ck-style-dropdown.ck-style-dropdown_multiple-active > .ck-button > .ck-button__label {
|
3807
|
-
font-style: italic;
|
3808
|
-
}
|
3809
|
-
/*
|
3810
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3811
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3812
|
-
*/
|
3813
|
-
:root {
|
3814
|
-
--ck-style-panel-button-width: 120px;
|
3815
|
-
--ck-style-panel-button-height: 80px;
|
3816
|
-
--ck-style-panel-button-label-background: hsl(0, 0%, 94.1%);
|
3817
|
-
--ck-style-panel-button-hover-label-background: hsl(0, 0%, 92.1%);
|
3818
|
-
--ck-style-panel-button-hover-border-color: hsl(0, 0%, 70%);
|
3819
|
-
}
|
3820
|
-
.ck.ck-style-panel .ck-style-grid {
|
3821
|
-
row-gap: var(--ck-spacing-large);
|
3822
|
-
column-gap: var(--ck-spacing-large);
|
3823
|
-
}
|
3824
|
-
.ck.ck-style-panel .ck-style-grid .ck-style-grid__button {
|
3825
|
-
--ck-color-button-default-hover-background: var(--ck-color-base-background);
|
3826
|
-
--ck-color-button-default-active-background: var(--ck-color-base-background);
|
3827
|
-
|
3828
|
-
padding: 0;
|
3829
|
-
width: var(--ck-style-panel-button-width);
|
3830
|
-
height: var(--ck-style-panel-button-height);
|
3831
|
-
|
3832
|
-
/* Let default .ck-button :focus styles apply */
|
3833
|
-
}
|
3834
|
-
.ck.ck-style-panel .ck-style-grid .ck-style-grid__button:not(:focus) {
|
3835
|
-
border: 1px solid var(--ck-color-base-border);
|
3836
|
-
}
|
3837
|
-
.ck.ck-style-panel .ck-style-grid .ck-style-grid__button .ck-button__label {
|
3838
|
-
height: 22px;
|
3839
|
-
line-height: 22px;
|
3840
|
-
width: 100%;
|
3841
|
-
padding: 0 var(--ck-spacing-medium);
|
3842
|
-
overflow: hidden;
|
3843
|
-
text-overflow: ellipsis;
|
3844
|
-
flex-shrink: 0;
|
3845
|
-
}
|
3846
|
-
.ck.ck-style-panel .ck-style-grid .ck-style-grid__button .ck-style-grid__button__preview {
|
3847
|
-
width: 100%;
|
3848
|
-
overflow: hidden;
|
3849
|
-
opacity: .9;
|
3850
|
-
|
3851
|
-
padding: var(--ck-spacing-medium);
|
3852
|
-
background: var(--ck-color-base-background);
|
3853
|
-
border: 2px solid var(--ck-color-base-background);
|
3854
|
-
}
|
3855
|
-
.ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-disabled {
|
3856
|
-
--ck-color-button-default-disabled-background: var(--ck-color-base-foreground);
|
3857
|
-
|
3858
|
-
/* Let default .ck-button :focus styles apply */
|
3859
|
-
}
|
3860
|
-
.ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-disabled:not(:focus) {
|
3861
|
-
border-color: var(--ck-style-panel-button-label-background);
|
3862
|
-
}
|
3863
|
-
.ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-disabled .ck-style-grid__button__preview {
|
3864
|
-
opacity: .4;
|
3865
|
-
|
3866
|
-
border-color: var(--ck-color-base-foreground);
|
3867
|
-
filter: saturate(.3);
|
3868
|
-
}
|
3869
|
-
.ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-on {
|
3870
|
-
border-color: var(--ck-color-base-active);
|
3871
|
-
}
|
3872
|
-
.ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-on .ck-button__label {
|
3873
|
-
box-shadow: 0 -1px 0 var(--ck-color-base-active);
|
3874
|
-
z-index: 1; /* Stay on top of the preview with the shadow. */
|
3875
|
-
}
|
3876
|
-
.ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-on:hover {
|
3877
|
-
border-color: var(--ck-color-base-active-focus);
|
3878
|
-
}
|
3879
|
-
.ck.ck-style-panel .ck-style-grid .ck-style-grid__button:not(.ck-on) .ck-button__label {
|
3880
|
-
background: var(--ck-style-panel-button-label-background);
|
3881
|
-
}
|
3882
|
-
.ck.ck-style-panel .ck-style-grid .ck-style-grid__button:not(.ck-on):hover .ck-button__label {
|
3883
|
-
background: var(--ck-style-panel-button-hover-label-background);
|
3884
|
-
}
|
3885
|
-
.ck.ck-style-panel .ck-style-grid .ck-style-grid__button:hover:not(.ck-disabled):not(.ck-on) {
|
3886
|
-
border-color: var(--ck-style-panel-button-hover-border-color);
|
3887
|
-
}
|
3888
|
-
.ck.ck-style-panel .ck-style-grid .ck-style-grid__button:hover:not(.ck-disabled):not(.ck-on) .ck-style-grid__button__preview {
|
3889
|
-
opacity: 1;
|
3890
|
-
}
|
3891
|
-
/*
|
3892
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3893
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3894
|
-
*/
|
3895
|
-
.ck.ck-style-panel .ck-style-panel__style-group > .ck-label {
|
3896
|
-
margin: var(--ck-spacing-large) 0;
|
3897
|
-
}
|
3898
|
-
.ck.ck-style-panel .ck-style-panel__style-group:first-child > .ck-label {
|
3899
|
-
margin-top: 0;
|
3900
|
-
}
|
3901
|
-
/*
|
3902
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3903
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3904
|
-
*/
|
3905
|
-
:root {
|
3906
|
-
--ck-style-panel-max-height: 470px;
|
3907
|
-
}
|
3908
|
-
.ck.ck-style-panel {
|
3909
|
-
padding: var(--ck-spacing-large);
|
3910
|
-
overflow-y: auto;
|
3911
|
-
max-height: var(--ck-style-panel-max-height);
|
3912
|
-
}
|
3913
|
-
/*
|
3914
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3915
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3916
|
-
*/
|
3917
|
-
/*
|
3918
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3919
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3920
|
-
*/
|
3921
|
-
/*
|
3922
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3923
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
3924
|
-
*/
|
3925
|
-
/**
|
3926
|
-
* Implements rounded corner interface for .ck-rounded-corners class.
|
3927
|
-
*
|
3928
|
-
* @see $ck-border-radius
|
3929
|
-
*/
|
3930
|
-
[dir="ltr"] .ck.ck-input-color > .ck.ck-input-text {
|
3931
|
-
border-top-right-radius: 0;
|
3932
|
-
border-bottom-right-radius: 0;
|
3933
|
-
}
|
3934
|
-
[dir="rtl"] .ck.ck-input-color > .ck.ck-input-text {
|
3935
|
-
border-top-left-radius: 0;
|
3936
|
-
border-bottom-left-radius: 0;
|
3937
|
-
}
|
3938
|
-
/* Make sure the focused input is always on top of the dropdown button so its
|
3939
|
-
outline and border are never cropped (also when the input is read-only). */
|
3940
|
-
.ck.ck-input-color > .ck.ck-input-text:focus {
|
3941
|
-
z-index: 0;
|
3942
|
-
}
|
3943
|
-
.ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button {
|
3944
|
-
padding: 0;
|
3945
|
-
}
|
3946
|
-
[dir="ltr"] .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button {
|
3947
|
-
border-top-left-radius: 0;
|
3948
|
-
border-bottom-left-radius: 0;
|
3949
|
-
}
|
3950
|
-
[dir="ltr"] .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button:not(:focus) {
|
3951
|
-
border-left: 1px solid transparent;
|
3952
|
-
}
|
3953
|
-
[dir="rtl"] .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button {
|
3954
|
-
border-top-right-radius: 0;
|
3955
|
-
border-bottom-right-radius: 0;
|
3956
|
-
}
|
3957
|
-
[dir="rtl"] .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button:not(:focus) {
|
3958
|
-
border-right: 1px solid transparent;
|
3959
|
-
}
|
3960
|
-
.ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button.ck-disabled {
|
3961
|
-
background: var(--ck-color-input-disabled-background);
|
3962
|
-
}
|
3963
|
-
.ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button > .ck.ck-input-color__button__preview {
|
3964
|
-
border-radius: 0;
|
3965
|
-
}
|
3966
|
-
.ck-rounded-corners .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button > .ck.ck-input-color__button__preview, .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button > .ck.ck-input-color__button__preview.ck-rounded-corners {
|
3967
|
-
border-radius: var(--ck-border-radius);
|
3968
|
-
}
|
3969
|
-
.ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button > .ck.ck-input-color__button__preview {
|
3970
|
-
|
3971
|
-
width: 20px;
|
3972
|
-
height: 20px;
|
3973
|
-
border: 1px solid var(--ck-color-input-border);
|
3974
|
-
}
|
3975
|
-
.ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button > .ck.ck-input-color__button__preview > .ck.ck-input-color__button__preview__no-color-indicator {
|
3976
|
-
top: -30%;
|
3977
|
-
left: 50%;
|
3978
|
-
height: 150%;
|
3979
|
-
width: 8%;
|
3980
|
-
background: hsl(0, 100%, 50%);
|
3981
|
-
border-radius: 2px;
|
3982
|
-
transform: rotate(45deg);
|
3983
|
-
transform-origin: 50%;
|
3984
|
-
}
|
3985
|
-
.ck.ck-input-color .ck.ck-input-color__remove-color {
|
3986
|
-
width: 100%;
|
3987
|
-
padding: calc(var(--ck-spacing-standard) / 2) var(--ck-spacing-standard);
|
3988
|
-
|
3989
|
-
border-bottom-left-radius: 0;
|
3990
|
-
border-bottom-right-radius: 0;
|
3991
|
-
}
|
3992
|
-
.ck.ck-input-color .ck.ck-input-color__remove-color:not(:focus) {
|
3993
|
-
border-bottom: 1px solid var(--ck-color-input-border);
|
3994
|
-
}
|
3995
|
-
[dir="ltr"] .ck.ck-input-color .ck.ck-input-color__remove-color {
|
3996
|
-
border-top-right-radius: 0;
|
3997
|
-
}
|
3998
|
-
[dir="rtl"] .ck.ck-input-color .ck.ck-input-color__remove-color {
|
3999
|
-
border-top-left-radius: 0;
|
4000
|
-
}
|
4001
|
-
.ck.ck-input-color .ck.ck-input-color__remove-color .ck.ck-icon {
|
4002
|
-
margin-right: var(--ck-spacing-standard);
|
4003
|
-
}
|
4004
|
-
[dir="rtl"] .ck.ck-input-color .ck.ck-input-color__remove-color .ck.ck-icon {
|
4005
|
-
margin-right: 0;
|
4006
|
-
margin-left: var(--ck-spacing-standard);
|
4007
|
-
}
|
4008
|
-
/*
|
4009
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
4010
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4011
|
-
*/
|
4012
|
-
.ck.ck-form {
|
4013
|
-
padding: 0 0 var(--ck-spacing-large);
|
4014
|
-
}
|
4015
|
-
.ck.ck-form:focus {
|
4016
|
-
/* See: https://github.com/ckeditor/ckeditor5/issues/4773 */
|
4017
|
-
outline: none;
|
4018
|
-
}
|
4019
|
-
.ck.ck-form .ck.ck-input-text {
|
4020
|
-
min-width: 100%;
|
4021
|
-
width: 0;
|
4022
|
-
}
|
4023
|
-
.ck.ck-form .ck.ck-dropdown {
|
4024
|
-
min-width: 100%;
|
4025
|
-
}
|
4026
|
-
.ck.ck-form .ck.ck-dropdown .ck-dropdown__button:not(:focus) {
|
4027
|
-
border: 1px solid var(--ck-color-base-border);
|
4028
|
-
}
|
4029
|
-
.ck.ck-form .ck.ck-dropdown .ck-dropdown__button .ck-button__label {
|
4030
|
-
width: 100%;
|
4031
|
-
}
|
4032
|
-
/*
|
4033
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
4034
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4035
|
-
*/
|
4036
|
-
/*
|
4037
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
4038
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4039
|
-
*/
|
4040
|
-
.ck.ck-form__row {
|
4041
|
-
padding: var(--ck-spacing-standard) var(--ck-spacing-large) 0;
|
4042
|
-
|
4043
|
-
/* Ignore labels that work as fieldset legends */
|
4044
|
-
}
|
4045
|
-
[dir="ltr"] .ck.ck-form__row > *:not(.ck-label) + * {
|
4046
|
-
margin-left: var(--ck-spacing-large);
|
4047
|
-
}
|
4048
|
-
[dir="rtl"] .ck.ck-form__row > *:not(.ck-label) + * {
|
4049
|
-
margin-right: var(--ck-spacing-large);
|
4050
|
-
}
|
4051
|
-
.ck.ck-form__row > .ck-label {
|
4052
|
-
width: 100%;
|
4053
|
-
min-width: 100%;
|
4054
|
-
}
|
4055
|
-
.ck.ck-form__row.ck-table-form__action-row {
|
4056
|
-
margin-top: var(--ck-spacing-large);
|
4057
|
-
}
|
4058
|
-
.ck.ck-form__row.ck-table-form__action-row .ck-button .ck-button__label {
|
4059
|
-
color: var(--ck-color-text);
|
4060
|
-
}
|
4061
|
-
/*
|
4062
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
4063
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4064
|
-
*/
|
4065
|
-
:root {
|
4066
|
-
--ck-insert-table-dropdown-padding: 10px;
|
4067
|
-
--ck-insert-table-dropdown-box-height: 11px;
|
4068
|
-
--ck-insert-table-dropdown-box-width: 12px;
|
4069
|
-
--ck-insert-table-dropdown-box-margin: 1px;
|
4070
|
-
}
|
4071
|
-
.ck .ck-insert-table-dropdown__grid {
|
4072
|
-
/* The width of a container should match 10 items in a row so there will be a 10x10 grid. */
|
4073
|
-
width: calc(var(--ck-insert-table-dropdown-box-width) * 10 + var(--ck-insert-table-dropdown-box-margin) * 20 + var(--ck-insert-table-dropdown-padding) * 2);
|
4074
|
-
padding: var(--ck-insert-table-dropdown-padding) var(--ck-insert-table-dropdown-padding) 0;
|
4075
|
-
}
|
4076
|
-
.ck .ck-insert-table-dropdown__label,
|
4077
|
-
.ck[dir=rtl] .ck-insert-table-dropdown__label {
|
4078
|
-
text-align: center;
|
4079
|
-
}
|
4080
|
-
.ck .ck-insert-table-dropdown-grid-box {
|
4081
|
-
min-width: var(--ck-insert-table-dropdown-box-width);
|
4082
|
-
min-height: var(--ck-insert-table-dropdown-box-height);
|
4083
|
-
margin: var(--ck-insert-table-dropdown-box-margin);
|
4084
|
-
border: 1px solid var(--ck-color-base-border);
|
4085
|
-
border-radius: 1px;
|
4086
|
-
outline: none;
|
4087
|
-
transition: none;
|
4088
|
-
}
|
4089
|
-
.ck .ck-insert-table-dropdown-grid-box:focus {
|
4090
|
-
box-shadow: none;
|
4091
|
-
}
|
4092
|
-
.ck .ck-insert-table-dropdown-grid-box.ck-on {
|
4093
|
-
border-color: var(--ck-color-focus-border);
|
4094
|
-
background: var(--ck-color-focus-outer-shadow);
|
4095
|
-
}
|
4096
|
-
/*
|
4097
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
4098
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4099
|
-
*/
|
4100
|
-
.ck.ck-table-cell-properties-form {
|
4101
|
-
width: 320px;
|
4102
|
-
}
|
4103
|
-
.ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__padding-row {
|
4104
|
-
align-self: flex-end;
|
4105
|
-
padding: 0;
|
4106
|
-
width: 25%;
|
4107
|
-
}
|
4108
|
-
.ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar {
|
4109
|
-
background: none;
|
4110
|
-
|
4111
|
-
/* Compensate for missing input label that would push the margin (toolbar has no inputs). */
|
4112
|
-
margin-top: var(--ck-spacing-standard);
|
4113
|
-
}
|
4114
|
-
/*
|
4115
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
4116
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4117
|
-
*/
|
4118
|
-
:root {
|
4119
|
-
--ck-color-selector-focused-cell-background: hsla(212, 90%, 80%, .3);
|
4120
|
-
}
|
4121
|
-
.ck-widget.table td.ck-editor__nested-editable.ck-editor__nested-editable_focused,
|
4122
|
-
.ck-widget.table th.ck-editor__nested-editable.ck-editor__nested-editable_focused,
|
4123
|
-
.ck-widget.table td.ck-editor__nested-editable:focus,
|
4124
|
-
.ck-widget.table th.ck-editor__nested-editable:focus {
|
4125
|
-
/* A very slight background to highlight the focused cell */
|
4126
|
-
background: var(--ck-color-selector-focused-cell-background);
|
4127
|
-
|
4128
|
-
/* Fixes the problem where surrounding cells cover the focused cell's border.
|
4129
|
-
It does not fix the problem in all places but the UX is improved.
|
4130
|
-
See https://github.com/ckeditor/ckeditor5-table/issues/29. */
|
4131
|
-
border-style: none;
|
4132
|
-
outline: 1px solid var(--ck-color-focus-border);
|
4133
|
-
outline-offset: -1px; /* progressive enhancement - no IE support */
|
4134
|
-
}
|
4135
|
-
/*
|
4136
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
4137
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4138
|
-
*/
|
4139
|
-
/*
|
4140
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
4141
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4142
|
-
*/
|
4143
|
-
/**
|
4144
|
-
* Implements rounded corner interface for .ck-rounded-corners class.
|
4145
|
-
*
|
4146
|
-
* @see $ck-border-radius
|
4147
|
-
*/
|
4148
|
-
:root {
|
4149
|
-
--ck-table-properties-error-arrow-size: 6px;
|
4150
|
-
--ck-table-properties-min-error-width: 150px;
|
4151
|
-
}
|
4152
|
-
.ck.ck-table-form .ck-form__row.ck-table-form__border-row .ck-labeled-field-view > .ck-label {
|
4153
|
-
font-size: var(--ck-font-size-tiny);
|
4154
|
-
text-align: center;
|
4155
|
-
}
|
4156
|
-
.ck.ck-table-form .ck-form__row.ck-table-form__border-row .ck-table-form__border-style,
|
4157
|
-
.ck.ck-table-form .ck-form__row.ck-table-form__border-row .ck-table-form__border-width {
|
4158
|
-
width: 80px;
|
4159
|
-
min-width: 80px;
|
4160
|
-
max-width: 80px;
|
4161
|
-
}
|
4162
|
-
.ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row {
|
4163
|
-
padding: 0;
|
4164
|
-
}
|
4165
|
-
.ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-table-form__dimensions-row__width,
|
4166
|
-
.ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-table-form__dimensions-row__height {
|
4167
|
-
margin: 0
|
4168
|
-
}
|
4169
|
-
.ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-table-form__dimension-operator {
|
4170
|
-
align-self: flex-end;
|
4171
|
-
display: inline-block;
|
4172
|
-
height: var(--ck-ui-component-min-height);
|
4173
|
-
line-height: var(--ck-ui-component-min-height);
|
4174
|
-
margin: 0 var(--ck-spacing-small);
|
4175
|
-
}
|
4176
|
-
.ck.ck-table-form .ck.ck-labeled-field-view {
|
4177
|
-
padding-top: var(--ck-spacing-standard);
|
4178
|
-
}
|
4179
|
-
.ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status {
|
4180
|
-
border-radius: 0;
|
4181
|
-
}
|
4182
|
-
.ck-rounded-corners .ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status, .ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status.ck-rounded-corners {
|
4183
|
-
border-radius: var(--ck-border-radius);
|
4184
|
-
}
|
4185
|
-
.ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status {
|
4186
|
-
|
4187
|
-
background: var(--ck-color-base-error);
|
4188
|
-
color: var(--ck-color-base-background);
|
4189
|
-
padding: var(--ck-spacing-small) var(--ck-spacing-medium);
|
4190
|
-
min-width: var(--ck-table-properties-min-error-width);
|
4191
|
-
text-align: center;
|
4192
|
-
|
4193
|
-
animation: ck-table-form-labeled-view-status-appear .15s ease both;
|
4194
|
-
|
4195
|
-
/* The arrow pointing towards the field. */
|
4196
|
-
}
|
4197
|
-
.ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status::after {
|
4198
|
-
border-color: transparent transparent var(--ck-color-base-error) transparent;
|
4199
|
-
border-width: 0 var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size);
|
4200
|
-
border-style: solid;
|
4201
|
-
}
|
4202
|
-
/* Hide the error balloon when the field is blurred. Makes the experience much more clear. */
|
4203
|
-
.ck.ck-table-form .ck.ck-labeled-field-view .ck-input.ck-error:not(:focus) + .ck.ck-labeled-field-view__status {
|
4204
|
-
display: none;
|
4205
|
-
}
|
4206
|
-
@keyframes ck-table-form-labeled-view-status-appear {
|
4207
|
-
0% {
|
4208
|
-
opacity: 0;
|
4209
|
-
}
|
4210
|
-
|
4211
|
-
100% {
|
4212
|
-
opacity: 1;
|
4213
|
-
}
|
4214
|
-
}
|
4215
|
-
/*
|
4216
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
4217
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4218
|
-
*/
|
4219
|
-
.ck.ck-table-properties-form {
|
4220
|
-
width: 320px;
|
4221
|
-
}
|
4222
|
-
.ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row {
|
4223
|
-
align-self: flex-end;
|
4224
|
-
padding: 0;
|
4225
|
-
}
|
4226
|
-
.ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row .ck.ck-toolbar {
|
4227
|
-
background: none;
|
4228
|
-
|
4229
|
-
/* Compensate for missing input label that would push the margin (toolbar has no inputs). */
|
4230
|
-
margin-top: var(--ck-spacing-standard);
|
4231
|
-
}
|
4232
|
-
.ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row .ck.ck-toolbar .ck-toolbar__items > * {
|
4233
|
-
width: 40px;
|
4234
|
-
}
|
4235
|
-
/*
|
4236
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
4237
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4238
|
-
*/
|
4239
|
-
:root {
|
4240
|
-
--ck-table-selected-cell-background: hsla(208, 90%, 80%, .3);
|
4241
|
-
}
|
4242
|
-
.ck.ck-editor__editable .table table td.ck-editor__editable_selected,
|
4243
|
-
.ck.ck-editor__editable .table table th.ck-editor__editable_selected {
|
4244
|
-
position: relative;
|
4245
|
-
caret-color: transparent;
|
4246
|
-
outline: unset;
|
4247
|
-
box-shadow: unset;
|
4248
|
-
|
4249
|
-
/* https://github.com/ckeditor/ckeditor5/issues/6446 */
|
4250
|
-
}
|
4251
|
-
.ck.ck-editor__editable .table table td.ck-editor__editable_selected:after, .ck.ck-editor__editable .table table th.ck-editor__editable_selected:after {
|
4252
|
-
content: '';
|
4253
|
-
pointer-events: none;
|
4254
|
-
background-color: var(--ck-table-selected-cell-background);
|
4255
|
-
position: absolute;
|
4256
|
-
top: 0;
|
4257
|
-
left: 0;
|
4258
|
-
right: 0;
|
4259
|
-
bottom: 0;
|
4260
|
-
}
|
4261
|
-
.ck.ck-editor__editable .table table td.ck-editor__editable_selected ::selection,
|
4262
|
-
.ck.ck-editor__editable .table table th.ck-editor__editable_selected ::selection,
|
4263
|
-
.ck.ck-editor__editable .table table td.ck-editor__editable_selected:focus,
|
4264
|
-
.ck.ck-editor__editable .table table th.ck-editor__editable_selected:focus {
|
4265
|
-
background-color: transparent;
|
4266
|
-
}
|
4267
|
-
/*
|
4268
|
-
* To reduce the amount of noise, all widgets in the table selection have no outline and no selection handle.
|
4269
|
-
* See https://github.com/ckeditor/ckeditor5/issues/9491.
|
4270
|
-
*/
|
4271
|
-
.ck.ck-editor__editable .table table td.ck-editor__editable_selected .ck-widget, .ck.ck-editor__editable .table table th.ck-editor__editable_selected .ck-widget {
|
4272
|
-
outline: unset;
|
4273
|
-
}
|
4274
|
-
.ck.ck-editor__editable .table table td.ck-editor__editable_selected .ck-widget > .ck-widget__selection-handle, .ck.ck-editor__editable .table table th.ck-editor__editable_selected .ck-widget > .ck-widget__selection-handle {
|
4275
|
-
display: none;
|
4276
|
-
}
|
4277
|
-
/*
|
4278
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
4279
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4280
|
-
*/
|
4281
|
-
/*
|
4282
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
4283
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4284
|
-
*/
|
4285
|
-
/**
|
4286
|
-
* A visual style of focused element's border.
|
4287
|
-
*/
|
4288
|
-
/*
|
4289
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
4290
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4291
|
-
*/
|
4292
|
-
/**
|
4293
|
-
* A helper to combine multiple shadows.
|
4294
|
-
*/
|
4295
|
-
/**
|
4296
|
-
* Gives an element a drop shadow so it looks like a floating panel.
|
4297
|
-
*/
|
4298
|
-
:root {
|
4299
|
-
--ck-widget-outline-thickness: 3px;
|
4300
|
-
--ck-widget-handler-icon-size: 16px;
|
4301
|
-
--ck-widget-handler-animation-duration: 200ms;
|
4302
|
-
--ck-widget-handler-animation-curve: ease;
|
4303
|
-
|
4304
|
-
--ck-color-widget-blurred-border: hsl(0, 0%, 87%);
|
4305
|
-
--ck-color-widget-hover-border: hsl(43, 100%, 62%);
|
4306
|
-
--ck-color-widget-editable-focus-background: var(--ck-color-base-background);
|
4307
|
-
--ck-color-widget-drag-handler-icon-color: var(--ck-color-base-background);
|
4308
|
-
}
|
4309
|
-
.ck .ck-widget {
|
4310
|
-
outline-width: var(--ck-widget-outline-thickness);
|
4311
|
-
outline-style: solid;
|
4312
|
-
outline-color: transparent;
|
4313
|
-
transition: outline-color var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
|
4314
|
-
}
|
4315
|
-
.ck .ck-widget.ck-widget_selected,
|
4316
|
-
.ck .ck-widget.ck-widget_selected:hover {
|
4317
|
-
outline: var(--ck-widget-outline-thickness) solid var(--ck-color-focus-border);
|
4318
|
-
}
|
4319
|
-
.ck .ck-widget:hover {
|
4320
|
-
outline-color: var(--ck-color-widget-hover-border);
|
4321
|
-
}
|
4322
|
-
.ck .ck-editor__nested-editable {
|
4323
|
-
border: 1px solid transparent;
|
4324
|
-
|
4325
|
-
/* The :focus style is applied before .ck-editor__nested-editable_focused class is rendered in the view.
|
4326
|
-
These styles show a different border for a blink of an eye, so `:focus` need to have same styles applied. */
|
4327
|
-
}
|
4328
|
-
.ck .ck-editor__nested-editable.ck-editor__nested-editable_focused,
|
4329
|
-
.ck .ck-editor__nested-editable:focus {
|
4330
|
-
/* Disable native outline. */
|
4331
|
-
outline: none;
|
4332
|
-
border: var(--ck-focus-ring);
|
4333
|
-
box-shadow: var(--ck-inner-shadow), 0 0;
|
4334
|
-
|
4335
|
-
background-color: var(--ck-color-widget-editable-focus-background);
|
4336
|
-
}
|
4337
|
-
.ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle {
|
4338
|
-
padding: 4px;
|
4339
|
-
box-sizing: border-box;
|
4340
|
-
|
4341
|
-
/* Background and opacity will be animated as the handler shows up or the widget gets selected. */
|
4342
|
-
background-color: transparent;
|
4343
|
-
opacity: 0;
|
4344
|
-
|
4345
|
-
/* Transition:
|
4346
|
-
* background-color for the .ck-widget_selected state change,
|
4347
|
-
* visibility for hiding the handler,
|
4348
|
-
* opacity for the proper look of the icon when the handler disappears. */
|
4349
|
-
transition:
|
4350
|
-
background-color var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve),
|
4351
|
-
visibility var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve),
|
4352
|
-
opacity var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
|
4353
|
-
|
4354
|
-
/* Make only top corners round. */
|
4355
|
-
border-radius: var(--ck-border-radius) var(--ck-border-radius) 0 0;
|
4356
|
-
|
4357
|
-
/* Place the drag handler outside the widget wrapper. */
|
4358
|
-
transform: translateY(-100%);
|
4359
|
-
left: calc(0px - var(--ck-widget-outline-thickness));
|
4360
|
-
top: 0;
|
4361
|
-
}
|
4362
|
-
.ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle .ck-icon {
|
4363
|
-
/* Make sure the dimensions of the icon are independent of the fon-size of the content. */
|
4364
|
-
width: var(--ck-widget-handler-icon-size);
|
4365
|
-
height: var(--ck-widget-handler-icon-size);
|
4366
|
-
color: var(--ck-color-widget-drag-handler-icon-color);
|
4367
|
-
|
4368
|
-
/* The "selected" part of the icon is invisible by default */
|
4369
|
-
}
|
4370
|
-
.ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle .ck-icon .ck-icon__selected-indicator {
|
4371
|
-
opacity: 0;
|
4372
|
-
|
4373
|
-
/* Note: The animation is longer on purpose. Simply feels better. */
|
4374
|
-
transition: opacity 300ms var(--ck-widget-handler-animation-curve);
|
4375
|
-
}
|
4376
|
-
/* Advertise using the look of the icon that once clicked the handler, the widget will be selected. */
|
4377
|
-
.ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle:hover .ck-icon .ck-icon__selected-indicator {
|
4378
|
-
opacity: 1;
|
4379
|
-
}
|
4380
|
-
/* Show the selection handler on mouse hover over the widget, but not for nested widgets. */
|
4381
|
-
.ck .ck-widget.ck-widget_with-selection-handle:hover > .ck-widget__selection-handle {
|
4382
|
-
opacity: 1;
|
4383
|
-
background-color: var(--ck-color-widget-hover-border);
|
4384
|
-
}
|
4385
|
-
/* Show the selection handler when the widget is selected, but not for nested widgets. */
|
4386
|
-
.ck .ck-widget.ck-widget_with-selection-handle.ck-widget_selected > .ck-widget__selection-handle, .ck .ck-widget.ck-widget_with-selection-handle.ck-widget_selected:hover > .ck-widget__selection-handle {
|
4387
|
-
opacity: 1;
|
4388
|
-
background-color: var(--ck-color-focus-border);
|
4389
|
-
|
4390
|
-
/* When the widget is selected, notify the user using the proper look of the icon. */
|
4391
|
-
}
|
4392
|
-
.ck .ck-widget.ck-widget_with-selection-handle.ck-widget_selected > .ck-widget__selection-handle .ck-icon .ck-icon__selected-indicator, .ck .ck-widget.ck-widget_with-selection-handle.ck-widget_selected:hover > .ck-widget__selection-handle .ck-icon .ck-icon__selected-indicator {
|
4393
|
-
opacity: 1;
|
4394
|
-
}
|
4395
|
-
/* In a RTL environment, align the selection handler to the right side of the widget */
|
4396
|
-
/* stylelint-disable-next-line no-descending-specificity */
|
4397
|
-
.ck[dir="rtl"] .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle {
|
4398
|
-
left: auto;
|
4399
|
-
right: calc(0px - var(--ck-widget-outline-thickness));
|
4400
|
-
}
|
4401
|
-
/* https://github.com/ckeditor/ckeditor5/issues/6415 */
|
4402
|
-
.ck.ck-editor__editable.ck-read-only .ck-widget {
|
4403
|
-
/* Prevent the :hover outline from showing up because of the used outline-color transition. */
|
4404
|
-
transition: none;
|
4405
|
-
}
|
4406
|
-
.ck.ck-editor__editable.ck-read-only .ck-widget:not(.ck-widget_selected) {
|
4407
|
-
/* Disable visual effects of hover/active widget when CKEditor is in readOnly mode.
|
4408
|
-
* See: https://github.com/ckeditor/ckeditor5/issues/1261
|
4409
|
-
*
|
4410
|
-
* Leave the unit because this custom property is used in calc() by other features.
|
4411
|
-
* See: https://github.com/ckeditor/ckeditor5/issues/6775
|
4412
|
-
*/
|
4413
|
-
--ck-widget-outline-thickness: 0px;
|
4414
|
-
}
|
4415
|
-
.ck.ck-editor__editable.ck-read-only .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle,
|
4416
|
-
.ck.ck-editor__editable.ck-read-only .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle:hover {
|
4417
|
-
background: var(--ck-color-widget-blurred-border);
|
4418
|
-
}
|
4419
|
-
/* Style the widget when it's selected but the editable it belongs to lost focus. */
|
4420
|
-
/* stylelint-disable-next-line no-descending-specificity */
|
4421
|
-
.ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected,
|
4422
|
-
.ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected:hover {
|
4423
|
-
outline-color: var(--ck-color-widget-blurred-border);
|
4424
|
-
}
|
4425
|
-
.ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected.ck-widget_with-selection-handle > .ck-widget__selection-handle,
|
4426
|
-
.ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected.ck-widget_with-selection-handle:hover > .ck-widget__selection-handle,
|
4427
|
-
.ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected.ck-widget_with-selection-handle > .ck-widget__selection-handle:hover,
|
4428
|
-
.ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected.ck-widget_with-selection-handle:hover > .ck-widget__selection-handle:hover {
|
4429
|
-
background: var(--ck-color-widget-blurred-border);
|
4430
|
-
}
|
4431
|
-
.ck.ck-editor__editable > .ck-widget.ck-widget_with-selection-handle:first-child,
|
4432
|
-
.ck.ck-editor__editable blockquote > .ck-widget.ck-widget_with-selection-handle:first-child {
|
4433
|
-
/* Do not crop selection handler if a widget is a first-child in the blockquote or in the root editable.
|
4434
|
-
In fact, anything with overflow: hidden.
|
4435
|
-
https://github.com/ckeditor/ckeditor5-block-quote/issues/28
|
4436
|
-
https://github.com/ckeditor/ckeditor5-widget/issues/44
|
4437
|
-
https://github.com/ckeditor/ckeditor5-widget/issues/66 */
|
4438
|
-
margin-top: calc(1em + var(--ck-widget-handler-icon-size));
|
4439
|
-
}
|
4440
|
-
/*
|
4441
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
4442
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4443
|
-
*/
|
4444
|
-
:root {
|
4445
|
-
--ck-resizer-size: 10px;
|
4446
|
-
|
4447
|
-
/* Set the resizer with a 50% offset. */
|
4448
|
-
--ck-resizer-offset: calc( ( var(--ck-resizer-size) / -2 ) - 2px);
|
4449
|
-
--ck-resizer-border-width: 1px;
|
4450
|
-
}
|
4451
|
-
.ck .ck-widget__resizer {
|
4452
|
-
outline: 1px solid var(--ck-color-resizer);
|
4453
|
-
}
|
4454
|
-
.ck .ck-widget__resizer__handle {
|
4455
|
-
width: var(--ck-resizer-size);
|
4456
|
-
height: var(--ck-resizer-size);
|
4457
|
-
background: var(--ck-color-focus-border);
|
4458
|
-
border: var(--ck-resizer-border-width) solid hsl(0, 0%, 100%);
|
4459
|
-
border-radius: var(--ck-resizer-border-radius);
|
4460
|
-
}
|
4461
|
-
.ck .ck-widget__resizer__handle.ck-widget__resizer__handle-top-left {
|
4462
|
-
top: var(--ck-resizer-offset);
|
4463
|
-
left: var(--ck-resizer-offset);
|
4464
|
-
}
|
4465
|
-
.ck .ck-widget__resizer__handle.ck-widget__resizer__handle-top-right {
|
4466
|
-
top: var(--ck-resizer-offset);
|
4467
|
-
right: var(--ck-resizer-offset);
|
4468
|
-
}
|
4469
|
-
.ck .ck-widget__resizer__handle.ck-widget__resizer__handle-bottom-right {
|
4470
|
-
bottom: var(--ck-resizer-offset);
|
4471
|
-
right: var(--ck-resizer-offset);
|
4472
|
-
}
|
4473
|
-
.ck .ck-widget__resizer__handle.ck-widget__resizer__handle-bottom-left {
|
4474
|
-
bottom: var(--ck-resizer-offset);
|
4475
|
-
left: var(--ck-resizer-offset);
|
4476
|
-
}
|
4477
|
-
/*
|
4478
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
4479
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4480
|
-
*/
|
4481
|
-
:root {
|
4482
|
-
--ck-widget-type-around-button-size: 20px;
|
4483
|
-
--ck-color-widget-type-around-button-active: var(--ck-color-focus-border);
|
4484
|
-
--ck-color-widget-type-around-button-hover: var(--ck-color-widget-hover-border);
|
4485
|
-
--ck-color-widget-type-around-button-blurred-editable: var(--ck-color-widget-blurred-border);
|
4486
|
-
--ck-color-widget-type-around-button-radar-start-alpha: 0;
|
4487
|
-
--ck-color-widget-type-around-button-radar-end-alpha: .3;
|
4488
|
-
--ck-color-widget-type-around-button-icon: var(--ck-color-base-background);
|
4489
|
-
}
|
4490
|
-
/*
|
4491
|
-
* Styles of the type around buttons
|
4492
|
-
*/
|
4493
|
-
.ck .ck-widget .ck-widget__type-around__button {
|
4494
|
-
width: var(--ck-widget-type-around-button-size);
|
4495
|
-
height: var(--ck-widget-type-around-button-size);
|
4496
|
-
background: var(--ck-color-widget-type-around-button);
|
4497
|
-
border-radius: 100px;
|
4498
|
-
transition: opacity var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve), background var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
|
4499
|
-
|
4500
|
-
opacity: 0;
|
4501
|
-
|
4502
|
-
pointer-events: none;
|
4503
|
-
}
|
4504
|
-
.ck .ck-widget .ck-widget__type-around__button svg {
|
4505
|
-
width: 10px;
|
4506
|
-
height: 8px;
|
4507
|
-
transform: translate(-50%,-50%);
|
4508
|
-
transition: transform .5s ease;
|
4509
|
-
margin-top: 1px;
|
4510
|
-
}
|
4511
|
-
.ck .ck-widget .ck-widget__type-around__button svg * {
|
4512
|
-
stroke-dasharray: 10;
|
4513
|
-
stroke-dashoffset: 0;
|
4514
|
-
|
4515
|
-
fill: none;
|
4516
|
-
stroke: var(--ck-color-widget-type-around-button-icon);
|
4517
|
-
stroke-width: 1.5px;
|
4518
|
-
stroke-linecap: round;
|
4519
|
-
stroke-linejoin: round;
|
4520
|
-
}
|
4521
|
-
.ck .ck-widget .ck-widget__type-around__button svg line {
|
4522
|
-
stroke-dasharray: 7;
|
4523
|
-
}
|
4524
|
-
.ck .ck-widget .ck-widget__type-around__button:hover {
|
4525
|
-
/*
|
4526
|
-
* Display the "sonar" around the button when hovered.
|
4527
|
-
*/
|
4528
|
-
animation: ck-widget-type-around-button-sonar 1s ease infinite;
|
4529
|
-
|
4530
|
-
/*
|
4531
|
-
* Animate active button's icon.
|
4532
|
-
*/
|
4533
|
-
}
|
4534
|
-
.ck .ck-widget .ck-widget__type-around__button:hover svg polyline {
|
4535
|
-
animation: ck-widget-type-around-arrow-dash 2s linear;
|
4536
|
-
}
|
4537
|
-
.ck .ck-widget .ck-widget__type-around__button:hover svg line {
|
4538
|
-
animation: ck-widget-type-around-arrow-tip-dash 2s linear;
|
4539
|
-
}
|
4540
|
-
/*
|
4541
|
-
* Show type around buttons when the widget gets selected or being hovered.
|
4542
|
-
*/
|
4543
|
-
.ck .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button, .ck .ck-widget:hover > .ck-widget__type-around > .ck-widget__type-around__button {
|
4544
|
-
opacity: 1;
|
4545
|
-
pointer-events: auto;
|
4546
|
-
}
|
4547
|
-
/*
|
4548
|
-
* Styles for the buttons when the widget is NOT selected (but the buttons are visible
|
4549
|
-
* and still can be hovered).
|
4550
|
-
*/
|
4551
|
-
.ck .ck-widget:not(.ck-widget_selected) > .ck-widget__type-around > .ck-widget__type-around__button {
|
4552
|
-
background: var(--ck-color-widget-type-around-button-hover);
|
4553
|
-
}
|
4554
|
-
/*
|
4555
|
-
* Styles for the buttons when:
|
4556
|
-
* - the widget is selected,
|
4557
|
-
* - or the button is being hovered (regardless of the widget state).
|
4558
|
-
*/
|
4559
|
-
.ck .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button,
|
4560
|
-
.ck .ck-widget > .ck-widget__type-around > .ck-widget__type-around__button:hover {
|
4561
|
-
background: var(--ck-color-widget-type-around-button-active);
|
4562
|
-
}
|
4563
|
-
.ck .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button::after, .ck .ck-widget > .ck-widget__type-around > .ck-widget__type-around__button:hover::after {
|
4564
|
-
width: calc(var(--ck-widget-type-around-button-size) - 2px);
|
4565
|
-
height: calc(var(--ck-widget-type-around-button-size) - 2px);
|
4566
|
-
border-radius: 100px;
|
4567
|
-
background: linear-gradient(135deg, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,.3) 100%);
|
4568
|
-
}
|
4569
|
-
/*
|
4570
|
-
* Styles for the "before" button when the widget has a selection handle. Because some space
|
4571
|
-
* is consumed by the handle, the button must be moved slightly to the right to let it breathe.
|
4572
|
-
*/
|
4573
|
-
.ck .ck-widget.ck-widget_with-selection-handle > .ck-widget__type-around > .ck-widget__type-around__button_before {
|
4574
|
-
margin-left: 20px;
|
4575
|
-
}
|
4576
|
-
/*
|
4577
|
-
* Styles for the horizontal "fake caret" which is displayed when the user navigates using the keyboard.
|
4578
|
-
*/
|
4579
|
-
.ck .ck-widget .ck-widget__type-around__fake-caret {
|
4580
|
-
pointer-events: none;
|
4581
|
-
height: 1px;
|
4582
|
-
animation: ck-widget-type-around-fake-caret-pulse linear 1s infinite normal forwards;
|
4583
|
-
|
4584
|
-
/*
|
4585
|
-
* The semi-transparent-outline+background combo improves the contrast
|
4586
|
-
* when the background underneath the fake caret is dark.
|
4587
|
-
*/
|
4588
|
-
outline: solid 1px hsla(0, 0%, 100%, .5);
|
4589
|
-
background: var(--ck-color-base-text);
|
4590
|
-
}
|
4591
|
-
/*
|
4592
|
-
* Styles of the widget when the "fake caret" is blinking (e.g. upon keyboard navigation).
|
4593
|
-
* Despite the widget being physically selected in the model, its outline should disappear.
|
4594
|
-
*/
|
4595
|
-
.ck .ck-widget.ck-widget_selected.ck-widget_type-around_show-fake-caret_before,
|
4596
|
-
.ck .ck-widget.ck-widget_selected.ck-widget_type-around_show-fake-caret_after {
|
4597
|
-
outline-color: transparent;
|
4598
|
-
}
|
4599
|
-
/*
|
4600
|
-
* When the "fake caret" is visible we simulate that the widget is not selected
|
4601
|
-
* (despite being physically selected), so the outline color should be for the
|
4602
|
-
* unselected widget.
|
4603
|
-
*/
|
4604
|
-
.ck .ck-widget.ck-widget_type-around_show-fake-caret_before.ck-widget_selected:hover, .ck .ck-widget.ck-widget_type-around_show-fake-caret_after.ck-widget_selected:hover {
|
4605
|
-
outline-color: var(--ck-color-widget-hover-border);
|
4606
|
-
}
|
4607
|
-
/*
|
4608
|
-
* Styles of the type around buttons when the "fake caret" is blinking (e.g. upon keyboard navigation).
|
4609
|
-
* In this state, the type around buttons would collide with the fake carets so they should disappear.
|
4610
|
-
*/
|
4611
|
-
.ck .ck-widget.ck-widget_type-around_show-fake-caret_before > .ck-widget__type-around > .ck-widget__type-around__button, .ck .ck-widget.ck-widget_type-around_show-fake-caret_after > .ck-widget__type-around > .ck-widget__type-around__button {
|
4612
|
-
opacity: 0;
|
4613
|
-
pointer-events: none;
|
4614
|
-
}
|
4615
|
-
/*
|
4616
|
-
* Fake horizontal caret integration with the selection handle. When the caret is visible, simply
|
4617
|
-
* hide the handle because it intersects with the caret (and does not make much sense anyway).
|
4618
|
-
*/
|
4619
|
-
.ck .ck-widget.ck-widget_type-around_show-fake-caret_before.ck-widget_with-selection-handle.ck-widget_selected > .ck-widget__selection-handle, .ck .ck-widget.ck-widget_type-around_show-fake-caret_after.ck-widget_with-selection-handle.ck-widget_selected > .ck-widget__selection-handle, .ck .ck-widget.ck-widget_type-around_show-fake-caret_before.ck-widget_with-selection-handle.ck-widget_selected:hover > .ck-widget__selection-handle, .ck .ck-widget.ck-widget_type-around_show-fake-caret_after.ck-widget_with-selection-handle.ck-widget_selected:hover > .ck-widget__selection-handle {
|
4620
|
-
opacity: 0
|
4621
|
-
}
|
4622
|
-
/*
|
4623
|
-
* Fake horizontal caret integration with the resize UI. When the caret is visible, simply
|
4624
|
-
* hide the resize UI because it creates too much noise. It can be visible when the user
|
4625
|
-
* hovers the widget, though.
|
4626
|
-
*/
|
4627
|
-
.ck .ck-widget.ck-widget_type-around_show-fake-caret_before.ck-widget_selected.ck-widget_with-resizer > .ck-widget__resizer, .ck .ck-widget.ck-widget_type-around_show-fake-caret_after.ck-widget_selected.ck-widget_with-resizer > .ck-widget__resizer {
|
4628
|
-
opacity: 0
|
4629
|
-
}
|
4630
|
-
/*
|
4631
|
-
* Styles for the "before" button when the widget has a selection handle in an RTL environment.
|
4632
|
-
* The selection handler is aligned to the right side of the widget so there is no need to create
|
4633
|
-
* additional space for it next to the "before" button.
|
4634
|
-
*/
|
4635
|
-
.ck[dir="rtl"] .ck-widget.ck-widget_with-selection-handle .ck-widget__type-around > .ck-widget__type-around__button_before {
|
4636
|
-
margin-left: 0;
|
4637
|
-
margin-right: 20px;
|
4638
|
-
}
|
4639
|
-
/*
|
4640
|
-
* Hide type around buttons when the widget is selected as a child of a selected
|
4641
|
-
* nested editable (e.g. mulit-cell table selection).
|
4642
|
-
*
|
4643
|
-
* See https://github.com/ckeditor/ckeditor5/issues/7263.
|
4644
|
-
*/
|
4645
|
-
.ck-editor__nested-editable.ck-editor__editable_selected .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button, .ck-editor__nested-editable.ck-editor__editable_selected .ck-widget:hover > .ck-widget__type-around > .ck-widget__type-around__button {
|
4646
|
-
opacity: 0;
|
4647
|
-
pointer-events: none;
|
4648
|
-
}
|
4649
|
-
/*
|
4650
|
-
* Styles for the buttons when the widget is selected but the user clicked outside of the editor (blurred the editor).
|
4651
|
-
*/
|
4652
|
-
.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button:not(:hover) {
|
4653
|
-
background: var(--ck-color-widget-type-around-button-blurred-editable);
|
4654
|
-
}
|
4655
|
-
.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button:not(:hover) svg * {
|
4656
|
-
stroke: hsl(0,0%,60%);
|
4657
|
-
}
|
4658
|
-
@keyframes ck-widget-type-around-arrow-dash {
|
4659
|
-
0% {
|
4660
|
-
stroke-dashoffset: 10;
|
4661
|
-
}
|
4662
|
-
20%, 100% {
|
4663
|
-
stroke-dashoffset: 0;
|
4664
|
-
}
|
4665
|
-
}
|
4666
|
-
@keyframes ck-widget-type-around-arrow-tip-dash {
|
4667
|
-
0%, 20% {
|
4668
|
-
stroke-dashoffset: 7;
|
4669
|
-
}
|
4670
|
-
40%, 100% {
|
4671
|
-
stroke-dashoffset: 0;
|
4672
|
-
}
|
4673
|
-
}
|
4674
|
-
@keyframes ck-widget-type-around-button-sonar {
|
4675
|
-
0% {
|
4676
|
-
box-shadow: 0 0 0 0 hsla(var(--ck-color-focus-border-coordinates), var(--ck-color-widget-type-around-button-radar-start-alpha));
|
4677
|
-
}
|
4678
|
-
50% {
|
4679
|
-
box-shadow: 0 0 0 5px hsla(var(--ck-color-focus-border-coordinates), var(--ck-color-widget-type-around-button-radar-end-alpha));
|
4680
|
-
}
|
4681
|
-
100% {
|
4682
|
-
box-shadow: 0 0 0 5px hsla(var(--ck-color-focus-border-coordinates), var(--ck-color-widget-type-around-button-radar-start-alpha));
|
4683
|
-
}
|
4684
|
-
}
|
4685
|
-
@keyframes ck-widget-type-around-fake-caret-pulse {
|
4686
|
-
0% {
|
4687
|
-
opacity: 1;
|
4688
|
-
}
|
4689
|
-
49% {
|
4690
|
-
opacity: 1;
|
4691
|
-
}
|
4692
|
-
50% {
|
4693
|
-
opacity: 0;
|
4694
|
-
}
|
4695
|
-
99% {
|
4696
|
-
opacity: 0;
|
4697
|
-
}
|
4698
|
-
100% {
|
4699
|
-
opacity: 1;
|
4700
|
-
}
|
4701
|
-
}
|
4702
|
-
|
4703
|
-
/*# sourceMappingURL=index.css.map */
|