MediaWiki:Mobile.css - Revision history

Kashya at 02:57, 13 November 2026

2026-11-13T02:57:26Z

← Older revision		Revision as of 02:57, 13 November 2026
Line 319:		Line 319:
	visibility: visible !important;		visibility: visible !important;
	opacity: 1 !important;		opacity: 1 !important;
			}
			/* Ensure VaniSearch popup modal (#mspu_div_wrapper) stays on top of the sticky header */
			#mspu_div_wrapper {
			z-index: 2147483647 !important;
	}		}

Kashya at 02:23, 13 November 2026

2026-11-13T02:23:21Z

@@ Line 289: / Line 289: @@
+}
-/* 2. Position the replacement mobile search box (and fallback form) next to burger icon */
+/* 2. Ensure the top bar and search input are selectable and never blocked by a mask */
-body.skin-minerva .minerva-header .vani-mobile-search-box,
+body.skin-minerva .minerva-header,
-body.skin-minerva .minerva-header .minerva-search-form {
+body.skin-minerva .minerva-header .vani-mobile-search-wrap,
-     flex: 1 1 auto !important;
+body.skin-minerva #vani-mobile-search-input {
-     width: auto !important;
+     pointer-events: auto !important;
-     max-width: calc(100vw - 145px) !important;
+     user-select: text !important;
-    margin: 0 auto 0 10px !important;
+     -webkit-user-select: text !important;
+}
-/* 3. Keep search box visible at all times */
+/* 3. Disable Minerva's page mask and search overlay so they cannot block clicks or hide content */
-body.skin-minerva .minerva-header .search-box,
+.search-overlay,
-html.overlay-enabled body.skin-minerva .minerva-header .search-box,
+.minerva-search-overlay,
-body.skin-minerva.search-enabled .minerva-header .search-box {
+div.mw-ui-overlay.search-overlay,
-    display: flex !important;
+body.search-enabled .mw-mf-page-center__mask,
-    align-items: center !important;
+html.overlay-enabled .mw-mf-page-center__mask,
-    width: 100% !important;
+.cdx-menu,
-    visibility: visible !important;
+.cdx-typeahead-search__menu,
-    opacity: 1 !important;
+.suggestions,
-    position: relative !important;
+.mw-searchSuggest {
      display: none !important;
+}
 html.overlay-enabled #mw-mf-page-center,
 html.overlay-enabled #content,
@@ Line 366: / Line 319: @@
      visibility: visible !important;
      opacity: 1 !important;
+}

Kashya at 02:06, 13 November 2026

2026-11-13T02:06:01Z

