Template:NavCell/styles.css - Revision history

176.25.70.11 at 12:39, 21 December 2025

2025-12-21T12:39:11Z

SunKeeper at 06:26, 21 December 2025

2025-12-21T06:26:18Z

← Older revision		Revision as of 02:26, 21 December 2025
Line 48:		Line 48:

	.navcell-ui {		.navcell-ui {
	width: 260px; ~~/* wide enough to contain Up and Down */~~		width: 260px;
	box-sizing: border-box;		box-sizing: border-box;
	margin: 10px auto 0 auto;		margin: 10px auto 0 auto;
Line 101:		Line 101:
	gap: 12px;		gap: 12px;

	width: 236px; ~~/* inner content width */~~		width: 236px;
	box-sizing: border-box;		box-sizing: border-box;
	margin: 0 auto;		margin: 0 auto;
Line 154:		Line 154:
	}		}

	/* Mobile: fixed pad near bottom, centered~~, no calc/env/transform~~ */		/* Mobile: fixed pad near bottom, centered */

	@media screen and (max-width: 759px) {		@media screen and (max-width: 759px) {
Line 161:		Line 161:
	left: 0 !important;		left: 0 !important;
	right: 0 !important;		right: 0 !important;
	bottom: 92px !important; ~~/* raise above browser and Citizen bars */~~
			bottom: 92px !important;

	margin-left: auto !important;		margin-left: auto !important;
	margin-right: auto !important;		margin-right: auto !important;

	~~z-index: 9999 !important;~~

	padding: 10px 12px !important;		padding: 10px 12px !important;
Line 173:		Line 173:
	border-radius: 14px !important;		border-radius: 14px !important;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) !important;		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) !important;

			z-index: 2147483647 !important;
	}		}

Line 181:		Line 183:

	/* try to prevent footer overlay winning the stacking */		/* try to prevent footer overlay winning the stacking */
			#footer,
	footer,		footer,
	.mw-footer,		.mw-footer,
			.mw-footer-container,
	.mw-body-footer,		.mw-body-footer,
	.mw-page-footer,		.mw-page-footer,
Line 190:		Line 194:
	.citizen-footer__bottom {		.citizen-footer__bottom {
	position: relative !important;		position: relative !important;
	z-index: 0 !important;		z-index: 1 !important;
	}		}
	}		}

SunKeeper at 06:14, 21 December 2025

2025-12-21T06:14:40Z

← Older revision		Revision as of 02:14, 21 December 2025
Line 48:		Line 48:

	.navcell-ui {		.navcell-ui {
	width: ~~232px~~; /* ~~was 216~~ */		width: 260px; /* wide enough to contain Up and Down */
	box-sizing: border-box;		box-sizing: border-box;
	margin: 10px auto 0 auto;		margin: 10px auto 0 auto;
Line 100:		Line 100:
	justify-content: space-between;		justify-content: space-between;
	gap: 12px;		gap: 12px;
	width: ~~232px~~; /* ~~was 216~~ */
			width: 236px; /* inner content width */
	box-sizing: border-box;		box-sizing: border-box;
			margin: 0 auto;
	}		}

Line 152:		Line 154:
	}		}

	/* Mobile: ~~ALWAYS~~ fixed ~~like a gamepad~~, ~~above Citizen footer~~ */		/* Mobile: fixed pad near bottom, centered, no calc/env/transform */

	@media screen and (max-width: 759px) {		@media screen and (max-width: 759px) {

	.navcell-ui {		.navcell-ui {
	position: fixed !important;		position: fixed !important;
	left: ~~50%~~ !important;		left: 0 !important;
			right: 0 !important;
	/* ~~keep it~~ above ~~mobile toolbars + footer~~ */		bottom: 92px !important; /* raise above browser and Citizen bars */
	~~bottom~~: ~~120px~~ !important;		margin-left: auto !important;
			margin-right: auto !important;
	~~transform~~: ~~translateX(-50%)~~ !important;

	~~/* win z-index wars */~~		z-index: 9999 !important;
	z-index: ~~2147483647~~ !important;

	~~margin: 0 !important;~~
	padding: 10px 12px !important;		padding: 10px 12px !important;

Line 177:		Line 175:
	}		}

	/* ~~Make room so~~ the ~~fixed~~ pad ~~never gets covered by footer~~ */		/* keep page text from sitting under the pad */
	.navcell {		.navcell {
	padding-bottom: ~~260px~~ !important;		padding-bottom: 280px !important;
	}		}

	/* ~~If Citizen~~ footer ~~is overlaying, shove it behind our pad~~ */		/* try to prevent footer overlay winning the stacking */
			footer,
	.mw-footer,		.mw-footer,
	footer,		.mw-body-footer,
			.mw-page-footer,
	.citizen-footer,		.citizen-footer,
	.mw-~~body~~-~~footer~~ {		.citizen-footer__container,
			.citizen-footer__content,
			.citizen-footer__bottom {
	position: relative !important;		position: relative !important;
	z-index: 1 !important;		z-index: 0 !important;
	}		}
	}		}

