مدیاویکی:Mobile.css

/* --------------------- Begin Font Style ----------------- */
@font-face {
    font-family: 'Samim';
	font-style: normal;
	font-weight: 400;
	font-display: swap;  
    src: url('/w/resources/fonts/Samim.woff') format('woff');
}

@font-face {
	font-family: 'me_quran';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/w/resources/fonts/me_quran.woff') format('woff');
}

@font-face {
	font-family: 'KFGQPCUthmanTahaNaskh';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/w/resources/fonts/KFGQPCUthmanTahaNaskh.woff') format('woff');
}

body {
  font-family: Samim, 'Iranian Sans', Tahoma, 'DejaVu Sans' !important;
}

#bodyContent {
    line-height: 2;
    font-size: 0.93em;
}

#content.mw-body  h1, #content.mw-body  h2, #content.mw-body  #firstHeading,
#content.mw-body  .mw-editsection, .mw-body .mw-editsection-like,
#content.mw-body  #toc h2, #content.mw-body  .toc h2, .vector-sticky-header-context-bar-primary,
#template-documentation, #documentation-meta-data{
  font-family: Samim, 'Iranian Serif', 'Iranian Sans', Tahoma, 'Noto Serif', 'Droid Arabic Naskh', 'DejaVu Sans', serif !important;
}

textarea {
  font-family: Samim, 'Courier New', monospace;
}

.arabic {
	/*font-family: "uthmanic-hafs";*/
	font-family:me_quran,Scheherazade,mry_KacstQurn,Tahoma; 
	font-size: 1.02em;
    color: #000000c0;
}

.ayaFlag {
    font-family: "Traditional Arabic","Times New Roman";
    color: #215e21;
}

.ayaText {
	color: #215e21;
}

.arabicText {
    font-family: KFGQPCUthmanTahaNaskh;
    font-size: 1.15em;
    font-style: oblique;
    font-synthesis: inherit;
    font-weight: 500;
}

.hadithText {
    font-family: KFGQPCUthmanTahaNaskh;
    font-size: 1.15em;
    font-style: oblique;
    font-synthesis: inherit;
    font-weight: 500;
    color: #215e21;
}

/* force these to use inherited font configuration */
.ui-widget, .ui-widget *, button, input, select, optgroup {
  font-family: inherit;
}
/* end */

dfn {
    font-style: inherit;  /* Reset default styling for <dfn> */
}

sup, sub {
    line-height: 1em;     /* Reduce line-height for <sup> and <sub> */
}
/* --------------------- End Font Style ----------------- */

/* --------------------- Begin Main Page Style ----------------- */
.mainPage {
    display: flex;
    flex-direction: row;
}

.mainRight { 
	display: flex;
	flex-direction: column;
	flex: 75%;
	margin: 6px 4px;
}

.mainLeft { 
	box-shadow: 0 0 0.3rem #999;
	border-radius: 0.2rem;
	padding: 1.2rem;
	flex: 25%;
	margin: 6px 4px;
}

.selectedArticle, .selectedWork, .selectedQuestion { 
	box-shadow: 0 0 0.3rem #999;
	border-radius: 0.2rem;
	padding: 1.2rem;
	margin: 4px 0px;
}

.helpBox{
	line-height: 2em;
	box-shadow: 0 0 0.3rem #999;
	border-radius: 0.2rem;
	padding: 1.2rem;
	margin-bottom: 1.6rem;	
}

.boxHeader { 
	padding: 10px;
	border-radius: 2px;
	margin: 0 0 20px 0;
	box-shadow: 0 0 0.3rem #999;
}

.boxHeader span { 
	padding-right: 45px; 
	font: 1.03em samim; 
	position: relative;
}

.boxTitle {
    padding: 5px;
    border-radius: 2px;
    margin: 15px 0 20px 0;
	border-bottom: solid 0.2rem #bdd8fb;
}

