MediaWiki:Common.css - Revision history

Abfielder at 12:35, 16 February 2026

2026-02-16T12:35:28Z

← Older revision		Revision as of 12:35, 16 February 2026
Line 24:		Line 24:
	.bbog-featured-title { margin-bottom: 0 !important; padding-bottom: 0 !important; line-height: 1.2 !important; }		.bbog-featured-title { margin-bottom: 0 !important; padding-bottom: 0 !important; line-height: 1.2 !important; }

	/* ~~Force~~ the image ~~wrapper to sit directly under the title~~ */		/* Kill the mysterious vertical gap between title and image */
	.bbog-featured-img { margin-top: 0 !important; padding-top: 0 !important; }		.bbog-featured-img {
	~~.bbog-featured-img figure,~~		margin-top: 0 !important;
	~~.bbog-featured-img .thumb,~~		padding-top: 0 !important;
	~~.bbog-featured-img .thumbinner,~~		line-height: 0 !important;
	~~.bbog-featured-img .mw~~-~~file-element,~~		font-size: 0 !important;
	~~.bbog-featured-img a.image {~~
	~~margin~~: 0 !important;
	~~padding~~: 0 !important;
	}		}

			/* Restore normal behaviour for the image itself */
			.bbog-featured-img img {
			line-height: normal !important;
			font-size: initial !important;
			}


	/* THE FIX: remove Citizen “panel” look in the image area ONLY.		/* THE FIX: remove Citizen “panel” look in the image area ONLY.

Abfielder at 12:34, 16 February 2026

2026-02-16T12:34:25Z

← Older revision		Revision as of 12:34, 16 February 2026
Line 21:		Line 21:
	}		}

	/* ~~Remove any top~~ spacing ~~added by Citizen~~/~~MediaWiki file wrappers~~ */		/* Force the title-to-image spacing tight */
	.bbog-featured-img,		.bbog-featured-title { margin-bottom: 0 !important; padding-bottom: 0 !important; line-height: 1.2 !important; }

			/* Force the image wrapper to sit directly under the title */
			.bbog-featured-img { margin-top: 0 !important; padding-top: 0 !important; }
	.bbog-featured-img figure,		.bbog-featured-img figure,
	.bbog-featured-img .thumb,		.bbog-featured-img .thumb,
Line 28:		Line 31:
	.bbog-featured-img .mw-file-element,		.bbog-featured-img .mw-file-element,
	.bbog-featured-img a.image {		.bbog-featured-img a.image {
	margin~~-top~~: 0 !important;		margin: 0 !important;
	padding~~-top~~: 0 !important;		padding: 0 !important;
	}		}

Abfielder at 12:33, 16 February 2026

2026-02-16T12:33:35Z

@@ Line 19: / Line 19: @@
    font-weight:600;
    margin:0 0 6px 0;
+}

Abfielder at 12:32, 16 February 2026

2026-02-16T12:32:17Z

← Older revision		Revision as of 12:32, 16 February 2026
Line 18:		Line 18:
	font-size:1.1rem;		font-size:1.1rem;
	font-weight:600;		font-weight:600;
	margin:0 0 ~~14px~~ 0;		margin:0 0 6px 0;
	}		}

Abfielder at 12:30, 16 February 2026

2026-02-16T12:30:17Z

