FrankerFaceZ/styles/chat.scss

.ffz-cheer {
	display: inline-block;
	height: 2.8rem;
	line-height: 2.8rem;
	padding-left: 3rem;
	margin: -.5rem .5rem;
	background-position: 0;
	background-repeat: no-repeat;

	&:after {
		font-weight: bold;
		content: attr(data-amount)
	}
}

.ffz-cheer-preview {
	height: 11.2rem;
	width: 11.2rem;
}

.ffz--inline-reasons {
	max-width: 30rem;
}


.ffz-badge {
	display: inline-block;
	min-width: 1.8rem;
	height: 1.8rem;
	margin: 0 .3rem .2rem 0;
	background-position: center;
	vertical-align: middle;

	&.ffz-no-invert {
		filter:none !important;
	}

	&.ffz-full-size {
		min-width: 1.8rem;
		height: 1.8rem;
		margin: 0 .3rem .2rem 0;
		border-radius: 0;
	}
}


.ffz__tooltip .ffz-i-lock {
	position: absolute;
	bottom: 0; right: 0;
	border-radius: .2rem;
	font-size: 1rem;
	background-color: rgba(0,0,0,0.5);
	color: #fff;
}

.chat-line__message {
	position: relative;
}


.ffz--modifier-actions {
	position: absolute;
	top: 0;
	left: 0;
	padding: .5rem 0;
	z-index: 1;

	background: rgba(255,255,255,0.5);

	.dark-theme &,
	.tw-root--theme-dark & {
		background: rgba(0,0,0,0.5);
	}

	.ffz-mod-icon {
		margin: 0 .5rem;
		display: none;
	}
}

.ffz--keys {
	&[data-ctrl="true"] .ffz-modifier-1,
	&[data-shift="true"] .ffz-modifier-2,
	&[data-shift="true"][data-ctrl="true"] .ffz-modifier-3,
	&[data-alt="true"] .ffz-modifier-4,
	&[data-alt="true"][data-ctrl="true"] .ffz-modifier-5,
	&[data-alt="true"][data-shift="true"] .ffz-modifier-6,
	&[data-alt="true"][data-ctrl="true"][data-shift="true"] .ffz-modifier-7,
	&[data-meta="true"] .ffz-modifier-8,

	&[data-meta="true"][data-ctrl="true"] .ffz-modifier-9,
	&[data-meta="true"][data-shift="true"] .ffz-modifier-10,
	&[data-meta="true"][data-shift="true"][data-ctrl="true"] .ffz-modifier-11,
	&[data-meta="true"][data-alt="true"] .ffz-modifier-12,
	&[data-meta="true"][data-alt="true"][data-ctrl="true"] .ffz-modifier-13,
	&[data-meta="true"][data-alt="true"][data-shift="true"] .ffz-modifier-14,
	&[data-meta="true"][data-alt="true"][data-ctrl="true"][data-shift="true"] .ffz-modifier-15 {
		display: inline-flex;
	}
}

.ffz--modifier-actions:empty {
	display: none;
}


.ffz--favorite {
	position: absolute;
	bottom: 0; right: 0;

	font-size: 1rem;
	border-radius: .5rem;
	color: gold;

	background-color: rgba(0,0,0,0.5);

	.ffz__tooltip & {
		bottom: .1rem; right: .1rem;
		padding: .2rem 0;
	}
}


.modified-emote {
	~ .chat-line__message--emote {
		position: relative;
		z-index: 1
	}

	position: relative;
	z-index: 0;

	span {
		position: absolute;
		top: -20px; bottom: -20px; left: -20px; right: -20px;
		margin: auto;
		pointer-events: none;

		img {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
}