Template:Block/sandbox/styles.css

/* hd = hard, dark */

.inline-text-block-hd {
	color: transparent;
	background: #333333;
	background: rgba(0, 0, 0, 0.8)
}

.inline-text-block-hd a,
.inline-text-block-hd .new,
.inline-text-block-hd * {
	color: transparent !important;
	background: transparent !important
}

.inline-text-block-hd::selection,
.inline-text-block-hd *::selection {
	color: #ffffff;
	background: #333333;
	background: rgba(0, 0, 0, 0.8)
}

.inline-text-block-hd a::selection {
	color: #88bbff;
	background: #333333;
	background: rgba(0, 0, 0, 0.8)
}

.inline-text-block-hd .new::selection {
	color: #ffbb88;
	background: #333333;
	background: rgba(0, 0, 0, 0.8)
}

@media (pointer: coarse), (pointer: none) {
	.inline-text-block-hd:hover,
	.inline-text-block-hd:active {
		color: #ffffff;
		transition: 0.15s linear;
		background: #333333;
		background: rgba(0, 0, 0, 0.8)
	}

	.inline-text-block-hd:hover a,
	.inline-text-block-hd:active a {
		color: #88bbff;
		transition: 0.15s linear;
		background: #333333;
		background: rgba(0, 0, 0, 0.8)
	}

	.inline-text-block-hd:hover .new,
	.inline-text-block-hd:active .new {
		color: #ffbb88;
		transition: 0.15s linear;
		background: #333333;
		background: rgba(0, 0, 0, 0.8)
	}
}

/* sl = soft, light */

.inline-text-block-sl,
.inline-text-block-sl a,
.inline-text-block-sl .new {
	color: transparent;
}

.inline-text-block-sl::selection {
	color: #000000;
}

.inline-text-block-sl a::selection {
	color: #0033cc;
}

.inline-text-block-sl .new::selection {
	color: #cc3300;
	transition: 0.15s linear
}

@media (pointer: coarse), (pointer: none) {
	.inline-text-block-sl:hover,
	.inline-text-block-sl:active {
		color: #000000;
		transition: 0.15s linear
	}

	.inline-text-block-sl:hover a,
	.inline-text-block-sl:active a {
		color: #0033cc;
		transition: 0.15s linear
	}

	.inline-text-block-sl:hover .new,
	.inline-text-block-sl:active .new {
		color: #cc3300;
		transition: 0.15s linear
	}
}

/* hsd = hover-display, soft, dark */

.inline-text-block-hsd {
	color: transparent;
	background: #333333;
	background: rgba(0, 0, 0, 0.8)
}

.inline-text-block-hsd a,
.inline-text-block-hsd .new {
	color: transparent
}

.inline-text-block-hsd:hover,
.inline-text-block-hsd:active,
.inline-text-block-hsd::selection {
	color: #ffffff;
	transition: 0.15s linear
}

.inline-text-block-hsd:hover a,
.inline-text-block-hsd:active a,
.inline-text-block-hsd a::selection {
	color: #88bbff;
	transition: 0.15s linear
}

.inline-text-block-hsd:hover .new,
.inline-text-block-hsd:active .new,
.inline-text-block-hsd .new::selection {
	color: #ffbb88;
	transition: 0.15s linear
}

/* hsl = hover-display, soft, light */

.inline-text-block-hsl,
.inline-text-block-hsl a,
.inline-text-block-hsl .new {
	color: transparent;
}

.inline-text-block-hsl:hover,
.inline-text-block-hsl:active,
.inline-text-block-hsl::selection {
	color: #000000;
	transition: 0.15s linear
}

.inline-text-block-hsl:hover a,
.inline-text-block-hsl:active a,
.inline-text-block-hsl a::selection {
	color: #0033cc;
	transition: 0.15s linear
}

.inline-text-block-hsl:hover .new,
.inline-text-block-hsl:active .new,
.inline-text-block-hsl .new::selection {
	color: #cc3300;
	transition: 0.15s linear
}