Jump to content

MediaWiki:Mobile.css: Difference between revisions

From Anandamakaranda
No edit summary
No edit summary
Tag: Manual revert
 
(10 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* Floating TOC button */
/* ================================================================
#gr-toc-button {
  MediaWiki:Mobile.css
    position: fixed;
  Loaded only on Minerva (mobile skin).
    bottom: 20px;
  ================================================================ */
    right: 18px;
 
    width: 52px;
 
    height: 52px;
/* ── 1. AUTO-ZOOM PREVENTION ─────────────────────────────────────
    border-radius: 50%;
  iOS and Android zoom the viewport when a focused input has
    background: #b5451b;
  font-size < 16px. Every input on the site must be >= 16px.
    color: white;
  ──────────────────────────────────────────────────────────────── */
    z-index: 9999;
 
    display: flex;
/* Reader toolbar search input */
    align-items: center;
#gr-search-panel input {
    justify-content: center;
  font-size: 16px !important;
    font-size: 24px;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    cursor: pointer;
}
}


/* TOC overlay */
/* New document dialog inputs */
#gr-toc-overlay {
#gr-newdoc-overlay input,
    position: fixed;
#gr-newdoc-overlay select,
    top: 0;
#gr-newdoc-overlay textarea {
    right: -90%;
  font-size: 16px !important;
    width: 82%;
    max-width: 340px;
    height: 100%;
    background: #fff;
    z-index: 10000;
    overflow-y: auto;
    transition: right .25s ease;
    box-shadow: -4px 0 18px rgba(0,0,0,.2);
    padding: 20px;
}
}


#gr-toc-overlay.open {
/* Annotation composer inputs (gr_annotations gadget) */
    right: 0;
.gra-composer-input,
.gra-fb-select,
#gra-nt-input,
#gra-bm-input,
#gra-fb-text,
#gra-fb-email {
  font-size: 16px !important;
}
}


/* Dark backdrop */
 
#gr-toc-backdrop {
/* ── 2. LONG-PRESS CONTEXT MENU SUPPRESSION ──────────────────────
    position: fixed;
  -webkit-touch-callout: none  → stops iOS "Copy / Look Up / Share"
    inset: 0;
                                  popup on long press of buttons
    background: rgba(0,0,0,.45);
  user-select: none            → prevents text selection on button labels
    z-index: 9998;
  touch-action: manipulation  → removes 300ms tap delay and prevents
    display: none;
                                  context menu on long press (iOS + Android)
  ──────────────────────────────────────────────────────────────── */
 
/* Sanskrit keyboard keys */
.gr-kb-key,
.gr-kb-key-iast,
.gr-kb-action,
.gr-kb {
  -webkit-touch-callout: none;
  user-select: none;
  touch-action: manipulation;
}
}


#gr-toc-backdrop.open {
/* Annotation FAB buttons and mobile action bar */
    display: block;
.gra-mob-btn,
.gra-fab-btn,
#gra-toggle,
#gra-mob-feedback,
#gra-mob-note,
#gra-mob-bookmark,
#gra-mob-dismiss {
  -webkit-touch-callout: none;
  user-select: none;
  touch-action: manipulation;
}
}


/* TOC styling */
/* Reader toolbar buttons */
#gr-toc-overlay .toc {
#gr-static-bar .gr-btn,
    display:block !important;
#gr-static-bar .gr-icon-btn {
    border:none;
  -webkit-touch-callout: none;
    padding:0;
  user-select: none;
    font-size:16px;
  touch-action: manipulation;
}
}


#gr-toc-overlay ul {
/* siteNav FAB buttons */
     list-style:none;
#se-docnav-btn,
     padding-left:14px;
#se-scrolltop {
  -webkit-touch-callout: none;
  user-select: none;
  touch-action: manipulation;
}
Template style fixes for Mobile
.mw-parser-output h2, .mw-parser-output .mw-heading2 h2 {
  margin-top: 0 !important;
}
/* Spacing fixes for headings */
.skin-minerva .mw-parser-output h2,
.skin-minerva .mw-parser-output .mw-heading2 h2,
.skin-minerva .mw-parser-output .mw-heading2 {
     margin-top: 8px !important;
}
.skin-minerva .mw-parser-output .mw-heading2 + p,
.skin-minerva .mw-parser-output h2 + p {
     margin-top: 0 !important;
}
}


#gr-toc-overlay li {
/* Also reduce Minerva's paragraph bottom margin inside content */
     margin:10px 0;
.skin-minerva .mw-parser-output p {
    padding-bottom: 0.25em !important;
     margin: 0 0 0.25em 0 !important;
}
}
 