← Older revision		Revision as of 02:06, 13 November 2026
Line 282:		Line 282:
	column-count: 1 !important;		column-count: 1 !important;
	}		}
	/* ~~==========================================================================~~		/* Mobile and Desktop Search Bar Layout */
	~~DEFINITIVE MINERVA MOBILE SEARCH BAR (REPLACES TITLE, NO OVERLAP, NO BLANK SCREEN)~~
	~~==========================================================================~~ */

	/* 1. Hide "Vanipedia" title on mobile so ~~the~~ search bar ~~takes~~ its place ~~cleanly~~ */		/* 1. Hide "Vanipedia" title on mobile so search bar sits in its place */
	body.skin-minerva .minerva-header .branding-box {		body.skin-minerva .minerva-header .branding-box {
	display: none !important;		display: none !important;
	}		}

	/* 2. Position the search form ~~cleanly right~~ next to ~~the Burger menu~~ */		/* 2. Position the replacement mobile search box (and fallback form) next to burger icon */
			body.skin-minerva .minerva-header .vani-mobile-search-box,
	body.skin-minerva .minerva-header .minerva-search-form {		body.skin-minerva .minerva-header .minerva-search-form {
	flex: 1 1 auto !important;		flex: 1 1 auto !important;
Line 302:		Line 301:
	}		}

	/* 3. Keep .search-box ~~ALWAYS~~ visible ~~(even if Minerva adds .search-enabled)~~ */		/* 3. Keep search box visible at all times */
	body.skin-minerva .minerva-header .minerva-~~search-form~~ .search-box,		body.skin-minerva .minerva-header .search-box,
	body.skin-minerva.search-enabled .minerva-header ~~.minerva-search-form~~ .search-box {		html.overlay-enabled body.skin-minerva .minerva-header .search-box,
			body.skin-minerva.search-enabled .minerva-header .search-box {
	display: flex !important;		display: flex !important;
	align-items: center !important;		align-items: center !important;
Line 313:		Line 313:
	}		}

	/* 4. Style the ~~search~~ input ~~& strip~~ the ~~dark~~ left ~~magnifier~~ icon */		/* 4. Style the mobile input and remove the left background icon */
	body.skin-minerva .minerva-header ~~.minerva-search-form~~ input.vani-clean-search-input,		body.skin-minerva .minerva-header input.vani-clean-search-input,
	body.skin-minerva .minerva-header ~~.minerva-search-form~~ .search-box input {		body.skin-minerva .minerva-header .search-box input {
	display: block !important;		display: block !important;
	width: 100% !important;		width: 100% !important;
	~~max-width: 100% !important;~~
	~~min-width: 0 !important;~~
	height: 32px !important;		height: 32px !important;
	background: #1f3e45 !important;		background: #1f3e45 !important;
	background-image: none !important; ~~/* Removes native dark left magnifier */~~		background-image: none !important;
	color: #ffffff !important;		color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;		-webkit-text-fill-color: #ffffff !important;
	border: 1.5px solid #f5d77f !important;		border: 1.5px solid #f5d77f !important;
	border-radius: 16px !important;		border-radius: 16px !important;
	padding: 2px 32px 2px 12px !important; ~~/* 12px left padding (no left icon), 32px right for 🔍 */~~		padding: 2px 32px 2px 12px !important;
	font-size: 15px !important;		font-size: 15px !important;
	line-height: 26px !important;		line-height: 26px !important;
Line 336:		Line 334:
	}		}

	/* ~~Hide any native Codex/Minerva left start~~-~~icons inside the search box~~ */		/* 5. Style the right-side magnifier button */
	~~body~~.~~skin~~-~~minerva .minerva~~-~~header .minerva~~-~~search~~-~~form .cdx-text-input__start-icon,~~		.vani-inline-go {
	~~body.skin-minerva .minerva-header .minerva-search-form .cdx-text-input__icon,~~		position: absolute !important;
	~~body.skin~~-~~minerva .minerva-header .minerva-search-form .minerva-icon {~~		right: 8px !important;
	~~display~~: ~~none~~ !important;		top: 50% !important;
			transform: translateY(-50%) !important;
			background: none !important;
			border: none !important;
			font-size: 15px !important;
			cursor: pointer !important;
			padding: 0 !important;
			line-height: 1 !important;
			z-index: 20 !important;
	}		}

	/* 5. Hide ~~the dummy #searchIcon trigger button~~ */		/* 6. Hide native Minerva search icons */
			body.skin-minerva .minerva-header .cdx-text-input__start-icon,
			body.skin-minerva .minerva-header .cdx-text-input__icon,
			body.skin-minerva .minerva-header .minerva-search-form .minerva-icon,
	body.skin-minerva .minerva-header #searchIcon,		body.skin-minerva .minerva-header #searchIcon,
	body.skin-minerva .minerva-header .skin-minerva-search-trigger {		body.skin-minerva .minerva-header .skin-minerva-search-trigger {
Line 349:		Line 358:
	}		}

	/* 6. Prevent ~~Minerva's~~ overlay-enabled ~~class~~ from hiding ~~the~~ page content! */		/* 7. Prevent html.overlay-enabled from hiding page content if triggered before JS loads */
	~~body~~.~~skin-minerva.search~~-enabled #mw-mf-page-center,		html.overlay-enabled #mw-mf-page-center,
	~~body~~.~~skin~~-~~minerva~~.~~overlay~~-enabled #mw-mf-page-center,		html.overlay-enabled #content,
	body.~~skin-minerva.search~~-enabled #~~content,~~		body.search-enabled #mw-mf-page-center,
	~~body.skin~~-~~minerva.overlay~~-~~enabled #content~~ {		body.overlay-enabled #mw-mf-page-center {
	display: block !important;		display: block !important;
	visibility: visible !important;		visibility: visible !important;
