MediaWiki:Common.css - Revision history

Eviand at 22:41, 7 March 2026

2026-03-07T22:41:05Z

← Older revision		Revision as of 22:41, 7 March 2026
Line 2:		Line 2:
	/* Role: shared tokens, primitives, utilities, and interactive anatomy */		/* Role: shared tokens, primitives, utilities, and interactive anatomy */
	/* Scope: sitewide SpiritVale UI foundations only */		/* Scope: sitewide SpiritVale UI foundations only */
			/* -------------------------------------------------------------------------- */
			/* Canonical ownership map */
			/* -------------------------------------------------------------------------- */
			/* Common.css is the sitewide foundation layer. It owns: */
			/* - canonical breakpoint definitions and responsive policy comments */
			/* - shared design tokens and utility primitives */
			/* - reusable interactive anatomy used by multiple modules/templates */
			/* - global parser-output treatments that should behave the same everywhere */
			/* */
			/* Common.css does NOT own: */
			/* - Citizen skin theme/chrome styling (Citizen.css) */
			/* - module-specific card/layout rules (GameInfo, PatchHighlights, etc.) */
			/* - template-specific presentation rules (Definitions, ClassInfobox, etc.) */
			/* */
			/* Responsive cleanup note: this file is the source of truth for breakpoint */
			/* meaning. Its own responsive selectors should model the canonical ladder */
			/* and shared UI should follow that ladder everywhere else. */
			/* -------------------------------------------------------------------------- */
			/* Responsive policy (canonical) */
			/* -------------------------------------------------------------------------- */
			/* SpiritVale uses a mobile-first six-viewpoint ladder aligned to Tailwind's */
			/* defaults. */
			/* */
			/* Viewpoints */
			/* - default: 0px-639px (phones / smallest layout) */
			/* - sm: 640px-767px (large phones / small tablets) */
			/* - md: 768px-1023px(tablets / narrow landscape) */
			/* - lg: 1024px-1279px(laptop / desktop start) */
			/* - xl: 1280px-1535px(wide desktop) */
			/* - 2xl: 1536px+ (very wide desktop) */
			/* */
			/* Implementation rule: write defaults for the smallest layout whenever */
			/* practical, then layer upward with canonical breakpoints. */
			/* -------------------------------------------------------------------------- */


	/* -------------------------------------------------------------------------- */		/* -------------------------------------------------------------------------- */
Line 303:		Line 338:
	display:inline-block;		display:inline-block;
	font-weight:900;		font-weight:900;
	font-size:~~13px~~;		font-size:12px;
	line-height:1.25;		line-height:1.25;
	letter-spacing:0.15px;		letter-spacing:0.15px;
Line 314:		Line 349:
	display:inline-block;		display:inline-block;
	font-weight:900;		font-weight:900;
	font-size:~~13px~~;		font-size:12px;
	line-height:1.25;		line-height:1.25;
	letter-spacing:0.15px;		letter-spacing:0.15px;
Line 350:		Line 385:
	flex:0 0 auto;		flex:0 0 auto;
	order:2;		order:2;
	min-width:~~30px~~;		min-width:28px;
	padding:~~2px 8px~~;		padding:1px 7px;
	border-radius:var(--sv-ui-rad-pill);		border-radius:var(--sv-ui-rad-pill);
	border:1px solid var(--sv-ui-pill-line);		border:1px solid var(--sv-ui-pill-line);
Line 359:		Line 394:
	color:var(--sv-ui-text2);		color:var(--sv-ui-text2);
	font-weight:900;		font-weight:900;
	font-size:~~13px~~;		font-size:12px;
	line-height:1.25;		line-height:1.25;
	letter-spacing:0.15px;		letter-spacing:0.15px;
