MediaWiki:Citizen.css - Revision history

Khalid: Blanked the page

2026-04-21T18:28:12Z

Blanked the page

← Older revision		Revision as of 18:28, 21 April 2026
Line 1:		Line 1:
	~~/* Remove any top margin from infoboxes */~~
	~~.infobox {~~
	~~margin-top: 0 !important;~~
	~~vertical-align: top;~~
	}
	~~/* Prevent paragraph wrapping around infobox */~~
	~~.infobox + * {~~
	~~clear: none;~~
	}

	~~/* =========================~~
	~~TAB BAR CONTAINER~~
	~~========================= */~~
	~~.wt-tabs {~~
	~~display: inline-flex;~~
	~~flex-wrap: wrap;~~
	~~gap: 0;~~
	~~border-bottom: 2px solid var(--color-base--subtle, #a2a9b1);~~
	~~margin-bottom: 1.25em;~~
	~~padding: 0;~~
	~~align-items: flex-end;~~
	}

	~~/* =========================~~
	~~TAB SPANS (wrappers)~~
	~~========================= */~~
	~~.wt-tab {~~
	~~display: inline-block;~~
	~~position: relative;~~
	~~margin-bottom: -2px; /* overlap container border-bottom */~~
	}

	~~/* =========================~~
	~~TAB LINKS~~
	~~========================= */~~
	~~.wt-tab a {~~
	~~display: inline-block;~~
	~~padding: 0.4em 0.9em;~~
	~~text-decoration: none;~~
	~~color: var(--color-base, #54595d);~~
	~~background: transparent;~~
	~~border: 2px solid transparent;~~
	~~border-bottom: none;~~
	~~border-radius: 4px 4px 0 0;~~
	~~line-height: 1.4;~~
	~~white-space: nowrap;~~
	~~font-size: 0.9em;~~
	~~transition: background 0.15s, color 0.15s;~~
	}

	~~/* =========================~~
	~~HOVER~~
	~~========================= */~~
	~~.wt-tab a:hover {~~
	~~background: var(--color-surface-2, rgba(54,108,204,0.07));~~
	~~color: var(--color-progressive, #36c);~~
	}

	~~/* =========================~~
	~~ACTIVE TAB~~
	~~.is-active is set by #ifeq in Template:SubTabs~~
	~~========================= */~~
	~~.wt-tab.is-active a {~~
	~~font-weight: 600;~~
	~~color: var(--color-progressive, #36c);~~
	~~background: var(--color-surface-0, #fff);~~
	~~border-color: var(--color-base--subtle, #a2a9b1);~~
	~~border-bottom-color: var(--color-surface-0, #fff); /* "cuts into" the bottom border */~~
	}

Khalid: Undo revision 210 by Khalid (talk)

2026-04-21T18:27:31Z

Undo revision 210 by Khalid (talk)

← Older revision	Revision as of 18:27, 21 April 2026
Line 1:	Line 1:
		/* Remove any top margin from infoboxes */
		.infobox {
		margin-top: 0 !important;
		vertical-align: top;
		}
		/* Prevent paragraph wrapping around infobox */
		.infobox + * {
		clear: none;
		}

		/* =========================
		TAB BAR CONTAINER
		========================= */
		.wt-tabs {
		display: inline-flex;
		flex-wrap: wrap;
		gap: 0;
		border-bottom: 2px solid var(--color-base--subtle, #a2a9b1);
		margin-bottom: 1.25em;
		padding: 0;
		align-items: flex-end;
		}

		/* =========================
		TAB SPANS (wrappers)
		========================= */
		.wt-tab {
		display: inline-block;
		position: relative;
		margin-bottom: -2px; /* overlap container border-bottom */
		}

		/* =========================
		TAB LINKS
		========================= */
		.wt-tab a {
		display: inline-block;
		padding: 0.4em 0.9em;
		text-decoration: none;
		color: var(--color-base, #54595d);
		background: transparent;
		border: 2px solid transparent;
		border-bottom: none;
		border-radius: 4px 4px 0 0;
		line-height: 1.4;
		white-space: nowrap;
		font-size: 0.9em;
		transition: background 0.15s, color 0.15s;
		}

		/* =========================
		HOVER
		========================= */
		.wt-tab a:hover {
		background: var(--color-surface-2, rgba(54,108,204,0.07));
		color: var(--color-progressive, #36c);
		}

		/* =========================
		ACTIVE TAB
		.is-active is set by #ifeq in Template:SubTabs
		========================= */
		.wt-tab.is-active a {
		font-weight: 600;
		color: var(--color-progressive, #36c);
		background: var(--color-surface-0, #fff);
		border-color: var(--color-base--subtle, #a2a9b1);
		border-bottom-color: var(--color-surface-0, #fff); /* "cuts into" the bottom border */
		}

Khalid: Blanked the page

2026-04-21T18:10:51Z

Blanked the page

← Older revision		Revision as of 18:10, 21 April 2026
Line 1:		Line 1:
	~~/* Remove any top margin from infoboxes */~~
	~~.infobox {~~
	~~margin-top: 0 !important;~~
	~~vertical-align: top;~~
	}
	~~/* Prevent paragraph wrapping around infobox */~~
	~~.infobox + * {~~
	~~clear: none;~~
	}

	~~/* =========================~~
	~~TAB BAR CONTAINER~~
	~~========================= */~~
	~~.wt-tabs {~~
	~~display: inline-flex;~~
	~~flex-wrap: wrap;~~
	~~gap: 0;~~
	~~border-bottom: 2px solid var(--color-base--subtle, #a2a9b1);~~
	~~margin-bottom: 1.25em;~~
	~~padding: 0;~~
	~~align-items: flex-end;~~
	}

	~~/* =========================~~
	~~TAB SPANS (wrappers)~~
	~~========================= */~~
	~~.wt-tab {~~
	~~display: inline-block;~~
	~~position: relative;~~
	~~margin-bottom: -2px; /* overlap container border-bottom */~~
	}

	~~/* =========================~~
	~~TAB LINKS~~
	~~========================= */~~
	~~.wt-tab a {~~
	~~display: inline-block;~~
	~~padding: 0.4em 0.9em;~~
	~~text-decoration: none;~~
	~~color: var(--color-base, #54595d);~~
	~~background: transparent;~~
	~~border: 2px solid transparent;~~
	~~border-bottom: none;~~
	~~border-radius: 4px 4px 0 0;~~
	~~line-height: 1.4;~~
	~~white-space: nowrap;~~
	~~font-size: 0.9em;~~
	~~transition: background 0.15s, color 0.15s;~~
	}

	~~/* =========================~~
	~~HOVER~~
	~~========================= */~~
	~~.wt-tab a:hover {~~
	~~background: var(--color-surface-2, rgba(54,108,204,0.07));~~
	~~color: var(--color-progressive, #36c);~~
	}

	~~/* =========================~~
	~~ACTIVE TAB~~
	~~.is-active is set by #ifeq in Template:SubTabs~~
	~~========================= */~~
	~~.wt-tab.is-active a {~~
	~~font-weight: 600;~~
	~~color: var(--color-progressive, #36c);~~
	~~background: var(--color-surface-0, #fff);~~
	~~border-color: var(--color-base--subtle, #a2a9b1);~~
	~~border-bottom-color: var(--color-surface-0, #fff); /* "cuts into" the bottom border */~~
	}

Khalid at 18:00, 21 April 2026

2026-04-21T18:00:59Z

← Older revision		Revision as of 18:00, 21 April 2026
Line 1:		Line 1:
			/* Remove any top margin from infoboxes */
			.infobox {
			margin-top: 0 !important;
			vertical-align: top;
			}
			/* Prevent paragraph wrapping around infobox */
			.infobox + * {
			clear: none;
			}

	/* =========================		/* =========================
	TAB BAR CONTAINER		TAB BAR CONTAINER

Khalid at 16:29, 21 April 2026

2026-04-21T16:29:26Z

← Older revision		Revision as of 16:29, 21 April 2026
Line 1:		Line 1:

	/* =========================		/* =========================
	TAB BAR CONTAINER		TAB BAR CONTAINER
	========================= */		========================= */
	.wt-tabs {		.wt-tabs {
	display: inline-flex; ~~/* safer than flex in Citizen */~~		display: inline-flex;
	flex-wrap: wrap;		flex-wrap: wrap;
	gap: 0.~~4rem~~;		gap: 0;
			border-bottom: 2px solid var(--color-base--subtle, #a2a9b1);
			margin-bottom: 1.25em;
			padding: 0;
			align-items: flex-end;
			}

	~~border~~-~~bottom: 1px solid #a2a9b1~~;		/* =========================
	~~margin-bottom~~: ~~1em~~;		TAB SPANS (wrappers)
	~~padding~~-bottom: ~~0.25em~~;		========================= */
			.wt-tab {
	~~align~~-~~items: center;~~		display: inline-block;
			position: relative;
			margin-bottom: -2px; /* overlap container border-bottom */
	}		}

	/* =========================		/* =========================
	TAB LINKS ~~(CRITICAL)~~		TAB LINKS
	~~avoids Citizen card styling~~
	========================= */		========================= */
	.wt-~~tabs~~ a {		.wt-tab a {
	display: inline-block;		display: inline-block;
			padding: 0.4em 0.9em;
	padding: 0.~~35em~~ 0.~~75em~~;

	text-decoration: none;		text-decoration: none;
	color: ~~inherit~~;		color: var(--color-base, #54595d);

	background: transparent;		background: transparent;
	border: ~~1px~~ solid transparent;		border: 2px solid transparent;
	border-radius: ~~6px~~;		border-bottom: none;
			border-radius: 4px 4px 0 0;
	line-height: 1.2;		line-height: 1.4;

	white-space: nowrap;		white-space: nowrap;
			font-size: 0.9em;
			transition: background 0.15s, color 0.15s;
	}		}

	/* =========================		/* =========================
	HOVER ~~STATE~~		HOVER
	========================= */		========================= */
	.wt-~~tabs~~ a:hover {		.wt-tab a:hover {
	background: rgba(54,108,204,0.10);		background: var(--color-surface-2, rgba(54,108,204,0.07));
	~~border-~~color: ~~rgba~~(~~54,108~~,~~204,0.25~~);		color: var(--color-progressive, #36c);
	}		}

	/* =========================		/* =========================
	ACTIVE TAB ~~(simple + safe)~~		ACTIVE TAB
			.is-active is set by #ifeq in Template:SubTabs
	========================= */		========================= */
	.wt-~~tabs a[aria-current="page"],~~		.wt-tab.is-active a {
	.wt-~~tabs~~ a~~.active~~ {
	font-weight: 600;		font-weight: 600;
	~~border~~-~~bottom: 2px solid~~ #36c;		color: var(--color-progressive, #36c);
	background: ~~rgba~~(54,~~108~~,~~204~~,~~0.08~~);		background: var(--color-surface-0, #fff);
			border-color: var(--color-base--subtle, #a2a9b1);
			border-bottom-color: var(--color-surface-0, #fff); /* "cuts into" the bottom border */
	}		}

Khalid at 16:25, 21 April 2026

2026-04-21T16:25:27Z

← Older revision		Revision as of 16:25, 21 April 2026
Line 1:		Line 1:

	/* ~~container~~ */		/* =========================
			TAB BAR CONTAINER
			========================= */
	.wt-tabs {		.wt-tabs {
	display: flex ~~!important~~;		display: inline-flex; /* safer than flex in Citizen */
	flex-wrap: wrap;		flex-wrap: wrap;
	gap: 0.~~5rem~~;		gap: 0.4rem;

	border-bottom: 1px solid #a2a9b1;		border-bottom: 1px solid #a2a9b1;
	margin-bottom: 1em;		margin-bottom: 1em;
	padding-bottom: 0.25em;		padding-bottom: 0.25em;

			align-items: center;
	}		}

	/* ~~THIS is the real fix for "blue boxes"~~ */		/* =========================
			TAB LINKS (CRITICAL)
			avoids Citizen card styling
			========================= */
	.wt-tabs a {		.wt-tabs a {
	~~background~~: ~~transparent !important~~;		display: inline-block;
	~~box-shadow: none !important;~~
	~~border~~: ~~none !important~~;		padding: 0.35em 0.75em;

	~~padding~~: ~~0 !important~~;		text-decoration: none;
	~~margin~~: ~~0 !important~~;		color: inherit;

	~~text~~-~~decoration~~: ~~none !important~~;		background: transparent;
			border: 1px solid transparent;
			border-radius: 6px;

	~~color~~: ~~inherit !important~~;		line-height: 1.2;
	}

	~~/* optional hover */~~		white-space: nowrap;
	~~.wt-tabs a:hover {~~
	~~background: rgba(54,108,204,0.08) !important;~~
	~~border~~-~~radius~~: ~~4px~~;
	}		}


	/* =========================		/* =========================
	~~FORCE FLEX ROW (Citizen-proof)~~		HOVER STATE
	========================= */		========================= */
	~~.mw-parser-output~~ .wt-tabs {		.wt-tabs a:hover {
	~~display: flex !important;~~		background: rgba(54,108,204,0.10);
	~~flex-direction: row !important;~~		border-color: rgba(54,108,204,0.25);
	~~flex-wrap: wrap !important;~~

	~~gap~~: 0.~~5rem !important~~;

	~~align-items: center !important;~~

	~~margin~~-~~bottom: 1em;~~
	~~padding-bottom~~: 0.~~25em;~~

	~~border-bottom: 1px solid #a2a9b1~~;
	}		}

	/* =========================		/* =========================
	~~FORCE INLINE LINKS~~ (~~CRITICAL~~)		ACTIVE TAB (simple + safe)
	========================= */		========================= */
	.mw-~~parser~~-~~output~~ .wt-tabs a {		.wt-tabs a[aria-current="page"],
	~~display: inline-block !important;~~		.wt-tabs a.active {
			font-weight: 600;
	~~padding: 0.25em 0.6em !important;~~		border-bottom: 2px solid #36c;
			background: rgba(54,108,204,0.08);
	~~text-decoration: none !important;~~

	~~background: transparent !important;~~
	~~box~~-~~shadow~~: ~~none !important~~;
	border~~: none !important;~~

	~~white~~-~~space~~: ~~nowrap !important~~;

	~~color: inherit !important;~~
	}

	~~/* hover */~~
	~~.mw-parser-output .wt-tabs a:hover {~~
	background: rgba(54,108,204,0.08) ~~!important;~~
	~~border-radius: 4px~~;
	}		}

Khalid at 16:23, 21 April 2026

2026-04-21T16:23:36Z

@@ Line 27: / Line 27: @@
 /* optional hover */
 .wt-tabs a:hover {
      background: rgba(54,108,204,0.08) !important;
      border-radius: 4px;
+}

Khalid at 16:22, 21 April 2026

2026-04-21T16:22:56Z

← Older revision		Revision as of 16:22, 21 April 2026
Line 1:		Line 1:
	~~/* =========================~~
	~~HARD RESET FOR TAB SYSTEM~~
	~~(kills Citizen card styling)~~
	~~========================= */~~
	~~.wt-tabs,~~
	~~.wt-tabs * {~~
	~~all: unset;~~
	~~box-sizing: border-box;~~
	}

	/* ~~=========================~~		/* container */
	~~TAB ROW~~
	~~=========================~~ */
	.wt-tabs {		.wt-tabs {
	display: flex !important;		display: flex !important;
	~~flex-direction: row;~~
	flex-wrap: wrap;		flex-wrap: wrap;
	gap: 0.5rem;		gap: 0.5rem;
Line 21:		Line 9:
	margin-bottom: 1em;		margin-bottom: 1em;
	padding-bottom: 0.25em;		padding-bottom: 0.25em;

	~~align-items: center;~~
	}		}

	/* ~~=========================~~		/* THIS is the real fix for "blue boxes" */
	~~TABS~~		.wt-tabs a {
	~~=========================~~ */		background: transparent !important;
	.wt-~~tab~~ {		box-shadow: none !important;
	~~display~~: ~~inline~~-~~flex~~ !important;		border: none !important;

	~~padding~~: ~~0.25em 0.6em~~;

	~~white-space~~: ~~nowrap~~;		padding: 0 !important;
			margin: 0 !important;

	text-decoration: none !important;		text-decoration: none !important;

	color: inherit !important;		color: inherit !important;

	~~background: transparent !important;~~
	~~border: none !important;~~
	~~box-shadow: none !important;~~
	~~border-radius: 0 !important;~~
	}		}

	/* hover ~~only~~ */		/* optional hover */
	.wt-~~tab~~:hover {		.wt-tabs a:hover {
	background: rgba(54,108,204,0.08) !important;		background: rgba(54,108,204,0.08) !important;
	border-radius: 4px;		border-radius: 4px;
	}		}

Khalid at 16:22, 21 April 2026

2026-04-21T16:22:12Z

← Older revision		Revision as of 16:22, 21 April 2026
Line 1:		Line 1:
			/* =========================
			HARD RESET FOR TAB SYSTEM
			(kills Citizen card styling)
			========================= */
			.wt-tabs,
			.wt-tabs * {
			all: unset;
			box-sizing: border-box;
			}

	/* =========================		/* =========================
	~~KILL CITIZEN LINK CARD STYLING~~		TAB ROW
	~~ONLY inside subtabs~~
	========================= */		========================= */
	.mw-~~subtabs a~~ {		.wt-tabs {
	~~background~~: ~~transparent~~ !important;		display: flex !important;
	~~box~~-~~shadow~~: ~~none !important~~;		flex-direction: row;
	~~border~~: ~~none !important~~;		flex-wrap: wrap;
	~~padding~~: 0 ~~!important;~~		gap: 0.5rem;
	~~border-radius: 0 !important~~;

	~~display~~: ~~inline !important~~;		border-bottom: 1px solid #a2a9b1;
	}		margin-bottom: 1em;
			padding-bottom: 0.25em;

	~~/* override ANY mw-parser-output link styling */~~		align-items: center;
	~~.mw-parser-output .mw-subtabs a {~~
	~~background: transparent !important;~~
	~~box~~-~~shadow: none !important;~~
	~~padding~~: ~~0 !important~~;
	}		}

	/* ~~safety: stop "link as pill button" behavior~~ */		/* =========================
	.mw-~~subtabs a:hover~~ {		TABS
	~~background~~: ~~rgba(54,108,204,0.08)~~ !important;		========================= */
	~~border-radius: 4px;~~		.wt-tab {
	}		display: inline-flex !important;

			padding: 0.25em 0.6em;

	~~.mw-subtabs,~~		white-space: nowrap;
	~~.mw-subtabs * {~~
	~~background: transparent !important;~~
	~~box~~-~~shadow: none !important;~~
	~~border~~: ~~none !important~~;
	}

	~~.mw~~-~~subtabs__list {~~		text-decoration: none !important;
	~~display~~: ~~flex~~ !important;
	~~flex-wrap: wrap;~~
	~~gap: 0.5rem;~~
	}

	~~.mw-subtabs__item {~~		color: inherit !important;
	~~display~~: ~~inline-flex~~ !important;
	~~padding: 0.3em 0.6em;~~
	~~white-space: nowrap;~~
	}

	~~/* THIS is now the ONLY styled element */~~		background: transparent !important;
	~~.mw-subtabs__link {~~		border: none !important;
	~~text-decoration~~: none;		box-shadow: none !important;
	~~color~~: ~~inherit~~;		border-radius: 0 !important;
	~~display~~: ~~inline-block~~;
	}		}

	/* ~~active~~ */		/* hover only */
	.mw-~~subtabs__item.is-active~~ {		.wt-tab:hover {
	~~border-bottom~~: ~~2px solid #36c~~;		background: rgba(54,108,204,0.08) !important;
	~~font~~-~~weight~~: ~~600~~;		border-radius: 4px;
	}		}

Khalid at 16:21, 21 April 2026

2026-04-21T16:21:14Z

@@ Line 25: / Line 25: @@
      background: rgba(54,108,204,0.08) !important;
      border-radius: 4px;
+}