Line 359:		Line 368:
	}		}

	/* 7. Hide native autocomplete ~~dropdowns and Minerva's blank search overlay~~ */		/* 8. Hide native search overlays and autocomplete menus */
	.search-overlay,		.search-overlay,
	.minerva-search-overlay,		.minerva-search-overlay,

Kashya at 01:58, 13 November 2026

2026-11-13T01:58:01Z

← Older revision		Revision as of 01:58, 13 November 2026
Line 283:		Line 283:
	}		}
	/* ==========================================================================		/* ==========================================================================
	~~FIX~~ MINERVA MOBILE SEARCH~~: SHOW INLINE SEARCH BOX~~, ~~HIDE BROKEN #searchIcon~~		DEFINITIVE MINERVA MOBILE SEARCH BAR (REPLACES TITLE, NO OVERLAP, NO BLANK SCREEN)
	========================================================================== */		========================================================================== */
	/* 1. ~~Allow~~ the search form in the ~~Minerva header to expand instead of being 32px~~ */
			/* 1. Hide "Vanipedia" title on mobile so the search bar takes its place cleanly */
			body.skin-minerva .minerva-header .branding-box {
			display: none !important;
			}

			/* 2. Position the search form cleanly right next to the Burger menu */
	body.skin-minerva .minerva-header .minerva-search-form {		body.skin-minerva .minerva-header .minerva-search-form {
	flex: 1 1 auto !important;		flex: 1 1 auto !important;
	width: auto !important;		width: auto !important;
	max-width: ~~170px~~ !important;		max-width: calc(100vw - 145px) !important;
	margin~~-left~~: auto ~~!important;~~		margin: 0 auto 0 10px !important;
	~~margin-right: 6px~~ !important;
	display: flex !important;		display: flex !important;
	align-items: center !important;		align-items: center !important;
			position: relative !important;
	}		}

	/* 2. ~~Show the actual~~ search ~~input~~ box ~~inside the header~~ (~~overrides line 1872 display:none~~) */		/* 3. Keep .search-box ALWAYS visible (even if Minerva adds .search-enabled) */
	body.skin-minerva .minerva-header .minerva-search-form .search-box {		body.skin-minerva .minerva-header .minerva-search-form .search-box,
			body.skin-minerva.search-enabled .minerva-header .minerva-search-form .search-box {
	display: flex !important;		display: flex !important;
	align-items: center !important;		align-items: center !important;
	width: 100% !important;		width: 100% !important;
			visibility: visible !important;
			opacity: 1 !important;
	position: relative !important;		position: relative !important;
	}		}

	/* 3. Style the input ~~field inside~~ .search-~~box so text is visible */~~		/* 4. Style the search input & strip the dark left magnifier icon */
			body.skin-minerva .minerva-header .minerva-search-form input.vani-clean-search-input,
	body.skin-minerva .minerva-header .minerva-search-form .search-box input {		body.skin-minerva .minerva-header .minerva-search-form .search-box input {
	display: block !important;		display: block !important;
	width: 100% !important;		width: 100% !important;
	height: ~~30px~~ !important;		max-width: 100% !important;
	background~~-color~~: #1f3e45 !important;		min-width: 0 !important;
			height: 32px !important;
			background: #1f3e45 !important;
			background-image: none !important; /* Removes native dark left magnifier */
	color: #ffffff !important;		color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;		-webkit-text-fill-color: #ffffff !important;
	border: 1.5px solid #f5d77f !important;		border: 1.5px solid #f5d77f !important;
	border-radius: 16px !important;		border-radius: 16px !important;
	padding: 2px ~~28px~~ 2px ~~10px~~ !important;		padding: 2px 32px 2px 12px !important; /* 12px left padding (no left icon), 32px right for 🔍 */
	font-size: ~~14px~~ !important;		font-size: 15px !important;
			line-height: 26px !important;
	outline: none !important;		outline: none !important;
	opacity: 1 !important;		opacity: 1 !important;
Line 322:		Line 336:
	}		}

	/* 4. Hide the dummy #searchIcon button ~~so it never triggers #/search~~ */		/* Hide any native Codex/Minerva left start-icons inside the search box */
			body.skin-minerva .minerva-header .minerva-search-form .cdx-text-input__start-icon,
			body.skin-minerva .minerva-header .minerva-search-form .cdx-text-input__icon,
			body.skin-minerva .minerva-header .minerva-search-form .minerva-icon {
			display: none !important;
			}

			/* 5. Hide the dummy #searchIcon trigger button */
	body.skin-minerva .minerva-header #searchIcon,		body.skin-minerva .minerva-header #searchIcon,
	body.skin-minerva .minerva-header .skin-minerva-search-trigger {		body.skin-minerva .minerva-header .skin-minerva-search-trigger {
Line 328:		Line 349:
	}		}

	/* 5. Hide native ~~suggestions~~ */		/* 6. Prevent Minerva's overlay-enabled class from hiding the page content! */
	.cdx-menu, .cdx-typeahead-search__menu, .suggestions, .mw-searchSuggest {		body.skin-minerva.search-enabled #mw-mf-page-center,
			body.skin-minerva.overlay-enabled #mw-mf-page-center,
			body.skin-minerva.search-enabled #content,
			body.skin-minerva.overlay-enabled #content {
			display: block !important;
			visibility: visible !important;
			opacity: 1 !important;
			}

			/* 7. Hide native autocomplete dropdowns and Minerva's blank search overlay */
			.search-overlay,
			.minerva-search-overlay,
			div.mw-ui-overlay.search-overlay,
			.cdx-menu,
			.cdx-typeahead-search__menu,
			.suggestions,
			.mw-searchSuggest {
	display: none !important;		display: none !important;
	}		}

