@transmutable/bink/tests/tests.css

A sleek and reactive framework for web pages

:root {
	--dark-yellow:	rgb(252, 228, 101);
	--yellow:		rgb(255, 236, 148);
	--light-yellow:	rgb(255, 240, 170);

	--dark-green:	rgb(35, 200, 35);
	--green:		rgb(0, 255, 0);
	--light-green:	rgb(180, 255, 100);

	--dark-red:		rgb(200, 0, 0);
	--red:			rgb(255, 0, 0);
	--light-red:	rgb(255, 200, 200);

	--action-color: var(--dark-yellow);
	--success-color: var(--dark-green);
	--failure-color: var(--red);

	--major-space: 35px;
	--medium-space: 25px;
	--minor-space: 10px;
}

html {
	font-family: sans-serif;
}
body {
	padding: var(--major-space);
}

.test-results-runner {
	padding-left: 0;
	list-style: none;
}

.started-only,
.passed-only,
.failed-only { display: none; }

.test-result[data-status=started] .started-only,
.test-result[data-status=passed] .passed-only,
.test-result[data-status=failed] .failed-only { display: inherit; }

.test-result {
	margin-bottom: var(--medium-space);
}

.test-result > .name {
	margin: 0;
	font-size: 1.1rem;
}

.test-result[data-status=passed] > .status:before {
	content: "✅ ";
}

.test-result[data-status=failed] > .status:before {
	content: "⚡️ ";
}

.test-result[data-status=started] > .name {
	color: var(--action-color);
}

.test-result[data-status=passed] > .name {
	color: var(--success-color);
}

.test-result[data-status=failed] > .name {
	color: var(--failure-color);
}

.test-result > p {
	margin: 0 0 var(--minor-space) 0;
}

.test-result > .context th {
	vertical-align: top;
	padding-right: var(--minor-space);
}