|
Tags: Blanking Mobile edit Mobile web edit |
| Line 1: |
Line 1: |
| /* 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 */
| |
| }
| |
