MediaWiki:Mobile.css - Revision history

SuitCase at 22:19, 24 April 2025

2025-04-24T22:19:39Z

← Older revision		Revision as of 22:19, 24 April 2025
Line 31:		Line 31:
	.content .navbox-list {		.content .navbox-list {
	display: flex !important;		display: flex !important;
			width: auto !important;
	flex-wrap: wrap !important; /* allow items to wrap */		flex-wrap: wrap !important; /* allow items to wrap */
	align-items: center;		align-items: center;

SuitCase at 22:18, 24 April 2025

2025-04-24T22:18:04Z

← Older revision		Revision as of 22:18, 24 April 2025
Line 16:		Line 16:
	text-indent: .75em!important;		text-indent: .75em!important;
	}		}
			.content table {
			margin: 0!important;
			overflow: hidden!important;
			}
	/* 2) Make the inner wrapper inline-block so it shrink-wraps its contents */		/* 2) Make the inner wrapper inline-block so it shrink-wraps its contents */
	.content .navbox-inner {		.content .navbox-inner {

SuitCase at 22:14, 24 April 2025

2025-04-24T22:14:43Z

← Older revision		Revision as of 22:14, 24 April 2025
Line 6:		Line 6:
	max-width: 90vw !important; /* never wider than 90% of viewport */		max-width: 90vw !important; /* never wider than 90% of viewport */
	width: auto !important; /* let it shrink below 100% if it can */		width: auto !important; /* let it shrink below 100% if it can */
	overflow-x: hidden;		overflow-x: hidden !important; /* horizontal scroll if content spills */
			-webkit-overflow-scrolling: touch !important;
	box-sizing: border-box;		box-sizing: border-box;
	margin: 0 auto 1em; /* center & give a little bottom spacing */		margin: 0 auto 1em; /* center & give a little bottom spacing */
Line 12:		Line 13:
	/* kill that inline width:1% on the group header */		/* kill that inline width:1% on the group header */
	.content .navbox-group {		.content .navbox-group {
	~~width~~: ~~auto~~!important;		padding-left: 1em!important;
	text-indent: .75em!important;		text-indent: .75em!important;
	}		}

SuitCase at 21:55, 24 April 2025

2025-04-24T21:55:35Z

← Older revision		Revision as of 21:55, 24 April 2025
Line 6:		Line 6:
	max-width: 90vw !important; /* never wider than 90% of viewport */		max-width: 90vw !important; /* never wider than 90% of viewport */
	width: auto !important; /* let it shrink below 100% if it can */		width: auto !important; /* let it shrink below 100% if it can */
			overflow-x: hidden;
	box-sizing: border-box;		box-sizing: border-box;
	margin: 0 auto 1em; /* center & give a little bottom spacing */		margin: 0 auto 1em; /* center & give a little bottom spacing */

SuitCase at 21:52, 24 April 2025

2025-04-24T21:52:40Z

← Older revision		Revision as of 21:52, 24 April 2025
Line 6:		Line 6:
	max-width: 90vw !important; /* never wider than 90% of viewport */		max-width: 90vw !important; /* never wider than 90% of viewport */
	width: auto !important; /* let it shrink below 100% if it can */		width: auto !important; /* let it shrink below 100% if it can */
	~~overflow-x: auto !important; /* horizontal scroll if content spills */~~
	~~-webkit-overflow-scrolling: touch !important;~~
	box-sizing: border-box;		box-sizing: border-box;
	margin: 0 auto 1em; /* center & give a little bottom spacing */		margin: 0 auto 1em; /* center & give a little bottom spacing */

SuitCase at 21:51, 24 April 2025

2025-04-24T21:51:45Z

← Older revision		Revision as of 21:51, 24 April 2025
Line 13:		Line 13:
	/* kill that inline width:1% on the group header */		/* kill that inline width:1% on the group header */
	.content .navbox-group {		.content .navbox-group {
	~~padding-left~~: ~~1em~~!important;		width: auto!important;
	text-indent: .75em!important;		text-indent: .75em!important;
	}		}

SuitCase at 21:50, 24 April 2025

2025-04-24T21:50:42Z

← Older revision		Revision as of 21:50, 24 April 2025
Line 13:		Line 13:
	/* kill that inline width:1% on the group header */		/* kill that inline width:1% on the group header */
	.content .navbox-group {		.content .navbox-group {
	~~width~~: ~~auto~~ !important;		padding-left: 1em!important;
			text-indent: .75em!important;
	}		}

SuitCase at 21:48, 24 April 2025

2025-04-24T21:48:54Z

← Older revision		Revision as of 21:48, 24 April 2025
Line 10:		Line 10:
	box-sizing: border-box;		box-sizing: border-box;
	margin: 0 auto 1em; /* center & give a little bottom spacing */		margin: 0 auto 1em; /* center & give a little bottom spacing */
			}
			/* kill that inline width:1% on the group header */
			.content .navbox-group {
			width: auto !important;
	}		}