← Older revision		Revision as of 12:30, 16 February 2026
Line 1:		Line 1:
	/* CSS placed here will be applied to all skins */		/* CSS placed here will be applied to all skins */

	/* ===== BBOG Featured Wiki Grid ~~(2 cols desktop, 1 col mobile)~~ ===== */		/* ===== BBOG Featured Wiki Grid ===== */
	.bbog-grid{		.bbog-grid{
	display: grid !important;		display:grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;		grid-template-columns:repeat(2,minmax(0,1fr)) !important;
	gap: 40px !important;		gap:40px !important;
	margin-top: 20px !important;		margin-top:20px !important;
	~~align-items: start~~;
	}		}

	@media (max-width: 700px){		@media (max-width:700px){
	.bbog-grid{		.bbog-grid{ grid-template-columns:1fr !important; }
	grid-template-columns: 1fr !important;
	}
	}		}

	~~/* Card layout */~~		.bbog-card{ text-align:center; }
	.bbog-card{
	text-align: center;		.bbog-featured-title{
			font-size:1.1rem;
			font-weight:600;
			margin:0 0 14px 0;
	}		}

	/* ~~Title~~ */		/* THE FIX: remove Citizen “panel” look in the image area ONLY.
	.bbog-featured-~~title~~{		IMPORTANT: only reset visual properties – do NOT touch margin/padding/display here. */
	~~font~~-~~size~~: ~~1.1rem~~;		.bbog-featured-img,
	~~font~~-~~weight~~: ~~600~~;		.bbog-featured-img *{
	~~margin~~: 0 ~~0 14px 0~~;		background:transparent !important;
			box-shadow:none !important;
			border-color:transparent !important;
			outline:0 !important;
	}		}

	/* ~~--- Remove the grey "panel" ONLY from MediaWiki/Citizen file wrappers ---~~ */		/* Also strip borders explicitly where some skins use border shorthand */
	.bbog-featured-img ~~figure,~~		.bbog-featured-img *{
	~~.bbog-featured-img figure[typeof~~*~~="mw:File"],~~		border:0 !important;
	~~.bbog-featured-img .thumb,~~
	~~.bbog-featured-img .thumbinner,~~
	~~.bbog-featured-img .mw-file-element,~~
	~~.bbog-featured-img .mw-file-description,~~
	~~.bbog-featured-img .mw-file-caption,~~
	~~.bbog-featured-img a.image~~{
	~~background: transparent !important;~~
	border~~: 0 !important;~~
	~~box-shadow: none !important;~~
	~~padding: 0 !important;~~
	~~margin: 0 !important; /* IMPORTANT: don't auto-center the wrapper */~~
	~~border-radius~~: 0 !important;
	}		}

	/* ~~Make the image~~ fill the card width ~~(no centering)~~ */		/* Image should fill the card width */
	.bbog-featured-img img{		.bbog-featured-img img{
	display: block !important;		display:block !important;
	width: 100% !important;		width:100% !important;
	height: auto !important;		height:auto !important;
	max-width: none !important; ~~/* IMPORTANT: allow full width */~~		max-width:none !important;
	~~margin: 0 !important; /* IMPORTANT: no auto centering */~~		border-radius:14px !important;
	border-radius: 14px !important;
	}		}

	/* ~~Keep the~~ Enter Wiki ~~button area as-is~~ (Citizen ~~styles it~~) */		/* Leave Enter Wiki styling alone (Citizen can do its button thing) */
	.bbog-featured-link{		.bbog-featured-link{ margin-top:14px; }
	margin-top: 14px;
	}

Abfielder at 12:29, 16 February 2026

2026-02-16T12:29:28Z

