MediaWiki:Common.css - Revision history

SGPolitico at 13:02, 24 May 2026

2026-05-24T13:02:41Z

@@ Line 65: / Line 65: @@
 #p-tb { display: none; }       /* Toolbox sidebar */
 /* --- MOBILE RESPONSIVE OVERRIDES --- */
@@ Line 110: / Line 94: @@
          min-width: 100% !important;
          display: table !important;
+     }
+}

SGPolitico at 12:48, 24 May 2026

2026-05-24T12:48:40Z

@@ Line 42: / Line 42: @@
      font-size: 88%;
      line-height: 1.5em;
+}

SGPolitico at 12:46, 24 May 2026

2026-05-24T12:46:18Z

@@ Line 31: / Line 31: @@
      font-weight: bold;
      width: 35%;
+}

SGPolitico at 12:34, 24 May 2026

2026-05-24T12:34:27Z

← Older revision		Revision as of 12:34, 24 May 2026
Line 61:		Line 61:
	@media screen and (max-width: 768px) {		@media screen and (max-width: 768px) {

	/* ~~1. AGGRESSIVELY FORCE~~ THE ~~FLOATING CONTAINER TO COLLAPSE~~ */		/* THE ULTIMATE OVERRIDE: Target the exact inline style string directly */
	~~html body .mw-body .mw-parser-output~~ div[style*="~~float~~: ~~right~~"],		div[style*="width:30%"],
	~~html body .mw-body .mw-parser-output~~ div[style*="~~float~~:~~right~~"],		div[style*="width: 30%"],
	~~html body .mw-body .mw-parser-output~~ div[style*="~~width~~:~~30%~~"],		div[style*="float:right"],
	~~html body .mw-body .mw-parser-output~~ div[style*="~~width~~: ~~30%~~"] {		div[style*="float: right"] {
	float: none !important;		float: none !important;
	width: 100% !important;		width: 100% !important;
	max-width: 100% !important;		max-width: 100% !important;
	min-width: 100% !important;		min-width: 100% !important;
	margin-left: 0 !important;		margin-left: 0px !important;
	margin-right: 0 !important;		margin-right: 0px !important;
	margin-top: 15px !important;		margin-top: 15px !important;
	margin-bottom: 15px !important;		margin-bottom: 15px !important;
Line 77:		Line 77:
	display: block !important;		display: block !important;
	}		}

	/* ~~2. FORCE THE WIKITABLE TO BE FULL WIDTH AND PREVENT CROPPING~~ */		/* Force the wikitable inside it to stop cropping and stretch to 100% */
	~~html body .mw-body .mw-parser-output div~~ div table.wikitable,		div[style*="width:30%"] table.wikitable,
	~~html body .mw-body .mw-parser-output~~ div table.wikitable,		div[style*="width: 30%"] table.wikitable,
	.mw-parser-output table.wikitable {		.mw-parser-output table.wikitable {
	width: 100% !important;		width: 100% !important;
Line 86:		Line 86:
	min-width: 100% !important;		min-width: 100% !important;
	display: table !important;		display: table !important;
	~~box-sizing: border-box !important;~~
	~~float: none !important;~~
	}

	~~/* 3. RESET TABLE CELL WIDTHS */~~
	~~/* Your screenshot shows inline styles like <td style="width:33%"> inside the table.~~
	~~This strips those down so they don't break on a mobile phone viewport. */~~
	~~html body .mw-body .mw-parser-output table.wikitable tr td,~~
	~~html body .mw-body .mw-parser-output table.wikitable tr th {~~
	~~width: auto !important;~~
	~~max-width: 100% !important;~~
	~~white-space: normal !important;~~
	~~word-break: break-word !important;~~
	~~padding: 8px !important;~~
	}

	~~/* 4. LOGO IMAGE RESIZING */~~
	~~html body .mw-body .mw-parser-output table.wikitable img {~~
	~~max-width: 100% !important;~~
	~~height: auto !important;~~
	}		}
	}		}

SGPolitico at 12:30, 24 May 2026

2026-05-24T12:30:21Z

