Module:Infobox/styles.css - Revision history

w>Izno: spaceeeee

2026-06-09T21:49:34Z

spaceeeee

← Older revision		Revision as of 17:49, 9 June 2026
Line 47:		Line 47:
	}		}

			/* remove when infobox is not a table anymore */
	.infobox-hiddenrow {		.infobox-hiddenrow,
			/* we mean it, Minerva. but also Vector 2022 in the future at some point */
		⚫	body.skin--responsive.skin--responsive .infobox .infobox-hiddenrow {
	display: none;		display: none;
	}		}

	/* Dark theme: [[~~William_Wragg~~]], [[~~Coral_Castle~~]] */		/* Dark theme: [[William Wragg]], [[Coral Castle]] */

	@media screen {		@media screen {
	html.skin-theme-clientpref-night .infobox-full-data:not(.notheme) > div:not(.notheme)[style] {		html.skin-theme-clientpref-night .infobox-full-data:not(.notheme) > div:not(.notheme)[style] {
	background: #1f1f23 !important;		background: #1f1f23 !important;
	/* switch with var( --color-base ) when supported. */		/* switch with var( --color-base ) when supported. */
	color: #f8f9fa;		color: #f8f9fa;
	}		}
	}		}

		⚫	@media screen and (prefers-color-scheme: dark) {

		⚫	html.skin-theme-clientpref-os .infobox-full-data:not(.notheme) > div:not(.notheme)[style] {
⚫	@media screen and ( prefers-color-scheme: dark) {
		⚫	background: #1f1f23 !important;
⚫	html.skin-theme-clientpref-os .infobox-full-data:not(.notheme) > div:not(.notheme)[style] {
		⚫	/* switch with var( --color-base ) when supported. */
⚫	background: #1f1f23 !important;
		⚫	color: #f8f9fa;
⚫	/* switch with var( --color-base ) when supported. */
			}
⚫	color: #f8f9fa;
	}
	}		}


	/* Since infobox is a table, many infobox templates take advantage of this to		/* Since infobox is a table, many infobox templates take advantage of this to
Line 79:		Line 79:
	*/		*/
	@media (min-width: 640px) {		@media (min-width: 640px) {
	body.skin--responsive .infobox-table {		body.skin--responsive .infobox-table {
	display: table !important;		display: table !important;
	}		}

	body.skin--responsive .infobox-table > caption {		body.skin--responsive .infobox-table > caption {
	display: table-caption !important;		display: table-caption !important;
	}
			}
⚫	body.skin--responsive .infobox-table > tbody {

⚫	display: table-row-group;
		⚫	body.skin--responsive .infobox-table > tbody {
	}
		⚫	display: table-row-group;
⚫	body.skin--responsive .infobox-~~table~~ ~~th,~~
			}
⚫	body.skin--responsive .infobox-table td {

⚫	padding-left: inherit;
			body.skin--responsive .infobox-table th,
⚫	padding-right: inherit;
		⚫	body.skin--responsive .infobox-table td {
	}
		⚫	padding-left: inherit;
		⚫	padding-right: inherit;
			}
	}		}

w>Zackmann08: Implementing new class for hiding extra rows.

2026-06-08T00:49:01Z

Implementing new class for hiding extra rows.

@@ Line 6: / Line 6: @@
  * DO NOT ADD THEM HERE
  */
 /*
  * not strictly certain these styles are necessary since the modules now
@@ Line 32: / Line 47: @@
+}
 /* Dark theme: [[William_Wragg]], [[Coral_Castle]] */

w>Zackmann08: Undid revision 1353378980 by Zackmann08 (talk) possibly broke something...

2026-05-10T02:18:05Z

Undid revision 1353378980 by Zackmann08 (talk) possibly broke something...

