User:CannonProductions/monacobookbeta.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

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

  /* --- Base layout: full width --- */
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: visible !important;
  }

  #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;
  }

  #content, #bodyContent {
    padding-left: 10px !important;
    padding-right: 10px !important;
    overflow-x: hidden !important;
  }

  /* 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;
  }

  /* Article media responsive (DON'T touch all iframes globally) */
  #mw-content-text img,
  #mw-content-text video,
  #mw-content-text iframe {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Wide tables/navboxes 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;
  }

  /* --- Banner ad: do NOT fight the JS scaler --- */
  #top-ad {
    width: 100% !important;
    overflow: hidden !important;
  }
  #top-ad iframe {
    max-width: none !important;
    height: 60px !important;
    border: 0 !important;
    display: block !important;
  }

  /* --- Full-screen sidebar overlay (ALWAYS when visible) --- */
  #column-one {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100vw !important;
    min-width: 100vw !important;
    max-width: none !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;
  }

  /* Stretch sidebar contents full width */
  #column-one .portlet,
  #column-one .pBody,
  #column-one ul,
  #column-one form,
  #column-one fieldset {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
  }

  #column-one ul { list-style: none !important; }
  #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;
  }

  /* Search controls full width */
  #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;
  }

  /* Hide the redundant mobile logo portlet (JS also removes it) */
  #column-one #p-m-logo { display: none !important; }

  /* ===== Goal: menu shifts down under hamburger bar WHEN OPEN ===== */
  :root { --tf-hamburger-h: 36px; } /* tweak if needed */

  html.tf-nav-open #column-one {
    top: var(--tf-hamburger-h) !important;
    height: calc(100vh - var(--tf-hamburger-h)) !important;
  }

  /* When nav is open, hide banner ad completely */
  html.tf-nav-open #top-ad {
    display: none !important;
  }
}

@media (max-width: 720px) {
  #p-m-logo,
  #p-m-logo * {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }
}

@media (max-width: 720px) {

  /* Make the list itself truly edge-to-edge */
  #column-one ul {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Make each row go full width and draw the divider on the ROW, not the link */
  #column-one li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.18) !important;
  }

  /* Make the tap target big + full width (and REMOVE the old divider so we don’t double-line) */
  #column-one li a {
    display: block !important;
    width: 100% !important;
    padding: 28px 18px !important;   /* bigger = easier for thumbs */
    font-size: 20px !important;      /* bigger text */
    line-height: 1.25 !important;
    border-bottom: 0 !important;     /* divider handled by li */
    box-sizing: border-box !important;
  }
}