Line 861:		Line 896:

	/* -------------------------------------------------------------------------- */		/* -------------------------------------------------------------------------- */
	/* 11) Responsive */		/* 11) Responsive */
	/* -------------------------------------------------------------------------- */		/* -------------------------------------------------------------------------- */
			/* default (<640px): compact end value and helper text. */
			/* sm and up (>=640px): restore the standard control sizing. */

	@media (~~max~~-width:~~500px~~){		@media (min-width:640px){
	.sv-level-endvalue,		.sv-level-endvalue,
	.mw-parser-output .sv-level-endvalue{		.mw-parser-output .sv-level-endvalue{
	padding:~~1px 7px~~;		padding:2px 8px;
	min-width:~~28px~~;		min-width:30px;
	font-size:~~12px~~;		font-size:13px;
	line-height:1.25;		line-height:1.25;
	}		}
Line 877:		Line 914:
	.mw-parser-output .sv-level-label[data-sv-helper-text]::after,		.mw-parser-output .sv-level-label[data-sv-helper-text]::after,
	.mw-parser-output .sv-level-ui .sv-level-label:not([data-sv-helper-text])::after{		.mw-parser-output .sv-level-ui .sv-level-label:not([data-sv-helper-text])::after{
	font-size:~~12px~~;		font-size:13px;
	}		}
	}		}

Eviand at 06:05, 7 March 2026

2026-03-07T06:05:52Z

← Older revision		Revision as of 06:05, 7 March 2026
Line 19:		Line 19:
	--sv-ui-bg2:#273449;		--sv-ui-bg2:#273449;
	--sv-ui-bg3:#2e3f59;		--sv-ui-bg3:#2e3f59;
	--sv-ui-bg4:#~~5779a8~~;		--sv-ui-bg4:#4e6d97;

	/* Border / frame ladder. */		/* Border / frame ladder. */

Eviand at 05:41, 7 March 2026

2026-03-07T05:41:42Z

Show changes

Eviand at 22:23, 6 March 2026

2026-03-06T22:23:13Z

Show changes

Eviand at 00:34, 5 March 2026

2026-03-05T00:34:17Z

Show changes

Eviand at 22:43, 4 March 2026

2026-03-04T22:43:27Z

← Older revision		Revision as of 22:43, 4 March 2026
Line 1,007:		Line 1,007:
	.sv-level-range--custom .sv-level-bubble,		.sv-level-range--custom .sv-level-bubble,
	.sv-level-range[data-sv-slider="1"] .sv-level-bubble{		.sv-level-range[data-sv-slider="1"] .sv-level-bubble{
	position:absolute ~~!important~~;		position:absolute;
	top:-45px !important; /* was -30 */		top:-45px !important; /* was -30 */
	left:0% !important;		left:0% !important;

Eviand at 22:42, 4 March 2026

2026-03-04T22:42:16Z

← Older revision		Revision as of 22:42, 4 March 2026
Line 1,004:		Line 1,004:
	}		}

	/* Value bubble (JS injects .sv-level-bubble) */		/* Value bubble (JS injects .sv-level-bubble) — 50% bigger (override inline) */
	.sv-level-range--custom .sv-level-bubble,		.sv-level-range--custom .sv-level-bubble,
	.sv-level-range[data-sv-slider="1"] .sv-level-bubble{		.sv-level-range[data-sv-slider="1"] .sv-level-bubble{
	position:absolute;		position:absolute !important;
	top:-~~30px~~;		top:-45px !important; /* was -30 */
	left:0%;		left:0% !important;
	transform:translateX(-50%);		transform:translateX(-50%) !important;
	padding:6px 10px;
	border-radius:24px;		padding:9px 15px !important; /* was 6px 10px */
			border-radius:36px !important; /* was 24px */

	border:1px solid var(--sv-ui-line2);		border:1px solid var(--sv-ui-line2);
	background:var(--sv-ui-bg1);		background:var(--sv-ui-bg1);
Line 1,018:		Line 1,020:
	box-shadow:0 10px 18px rgba(0,0,0,0.35);		box-shadow:0 10px 18px rgba(0,0,0,0.35);

	font-weight:900;		font-weight:900 !important;
	font-size:24px;		font-size:36px !important; /* was 24px (and JS was 12px inline) */
	line-height:1;		line-height:1 !important;
	color:var(--sv-ui-text1);		color:var(--sv-ui-text1);

	pointer-events:none;		pointer-events:none;
	white-space:nowrap;		white-space:nowrap !important;
	}		}