← Older revision		Revision as of 12:29, 16 February 2026
Line 1:		Line 1:
	/* CSS placed here will be applied to all skins */		/* CSS placed here will be applied to all skins */

	/* --- ~~BBOG~~: ~~remove Citizen "panel" styling ONLY around the featured images~~ --- */		/* ===== BBOG Featured Wiki Grid (2 cols desktop, 1 col mobile) ===== */
	.bbog-~~featured~~-~~img,~~		.bbog-grid{
	.bbog-featured-img * {		display: grid !important;
	~~background~~: ~~transparent !important~~;		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	~~border~~: ~~0 !important~~;		gap: 40px !important;
	~~box-shadow~~: ~~none !important~~;		margin-top: 20px !important;
			align-items: start;
			}

			@media (max-width: 700px){
			.bbog-grid{
			grid-template-columns: 1fr !important;
			}
			}

			/* Card layout */
			.bbog-card{
			text-align: center;
			}

			/* Title */
			.bbog-featured-title{
			font-size: 1.1rem;
			font-weight: 600;
			margin: 0 0 14px 0;
	}		}

	/* Remove the ~~extra padding~~/~~margins~~ Citizen~~/thumb~~ wrappers ~~add~~ */		/* --- Remove the grey "panel" ONLY from MediaWiki/Citizen file wrappers --- */
	.bbog-featured-img figure,		.bbog-featured-img figure,
			.bbog-featured-img figure[typeof*="mw:File"],
	.bbog-featured-img .thumb,		.bbog-featured-img .thumb,
	.bbog-featured-img .thumbinner,		.bbog-featured-img .thumbinner,
	.bbog-featured-img .mw-file-element,		.bbog-featured-img .mw-file-element,
	.bbog-featured-img a.image {		.bbog-featured-img .mw-file-description,
			.bbog-featured-img .mw-file-caption,
			.bbog-featured-img a.image{
			background: transparent !important;
			border: 0 !important;
			box-shadow: none !important;
	padding: 0 !important;		padding: 0 !important;
	margin: 0 ~~auto~~ !important;		margin: 0 !important; /* IMPORTANT: don't auto-center the wrapper */
	border-radius: 0 !important;		border-radius: 0 !important;
	}		}

	/* ~~Keep~~ the image ~~itself looking good~~ */		/* Make the image fill the card width (no centering) */
	.bbog-featured-img img {		.bbog-featured-img img{
	display: block !important;		display: block !important;
	width: 100% !important;		width: 100% !important;
	height: auto !important;		height: auto !important;
	max-width: ~~560px~~ !important;		max-width: none !important; /* IMPORTANT: allow full width */
	margin: 0 ~~auto~~ !important;		margin: 0 !important; /* IMPORTANT: no auto centering */
	border-radius: 14px !important;		border-radius: 14px !important;
			}

			/* Keep the Enter Wiki button area as-is (Citizen styles it) */
			.bbog-featured-link{
			margin-top: 14px;
	}		}

Abfielder at 12:28, 16 February 2026

2026-02-16T12:28:16Z

← Older revision		Revision as of 12:28, 16 February 2026
Line 1:		Line 1:
	/* CSS placed here will be applied to all skins */		/* CSS placed here will be applied to all skins */

	/* BBOG ~~Featured grid layout (keep it minimal)~~ */		/* --- BBOG: remove Citizen "panel" styling ONLY around the featured images --- */
	.bbog-~~grid{~~		.bbog-featured-img,
	~~display:grid;~~		.bbog-featured-img * {
	~~grid~~-~~template~~-~~columns:repeat(2,minmax(0,1fr));~~		background: transparent !important;
	~~gap~~:~~40px~~;		border: 0 !important;
	~~margin-top~~:~~20px~~;		box-shadow: none !important;
	}
	~~@media (max-width:700px){~~
	~~.bbog-grid{ grid-template~~-~~columns~~:~~1fr~~; }
	}		}

	/* ~~--- THE ONLY FIX YOU WANT: remove~~ the panel behind images --- */		/* Remove the extra padding/margins Citizen/thumb wrappers add */
	/* Citizen~~/MediaWiki wrap images in figure~~/thumb ~~containers. Strip their "panel" styling~~
	~~ONLY inside the featured image area, so buttons/links keep their look.~~ */
	.bbog-featured-img figure,		.bbog-featured-img figure,
	~~.bbog-featured-img figure[typeof*="mw:File"],~~
	.bbog-featured-img .thumb,		.bbog-featured-img .thumb,
	.bbog-featured-img .thumbinner,		.bbog-featured-img .thumbinner,
	.bbog-featured-img .mw-file-element,		.bbog-featured-img .mw-file-element,
	~~.bbog-featured-img .mw-file-description,~~
	.bbog-featured-img a.image {		.bbog-featured-img a.image {
	~~background: transparent !important;~~
	~~border: 0 !important;~~
	~~box-shadow: none !important;~~
	padding: 0 !important;		padding: 0 !important;
	margin: 0 auto !important;		margin: 0 auto !important;
Line 30:		Line 20:
	}		}

	/* ~~Ensure~~ the image itself ~~is still responsive/nice~~ */		/* Keep the image itself looking good */
	.bbog-featured-img img{		.bbog-featured-img img {
	display:block;		display: block !important;
	width:100%;		width: 100% !important;
	height:auto;		height: auto !important;
	max-width:560px;		max-width: 560px !important;
	margin:0 auto;		margin: 0 auto !important;
	border-radius:14px;		border-radius: 14px !important;
	}		}

