Template:Block/styles.css

.inline-text-blocked {
	color: transparent;
	background-color: #000000;
	transition: color 0.25s;
}

.inline-text-blocked *, .inline-text-blocked a {
	color: transparent !important;
	background-color: transparent !important;
	cursor: default !important;
	text-decoration: none !important;
	transition: color 0.25s !important;
}

.inline-text-blocked::selection, .inline-text-blocked *::selection {
	color: #ffffff;
	background: #404040;
	background: rgba(0, 0, 0, 0.75);
}

@media (pointer: coarse) {
	.inline-text-blocked:hover, .inline-text-blocked *:hover, .inline-text-blocked a:hover, .inline-text-blocked a:active, .inline-text-blocked a *:hover, .inline-text-blocked a *:active {
		color: #ffffff;
	}
}

@media (pointer: fine), (pointer: none) {
	.inline-text-blocked:focus {
		color: #ffffff;
	}
}

/* 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,
	.inline-text-block-hd:hover *, 
	.inline-text-block-hd:active * {
		color: #ffffff;
		transition: 0.15s linear
	}

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

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

/* 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
}

@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
}