.selectedArticle .boxHeader span:before,.boxHeader span:before,
.selectedWork .boxHeader span:before,.boxHeader span:before,
.selectedQuestion .boxHeader span:before,.boxHeader span:before,
.topArticles .boxHeader span:before, .boxHeader span:before {
    width: 43px;
    height: 43px;
    position: absolute;
    right: -1px;
    top: -9px;
    content: " ";
}

.selectedArticle .boxHeader span:before,
.selectedWork .boxHeader span:before {
    background: url('/w/resources/assets/favorite.png') no-repeat center center;
}

.selectedQuestion .boxHeader span:before {
    background: url('/w/resources/assets/help.png') no-repeat center center;
}

.topArticles .boxHeader span:before {
    background: url('/w/resources/assets/top.png') no-repeat center center;
}

.topArticles { 
	width: 100%; 
	height: auto; 
	margin-bottom: 10px;
}

.readmoreButton {
	box-shadow: 0 0 0.3rem #999;
	display: inline-block;
	min-width: 4em;
	max-width: 28.75em;
	padding: 0.546875em 1em;
	line-height: 1.286;
	box-sizing: border-box;
	vertical-align: middle;
	text-align: center;
	font-weight: bold;
	cursor: pointer;
	border-radius: 0.2rem;
	margin: 5px 0 0 0;
	font-family: inherit;
	font-size: 1em;
}
/* --------------------- End Main Page Style ----------------- */

/* --------------------- Begin Custom Style ----------------- */
/* === Collapsible elements. Toggle-link moved to left. === 
/* Margin around it adjusted. 
/* https://community.fandom.com/wiki/Thread:1104268
/* https://community.wikia.com/wiki/Thread:499656 
/* https://community.wikia.com/wiki/Help:Collapsing 
/* https://cannabis.wikia.com/wiki/MediaWiki:Wikia.css */

.mw-collapsible span.mw-collapsible-toggle {
    float:left;
    margin-left:0;
    margin-right:1em;
}

.im-answer-title {
	border: none;	
}

.im-answer-content {
	padding:4px; 
	display: block; 
	background: #fcfcfc;
	box-shadow: 0 0 0.3rem rgba(0,0,0,0.08);
	border-radius: 0.1rem;
	border: 1px solid rgba(0,0,0,0.08);
	padding: 0.5rem;
}

.im-personal-title, .im-personal-content{
	font-family: Lotus;
	font-size: 16px;
}

.related-article-list{
	margin: 0;
}

.related-article-item {
	display: inline-block;
	padding-left: 3px;
}
.hatnote, .dablink, .rellink {
  padding: 5px 7px;
    padding-left: 7px;
  color: #54595d;
  font-size: 0.8125rem;
  background-color: #f8f9fa;
  margin-bottom: 1px;
  overflow: hidden;
}
.im-hatnote {
	text-align:center;
	font-size: 85%;
	font-weight: normal;
}

.im-hatnote-topic {
	background-color: #F2F2CE;
	text-align:center;
	font-size: 85%;
	font-weight: normal;
	display: flow-root;
	position: relative;
	padding: 1px;
	border-bottom: 1px Solid #FFF;
}

.im-hatnote-entry {
	background-color: #D4F2CE;
	text-align:center;
	font-size: 85%;
	font-weight: normal;
	display: flow-root;
	position: relative;
	padding: 1px;
	border-bottom: 1px Solid #FFF;
}
.im-hatnote-question {
	background-color: #CEF2F2;
	text-align:center;
	font-size: 85%;
	font-weight: normal;
	display: flow-root;
	position: relative;
	padding: 1px;
	border-bottom: 1px Solid #FFF;
}
/* --------------------- End Custom Style ----------------- */

/* --------------------- Begin Main Page Style ----------------- */
/* to prevent double welcome! */
.page-Main_Page #section_0 { display: none }

/**
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.

If you are looking for .mobile-float-reset (see [[:phab:T56176]]), use TemplateStyles instead.
.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-patroller.css]] and
   [[MediaWiki:Group-autoconfirmed.css]]. */
.checkuser-show,
.sysop-show,
.templateeditor-show,
.extendedmover-show,
.patroller-show,
.extendedconfirmed-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;
}

