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 1: Line 1:
/* ===== TFWiki Mobile Fix Pack (MonacoBookBeta-ish) ===== */
@media (max-width: 720px) {
@media (max-width: 720px) {
  /* Make the sidebar/nav become a full-screen overlay when it’s shown */
  #column-one {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;


    z-index: 999999 !important;
   /* --- Base layout: full width, no weird centering --- */
    background: #fff !important;
  }
}
 
 
@media (max-width: 720px) {
  #top-ad { height: 65px !important; }
  #top-ad iframe { height: 65px !important; }
}
 
   /* The banner is 468px wide. Scale it down depending on screen width. */
  #top-ad iframe {
    transform-origin: top left;
  }
 
  /* Big phones / small tablets */
  @media (min-width: 421px) {
    #top-ad iframe { transform: scale(0.90); }
  }
 
  /* Typical phones */
  @media (max-width: 420px) {
    #top-ad iframe { transform: scale(0.78); }
  }
 
  /* Small phones */
  @media (max-width: 360px) {
    #top-ad iframe { transform: scale(0.72); }
  }
 
  /* Tiny phones */
  @media (max-width: 320px) {
    #top-ad iframe { transform: scale(0.65); }
  }
}
 
/* ===== Mobile width/overflow fixes for TFWiki (MonacoBook-ish skins) ===== */
@media (max-width: 720px) {
 
  /* Full-width layout (stop the “narrow centered column” effect) */
   html, body {
   html, body {
     width: 100% !important;
     width: 100% !important;
Line 59: Line 8:
     margin: 0 !important;
     margin: 0 !important;
     padding: 0 !important;
     padding: 0 !important;
     overflow-x: visible !important; /* don’t clip menus/panels */
     overflow-x: visible !important; /* don't clip dropdowns */
   }
   }


Line 69: Line 18:
     max-width: 100% !important;
     max-width: 100% !important;
     min-width: 0 !important;
     min-width: 0 !important;
     margin: 0 !important;         /* IMPORTANT: no auto-centering */
     margin: 0 !important;
     padding: 0 !important;
     padding: 0 !important;
     box-sizing: border-box !important;
     box-sizing: border-box !important;
   }
   }


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


   /* MonacoBook/older skins often reserve space for the sidebar with margins */
   /* keep "more" / action menus able to overflow */
  #column-content,
  #content {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
 
  /* Prevent sideways scroll without breaking dropdowns:
    hide overflow only on the article area, NOT the whole page */
  #content,
  #bodyContent {
    overflow-x: hidden !important;
  }
 
  /* Make sure the “more” dropdown and tab menus can actually appear */
   #p-cactions,
   #p-cactions,
   #p-cactions .pBody,
   #p-cactions .pBody,
Line 105: Line 41:
   }
   }


   /* Main Page uses two columns (.mainleft/.mainright) — stack them on mobile */
   /* Main Page columns stack */
   #mw-content-text .mainleft,
   #mw-content-text .mainleft,
   #mw-content-text .mainright {
   #mw-content-text .mainright {
Line 116: Line 52:
   }
   }


   /* Media should never force horizontal scroll */
   /* Media never forces overflow */
   img, video, iframe {
   img, video, iframe {
     max-width: 100% !important;
     max-width: 100% !important;
Line 126: Line 62:
   }
   }


   /* Wide tables/navboxes: scroll the table, not the whole page */
   /* Wide tables scroll */
   #mw-content-text table.wikitable,
   #mw-content-text table.wikitable,
   #mw-content-text .navbox,
   #mw-content-text .navbox,
Line 136: Line 72:
   }
   }


   /* Long unbroken text/URLs/code can push width */
   /* long text doesn't blow width */
   .mw-parser-output {
   .mw-parser-output {
     overflow-wrap: anywhere !important;
     overflow-wrap: anywhere !important;
Line 145: Line 81:
     word-break: break-word !important;
     word-break: break-word !important;
   }
   }
}


/* ===== Full-screen sidebar on mobile (MonacoBookBeta) ===== */
  /* --- Full-screen sidebar overlay --- */
@media (max-width: 720px) {
 
  /* Make the whole sidebar become a full-screen overlay */
   #column-one {
   #column-one {
     position: fixed !important;
     position: fixed !important;
Line 172: Line 104:
   }
   }


  /* THIS is the missing piece: stretch the *contents* of the sidebar */
   /* Remove built-in padding/indentation inside the sidebar */
  #column-one .portlet,
  #column-one .pBody,
  #column-one ul,
  #column-one form,
  #column-one fieldset,
  #column-one input,
  #column-one select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
  }
 
  /* Sidebar logo/header images shouldn’t force weird widths */
  #column-one img {
    max-width: 100% !important;
    height: auto !important;
  }
 
  /* Optional: hide the sidebar ad block on mobile (uncomment if you want) */
  /* #p-ads { display: none !important; } */
}
 
