Template:OOOInfoBoxTabber/styles.css - Revision history

T-Bone at 11:43, 13 October 2025

2025-10-13T11:43:36Z

← Older revision		Revision as of 11:43, 13 October 2025
Line 1:		Line 1:
	/* Template:OOOInfoBoxTabber/styles.css		/* Template:OOOInfoBoxTabber/styles.css
	~~Only layout/sizing that~~ TemplateStyles ~~accepts. No CSS custom prop definitions here~~. */		Layout-only styles safe for TemplateStyles. */

	/* Wrapper (default right) */		/* Wrapper (default right) */
Line 6:		Line 6:
	float: right;		float: right;
	clear: right;		clear: right;
	width: 300px; /* ~~keep in sync with~~ {{OOOInfoBox}} default if needed */		width: 300px; /* match {{OOOInfoBox}} default if needed */
	margin: 0 0 1em 1em;		margin: 0 0 1em 1em;
	}		}
Line 23:		Line 23:
	align-content: flex-start;		align-content: flex-start;
	align-items: flex-end;		align-items: flex-end;
	margin: ~~0 0 .25rem~~ 0;		margin: 0; /* snug against the panel */
	width: 100%;		width: 100%;
	box-sizing: border-box;		box-sizing: border-box;
Line 29:		Line 29:
	background: none;		background: none;
	}		}

			/* Remove TabberNeue's default separator pseudo-element */
	.ooo-infobox-tabwrap .tabber__tabs::after { content: none; }		.ooo-infobox-tabwrap .tabber__tabs::after { content: none; }

			/* Pills */
	.ooo-infobox-tabwrap .tabber__tab {		.ooo-infobox-tabwrap .tabber__tab {
	flex: 0 0 auto;		flex: 0 0 auto;
Line 41:		Line 44:
	padding: .3rem .55rem;		padding: .3rem .55rem;
	text-decoration: none;		text-decoration: none;

	background: var(--background-color-neutral, #f5f5f5);		background: var(--background-color-neutral, #f5f5f5);
	color: var(--color-base, #202122);		color: var(--color-base, #202122);
Line 55:		Line 59:
	}		}

			/* Active tab (no inset line, no negative margin) */
	.ooo-infobox-tabwrap .tabber__tab--active {		.ooo-infobox-tabwrap .tabber__tab--active {
	cursor: default;		cursor: default;
	background: var(--background-color-base, #ffffff);		background: var(--background-color-base, #ffffff);
	color: var(--color-base, #202122);		color: var(--color-base, #202122);
	~~margin-bottom: -1px;~~		box-shadow: none; /* no seam */
	box-shadow: ~~inset 0 -1px 0 var(--background-color-base, #ffffff)~~;
	}		}

			/* Panels */
	.ooo-infobox-tabwrap .tabber__panel {		.ooo-infobox-tabwrap .tabber__panel {
	padding: 0;		padding: 0;
Line 69:		Line 74:
	}		}

	/* ===== Scroll mode (opt-in) ===== */		/* ===== Scroll mode (opt-in via .ooo-infobox-tabwrap--scroll) ===== */
	.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll { position: relative; }		.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll { position: relative; }

Line 78:		Line 83:
	overflow-x: auto;		overflow-x: auto;
	overflow-y: hidden;		overflow-y: hidden;
	padding: 0 .75rem;		padding: 0 .75rem; /* room for arrows/edge fades */
	margin: ~~0 0 .25rem~~ 0;		margin: 0;
	border: 0;		border: 0;
	background: none;		background: none;
	}		}

	/* ~~Simple~~ edge fades (~~keep colors neutral; skins may override via vars~~) */		/* Optional edge fades (comment out if you don't want them) */
	.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll::before,		.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll::before,
	.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll::after {		.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll::after {
Line 90:		Line 95:
	position: absolute;		position: absolute;
	top: -2px;		top: -2px;
	height: 28px;		height: 28px; /* approx pill height */
	width: 10px;		width: 10px;
	}		}
Line 102:		Line 107:
	}		}

			/* Tabs inside scroller stay fixed-size */
	.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll .tabber__tab { flex: 0 0 auto; }		.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll .tabber__tab { flex: 0 0 auto; }

T-Bone at 11:40, 13 October 2025

2025-10-13T11:40:54Z

← Older revision		Revision as of 11:40, 13 October 2025
Line 28:		Line 28:
	border: 0;		border: 0;
	background: none;		background: none;
	~~margin-bottom: -5px;~~
	}		}
	.ooo-infobox-tabwrap .tabber__tabs::after { content: none; }		.ooo-infobox-tabwrap .tabber__tabs::after { content: none; }

