@ckeditor/ckeditor5-real-time-collaboration 49.0.0-alpha.5 → 49.0.0-alpha.7

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.
Files changed (77) hide show
  1. package/dist/index-editor.css +79 -56
  2. package/dist/index.css +79 -56
  3. package/dist/index.js +6 -6
  4. package/dist/translations/af.umd.js +1 -1
  5. package/dist/translations/ar.umd.js +1 -1
  6. package/dist/translations/ast.umd.js +1 -1
  7. package/dist/translations/az.umd.js +1 -1
  8. package/dist/translations/be.umd.js +1 -1
  9. package/dist/translations/bg.umd.js +1 -1
  10. package/dist/translations/bn.umd.js +1 -1
  11. package/dist/translations/bs.umd.js +1 -1
  12. package/dist/translations/ca.umd.js +1 -1
  13. package/dist/translations/cs.umd.js +1 -1
  14. package/dist/translations/da.umd.js +1 -1
  15. package/dist/translations/de-ch.umd.js +1 -1
  16. package/dist/translations/de.umd.js +1 -1
  17. package/dist/translations/el.umd.js +1 -1
  18. package/dist/translations/en-au.umd.js +1 -1
  19. package/dist/translations/en-gb.umd.js +1 -1
  20. package/dist/translations/en.umd.js +1 -1
  21. package/dist/translations/eo.umd.js +1 -1
  22. package/dist/translations/es-co.umd.js +1 -1
  23. package/dist/translations/es.umd.js +1 -1
  24. package/dist/translations/et.umd.js +1 -1
  25. package/dist/translations/eu.umd.js +1 -1
  26. package/dist/translations/fa.umd.js +1 -1
  27. package/dist/translations/fi.umd.js +1 -1
  28. package/dist/translations/fr.umd.js +1 -1
  29. package/dist/translations/gl.umd.js +1 -1
  30. package/dist/translations/gu.umd.js +1 -1
  31. package/dist/translations/he.umd.js +1 -1
  32. package/dist/translations/hi.umd.js +1 -1
  33. package/dist/translations/hr.umd.js +1 -1
  34. package/dist/translations/hu.umd.js +1 -1
  35. package/dist/translations/hy.umd.js +1 -1
  36. package/dist/translations/id.umd.js +1 -1
  37. package/dist/translations/it.umd.js +1 -1
  38. package/dist/translations/ja.umd.js +1 -1
  39. package/dist/translations/jv.umd.js +1 -1
  40. package/dist/translations/kk.umd.js +1 -1
  41. package/dist/translations/km.umd.js +1 -1
  42. package/dist/translations/kn.umd.js +1 -1
  43. package/dist/translations/ko.umd.js +1 -1
  44. package/dist/translations/ku.umd.js +1 -1
  45. package/dist/translations/lt.umd.js +1 -1
  46. package/dist/translations/lv.umd.js +1 -1
  47. package/dist/translations/ms.umd.js +1 -1
  48. package/dist/translations/nb.umd.js +1 -1
  49. package/dist/translations/ne.umd.js +1 -1
  50. package/dist/translations/nl.umd.js +1 -1
  51. package/dist/translations/no.umd.js +1 -1
  52. package/dist/translations/oc.umd.js +1 -1
  53. package/dist/translations/pl.umd.js +1 -1
  54. package/dist/translations/pt-br.umd.js +1 -1
  55. package/dist/translations/pt.umd.js +1 -1
  56. package/dist/translations/ro.umd.js +1 -1
  57. package/dist/translations/ru.umd.js +1 -1
  58. package/dist/translations/si.umd.js +1 -1
  59. package/dist/translations/sk.umd.js +1 -1
  60. package/dist/translations/sl.umd.js +1 -1
  61. package/dist/translations/sq.umd.js +1 -1
  62. package/dist/translations/sr-latn.umd.js +1 -1
  63. package/dist/translations/sr.umd.js +1 -1
  64. package/dist/translations/sv.umd.js +1 -1
  65. package/dist/translations/th.umd.js +1 -1
  66. package/dist/translations/ti.umd.js +1 -1
  67. package/dist/translations/tk.umd.js +1 -1
  68. package/dist/translations/tr.umd.js +1 -1
  69. package/dist/translations/tt.umd.js +1 -1
  70. package/dist/translations/ug.umd.js +1 -1
  71. package/dist/translations/uk.umd.js +1 -1
  72. package/dist/translations/ur.umd.js +1 -1
  73. package/dist/translations/uz.umd.js +1 -1
  74. package/dist/translations/vi.umd.js +1 -1
  75. package/dist/translations/zh-cn.umd.js +1 -1
  76. package/dist/translations/zh.umd.js +1 -1
  77. package/package.json +12 -12