/* ===== Mobile full-screen sidebar + thumb-friendly controls (MonacoBookBeta) ===== */
@media (max-width: 720px) {
 
  /* Full-screen overlay sidebar */
  #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 skin padding that causes the “narrow/indented” look */
   #column-one .portlet,
   #column-one .portlet,
   #column-one .pBody {
   #column-one .pBody {
Line 232: Line 115:
   }
   }


   /* Make the nav + toolbox lists full width */
   /* Full-width menu lists */
   #column-one ul {
   #column-one ul {
     width: 100% !important;
     width: 100% !important;
Line 241: Line 124:
     box-sizing: border-box !important;
     box-sizing: border-box !important;
   }
   }
   #column-one li {
   #column-one li { margin: 0 !important; padding: 0 !important; }
    margin: 0 !important;
    padding: 0 !important;
  }


   /* Big, full-width “menu rows” */
   /* Big, thumb-friendly menu rows */
   #column-one li a {
   #column-one li a {
     display: block !important;
     display: block !important;
Line 256: Line 136:
     line-height: 1.2 !important;
     line-height: 1.2 !important;


    /* full-width divider line */
     border-bottom: 1px solid rgba(0,0,0,0.10) !important;
     border-bottom: 1px solid rgba(0,0,0,0.10) !important;
  }
  /* Don’t underline everything; feels more app-like */
  #column-one a {
     text-decoration: none !important;
     text-decoration: none !important;
   }
   }


   /* Images inside sidebar shouldn’t force weird widths */
   /* Sidebar images behave */
   #column-one img {
   #column-one img {
     max-width: 100% !important;
     max-width: 100% !important;
Line 272: Line 147:
   }
   }


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


   #column-one #searchInput,
   #column-one #searchInput,
Line 301: Line 174:
   }
   }


   /* Optional: hide sidebar ads on mobile (uncomment if you want) */
   /* --- Layering fix: hamburger/top bar clickable, but banner ad NOT above menu --- */
  /* #p-ads { display: none !important; } */
}


@media (max-width: 720px) {
   /* Keep the TOP BAR above the menu (so you can close it) */
   /* Keep the site header / hamburger above the full-screen sidebar */
   #mw-head,
   #mw-head,
   #mw-head-base,
   #mw-head-base,
   #mw-page-base,
   #mw-page-base,
  #p-personal,
   #mobileusermenu {
   #mobileusermenu {
     position: relative !important;
     position: relative !important;
Line 316: Line 185:
   }
   }


   /* Sidebar stays high, but below the header */
   /* IMPORTANT: do NOT lift #p-personal above the menu (it contains #top-ad) */
   #column-one {
   #p-personal {
     z-index: 999999 !important;
    position: relative !important;
     z-index: 2 !important; /* below the sidebar */
   }
   }


   /* Don't float the banner ad above the menu */
   /* And specifically keep the banner ad from being interactive/on-top */
   #top-ad {
   #top-ad {
     position: relative !important;
     position: relative !important;
     z-index: 1 !important;
     z-index: 1 !important;
     pointer-events: none !important; /* remove this line if you want the ad clickable */
     pointer-events: none !important; /* remove if you want the ad clickable */
  }
  #top-ad iframe {
    z-index: 1 !important;
   }
   }
  #top-ad iframe { z-index: 1 !important; }
}
}

Revision as of 12:07, 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: hamburger/top bar clickable, but banner ad NOT above menu --- */

  /* Keep the TOP BAR above the menu (so you can close it) */
  #mw-head,
  #mw-head-base,
  #mw-page-base,
  #mobileusermenu {
    position: relative !important;
    z-index: 1000000 !important;
  }

  /* IMPORTANT: do NOT lift #p-personal above the menu (it contains #top-ad) */
  #p-personal {
    position: relative !important;
    z-index: 2 !important; /* below the sidebar */
  }

  /* And specifically keep the banner ad from being interactive/on-top */
  #top-ad {
    position: relative !important;
    z-index: 1 !important;
    pointer-events: none !important; /* remove if you want the ad clickable */
  }
  #top-ad iframe { z-index: 1 !important; }
}
Retrieved from "https://tfwiki.duckdns.org/index.php?title=User:CannonProductions/monacobookbeta.css&oldid=1882024"