Abfielder at 12:26, 16 February 2026

2026-02-16T12:26:54Z

← Older revision		Revision as of 12:26, 16 February 2026
Line 1:		Line 1:
	/* CSS placed here will be applied to all skins */		/* CSS placed here will be applied to all skins */

	/* ~~===============================~~		/* BBOG Featured grid layout (keep it minimal) */
	BBOG Featured ~~Wikis Grid~~ (~~NO raw HTML required~~)
	~~===============================~~ */

	.bbog-grid{		.bbog-grid{
	display:grid;		display:grid;
Line 11:		Line 8:
	margin-top:20px;		margin-top:20px;
	}		}

	@media (max-width:700px){		@media (max-width:700px){
	.bbog-grid{ grid-template-columns:1fr; }		.bbog-grid{ grid-template-columns:1fr; }
	}		}

	/* ~~Citizen sometimes styles content divs as panels.~~		/* --- THE ONLY FIX YOU WANT: remove the panel behind images --- */
	~~Explicitly neutralise ONLY our card containers (not the link button). */~~		/* Citizen/MediaWiki wrap images in figure/thumb containers. Strip their "panel" styling
	~~.bbog~~-~~card{~~		ONLY inside the featured image area, so buttons/links keep their look. */
	~~background:transparent !important;~~
	~~border:0 !important;~~
	~~box~~-~~shadow:none !important;~~
	~~padding:0 !important;~~
	~~border~~-~~radius~~:~~0 !important;~~
	~~text~~-~~align:center;~~
	}

	~~.bbog~~-~~featured~~-~~title{~~
	~~font-size:1.1rem;~~
	~~font-weight:600;~~
	~~margin:0 0 14px 0;~~
	}

	/* ~~REMOVE the grey/padded box that~~ Citizen ~~applies to File~~/figure ~~wrappers~~ */
	.bbog-featured-img figure,		.bbog-featured-img figure,
			.bbog-featured-img figure[typeof*="mw:File"],
	.bbog-featured-img .thumb,		.bbog-featured-img .thumb,
	.bbog-featured-img .thumbinner,		.bbog-featured-img .thumbinner,
	.bbog-featured-img .mw-file-element,		.bbog-featured-img .mw-file-element,
	.bbog-featured-img .mw-file-description,		.bbog-featured-img .mw-file-description,
	.bbog-featured-img a.image{		.bbog-featured-img a.image {
	background:transparent !important;		background: transparent !important;
	border:0 !important;		border: 0 !important;
	box-shadow:none !important;		box-shadow: none !important;
	padding:0 !important;		padding: 0 !important;
	margin:0 auto !important;		margin: 0 auto !important;
	border-radius:0 !important;		border-radius: 0 !important;
	}		}

	/* ~~The actual~~ image */		/* Ensure the image itself is still responsive/nice */
	.bbog-featured-img img{		.bbog-featured-img img{
	display:block ~~!important~~;		display:block;
	width:100% ~~!important~~;		width:100%;
	height:auto ~~!important~~;		height:auto;
	max-width:560px ~~!important~~;		max-width:560px;
	margin:0 auto ~~!important~~;		margin:0 auto;
	border-radius:14px ~~!important;~~		border-radius:14px;
	}

	~~/* BUTTON: style only the Enter Wiki link as a button.~~
	~~External links render as <a class="external text"> inside the link div. */~~
	~~.bbog-featured-link{~~
	~~margin-top:14px;~~
	}

	~~.bbog-featured-link a{~~
	~~display:inline-block !important;~~
	~~padding:12px 18px !important;~~
	~~border-radius:12px !important;~~
	~~text-decoration:none !important;~~
	~~font-weight:600 !important;~~
	~~border:1px solid rgba(0,0,0,.10) !important;~~
	~~background:rgba(0,0,0,.04) !important;~~
	}

	~~.bbog-featured-link a:hover{~~
	~~background:rgba(0,0,0,.06) !important~~;
	}		}

