# MediaWiki:Mobile.css

From faraghaib
Jump to navigation Jump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

    /* --------------------- 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: #fcfce9;
    	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: rgb(255, 245, 227);
    	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: #fcfce9;
    	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 ----------------- */

Retrieved from "https://en.faraghaib.ir/w/index.php?title=MediaWiki:Mobile.css&oldid=484"