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;
}

/* Add arrows to toggle-blocks for collapsible elements */
.mw-collapsible-toggle-expanded.mw-collapsible-arrowtoggle,
.mw-collapsible-toggle-expanded .mw-collapsible-arrowtoggle {
 padding-left: 20px !important;
 background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/10/MediaWiki_Vector_skin_action_arrow.png');
 background-repeat: no-repeat;
 background-position: left center;
}
.mw-collapsible-toggle-collapsed.mw-collapsible-arrowtoggle,
.mw-collapsible-toggle-collapsed .mw-collapsible-arrowtoggle {
 padding-left: 20px !important;
 background-repeat: no-repeat;
}
.commons-creator-table[dir="ltr"] .mw-collapsible-toggle-collapsed.mw-collapsible-arrowtoggle,
.commons-creator-table[dir="ltr"] .mw-collapsible-toggle-collapsed .mw-collapsible-arrowtoggle {
 background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/41/MediaWiki_Vector_skin_right_arrow.png');
 /* @noflip */
 background-position: left center;
}
.commons-creator-table[dir="rtl"] .mw-collapsible-toggle-collapsed.mw-collapsible-arrowtoggle,
.commons-creator-table[dir="rtl"] .mw-collapsible-toggle-collapsed .mw-collapsible-arrowtoggle {
 background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/1e/MediaWiki_Vector_skin_left_arrow.png');
 /* @noflip */
 background-position: right center;
}

@media (max-width: 719px) {
	.commons-creator-table,
	.commons-creator-table > tbody {
		box-sizing: border-box;
		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;
	}
}