package/dist/index-editor.css CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
  .ck .ck-user__marker-tooltip {
18
18
  font-family: var(--ck-font-face, var(--ck-font-family));
19
- font-size: var(--ck-font-size-base);
19
+ font-size: var(--ck-font-size-normal, var(--ck-font-size-base));
20
20
  line-height: 1;
21
21
  font-style: initial;
22
22
  font-weight: initial;
@@ -88,14 +88,22 @@
88
88
  }
89
89
 
90
90
  :root, :host {
91
- --ck-color-presence-list-dropdown-background: #fff;
92
- --ck-color-presence-list-dropdown-arrow-border: #ebebeb;
91
+ --ck-presence-list-dropdown-background-color: var(--ck-color-surface-container);
92
+ --ck-presence-list-dropdown-border-color: var(--ck-color-border-container);
93
+ --ck-presence-list-hover-background-color: var(--ck-color-interactive-hover-surface);
93
94
  --ck-presence-list-dropdown-list-max-width: 250px;
94
- --ck-presence-list-dropdown-list-min-width: 180px;
95
+ --ck-presence-list-dropdown-list-min-width: 196px;
95
96
  --ck-presence-list-users-tooltip-max-width: 120px;
96
- --ck-presence-list-users-tooltip-min-width: 25px;
97
+ --ck-presence-list-padding: var(--ck-spacing-padding-compact) var(--ck-spacing-padding);
98
+ --ck-presence-list-border-radius: var(--ck-border-radius-surface);
99
+ --ck-presence-list-list-item-padding: var(--ck-spacing-padding-compact);
100
+ --ck-presence-list-marker-length: calc(var(--ck-font-size-base) * 1.25);
101
+ --ck-presence-list-marker-thickness: calc(var(--ck-font-size-base) * .25);
102
+ --ck-presence-list-marker-gap: var(--ck-spacing-gap-compact);
103
+ --ck-presence-list-marker-border-radius: var(--ck-radius-md);
97
104
  --ck-presence-list-dropdown-avatar-size: 32px;
98
- --ck-presence-list-dropdown-list-item-padding: var(--ck-spacing-padding-compact);
105
+ --ck-presence-list-dropdown-list-item-padding: var(--ck-spacing-padding-compact) var(--ck-spacing-padding);
106
+ --ck-presence-list-dropdown-list-item-gap: var(--ck-spacing-gap);
99
107
  --ck-presence-list-dropdown-list-item-border-radius: var(--ck-border-radius-control);
100
108
  --ck-presence-list-dropdown-user-name-font-size: var(--ck-font-size-md);
101
109
  --ck-presence-list-focus-border-radius: var(--ck-border-radius-control);
@@ -104,7 +112,7 @@
104
112
  .ck.ck-presence-list {
105
113
  margin-right: var(--ck-spacing-standard, var(--ck-spacing-base));
106
114
  transition: margin-right var(--ck-transition-duration-control) ease-in-out;
107
- font-size: var(--ck-font-size-base);
115
+ font-size: var(--ck-font-size-normal, var(--ck-font-size-base));
108
116
  align-items: center;
109
117
  display: inline-flex;
110
118
 
@@ -137,18 +145,22 @@
137
145
  .ck.ck-presence-list__list-item {
138
146
  font: inherit;
139
147
  color: inherit;
140
- margin-left: var(--ck-spacing-medium, var(--ck-spacing-base));
148
+ padding: var(--ck-presence-list-list-item-padding);
149
+ border-radius: var(--ck-presence-list-focus-border-radius);
150
+ margin-left: var(--ck-spacing-gap-tight);
141
151
  background: none;
142
- border: 1px solid #0000;
152
+ border: 0;
143
153
  outline: none;
144
- padding: 0;
145
154
  position: relative;
146
155
 
147
156
  &:focus {
148
- border-radius: var(--ck-presence-list-focus-border-radius);
149
- border: var(--ck-interactive-focus-ring);
150
- box-shadow: var(--ck-interactive-focus-shadow), 0 0;
151
- outline: none;
157
+ outline: var(--ck-interactive-focus-ring);
158
+ outline-offset: -1px;
159
+ box-shadow: var(--ck-focus-outer-shadow, var(--ck-interactive-focus-shadow)), 0 0;
160
+ }
161
+
162
+ & .ck-user {
163
+ margin: 0;
152
164
  }
153
165
 
154
166
  & .ck-label {
@@ -174,10 +186,10 @@
174
186
  }
175
187
 
176
188
  .ck.ck-presence-list__marker {
177
- border-radius: 4px;
178
- width: 100%;
179
- height: 3px;
180
- margin-top: 5px;
189
+ width: var(--ck-presence-list-marker-length);
190
+ height: var(--ck-presence-list-marker-thickness);
191
+ margin: var(--ck-presence-list-marker-gap) auto 0;
192
+ border-radius: var(--ck-presence-list-marker-border-radius);
181
193
  display: block;
182
194
  position: relative;
183
195
  }
@@ -188,20 +200,29 @@
188
200
 
189
201
  .ck.ck-presence-list--collapsed {
190
202
  & .ck-presence-list__list {
203
+ padding: var(--ck-presence-list-padding);
204
+ border-radius: var(--ck-presence-list-border-radius);
205
+ cursor: pointer;
191
206
  min-width: calc(var(--ck-user-avatar-size) * 2);
192
- border: 1px solid #0000;
193
- padding-left: 1px;
207
+
208
+ &:after {
209
+ height: auto;
210
+ top: 0;
211
+ }
194
212
 
195
213
  & * {
196
214
  cursor: pointer;
197
215
  transition: all var(--ck-transition-duration-surface) ease-in-out;
198
216
  }
199
217
 
218
+ &:hover {
219
+ background: var(--ck-presence-list-hover-background-color);
220
+ }
221
+
200
222
  &:focus {
201
- border-radius: var(--ck-presence-list-focus-border-radius);
202
- border: var(--ck-interactive-focus-ring);
203
- box-shadow: var(--ck-interactive-focus-shadow), 0 0;
204
- outline: none;
223
+ outline: var(--ck-interactive-focus-ring);
224
+ outline-offset: -1px;
225
+ box-shadow: var(--ck-focus-outer-shadow, var(--ck-interactive-focus-shadow)), 0 0;
205
226
  }
206
227
  }
207
228
 
@@ -221,11 +242,9 @@
221
242
  & .ck-user {
222
243
  --ck-presence-list-avatar-border-color: var(--ck-color-base-foreground);
223
244
  border: 2px solid var(--ck-presence-list-avatar-border-color);
224
- margin-left: 0;
225
- margin-right: 0;
226
245
  }
227
246
 
228
- &.ck-presence-list__users-counter {
247
+ & .ck-presence-list__users-counter {
229
248
  margin-left: 0;
230
249
  margin-right: 0;
231
250
  }
@@ -233,25 +252,24 @@
233
252
  }
234
253
 
235
254
  .ck.ck-presence-list__balloon {
236
- --ck-balloon-panel-border-color: var(--ck-color-presence-list-dropdown-arrow-border);
237
- --ck-balloon-panel-background-color: var(--ck-color-presence-list-dropdown-background);
238
- background-color: var(--ck-color-presence-list-dropdown-background);
255
+ --ck-balloon-panel-border-color: var(--ck-color-presence-list-dropdown-arrow-border, var(--ck-presence-list-dropdown-border-color));
256
+ --ck-balloon-panel-border: var(--ck-border-width-surface) solid var(--ck-balloon-panel-border-color);
257
+ --ck-balloon-panel-background-color: var(--ck-color-presence-list-dropdown-background, var(--ck-presence-list-dropdown-background-color));
258
+ background-color: var(--ck-color-presence-list-dropdown-background, var(--ck-presence-list-dropdown-background-color));
239
259
  opacity: 1;
240
260
  animation: var(--ck-duration-slow) fadeIn ease-in-out;
241
- border: 0;
242
261
 
243
262
  @media (prefers-reduced-motion: reduce) {
244
263
  animation: none;
245
264
  }
246
265
 
247
266
  & ul {
248
- background-color: var(--ck-color-presence-list-dropdown-background);
267
+ background-color: var(--ck-color-presence-list-dropdown-background, var(--ck-presence-list-dropdown-background-color));
249
268
  }
250
269
 
251
270
  & .ck.ck-presence-list__dropdown-list-wrapper {
252
271
  min-width: var(--ck-presence-list-dropdown-list-min-width);
253
272
  max-width: var(--ck-presence-list-dropdown-list-max-width);
254
- border-radius: var(--ck-border-radius-control);
255
273
 
256
274
  &.ck-presence-list__dropdown-list-wrapper_scrollable {
257
275
  max-height: 80vh;
@@ -262,60 +280,65 @@
262
280
  & .ck.ck-presence-list__dropdown-list-item {
263
281
  font: inherit;
264
282
  color: inherit;
283
+ align-items: center;
284
+ gap: var(--ck-presence-list-dropdown-list-item-gap);
285
+ margin: var(--ck-list-item-outer-padding);
265
286
  padding: var(--ck-presence-list-dropdown-list-item-padding);
266
287
  border-radius: var(--ck-presence-list-dropdown-list-item-border-radius);
267
288
  --ck-user-avatar-size: var(--ck-presence-list-dropdown-avatar-size);
268
289
  background: none;
269
290
  border: 0;
270
291
  outline: none;
271
- align-items: center;
292
+ padding-inline-start: var(--ck-spacing-padding-snug);
272
293
  display: flex;
273
294
  position: relative;
274
295
 
296
+ & .ck-user {
297
+ margin: 0;
298
+ }
299
+
300
+ &:hover {
301
+ background: var(--ck-presence-list-hover-background-color);
302
+ }
303
+
275
304
  &:focus {
276
305
  z-index: 1;
277
306
  outline: var(--ck-interactive-focus-ring);
278
307
  outline-offset: -1px;
279
- box-shadow: var(--ck-interactive-focus-shadow), 0 0;
308
+ box-shadow: var(--ck-focus-outer-shadow, var(--ck-interactive-focus-shadow)), 0 0;
280
309
  position: relative;
281
310
  }
282
-
283
- &:first-of-type {
284
- & .ck-presence-list__marker {
285
- border-top-left-radius: var(--ck-border-radius-control);
286
- }
287
- }
288
-
289
- &:last-of-type {
290
- & .ck-presence-list__marker {
291
- border-bottom-left-radius: var(--ck-border-radius-control);
292
- }
293
- }
294
311
  }
295
312
 
296
313
  & .ck.ck-presence-list__dropdown-list {
314
+ &:before {
315
+ content: "";
316
+ inset: calc(-1 * (3px + var(--ck-border-width-surface))) 0;
317
+ z-index: -1;
318
+ position: absolute;
319
+ }
320
+
297
321
  & .ck-user__full-name {
298
322
  white-space: nowrap;
299
323
  text-overflow: ellipsis;
300
324
  color: var(--ck-color-text);
301
325
  font-size: var(--ck-presence-list-dropdown-user-name-font-size);
302
- margin-left: var(--ck-spacing-standard, var(--ck-spacing-base));
303
326
  overflow: hidden;
304
327
  }
305
328
 
306
329
  & .ck.ck-presence-list__marker {
307
- width: 3px;
308
- height: 100%;
330
+ width: var(--ck-presence-list-marker-thickness);
331
+ height: var(--ck-presence-list-marker-length);
332
+ flex-shrink: 0;
333
+ order: -1;
309
334
  margin: 0;
310
- position: absolute;
311
- left: 0;
312
335
  }
313
336
  }
314
337
  }
315
338
 
316
339
  .ck.ck-presence-list__users-counter {
317
- --ck-presence-list-counter-border-color: var(--ck-user-avatar-background-color);
318
- --ck-presence-list-counter-background-color: var(--ck-user-avatar-text-color);
340
+ --ck-presence-list-counter-border-color: var(--ck-user-avatar-background, var(--ck-user-avatar-background-color));
341
+ --ck-presence-list-counter-background-color: var(--ck-user-avatar-color, var(--ck-user-avatar-text-color));
319
342
  border: 2px solid var(--ck-presence-list-counter-border-color);
320
343
  background-color: var(--ck-presence-list-counter-background-color);
321
344
  box-sizing: border-box;
@@ -324,14 +347,14 @@
324
347
  border-radius: 50%;
325
348
  justify-content: center;
326
349
  align-items: center;
327
- margin: 4px 2px 2px;
350
+ margin: 2px;
328
351
  line-height: 100%;
329
352
  display: flex;
330
353
  position: relative;
331
354
  }
332
355
 
333
356
  .ck.ck-presence-list__users-counter__text {
334
- --ck-presence-list-counter-text-color: var(--ck-user-avatar-background-color);
357
+ --ck-presence-list-counter-text-color: var(--ck-user-avatar-background, var(--ck-user-avatar-background-color));
335
358
  color: var(--ck-presence-list-counter-text-color);
336
359
  cursor: default;
337
360
  -webkit-user-select: none;
package/dist/index.css CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
  .ck .ck-user__marker-tooltip {
18
18
  font-family: var(--ck-font-face, var(--ck-font-family));
19
- font-size: var(--ck-font-size-base);
19
+ font-size: var(--ck-font-size-normal, var(--ck-font-size-base));
20
20
  line-height: 1;
21
21
  font-style: initial;
22
22
  font-weight: initial;
@@ -88,14 +88,22 @@
88
88
  }
89
89
 
90
90
  :root, :host {
91
- --ck-color-presence-list-dropdown-background: #fff;
92
- --ck-color-presence-list-dropdown-arrow-border: #ebebeb;
91
+ --ck-presence-list-dropdown-background-color: var(--ck-color-surface-container);
92
+ --ck-presence-list-dropdown-border-color: var(--ck-color-border-container);
93
+ --ck-presence-list-hover-background-color: var(--ck-color-interactive-hover-surface);
93
94
  --ck-presence-list-dropdown-list-max-width: 250px;
94
- --ck-presence-list-dropdown-list-min-width: 180px;
95
+ --ck-presence-list-dropdown-list-min-width: 196px;
95
96
  --ck-presence-list-users-tooltip-max-width: 120px;
96
- --ck-presence-list-users-tooltip-min-width: 25px;
97
+ --ck-presence-list-padding: var(--ck-spacing-padding-compact) var(--ck-spacing-padding);
98
+ --ck-presence-list-border-radius: var(--ck-border-radius-surface);
99
+ --ck-presence-list-list-item-padding: var(--ck-spacing-padding-compact);
100
+ --ck-presence-list-marker-length: calc(var(--ck-font-size-base) * 1.25);
101
+ --ck-presence-list-marker-thickness: calc(var(--ck-font-size-base) * .25);
102
+ --ck-presence-list-marker-gap: var(--ck-spacing-gap-compact);
103
+ --ck-presence-list-marker-border-radius: var(--ck-radius-md);
97
104
  --ck-presence-list-dropdown-avatar-size: 32px;
98
- --ck-presence-list-dropdown-list-item-padding: var(--ck-spacing-padding-compact);
105
+ --ck-presence-list-dropdown-list-item-padding: var(--ck-spacing-padding-compact) var(--ck-spacing-padding);
106
+ --ck-presence-list-dropdown-list-item-gap: var(--ck-spacing-gap);
99
107
  --ck-presence-list-dropdown-list-item-border-radius: var(--ck-border-radius-control);
100
108
  --ck-presence-list-dropdown-user-name-font-size: var(--ck-font-size-md);
101
109
  --ck-presence-list-focus-border-radius: var(--ck-border-radius-control);
@@ -104,7 +112,7 @@
104
112
  .ck.ck-presence-list {
105
113
  margin-right: var(--ck-spacing-standard, var(--ck-spacing-base));
106
114
  transition: margin-right var(--ck-transition-duration-control) ease-in-out;
107
- font-size: var(--ck-font-size-base);
115
+ font-size: var(--ck-font-size-normal, var(--ck-font-size-base));
108
116
  align-items: center;
109
117
  display: inline-flex;
110
118
 
@@ -137,18 +145,22 @@
137
145
  .ck.ck-presence-list__list-item {
138
146
  font: inherit;
139
147
  color: inherit;
140
- margin-left: var(--ck-spacing-medium, var(--ck-spacing-base));
148
+ padding: var(--ck-presence-list-list-item-padding);
149
+ border-radius: var(--ck-presence-list-focus-border-radius);
150
+ margin-left: var(--ck-spacing-gap-tight);
141
151
  background: none;
142
- border: 1px solid #0000;
152
+ border: 0;
143
153
  outline: none;
144
- padding: 0;
145
154
  position: relative;
146
155
 
147
156
  &:focus {
148
- border-radius: var(--ck-presence-list-focus-border-radius);
149
- border: var(--ck-interactive-focus-ring);
150
- box-shadow: var(--ck-interactive-focus-shadow), 0 0;
151
- outline: none;
157
+ outline: var(--ck-interactive-focus-ring);
158
+ outline-offset: -1px;
159
+ box-shadow: var(--ck-focus-outer-shadow, var(--ck-interactive-focus-shadow)), 0 0;
160
+ }
161
+
162
+ & .ck-user {
163
+ margin: 0;
152
164
  }
153
165
 
154
166
  & .ck-label {
@@ -174,10 +186,10 @@
174
186
  }
175
187
 
176
188
  .ck.ck-presence-list__marker {
177
- border-radius: 4px;
178
- width: 100%;
179
- height: 3px;
180
- margin-top: 5px;
189
+ width: var(--ck-presence-list-marker-length);
190
+ height: var(--ck-presence-list-marker-thickness);
191
+ margin: var(--ck-presence-list-marker-gap) auto 0;
192
+ border-radius: var(--ck-presence-list-marker-border-radius);
181
193
  display: block;
182
194
  position: relative;
183
195
  }
@@ -188,20 +200,29 @@
188
200
 
189
201
  .ck.ck-presence-list--collapsed {
190
202
  & .ck-presence-list__list {
203
+ padding: var(--ck-presence-list-padding);
204
+ border-radius: var(--ck-presence-list-border-radius);
205
+ cursor: pointer;
191
206
  min-width: calc(var(--ck-user-avatar-size) * 2);
192
- border: 1px solid #0000;
193
- padding-left: 1px;
207
+
208
+ &:after {
209
+ height: auto;
210
+ top: 0;
211
+ }
194
212
 
195
213
  & * {
196
214
  cursor: pointer;
197
215
  transition: all var(--ck-transition-duration-surface) ease-in-out;
198
216
  }
199
217
 
218
+ &:hover {
219
+ background: var(--ck-presence-list-hover-background-color);
220
+ }
221
+
200
222
  &:focus {
201
- border-radius: var(--ck-presence-list-focus-border-radius);
202
- border: var(--ck-interactive-focus-ring);
203
- box-shadow: var(--ck-interactive-focus-shadow), 0 0;
204
- outline: none;
223
+ outline: var(--ck-interactive-focus-ring);
224
+ outline-offset: -1px;
225
+ box-shadow: var(--ck-focus-outer-shadow, var(--ck-interactive-focus-shadow)), 0 0;
205
226
  }
206
227
  }
207
228
 
@@ -221,11 +242,9 @@
221
242
  & .ck-user {
222
243
  --ck-presence-list-avatar-border-color: var(--ck-color-base-foreground);
223
244
  border: 2px solid var(--ck-presence-list-avatar-border-color);
224
- margin-left: 0;
225
- margin-right: 0;
226
245
  }
227
246
 
228
- &.ck-presence-list__users-counter {
247
+ & .ck-presence-list__users-counter {
229
248
  margin-left: 0;
230
249
  margin-right: 0;
231
250
  }
@@ -233,25 +252,24 @@
233
252
  }
234
253
 
235
254
  .ck.ck-presence-list__balloon {
236
- --ck-balloon-panel-border-color: var(--ck-color-presence-list-dropdown-arrow-border);
237
- --ck-balloon-panel-background-color: var(--ck-color-presence-list-dropdown-background);
238
- background-color: var(--ck-color-presence-list-dropdown-background);
255
+ --ck-balloon-panel-border-color: var(--ck-color-presence-list-dropdown-arrow-border, var(--ck-presence-list-dropdown-border-color));
256
+ --ck-balloon-panel-border: var(--ck-border-width-surface) solid var(--ck-balloon-panel-border-color);
257
+ --ck-balloon-panel-background-color: var(--ck-color-presence-list-dropdown-background, var(--ck-presence-list-dropdown-background-color));
258
+ background-color: var(--ck-color-presence-list-dropdown-background, var(--ck-presence-list-dropdown-background-color));
239
259
  opacity: 1;
240
260
  animation: var(--ck-duration-slow) fadeIn ease-in-out;
241
- border: 0;
242
261
 
243
262
  @media (prefers-reduced-motion: reduce) {
244
263
  animation: none;
245
264
  }
246
265
 
247
266
  & ul {
248
- background-color: var(--ck-color-presence-list-dropdown-background);
267
+ background-color: var(--ck-color-presence-list-dropdown-background, var(--ck-presence-list-dropdown-background-color));
249
268
  }
250
269
 
251
270
  & .ck.ck-presence-list__dropdown-list-wrapper {
252
271
  min-width: var(--ck-presence-list-dropdown-list-min-width);
253
272
  max-width: var(--ck-presence-list-dropdown-list-max-width);
254
- border-radius: var(--ck-border-radius-control);
255
273
 
256
274
  &.ck-presence-list__dropdown-list-wrapper_scrollable {
257
275
  max-height: 80vh;
@@ -262,60 +280,65 @@
262
280
  & .ck.ck-presence-list__dropdown-list-item {
263
281
  font: inherit;
264
282
  color: inherit;
283
+ align-items: center;
284
+ gap: var(--ck-presence-list-dropdown-list-item-gap);
285
+ margin: var(--ck-list-item-outer-padding);
265
286
  padding: var(--ck-presence-list-dropdown-list-item-padding);
266
287
  border-radius: var(--ck-presence-list-dropdown-list-item-border-radius);
267
288
  --ck-user-avatar-size: var(--ck-presence-list-dropdown-avatar-size);
268
289
  background: none;
269
290
  border: 0;
270
291
  outline: none;
271
- align-items: center;
292
+ padding-inline-start: var(--ck-spacing-padding-snug);
272
293
  display: flex;
273
294
  position: relative;
274
295
 
296
+ & .ck-user {
297
+ margin: 0;
298
+ }
299
+
300
+ &:hover {
301
+ background: var(--ck-presence-list-hover-background-color);
302
+ }
303
+
275
304
  &:focus {
276
305
  z-index: 1;
277
306
  outline: var(--ck-interactive-focus-ring);
278
307
  outline-offset: -1px;
279
- box-shadow: var(--ck-interactive-focus-shadow), 0 0;
308
+ box-shadow: var(--ck-focus-outer-shadow, var(--ck-interactive-focus-shadow)), 0 0;
280
309
  position: relative;
281
310
  }
282
-
283
- &:first-of-type {
284
- & .ck-presence-list__marker {
285
- border-top-left-radius: var(--ck-border-radius-control);
286
- }
287
- }
288
-
289
- &:last-of-type {
290
- & .ck-presence-list__marker {
291
- border-bottom-left-radius: var(--ck-border-radius-control);
292
- }
293
- }
294
311
  }
295
312
 
296
313
  & .ck.ck-presence-list__dropdown-list {
314
+ &:before {
315
+ content: "";
316
+ inset: calc(-1 * (3px + var(--ck-border-width-surface))) 0;
317
+ z-index: -1;
318
+ position: absolute;
319
+ }
320
+
297
321
  & .ck-user__full-name {
298
322
  white-space: nowrap;
299
323
  text-overflow: ellipsis;
300
324
  color: var(--ck-color-text);
301
325
  font-size: var(--ck-presence-list-dropdown-user-name-font-size);
302
- margin-left: var(--ck-spacing-standard, var(--ck-spacing-base));
303
326
  overflow: hidden;
304
327
  }
305
328
 
306
329
  & .ck.ck-presence-list__marker {
307
- width: 3px;
308
- height: 100%;
330
+ width: var(--ck-presence-list-marker-thickness);
331
+ height: var(--ck-presence-list-marker-length);
332
+ flex-shrink: 0;
333
+ order: -1;
309
334
  margin: 0;
310
- position: absolute;
311
- left: 0;
312
335
  }
313
336
  }
314
337
  }
315
338
 
316
339
  .ck.ck-presence-list__users-counter {
317
- --ck-presence-list-counter-border-color: var(--ck-user-avatar-background-color);
318
- --ck-presence-list-counter-background-color: var(--ck-user-avatar-text-color);
340
+ --ck-presence-list-counter-border-color: var(--ck-user-avatar-background, var(--ck-user-avatar-background-color));
341
+ --ck-presence-list-counter-background-color: var(--ck-user-avatar-color, var(--ck-user-avatar-text-color));
319
342
  border: 2px solid var(--ck-presence-list-counter-border-color);
320
343
  background-color: var(--ck-presence-list-counter-background-color);
321
344
  box-sizing: border-box;
@@ -324,14 +347,14 @@
324
347
  border-radius: 50%;
325
348
  justify-content: center;
326
349
  align-items: center;
327
- margin: 4px 2px 2px;
350
+ margin: 2px;
328
351
  line-height: 100%;
329
352
  display: flex;
330
353
  position: relative;
331
354
  }
332
355
 
333
356
  .ck.ck-presence-list__users-counter__text {
334
- --ck-presence-list-counter-text-color: var(--ck-user-avatar-background-color);
357
+ --ck-presence-list-counter-text-color: var(--ck-user-avatar-background, var(--ck-user-avatar-background-color));
335
358
  color: var(--ck-presence-list-counter-text-color);
336
359
  cursor: default;
337
360
  -webkit-user-select: none;