MediaWiki:Mobile.css: Difference between revisions

From Wiki Awoo
Jump to navigation Jump to search
← Older editNewer edit →
No edit summary
No edit summary
Line 1: Line 1:
/**
/*
You are editing the global css file for all mobile site users.
* This is the CSS common to all mobile skins on en.Wikipedia.
With Great Power Comes Great Responsibility.
* Styling inside .mw-parser-output should generally use TemplateStyles.
 
*
Some words of caution:
* [[mw:Recommendations for mobile friendly articles on Wikimedia wikis]] may be
* Avoid any changes which impact layout on a mobile device.
* worth reviewing.
** 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).
* special note that this page loads late by Javascript, which may cause
* Do not use display:none. Instead edit the template and markup the element you want to hide with the `nomobile` class.
* [[FOUC]]s for "lead" content if styled from here. See [[phab:T190083]]
* 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.
 
If you are looking for .mobile-float-reset (see [[:phab:T56176]]), use TemplateStyles instead.
.mobile-float-reset {   
float: none !important;   
width: 100% !important;   
}  
*/


/* Reset user agent styles. We don't reset small or blockquote here deliberately */
/* Reset user agent styles. We don't reset small or blockquote here deliberately */
Line 30: Line 21:


/* Hide the images */
/* Hide the images */
.geo-nondefault, .geo-multi-punct,
.geo-nondefault,
.geo-multi-punct,
/* Hide stuff meant for accounts with special permissions. Made visible again in
/* Hide stuff meant for accounts with special permissions. Made visible again in
   [[MediaWiki:Group-sysop.css]], [[MediaWiki:Group-patroller.css]] and
   [[MediaWiki:Group-sysop.css]], [[MediaWiki:Group-patroller.css]] and
Line 40: Line 32:
.patroller-show,
.patroller-show,
.extendedconfirmed-show,
.extendedconfirmed-show,
.autoconfirmed-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;
display: none;
}
}


/*
/* Prevent flags in tables from collapsing
Should be moved into Template:Cite_web
Fix for T116318
Styling for citations (CSS3). Breaks long urls, etc., rather than overflowing box */
*/
.citation {
.flagicon img {
word-wrap: break-word;
min-width: 25px;
}
 
/* Prevent unnecessary margin at the bottom of centralnotices */
.cnotice {
margin-bottom: 0 !important;
}
}


/*
* BELOW HERE THERE BE SOONTOBE TEMPLATESTYLES THINGS;
* SEE [[MediaWiki talk:Common.css/to do]]
*/
/*
/*
.infobox
.infobox
Line 69: Line 67:
.content .mw-parser-output .infobox-below {
.content .mw-parser-output .infobox-below {
text-align: center;
text-align: center;
}
/* Unbulleted lists e.g. Barack Obama page*/
.plainlist ul {
list-style: none;
padding-left: 0; /* Reset Minerva defaults */
}
}


Line 98: Line 90:
font-family: serif;
font-family: serif;
white-space: nowrap;
white-space: nowrap;
}
/* 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;
}
/* The message body cell(s), such as for {{Commonscat}}.
* this is a very small subset of the styles from Common.css
* just to make sure the box isn't squashed without any spacing
* which looks out of place with visuals of other nearby elements
*/
.mbox-text {
/* @noflip */
padding: 0.25em 0.9em;
}
}


/* Normal font styling for wikitable row headers with scope="row" tag */
/* Normal font styling for wikitable row headers with scope="row" tag */
.wikitable.plainrowheaders th[scope=row] {
.wikitable.plainrowheaders th[scope=row],
.wikitable.plainrowheaders th[scope=rowgroup] {
font-weight: normal;
font-weight: normal;
/* @noflip */
/* @noflip */
Line 130: Line 100:
}
}


 
/* One of the not TemplateStyles things */
/**
******************DEPRECATED STYLES ************************************
These styles will be removed shortly. Please see inline comments.
**/
 
 
/*
Generate interpuncts
FIXME: Move to template.
*/
/* Can be removed when T169315 is resolved */
#content .hlist-separated li:after {
font-size: 0.8em;
color: #333;
}
/*
FIXME: DUPLICATES Template:Hlist/styles.css
Note the mobile skin provides a `hlist-separated` class for this purpose. Use this class name alongside the hlist class instead as this will result in a FOUC.
Should be removed and moved to templates.
*/
/* Counter hlist indenting of Minerva*/
.mw-parser-output .hlist ul,
.mw-parser-output .hlist ol {
padding-left: 0;
}
/* reset hlist margins of Minerva
do not add li here (see T235416) */
.mw-parser-output .hlist dd,
.mw-parser-output .hlist dt {
margin-right: 0;
}
/* do not add li here. Minerva provides it already*/
.mw-parser-output .hlist dd:after {
content: " · ";
font-weight: bold;
}
.mw-parser-output .hlist dt:after {
content: ": ";
}
 