/*
.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;
}

/* 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;
	}
}

#mw-mf-last-modified { 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;
    }
}
/* 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: right;
    /* @noflip */
    text-align: right;
    /* @noflip */
    margin-left: 0.5em;
    width: 6em;
}

/* Style for horizontal lists (separator following item).
   @source mediawiki.org/wiki/Snippets/Horizontal_lists
   @revision 3.2 (2013-09-25)
   @author: [[User:Edokter]]
*/
.hlist dl,
.hlist ol,
.hlist ul {
    margin: 0;
    padding: 0;
}
/* Display list items inline and make them nowrap */
.hlist dd,
.hlist dt,
.hlist li {
    margin: 0;
    display: inline;
    white-space: nowrap;
}
/* Allow wrapping for list items (in tight spaces) */
.hlist.hwrap dd,
.hlist.hwrap dt,
.hlist.hwrap li {
    white-space: normal;
}
/* Display nested lists inline and allow them to wrap */
.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;
    white-space: normal;
}
/* Generate interpuncts */
#bodyContent .hlist dt:after {
    content: ":";
}
#bodyContent .hlist dd:after,
#bodyContent .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: list-item;
}
#content .hlist ol > li {
    counter-increment: list-item;
}
#content .hlist ol > li:before {
    content: counter(list-item) " ";
}
#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(list-item) " ";
}
 
/* Unbulleted lists e.g. Barack Obama page */
.plainlist ul {
    list-style: none;
}

/* CODE FOR COMPACT AMBOX */
/* Hide the images */
.compact-ambox table .mbox-image,
.compact-ambox table .mbox-imageright,
.compact-ambox table .mbox-empty-cell {
    display: none;
}
/* 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 1.6em 0 !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=");
}
/* Allow for hiding text in compact form */
.compact-ambox .hide-when-compact {
    display: none;
}

/* Hatnotes and disambiguation notices
Please document here what pages use this
 */
.rellink,
.dablink {
    font-style: italic;
    margin-bottom: 0.5em;
}
.rellink i,
.dablink i {
    font-style: normal;
}

/* 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; }
.geo-nondefault, .geo-multi-punct { display: none; }
.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;
}

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

#li-coordinates {
    background-image: url(//upload.wikimedia.org/wikipedia/commons/thumb/5/57/Edge-firefox.png/80px-Edge-firefox.png);
    float: right;
    display: none;
    -webkit-background-size: auto 30px;
    background-size: auto 30px;
}

.client-js .content_block.coordinates {
    display: none;
    text-align: right;
    margin-bottom: 0.5em;
    font-size: smaller;
}

.client-js .content_block.coordinates .latitude {
    display:none;
    padding-right: 20px;
    background-image: url(//upload.wikimedia.org/wikipedia/commons/thumb/5/57/Edge-firefox.png/50px-Edge-firefox.png);
    background-repeat: no-repeat;
    -webkit-background-size: auto 15px;
    background-size: auto 15px;
}

/* Until Geohack is mobile optimised and/or there is a nice alternative e.g. map namespace */
.alpha #li-coordinates {
    display: list-item;
}

.client-js .beta .content_block.coordinates {
    display: block;
}

.client-js .beta .content_block.coordinates .latitude {
    display:inline;
}

.topicon {
    display: none;
}

/* To changing arabic numeral format in all oredred lists to persian numeral format on Mobile View */
#content ol {
  list-style-type:-moz-persian !important; /* To override some codes that avoids this one to be used on Mozilla Firefox */
  list-style-type:persian;
}

.mw-ui-icon:before { top: 0; }

/* عدم نمایش زیرعنوان واکشی شده از ویکی‌داده که در صفحه‌های قفل شده سوژهٔ خرابکاری و
باعث پیدا شدن شیوه‌ای برای انجام خرابکاری شده است تا یافتن راه‌حل بهتر */
.ns-0 .page-heading div { display: none; }
/* --------------------- End Font Style ----------------- */