MediaWiki:Common.css - Revision history

Robyn.Blaber at 02:48, 20 February 2026

2026-02-20T02:48:06Z

← Older revision		Revision as of 02:48, 20 February 2026
Line 673:		Line 673:

	.ot-infobox-image img {		.ot-infobox-image img {
			width: 100% !important; /* Forces expansion to edges */
			height: auto;
			display: block;
			}

			.responsive-lore-img img {
	width: 100% !important; /* Forces expansion to edges */		width: 100% !important; /* Forces expansion to edges */
	height: auto;		height: auto;

2026-02-20T02:43:00Z

← Older revision		Revision as of 02:43, 20 February 2026
Line 744:		Line 744:
	}		}

	/* ~~Mobile Breakpoint: 720px~~ */		/* Responsive Lore Images */
	@media screen and (max-width: ~~720px~~) {		@media screen and (max-width: 600px) {
	~~figure~~.ot-~~infobox~~-~~image~~{		.responsive-lore-img {
	float: none !important; ~~/* Forces text to drop below */~~		float: none !important;
	~~display~~: ~~block~~ !important;		width: 100% !important;
	margin: ~~1em auto~~ !important; ~~/* Centers the image */~~		margin: 10px 0 !important;
	~~width: 350px !important; /* Your preferred width */~~		text-align: center;
	~~max~~-~~width~~: ~~100% !important~~; ~~/* Shrinks if phone is narrow */~~
	}		}

	/* ~~Ensure~~ the ~~caption doesn't do anything weird~~ */		/* Ensures the image inside scales to the new 100% width */
	ot-~~infobox~~-~~image figcaption~~ {		.responsive-lore-img img {
	~~text~~-~~align~~: ~~center !important~~;		max-width: 100%;
			height: auto;
	}		}
	}		}

2026-02-20T02:38:39Z

← Older revision		Revision as of 02:38, 20 February 2026
Line 745:		Line 745:

	/* Mobile Breakpoint: 720px */		/* Mobile Breakpoint: 720px */
	@media screen and (max-width: 720px) {		@media screen and (max-width: 720px) {
	figure.mw-~~halign~~-~~left,~~		figure.ot-infobox-image{
	~~figure.mw-halign-right~~ {
	float: none !important; /* Forces text to drop below */		float: none !important; /* Forces text to drop below */
	display: block !important;		display: block !important;
Line 756:		Line 755:

	/* Ensure the caption doesn't do anything weird */		/* Ensure the caption doesn't do anything weird */
	~~figure.mw~~-~~halign~~-~~left figcaption,~~		ot-infobox-image figcaption {
	~~figure.mw-halign-right~~ figcaption {
	text-align: center !important;		text-align: center !important;
	}		}
	}		}

2026-02-18T06:22:45Z

← Older revision		Revision as of 06:22, 18 February 2026
Line 738:		Line 738:
	}		}

	/* Target the ~~specific link and image classes from your snippet~~ */		/* Target the MediaWiki alignment class specifically */
	.mw-~~file~~-~~description~~,		figure.mw-halign-left,
	.mw-~~file~~-~~element~~ {		figure.mw-halign-right {
	~~max-width~~: ~~100% !important;~~		margin: 1em 0; /* Adds some breathing room */
	~~height: auto !important~~;
	}		}

	/* Mobile Breakpoint: ~~Force images to be their own block~~ */		/* Mobile Breakpoint: 720px */
	@media screen and (max-width: 720px) {		@media screen and (max-width: 720px) {
	~~/* Target the container of the image link */~~		figure.mw-halign-left,
	.mw-~~file~~-~~description~~ {		figure.mw-halign-right {
			float: none !important; /* Forces text to drop below */
	display: block !important;		display: block !important;
	~~float: none !important;~~
	margin: 1em auto !important; /* Centers the image */		margin: 1em auto !important; /* Centers the image */
	~~text~~-~~align~~: ~~center~~;		width: 350px !important; /* Your preferred width */
			max-width: 100% !important; /* Shrinks if phone is narrow */
	}		}

	.mw-~~file~~-~~element~~ {		/* Ensure the caption doesn't do anything weird */
	~~display: block !important;~~		figure.mw-halign-left figcaption,
	~~float: none !important;~~		figure.mw-halign-right figcaption {
	~~margin: 0 auto !important;~~		text-align: center !important;
	~~width: 350px !important; /* Your preferred width */~~
	~~max~~-~~width~~: ~~100%~~ !important; ~~/* Shrink to fit phone screen */~~
	}		}
	}		}