← Older revision		Revision as of 12:30, 24 May 2026
Line 57:		Line 57:
	}		}
	}		}


	/* --- MOBILE RESPONSIVE OVERRIDES --- */		/* --- MOBILE RESPONSIVE OVERRIDES --- */
	@media screen and (max-width: 768px) {		@media screen and (max-width: 768px) {

	/* 1. ~~Force the outer inline style wrapper to take up 100% full width~~ */		/* 1. AGGRESSIVELY FORCE THE FLOATING CONTAINER TO COLLAPSE */
	.mw-parser-output > div[style*="float: right"],		html body .mw-body .mw-parser-output div[style*="float: right"],
	.mw-parser-output > div[style*="float:right"] {		html body .mw-body .mw-parser-output div[style*="float:right"],
			html body .mw-body .mw-parser-output div[style*="width:30%"],
			html body .mw-body .mw-parser-output div[style*="width: 30%"] {
	float: none !important;		float: none !important;
	width: 100% !important;		width: 100% !important;
	max-width: 100% !important;		max-width: 100% !important;
			min-width: 100% !important;
	margin-left: 0 !important;		margin-left: 0 !important;
	margin-right: 0 !important;		margin-right: 0 !important;
Line 76:		Line 78:
	}		}

	/* 2. ~~FIX~~ THE ~~CROP: Force the internal wikitable to expand fully without squeezed boundaries~~ */		/* 2. FORCE THE WIKITABLE TO BE FULL WIDTH AND PREVENT CROPPING */
	.mw-parser-output > div~~[style*="float"]~~ table.wikitable {		html body .mw-body .mw-parser-output div div table.wikitable,
			html body .mw-body .mw-parser-output div table.wikitable,
			.mw-parser-output table.wikitable {
	width: 100% !important;		width: 100% !important;
	max-width: 100% !important;		max-width: 100% !important;
	display: table !important; ~~/* Forces standard tabular structure over flex distortion */~~		min-width: 100% !important;
			display: table !important;
	box-sizing: border-box !important;		box-sizing: border-box !important;
			float: none !important;
	}		}

	/* 3. CELL ~~RESET~~: ~~Stop columns~~ inside the ~~infobox~~ table ~~from compressing text into tiny slivers~~ */		/* 3. RESET TABLE CELL WIDTHS */
	.mw-parser-output ~~> div[style*="float"]~~ table.wikitable td,		/* Your screenshot shows inline styles like <td style="width:33%"> inside the table.
	.mw-parser-output ~~> div[style*="float"]~~ table.wikitable th {		This strips those down so they don't break on a mobile phone viewport. */
	width: auto !important; ~~/* Overrides any hardcoded cell pixel/percentage widths */~~		html body .mw-body .mw-parser-output table.wikitable tr td,
	white-space: normal !important; ~~/* Forces text wrapping instead of running off-screen */~~		html body .mw-body .mw-parser-output table.wikitable tr th {
	word-break: break-word !important; ~~/* Safely breaks long words or non-English characters */~~		width: auto !important;
	padding: ~~6px~~ 8px !important; ~~/* Normalizes layout padding on mobile devices */~~		max-width: 100% !important;
			white-space: normal !important;
			word-break: break-word !important;
			padding: 8px !important;
	}		}

	/* 4. IMAGE ~~RESPONSIVENESS: Ensure the main party logo scaling fits nicely inside the expanded row~~ */		/* 4. LOGO IMAGE RESIZING */
	.mw-parser-output ~~> div[style*="float"]~~ table.wikitable img {		html body .mw-body .mw-parser-output table.wikitable img {
	max-width: 100% !important;		max-width: 100% !important;
	height: auto !important;		height: auto !important;
	}		}
	}		}

SGPolitico at 12:28, 24 May 2026

2026-05-24T12:28:02Z

