MediaWiki:Common.css - Revision history

SunKeeper at 12:47, 21 December 2025

2025-12-21T12:47:09Z

← Older revision		Revision as of 08:47, 21 December 2025
Line 1:		Line 1:
	/* =========================================================		/* =========================================================
	~~NavCell floating pad~~: ~~always above Citizen footer + bars~~		SK NAVPAD: ALWAYS ON TOP, NEVER UNDER CITIZEN FOOTER
	~~This MUST be~~ in Common.css ~~(TemplateStyles cannot do fixed)~~		Put ONLY in MediaWiki:Common.css
	========================================================= */		========================================================= */

	/* ~~1) Make sure~~ the fixed ~~pad is always on top~~ */		/* Always force the navpad to be fixed and above everything */
			body.sk-navpad-on #sk-navpad,
	body.sk-navpad-on #sk-navpad.navcell-ui,		body.sk-navpad-on #sk-navpad.navcell-ui,
	body.sk-navpad-on .navcell-ui#sk-navpad {		body.sk-navpad-on .navcell-ui#sk-navpad {
Line 11:		Line 12:
	transform: translateX(-50%) !important;		transform: translateX(-50%) !important;

	/* ~~sit~~ above phone ~~safe area and Citizen bottom~~ UI */		/* lift it above phone UI a bit */
	bottom: calc(~~16px~~ + env(safe-area-inset-bottom, 0px)) !important;		bottom: calc(22px + env(safe-area-inset-bottom, 0px)) !important;

	z-index: ~~2147483000~~ !important;		/* absurdly high, higher than any theme UI */
			z-index: 2147483647 !important;

			/* create a new stacking context so it cannot get trapped */
			isolation: isolate !important;

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

	~~background: rgba(0,0,0,0.88) !important;~~
	~~border: 1px solid rgba(255,255,255,0.10) !important;~~
	~~border-radius: 16px !important;~~
	~~box-shadow: 0 10px 30px rgba(0,0,0,0.45) !important;~~
	}		}

	/* 2) Reserve space so page content ~~and footer do~~ not sit under it */		/* Reserve space so page content does not sit under it */
	body.sk-navpad-on {		body.sk-navpad-on {
	padding-bottom: calc(~~180px~~ + env(safe-area-inset-bottom, 0px)) !important;		padding-bottom: calc(220px + env(safe-area-inset-bottom, 0px)) !important;
	}		}

	/* ~~3) If Citizen’s~~ footer ~~or bottom elements are overlaying, push them below~~ */		/* Force any footer like thing to never sit on top of the navpad */
	footer,		footer,
			#footer,
			.mw-footer,
	.citizen-footer,		.citizen-footer,
	~~.mw-~~footer,		[class*="footer"],
	#footer,		[id*="footer"],
	.citizen-ui,		.citizen-ui,
	.citizen-ui__footer,		.citizen-ui__footer,
	.citizen-ui-footer,		.citizen-ui-footer,
			.citizen-toolbar,
	.citizen-drawer,		.citizen-drawer,
	~~.citizen-~~toolbar {		[class*="toolbar"],
	~~z-index: 1 !important;~~		[id*="toolbar"],
			[class*="drawer"],
			[id*="drawer"] {
	position: relative !important;		position: relative !important;
			z-index: 0 !important;
			}

			/* If Citizen has a fixed bottom bar, keep it under everything */
			[class*="sticky"],
			[id*="sticky"],
			[class*="bottom"],
			[id*="bottom"] {
			z-index: 0 !important;
	}		}

	/* ~~4) When navpad is~~ off~~, keep it hidden on mobile~~ */		/* Hide the pad when you turn it off */
	@media (max-width: 759px) {		@media (max-width: 759px) {
			body.sk-navpad-off #sk-navpad,
	body.sk-navpad-off #sk-navpad.navcell-ui,		body.sk-navpad-off #sk-navpad.navcell-ui,
	body.sk-navpad-off .navcell-ui#sk-navpad {		body.sk-navpad-off .navcell-ui#sk-navpad {

SunKeeper at 12:44, 21 December 2025

2025-12-21T12:44:11Z

← Older revision		Revision as of 08:44, 21 December 2025
Line 1:		Line 1:
	/* SK NavCell floating ~~gamepad on mobile */~~		/* =========================================================
	~~@media screen and~~ (~~max-width: 759px~~) {		NavCell floating pad: always above Citizen footer + bars
			This MUST be in Common.css (TemplateStyles cannot do fixed)
			========================================================= */

	/* ~~keep~~ the pad ~~above Citizen UI and above the footer~~ */		/* 1) Make sure the fixed pad is always on top */
	body.sk-navpad-on .navcell-ui {		body.sk-navpad-on #sk-navpad.navcell-ui,
	position: fixed !important;		body.sk-navpad-on .navcell-ui#sk-navpad {
			position: fixed !important;
			left: 50% !important;
			transform: translateX(-50%) !important;

	/* ~~lift it~~ above phone ~~browser bars~~ */		/* sit above phone safe area and Citizen bottom UI */
	~~left: 50% !important;~~		bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
	bottom: calc(env(safe-area-inset-bottom, 0px) ~~+ 72px) !important;~~
	~~transform: translateX(-50%~~) !important;

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

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

	background: rgba(0, 0, 0, 0.85) !important;		background: rgba(0,0,0,0.88) !important;
	border: 1px solid rgba(255, 255, 255, 0.10) !important;		border: 1px solid rgba(255,255,255,0.10) !important;
	border-radius: ~~14px~~ !important;		border-radius: 16px !important;
	box-shadow: 0 ~~0 0 1px~~ rgba(~~255~~, ~~255~~, ~~255~~, 0.06) !important;		box-shadow: 0 10px 30px rgba(0,0,0,0.45) !important;
	}		}

	/* ~~stop~~ page content ~~from hiding behind the fixed pad~~ */		/* 2) Reserve space so page content and footer do not sit under it */
	body.sk-navpad-on ~~.navcell~~ {		body.sk-navpad-on {
	padding-bottom: ~~220px~~ !important;		padding-bottom: calc(180px + env(safe-area-inset-bottom, 0px)) !important;
	}		}

	/* ~~optional hide mode~~ */		/* 3) If Citizen’s footer or bottom elements are overlaying, push them below */
	body.sk-navpad-off .navcell-ui {		footer,
			.citizen-footer,
			.mw-footer,
			#footer,
			.citizen-ui,
			.citizen-ui__footer,
			.citizen-ui-footer,
			.citizen-drawer,
			.citizen-toolbar {
			z-index: 1 !important;
			position: relative !important;
			}

			/* 4) When navpad is off, keep it hidden on mobile */
			@media (max-width: 759px) {
			body.sk-navpad-off #sk-navpad.navcell-ui,
			body.sk-navpad-off .navcell-ui#sk-navpad {
	display: none !important;		display: none !important;
	}		}
	}		}