2026-02-18T06:16:46Z

← Older revision		Revision as of 06:16, 18 February 2026
Line 738:		Line 738:
	}		}

	/* ~~Responsive Images: Prevent squashed text~~ */		/* Target the specific link and image classes from your snippet */
	~~figure[typeof="~~mw~~:File/Thumb"]~~,		.mw-file-description,
	.~~thumb.tright,~~		.mw-file-element {
	~~.thumb.tleft~~ {
	max-width: 100% !important;		max-width: 100% !important;
	~~box-sizing~~: ~~border-box~~;		height: auto !important;
	}		}

	/* Mobile Breakpoint ~~for Images~~ */		/* Mobile Breakpoint: Force images to be their own block */
	@media screen and (max-width: 720px) {		@media screen and (max-width: 720px) {
	~~figure[typeof="mw:File~~/~~Thumb"],~~		/* Target the container of the image link */
	.~~thumb.tright,~~		.mw-file-description {
	~~.thumb.tleft,~~
	~~.thumbinner~~ {
	~~float: none !important; /* Kill the wrap-around */~~
	display: block !important;		display: block !important;
	margin: 1em auto !important; /* ~~Center~~ the image */		float: none !important;
	width: 350px !important; /* ~~Match your 350px preference~~ */		margin: 1em auto !important; /* Centers the image */
	max-width: 100% !important; /* Shrink if phone ~~is < 350px~~ */		text-align: center;
			}

			.mw-file-element {
			display: block !important;
			float: none !important;
			margin: 0 auto !important;
			width: 350px !important; /* Your preferred width */
			max-width: 100% !important; /* Shrink to fit phone screen */
	}		}
	}		}

2026-02-18T06:11:28Z

@@ Line 735: / Line 735: @@
          margin: 1em auto !important; /* Centers the box and pushes text down */
          clear: both !important;
+     }
+}

2026-02-18T06:08:28Z

@@ Line 724: / Line 724: @@
 #mw-content-text p {
      display: block;
+}

2026-02-17T17:22:41Z

@@ Line 709: / Line 709: @@
      font-size: 0.9em;
      color: #ffffff;
+}

2026-02-16T19:22:42Z

@@ Line 642: / Line 642: @@
      font-family: 'Holitter', 'Segoe UI', serif;
      font-size: 1.8em;
      text-align: center;
      font-weight: bold;

2026-02-16T05:36:33Z

← Older revision		Revision as of 05:36, 16 February 2026
Line 456:		Line 456:
	margin-left: 1.5%;		margin-left: 1.5%;
	}		}
	~~@media screen and (max-width: 675px){~~
	~~.stat-block.wide{~~		.portable-infobox,
	~~min-width: 280px;~~		.infobox {
	}		width: 350px !important;
	~~.stat-block.wide~~ .~~section~~-~~left~~,		float: right;
	~~.stat-block.wide~~ .~~section-right~~{		margin: 0 0 1em 1em;
	~~display~~: ~~block~~;
	~~width~~: ~~100%~~;
	}
	~~.stat-block.wide .section-left{~~
	margin: 0;
	}
	~~.stat-block.wide .section-right{~~
	~~margin:~~ 0;
	}
	}		}

			@media screen and (max-width: 720px) {
			.portable-infobox,
			.infobox {
			float: none !important; /* Stops the text from trying to wrap */
			margin: 0 auto 1.5em auto !important; /* Centers the box and adds space below */
			width: 350px !important; /* Keeps your preferred 350px width */
			max-width: 100% !important; /* Safety: shrinks ONLY if phone is narrower than 350px */
			display: block;
			}
			}

	.orange-border{		.orange-border{
	display: block;		display: block;