Kashya at 01:53, 13 November 2026

2026-11-13T01:53:25Z

@@ Line 281: / Line 281: @@
      -webkit-column-count: 1 !important;
      column-count: 1 !important;
+}

Visvatmadeva at 10:39, 4 November 2015

2015-11-04T10:39:38Z

Show changes

Visvatmadeva at 10:14, 1 November 2015

2015-11-01T10:14:22Z

← Older revision		Revision as of 10:14, 1 November 2015
Line 3:		Line 3:
	.mobilehide {		.mobilehide {
	display: none;		display: none;
	}

	~~#mainbanner {~~
	~~text-align:center;~~
	}		}

Visvatmadeva at 09:38, 1 November 2015

2015-11-01T09:38:43Z

@@ Line 7: / Line 7: @@
 #mainbanner {
      text-align:center;
+}

Visvatmadeva at 09:35, 1 November 2015

2015-11-01T09:35:29Z

@@ Line 3: / Line 3: @@
 .mobilehide {
      display: none;
+}

Visvatmadeva at 09:08, 1 November 2015

2015-11-01T09:08:52Z

← Older revision		Revision as of 09:08, 1 November 2015
Line 3:		Line 3:
	.mobilehide {		.mobilehide {
	display: none;		display: none;
	}

	~~table td tr th {~~
	~~border:1px solid #transparent;~~
	}		}