Module:Creator/styles.css

.commons-creator-table {
	background-color: #f0f0ff;
	box-sizing: border-box;
	font-size: 95%;
	text-align: start;
	color: inherit;
}

.commons-creator-table > tbody > tr {
	vertical-align: top;
}

.commons-creator-table > tbody > tr > th {
    background-color: var(--background-color-neutral,#e0e0ee);
    font-weight: bold;
    text-align: start;
    color: inherit;
}

@media (max-width: 719px) {
	.commons-creator-table,
	.commons-creator-table > tbody {
		display: block;
		width: 100%;
	}
	.commons-creator-table > tbody {
		border-right: 1px solid var(--border-color-base,#aaa);
		border-bottom: 1px solid var(--border-color-base,#aaa);
	}
	.commons-creator-table > tbody > tr {
		border-top: 1px solid var(--border-color-base,#aaa);
		display: flex;
		flex-wrap: wrap;
	}
	.commons-creator-table > tbody > tr > th {
		border-left: 1px solid var(--border-color-base,#aaa);
		padding: 2px;
		flex: 1 1 100%;
	}
	.commons-creator-table > tbody > tr > td {
		border-left: 1px solid var(--border-color-base,#aaa);
		padding: 2px;
		flex: 1 1;
	}
	
}

@media (min-width: 720px) {
	.commons-creator-table {
		border: 1px solid var(--border-color-base,#aaa);
		border-collapse: collapse;
		border-spacing: 0;
		padding: 5px;
	}
    .commons-creator-table > tbody > tr > th,
    .commons-creator-table > tbody > tr > td {
    	border: 1px solid var(--border-color-base,#aaa);
    	padding: 2px;
    }
	.commons-creator-table > tbody > tr > .halfwidth {
		max-width: 10em;
	}
	.commons-creator-table > tbody > tr > .fullwidth {
		max-width: 20em;
	}
}

@media screen {
	html.skin-theme-clientpref-night .commons-creator-table {
		background-color: #0c0b19;
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .commons-creator-table {
		background-color: #0c0b19;
	}
}