MediaWiki:Mobile.css

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.

/* All CSS here will be loaded for users of the mobile site */
/**
 * MediaWiki:Mobile.css
 * 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 {
  position: fixed !important;
  /* top is set by JS (updateBarPosition), but provide a safe fallback */
  top: 48px;
  left: 0;
  right: 0;
  z-index: 500 !important;   /* above Minerva's header z-index of ~3 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* ── Main page home container ─────────────────────────────────── */
/* Give the entire home section enough top-space so the toggle
   tabs clear the reader bar. The bar is ~48px tall and sits below
   the Minerva header (~56px), so 110px is a safe minimum.
   JS will adjust this precisely via applyHomeToggleOffset().     */
#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 ─────────────────────────────────────────── */
#gr-home-toggle {
  position: sticky;            /* sticks just below the bar while scrolling */
  top: 48px;                   /* fallback; JS sets precise value */
  z-index: 10;
  background: #fff;
  scroll-margin-top: 110px;
  padding: 6px 0 4px;
}

/* When the reader bar is present, adjust sticky top via CSS var
   written by readerToolbar.js                                    */
:root {
  --gr-bar-top: 48px;
  --gr-bar-h: 48px;
}

#gr-home-toggle {
  top: calc( var(--gr-bar-top) + var(--gr-bar-h) );
}

/* ── Prevent Minerva's ToggleList from collapsing our home divs ─ */
/* Minerva applies collapsible behaviour to any div that matches
   its internal selectors. Opt our containers out.               */
.gr-home,
.gr-home-toggle,
.gr-home-grid,
.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 */
.gr-toggle-btn {
  display: inline-block;
  padding: 6px 16px;
  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;
}

.gr-toggle-btn.gr-toggle-active {
  background: #b5451b;
  color: #fff;
  border-color: #b5451b;
}

/* ── Mobile action bar: above everything ─────────────────────── */
#gra-mobile-bar {
  z-index: 99999 !important;
}

/* ── Minerva header: ensure it doesn't fight our bar ─────────── */
.header-container {
  z-index: 4 !important;   /* Minerva default; our bar at 500 wins */
}