|
|
| Line 1,030: |
Line 1,030: |
| height: 0 !important; | | height: 0 !important; |
| } | | } |
|
| |
| //Mobile styles
| |
| /* ═══════════════════════════════════════════════════════════════
| |
| MOBILE FIX v2 — paste at very end of Common.css
| |
| Uses max specificity to override existing !important rules
| |
| ═══════════════════════════════════════════════════════════════ */
| |
|
| |
| @media screen and (max-width: 768px) {
| |
|
| |
| /* ── 1. ROOT SCALE ─────────────────────────────────────────── */
| |
| html { font-size: 18px !important; }
| |
| body { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }
| |
|
| |
| /* ── 2. HEADER — bigger, readable ─────────────────────────── */
| |
| html body .vector-header-container,
| |
| html body .vector-sticky-header-container {
| |
| min-height: 64px !important;
| |
| height: auto !important;
| |
| padding: 10px 16px !important;
| |
| }
| |
| html body .vector-header {
| |
| padding: 0 !important;
| |
| min-height: 44px !important;
| |
| }
| |
| /* Site name */
| |
| html body .mw-logo-wordmark,
| |
| html body .mw-logo-wordmark::before {
| |
| font-size: 20px !important;
| |
| line-height: 1.3 !important;
| |
| }
| |
| /* Tagline below site name */
| |
| html body .vector-header-start::after,
| |
| html body .mw-logo::after {
| |
| font-size: 11px !important;
| |
| }
| |
| /* Header right-side links (Help, About, Login) */
| |
| html body .vector-header-end a,
| |
| html body #gr-help-link,
| |
| html body #gr-about-link {
| |
| font-size: 14px !important;
| |
| padding: 6px 8px !important;
| |
| }
| |
| /* User links */
| |
| html body .vector-user-links {
| |
| font-size: 14px !important;
| |
| }
| |
|
| |
| /* ── 3. READER TOOLBAR ─────────────────────────────────────── */
| |
| html body #gr-static-bar {
| |
| height: auto !important;
| |
| min-height: 52px !important;
| |
| padding: 6px 8px !important;
| |
| flex-wrap: nowrap !important;
| |
| overflow-x: auto !important;
| |
| overflow-y: hidden !important;
| |
| -webkit-overflow-scrolling: touch !important;
| |
| scrollbar-width: none !important;
| |
| gap: 4px !important;
| |
| }
| |
| html body #gr-static-bar::-webkit-scrollbar { display: none !important; }
| |
| html body .gr-controls .gr-btn {
| |
| height: 44px !important;
| |
| min-width: 44px !important;
| |
| font-size: 15px !important;
| |
| padding: 0 10px !important;
| |
| flex-shrink: 0 !important;
| |
| }
| |
| html body .gr-controls .gr-icon-btn {
| |
| width: 44px !important;
| |
| padding: 0 !important;
| |
| }
| |
| html body .gr-script-sel {
| |
| height: 40px !important;
| |
| font-size: 14px !important;
| |
| min-width: 90px !important;
| |
| max-width: 120px !important;
| |
| }
| |
| html body .gr-controls .gr-fl { font-size: 14px !important; }
| |
| html body .gr-controls .gr-sep { display: none !important; }
| |
| /* Hide text labels on toolbar — icon only on mobile */
| |
| html body .gr-btn-staging { display: none !important; }
| |
|
| |
| /* ── 4. LAYOUT — single column, full width ─────────────────── */
| |
| html body .mw-page-container,
| |
| html body .vector-page-container {
| |
| max-width: 100% !important;
| |
| padding: 0 !important;
| |
| margin: 0 !important;
| |
| }
| |
| html body .mw-content-container,
| |
| html body .vector-body-container,
| |
| html body .vector-page-content {
| |
| margin: 0 !important;
| |
| padding: 0 !important;
| |
| max-width: 100% !important;
| |
| }
| |
| html body #mw-content-text,
| |
| html body .mw-body,
| |
| html body .mw-body-content {
| |
| padding: 8px 14px 32px !important;
| |
| margin: 0 !important;
| |
| max-width: 100% !important;
| |
| width: 100% !important;
| |
| box-sizing: border-box !important;
| |
| }
| |
|
| |
| /* ── 5. CONTENT FONT ───────────────────────────────────────── */
| |
| html body .mw-parser-output {
| |
| font-size: 18px !important;
| |
| line-height: 1.8 !important;
| |
| max-width: 100% !important;
| |
| }
| |
| html body .mw-parser-output h2,
| |
| html body .mw-parser-output .mw-heading2 h2 {
| |
| font-size: 1.1em !important;
| |
| width: 100% !important;
| |
| margin-top: 1.2em !important;
| |
| }
| |
| html body .mw-parser-output h3,
| |
| html body .mw-parser-output .mw-heading3 h3 {
| |
| font-size: 1em !important;
| |
| width: 100% !important;
| |
| }
| |
|
| |
| /* ── 6. HIDE VECTOR SIDEBAR TOC ────────────────────────────── */
| |
| html body .vector-column-start,
| |
| html body #vector-toc,
| |
| html body .vector-toc-landmark,
| |
| html body .vector-sidebar-container,
| |
| html body .mw-table-of-contents-container,
| |
| html body .vector-sticky-pinned-container {
| |
| display: none !important;
| |
| }
| |
| /* Also hide the pinnable header inside it */
| |
| html body .vector-pinnable-element.vector-toc-pinnable-element {
| |
| display: none !important;
| |
| }
| |
|
| |
| /* ── 7. MOBILE TOC BUTTON + OVERLAY (via JS below) ─────────── */
| |
| .gr-mob-toc-btn {
| |
| display: flex !important;
| |
| position: fixed !important;
| |
| bottom: 140px !important;
| |
| left: 16px !important;
| |
| z-index: 9100 !important;
| |
| background: #fff !important;
| |
| border: 1.5px solid #b5451b !important;
| |
| border-radius: 24px !important;
| |
| padding: 10px 16px !important;
| |
| font-size: 15px !important;
| |
| font-family: system-ui, sans-serif !important;
| |
| color: #b5451b !important;
| |
| font-weight: 600 !important;
| |
| box-shadow: 0 3px 14px rgba(0,0,0,0.15) !important;
| |
| cursor: pointer !important;
| |
| align-items: center !important;
| |
| gap: 6px !important;
| |
| white-space: nowrap !important;
| |
| }
| |
| .gr-mob-toc-panel {
| |
| position: fixed !important;
| |
| top: 0 !important; left: 0 !important; bottom: 0 !important;
| |
| width: 82vw !important;
| |
| max-width: 340px !important;
| |
| background: #fff !important;
| |
| z-index: 10400 !important;
| |
| box-shadow: 4px 0 28px rgba(0,0,0,0.22) !important;
| |
| overflow-y: auto !important;
| |
| padding: 0 0 40px !important;
| |
| transform: translateX(-110%) !important;
| |
| transition: transform 0.26s cubic-bezier(0.4,0,0.2,1) !important;
| |
| display: block !important;
| |
| }
| |
| .gr-mob-toc-panel.open {
| |
| transform: translateX(0) !important;
| |
| }
| |
| .gr-mob-toc-backdrop {
| |
| display: none !important;
| |
| position: fixed !important;
| |
| inset: 0 !important;
| |
| background: rgba(0,0,0,0.4) !important;
| |
| z-index: 10399 !important;
| |
| }
| |
| .gr-mob-toc-backdrop.open { display: block !important; }
| |
| .gr-mob-toc-header {
| |
| position: sticky !important;
| |
| top: 0 !important;
| |
| background: #fff !important;
| |
| display: flex !important;
| |
| align-items: center !important;
| |
| justify-content: space-between !important;
| |
| padding: 16px 16px 12px !important;
| |
| border-bottom: 1px solid #f0ebe6 !important;
| |
| z-index: 1 !important;
| |
| }
| |
| .gr-mob-toc-title {
| |
| font-size: 13px !important;
| |
| font-weight: 700 !important;
| |
| text-transform: uppercase !important;
| |
| letter-spacing: 0.08em !important;
| |
| color: #b5451b !important;
| |
| font-family: system-ui, sans-serif !important;
| |
| }
| |
| .gr-mob-toc-close {
| |
| background: none !important;
| |
| border: none !important;
| |
| font-size: 22px !important;
| |
| color: #999 !important;
| |
| cursor: pointer !important;
| |
| padding: 4px 8px !important;
| |
| line-height: 1 !important;
| |
| }
| |
| .gr-mob-toc-body {
| |
| padding: 12px 16px !important;
| |
| }
| |
| /* TOC links inside overlay */
| |
| .gr-mob-toc-body a {
| |
| display: block !important;
| |
| font-size: 16px !important;
| |
| line-height: 1.6 !important;
| |
| color: #2c1810 !important;
| |
| text-decoration: none !important;
| |
| padding: 8px 0 !important;
| |
| border-bottom: 1px solid #f5f0ed !important;
| |
| font-family: 'Adishila','Noto Serif Devanagari',system-ui,sans-serif !important;
| |
| }
| |
| .gr-mob-toc-body .vector-toc-level-2 a,
| |
| .gr-mob-toc-body .vector-toc-list-item:not(.vector-toc-level-1) a {
| |
| padding-left: 16px !important;
| |
| font-size: 15px !important;
| |
| color: #555 !important;
| |
| }
| |
| .gr-mob-toc-body a:active { color: #b5451b !important; }
| |
|
| |
| /* ── 8. HOME PAGE GRID — single column, no x-scroll ───────── */
| |
| html body .gr-home,
| |
| html body .gr-home > * {
| |
| max-width: 100% !important;
| |
| overflow-x: hidden !important;
| |
| }
| |
| html body .gr-home-grid {
| |
| display: flex !important;
| |
| flex-direction: column !important;
| |
| flex-wrap: nowrap !important;
| |
| gap: 14px !important;
| |
| overflow-x: hidden !important;
| |
| width: 100% !important;
| |
| }
| |
| html body .gr-home-card {
| |
| flex: 0 0 auto !important;
| |
| width: 100% !important;
| |
| max-width: 100% !important;
| |
| min-width: unset !important;
| |
| box-sizing: border-box !important;
| |
| }
| |
| html body .gr-home-toggle {
| |
| flex-wrap: wrap !important;
| |
| justify-content: center !important;
| |
| gap: 8px !important;
| |
| margin-bottom: 16px !important;
| |
| }
| |
| html body .gr-toggle-btn {
| |
| font-size: 15px !important;
| |
| padding: 10px 20px !important;
| |
| min-height: 44px !important;
| |
| }
| |
| html body .gr-home-group-label {
| |
| font-size: 1.1em !important;
| |
| }
| |
|
| |
| /* ── 9. ANNOTATION BUTTONS ─────────────────────────────────── */
| |
| html body #gra-toggle {
| |
| bottom: 80px !important;
| |
| right: 14px !important;
| |
| width: 54px !important;
| |
| height: 54px !important;
| |
| }
| |
| html body .gra-mob-btn {
| |
| min-height: 66px !important;
| |
| font-size: 13px !important;
| |
| }
| |
| html body .gra-mob-btn .gra-icon {
| |
| width: 26px !important;
| |
| height: 26px !important;
| |
| }
| |
|
| |
| /* ── 10. HIDE EXTRA VECTOR CHROME ──────────────────────────── */
| |
| html body .vector-page-toolbar,
| |
| html body .vector-column-end .vector-page-tools-pinned-container {
| |
| display: none !important;
| |
| }
| |
|
| |
| } /* end @media */
| |