SunKeeper at 06:09, 21 December 2025

2025-12-21T06:09:08Z

← Older revision		Revision as of 02:09, 21 December 2025
Line 48:		Line 48:

	.navcell-ui {		.navcell-ui {
	width: ~~216px~~;		width: 232px; /* was 216 */
	box-sizing: border-box;		box-sizing: border-box;
	margin: 10px auto 0 auto;		margin: 10px auto 0 auto;
Line 99:		Line 99:
	align-items: center;		align-items: center;
	justify-content: space-between;		justify-content: space-between;
	gap: ~~10px~~;		gap: 12px;
	width: ~~216px~~;		width: 232px; /* was 216 */
	box-sizing: border-box;		box-sizing: border-box;
	}		}
Line 106:		Line 106:
	.nav-dpad {		.nav-dpad {
	display: grid;		display: grid;
	grid-template-columns: ~~44px 44px 44px~~;		grid-template-columns: 46px 46px 46px;
	grid-template-rows: ~~36px 36px 36px~~;		grid-template-rows: 38px 38px 38px;
	gap: 4px;		gap: 4px;
	margin: 0;		margin: 0;
Line 114:		Line 114:

	.nav-dpad .nav-btn {		.nav-dpad .nav-btn {
	width: ~~44px~~;		width: 46px;
	height: ~~36px~~;		height: 38px;
	}		}

Line 125:		Line 125:

	.nav-ud .nav-btn {		.nav-ud .nav-btn {
	width: ~~44px~~;		width: 46px;
	height: ~~36px~~;		height: 38px;
	font-size: 0.7em;		font-size: 0.7em;
	}		}
Line 152:		Line 152:
	}		}

	/* Mobile: ALWAYS fixed like a gamepad */		/* Mobile: ALWAYS fixed like a gamepad, above Citizen footer */

	@media screen and (max-width: 759px) {		@media screen and (max-width: 759px) {

	.navcell-ui {		.navcell-ui {
	position: fixed !important;		position: fixed !important;
	left: 50% !important;		left: 50% !important;
	bottom: ~~96px~~ !important;
			/* keep it above mobile toolbars + footer */
			bottom: 120px !important;

	transform: translateX(-50%) !important;		transform: translateX(-50%) !important;

			/* win z-index wars */
	z-index: 2147483647 !important;		z-index: 2147483647 !important;

	margin: 0 !important;		margin: 0 !important;
	padding: ~~8px~~ 10px !important;		padding: 10px 12px !important;

	background: rgba(0, 0, 0, 0.90) !important;		background: rgba(0, 0, 0, 0.92) !important;
	border: 1px solid rgba(255, 255, 255, 0.10) !important;		border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 14px !important;		border-radius: 14px !important;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) !important;		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
	}		}

	/* Make room so the fixed pad ~~does not cover the page content~~ */		/* Make room so the fixed pad never gets covered by footer */
	.navcell {		.navcell {
	padding-bottom: ~~190px~~ !important;		padding-bottom: 260px !important;
			}

			/* If Citizen footer is overlaying, shove it behind our pad */
			.mw-footer,
			footer,
			.citizen-footer,
			.mw-body-footer {
			position: relative !important;
			z-index: 1 !important;
	}		}
	}		}

SunKeeper at 06:06, 21 December 2025

2025-12-21T06:06:47Z

← Older revision		Revision as of 02:06, 21 December 2025
Line 152:		Line 152:
	}		}

	/* Mobile: fixed ~~bottom~~ gamepad */		/* Mobile: ALWAYS fixed like a gamepad */

	@media screen and (max-width: 759px) {		@media screen and (max-width: 759px) {
	~~body.sk-navpad-on~~ .navcell-ui {		.navcell-ui {
	position: fixed;		position: fixed !important;
	left: 50%;		left: 50% !important;
	bottom: ~~74px~~;		bottom: 96px !important;
	transform: translateX(-50%);		transform: translateX(-50%) !important;

	z-index: 2147483647;		z-index: 2147483647 !important;

	margin: 0;		margin: 0 !important;
	padding: 8px 10px;		padding: 8px 10px !important;

	background: rgba(0, 0, 0, 0.90);		background: rgba(0, 0, 0, 0.90) !important;
	border: 1px solid rgba(255, 255, 255, 0.10);		border: 1px solid rgba(255, 255, 255, 0.10) !important;
	border-radius: 14px;		border-radius: 14px !important;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
	}		}

	~~body.sk-navpad-on .navcell {~~		/* Make room so the fixed pad does not cover the page content */
	~~padding-bottom: 170px;~~		.navcell {
	}		padding-bottom: 190px !important;

	~~body.sk-navpad-off .navcell-ui {~~
	~~display: none;~~
	}

	/* ~~Force~~ the ~~navpad above any skin footer overlays~~ */
	~~body.sk-navpad-on .navcell-ui,~~
	~~body.sk-navpad-on~~ .navcell-ui * {
	~~position~~: ~~relative~~;
	}		}
	}		}