SuitCase at 21:45, 24 April 2025

2025-04-24T21:45:23Z

← Older revision		Revision as of 21:45, 24 April 2025
Line 1:		Line 1:
	@media screen and (max-width: 720px) {		@media screen and (max-width: 720px) {
	/* 1) ~~Outer~~ navbox ~~is the scroll~~ container ~~at 100% width~~ */		/* 1) Make the outer navbox a capped, scrollable container */
	.content .navbox,		.content .navbox,
	.content .vertical-navbox {		.content .vertical-navbox {
	display: block !important;		display: block !important;
	width: ~~100~~% !important;		max-width: 90vw !important; /* never wider than 90% of viewport */
	overflow-x: auto !important;		width: auto !important; /* let it shrink below 100% if it can */
			overflow-x: auto !important; /* horizontal scroll if content spills */
	-webkit-overflow-scrolling: touch !important;		-webkit-overflow-scrolling: touch !important;
	box-sizing: border-box;		box-sizing: border-box;
			margin: 0 auto 1em; /* center & give a little bottom spacing */
	}		}

	/* 2) ~~Inner~~ wrapper ~~just~~ wraps ~~the table inline, no forced width~~ */		/* 2) Make the inner wrapper inline-block so it shrink-wraps its contents */
	.content .navbox-inner {		.content .navbox-inner {
	display: inline-block !important;		display: inline-block !important;
Line 17:		Line 19:
	}		}

	/* 3) ~~Line up your groups/items in~~ a ~~row~~ */		/* 3) Turn each list into a flex container that wraps onto new lines */
	.content .navbox-group,		.content .navbox-group,
	.content .navbox-list {		.content .navbox-list {
	~~white~~-~~space~~: ~~nowrap~~ !important;		display: flex !important;
			flex-wrap: wrap !important; /* allow items to wrap */
			align-items: center;
	margin: 0 !important;		margin: 0 !important;
	padding: 0 !important;		padding: 0 !important;
			gap: 0.5em; /* spacing between items */
	}		}

			/* 4) Style each item appropriately */
	.content .navbox-group > li,		.content .navbox-group > li,
	.content .navbox-list > li {		.content .navbox-list > li {
	display: inline-block !important;		display: inline-block !important; /* so padding/margins apply cleanly */
	float: none !important;		float: none !important;
			margin: 0 !important;
	}		}
	}		}

SuitCase at 21:41, 24 April 2025

2025-04-24T21:41:38Z

← Older revision		Revision as of 21:41, 24 April 2025
Line 1:		Line 1:
	@media screen and (max-width: 720px) {		@media screen and (max-width: 720px) {
	/* 1) ~~Un-hide~~ the ~~navbox that Minerva’s mobile CSS has display:none’d~~ */		/* 1) Outer navbox is the scroll container at 100% width */
	.content .navbox,		.content .navbox,
	.content .vertical-navbox {		.content .vertical-navbox {
	display: block !important;		display: block !important;
	~~visibility~~: ~~visible~~ !important;		width: 100% !important;
	~~height~~: auto !important;		overflow-x: auto !important;
	~~max~~-~~height: none !important;~~		-webkit-overflow-scrolling: touch !important;
	~~opacity~~: 1 !important;
	box-sizing: border-box;		box-sizing: border-box;
	~~width: 100% !important;~~
	}		}

	/* 2) ~~Turn~~ the ~~inner~~ table ~~into a scroll container~~ */		/* 2) Inner wrapper just wraps the table inline, no forced width */
	.content .navbox-inner {		.content .navbox-inner {
	display: block !important;		display: inline-block !important;
	~~overflow-x~~: auto ~~!important;~~		width: auto !important;
	~~-webkit-overflow-scrolling: touch !important;~~		min-width: 0 !important;
	~~width: max-content~~ !important;
	min-width: ~~100%~~ !important;
	}		}

	/* 3) ~~Lay out all~~ your groups/items in a ~~single~~ row */		/* 3) Line up your groups/items in a row */
	.content .navbox-group,		.content .navbox-group,
	.content .navbox-list {		.content .navbox-list {