UNPKG

2.52 kBCSSView Raw
1/*
2 * What you're currently looking at is the source code of a legally protected, proprietary software.
3 * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
4 * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
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.ck .ck-user__marker-dot {
11 /* If you are looking for handling dot color, see `usercolors.css` in the `ckeditor5-collaboration-core`. */
12 display: block;
13 position: absolute;
14 left: 50%;
15
16 /* #124 */
17 top: calc( ( var(--ck-user-dot-size) / 2 ) * -1 );
18
19 width: var(--ck-user-dot-size);
20 height: var(--ck-user-dot-size);
21 border-radius: 50%;
22 transform: translate( -50%, -50% );
23 cursor: default;
24}
25
26.ck .ck-user__marker-tooltip {
27 display: none;
28 position: absolute;
29
30 /* It should be one font in case of inheriting (example: headers sans-serif and content serif type). */
31 font-family: Georgia, sans-serif;
32
33 /* It should be px value in case of inheriting (like headers example). */
34 font-size: var(--ck-font-size-base);
35
36 /* In case of inheriting from various components. */
37 line-height: 1;
38 font-style: initial;
39 font-weight: initial;
40
41 left: 0;
42 opacity: 0;
43
44 /* Moving up this element with 100% of its height. */
45 top: -20px;
46
47 padding: var(--ck-spacing-small);
48 color: hsl(0, 0%, 100%);
49 white-space: nowrap;
50 transition: opacity 200ms linear, transform 300ms ease-in-out;
51 z-index: 99999;
52
53 @media (prefers-reduced-motion: reduce) {
54 transition: none;
55 }
56}
57
58.ck .ck-user__marker-line {
59 /* If you are looking for handling line color, see `usercolors.css` in the `ckeditor5-collaboration-core`. */
60 position: absolute;
61 bottom: 0;
62 height: 100%;
63 width: 0;
64}
65
66.ck .ck-user__marker {
67 display: inline;
68 position: relative;
69 cursor: default;
70}
71
72.ck .ck-user__marker.ck-user__marker_hovered {
73 & .ck-user__marker-dot {
74 width: 0;
75 }
76
77 & .ck-user__marker-tooltip {
78 display: block;
79 opacity: 1;
80 animation: fadeInLeft 300ms ease-in-out;
81 }
82}
83
84.ck .ck-placeholder {
85 & .ck-user__marker {
86 display: none;
87 }
88}
89
90@media (prefers-reduced-motion: reduce) {
91 .ck .ck-user__marker {
92 &, & *, &::after {
93 animation: none !important;
94 }
95 }
96}
97
98@keyframes fadeInLeft {
99 from {
100 opacity: 0;
101 transform: translateX( -10px );
102 }
103 to {
104 opacity: 1;
105 transform: translateX( 0 );
106 }
107}