MediaWiki:Mobile.css: Difference between revisions

Revision as of 01:58, 13 November 2026

/* CSS placed here will affect users of the mobile site */

.mobilehide {
    display: none; 
}

.mobile-float-reset {
    float: none !important;
    width: 100% !important;
}

/* Hide the images */
.compact-ambox table .mbox-image,
.compact-ambox table .mbox-imageright,
.compact-ambox table .mbox-empty-cell,
/* Allow for hiding text in compact form */
.compact-ambox .hide-when-compact,
.geo-nondefault, .geo-multi-punct,
/* Hide stuff meant for accounts with special permissions. Made visible again in
   [[MediaWiki:Group-sysop.css]], [[MediaWiki:Group-accountcreator.css]] and
   [[MediaWiki:Group-autoconfirmed.css]]. */
.sysop-show,
.accountcreator-show,
.autoconfirmed-show,
/* Copied from Common.css - allow for hiding text in compact form e.g. clean up templates */
.hide-when-compact,
/* portal pages are badly formatted. Until this changes these should be hidden. (see https://phabricator.wikimedia.org/T86495) */
.noprint.portal,
/* Temporary fix for bug 53437 - nav boxes can disrupt reading experience on smaller screens
TODO: Update template to have nomobile class */
#content .vertical-navbox,
#content .navbox {
	display: none;
}

/* Tablet specific styling */
@media all and (min-width: 768px) {
	#content .vertical-navbox,
	#content .navbox {
		display: inherit;
	}
}

/* For linked citation numbers and document IDs, where
   the number need not be shown on a screen or a handheld,
   but should be included in the printed version
TODO: Move to Citation template when templates have stylesheets
See https://www.mediawiki.org/wiki/Requests_for_comment/Allow_styling_in_templates
*/
@media screen, handheld {
    .citation *.printonly {
        display: none;
    }
}
/* Styling for citations (CSS3). Breaks long urls, etc., rather than overflowing box
*/
.citation {
    word-wrap: break-word;
}

/* Default styling for Navbar template
TODO: Move to Navbar template when templates have stylesheets
See https://www.mediawiki.org/wiki/Requests_for_comment/Allow_styling_in_templates
*/
.navbar {
    display: inline;
    font-size: 88%;
    font-weight: normal;
}
.navbar ul {
    display: inline;
    white-space: nowrap;
}
.navbar li {
    word-spacing: -0.125em;
}
.navbar.mini li span {
  font-variant: small-caps;
}
/* Navbar styling when nested in infobox and navbox */
.infobox .navbar {
    font-size: 100%;
}
.navbox .navbar {
    display: block;
    font-size: 100%;
}
.navbox-title .navbar {
    /* @noflip */
    float: left;
    /* @noflip */
    text-align: left;
    /* @noflip */
    margin-right: 0.5em;
    width: 6em;
}

/* Style for horizontal lists (separator following item).
   @source mediawiki.org/wiki/Snippets/Horizontal_lists
   @revision 6 (2014-05-09)
   @author [[User:Edokter]]
 */
.hlist dl,
.hlist ol,
.hlist ul {
    margin: 0;
    padding: 0;
}
/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
    margin: 0;
    display: inline;
}
/* Display nested lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul {
    display: inline;
}
/* Generate interpuncts */
#content .hlist dt:after {
    content: ": ";
}
#content .hlist dd:after,
#content .hlist li:after {
    content: " · ";
    font-weight: bold;
}
#content .hlist dd:last-child:after,
#content .hlist dt:last-child:after,
#content .hlist li:last-child:after {
    content: none;
}
/* Add parentheses around nested lists */
#content .hlist dd dd:first-child:before, #content .hlist dd dt:first-child:before, #content .hlist dd li:first-child:before,
#content .hlist dt dd:first-child:before, #content .hlist dt dt:first-child:before, #content .hlist dt li:first-child:before,
#content .hlist li dd:first-child:before, #content .hlist li dt:first-child:before, #content .hlist li li:first-child:before {
    content: " (";
    font-weight: normal;
}
#content .hlist dd dd:last-child:after, #content .hlist dd dt:last-child:after, #content .hlist dd li:last-child:after,
#content .hlist dt dd:last-child:after, #content .hlist dt dt:last-child:after, #content .hlist dt li:last-child:after,
#content .hlist li dd:last-child:after, #content .hlist li dt:last-child:after, #content .hlist li li:last-child:after {
    content: ") ";
    font-weight: normal;
}
/* Put ordinals in front of ordered list items */
#content .hlist ol {
    counter-reset: listitem;
}
#content .hlist ol > li {
    counter-increment: listitem;
}
#content .hlist ol > li:before {
    content: " " counter(listitem) " ";
    white-space: nowrap;
}
#content .hlist dd ol > li:first-child:before,
#content .hlist dt ol > li:first-child:before,
#content .hlist li ol > li:first-child:before {
    content: " (" counter(listitem) " ";
}
 
