Module:Hatnote/styles.css

html.skin-theme-clientpref-day .hatnote-wrapper {
	--color-link: var(--template-arg-color-link--light, inherit);
	--color-link--hover: var(--template-arg-color-link--light, inherit);
	--color-link--active: var(--template-arg-color-link--light, inherit);
	--color-visited: var(--template-arg-color-link--light, inherit);
	--color-visited--hover: var(--template-arg-color-link--light, inherit);
	--color-visited--active: var(--template-arg-color-link--light, inherit);
	--color-amaranth-legacy-scope: var(--template-arg-color--light, inherit);
}

@media (prefers-color-scheme: light) {
	html.skin-theme-clientpref-os .hatnote-wrapper {
		--color-link: var(--template-arg-color-link--light, inherit);
		--color-link--hover: var(--template-arg-color-link--light, inherit);
		--color-link--active: var(--template-arg-color-link--light, inherit);
		--color-visited: var(--template-arg-color-link--light, inherit);
		--color-visited--hover: var(--template-arg-color-link--light, inherit);
		--color-visited--active: var(--template-arg-color-link--light, inherit);
		--color-amaranth-legacy-scope: var(--template-arg-color--light, inherit);
	}
}

html.skin-theme-clientpref-night .hatnote-wrapper {
	--color-link: var(--template-arg-color-link--dark, inherit);
	--color-link--hover: var(--template-arg-color-link--dark, inherit);
	--color-link--active: var(--template-arg-color-link--dark, inherit);
	--color-visited: var(--template-arg-color-link--dark, inherit);
	--color-visited--hover: var(--template-arg-color-link--dark, inherit);
	--color-visited--active: var(--template-arg-color-link--dark, inherit);
	--color-amaranth-legacy-scope: var(--template-arg-color--dark, inherit);
}

@media (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .hatnote-wrapper {
		--color-link: var(--template-arg-color-link--dark, inherit);
		--color-link--hover: var(--template-arg-color-link--dark, inherit);
		--color-link--active: var(--template-arg-color-link--dark, inherit);
		--color-visited: var(--template-arg-color-link--dark, inherit);
		--color-visited--hover: var(--template-arg-color-link--dark, inherit);
		--color-visited--active: var(--template-arg-color-link--dark, inherit);
		--color-amaranth-legacy-scope: var(--template-arg-color--dark, inherit);
	}
}

/* no images */
.hatnote0 .hatnote-text {
	text-align: center;
}

/* one image */
.hatnote1 {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	text-align: left;
}

.hatnote1 .hatnote-image1 {
	flex: 0 1 auto;
	margin: 0 var(--space-sm);
}

.hatnote1 .hatnote-image1 img {
	max-width: 100%;
	height: 100%;
}

.hatnote1 .hatnote-text {
	flex: 0 1 fit-content;
}

/* two images */
.hatnote2 {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	text-align: center;
}

.hatnote2 > :first-child,
.hatnote2 > :last-child {
	flex: 0 1 auto;
	margin: 0 var(--space-sm);
}

.hatnote2 img {
	max-width: 100%;
	height: 100%;
}

.hatnote2 > :nth-child(2) {
	flex: 1 1 fit-content;
}

.hatnote-primary {
	color: var(--color-amaranth-legacy-scope);
	font-family: var(--font-family-header-custom, var(--font-family-serif));
	font-size: var(--font-size-xx-large);
}

.hatnote-text ul {
	margin-block: 0;
}