← Older revision		Revision as of 12:28, 24 May 2026
Line 62:		Line 62:
	@media screen and (max-width: 768px) {		@media screen and (max-width: 768px) {

	/* ~~FORCE INLINE STYLE DIVS THAT FLOAT RIGHT TO STACK ON MOBILE~~ */		/* 1. Force the outer inline style wrapper to take up 100% full width */
	.mw-parser-output > div[style*="float: right"],		.mw-parser-output > div[style*="float: right"],
	.mw-parser-output > div[style*="float:right"] {		.mw-parser-output > div[style*="float:right"] {
Line 69:		Line 69:
	max-width: 100% !important;		max-width: 100% !important;
	margin-left: 0 !important;		margin-left: 0 !important;
			margin-right: 0 !important;
	margin-top: 15px !important;		margin-top: 15px !important;
	margin-bottom: 15px !important;		margin-bottom: 15px !important;
Line 75:		Line 76:
	}		}

	/* ~~Ensure~~ the ~~table element inside it scales up cleanly~~ */		/* 2. FIX THE CROP: Force the internal wikitable to expand fully without squeezed boundaries */
	.mw-parser-output > div[style*="float"] table {		.mw-parser-output > div[style*="float"] table.wikitable {
	width: 100% !important;		width: 100% !important;
	max-width: 100% !important;		max-width: 100% !important;
	display: table !important;		display: table !important; /* Forces standard tabular structure over flex distortion */
			box-sizing: border-box !important;
			}

			/* 3. CELL RESET: Stop columns inside the infobox table from compressing text into tiny slivers */
			.mw-parser-output > div[style*="float"] table.wikitable td,
			.mw-parser-output > div[style*="float"] table.wikitable th {
			width: auto !important; /* Overrides any hardcoded cell pixel/percentage widths */
			white-space: normal !important; /* Forces text wrapping instead of running off-screen */
			word-break: break-word !important; /* Safely breaks long words or non-English characters */
			padding: 6px 8px !important; /* Normalizes layout padding on mobile devices */
			}

			/* 4. IMAGE RESPONSIVENESS: Ensure the main party logo scaling fits nicely inside the expanded row */
			.mw-parser-output > div[style*="float"] table.wikitable img {
			max-width: 100% !important;
			height: auto !important;
	}		}
	}		}

SGPolitico at 12:22, 24 May 2026

2026-05-24T12:22:15Z

@@ Line 60: / Line 60: @@
 /* --- MOBILE RESPONSIVE OVERRIDES --- */
 @media screen and (max-width: 768px) {
-     /* Force your custom container to drop down */
+     /* FORCE INLINE STYLE DIVS THAT FLOAT RIGHT TO STACK ON MOBILE */
-     .infobox-container {
+     .mw-parser-output > div[style*="float: right"],
          float: none !important;
          width: 100% !important;
@@ Line 72: / Line 72: @@
          margin-bottom: 15px !important;
          clear: both !important;
+     }
-     /* CRITICAL FIX: Force ALL tables trying to float right on mobile
+     /* Ensure the table element inside it scales up cleanly */
-       to drop down into their own full-width rows
+     .mw-parser-output > div[style*="float"] table {
          width: 100% !important;
          max-width: 100% !important;
-         margin: 15px 0 !important;
+         display: table !important;
+     }
+}

SGPolitico at 12:15, 24 May 2026

2026-05-24T12:15:55Z