/* Unbulleted lists e.g. Barack Obama page */
.plainlist ul {
    list-style: none;
}

/* CODE FOR COMPACT AMBOX */
/* Remove borders, backgrounds, padding, etc.
Please document here what pages use this
*/
.compact-ambox table.ambox {
    border: none;
    border-collapse: collapse;
    background: transparent;
    margin: 0 0 0 1.6em !important;
    padding: 0 !important;
    width: auto;
    display: block;
}
.compact-ambox table.mbox-small-left {
    font-size: 100%;
    width: auto;
    margin: 0;
}
/* Style the text cell as a list item and remove its padding */
.compact-ambox table .mbox-text {
    padding: 0 !important;
    margin: 0 !important;
}
.compact-ambox table .mbox-text-span {
    display: list-item;
    line-height: 1.5em;
    list-style-type: square;
    list-style-image: url("data:image/gif;base64,R0lGODlhBQANAIAAAGOMnP///yH5BAEAAAEALAAAAAAFAA0AAAIJjI+pu+APo4SpADs=");
}

.visualhide {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Hatnotes and disambiguation notices */
.hatnote {
    font-style: italic;
}
.hatnote i {
    font-style: normal;
}
div.hatnote {
    /* @noflip */
    padding-left: 1.6em;
    margin-bottom: 0.5em;
}
div.hatnote + div.hatnote {
    margin-top: -0.5em;
}

/* Geographical coordinates defaults. See [[Template:Coord/link]]
   for how these are used. The classes "geo", "longitude", and
   "latitude" are used by the [[Geo microformat]]. */
.geo-default, .geo-dms, .geo-dec  { display: inline; }

.longitude, .latitude             { white-space: nowrap; }

/* Prevent line breaks in silly places:
   1) Where desired
   2) Links when we don't want them to
   3) Bold "links" to the page itself
   4) Ref tags with group names <ref group="Note"> --> "[Note 1]"
Please document here what pages use this
*/
.nowrap,
.nowraplinks a,
.nowraplinks .selflink,
sup.reference a {
    white-space: nowrap;
}
/* But allow wrapping where desired: */
.wrap,
.wraplinks a {
    white-space: normal;
}

/* hidden sortkey for tablesorter */
td .sortkey,
th .sortkey {
    display: none;
    speak: none;
}

/* Pie chart: Transparent borders */
.transborder {
    border: solid transparent;
}

/* Generic class for Times-based serif, texhtml class for inline math */
.times-serif,
span.texhtml {
    font-family: serif;
}
span.texhtml {
    white-space: nowrap;
}

/* Disabling column-count for {{div col}}, {{reflist}} and {{refbegin}} */
.column-count,
.references-column-count {
    -moz-column-count: 1 !important;
    -webkit-column-count: 1 !important;
    column-count: 1 !important;
}
/* ==========================================================================
   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 */
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 {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: calc(100vw - 145px) !important;
    margin: 0 auto 0 10px !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

/* 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.search-enabled .minerva-header .minerva-search-form .search-box {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
}

/* 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 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    background: #1f3e45 !important;
    background-image: none !important; /* Removes native dark left magnifier */
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1.5px solid #f5d77f !important;
    border-radius: 16px !important;
    padding: 2px 32px 2px 12px !important; /* 12px left padding (no left icon), 32px right for 🔍 */
    font-size: 15px !important;
    line-height: 26px !important;
    outline: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-sizing: border-box !important;
}

/* 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 .skin-minerva-search-trigger {
    display: none !important;
}

/* 6. Prevent Minerva's overlay-enabled class from hiding the page content! */
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;
}