MediaWiki:Mobile.css: Difference between revisions

Retrieved from "https://dev.anandamakaranda.in/MediaWiki:Mobile.css"

@@ Line 1: / Line 1: @@
-/* All CSS here will be loaded for users of the mobile site */
+/* ================================================================
-/**
+   MediaWiki:Mobile.css
- * MediaWiki:Mobile.css
+   Loaded only on Minerva (mobile skin).
- * Add these rules to your MediaWiki:Mobile.css page
+   ================================================================ */
- * (Special:Edit/MediaWiki:Mobile.css)
- *
- * Fixes:
- *  1. #gr-home-toggle tabs always visible below reader bar
- *  2. Prevents Minerva's ToggleList from hiding .gr-home elements
- *  3. Mobile bar z-index above all Minerva chrome
- */
-/* ── Reader bar: always fixed, above everything ───────────────── */
-#gr-static-bar {
+/* ── 1. AUTO-ZOOM PREVENTION ─────────────────────────────────────
-   position: fixed !important;
+   iOS and Android zoom the viewport when a focused input has
-  /* top is set by JS (updateBarPosition), but provide a safe fallback */
+   font-size < 16px. Every input on the site must be >= 16px.
-  top: 48px;
+   ──────────────────────────────────────────────────────────────── */
-  left: 0;
-  right: 0;
+/* Reader toolbar search input */
-  z-index: 500 !important;   /* above Minerva's header z-index of ~3 */
+#gr-search-panel input {
-  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
+   font-size: 16px !important;
 }
-/* ── Main page home container ─────────────────────────────────── */
+/* New document dialog inputs */
-/* Give the entire home section enough top-space so the toggle
+#gr-newdoc-overlay input,
-   tabs clear the reader bar. The bar is ~48px tall and sits below
+#gr-newdoc-overlay select,
-   the Minerva header (~56px), so 110px is a safe minimum.
+#gr-newdoc-overlay textarea {
-   JS will adjust this precisely via applyHomeToggleOffset().     */
+   font-size: 16px !important;
-#mw-content-text .mw-parser-output .gr-home {
-   padding-top: 0 !important;   /* don't double-pad; body handles it */
-  scroll-margin-top: 110px;
 }
-/* ── Toggle tab strip ─────────────────────────────────────────── */
+/* Annotation composer inputs (gr_annotations gadget) */
-#gr-home-toggle {
+.gra-composer-input,
-  position: sticky;            /* sticks just below the bar while scrolling */
+.gra-fb-select,
-  top: 48px;                   /* fallback; JS sets precise value */
+#gra-nt-input,
-  z-index: 10;
+#gra-bm-input,
-  background: #fff;
+#gra-fb-text,
-  scroll-margin-top: 110px;
+#gra-fb-email {
-   padding: 6px 0 4px;
+   font-size: 16px !important;
 }
-/* When the reader bar is present, adjust sticky top via CSS var
-    written by readerToolbar.js                                    */
+/* ── 2. LONG-PRESS CONTEXT MENU SUPPRESSION ──────────────────────
-:root {
+   -webkit-touch-callout: none  → stops iOS "Copy / Look Up / Share"
-   --gr-bar-top: 48px;
+                                   popup on long press of buttons
-   --gr-bar-h: 48px;
+   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;
 }
-#gr-home-toggle {
+/* Annotation FAB buttons and mobile action bar */
-  top: calc( var(--gr-bar-top) + var(--gr-bar-h) );
+.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;
 }
-/* ── Prevent Minerva's ToggleList from collapsing our home divs ─ */
+/* Reader toolbar buttons */
-/* Minerva applies collapsible behaviour to any div that matches
+#gr-static-bar .gr-btn,
-   its internal selectors. Opt our containers out.               */
+#gr-static-bar .gr-icon-btn {
-.gr-home,
+  -webkit-touch-callout: none;
-.gr-home-toggle,
+  user-select: none;
-.gr-home-grid,
+   touch-action: manipulation;
-.gr-home-card,
-.gr-view-grantha,
-.gr-view-author,
-#gr-view-grantha,
-#gr-view-author {
-  /* Don't let Minerva collapse these */
-  display: block !important;
-   visibility: visible !important;
 }
-/* Toggle button active state */
+/* siteNav FAB buttons */
-.gr-toggle-btn {
+#se-docnav-btn,
-  display: inline-block;
+#se-scrolltop {
-  padding: 6px 16px;
+   -webkit-touch-callout: none;
-   border-radius: 20px;
-  cursor: pointer;
-  font-size: 14px;
-  font-family: 'Noto Serif Devanagari', serif;
-  color: #7a2e0e;
-  border: 1px solid #e8cfc4;
-  background: #fff;
-  margin: 0 4px;
-  transition: background 0.15s, color 0.15s;
    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-toggle-btn.gr-toggle-active {
+/* Also reduce Minerva's paragraph bottom margin inside content */
-  background: #b5451b;
+.skin-minerva .mw-parser-output p {
-  color: #fff;
+    padding-bottom: 0.25em !important;
-  border-color: #b5451b;
+    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,
-/* ── Mobile action bar: above everything ─────────────────────── */
+.page-Special_UserLogin .header-container .toggle-list__checkbox,
-#gra-mobile-bar {
+.page-Special_UserLogin #mw-mf-main-menu-button,
-  z-index: 99999 !important;
+.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,
-/* ── Minerva header: ensure it doesn't fight our bar ─────────── */
+.mw-special-Userlogin #mw-mf-main-menu-button {
-.header-container {
+    display: none !important;
-  z-index: 4 !important;   /* Minerva default; our bar at 500 wins */
 }