proplate.css

.protoots-proplate {
	padding-left: 0.25rem;
	padding-right: 0.25rem;
	border-radius: 0.25rem;
	margin-left: 0.5rem;
	display: inline-flex;
	animation: proplate-fadein 0.15s linear;
	font-weight: 500;

	/*
		For users of the advanced view, the proplate shouldn't take all available space.
		Most of the times this was working fine, by setting it explicitly it definitely works
		across all places of Mastodon.
	*/
	overflow: hidden;
	text-overflow: ellipsis;
}

/* dark theme */
.theme-default .protoots-proplate {
	/* header background */
	background-color: #313543;

	/* pulled from nowhere, basically just as low contrast as we can go while keeping AA rating */
	color: #aaa;
}

/* dark theme on detailed status */
.theme-default .detailed-status .protoots-proplate {
	/* scrollable background */
	background-color: #282c37;

	/* pulled from nowhere, basically just as low contrast as we can go while keeping AA rating */
	color: #aaa;
}

/* light theme */
.theme-mastodon-light .protoots-proplate {
	/* body background */
	background-color: #eff3f5;
	/* search bar foreground */
	color: #282c37;
}

/* high contrast */
.theme-contrast .protoots-proplate {
	background-color: black;
	color: #fff;
}

.theme-macaron .protoots-proplate {
	background-color: #c8c4dd;
}

.theme-fairy-floss .protoots-proplate {
	background-color: #474059;
}

.flavour-glitch.skin-default .protoots-proplate {
	background-color: #313543;
}

/* rainbow pronouns for jasmin and i cause why not */
.proplate-pog:hover {
	color: inherit;

	/*
		The 12-bit rainbow palette by https://fosstodon.org/@kate, adjusted to rgba value with funny opacity.
		https://iamkate.com/data/12-bit-rainbow
	*/
	background: linear-gradient(
		45deg,
		rgba(136, 17, 119, 0.69) 0%,
		rgba(170, 51, 85, 0.69) 10%,
		rgba(204, 102, 102, 0.69) 20%,
		rgba(238, 153, 68, 0.69) 30%,
		rgba(238, 221, 0, 0.69) 40%,
		rgba(153, 221, 85, 0.69) 50%,
		rgba(68, 221, 136, 0.69) 60%,
		rgba(34, 204, 187, 0.69) 70%,
		rgba(0, 187, 204, 0.69) 80%,
		rgba(0, 153, 204, 0.69) 90%,
		rgba(51, 102, 187, 0.69) 100%
	);
}

@keyframes proplate-fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion) {
	.protoots-proplate {
		animation: none;
	}
}

bdi.has-proplate {
	display: flex;
}