T-Bone at 11:40, 13 October 2025

2025-10-13T11:40:24Z

← Older revision		Revision as of 11:40, 13 October 2025
Line 28:		Line 28:
	border: 0;		border: 0;
	background: none;		background: none;
	margin-bottom: -~~2px~~;		margin-bottom: -5px;
	}		}
	.ooo-infobox-tabwrap .tabber__tabs::after { content: none; }		.ooo-infobox-tabwrap .tabber__tabs::after { content: none; }

T-Bone at 11:40, 13 October 2025

2025-10-13T11:40:05Z

← Older revision		Revision as of 11:40, 13 October 2025
Line 28:		Line 28:
	border: 0;		border: 0;
	background: none;		background: none;
			margin-bottom: -2px;
	}		}
	.ooo-infobox-tabwrap .tabber__tabs::after { content: none; }		.ooo-infobox-tabwrap .tabber__tabs::after { content: none; }

T-Bone at 11:01, 13 October 2025

2025-10-13T11:01:12Z

← Older revision		Revision as of 11:01, 13 October 2025
Line 1:		Line 1:
	/* ~~OOO Infobox — Tabber wrapper~~ styles		/* Template:OOOInfoBoxTabber/styles.css
	~~Modes:~~		Only layout/sizing that TemplateStyles accepts. No CSS custom prop definitions here. */
	~~- default: wrap (tight-pack flex)~~
	~~- opt-in: add class~~ .~~ooo-infobox-tabwrap--scroll for horizontal scroll~~
	*/

	/* Wrapper (default right) */		/* Wrapper (default right) */
Line 9:		Line 6:
	float: right;		float: right;
	clear: right;		clear: right;
	width: 300px; /* keep in sync with ~~.ooo-infobox~~ default */		width: 300px; /* keep in sync with {{OOOInfoBox}} default if needed */
	margin: 0 0 1em 1em;		margin: 0 0 1em 1em;
	}		}
