Template:Block/sandbox/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 !important;
	background: var(--color-base--hover, #404244);
}

.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: var(--color-inverted, #ffffff);
	background: var(--color-base--hover, #404244);
}

.inline-text-block-hd a::selection {
	color: #6d8af2;
	background: var(--color-base--hover, #404244);
}

@media screen {
	html.skin-theme-clientpref-night .inline-text-block-hd a::selection {
		color: #36c;
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .inline-text-block-hd a::selection {
		color: #36c;
	}
}

.inline-text-block-hd .new::selection {
	color: #ff4242;
	background: var(--color-base--hover, #404244);
}

@media screen {
	html.skin-theme-clientpref-night .inline-text-block-hd .new::selection {
		color: #d73333;
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .inline-text-block-hd .new::selection {
		color: #d73333;
	}
}

@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: var(--color-inverted, #ffffff) !important;
		transition: 0.15s linear;
	}

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

	html.skin-theme-clientpref-night .inline-text-block-hd:hover a,
	html.skin-theme-clientpref-night .inline-text-block-hd:active a {
		color: #36c;
	}

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

	html.skin-theme-clientpref-night .inline-text-block-hd:hover .new,
	html.skin-theme-clientpref-night .inline-text-block-hd:active .new {
		color: #d73333;
	}
}

@media screen and (prefers-color-scheme: dark) and (pointer: coarse), (pointer: none) {

	html.skin-theme-clientpref-os .inline-text-block-hd:hover a,
	html.skin-theme-clientpref-os .inline-text-block-hd:active a {
		color: #36c;
	}
	html.skin-theme-clientpref-os .inline-text-block-hd:hover .new,
	html.skin-theme-clientpref-os .inline-text-block-hd:active .new {
		color: #d73333;
	}
}

/* sl = soft, light */

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

.inline-text-block-sl::selection {
	color: var(--color-emphasized, #000000);
}

.inline-text-block-sl a::selection {
	color: #36c;
}

@media screen {
	html.skin-theme-clientpref-night .inline-text-block-sl a::selection {
		color: #6d8af2;
	}
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .inline-text-block-sl a::selection {
		color: #6d8af2;
	}
}

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


@media screen {
	html.skin-theme-clientpref-night .inline-text-block-sl .new::selection {
		color: #ff4242;
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os  .inline-text-block-sl .new::selection {
		color: #ff4242;
	}
}

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

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

	html.skin-theme-clientpref-night .inline-text-block-sl:hover a,
	html.skin-theme-clientpref-night .inline-text-block-sl:active a {
		color: #6d8af2;
	}
	@media screen and (prefers-color-scheme: dark) {
		html.skin-theme-clientpref-os .inline-text-block-sl:hover a,
		html.skin-theme-clientpref-os .inline-text-block-sl:active a {
			color: #6d8af2;
		}
	}

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

	html.skin-theme-clientpref-night .inline-text-block-sl:hover .new,
	html.skin-theme-clientpref-night .inline-text-block-sl:active .new {
		color: #ff4242;
	}
	@media screen and (prefers-color-scheme: dark) {
		html.skin-theme-clientpref-os  .inline-text-block-sl:hover .new,
		html.skin-theme-clientpref-os  .inline-text-block-sl:active .new {
			color: #ff4242;
		}
	}
}

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

.inline-text-block-hsd {
	color: transparent !important;
	background: var(--color-base--hover, #404244);
}

.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: var(--color-inverted, #ffffff) !important;
	transition: 0.15s linear;
}

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


@media screen {
	html.skin-theme-clientpref-night .inline-text-block-hsd:hover a,
	html.skin-theme-clientpref-night .inline-text-block-hsd:active a,
	html.skin-theme-clientpref-night .inline-text-block-hsd a::selection {
		color: #36c;
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .inline-text-block-hsd:hover a,
	html.skin-theme-clientpref-os .inline-text-block-hsd:active a,
	html.skin-theme-clientpref-os .inline-text-block-hsd a::selection {
		color: #36c;
	}
}

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


@media screen {
	html.skin-theme-clientpref-night .inline-text-block-hsd:hover .new,
	html.skin-theme-clientpref-night .inline-text-block-hsd:active .new,
	html.skin-theme-clientpref-night .inline-text-block-hsd .new::selection {
		color: #d73333;
	}
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .inline-text-block-hsd:hover .new,
	html.skin-theme-clientpref-os .inline-text-block-hsd:active .new,
	html.skin-theme-clientpref-os .inline-text-block-hsd .new::selection {
		color: #d73333;
	}
}

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

.inline-text-block-hsl {
	color: transparent !important;
}

.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: var(--color-emphasized, #000000) !important;
	transition: 0.15s linear;
}

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

@media screen {
	html.skin-theme-clientpref-night .inline-text-block-hsl:hover a,
	html.skin-theme-clientpref-night .inline-text-block-hsl:active a,
	html.skin-theme-clientpref-night .inline-text-block-hsl a::selection {
		color: #6d8af2;
	}
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .inline-text-block-hsl:hover a,
	html.skin-theme-clientpref-os .inline-text-block-hsl:active a,
	html.skin-theme-clientpref-os .inline-text-block-hsl a::selection {
		color: #6d8af2;
	}
}

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

@media screen {
	html.skin-theme-clientpref-night .inline-text-block-hsl:hover .new,
	html.skin-theme-clientpref-night .inline-text-block-hsl:active .new,
	html.skin-theme-clientpref-night .inline-text-block-hsl .new::selection {
		color: #ff4242;
	}
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os  .inline-text-block-hsl:hover .new,
	html.skin-theme-clientpref-os  .inline-text-block-hsl:active .new,
	html.skin-theme-clientpref-os  .inline-text-block-hsl .new::selection {
		color: #ff4242;
	}
}