Anandamakaranda

MediaWiki:Common.css: Difference between revisions

← Older editNewer edit →
No edit summary
Tag: Reverted
No edit summary
Tag: Reverted
Line 1,032: Line 1,032:


//Mobile styles
//Mobile styles
/* =========================
/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE FIXES
   MOBILE FIX v2 — paste at very end of Common.css
   EM-BASED SCALING
   Uses max specificity to override existing !important rules
   ========================= */
   ═══════════════════════════════════════════════════════════════ */


@media screen and (max-width: 768px) {
@media screen and (max-width: 768px) {


    /* Global scaling */
/* ── 1. ROOT SCALE ─────────────────────────────────────────── */
    html {
html { font-size: 18px !important; }
        font-size: 1.125em;
body { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }
    }


    body {
/* ── 2. HEADER — bigger, readable ─────────────────────────── */
        font-size: 1em;
html body .vector-header-container,
        line-height: 1.7em;
html body .vector-sticky-header-container {
        -webkit-text-size-adjust: 100%;
  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;
}


    /* Full-width mobile layout */
/* ── 3. READER TOOLBAR ─────────────────────────────────────── */
    .mw-page-container {
html body #gr-static-bar {
        max-width: 100% !important;
  height: auto !important;
        padding: 0 !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; }


    .mw-content-container {
/* ── 4. LAYOUT — single column, full width ─────────────────── */
        margin: 0 !important;
html body .mw-page-container,
        padding: 1em !important;
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;
}


    /* Remove desktop-card feel */
/* ── 5. CONTENT FONT ───────────────────────────────────────── */
    .mw-body {
html body .mw-parser-output {
        border-radius: 0 !important;
  font-size: 18px !important;
        box-shadow: none !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;
}


    .vector-feature-zebra-design-enabled .mw-page-container {
/* ── 6. HIDE VECTOR SIDEBAR TOC ────────────────────────────── */
        padding: 0 !important;
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) ─────────── */
      HEADER
.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; }


    .vector-header-container,
/* ── 8. HOME PAGE GRID — single column, no x-scroll ───────── */
    .vector-sticky-header-container {
html body .gr-home,
        min-height: 5.5em !important;
html body .gr-home > * {
        padding: 0.75em 1em !important;
  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;
}


        display: flex;
/* ── 9. ANNOTATION BUTTONS ─────────────────────────────────── */
        align-items: center;
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;
}


    /* Logo text */
/* ── 10. HIDE EXTRA VECTOR CHROME ──────────────────────────── */
    .mw-logo-wordmark {
html body .vector-page-toolbar,
        font-size: 1.35em !important;
html body .vector-column-end .vector-page-tools-pinned-container {
        line-height: 1.2em !important;
  display: none !important;
    }
}
 
    /* Logo icon */
    .mw-logo-icon img {
        width: 2.5em !important;
        height: 2.5em !important;
    }
 
    /* =========================
      SEARCH
      ========================= */
 
    .cdx-search-input {
        height: 2.8em !important;
        font-size: 1em !important;
        border-radius: 0.7em !important;
        padding: 0 0.9em !important;
    }
 
    .cdx-search-input::placeholder {
        font-size: 1em;
    }
 
    /* =========================
      CONTENT TYPOGRAPHY
      ========================= */
 
    .mw-parser-output {
        font-size: 1.05em;
        line-height: 1.9em;
    }
 
    /* Headings */
 
    .mw-parser-output h1 {
        font-size: 1.9em !important;
        line-height: 1.2em !important;
        margin-bottom: 0.5em !important;
    }
 
    .mw-parser-output h2 {
        font-size: 1.5em !important;
        line-height: 1.3em !important;
    }
 
    .mw-parser-output h3 {
        font-size: 1.25em !important;
        line-height: 1.35em !important;
    }
 
    /* Paragraphs */
 
    .mw-parser-output p {
        margin-bottom: 1em;
    }
 
    /* Sanskrit / verse blocks */
 
    .verse,
    .sloka,
    .sanskrit-text {
        font-size: 1.15em !important;
        line-height: 2em !important;
    }


    /* =========================
} /* end @media */
      TABLES
      ========================= */
 
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
    }
 
    /* =========================
      TOC
      ========================= */
 
    #toc,
    .toc {
        font-size: 1em !important;
        padding: 1em !important;
        line-height: 1.7em;
    }
 
    /* =========================
      BUTTONS
      ========================= */
 
    button,
    .cdx-button {
        min-height: 2.8em;
        font-size: 1em;
        padding: 0.6em 1em;
        border-radius: 0.6em;
    }
 
    /* Reduce desktop spacing */
 
    .vector-page-titlebar {
        margin-top: 0 !important;
    }
}
Retrieved from "https://dev.anandamakaranda.in/MediaWiki:Common.css"