SunKeeper at 06:03, 21 December 2025

2025-12-21T06:03:09Z

← Older revision		Revision as of 02:03, 21 December 2025
Line 13:		Line 13:
	}		}

	/* Text blocks: tighter, smaller~~, no weird wrapping~~ */		/* Text blocks: tighter, smaller */

	.navcell-desc,		.navcell-desc,
Line 152:		Line 152:
	}		}

	/* Mobile: ~~make the nav pad~~ fixed ~~at the~~ bottom ~~like a~~ gamepad */		/* Mobile: fixed bottom gamepad */

	@media screen and (max-width: 759px) {		@media screen and (max-width: 759px) {
Line 158:		Line 158:
	position: fixed;		position: fixed;
	left: 50%;		left: 50%;
	bottom: ~~10px~~;		bottom: 74px;
	transform: translateX(-50%);		transform: translateX(-50%);
	z-index: ~~9999~~;
			z-index: 2147483647;

	margin: 0;		margin: 0;
	padding: 8px 10px;		padding: 8px 10px;

	background: rgba(0, 0, 0, 0.85);		background: rgba(0, 0, 0, 0.90);
	border: 1px solid rgba(255, 255, 255, 0.08);		border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 14px;		border-radius: 14px;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
	}		}

	body.sk-navpad-on .navcell {		body.sk-navpad-on .navcell {
	padding-bottom: ~~92px~~;		padding-bottom: 170px;
	}		}

	body.sk-navpad-off .navcell-ui {		body.sk-navpad-off .navcell-ui {
	display: none;		display: none;
			}

			/* Force the navpad above any skin footer overlays */
			body.sk-navpad-on .navcell-ui,
			body.sk-navpad-on .navcell-ui * {
			position: relative;
	}		}
	}		}

SunKeeper at 21:40, 20 December 2025

2025-12-20T21:40:44Z

Show changes

SunKeeper at 21:35, 20 December 2025

2025-12-20T21:35:44Z

← Older revision		Revision as of 17:35, 20 December 2025
Line 1:		Line 1:
			/* Container */
	.navcell {		.navcell {
	max-width: 100%;		max-width: 100%;
Line 4:		Line 5:
	}		}

			/* FLOATING GAMEPAD — THIS IS THE FIX */
	.navcell-ui {		.navcell-ui {
	position: fixed;		position: fixed;
	bottom: ~~12px~~;		bottom: 14px;
	left: ~~12px~~;		left: 14px;
	z-index: ~~999~~;		z-index: 9999;
	background: rgba(0,0,0,0.6);
			background: rgba(0,0,0,0.75);
			border-radius: 12px;
	padding: 8px;		padding: 8px;
	~~border-radius~~: ~~10px~~;
			width: auto;
	}		}

			/* D-pad */
	.nav-grid {		.nav-grid {
	display: grid;		display: grid;
	grid-template-columns: ~~56px 56px 56px~~;		grid-template-columns: 42px 42px 42px;
	grid-template-rows: ~~56px 56px 56px~~;		grid-template-rows: 42px 42px 42px;
	gap: 6px;		gap: 6px;
	}		}
Line 25:		Line 31:
	align-items: center;		align-items: center;
	justify-content: center;		justify-content: center;
	background: #~~2a2a2a~~;
	border-radius: ~~8px~~;		background: #222;
	font-size: ~~13px~~;		border-radius: 6px;

			font-size: 11px;
			line-height: 1.1;
	text-align: center;		text-align: center;
	}		}
Line 36:		Line 45:
	}		}

	.nav-center {		.nav-center,
			.nav-empty {
	background: transparent;		background: transparent;
	}		}

			/* Up / Down */
	.nav-ud {		.nav-ud {
	display: flex;		display: flex;
Line 47:		Line 58:

	.nav-ud .nav-btn {		.nav-ud .nav-btn {
	width: ~~56px~~;		width: 42px;
			height: 32px;
			font-size: 10px;
	}		}

			/* Text content */
	.nav-text {		.nav-text {
	margin-top: ~~160px~~;		margin-top: 8px;
	}		}

	.nav-desc {		.nav-desc {
	font-size: ~~14px~~;		font-size: 13px;
	line-height: 1.25;		line-height: 1.2;
	margin-bottom: ~~6px~~;		margin-bottom: 4px;
	}		}

	.nav-nearby {		.nav-nearby {
	font-size: ~~13px~~;		font-size: 12px;
	opacity: 0.85;		opacity: 0.85;
			}

			/* Prevent overlap */
			@media (max-width: 900px) {
			.nav-text {
			padding-bottom: 140px;
			}
	}		}

SunKeeper at 21:31, 20 December 2025

2025-12-20T21:31:18Z

Show changes

SunKeeper at 14:41, 20 December 2025

2025-12-20T14:41:06Z

Show changes