Line 18:		Line 15:
	.ooo-infobox-tabwrap--center { float: none; display: block; margin: 0 auto 1em; }		.ooo-infobox-tabwrap--center { float: none; display: block; margin: 0 auto 1em; }

	/* =====~~====================~~		/* ===== Wrap mode (default) ===== */
	~~WRAP MODE~~ (default)
	~~====================~~===== */
	.ooo-infobox-tabwrap .tabber__tabs {		.ooo-infobox-tabwrap .tabber__tabs {
	display: flex;		display: flex;
	flex-wrap: wrap;		flex-wrap: wrap;
	gap: .35rem; ~~/* both column + row gap */~~		gap: .35rem;
	justify-content: flex-start; ~~/* pack left, no stretching */~~		justify-content: flex-start;
	align-content: flex-start;		align-content: flex-start;
	align-items: flex-end;		align-items: flex-end;
Line 34:		Line 29:
	background: none;		background: none;
	}		}

	.ooo-infobox-tabwrap .tabber__tabs::after { content: none; }		.ooo-infobox-tabwrap .tabber__tabs::after { content: none; }

	~~/* Pills (shared base styles) */~~
	.ooo-infobox-tabwrap .tabber__tab {		.ooo-infobox-tabwrap .tabber__tab {
	flex: 0 0 auto; ~~/* natural width; don't shrink */~~		flex: 0 0 auto;
	min-width: 3.5ch; ~~/* floor so tiny labels don't collapse */~~		min-width: 3.5ch;
	white-space: nowrap;		white-space: nowrap;
	text-align: center;		text-align: center;
	line-height: 1.2;		line-height: 1.2;

	font-weight: 700;		font-weight: 700;
	font-size: 90%;		font-size: 90%;
	padding: .3rem .55rem;		padding: .3rem .55rem;
	text-decoration: none;		text-decoration: none;

	background: var(--background-color-neutral, #f5f5f5);		background: var(--background-color-neutral, #f5f5f5);
	color: var(--color-base, #202122);		color: var(--color-base, #202122);
Line 57:		Line 48:
	}		}

	~~/* Hover + focus */~~
	.ooo-infobox-tabwrap .tabber__tab:hover { background: rgba(255,255,255,.06); }		.ooo-infobox-tabwrap .tabber__tab:hover { background: rgba(255,255,255,.06); }
	.ooo-infobox-tabwrap .tabber__tab:focus {		.ooo-infobox-tabwrap .tabber__tab:focus {
Line 65:		Line 55:
	}		}

	~~/* Active tab sits flush with the panel */~~
	.ooo-infobox-tabwrap .tabber__tab--active {		.ooo-infobox-tabwrap .tabber__tab--active {
	cursor: default;		cursor: default;
Line 74:		Line 63:
	}		}

	~~/* Panels */~~
	.ooo-infobox-tabwrap .tabber__panel {		.ooo-infobox-tabwrap .tabber__panel {
	padding: 0;		padding: 0;
Line 81:		Line 69:
	}		}

	/* =====~~====================~~		/* ===== Scroll mode (opt-in) ===== */
	~~SCROLL MODE~~ (opt-in)
	~~Add .ooo-infobox-tabwrap--scroll via \|mode=scroll~~
	~~====================~~===== */
	.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll { position: relative; }		.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll { position: relative; }

	~~/* Make the tab row horizontally scrollable */~~
	.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll .tabber__tabs {		.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll .tabber__tabs {
	display: flex;		display: flex;
Line 94:		Line 78:
	overflow-x: auto;		overflow-x: auto;
	overflow-y: hidden;		overflow-y: hidden;
	padding: 0 .75rem; ~~/* room for edge fades / arrows */~~		padding: 0 .75rem;
	margin: 0 0 .25rem 0;		margin: 0 0 .25rem 0;
	border: 0;		border: 0;
Line 100:		Line 84:
	}		}

	/* Simple edge fades ~~using overlays~~ (~~TemplateStyles-safe~~) */		/* Simple edge fades (keep colors neutral; skins may override via vars) */
	.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll::before,		.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll::before,
	.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll::after {		.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll::after {
	content: "";		content: "";
	position: absolute;		position: absolute;
	top: -2px; ~~/* align with top of pills */~~		top: -2px;
	height: 28px; ~~/* approximate pill height */~~		height: 28px;
	width: 10px;		width: 10px;
	}		}
Line 118:		Line 102:
	}		}

	~~/* Tabs inside the scroller */~~		.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll .tabber__tab { flex: 0 0 auto; }
	.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll .tabber__tab {
	flex: 0 0 auto; ~~/* fixed-size items; no snapping props */~~
	}

	/* Mobile */		/* Mobile */

T-Bone at 09:05, 13 October 2025

2025-10-13T09:05:02Z

← Older revision		Revision as of 09:05, 13 October 2025
Line 1:		Line 1:
	/* OOO Infobox — Tabber wrapper (~~full~~-~~width lines, neat wrap~~)		/* OOO Infobox — Tabber wrapper styles
	~~Version~~: ~~tight~~-~~pack flex (TemplateStyles~~-~~safe)~~ */		Modes:
			- default: wrap (tight-pack flex)
			- opt-in: add class .ooo-infobox-tabwrap--scroll for horizontal scroll
			*/

	/* Wrapper (default right) */		/* Wrapper (default right) */
Line 6:		Line 9:
	float: right;		float: right;
	clear: right;		clear: right;
	width: 300px; /* keep in sync with .ooo-infobox */		width: 300px; /* keep in sync with .ooo-infobox default */
	margin: 0 0 1em 1em;		margin: 0 0 1em 1em;
	}		}