/* Should be removed and moved to templates once TemplateStyles is live */
.heading-holder hlist li:after,
.mw-parser-output .hlist dd:last-child:after,
.mw-parser-output .hlist dt:last-child:after,
.mw-parser-output .hlist li:last-child:after {
content: none;
}
/* Add parentheses around nested lists */
/* Should be removed and moved to templates once TemplateStyles is live */
.mw-parser-output .hlist dd dd:first-child:before,
.mw-parser-output .hlist dd dt:first-child:before,
.mw-parser-output .hlist dd li:first-child:before,
.mw-parser-output .hlist dt dd:first-child:before,
.mw-parser-output .hlist dt dt:first-child:before,
.mw-parser-output .hlist dt li:first-child:before,
.mw-parser-output .hlist li dd:first-child:before,
.mw-parser-output .hlist li dt:first-child:before,
.mw-parser-output .hlist li li:first-child:before {
content: " (";
font-weight: normal;
}
/* Should be removed and moved to templates once TemplateStyles is live */
.mw-parser-output .hlist dd dd:last-child:after,
.mw-parser-output .hlist dd dt:last-child:after,
.mw-parser-output .hlist dd li:last-child:after,
.mw-parser-output .hlist dt dd:last-child:after,
.mw-parser-output .hlist dt dt:last-child:after,
.mw-parser-output .hlist dt li:last-child:after,
.mw-parser-output .hlist li dd:last-child:after,
.mw-parser-output .hlist li dt:last-child:after,
.mw-parser-output .hlist li li:last-child:after {
content: ") ";
font-weight: normal;
}
 
/* Put ordinals in front of ordered list items */
/* Should be removed and moved to templates once TemplateStyles is live */
.mw-parser-output .hlist ol {
counter-reset: listitem;
}
 
/* Should be removed and moved to templates once TemplateStyles is live */
.mw-parser-output .hlist ol > li {
counter-increment: listitem;
}
 
/* Should be removed and moved to templates once TemplateStyles is live */
.mw-parser-output .hlist ol > li:before {
content: " " counter(listitem) " ";
white-space: nowrap;
}
 
/* Should be removed and moved to templates once TemplateStyles is live */
.mw-parser-output .hlist dd ol > li:first-child:before,
.mw-parser-output .hlist dt ol > li:first-child:before,
.mw-parser-output .hlist li ol > li:first-child:before {
content: " (" counter(listitem) " ";
}
 
/* https://phabricator.wikimedia.org/T180396#5317728 */
/* https://phabricator.wikimedia.org/T180396#5317728 */


Line 238: Line 109:
display: none !important;
display: none !important;
}
}
}
blockquote {
    background-color: ghostwhite;
    border: 2px dashed darkgrey;
    border-radius: 5px;
    padding: 5px;
}
.ooc {
/* background-color: LightBlue; */
/* background-color: #b4cad1;
color: Black;
*/
color: DarkGray;
padding: 1px 1px 1px 1px;
}
.failroll {
color: red;
}
.successroll {
color: green;
}
}

Revision as of 11:12, 9 March 2023

/*
 * This is the CSS common to all mobile skins on en.Wikipedia.
 * Styling inside .mw-parser-output should generally use TemplateStyles.
 *
 * [[mw:Recommendations for mobile friendly articles on Wikimedia wikis]] may be
 * worth reviewing.
 *
 * special note that this page loads late by Javascript, which may cause
 * [[FOUC]]s for "lead" content if styled from here. See [[phab:T190083]]
 */

/* Reset user agent styles. We don't reset small or blockquote here deliberately */
cite,
dfn {
	font-style: inherit;
}

q {
	quotes: '"' '"' "'" "'";
}

/* 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-patroller.css]] and
   [[MediaWiki:Group-autoconfirmed.css]]. */
.checkuser-show,
.sysop-show,
.templateeditor-show,
.extendedmover-show,
.patroller-show,
.extendedconfirmed-show,
.autoconfirmed-show {
	display: 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;
}


/*
 * BELOW HERE THERE BE SOONTOBE TEMPLATESTYLES THINGS;
 * SEE [[MediaWiki talk:Common.css/to do]]
 */
/*
.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.
*/
/* removed inline from module as we work toward Tstyles support
 * Use three classes to match specificity of MobileFrontend/Minerva selectors */
.content .mw-parser-output .infobox-header,
.content .mw-parser-output .infobox-subheader,
.content .mw-parser-output .infobox-above,
.content .mw-parser-output .infobox-title,
.content .mw-parser-output .infobox-image,
.content .mw-parser-output .infobox-full-data,
.content .mw-parser-output .infobox-below {
	text-align: center;
}

/* Prevent line breaks in silly places:
   1) Where desired
   2) Links when we don't want them to
*/
.mw-parser-output .nowrap,
.nowraplinks a {
	white-space: nowrap;
}
.mw-parser-output .infobox .nowrap {
	white-space: normal !important;
}
/* But allow wrapping where desired: */
.wrap,
.wraplinks a {
	white-space: normal;
}

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

/* Normal font styling for wikitable row headers with scope="row" tag */
.wikitable.plainrowheaders th[scope=row],
.wikitable.plainrowheaders th[scope=rowgroup] {
	font-weight: normal;
	/* @noflip */
	text-align: left;
}

/* One of the not TemplateStyles things */
/* https://phabricator.wikimedia.org/T180396#5317728 */

@media print {
	.navbox,
	.hatnote,
	.ambox {
		display: none !important;
	}
}
Retrieved from ‘https://wikiawoo.queer.me.uk/index.php?title=MediaWiki:Mobile.css&oldid=1436’