Template:Block/sandbox/styles.css
< Template:Block | sandbox
/* 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
}