MediaWiki:Mobile.css: Difference between revisions

Revision as of 05:52, 6 December 2025

/* All CSS here will be loaded for users of the mobile site */

/* Standard <youtube> (no lazy-load) */
.mw-parser-output iframe[data-extension="youtube"] {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  display: block;
}

/* Lazy-load wrapper + its thumbnail image */
.mw-parser-output .ext-YouTube-video {
  width: 100% !important;   /* override inline width="560px" etc. */
  height: auto !important;  /* override inline height */
}
.mw-parser-output .ext-YouTube-video img {
  width: 100% !important;   /* scale preview to screen */
  height: auto !important;
  aspect-ratio: 16 / 9;
  display: block;
}

/* Optional: cap on very large screens (adjust 720px to taste) */
@media (min-width: 992px) {
  .mw-parser-output iframe[data-extension="youtube"],
  .mw-parser-output .ext-YouTube-video {
    max-width: 720px;
    margin: 0 auto;
  }
}

/* CapSach — Mobile TOC overlay (all skins) */
#cps-open-toc {
  position: fixed;
  
  /* POSITION: Right side */
  right: 16px;             /* Changed from left: 16px */
  left: auto;              /* Safety: ensures left is unset */
  
  /* POSITION: Lifted (to clear Google Anchor Ads) */
  bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  
  /* SHAPE: Smaller Size (40px) */
  width: 44px;             /* Changed from 48px */
  height: 44px;            /* Changed from 48px */
  
  border: 0; border-radius: 999px;
  display: none; 
  align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
  color: #fff; background: rgba(0,0,0,.1);
  /* box-shadow: 0 2px 8px rgba(0,0,0,.0);*/
  z-index: 1000; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#cps-open-toc:focus { outline: 2px solid #36c; outline-offset: 2px; }
#cps-open-toc .label { display: none; } /* icon-only by default */
#cps-open-toc .icon { font-size: 20px; line-height: 1; }

/* Full-screen scrim */
#cps-toc-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.1);
  display: none; z-index: 1001;
}
#cps-toc-overlay.is-open { display: block; }

/* Bottom sheet panel */
#cps-toc-panel {
  position: fixed; left: 0; right: 0; bottom: 0;
  max-height: 85vh;
  border-radius: 12px 12px 0 0;
  background: #fff; color: #202122;
  /* box-shadow: 0 -8px 20px rgba(0,0,0,.0);*/
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)) 12px;
}

/* Header row */
#cps-toc-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
#cps-toc-title { font-size: 16px; font-weight: 600; margin: 0; }
#cps-toc-close {
  background: transparent; border: 0; font-size: 22px; line-height: 1;
}

/* List */
#cps-toc-list {
  list-style: none; margin: 0; padding: 4px 2px 6px;
  max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#cps-toc-list li { margin: 2px 0; }
#cps-toc-list a {
  display: block; padding: 8px 10px; border-radius: 8px;
  text-decoration: none; color: inherit;
}
#cps-toc-list a:focus, #cps-toc-list a:active {
  outline: 2px solid #36c; background: #f5f6f7;
}

/* Indentation by heading level */
#cps-toc-list li[data-level="3"] { padding-left: 12px; }
#cps-toc-list li[data-level="4"] { padding-left: 24px; }
#cps-toc-list li[data-level="5"] { padding-left: 36px; }
#cps-toc-list li[data-level="6"] { padding-left: 48px; }

/* Only show on phone-ish widths; tablet/desktop keep native TOC */
@media (min-width: 768px) {
  #cps-open-toc, #cps-toc-overlay { display: none !important; }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ======================================================= */
/* FIX: HIDE DUPLICATE "CONTENTS" TITLE IN MOBILE TOC      */
/* ======================================================= */

/* This hides the original MediaWiki header inside your custom panel */
#cps-toc-panel .toctitle,
#cps-toc-panel #mw-toc-heading,
#cps-toc-panel h2 {
    display: none !important;
}

/* ======================================================= */
/* 1. MOBILE FIX (Minerva Skin)                            */
/* ======================================================= */

/* A. Sticky Header (Only when NOT searching) */
body:not(.mw-mf-search-mode) .header-container.header-chrome {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: #fff;
    border-bottom: 1px solid #eaecf0;
    width: 100%;
}

/* B. Search Input Text Fix (Force Visible Text) */
/* This forces the text to be black and background white so you can see it. */
.minerva-header .search-box .search {
    color: #202122 !important;       /* Dark grey/black text */
    background-color: #fff !important; /* White background */
    opacity: 1 !important;           /* Ensure it's not transparent */
    text-shadow: none !important;    /* Remove any text shadows */
    -webkit-text-fill-color: #202122 !important; /* iOS fix */
}

/* C. Search Icon Displacement Fix */
/* This prevents the search box from stretching too wide and pushing the icon */
.minerva-header .search-box {
    box-sizing: border-box !important;
    position: relative !important;
    /* Ensure there is room for the icon on the right */
    padding-right: 0 !important; 
}

/* Force the icon overlay to stay in the correct spot */
.minerva-header .search-box .search-box-icon-overlay {
    right: 0 !important;
    left: auto !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 44px !important; /* Standard touch target size */
    height: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute !important;
    z-index: 2 !important; /* Sit on top of the input */
    pointer-events: none; /* Allow clicking "through" to the input if needed */
}

/* Adjust input padding so text doesn't go under the icon */
.minerva-header .search-box input.search {
    padding-right: 40px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}


/* ======================================================= */
/* 2. DESKTOP FIX (Vector 2022 Skin)                       */
/* ======================================================= */

/* Use FIXED instead of STICKY. 
   Sticky stops working if its parent container ends. 
   Fixed forces it to stay on screen forever. */
.vector-header-container {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* PADDING COMPENSATION (Important!)
   Since the header is now "fixed" (floating above everything), 
   it no longer takes up space in the page flow. 
   We must push the page content down so it isn't hidden behind the header. */
body.skin-vector-2022 {
    padding-top: 60px; /* Adjust this number if the header covers your title */
}

/* Ensure the scrollable content container behaves correctly */
.mw-page-container {
    margin-top: 10px;
}