MediaWiki:Mobile.css: Difference between revisions

Revision as of 04:07, 21 May 2022

/* CSS placed here will affect users of the mobile site */
/**
You are editing the global css file for all mobile site users.
With Great Power Comes Great Responsibility.

Some words of caution:
* Avoid any changes which impact layout on a mobile device.
** Please be careful not to introduce any margin / padding rules. These should be done inside the template itself via an inline style.
** Be especially cautious when a template is likely to be used within the top 480px of the screen (the content that the user will see first on a mobile device).
* Do not use display:none. Instead edit the template and markup the element you want to hide with the `nomobile` class.
* Try to keep rules as generic and minimal as possible. Do not have 2 selectors doing the same thing. Introduce a common class and use that instead.
* For big changes consult the [https://grafana.wikimedia.org/dashboard/db/mobile-2g grafana dashboard] to ensure you don't introduce any performance regressions.
* Group common css rules together where possible.

Do not put specific styles for the following into this file:

== Template:Navbar (.navbar) ==
See [[Template:Navbar/styles.css]] ([[Template_talk:Navbar#Request%3A_Add_template_styles_to_existing_stylesheet]])

== Template:Hlist (.hlist) ==
See [[Template:Hlist/styles.css]]

*/

/* Mobile template hacks (see phab T56176)
If you are looking for the following, please update your template to use TemplateStyles:
.mobile-float-reset {
	float: none !important;
	width: 100% !important;
}

*/

/* Hide the images */
.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 {
	display: none;
}

/* 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;
	}
}
/*
Should be moved into Template:Cite_web
Styling for citations (CSS3). Breaks long urls, etc., rather than overflowing box */
.citation {
	word-wrap: break-word;
}

/*
.infobox
DO NOT style infobox's here. That should be taken care of in the associated templates via template styles. Styles here will lead to flash of unstyled content on mobile.
*/

/* Default styling for Navbar template
TODO: Move to Navbar template ASAP
*/
.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 */
.navbox .navbar,
.infobox .navbar {
	font-size: 100%;
}
.navbox .navbar {
	display: block;
}
.navbox-title .navbar {
	/* @noflip */
	float: left;
	/* @noflip */
	text-align: left;
	/* @noflip */
	margin-right: 0.5em;
	width: 6em;
}
/* Unbulleted lists e.g. Barack Obama page*/
.plainlist ul {
	list-style: none;
	padding-left: 0; /* Reset Minerva defaults */
}

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

/* Geographical coordinates hidden in mobile. Any styles relating to them should be put inside
.[[Template:Coord/link]]
 */

/* 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
Enabled 
*/
.mw-parser-output .nowrap,
.nowraplinks a,
.nowraplinks .selflink,
sup.reference a {
	white-space: nowrap;
}
.mw-parser-output .infobox .nowrap {
	white-space: normal !important;
}
/* But allow wrapping where desired: */
.wrap,
.wraplinks a {
	white-space: normal;
}

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

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

/* Enable custom list style types for lists of references */
.reflist ol.references {
	list-style-type: inherit;
}

/* Hanging indentation for Template:Refbegin */
.refbegin-hanging-indents > ul,
.refbegin-hanging-indents > dl {
	list-style-type: none;
	margin-left: 0;
}
.refbegin-hanging-indents > ul > li,
.refbegin-hanging-indents > dl > dd {
	margin-left: 0;
	padding-left: 1.0em;
	text-indent: -1.0em;
	list-style: none;
}

/* Prevent flags in tables from collapsing
Fix for T116318
*/
.flagicon img {
	min-width: 25px;
}

/* Prevent unnecessary margin at the bottom of centralnotices */
.cnotice {
	margin-bottom: 0 !important;
}


/* Divs for changing the main page from tables to css */

.divTable{
	display: table;
	width: 100%;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	border: 0px solid #999999;
	display: table-row;
	padding: 3px 10px;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}


/* Quote boxes */
.quotes {
    background: none repeat scroll 0 0 #F5FDFE;
    border: 1px solid #A8A8A8;
    margin-bottom: 10px;
    margin-left: 14px;
    padding: 6px;
    overflow: hidden;
}

/* Indented quotes without borders */
.indentedquotes {
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 10px;
}

/* Small text Refs at bottom right within quote boxes */
.quotes_ref {
    font-size: 85%;
    text-align: right;
}

/* Box for Core articles */
.core_box {
    background: none repeat scroll 0 0 #F9F9F9;
    border: 1px solid #AAAAAA;
    clear: both;
    float: right;
    font-size: 85%;
    margin: 15px;
    padding: 0.3em;
    width: 260px;
}