Line 15:		Line 18:
	.ooo-infobox-tabwrap--center { float: none; display: block; margin: 0 auto 1em; }		.ooo-infobox-tabwrap--center { float: none; display: block; margin: 0 auto 1em; }

	/* ~~Tabs row: wrap naturally with even gaps~~ (~~no row stretching~~) */		/* =========================
			WRAP MODE (default)
			========================= */
	.ooo-infobox-tabwrap .tabber__tabs {		.ooo-infobox-tabwrap .tabber__tabs {
	display: flex;		display: flex;
	flex-wrap: wrap;		flex-wrap: wrap;
	gap: .35rem; /* both column + row gap */		gap: .35rem; /* both column + row gap */
	justify-content: flex-start; /* ~~keep items packed~~ left */		justify-content: flex-start; /* pack left, no stretching */
	align-content: flex-start;		align-content: flex-start;
			align-items: flex-end;
	margin: 0 0 .25rem 0;		margin: 0 0 .25rem 0;
	width: 100%;		width: 100%;
Line 27:		Line 33:
	border: 0;		border: 0;
	background: none;		background: none;
	~~align-items: flex-end;~~
	}		}

	~~/* Remove filler used by the old layout */~~
	.ooo-infobox-tabwrap .tabber__tabs::after { content: none; }		.ooo-infobox-tabwrap .tabber__tabs::after { content: none; }

	/* Pills */		/* Pills (shared base styles) */
	.ooo-infobox-tabwrap .tabber__tab {		.ooo-infobox-tabwrap .tabber__tab {
	flex: 0 0 auto; /* natural width; don't shrink */		flex: 0 0 auto; /* natural width; don't shrink */
	min-width: 3.5ch; /* ~~small~~ floor so tiny labels don't collapse */		min-width: 3.5ch; /* floor so tiny labels don't collapse */
	white-space: nowrap; ~~/* keep short labels on one line */~~		white-space: nowrap;
	text-align: center;		text-align: center;
	line-height: 1.2;		line-height: 1.2;
Line 43:		Line 47:
	font-weight: 700;		font-weight: 700;
	font-size: 90%;		font-size: 90%;
	padding: .3rem .55rem; ~~/* TemplateStyles-safe padding */~~		padding: .3rem .55rem;
	text-decoration: none;		text-decoration: none;

	background: var(--background-color-neutral, #f5f5f5);		background: var(--background-color-neutral, #f5f5f5);
	color: var(--color-base, #202122);		color: var(--color-base, #202122);
	border: 1px solid #a2a9b1; ~~/* literal to satisfy TemplateStyles */~~		border: 1px solid #a2a9b1;
	border-bottom: none;		border-bottom: none;
	border-radius: 12px 12px 0 0;		border-radius: 12px 12px 0 0;
	}		}

	/* Hover + focus~~: accessible but subtle~~ */		/* Hover + focus */
	.ooo-infobox-tabwrap .tabber__tab:hover {		.ooo-infobox-tabwrap .tabber__tab:hover { background: rgba(255,255,255,.06); }
	background: rgba(255,255,255,.06); ~~/* subtle lift on dark theme */~~
	}
	.ooo-infobox-tabwrap .tabber__tab:focus {		.ooo-infobox-tabwrap .tabber__tab:focus {
	outline: 2px solid #cea141; ~~/* brand gold */~~		outline: 2px solid #cea141;
	outline-offset: 2px;		outline-offset: 2px;
	border-radius: 12px; ~~/* full pill outline, not just top */~~		border-radius: 12px;
	}		}

	/* Active tab ~~feels attached & not clickable~~ */		/* Active tab sits flush with the panel */
	.ooo-infobox-tabwrap .tabber__tab--active {		.ooo-infobox-tabwrap .tabber__tab--active {
	cursor: default;		cursor: default;
	background: var(--background-color-base, #ffffff);		background: var(--background-color-base, #ffffff);
	color: var(--color-base, #202122);		color: var(--color-base, #202122);
	margin-bottom: -1px; ~~/* keep panel seam flush */~~		margin-bottom: -1px;
	box-shadow: inset 0 -1px 0 var(--background-color-base, #ffffff);		box-shadow: inset 0 -1px 0 var(--background-color-base, #ffffff);
	}		}
Line 77:		Line 79:
	border: 0;		border: 0;
	background: transparent;		background: transparent;
			}

			/* =========================
			SCROLL MODE (opt-in)
			Add .ooo-infobox-tabwrap--scroll via \|mode=scroll
			========================= */
			.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll { position: relative; }

			/* Make the tab row horizontally scrollable */
			.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll .tabber__tabs {
			display: flex;
			flex-wrap: nowrap;
			gap: .35rem;
			overflow-x: auto;
			overflow-y: hidden;
			padding: 0 .75rem; /* room for edge fades / arrows */
			margin: 0 0 .25rem 0;
			border: 0;
			background: none;
			}

			/* Simple edge fades using overlays (TemplateStyles-safe) */
			.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll::before,
			.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll::after {
			content: "";
			position: absolute;
			top: -2px; /* align with top of pills */
			height: 28px; /* approximate pill height */
			width: 10px;
			}
			.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll::before {
			left: 0;
			background: linear-gradient(to right, var(--background-color-base, #1f1f1f), transparent);
			}
			.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll::after {
			right: 0;
			background: linear-gradient(to left, var(--background-color-base, #1f1f1f), transparent);
			}

			/* Tabs inside the scroller */
			.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll .tabber__tab {
			flex: 0 0 auto; /* fixed-size items; no snapping props */
	}		}

T-Bone at 08:29, 13 October 2025

2025-10-13T08:29:12Z

← Older revision		Revision as of 08:29, 13 October 2025
Line 27:		Line 27:
	border: 0;		border: 0;
	background: none;		background: none;
			align-items: flex-end;
	}		}

Line 35:		Line 36:
	.ooo-infobox-tabwrap .tabber__tab {		.ooo-infobox-tabwrap .tabber__tab {
	flex: 0 0 auto; /* natural width; don't shrink */		flex: 0 0 auto; /* natural width; don't shrink */
	min-width: ~~4ch~~; /* small floor so tiny labels don't collapse */		min-width: 3.5ch; /* small floor so tiny labels don't collapse */
	white-space: nowrap; /* keep short labels on one line */		white-space: nowrap; /* keep short labels on one line */
	text-align: center;		text-align: center;
Line 42:		Line 43:
	font-weight: 700;		font-weight: 700;
	font-size: 90%;		font-size: 90%;
	padding: .~~25rem~~ .~~6rem~~; /* TemplateStyles-safe padding */		padding: .3rem .55rem; /* TemplateStyles-safe padding */
	text-decoration: none;		text-decoration: none;

Line 52:		Line 53:
	}		}

	/* Active ~~pill sits flush with the panel~~ */		/* Hover + focus: accessible but subtle */
			.ooo-infobox-tabwrap .tabber__tab:hover {
			background: rgba(255,255,255,.06); /* subtle lift on dark theme */
			}
			.ooo-infobox-tabwrap .tabber__tab:focus {
			outline: 2px solid #cea141; /* brand gold */
			outline-offset: 2px;
			border-radius: 12px; /* full pill outline, not just top */
			}

			/* Active tab feels attached & not clickable */
	.ooo-infobox-tabwrap .tabber__tab--active {		.ooo-infobox-tabwrap .tabber__tab--active {
			cursor: default;
	background: var(--background-color-base, #ffffff);		background: var(--background-color-base, #ffffff);
	color: var(--color-base, #202122);		color: var(--color-base, #202122);
	margin-bottom: -1px; /* ~~prevents 1px jump on activation~~ */		margin-bottom: -1px; /* keep panel seam flush */
			box-shadow: inset 0 -1px 0 var(--background-color-base, #ffffff);
	}		}

T-Bone at 06:33, 13 October 2025

2025-10-13T06:33:47Z

← Older revision		Revision as of 06:33, 13 October 2025
Line 1:		Line 1:
	/* OOO Infobox — Tabber wrapper (full-width lines, neat wrap) */		/* OOO Infobox — Tabber wrapper (full-width lines, neat wrap)
			Version: tight-pack flex (TemplateStyles-safe) */

	/* Wrapper (default right) */		/* Wrapper (default right) */
Line 10:		Line 11:

	/* Alignment overrides */		/* Alignment overrides */
	.ooo-infobox-tabwrap--left { float:left; clear:left; margin:0 1em 1em 0; }		.ooo-infobox-tabwrap--left { float: left; clear: left; margin: 0 1em 1em 0; }
	.ooo-infobox-tabwrap--none { float:none; margin:0 0 1em 0; }		.ooo-infobox-tabwrap--none { float: none; margin: 0 0 1em 0; }
	.ooo-infobox-tabwrap--center { float:none; display:block; margin:0 auto 1em; }		.ooo-infobox-tabwrap--center { float: none; display: block; margin: 0 auto 1em; }

	/* Tabs row: ~~full-width per line, tidy~~ wrap, no ~~baseline~~ */		/* Tabs row: wrap naturally with even gaps (no row stretching) */
	.ooo-infobox-tabwrap .tabber__tabs {		.ooo-infobox-tabwrap .tabber__tabs {
	display: flex;		display: flex;
	flex-wrap: wrap;		flex-wrap: wrap;
	~~column-~~gap: .~~25rem~~; /* ~~spacing between pills~~ */		gap: .35rem; /* both column + row gap */
	~~row-gap: .25rem;~~		justify-content: flex-start; /* keep items packed left */
	justify-content: ~~space~~-~~between~~; /* ~~stretch each line to full width~~ */		align-content: flex-start;
	margin: 0 0 .25rem 0; ~~/* tighter spacing above the box */~~		margin: 0 0 .25rem 0;
	width: 100%;		width: 100%;
	box-sizing: border-box;		box-sizing: border-box;
	border: 0;		border: 0;
	background~~-image~~: none;		background: none;
	}		}

	/* ~~Filler flex item so~~ the ~~LAST line stays left-aligned (no awkward stretch)~~ */		/* Remove filler used by the old layout */
	.ooo-infobox-tabwrap .tabber__tabs::after {		.ooo-infobox-tabwrap .tabber__tabs::after { content: none; }
	content: ~~"";~~
	~~flex: 999 0 0~~;
	}

	/* Pills */		/* Pills */
	.ooo-infobox-tabwrap .tabber__tab {		.ooo-infobox-tabwrap .tabber__tab {
	flex: 0 1 auto; /* natural width; ~~can~~ shrink ~~a bit if needed~~ */		flex: 0 0 auto; /* natural width; don't shrink */
	min-width: 4ch; /* ~~was 6ch; smaller~~ so ~~5 short tabs fit a row~~ */		min-width: 4ch; /* small floor so tiny labels don't collapse */
	white-space: ~~normal~~; /* ~~allow wrapping~~ on ~~long labels~~ */		white-space: nowrap; /* keep short labels on one line */
	text-align: center;		text-align: center;
	line-height: 1.2;		line-height: 1.2;
Line 44:		Line 42:
	font-weight: 700;		font-weight: 700;
	font-size: 90%;		font-size: 90%;
	padding: .25rem .~~5rem~~;		padding: .25rem .6rem; /* TemplateStyles-safe padding */
	text-decoration: none;		text-decoration: none;

Line 58:		Line 56:
	background: var(--background-color-base, #ffffff);		background: var(--background-color-base, #ffffff);
	color: var(--color-base, #202122);		color: var(--color-base, #202122);
	margin-bottom: -1px;		margin-bottom: -1px; /* prevents 1px jump on activation */
	}		}

T-Bone at 21:16, 12 October 2025

2025-10-12T21:16:53Z

← Older revision		Revision as of 21:16, 12 October 2025
Line 1:		Line 1:
	/* OOO Infobox — Tabber wrapper (full-width ~~wrapping tabs~~, ~~minimal~~) */		/* OOO Infobox — Tabber wrapper (full-width lines, neat wrap) */

	/* Wrapper (default right) */		/* Wrapper (default right) */
Line 14:		Line 14:
	.ooo-infobox-tabwrap--center { float:none; display:block; margin:0 auto 1em; }		.ooo-infobox-tabwrap--center { float:none; display:block; margin:0 auto 1em; }

	/* ~~Tab strip~~: full-width ~~justified rows +~~ wrap~~; kill~~ baseline */		/* Tabs row: full-width per line, tidy wrap, no baseline */
	.ooo-infobox-tabwrap .tabber__tabs {		.ooo-infobox-tabwrap .tabber__tabs {
	display: ~~block~~;		display: flex;
			flex-wrap: wrap;
			column-gap: .25rem; /* spacing between pills */
			row-gap: .25rem;
			justify-content: space-between; /* stretch each line to full width */
			margin: 0 0 .25rem 0; /* tighter spacing above the box */
	width: 100%;		width: 100%;
	box-sizing: border-box;		box-sizing: border-box;
	~~margin: 0 0 .5rem 0;~~
	border: 0;		border: 0;
	background-image: none;		background-image: none;

	~~text-align: justify; /* stretch each line to full width */~~
	~~text-align-last: left; /* last line stays left-aligned */~~
	}		}

	/* ~~Force justification on each~~ line */		/* Filler flex item so the LAST line stays left-aligned (no awkward stretch) */
	.ooo-infobox-tabwrap .tabber__tabs::after {		.ooo-infobox-tabwrap .tabber__tabs::after {
	content: "";		content: "";
	~~display: inline-block;~~		flex: 999 0 0;
	~~width: 100%;~~
	~~height~~: 0;
	}		}

	/* ~~Tabs: inline pills; allow label wrapping; no explicit margins~~ */		/* Pills */
	.ooo-infobox-tabwrap .tabber__tab {		.ooo-infobox-tabwrap .tabber__tab {
	~~display~~: ~~inline-block~~;		flex: 0 1 auto; /* natural width; can shrink a bit if needed */
	~~vertical-align: top~~;		min-width: 4ch; /* was 6ch; smaller so 5 short tabs fit a row */
	min-width: 6ch;		white-space: normal; /* allow wrapping on long labels */
	white-space: normal;
	text-align: center;		text-align: center;
	line-height: 1.2;		line-height: 1.2;
Line 56:		Line 54:
	}		}

	/* Active ~~tab: sit~~ flush with panel */		/* Active pill sits flush with the panel */
	.ooo-infobox-tabwrap .tabber__tab--active {		.ooo-infobox-tabwrap .tabber__tab--active {
	background: var(--background-color-base, #ffffff);		background: var(--background-color-base, #ffffff);
Line 63:		Line 61:
	}		}

	/* Panels~~: flush with infobox~~ */		/* Panels */
	.ooo-infobox-tabwrap .tabber__panel {		.ooo-infobox-tabwrap .tabber__panel {
	padding: 0;		padding: 0;
Line 70:		Line 68:
	}		}

	/* Mobile~~: unfloat and full width~~ */		/* Mobile */
	@media (max-width: 640px) {		@media (max-width: 640px) {
	.ooo-infobox-tabwrap,		.ooo-infobox-tabwrap,

T-Bone at 21:13, 12 October 2025

2025-10-12T21:13:28Z

← Older revision		Revision as of 21:13, 12 October 2025
Line 1:		Line 1:
	/* OOO Infobox – Tabber wrapper (~~TemplateStyles safe)~~		/* OOO Infobox — Tabber wrapper (full-width wrapping tabs, minimal) */
	- ~~Default~~ width ~~matches .ooo-infobox (300px~~)
	~~- Right-aligned by default; left/none/center overrides supported~~
	~~- Hides the tab-strip baseline and clips to the same rounded corners~~
	*/

	/* Wrapper (default: right) */		/* Wrapper (default right) */
	.ooo-infobox-tabwrap {		.ooo-infobox-tabwrap {
	float: right;		float: right;
	clear: right;		clear: right;
	width: 300px; /* ~~match~~ .ooo-infobox ~~default~~ */		width: 300px; /* keep in sync with .ooo-infobox */
	margin: 0 0 1em 1em;		margin: 0 0 1em 1em;

	~~/* clip any tab-strip line at rounded corners */~~
	~~border-top-left-radius: 12px; /* keep in sync with .ooo-infobox */~~
	~~border-top-right-radius: 12px;~~
	~~overflow: hidden;~~
	}		}

	/* Alignment overrides ~~(added by module when \|align=...)~~ */		/* Alignment overrides */
	.ooo-infobox-tabwrap--left { float: left; clear: left; margin: 0 1em 1em 0; }		.ooo-infobox-tabwrap--left { float:left; clear:left; margin:0 1em 1em 0; }
	.ooo-infobox-tabwrap--none { float: none; margin: 0 0 1em 0; }		.ooo-infobox-tabwrap--none { float:none; margin:0 0 1em 0; }
	.ooo-infobox-tabwrap--center { float: none; display: block; margin: 0 auto 1em; }		.ooo-infobox-tabwrap--center { float:none; display:block; margin:0 auto 1em; }

	/* Tab strip: ~~remove~~ baseline ~~so it doesn't peek past rounded corners~~ */		/* Tab strip: full-width justified rows + wrap; kill baseline */
	.ooo-infobox-tabwrap .tabber__tabs {		.ooo-infobox-tabwrap .tabber__tabs {
	display: block;		display: block;
			width: 100%;
			box-sizing: border-box;
	margin: 0 0 .5rem 0;		margin: 0 0 .5rem 0;
			border: 0;
			background-image: none;

			text-align: justify; /* stretch each line to full width */
			text-align-last: left; /* last line stays left-aligned */
			}

			/* Force justification on each line */
			.ooo-infobox-tabwrap .tabber__tabs::after {
			content: "";
			display: inline-block;
	width: 100%;		width: 100%;
	~~box-sizing: border-box;~~		height: 0;
	~~border: 0; /* kills bottom line */~~
	~~padding~~: 0;
	}		}
	~~/* Some skins draw an after-line; disable it too */~~
	~~.ooo-infobox-tabwrap .tabber__tabs::after { display: none; }~~

	/* ~~Individual tabs (compact, skin-colored)~~ */		/* Tabs: inline pills; allow label wrapping; no explicit margins */
	.ooo-infobox-tabwrap .tabber__tab {		.ooo-infobox-tabwrap .tabber__tab {
	display: inline-block;		display: inline-block;
			vertical-align: top;
			min-width: 6ch;
			white-space: normal;
			text-align: center;
			line-height: 1.2;

	font-weight: 700;		font-weight: 700;
	font-size: 90%;		font-size: 90%;
	~~line-height: 1.2;~~
	~~white-space: normal; /* allow wrapping on long labels */~~
	padding: .25rem .5rem;		padding: .25rem .5rem;
	~~margin-right: .25rem;~~
	text-decoration: none;		text-decoration: none;

	background: var(--background-color-neutral, #f5f5f5);		background: var(--background-color-neutral, #f5f5f5);
	color: var(--color-base, #202122);		color: var(--color-base, #202122);
	border: 1px solid #a2a9b1; /* literal~~: avoids~~ TemplateStyles ~~color warnings~~ */		border: 1px solid #a2a9b1; /* literal to satisfy TemplateStyles */
	border-bottom: none; ~~/* blends with panel */~~		border-bottom: none;
	border-radius: 12px 12px 0 0; ~~/* match infobox radius */~~		border-radius: 12px 12px 0 0;
	}		}

	/* Active tab: sit flush ~~on the infobox (no seam)~~ */		/* Active tab: sit flush with panel */
	.ooo-infobox-tabwrap .tabber__tab--active {		.ooo-infobox-tabwrap .tabber__tab--active {
	background: var(--background-color-base, #ffffff);		background: var(--background-color-base, #ffffff);
	color: var(--color-base, #202122);		color: var(--color-base, #202122);
	margin-bottom: -1px; ~~/* overlap top border by 1px */~~		margin-bottom: -1px;
	}		}

Line 63:		Line 66:
	.ooo-infobox-tabwrap .tabber__panel {		.ooo-infobox-tabwrap .tabber__panel {
	padding: 0;		padding: 0;
	border: ~~none~~;		border: 0;
			background: transparent;
	}		}

	/* Mobile: unfloat and go full width */		/* Mobile: unfloat and full width */
	@media (max-width: 640px) {		@media (max-width: 640px) {
	.ooo-infobox-tabwrap,		.ooo-infobox-tabwrap,