SunKeeper at 12:40, 21 December 2025

2025-12-21T12:40:29Z

@@ Line 1: / Line 1: @@
-/* SK navigation cells */
+/* SK NavCell floating gamepad on mobile */
-.navcell {
+   /* keep the pad above Citizen UI and above the footer */
-  margin: 1.5em 0;
+   body.sk-navpad-on .navcell-ui {
-   max-width: 380px;        /* slightly tighter column */
+    position: fixed !important;
-/* 3×3 compass grid */
+    /* lift it above phone browser bars */
-.nav-grid {
+    z-index: 2147483647 !important;
-.nav-btn {
+    margin: 0 !important;
-.nav-btn:hover {
+    background: rgba(0, 0, 0, 0.85) !important;
-  background: #333;
+    border: 1px solid rgba(255, 255, 255, 0.10) !important;
-  border-color: #777;
+    border-radius: 14px !important;
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
-.nav-empty {
+  /* stop page content from hiding behind the fixed pad */
-  background: transparent;
+  body.sk-navpad-on .navcell {
-   border: none;
+    padding-bottom: 220px !important;
+   }
-/* Up / Down row */
+   /* optional hide mode */
+   body.sk-navpad-off .navcell-ui {
-.nav-vertical-row {
+    display: none !important;
-  display: flex;
+}

SunKeeper: Adding Compass Rose in center styling

2025-12-04T20:35:17Z

Adding Compass Rose in center styling

@@ Line 69: / Line 69: @@
    align-items: center;
    justify-content: center;
+}

SunKeeper: smaller buttons for NavButtons

2025-12-04T02:28:33Z

smaller buttons for NavButtons

← Older revision		Revision as of 22:28, 3 December 2025
Line 3:		Line 3:
	.navcell {		.navcell {
	margin: 1.5em 0;		margin: 1.5em 0;
	max-width: ~~450px~~;		max-width: 380px; /* slightly tighter column */
	margin-left: auto;		margin-left: auto;
	margin-right: auto;		margin-right: auto;
Line 12:		Line 12:
	.nav-grid {		.nav-grid {
	display: grid;		display: grid;
	grid-template-columns: ~~90px 90px 90px~~;		grid-template-columns: 70px 70px 70px; /* smaller directional buttons */
	grid-template-rows: ~~90px 90px 90px~~;		grid-template-rows: 70px 70px 70px; /* smaller directional buttons */
	gap: ~~10px~~;		gap: 8px;
	justify-content: center;		justify-content: center;
	margin: 1em 0;		margin: 1em 0;
Line 23:		Line 23:
	align-items: center;		align-items: center;
	justify-content: center;		justify-content: center;
	text-align: center; ~~/* FIX: center multiline text */~~		text-align: center;
	padding: ~~6px~~; /* ~~FIX: stabilize label spacing~~ */		padding: 4px; /* smaller padding */
	background: #222;		background: #222;
	border: 1px solid #444;		border: 1px solid #444;
	border-radius: ~~8px~~; ~~/* slightly more modern */~~		border-radius: 6px;
	font-size: 0.~~75em~~; /* ~~FIX:~~ smaller ~~to fit words~~ */		font-size: 0.72em; /* slightly smaller font */
	line-height: 1.~~2em~~; ~~/* FIX: improves readability */~~		line-height: 1.15em;
	text-decoration: none !important;		text-decoration: none !important;
	color: #eee !important;		color: #eee !important;
Line 49:		Line 49:
	display: flex;		display: flex;
	justify-content: center;		justify-content: center;
	gap: ~~12px~~; ~~/* FIX: wider spacing from edges */~~		gap: 10px;
	margin: 0.~~8em~~ 0 1.~~3em~~ 0; ~~/* FIX: better vertical spacing */~~		margin: 0.6em 0 1.1em 0;
	}		}

	.nav-vertical {		.nav-vertical {
	min-width: ~~110px~~; /* ~~FIX: allows MOVE DOWN to fit~~ */		min-width: 95px; /* trimmed horizontally */
	min-height: ~~40px~~;		min-height: 38px; /* visually balanced height */
	}		}

Line 66:		Line 66:
	height: 100%;		height: 100%;
	display: flex;		display: flex;
	flex-direction: column; ~~/* FIX: ensures <br> stacking */~~		flex-direction: column;
	align-items: center;		align-items: center;
	justify-content: center;		justify-content: center;
	}		}

SunKeeper: Adjusting spacing for Nav Buttons GUI

2025-12-04T02:26:47Z

Adjusting spacing for Nav Buttons GUI

← Older revision		Revision as of 22:26, 3 December 2025
Line 3:		Line 3:
	.navcell {		.navcell {
	margin: 1.5em 0;		margin: 1.5em 0;
	max-width: 450px; ~~/* added */~~		max-width: 450px;
	margin-left: auto; ~~/* added */~~		margin-left: auto;
	margin-right: auto; ~~/* added */~~		margin-right: auto;
	}		}

Line 12:		Line 12:
	.nav-grid {		.nav-grid {
	display: grid;		display: grid;
	grid-template-columns: ~~60px 60px 60px~~;		grid-template-columns: 90px 90px 90px;
	grid-template-rows: ~~60px 60px 60px~~;		grid-template-rows: 90px 90px 90px;
	gap: ~~6px~~;		gap: 10px;
	justify-content: center;		justify-content: center;
	margin: 1em 0;		margin: 1em 0;
Line 23:		Line 23:
	align-items: center;		align-items: center;
	justify-content: center;		justify-content: center;
			text-align: center; /* FIX: center multiline text */
			padding: 6px; /* FIX: stabilize label spacing */
	background: #222;		background: #222;
	border: 1px solid #444;		border: 1px solid #444;
	border-radius: ~~6px~~;		border-radius: 8px; /* slightly more modern */
	font-size: 0.~~9em~~;		font-size: 0.75em; /* FIX: smaller to fit words */
			line-height: 1.2em; /* FIX: improves readability */
	text-decoration: none !important;		text-decoration: none !important;
	color: #eee !important;		color: #eee !important;
Line 46:		Line 49:
	display: flex;		display: flex;
	justify-content: center;		justify-content: center;
	gap: ~~8px~~;		gap: 12px; /* FIX: wider spacing from edges */
	margin: 0.~~5em~~ 0 ~~1em~~ 0;		margin: 0.8em 0 1.3em 0; /* FIX: better vertical spacing */
	}		}

	.nav-vertical {		.nav-vertical {
	min-width: ~~70px~~;		min-width: 110px; /* FIX: allows MOVE DOWN to fit */
			min-height: 40px;
	}		}

	/* Make ~~the~~ link fill ~~the~~ button */		/* Make link fill button */

	.nav-btn a {		.nav-btn a {
Line 62:		Line 66:
	height: 100%;		height: 100%;
	display: flex;		display: flex;
			flex-direction: column; /* FIX: ensures <br> stacking */
	align-items: center;		align-items: center;
	justify-content: center;		justify-content: center;
	}		}

SunKeeper at 02:19, 4 December 2025

2025-12-04T02:19:33Z

← Older revision		Revision as of 22:19, 3 December 2025
Line 3:		Line 3:
	.navcell {		.navcell {
	margin: 1.5em 0;		margin: 1.5em 0;
			max-width: 450px; /* added */
			margin-left: auto; /* added */
			margin-right: auto; /* added */
	}		}

SunKeeper at 02:06, 4 December 2025

2025-12-04T02:06:04Z

@@ Line 1: / Line 1: @@
 .nav-grid {
    display: grid;
@@ Line 5: / Line 13: @@
    gap: 6px;
    justify-content: center;
-   margin: 1.2em 0;
+   margin: 1em 0;
+}
@@ Line 28: / Line 36: @@
    background: transparent;
    border: none;
+}

SunKeeper: For Nav page layout

2025-12-04T01:57:37Z

For Nav page layout

← Older revision	Revision as of 21:57, 3 December 2025
Line 1:	Line 1:
		.nav-grid {
		display: grid;
		grid-template-columns: 60px 60px 60px;
		grid-template-rows: 60px 60px 60px;
		gap: 6px;
		justify-content: center;
		margin: 1.2em 0;
		}

		.nav-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		background: #222;
		border: 1px solid #444;
		border-radius: 6px;
		font-size: 0.9em;
		text-decoration: none !important;
		color: #eee !important;
		}

		.nav-btn:hover {
		background: #333;
		border-color: #777;
		}

		.nav-empty {
		background: transparent;
		border: none;
		}

SunKeeper: deleting all custom css

2025-11-15T22:32:21Z

deleting all custom css

Show changes