Abfielder at 12:25, 16 February 2026

2026-02-16T12:25:35Z

← Older revision		Revision as of 12:25, 16 February 2026
Line 1:		Line 1:
	/* CSS placed here will be applied to all skins */		/* CSS placed here will be applied to all skins */

	/* ===============================		/* ===============================
	BBOG Featured Wikis Grid (~~Citizen-safe~~)		BBOG Featured Wikis Grid (NO raw HTML required)
	~~Goal: NO big boxes around images, ONLY button styling on Enter Wiki~~
	=============================== */		=============================== */

Line 16:		Line 16:
	}		}

	/* Citizen ~~adds panel styling to generic div blocks in~~ content.		/* Citizen sometimes styles content divs as panels.
	~~Force~~ our ~~featured~~ containers ~~to be transparent and unboxed~~. */		Explicitly neutralise ONLY our card containers (not the link button). */
	~~.bbog-grid,~~		.bbog-card{
	~~.bbog-grid~~ .bbog-card,
	~~.bbog-grid .bbog-featured-title,~~
	~~.bbog-grid .bbog-featured-img~~{
	background:transparent !important;		background:transparent !important;
	border:0 !important;		border:0 !important;
Line 27:		Line 24:
	padding:0 !important;		padding:0 !important;
	border-radius:0 !important;		border-radius:0 !important;
			text-align:center;
	}		}

	~~.bbog-card{ text-align:center; }~~

	.bbog-featured-title{		.bbog-featured-title{
Line 37:		Line 33:
	}		}

	/* ~~Strip MediaWiki~~/Citizen ~~file~~ wrappers ~~that can introduce padding/background~~ */		/* REMOVE the grey/padded box that Citizen applies to File/figure wrappers */
	.bbog-featured-img figure,		.bbog-featured-img figure,
	.bbog-featured-img .thumb,		.bbog-featured-img .thumb,
	.bbog-featured-img .thumbinner,		.bbog-featured-img .thumbinner,
	.bbog-featured-img .mw-file-element,		.bbog-featured-img .mw-file-element,
			.bbog-featured-img .mw-file-description,
	.bbog-featured-img a.image{		.bbog-featured-img a.image{
	background:transparent !important;		background:transparent !important;
Line 51:		Line 48:
	}		}

	/* ~~Image itself~~ */		/* The actual image */
	.bbog-featured-img img{		.bbog-featured-img img{
	display:block !important;		display:block !important;
Line 59:		Line 56:
	margin:0 auto !important;		margin:0 auto !important;
	border-radius:14px !important;		border-radius:14px !important;
	~~transition:transform .15s ease;~~
	}		}

	.bbog-featured-~~img img:hover~~{ ~~transform~~:~~scale(1.02)~~; }		/* BUTTON: style only the Enter Wiki link as a button.
			External links render as <a class="external text"> inside the link div. */
			.bbog-featured-link{
			margin-top:14px;
			}

	~~/* Button: ONLY this should look like a box */~~		.bbog-featured-link a{
	.bbog-~~enter~~{		display:inline-block !important;
	display:inline-block;		padding:12px 18px !important;
	~~margin-top:14px~~;		border-radius:12px !important;
	padding:12px 18px;		text-decoration:none !important;
	border-radius:12px;		font-weight:600 !important;
	text-decoration:none;		border:1px solid rgba(0,0,0,.10) !important;
	font-weight:600;		background:rgba(0,0,0,.04) !important;
	border:1px solid rgba(0,0,0,.08);
	background:rgba(0,0,0,.04);
	}		}

	.bbog-~~enter~~:hover{		.bbog-featured-link a:hover{
	background:rgba(0,0,0,.06);		background:rgba(0,0,0,.06) !important;
	}		}

Abfielder at 12:23, 16 February 2026

2026-02-16T12:23:41Z

