Module:Template test case/styles.css

/* {{pp-template}} */
.test-case-collapsible {
	width: 100%;
	border: 1px solid silver;
	padding: 0.2em;
	margin: 1em 0;
	margin-top: -1px;
	clear: both;
	color: inherit;
	box-sizing: border-box;
}

.test-case-collapsible .mw-collapsible-content > ul {
	margin-left: 0;
}

.mw-collapsible.test-case-collapsible.mw-made-collapsible .mw-collapsible-content {
	padding: 0.5em 1em;
}

.mw-collapsible.test-case-collapsible.mw-made-collapsible.mw-collapsed {
    margin-bottom: 0;
    margin-top: -1px;
}

div.mw-collapsible-content > ul > li {
	display: block;
}

.test-case-collapsible-b1 {
	background-color: var(--background-color-warning-subtle, #fdf2d5);
	margin: 1px;
}

.test-case-collapsible-b2 {
	background-color: var(--background-color-content-added, #a3d3ff);
	margin: 1px;
}

.test-case-collapsible-b3 {
	background-color: var(--background-color-success-subtle, #dff2eb);
	margin: 1px;
}

@media screen {
	html.skin-theme-clientpref-night .test-case-collapsible-b1 {
		background-color: #453217;
	}
	
	html.skin-theme-clientpref-night .test-case-collapsible-b2 {
		background-color: #233566;
	}
	
	html.skin-theme-clientpref-night .test-case-collapsible-b3 {
		background-color: #003500;
	}
}

@media screen and ( prefers-color-scheme: dark ) {
	html.skin-theme-clientpref-os .test-case-collapsible-b1 {
		background-color: #453217;
	}
	
	html.skin-theme-clientpref-os .test-case-collapsible-b2 {
		background-color: #233566;
	}
	
	html.skin-theme-clientpref-os .test-case-collapsible-b3 {
		background-color: #003500;
	}
	
}