Module:Archives/styles.css

.archives {
	text-align: center;
	padding: 0.2em 2px;
	box-sizing: border-box;
	/* ombox ombox-notice colors */
	border: 1px solid #a2a9b1;
	background-color: var(--background-color-neutral-subtle, #f8f9fa);
	color: inherit;
	margin: 0.25em 0;
}

.archives-talk {
	/* tmbox tmbox-notice colors */
	border: 1px solid #c0c090;
	background-color: #f8eaba;
}

.archives-image {
	padding: 0.6em 0 0.25em;
}

.archives-title {
	font-weight: bold;
}

.archives-collapsible-title {
	/* work around jumpy collapsible centered text */
	margin: 0 3.8em;
}

.archives-search {
	padding-bottom: 0.7em;
}

.archives-auto {
	padding: 0.2em 0.6em;
	border-top: 1px solid #a2a9b1;
}

.archives-talk .archives-auto {
	border-top: 1px solid #c0c090;
}

.archives-title-block-list,
.archives-small .archives-block-list {
	text-align: left;
}

.archives-small .archives-flex-child {
	padding: 0.6em 0 0.25em;
}

.archives-block-list {
	padding: 0 0.6em;
}

@media (min-width: 480px) {
	.archives-banner {
		overflow-x: hidden;
		align-items: center;
	}
	
	.archives-banner.archives-with-image {
		display: flex;
	}
	
	.archives-banner .archives-image {
		/* @noflip */
		padding: 4px 2px 4px 0.9em;
		flex: none;
	}
	
	/* we want this to take up all the space */
	.archives-banner .archives-flex-child {
		flex: 1 1 100%;
	}

	/* only make the banner smaller because the default size of -small is 88% */
	.archives-banner .archives-auto,
	.archives-banner .archives-edit {
		font-size: 88%;
	}
}

@media all and (min-width: 640px) {
	.archives-small {
		/* @noflip */
		clear: right;
		/* @noflip */
		float: right;
		/* @noflip */
		margin-left: 1em;
		width: 238px;
		font-size: 88%;
		line-height: 1.25em;
	}
	
	/* override opinonated upstream styles to ensure the input fits in the space */
	.archives-small .cdx-text-input {
		display: revert;
		position: revert;
		min-width: revert;
		overflow: revert;
	}
	
	.archives-small .mw-inputbox-input {
		width: 220px !important;
		margin: 0 auto;
	}
	/* end override */

	.archives-banner {
		margin: 0.25em 10%;
		/* idk about having both width and min-width declared */
	/* 	width: 80%;
		min-width: 80%;
	*/
	}
}

@media screen {
    html.skin-theme-clientpref-night .archives-talk {
		background-color: #2e2505;    /* Dark brown, same hue/saturation as light */
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .archives-talk {
		background-color: #2e2505; /* Dark brown, same hue/saturation as light */
	}
}

@media print {
	.archives {
		display: none !important;
	}
}