← Older revision		Revision as of 12:23, 16 February 2026
Line 1:		Line 1:
	/* CSS placed here will be applied to all skins */		/* CSS placed here will be applied to all skins */

	/* ===============================		/* ===============================
	~~Big Book of Gaming -~~ Featured Wikis Grid		BBOG Featured Wikis Grid (Citizen-safe)
			Goal: NO big boxes around images, ONLY button styling on Enter Wiki
	=============================== */		=============================== */

	~~/* Grid layout */~~		.bbog-grid{
	.bbog-grid {		display:grid;
	display: grid;		grid-template-columns:repeat(2,minmax(0,1fr));
	grid-template-columns: repeat(2, minmax(0, 1fr));		gap:40px;
	gap: 40px;		margin-top:20px;
	margin-top: 20px;
	}		}

	@media (max-width: 700px) {		@media (max-width:700px){
	.bbog-grid {		.bbog-grid{ grid-template-columns:1fr; }
	grid-template-columns: 1fr;
	}
	}		}

	/* ~~Remove~~ Citizen content-~~block styling ONLY from~~ card ~~container */~~		/* Citizen adds panel styling to generic div blocks in content.
	.mw-~~parser~~-~~output >~~ .bbog-grid > .bbog-~~card~~ {		Force our featured containers to be transparent and unboxed. */
	background: transparent !important;		.bbog-grid,
	border: ~~none~~ !important;		.bbog-grid .bbog-card,
	box-shadow: none !important;		.bbog-grid .bbog-featured-title,
	padding: 0 !important;		.bbog-grid .bbog-featured-img{
	border-radius: 0 !important;		background:transparent !important;
			border:0 !important;
			box-shadow:none !important;
			padding:0 !important;
			border-radius:0 !important;
	}		}

	~~/* Title styling */~~		.bbog-card{ text-align:center; }
	.bbog-featured-title {
	font-size: 1.1rem;		.bbog-featured-title{
	font-weight: 600;		font-size:1.1rem;
	margin~~-bottom~~: 14px;		font-weight:600;
			margin:0 0 14px 0;
	}		}

	/* ~~Remove image wrapper styling ONLY inside image area~~ */		/* Strip MediaWiki/Citizen file wrappers that can introduce padding/background */
	.bbog-featured-img figure,		.bbog-featured-img figure,
	.bbog-featured-img .thumb,		.bbog-featured-img .thumb,
	.bbog-featured-img .thumbinner,		.bbog-featured-img .thumbinner,
	.bbog-featured-img .mw-file-element {		.bbog-featured-img .mw-file-element,
	background: transparent !important;		.bbog-featured-img a.image{
	border: ~~none~~ !important;		background:transparent !important;
	box-shadow: none !important;		border:0 !important;
	padding: 0 !important;		box-shadow:none !important;
			padding:0 !important;
			margin:0 auto !important;
			border-radius:0 !important;
	}		}

	/* ~~Clean image~~ */		/* Image itself */
	.bbog-featured-img img {		.bbog-featured-img img{
	display: block !important;		display:block !important;
	width: 100% !important;		width:100% !important;
	height: auto !important;		height:auto !important;
	max-width: 560px !important;		max-width:560px !important;
	margin: 0 auto !important;		margin:0 auto !important;
	border-radius: 14px !important;		border-radius:14px !important;
	transition: transform 0.15s ease;		transition:transform .15s ease;
	}		}

	.bbog-featured-img img:hover {		.bbog-featured-img img:hover{ transform:scale(1.02); }
	transform: scale(1.02);
			/* Button: ONLY this should look like a box */
			.bbog-enter{
			display:inline-block;
			margin-top:14px;
			padding:12px 18px;
			border-radius:12px;
			text-decoration:none;
			font-weight:600;
			border:1px solid rgba(0,0,0,.08);
			background:rgba(0,0,0,.04);
	}		}

	~~/* Spacing above Enter Wiki button */~~		.bbog-enter:hover{
	.bbog-~~featured-link~~ {		background:rgba(0,0,0,.06);
	~~margin-top~~: ~~14px~~;
	}		}