@@ Line 63: / Line 63: @@
 @media screen and (max-width: 768px) {
-     /* Force your custom infobox to dropped down as a full-width row instead of floating */
+     /* Force your custom container to drop down */
      .infobox-container {
          float: none !important;
@@ Line 72: / Line 72: @@
          margin-bottom: 15px !important;
          clear: both !important;
+     }

SGPolitico at 12:13, 24 May 2026

2026-05-24T12:13:09Z

← Older revision		Revision as of 12:13, 24 May 2026
Line 1:		Line 1:
	/* CSS placed here will be applied to all skins */		/* CSS placed here will be applied to all skins */

			/* --- INFOBOX STYLING --- */
	.infobox-container {		.infobox-container {
	width: 30%;		width: 30%;
Line 31:		Line 33:
	}		}

			/* --- UI CLEANUP --- */
	/* Hide wiki UI elements — archive site, not community wiki */		/* Hide wiki UI elements — archive site, not community wiki */
	#ca-history { display: none; }		#ca-history { display: none; }
Line 37:		Line 40:
	#ca-ve-edit { display: none; } /* Visual editor tab if installed */		#ca-ve-edit { display: none; } /* Visual editor tab if installed */
	#p-tb { display: none; } /* Toolbox sidebar */		#p-tb { display: none; } /* Toolbox sidebar */


	/* --- MOBILE AD STYLING --- */		/* --- MOBILE AD STYLING --- */
Line 47:		Line 51:
	}		}

	/* ~~--- DESKTOP AD SIDEBAR STYLING --- */~~		/* If the user is on a wide desktop, completely hide the mobile banner container */
	~~/* Rips~~ the ~~player out of the layout and floats it~~ on the ~~right side of the screen~~ */		@media screen and (min-width: 601px) {
	@media screen and (min-width: ~~1100px~~) {		.wiki-mobile-ad-container {
	.wiki-~~desktop~~-ad-~~sidebar~~ {		display: none !important;
	display: ~~block~~ !important;
	~~position: fixed;~~
	~~right: 25px; /* Distance from the right edge of the screen */~~
	~~top: 160px; /* Distance from the top header */~~
	~~width: 300px; /* Matches standard ad layout width */~~
	~~height: 600px; /* TEMPORARY: Gives it height so we can see the test box */~~
	~~background-color: rgba(255, 0, 0, 0.1); /* TEMPORARY: Light red tint */~~
	~~border: 2px dashed red; /* TEMPORARY: Red dotted line */~~
	~~z-index: 9999; /* Keeps it floating above content */~~
	}		}
	}		}

	/* --- RESPONSIVE ~~VISIBILITY CONTROLS~~ --- */
	/* ~~If the screen is too narrow (like a laptop), hide the desktop sidebar so it doesn't overlap text~~ */		/* --- MOBILE RESPONSIVE OVERRIDES --- */
	@media screen and (max-width: ~~1099px~~) {		/* This section triggers only on mobile phones and small tablets */
	.~~wiki~~-~~desktop~~-ad-~~sidebar~~ {		@media screen and (max-width: 768px) {
	display: ~~none~~ !important;
			/* Force your custom infobox to dropped down as a full-width row instead of floating */
			.infobox-container {
			float: none !important;
			width: 100% !important;
			max-width: 100% !important;
			margin-left: 0 !important;
			margin-top: 15px !important;
			margin-bottom: 15px !important;
			clear: both !important;
			}

			/* Ensure the internal infobox table adapts beautifully to full width */
			.infobox-table {
			width: 100% !important;
			}

			/* Fix native wiki galleries so they don't overflow horizontally */
			ul.gallery {
			display: flex !important;
			flex-wrap: wrap !important;
			justify-content: center !important;
			padding: 0 !important;
			width: 100% !important;
	}		}
	}

	/* ~~If the user is~~ on ~~a desktop, completely hide the~~ mobile ~~banner container~~ */		/* Set gallery items to a flexible grid layout (2 images per row on mobile) */
	~~@media screen and (min~~-width: ~~601px)~~ {		li.gallerybox {
	.~~wiki~~-~~mobile-ad-container {~~		flex: 1 1 45% !important;
	~~display~~: ~~none~~ !important;		max-width: 50% !important;
			height: auto !important;
			box-sizing: border-box !important;
			}

			li.gallerybox div {
			width: 100% !important;
			}

			li.gallerybox .thumb img {
			max-width: 100% !important;
			height: auto !important;
	}		}
	}		}

SGPolitico at 12:04, 24 May 2026

2026-05-24T12:04:55Z

← Older revision		Revision as of 12:04, 24 May 2026
Line 37:		Line 37:
	#ca-ve-edit { display: none; } /* Visual editor tab if installed */		#ca-ve-edit { display: none; } /* Visual editor tab if installed */
	#p-tb { display: none; } /* Toolbox sidebar */		#p-tb { display: none; } /* Toolbox sidebar */

			/* --- MOBILE AD STYLING --- */
			/* Centers the mobile ad banner under the article title */
			.wiki-mobile-ad-container {
			display: block;
			text-align: center;
			margin: 15px auto;
			max-width: 100%;
			}

			/* --- DESKTOP AD SIDEBAR STYLING --- */
			/* Rips the player out of the layout and floats it on the right side of the screen */
			@media screen and (min-width: 1100px) {
			.wiki-desktop-ad-sidebar {
			display: block !important;
			position: fixed;
			right: 25px; /* Distance from the right edge of the screen */
			top: 160px; /* Distance from the top header */
			width: 300px; /* Matches standard ad layout width */
			height: 600px; /* TEMPORARY: Gives it height so we can see the test box */
			background-color: rgba(255, 0, 0, 0.1); /* TEMPORARY: Light red tint */
			border: 2px dashed red; /* TEMPORARY: Red dotted line */
			z-index: 9999; /* Keeps it floating above content */
			}
			}

			/* --- RESPONSIVE VISIBILITY CONTROLS --- */
			/* If the screen is too narrow (like a laptop), hide the desktop sidebar so it doesn't overlap text */
			@media screen and (max-width: 1099px) {
			.wiki-desktop-ad-sidebar {
			display: none !important;
			}
			}

			/* If the user is on a desktop, completely hide the mobile banner container */
			@media screen and (min-width: 601px) {
			.wiki-mobile-ad-container {
			display: none !important;
			}
			}