/* Site Tag line (top of each page under page title) */
#siteSub {
    display: inline;
    font-size: 85%;
    font-weight: normal;
    font-style: normal;
    text-align: right;
}

.simpleborder {
    border: 1px #aaaaaa solid;
    padding: 3px;
}

.center {
    text-align: center;
    width: 100%;
}

/* Used for {{main||}} template to out-dent and italicize, from Wikipedia */
.rellink, .dablink {
    font-style: italic;
    margin-bottom: 0.5em;
    padding-left: 1.6em;
}

/* Highlight text with yellow background without making a border. Can be used within Quote boxes as well */
.wiHighlight {
  background: #fff8cc;
  border-bottom: 1px solid #ffe222;
  padding-left: .3em;
  padding-right: .3em;
  font-weight: normal;
}

/* Portal articles */

.articleSummaryColumnsWrapper {
  margin: 0 .5em;
}
.articleSummaryColumnsWrapper .articleSummaryColumn {
  display: inline-block;
  width: 50%;
  vertical-align: top;
  position: relative;
  right: -.5em;
}
.articleSummaryColumnsWrapper .articleSummaryColumn:first-child {
  left: -.5em;
}
.articleSummary {
  clear: both;
  margin: 1em 0;
  background: #FAF4E1;
  border: 3px solid #283763;
  -webkit-box-shadow: 0 50px 100px #EFDA9C inset, 0 1px 2px rgba(195, 205, 218, .6);
  -moz-box-shadow: 0 50px 100px #EFDA9C inset, 0 1px 2px rgba(195, 205, 218, .6);
  box-shadow: 0 50px 100px #EFDA9C inset, 0 1px 2px rgba(195, 205, 218, .6);
}
.articleSummary .articleSummaryInner {
  border: 1px solid white;
  padding: .3em 0;
}
.articleSummary .articleSummaryTitle {
  padding: .5em 1em 0 1em;
  margin-bottom: -.2em;
}
.articleSummary .articleSummaryTitle .articleSummaryTitleInner {
  font-size: 140%;
  margin: 0 -.3em;
  border-bottom: 1px dashed #C6D3E3;
  padding: 0 .3em .1em .3em;
}
.articleSummary .articleSummaryImage {
  float: left;
  width: 150px;
  margin: .7em 1em;
}
.articleSummary .articleSummaryImage:hover + .articleSummaryTitle a {
  text-decoration: underline;
}
.articleSummary .articleSummaryImage:active + .articleSummaryTitle a {
  color: #FAA700;
}
.articleSummary .articleSummaryText {
  padding: .7em 1em;
  color: #22262A;
}
.articleSummary .articleSummaryText ol {
  margin-left: 1.6em;
}
.articleSummary .articleSummaryEnding {
  clear: both;
}
.articleSummary .articleSummaryImage + .articleSummaryTitle + .articleSummaryText, .articleSummary .articleSummaryImage + .articleSummaryText {
  margin-left: 150px;
  padding-left: 2em;
}
@media screen and (min-width: 601px) and (max-width: 1110px) {
  .articleSummaryColumnsWrapper {
    margin: 0;
  }
  .articleSummaryColumnsWrapper .articleSummaryColumn {
    display: block;
    width: auto;
    vertical-align: top;
    position: static;
    right: 0;
  }
  .articleSummaryColumnsWrapper .articleSummaryColumn:first-child {
    left: 0;
  }
}

@media screen and (max-width: 600px) {
  .articleSummaryColumnsWrapper {
    margin: 0;
  }
  .articleSummaryColumnsWrapper .articleSummaryColumn {
    display: block;
    width: auto;
    vertical-align: top;
    position: static;
    right: 0;
  }
  .articleSummaryColumnsWrapper .articleSummaryColumn:first-child {
    left: 0;
  }
 .articleSummaryImage {
    display: none;
 }

 .articleSummary .articleSummaryImage + .articleSummaryTitle + .articleSummaryText, .articleSummary .articleSummaryImage + .articleSummaryText {
   margin-left: 0px;
   padding-left: 2em;
 }
}

/*
@media screen and (min-width: 1111px) and (max-width: 1340px) {
  .articleSummary .articleSummaryExtendedDescription {
    display: none;
  }
}
*/

/* Increase the default header sizes */
.mw-body-content h2 {
  font-size: 2.2em;
}

.mw-body h1, .mw-body-content h1 {
    font-size: 2.8em;
}

/* Force display of mobile menu */
.toctitle {
visibility: visible;
}

.toc {
display: table;
}