@ckeditor/ckeditor5-real-time-collaboration/theme/presencelist.css

/*
 * What you're currently looking at is the source code of a legally protected, proprietary software.
 * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
 * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
 *
 * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

@import '@ckeditor/ckeditor5-ui/theme/components/tooltip/tooltip.css';

:root {
	--ck-color-presence-list-dropdown-background: hsl(0, 0%, 100%);
	--ck-color-presence-list-dropdown-arrow-border: hsl(0, 0%, 92%);

	--ck-presence-list-dropdown-list-max-width: 250px;
	--ck-presence-list-dropdown-list-min-width: 180px;

	--ck-presence-list-users-tooltip-max-width: 120px;
	--ck-presence-list-users-tooltip-min-width: 25px;
}

.ck.ck-presence-list {
	display: flex;
	align-items: center;
	margin-right: var(--ck-spacing-standard);
	transition: margin-right 200ms ease-in-out;
	font-size: var(--ck-font-size-base);

	& * {
		box-sizing: border-box;
	}
}

.ck.ck-presence-list__list {
	display: flex;

	/* Taking care about margin animation in collapsed mode. */
	justify-content: flex-end;
}

.ck.ck-presence-list__counter {
	color: var(--ck-color-base-text);
	margin-right: var(--ck-spacing-large);
}

.ck.ck-presence-list__counter--hidden {
	display: none;
}

.ck.ck-presence-list__list-item {
	/**
	 * Reset default CK5 button styles - `.ck-reset__all *`.
	 * Reset default user agent button stylesheet too.
	 */
	font: inherit;
	color: inherit;
	border: 0;
	padding: 0;
	outline: none;
	background: none;

	position: relative;
	margin-left: var(--ck-spacing-standard);

	&:last-child {
		order: -1;
		margin-left: 0;
	}
}

.ck.ck-tooltip.ck-presence-list__list-item__tooltip {
	& > .ck-tooltip__text {
		display: inline-block;
		max-width: var(--ck-presence-list-users-tooltip-max-width);
		overflow: hidden;
		text-align: center;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

.ck.ck-presence-list__marker {
	position: relative;
	display: block;
	width: 100%;
	height: 3px;
	margin-top: 3px;
}

/**
 * Add better UX behavior of button to the `clickable` elements.
 * We need to create stronger specificity than `.ck.ck-reset__all *`.
 */
.ck-presence-list__list button.ck-presence-list__list-item *,
.ck-presence-list__balloon button.ck-presence-list__dropdown-list-item * {
	cursor: pointer;
}

.ck.ck-presence-list--collapsed {
	& .ck-presence-list__list {
		/* Because of moving avatars to the right with margin-left we need to set min-width of container. */
		min-width: calc( var(--ck-user-avatar-size) * 2 );

		& * {
			cursor: pointer;
			transition: all 400ms ease-in-out;
		}
	}

	& .ck.ck-presence-list__list-item {
		/* Adding extra px to create collapsed effect. */
		margin-left: calc( var(--ck-user-avatar-size) * -1 + 7px);

		&:last-child {
			order: unset;
		}

		&:nth-last-child(2) {
			opacity: .75;
		}

		&:nth-last-child(3) {
			opacity: .55;
		}

		&:nth-last-child(4) {
			opacity: .35;
		}

		&:nth-last-child(5) {
			opacity: .15;
		}

		&:nth-last-child(n+6) {
			display: none;
		}
	}
}

.ck.ck-presence-list__balloon {
	/* Overwrite arrows background of balloon */
	--ck-color-panel-border: var(--ck-color-presence-list-dropdown-arrow-border);
	--ck-color-panel-background: var(--ck-color-presence-list-dropdown-background);

	background-color: var(--ck-color-presence-list-dropdown-background);
	border: 0;
	opacity: 1;
	animation: 300ms fadeIn ease-in-out;

	@media (prefers-reduced-motion: reduce) {
		animation: none;
	}

	& .ck.ck-presence-list__dropdown-list-wrapper {
		/* Temporary fix, we should rethink max-height of dropdown. */
		max-height: 80vh;

		min-width: var(--ck-presence-list-dropdown-list-min-width);
		max-width: var(--ck-presence-list-dropdown-list-max-width);
		overflow-y: auto;
		overflow-x: hidden;
		border-radius: var(--ck-border-radius);
	}

	& .ck.ck-presence-list__dropdown-list-item {
		/**
		 * Reset default CK5 button styles - `.ck-reset__all *`.
		 * Reset default user agent button stylesheet too.
		 */
		font: inherit;
		color: inherit;
		outline: none;
		border: 0;
		background: none;

		display: flex;
		align-items: center;
		position: relative;
		padding: var(--ck-spacing-standard);

		&:first-of-type {
			& .ck-presence-list__marker {
				border-top-left-radius: var(--ck-border-radius);
			}
		}

		&:last-of-type {
			& .ck-presence-list__marker {
				border-bottom-left-radius: var(--ck-border-radius);
			}
		}
	}

	& .ck.ck-presence-list__dropdown-list {
		& .ck-user__full-name {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			color: var(--ck-color-base-text);
			margin-left: var(--ck-spacing-standard);
		}

		& .ck.ck-presence-list__marker {
			position: absolute;
			left: 0;
			margin: 0;
			height: 100%;
			width: 3px;
		}
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}