User:CannonProductions/monacobookbeta.css: Difference between revisions

From MediaWiki
Jump to navigationJump to search
← Older editNewer edit →
CannonProductions (talk | contribs)
91 edits
No edit summary
No edit summary
Line 174: Line 174:
   }
   }


   /* --- Layering fix (THIS is the important part for your new screenshots) --- */
   /* --- Layering fix --- */
 
  /* Keep #p-personal neutral: positioned but NO z-index => no stacking context */
   #p-personal {
   #p-personal {
     position: relative !important;
     position: relative !important;
Line 182: Line 180:
   }
   }


  /* Put ONLY the top bar bits above the sidebar (so hamburger stays clickable) */
   #sitemenutop,
   #sitemenutop,
   #usermenutop,
   #usermenutop,
Line 190: Line 187:
   }
   }


  /* Keep the ad BELOW the sidebar */
   #top-ad {
   #top-ad {
     position: relative !important;
     position: relative !important;
     z-index: 1 !important; /* far below sidebar's 999999 */
     z-index: 1 !important;
   }
   }
   #top-ad iframe {
   #top-ad iframe {
     position: relative !important;
     position: relative !important;
     z-index: 1 !important;
     z-index: 1 !important;
  }
}
@media (max-width: 720px) {
  /* adjust this if your top bar is taller/shorter */
  :root { --tf-topbar-h: 56px; }
  /* When the nav is open, make it tuck under the top bar */
  html.tf-nav-open #column-one {
    top: var(--tf-topbar-h) !important;
    height: calc(100vh - var(--tf-topbar-h)) !important;
  }
  /* Keep the hamburger/top bar on top */
  #sitemenutop,
  #usermenutop,
  #mobileusermenu {
    position: relative !important;
    z-index: 1000000 !important;
   }
   }


   /* When nav is open: hide the banner ad completely (clean + prevents layering weirdness) */
   /* --- Nav-open tweaks (minimal, safe) --- */
   html.tf-nav-open #top-ad {
   html.tf-nav-open #top-ad {
    display: none !important;
  }
}
@media (max-width: 720px) {
  /* Your top area is taller than 56px because of tabs; bump this */
  :root { --tf-topbar-h: 104px; }
  /* When nav is open, tuck it cleanly under the whole top area */
  html.tf-nav-open #column-one {
    top: var(--tf-topbar-h) !important;
    height: calc(100vh - var(--tf-topbar-h)) !important;
  }
  /* Hide the page/discussion/more tabs row while nav is open (less clutter) */
  html.tf-nav-open #p-cactions,
  html.tf-nav-open #p-cactions * {
    display: none !important;
  }
  /* Optional: also hide the little logo block inside the sidebar header when open,
    so the first thing you see is the nav list (uncomment if you want)
  */
  /* html.tf-nav-open #p-m-logo { display: none !important; } */
}
@media (max-width: 720px) {
  /* When nav is open, make it a true full-screen overlay */
  html.tf-nav-open #column-one {
    top: 0 !important;
    height: 100vh !important;
  }
  /* While nav is open, hide the page tabs + the big intro box on Main Page */
  html.tf-nav-open #p-cactions,
  html.tf-nav-open #p-cactions * {
     display: none !important;
     display: none !important;
   }
   }


   /* This targets that Main Page intro box (the white text panel you see above the menu) */
   /* Optional: hide action tabs while nav open */
   html.tf-nav-open #content,
   html.tf-nav-open #p-cactions {
  html.tf-nav-open #bodyContent {
     display: none !important;
     display: none !important;
  }
  /* Keep the hamburger/top bar ABOVE the overlay so you can close it */
  #sitemenutop,
  #usermenutop,
  #mobileusermenu {
    position: relative !important;
    z-index: 1000001 !important;
  }
  /* Keep the sidebar just below the hamburger layer */
  #column-one {
    z-index: 1000000 !important;
   }
   }
}
}

Revision as of 12:37, 30 December 2025

/* ===== TFWiki Mobile Fix Pack (MonacoBookBeta-ish) ===== */
@media (max-width: 720px) {

  /* --- Base layout: full width, no weird centering --- */
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: visible !important; /* don't clip dropdowns */
  }

  #globalWrapper,
  #column-content,
  #content,
  #bodyContent {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* breathing room for article text */
  #content, #bodyContent {
    padding-left: 10px !important;
    padding-right: 10px !important;
    overflow-x: hidden !important; /* stop sideways scroll in content */
  }

  /* keep "more" / action menus able to overflow */
  #p-cactions,
  #p-cactions .pBody,
  #column-content {
    overflow: visible !important;
  }
  #p-cactions {
    position: relative !important;
    z-index: 10000 !important;
  }

  /* Main Page columns stack */
  #mw-content-text .mainleft,
  #mw-content-text .mainright {
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    text-align: center;
  }

  /* Media never forces overflow */
  img, video, iframe {
    max-width: 100% !important;
    height: auto !important;
  }
  .thumb, .thumbinner {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Wide tables scroll */
  #mw-content-text table.wikitable,
  #mw-content-text .navbox,
  #mw-content-text table.navbox {
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* long text doesn't blow width */
  .mw-parser-output {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  pre, code {
    white-space: pre-wrap !important;
    word-break: break-word !important;
  }

  /* --- Full-screen sidebar overlay --- */
  #column-one {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;

    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;

    z-index: 999999 !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  /* Remove built-in padding/indentation inside the sidebar */
  #column-one .portlet,
  #column-one .pBody {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
  }

  /* Full-width menu lists */
  #column-one ul {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    box-sizing: border-box !important;
  }
  #column-one li { margin: 0 !important; padding: 0 !important; }

  /* Big, thumb-friendly menu rows */
  #column-one li a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;

    padding: 14px 16px !important;
    font-size: 18px !important;
    line-height: 1.2 !important;

    border-bottom: 1px solid rgba(0,0,0,0.10) !important;
    text-decoration: none !important;
  }

  /* Sidebar images behave */
  #column-one img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* Search area padding + full-width controls */
  #p-search .pBody { padding: 12px 16px !important; }

  #column-one #searchInput,
  #column-one input[type="text"],
  #column-one input[type="search"] {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 18px !important;
    padding: 12px 12px !important;
    box-sizing: border-box !important;
  }

  #column-one input[type="submit"],
  #column-one input[type="button"],
  #column-one button {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;

    font-size: 18px !important;
    padding: 14px 12px !important;
    margin: 10px 0 0 0 !important;

    box-sizing: border-box !important;
  }

  /* --- Layering fix --- */
  #p-personal {
    position: relative !important;
    z-index: auto !important;
  }

  #sitemenutop,
  #usermenutop,
  #mobileusermenu {
    position: relative !important;
    z-index: 1000000 !important;
  }

  #top-ad {
    position: relative !important;
    z-index: 1 !important;
  }
  #top-ad iframe {
    position: relative !important;
    z-index: 1 !important;
  }

  /* --- Nav-open tweaks (minimal, safe) --- */
  html.tf-nav-open #top-ad {
    display: none !important;
  }

  /* Optional: hide action tabs while nav open */
  html.tf-nav-open #p-cactions {
    display: none !important;
  }
}
Retrieved from "https://tfwiki.duckdns.org/index.php?title=User:CannonProductions/monacobookbeta.css&oldid=1882033"