MediaWiki:Common.css

/* Boîtes de cours ({{Définition}}, {{Théorème}}, …). Each box sets one hue;
   borders and tints derive from it, so light and dark themes both work. */
.boite {
	--boite-teinte: #72777d;
	margin: 1em 0;
	border: 1px solid color-mix(in srgb, var(--boite-teinte) 35%, transparent);
	border-left: 4px solid var(--boite-teinte);
	border-radius: 6px;
	background: color-mix(in srgb, var(--boite-teinte) 7%, transparent);
	overflow-x: auto;
}
.boite-titre {
	padding: 0.4em 0.8em;
	background: color-mix(in srgb, var(--boite-teinte) 14%, transparent);
	font-weight: 600;
}
.boite-etiquette { color: var(--boite-teinte); }
.boite-nom::before { content: " — "; color: var(--boite-teinte); }
.boite-nom { font-weight: 500; }
.boite-contenu { padding: 0.2em 0.9em 0.5em; }
.boite-contenu > p:first-child { margin-top: 0.4em; }
.boite-source { font-size: 0.85em; font-style: italic; opacity: 0.8; }

.boite-definition { --boite-teinte: #3366cc; }
.boite-theoreme   { --boite-teinte: #b32424; }
.boite-demo       { --boite-teinte: #72777d; }
.boite-methode    { --boite-teinte: #14866d; }
.boite-formule    { --boite-teinte: #ac6600; }
.boite-exemple    { --boite-teinte: #0e7c86; }
.boite-remarque   { --boite-teinte: #6b4ba1; }
.boite-attention  { --boite-teinte: #d73333; }
.boite-exercice   { --boite-teinte: #36c; }
.boite-solution   { --boite-teinte: #14866d; margin: 0.6em 0 0.2em; }

html.skin-theme-clientpref-night .boite-definition { --boite-teinte: #6d9eff; }
html.skin-theme-clientpref-night .boite-theoreme   { --boite-teinte: #ff6b6b; }
html.skin-theme-clientpref-night .boite-demo       { --boite-teinte: #a2a9b1; }
html.skin-theme-clientpref-night .boite-methode    { --boite-teinte: #3fc19c; }
html.skin-theme-clientpref-night .boite-formule    { --boite-teinte: #f0a33a; }
html.skin-theme-clientpref-night .boite-exemple    { --boite-teinte: #3cc1cc; }
html.skin-theme-clientpref-night .boite-remarque   { --boite-teinte: #b39ae6; }
html.skin-theme-clientpref-night .boite-attention  { --boite-teinte: #ff7a7a; }
html.skin-theme-clientpref-night .boite-exercice   { --boite-teinte: #6d9eff; }
html.skin-theme-clientpref-night .boite-solution   { --boite-teinte: #3fc19c; }
@media (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .boite-definition { --boite-teinte: #6d9eff; }
	html.skin-theme-clientpref-os .boite-theoreme   { --boite-teinte: #ff6b6b; }
	html.skin-theme-clientpref-os .boite-demo       { --boite-teinte: #a2a9b1; }
	html.skin-theme-clientpref-os .boite-methode    { --boite-teinte: #3fc19c; }
	html.skin-theme-clientpref-os .boite-formule    { --boite-teinte: #f0a33a; }
	html.skin-theme-clientpref-os .boite-exemple    { --boite-teinte: #3cc1cc; }
	html.skin-theme-clientpref-os .boite-remarque   { --boite-teinte: #b39ae6; }
	html.skin-theme-clientpref-os .boite-attention  { --boite-teinte: #ff7a7a; }
	html.skin-theme-clientpref-os .boite-exercice   { --boite-teinte: #6d9eff; }
	html.skin-theme-clientpref-os .boite-solution   { --boite-teinte: #3fc19c; }
}

/* Foldable boxes (demonstrations, solutions): the whole title bar toggles. */
.boite.mw-collapsible > .boite-titre {
	/* Core floats .mw-collapsible-toggle right; the title bar must span the box. */
	float: none;
	display: block;
	text-align: left;
	cursor: pointer;
	user-select: none;
}
.boite.mw-collapsible > .boite-titre::before {
	content: "▾ ";
	display: inline-block;
	width: 1.1em;
	color: var(--boite-teinte);
}
.boite.mw-collapsed > .boite-titre::before { content: "▸ "; }
.boite-demo > .boite-contenu::after {
	content: "∎";
	display: block;
	text-align: right;
	color: var(--boite-teinte);
}

/* Links to chapters that do not exist yet: visible, but clearly "to do". */
.lien-a-creer a, .lien-a-creer a:visited {
	color: inherit;
	opacity: 0.6;
	text-decoration: underline dashed;
}
.lien-a-creer a::after { content: " ＋"; font-size: 0.8em; }

.bandeau-revoir {
	margin: 0 0 1em;
	padding: 0.5em 0.9em;
	border-radius: 6px;
	border: 1px solid color-mix(in srgb, #ac6600 45%, transparent);
	background: color-mix(in srgb, #ac6600 12%, transparent);
}

/* Home page and area portals: a responsive grid of cards. */
.grille-cartes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));
	gap: 0.8em;
	margin: 1em 0;
}
.carte {
	padding: 0.8em 1em;
	border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
	border-radius: 8px;
}
.carte-titre { font-size: 1.15em; font-weight: 600; margin-bottom: 0.3em; }
.carte p { margin: 0.2em 0; }

@media print {
	.boite { break-inside: avoid; }
	.boite.mw-collapsed > .boite-contenu { display: block !important; }
	.boite.mw-collapsible > .boite-titre::before { content: ""; }
}