Toggle menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:Notice/style.css: Difference between revisions

Template page
PenguinEncounter (talk | contribs)
No edit summary
PenguinEncounter (talk | contribs)
Add dark mode support (css vars -light, -dark variants). Temporarily breaks existing notices, WIP
Line 3: Line 3:
border-collapse: collapse;
border-collapse: collapse;
box-sizing: border-box;
box-sizing: border-box;
border: 2px solid var(--border);
border: 2px solid var(--border-light);
border-left: 10px solid var(--border);
border-left: 10px solid var(--border-light);
background-color: var(--background);
background-color: var(--background-light);
color: var(--text-light);
padding: 5px 10px;
padding: 5px 10px;
}
@media screen and (prefers-color-scheme: dark) {
:root.skin-theme-clientpref-os .noticebox {
background-color: var(--background-dark);
border: 2px solid var(--border-dark);
border-left: 10px solid var(--border-dark);
color: var(--text-dark);
}
}
:root.skin-theme-clientpref-dark .noticebox {
background-color: var(--background-dark);
border: 2px solid var(--border-dark);
border-left: 10px solid var(--border-dark);
color: var(--text-dark);
}
}

Revision as of 19:49, 24 October 2024

.noticebox {
	margin: 4px 0;
	border-collapse: collapse;
	box-sizing: border-box;
	border: 2px solid var(--border-light);
	border-left: 10px solid var(--border-light);
	background-color: var(--background-light);
	color: var(--text-light);
	padding: 5px 10px;
}

@media screen and (prefers-color-scheme: dark) {
	:root.skin-theme-clientpref-os .noticebox {
		background-color: var(--background-dark);
		border: 2px solid var(--border-dark);
		border-left: 10px solid var(--border-dark);
		color: var(--text-dark);
	}
}

:root.skin-theme-clientpref-dark .noticebox {
	background-color: var(--background-dark);
	border: 2px solid var(--border-dark);
	border-left: 10px solid var(--border-dark);
	color: var(--text-dark);
}