← Older revision		Revision as of 22:18, 9 May 2026
Line 36:		Line 36:
	@media screen {		@media screen {
	html.skin-theme-clientpref-night .infobox-full-data:not(.notheme) > div:not(.notheme)[style] {		html.skin-theme-clientpref-night .infobox-full-data:not(.notheme) > div:not(.notheme)[style] {
	background: ~~var(--color-surface-0)~~ !important;		background: #1f1f23 !important;
	/* switch with var( --color-base ) when supported. */		/* switch with var( --color-base ) when supported. */
	color: ~~var(--color-base)~~;		color: #f8f9fa;
	}		}
	}		}
Line 45:		Line 45:
	@media screen and ( prefers-color-scheme: dark) {		@media screen and ( prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .infobox-full-data:not(.notheme) > div:not(.notheme)[style] {		html.skin-theme-clientpref-os .infobox-full-data:not(.notheme) > div:not(.notheme)[style] {
	background: ~~var(--color-surface-0)~~ !important;		background: #1f1f23 !important;
	/* switch with var( --color-base ) when supported. */		/* switch with var( --color-base ) when supported. */
	color: ~~var(--color-base)~~;		color: #f8f9fa;
	}		}
	}		}

MtPenguinMonster: Trying to fix the dark mode colours of these infernal infoboxes

2025-12-15T06:02:46Z

Trying to fix the dark mode colours of these infernal infoboxes

← Older revision		Revision as of 02:02, 15 December 2025
Line 36:		Line 36:
	@media screen {		@media screen {
	html.skin-theme-clientpref-night .infobox-full-data:not(.notheme) > div:not(.notheme)[style] {		html.skin-theme-clientpref-night .infobox-full-data:not(.notheme) > div:not(.notheme)[style] {
	background: ~~#1f1f23~~ !important;		background: var(--color-surface-0) !important;
	/* switch with var( --color-base ) when supported. */		/* switch with var( --color-base ) when supported. */
	color: ~~#f8f9fa~~;		color: var(--color-base);
	}		}
	}		}
Line 45:		Line 45:
	@media screen and ( prefers-color-scheme: dark) {		@media screen and ( prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .infobox-full-data:not(.notheme) > div:not(.notheme)[style] {		html.skin-theme-clientpref-os .infobox-full-data:not(.notheme) > div:not(.notheme)[style] {
	background: ~~#1f1f23~~ !important;		background: var(--color-surface-0) !important;
	/* switch with var( --color-base ) when supported. */		/* switch with var( --color-base ) when supported. */
	color: ~~#f8f9fa~~;		color: var(--color-base);
	}		}
	}		}

w>Zackmann08: attempting to resolve a nesting issue.

2025-10-10T07:08:27Z

attempting to resolve a nesting issue.

← Older revision		Revision as of 03:08, 10 October 2025
Line 25:		Line 25:

	.infobox-3cols-child {		.infobox-3cols-child {
	margin: ~~auto~~;		margin: -3px;
	}		}

w>Jonesey95: fix text color in dark mode; this generally works but may cause problems, in which case revert or try specifying a different CSS value. background-color: transparent is generally not advised, but if it is necessary, it needs color:inherit.

2025-10-06T00:12:24Z

fix text color in dark mode; this generally works but may cause problems, in which case revert or try specifying a different CSS value. background-color: transparent is generally not advised, but if it is necessary, it needs color:inherit.

← Older revision		Revision as of 20:12, 5 October 2025
Line 21:		Line 21:
	float: none;		float: none;
	background-color: transparent;		background-color: transparent;
			color:inherit;
	}		}

w>Izno: per talk page

2025-06-16T15:26:13Z

per talk page

