MediaWiki:Mobile.css: Difference between revisions

Latest revision as of 15:48, 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. DESKTOP STICKY HEADER (Vector 2022 Skin)             */
/* ======================================================= */
/* This part works perfectly, as confirmed. */

.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);
}

/* Pushes article content down so it isn't hidden behind the fixed header */
body.skin-vector-2022 {
    padding-top: 60px;
}
.mw-page-container {
    margin-top: 10px;
}

/* ======================================================= */
/* 2. TOP FLOATING SQUARES (44px | #F8F9FA Tone)           */
/* ======================================================= */

/* --- A. HEADER RESET (Invisible Container) --- */
.header-container.header-chrome {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 60px !important; 
    z-index: 1000 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
    transform: none !important;
    transition: none !important;
    overflow: visible !important;
}

/* Push content down */
body.skin-minerva { padding-top: 60px !important; }
.mw-body { margin-top: 10px !important; }

/* Hide default elements */
.header-container .navigation-drawer { display: none !important; }

/* --- B. COMMON SQUARE STYLE (0.03 Transparency for #F8F9FA) --- */
.branding-box, 
#searchIcon, 
#cps-open-toc,
body.mw-mf-search-mode .minerva-header .search-box input {
    /* 3% Black = ~#F8F9FA on white */
    background-color: rgba(0, 0, 0, 0.03) !important; 
    
    /* Force Full Opacity & Strip Defaults */
    opacity: 1 !important;
    background-image: none !important;
    -webkit-appearance: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    
    border-radius: 8px !important;
    pointer-events: auto !important;
    
    /* STANDARD 44px SIZING */
    box-sizing: border-box !important;
    width: 44px !important; 
    height: 44px !important;
    padding: 0 !important; 
    margin: 0 !important;
}

/* --- C. BUTTON 1: SEARCH TRIGGER (TOP LEFT) --- */
#searchIcon {
    position: fixed !important;
    
    /* ALIGNMENT: 8px Top */
    top: 8px !important;      
    left: 10px !important;
    right: auto !important;
    
    /* FORCE SIZE RESET */
    min-width: 0 !important; 
    min-height: 0 !important;
    max-width: 44px !important;
    max-height: 44px !important;
    
    z-index: 1003 !important;
    display: flex !important; align-items: center; justify-content: center;
}

/* Search Icon */
#searchIcon .minerva-icon {
    font-size: 24px !important;
    color: #fff !important;
    fill: #fff !important;
    opacity: 1 !important;
    filter: brightness(0) invert(1); 
    margin: 0 !important;
}

/* --- D. BUTTON 2: TOC (RIGHT - 100px SPACE) --- */
#cps-open-toc {
    display: flex !important;
    position: fixed !important;
    top: 8px !important;
    
    /* Position: 100px from right edge */
    right: 100px !important; 
    left: auto !important; bottom: auto !important;
    
    z-index: 1002 !important;
    color: #fff !important;
    align-items: center; justify-content: center;
}

/* TOC Icon */
#cps-open-toc .icon { font-size: 24px !important; }

/* --- E. BUTTON 3: HOME (LEFT OF TOC) --- */
.branding-box {
    position: fixed !important;
    top: 8px !important;
    
    /* Position: 100px (Space) + 44px (TOC) + 10px (Gap) */
    right: 154px !important;
    left: auto !important;
    
    z-index: 1002 !important;
    display: flex !important; 
    align-items: center; 
    justify-content: center;
}

/* 1. The Home Icon (Bold & White) */
.branding-box::after {
    content: "⌂"; 
    font-size: 30px !important; 
    color: #fff !important; 
    -webkit-text-stroke: 1px #fff !important; 
    margin-top: -6px !important; 
    display: block !important;
    line-height: 1 !important;
}

/* 2. The Link Overlay */
.branding-box a {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    opacity: 0 !important; 
    z-index: 2 !important;
}
.branding-box a * { display: none !important; }
.branding-box a::before { display: none !important; }

/* --- F. THE SEARCH INPUT --- */

/* 1. Hide initially */
body:not(.mw-mf-search-mode) .minerva-header .search-box {
    display: none !important;
}

/* 2. Position Wrapper */
body.mw-mf-search-mode .minerva-header .search-box {
    display: block !important;
    position: fixed !important;
    top: 8px !important;
    height: 44px !important;
    z-index: 1001 !important;
    
    left: 10px !important;    
    right: 10px !important;   
    
    width: auto !important;
    padding: 0 !important; margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* 3. Style Input Pill */
body.mw-mf-search-mode .minerva-header .search-box input {
    width: 100% !important;
    height: 44px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    
    /* Background matches buttons */
    background-color: rgba(0, 0, 0, 0.03) !important;
    
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 16px !important;
    
    /* PADDING: 44px (Button) + 11px (Gap) */
    padding-left: 55px !important; 
    padding-right: 55px !important;
    
    margin: 0 !important;
}

/* 4. Hide Inner Icon */
.minerva-header .search-box .search-box-icon-overlay {
    display: none !important;
}

/* 5. Placeholder */
body.mw-mf-search-mode .minerva-header .search-box input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
}

/* 6. Cancel "X" Button */
.search-box .search-box-cancel { 
    display: block !important; 
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    text-align: center !important;
    color: #fff !important;
    z-index: 1004 !important;
}