Line 1,032:		Line 1,034:
	position:absolute;		position:absolute;
	left:50%;		left:50%;
	bottom:-6px;		bottom:-9px; /* was -6px */
	width:10px;
	height:10px;		width:14px; /* was 10px */
	margin-left:-5px;		height:14px; /* was 10px */
			margin-left:-7px; /* was -5px */

	background:var(--sv-ui-bg1);		background:var(--sv-ui-bg1);
	border-left:1px solid var(--sv-ui-line2);		border-left:1px solid var(--sv-ui-line2);

Eviand at 22:37, 4 March 2026

2026-03-04T22:37:13Z

← Older revision		Revision as of 22:37, 4 March 2026
Line 1,012:		Line 1,012:
	transform:translateX(-50%);		transform:translateX(-50%);
	padding:6px 10px;		padding:6px 10px;
	border-radius:~~12px~~;		border-radius:24px;
	border:1px solid var(--sv-ui-line2);		border:1px solid var(--sv-ui-line2);
	background:var(--sv-ui-bg1);		background:var(--sv-ui-bg1);
Line 1,019:		Line 1,019:

	font-weight:900;		font-weight:900;
	font-size:~~12px~~;		font-size:24px;
	line-height:1;		line-height:1;
	color:var(--sv-ui-text1);		color:var(--sv-ui-text1);

Eviand at 22:21, 4 March 2026

2026-03-04T22:21:01Z

← Older revision		Revision as of 22:21, 4 March 2026
Line 691:		Line 691:
	}		}

	/* Level selector */		/* Level selector (table infobox legacy layout) */
	:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-level-selector .sv-level-ui{		:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
	width:90%;		.module-level-selector .sv-level-ui{
	margin:0 !important;		width:100%;
	display:flex;		margin:0 !important;
	flex-direction:column;		display:flex;
	gap:0.3em;		flex-direction:column;
			gap:0.3em;
			}

			/* Keep label weight if those table layouts still show it */
			:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
			.module-level-selector .sv-level-label{
			font-weight:600;
			}

			/* NEW: slider row is always [bar left] [value right] */
			:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
			.module-level-selector .sv-level-slider{
			display:flex;
			flex-direction:row;
			align-items:center;
			gap:10px;
			width:100%;
	}		}

	:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-level-selector .sv-level-~~label~~{		/* Let the bar take remaining space (no hard 90% width) */
	~~font~~-~~weight~~:~~600~~;		:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
			.module-level-selector .sv-level-slider input[type="range"],
			:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
			.module-level-selector .sv-level-slider .sv-level-range--custom,
			:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
			.module-level-selector .sv-level-slider .sv-level-range[data-sv-slider="1"]{
			flex:1 1 auto;
			min-width:0;
			width:auto;
			box-sizing:border-box;
			margin:0;
			order:1;
	}		}

			/* Ensure the JS-added end value stays on the right */
	:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)		:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
	.module-level-selector .sv-level-slider ~~input[type="range"]~~{		.module-level-selector .sv-level-slider .sv-level-endvalue{
	~~width~~:~~90%;~~		flex:0 0 auto;
	~~box-sizing:border-box~~;		order:2;
	~~margin~~:0;
	}		}

			/* Keep this if you still use the single-UI variant */
	:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)		:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
	.module-level-selector .sv-level-ui-single .sv-level-slider-single{		.module-level-selector .sv-level-ui-single .sv-level-slider-single{
	min-height:0.45em;		min-height:0.45em;
	}		}

Eviand at 02:35, 4 March 2026

2026-03-04T02:35:49Z

@@ Line 3: / Line 3: @@
 Sitewide base + shared SpiritVale components (all skins)
 - No Citizen skin selectors
-- Mobile rules are merged into Common.css/Citizen.css (no separate Common.css/Citizen.css)
+- Mobile rules are merged into Common.css/Citizen.css (no separate Mobile.css)
 ============================================================================ */
@@ Line 1,073: / Line 1,073: @@
 background:var(--sv-ui-bg1);
+}
 /* ---------------------------------------------------------------------------