← Older revision		Revision as of 11:26, 16 June 2025
Line 43:		Line 43:

	@media screen and ( prefers-color-scheme: dark) {		@media screen and ( prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .infobox-full-data:not(.notheme) div:not(.notheme) {		html.skin-theme-clientpref-os .infobox-full-data:not(.notheme) > div:not(.notheme)[style] {
	background: #1f1f23 !important;		background: #1f1f23 !important;
	/* switch with var( --color-base ) when supported. */		/* switch with var( --color-base ) when supported. */

w>Izno: remove .infobox-table tr rule per Template talk:Infobox#Display for table rows

2025-05-08T15:43:01Z

remove .infobox-table tr rule per Template talk:Infobox#Display for table rows

← Older revision		Revision as of 11:43, 8 May 2025
Line 11:		Line 11:
	* just replicating the module faithfully		* just replicating the module faithfully
	*/		*/
	.infobox {
	background-color: var(--color-surface-1);
	color: var(--color-base);
	border-color: var(--border-color-base);
	}

	.infobox-header {
	background-color: var(--color-surface-2);
	color: var(--color-emphasized);
	}

	.infobox-subbox {		.infobox-subbox {
	padding: 0;		padding: 0;
Line 46:		Line 35:
	@media screen {		@media screen {
	html.skin-theme-clientpref-night .infobox-full-data:not(.notheme) > div:not(.notheme)[style] {		html.skin-theme-clientpref-night .infobox-full-data:not(.notheme) > div:not(.notheme)[style] {
	background~~-color~~: ~~var(--color-surface-1)~~;		background: #1f1f23 !important;
	~~color:~~ var(--color-base);		/* switch with var( --color-base ) when supported. */
			color: #f8f9fa;
	}		}
	}		}
Line 54:		Line 44:
	@media screen and ( prefers-color-scheme: dark) {		@media screen and ( prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .infobox-full-data:not(.notheme) div:not(.notheme) {		html.skin-theme-clientpref-os .infobox-full-data:not(.notheme) div:not(.notheme) {
	background~~-color~~: ~~var(--color-surface-1)~~;		background: #1f1f23 !important;
	~~color:~~ var(--color-base);		/* switch with var( --color-base ) when supported. */
			color: #f8f9fa;
	}		}
	}		}


	/* Since infobox is a table, many infobox templates take advantage of this to add columns and rows to the infobox itself rather than as part of a new table inside them. This class should be discouraged and removed on the long term, but allows us to at least identify these tables going forward		/* Since infobox is a table, many infobox templates take advantage of this to
			* add columns and rows to the infobox itself rather than as part of a new table
⚫	Currently in use on: [[Module:Infobox3cols]]
			* inside them. This class should be discouraged and removed on the long term,
⚫	Fixes issue described in ~~https~~:~~//phabricator.wikimedia.org/~~F55300125 on Vector 2022.
			* but allows us to at least identify these tables going forward
		⚫	* Currently in use on: [[Module:Infobox3cols]]
		⚫	* Fixes issue described in [[phab:F55300125]] on Vector 2022.
	*/		*/
	@media (min-width: 640px) {		@media (min-width: 640px) {
Line 73:		Line 67:
	body.skin--responsive .infobox-table > tbody {		body.skin--responsive .infobox-table > tbody {
	display: table-row-group;		display: table-row-group;
	}
	body.skin--responsive .infobox-table tr {
	display: table-row !important;
	}		}
	body.skin--responsive .infobox-table th,		body.skin--responsive .infobox-table th,

MtPenguinMonster: Infobox headers

2025-05-03T13:00:00Z

Infobox headers

← Older revision		Revision as of 09:00, 3 May 2025
Line 15:		Line 15:
	color: var(--color-base);		color: var(--color-base);
	border-color: var(--border-color-base);		border-color: var(--border-color-base);
			}

			.infobox-header {
			background-color: var(--color-surface-2);
			color: var(--color-emphasized);
	}		}

MtPenguinMonster: There's a better choice

2025-05-03T12:44:03Z

There's a better choice

← Older revision		Revision as of 08:44, 3 May 2025
Line 14:		Line 14:
	background-color: var(--color-surface-1);		background-color: var(--color-surface-1);
	color: var(--color-base);		color: var(--color-base);
	border-color: var(--color-~~subtle~~);		border-color: var(--border-color-base);
	}		}