src_front/less/chatMessage.less
/**
* Common styles for chat messages
*/
.chatMessage {
	color: var(--color-chat-message);
	font-size: var(--messageSize);
	font-family: var(--font-inter), Roboto, Arial;
	border-radius: var(--border-radius);
	line-height: 1.25em;
	padding: 4px;
	// transition: background-color .05s;
	// .message.deleted, .messageChild.deleted {
	// 	.text {
	// 		opacity: .35;
	// 	}
	// 	&:hover{
	// 		text-decoration: none;
	// 		.text {
	// 			opacity: 1;
	// 		}
	// 	}
	// }

	.spoilerFrag,
	.spoiler .messagetranslation .text {
		color: transparent;
		@c1: rgba(128, 128, 128, .5);
		@c2: rgba(128, 128, 128, .25);
		background-color: @c1;
		background-image: repeating-linear-gradient(-45deg, @c1, @c1 7px, @c2 7px, @c2 15px);
		transition: color .3s, background .3s;
		.emote, a, .icon {
			opacity: 0;
			transition: opacity .3s;
		}
	}
	.spoilerTag {
		display: none;
	}
	&:hover .spoilerFrag,
	&:hover .spoiler .messagetranslation .text {
		color: unset;
		background-color: transparent;
		@c1: rgba(128, 128, 128, 0);
		@c2: rgba(128, 128, 128, 0);
		background-image: repeating-linear-gradient(-45deg, @c1, @c1 7px, @c2 7px, @c2 15px);
		.emote, a, .icon {
			opacity: 1;
		}
	}

	&.highlight {
		background-color: var(--background-color-fadest);
		display: flex;
		flex-direction: row;
		align-items: center;

		&:hover {
			background-color: var(--background-color-fader);
		}

		&.primary {
			color: var(--color-light);
			background-color: var(--color-primary);
			&:hover {
				background-color: var(--color-primary-light);
			}
		}

		&.secondary {
			color: var(--color-light);
			background-color: var(--color-secondary);
			&:hover {
				background-color: var(--color-secondary-light);
			}
		}

		&.alert {
			color: var(--color-light);
			background-color: var(--color-alert);
			&:hover {
				background-color: var(--color-alert-light);
			}
			.userlink {
				color: var(--color-light);
			}
		}

		&.success {
			background-color: var(--color-primary-fadest);
			&:hover {
				background-color: var(--color-primary-fader);
			}
			.userlink {
				color: var(--color-primary-light);
			}
		}

		&.error {
			background-color: var(--color-alert-fadest);
			&:hover {
				background-color: var(--color-alert-fader);
			}
			.userlink {
				color: var(--color-secondary-light);
			}
		}
	}

	&:hover {
		background-color: var(--background-color-fadest);
	}

	&>.icon,
	&>.head>.icon {
		width: 1.25em;
		height: 1.25em;
		min-width: 1.25em;
		min-height: 1.25em;
		margin-right: 5px;
		vertical-align: middle;
		align-self: flex-start;
	}

	.chatMessageTime + * {
		margin-left: 3em;
	}

	.userlink {
		font-weight: bold;
		color: var(--color-secondary);
		text-decoration: none;
		text-wrap: nowrap;
		&:hover {
			background-color: var(--color-dark-fader);
		}
	}

	.cheermote, .emote {
		height: 1.75em;
		vertical-align: middle;
		display: inline-block;
		img {
			height: 100%;
			object-fit: fill;
		}
	}

	.streamInfo {
		// background-color: rgba(255, 255, 255, .15);
		border-radius: .5em;
		overflow: hidden;
		width: 100%;
		row-gap: .5em;
		column-gap: 1em;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		.infos {
			flex-grow: 1;
			flex-basis: 200px;
			.details {
				gap: .5em;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				margin-top: .5em;
				.category, .duration {
					width: fit-content;
					margin-right: 0;
					margin-left: 0;
					font-size: .9em;
					display: block;
					padding: 2px 10px;
					font-style: normal;
					font-weight: normal;
					border-radius: var(--border-radius);
					color: var(--color-text);
					background-color: var(--background-color-fadest);
					.icon {
						height: 1em;
						vertical-align: text-top;
						margin-right: .25em;
					}
				}
			}
		}
		.soButton {
			align-self: center;
		}
	}
}

.chatMessageTime {
	//Set in absolute position with fixed width to avoid reflow
	//of the chat message everytime the timer changes
	position: absolute;
	font-size: .8em;
	font-family: var(--font-roboto);
	width: 3em;
	text-align: right;
	align-self: flex-start;
}

body.light {
	.chatMessage {

		&.success {
			.userlink {
				color: var(--color-primary);
			}
		}

		&.error {
			.userlink {
				color: var(--color-alert);
			}
		}
	}
}

.pollResult {

	.content {
		overflow: hidden;
		flex-grow: 1;
		.title {
			font-weight: bold;
			word-break: break-all;
			margin-bottom: .5em;
			text-align: center;
		}
		.creator {
			font-size: .8em;
			font-style: italic;
		}
		.choices {
			display: flex;
			flex-direction: column;
			gap: .5em;
			margin-bottom: .5em;
			.choice {
				display: flex;
				flex-direction: column;
				gap: .25em;
				filter: contrast(0);
				.infos {
					display: flex;
					flex-direction: row;

					.check {
						flex-shrink: 0;
						opacity: 0;
					}

					.icon {
						color: var(--color-text);
						height: 1em;
						margin-right: .25em;
					}

					.label {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						flex: 1;
					}

					.users {
						display: flex;
						flex-direction: row;
						align-items: center;
						flex-shrink: 0;
					}

					.percent, .points, .users {
						font-size: .8em;
						font-variant-numeric: tabular-nums;
						flex-shrink: 0;
						margin-right: .5em;
						&.points {
							margin-right: 0;
						}
					}
				}
				.bar {
					width: 100%;
					height: 5px;
					border-radius: 5px;
					@c: var(--background-color-fade);
					background: linear-gradient(to right, @c 100%, @c 100%);
					background-color: var(--background-color-fader);
					background-repeat: no-repeat;
				}
				&.winner {
					font-weight: 400;
					filter: unset;
					.check {
						opacity: 1;
					}
				}
			}
		}
	}
}