.skin-minerva .section-heading,
#gr-toc-overlay a {
.skin-minerva .collapsible-heading {
     text-decoration:none;
    margin: 0 !important;
     color:#222;
    padding: 0 !important;
}
.page-Special_UserLogin .navigation-drawer,
.page-Special_UserLogin .header-container .toggle-list__checkbox,
.page-Special_UserLogin #mw-mf-main-menu-button,
.page-Special_CreateAccount .navigation-drawer,
.page-Special_CreateAccount #mw-mf-main-menu-button
.mw-special-Userlogin .page-Special_UserLogin .header-container .minerva-icon {
     display: none !important;
}
.page-Special_UserLogin #mw-mf-main-menu-button,
.mw-special-Userlogin #mw-mf-main-menu-button {
     display: none !important;
}
}

Latest revision as of 10:19, 13 June 2026

/* ================================================================
   MediaWiki:Mobile.css
   Loaded only on Minerva (mobile skin).
   ================================================================ */


/* ── 1. AUTO-ZOOM PREVENTION ─────────────────────────────────────
   iOS and Android zoom the viewport when a focused input has
   font-size < 16px. Every input on the site must be >= 16px.
   ──────────────────────────────────────────────────────────────── */

/* Reader toolbar search input */
#gr-search-panel input {
  font-size: 16px !important;
}

/* New document dialog inputs */
#gr-newdoc-overlay input,
#gr-newdoc-overlay select,
#gr-newdoc-overlay textarea {
  font-size: 16px !important;
}

/* Annotation composer inputs (gr_annotations gadget) */
.gra-composer-input,
.gra-fb-select,
#gra-nt-input,
#gra-bm-input,
#gra-fb-text,
#gra-fb-email {
  font-size: 16px !important;
}


/* ── 2. LONG-PRESS CONTEXT MENU SUPPRESSION ──────────────────────
   -webkit-touch-callout: none  → stops iOS "Copy / Look Up / Share"
                                   popup on long press of buttons
   user-select: none            → prevents text selection on button labels
   touch-action: manipulation   → removes 300ms tap delay and prevents
                                   context menu on long press (iOS + Android)
   ──────────────────────────────────────────────────────────────── */

/* Sanskrit keyboard keys */
.gr-kb-key,
.gr-kb-key-iast,
.gr-kb-action,
.gr-kb {
  -webkit-touch-callout: none;
  user-select: none;
  touch-action: manipulation;
}

/* Annotation FAB buttons and mobile action bar */
.gra-mob-btn,
.gra-fab-btn,
#gra-toggle,
#gra-mob-feedback,
#gra-mob-note,
#gra-mob-bookmark,
#gra-mob-dismiss {
  -webkit-touch-callout: none;
  user-select: none;
  touch-action: manipulation;
}

/* Reader toolbar buttons */
#gr-static-bar .gr-btn,
#gr-static-bar .gr-icon-btn {
  -webkit-touch-callout: none;
  user-select: none;
  touch-action: manipulation;
}

/* siteNav FAB buttons */
#se-docnav-btn,
#se-scrolltop {
  -webkit-touch-callout: none;
  user-select: none;
  touch-action: manipulation;
}
Template style fixes for Mobile
.mw-parser-output h2, .mw-parser-output .mw-heading2 h2 {
  margin-top: 0 !important;
}
/* Spacing fixes for headings */
.skin-minerva .mw-parser-output h2,
.skin-minerva .mw-parser-output .mw-heading2 h2,
.skin-minerva .mw-parser-output .mw-heading2 {
    margin-top: 8px !important;
}
.skin-minerva .mw-parser-output .mw-heading2 + p,
.skin-minerva .mw-parser-output h2 + p {
    margin-top: 0 !important;
}

/* Also reduce Minerva's paragraph bottom margin inside content */
.skin-minerva .mw-parser-output p {
    padding-bottom: 0.25em !important;
    margin: 0 0 0.25em 0 !important;
}
.skin-minerva .section-heading,
.skin-minerva .collapsible-heading {
    margin: 0 !important;
    padding: 0 !important;
}
.page-Special_UserLogin .navigation-drawer,
.page-Special_UserLogin .header-container .toggle-list__checkbox,
.page-Special_UserLogin #mw-mf-main-menu-button,
.page-Special_CreateAccount .navigation-drawer,
.page-Special_CreateAccount #mw-mf-main-menu-button
.mw-special-Userlogin .page-Special_UserLogin .header-container .minerva-icon {
    display: none !important;
}
.page-Special_UserLogin #mw-mf-main-menu-button,
.mw-special-Userlogin #mw-mf-main-menu-button {
    display: none !important;
}