MediaWiki - User contributions [en]

User:CannonProductions/monacobookbeta.css

2026-01-02T04:25:05Z

CannonProductions:

/* ===== 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: 30px 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;
}
}

@media (max-width: 720px) {
/* Kill the little gap above the banner ad */
#top-ad {
margin-top: 0 !important;
padding-top: 0 !important;
}

/* Often the gap is actually the element *before* the ad */
#mobileusermenu,
#p-personal {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
}

/* ===== Dark mode (auto via system setting) ===== */
@media (prefers-color-scheme: dark) {

/* Page background + default text */
html, body {
background: #0f1115 !important;
color: #e6e6e6 !important;
}

/* Main content panels */
#globalWrapper,
#content,
#bodyContent,
#column-content,
.portlet,
.pBody {
background: #12151c !important;
color: #e6e6e6 !important;
}

/* Links */
a { color: #8ab4ff !important; }
a:visited { color: #c58af9 !important; }

/* Borders / divider lines */
hr,
#column-one li {
border-color: rgba(255,255,255,0.18) !important;
}

/* Sidebar overlay background */
#column-one {
background: #10131a !important;
}

/* Inputs */
input, select, textarea {
background: #0f1218 !important;
color: #e6e6e6 !important;
border: 1px solid rgba(255,255,255,0.18) !important;
}

/* Make the tab/action areas not blinding */
#p-cactions,
#p-cactions .pBody {
background: #12151c !important;
color: #e6e6e6 !important;
border-color: rgba(255,255,255,0.18) !important;
}

/* Wikitables / infoboxes */
table, th, td, .infobox, .wikitable {
background: #12151c !important;
color: #e6e6e6 !important;
border-color: rgba(255,255,255,0.18) !important;
}
}

@media (prefers-color-scheme: dark) {

/* Fix “white box / invisible text” panels (Main Page + common wiki boxes) */
#mw-content-text,
#mw-content-text .mw-parser-output,
#mw-content-text .mainleft,
#mw-content-text .mainright,
#contentSub,
#siteSub,
#firstHeading,
.mw-parser-output > div,
.mw-parser-output > table,
.mw-parser-output .toc,
.mw-parser-output .thumbinner,
.mw-parser-output .infobox,
.mw-parser-output .wikitable,
.mw-parser-output .navbox,
.mw-parser-output .ambox,
.mw-parser-output .tmbox,
.mw-parser-output .ombox,
.mw-parser-output .fmbox {
background: #12151c !important;
color: #e6e6e6 !important;
border-color: rgba(255,255,255,0.18) !important;
}

/* Make sure plain paragraphs/spans inside those boxes are light too */
#mw-content-text p,
#mw-content-text span,
#mw-content-text li,
#mw-content-text div {
color: #e6e6e6 !important;
}

/* Links inside content */
#mw-content-text a { color: #8ab4ff !important; }
#mw-content-text a:visited { color: #c58af9 !important; }

/* Some skins set weird “transparent” backgrounds that become unreadable */
.mw-parser-output .mainleft *,
.mw-parser-output .mainright * {
background-color: transparent !important;
}
}

@media (prefers-color-scheme: dark) {

/* Main Page intro box has inline background:#f7f8ff — override it */
#mw-content-text > div[style*="background:#f7f8ff"],
#mw-content-text > div[style*="background: #f7f8ff"] {
background: #12151c !important;
color: #e6e6e6 !important;
border-color: rgba(255,255,255,0.18) !important;
}

/* And make sure text INSIDE that box is readable */
#mw-content-text > div[style*="background:#f7f8ff"] *,
#mw-content-text > div[style*="background: #f7f8ff"] * {
color: #e6e6e6 !important;
}

/* Links inside that box */
#mw-content-text > div[style*="background:#f7f8ff"] a,
#mw-content-text > div[style*="background: #f7f8ff"] a {
color: #8ab4ff !important;
}
#mw-content-text > div[style*="background:#f7f8ff"] a:visited,
#mw-content-text > div[style*="background: #f7f8ff"] a:visited {
color: #c58af9 !important;
}
}

@media (prefers-color-scheme: dark) {
#p-cactions,
#p-cactions ul,
#p-cactions li,
#p-cactions a {
background: #12151c !important;
color: #e6e6e6 !important;
border-color: rgba(255,255,255,0.18) !important;
}
}

@media (prefers-color-scheme: dark) {

/* ===== Catlinks (Categories) ===== */
#catlinks {
background: #12151c !important;
color: #e6e6e6 !important;
border-color: rgba(255,255,255,0.18) !important;
}
#catlinks a { color: #8ab4ff !important; }
#catlinks a:visited { color: #c58af9 !important; }

/* ===== Footer ===== */
#footer,
#footer * {
background: transparent !important; /* let #footer set the base */
color: #cfcfcf !important;
border-color: rgba(255,255,255,0.18) !important;
}
#footer {
background: #0f131a !important;
border-top: 1px solid rgba(255,255,255,0.12) !important;
}
#footer a { color: #8ab4ff !important; }
#footer a:visited { color: #c58af9 !important; }

/* ===== “Print footer” line (sometimes shows on pages) ===== */
.printfooter {
color: #cfcfcf !important;
}

/* ===== Code blocks (your CSS/JS pages) ===== */
pre,
code,
pre.mw-code,
.mw-code {
background: #0b0e14 !important;
color: #e6e6e6 !important;
border-color: rgba(255,255,255,0.18) !important;
}
}

/* ===== Dark mode: catch remaining “inline light box” strays + Main Page icon labels ===== */
@media (prefers-color-scheme: dark) {

/* If ANYTHING inside the article is still using an inline “light box” background,
force it to be dark so light text doesn’t disappear */
#mw-content-text [style*="background:#f7f8ff"],
#mw-content-text [style*="background: #f7f8ff"],
#mw-content-text [style*="background:#fff"],
#mw-content-text [style*="background: #fff"],
#mw-content-text [style*="background:#ffffff"],
#mw-content-text [style*="background: #ffffff"] {
background: #141a22 !important;
color: #e7edf6 !important;
border-color: rgba(255,255,255,0.18) !important;
}

/* These are the exact “external icons” label blocks you screenshotted */
#mpexternaliconsocmed,
#mpexternaliconssister,
#mpexternaliconsocmed *,
#mpexternaliconssister * {
color: #e7edf6 !important;
}

/* Make sure links in those labels look like links */
#mpexternaliconsocmed a,
#mpexternaliconssister a {
color: #8ab4ff !important;
}
}

/* ===== Dark mode: FIX Main Page icon-map label strays (sister + social) ===== */
@media (prefers-color-scheme: dark) {

/* Make BOTH icon-map blocks behave like proper “cards” */
#mpexternaliconssister,
#mpexternaliconsocmed {
position: relative !important;
display: inline-block !important;

/* the “box” you want the label to live inside */
background: #ffffff !important;
padding: 44px 12px 12px 12px !important; /* top padding reserves label space */
border-radius: 10px !important;

/* center them in their column */
margin: 10px auto !important;
text-align: center !important;

/* prevent any weird clipping */
overflow: visible !important;
}

/* BULLETPROOF: target ANY absolutely-positioned label inside those blocks */
#mpexternaliconssister div[style*="position:absolute"],
#mpexternaliconsocmed div[style*="position:absolute"] {
position: absolute !important;

top: 10px !important;
left: 50% !important;
transform: translateX(-50%) !important;

width: calc(100% - 24px) !important;
max-width: 360px !important;

text-align: center !important;
white-space: normal !important;

color: #e7edf6 !important;
background: rgba(0,0,0,0.75) !important;
padding: 6px 10px !important;
border-radius: 8px !important;
line-height: 1.3 !important;

z-index: 5 !important;
pointer-events: none !important; /* IMPORTANT: don't block the clickable image-map */
}
}

/* ===== Dark mode: FIX the two floating Main Page labels properly ===== */
@media (prefers-color-scheme: dark) {

/* Make sure these blocks can grow normally */
#mpexternaliconssister,
#mpexternaliconsocmed {
height: auto !important;
overflow: visible !important;
}

/* The label is the FIRST child div in each block */
#mpexternaliconssister > div:first-child,
#mpexternaliconsocmed > div:first-child {
/* cancel the inline absolute positioning */
position: static !important;
top: auto !important;
left: auto !important;
transform: none !important;
width: auto !important;

/* make it look good + readable */
display: block !important;
margin: 10px auto 12px auto !important;
padding: 8px 12px !important;
border-radius: 10px !important;

text-align: center !important;
line-height: 1.3 !important;

color: #e7edf6 !important;
background: rgba(0,0,0,0.70) !important;
}

/* Keep the icon/image-map layer behaving normally */
#mpexternaliconssister > div:nth-child(2),
#mpexternaliconsocmed > div:nth-child(2) {
position: relative !important;
z-index: 1 !important;
}
}

/* ===== Dark mode: fix the two floating labels on the Main Page icon-map (FINAL) ===== */
@media (prefers-color-scheme: dark) {

/* Make the blocks the positioning parent for the absolute label */
#mpexternaliconssister,
#mpexternaliconsocmed {
position: relative !important;
}

/* The LABEL is the first child div in each block */
#mpexternaliconssister > div:first-child,
#mpexternaliconsocmed > div:first-child {
position: absolute !important;
top: 8px !important;

/* override inline width/left and make it span nicely */
left: 8px !important;
right: 8px !important;
width: auto !important;

text-align: center !important;
white-space: normal !important;

color: #e7edf6 !important;
background-color: rgba(0,0,0,0.72) !important;

padding: 8px 10px !important;
border-radius: 10px !important;

z-index: 999 !important;

/* CRITICAL: don't block the clickable image-map */
pointer-events: none !important;
}
}

/* ===== Dark mode: fix episode/story “chips” (tt1_storylink) ===== */
@media (prefers-color-scheme: dark) {

/* Neutralize whatever the skin/template is doing */
.tt1_storylink {
background: transparent !important;
}

/* Re-style the actual link as a readable chip */
.tt1_storylink a,
.tt1_storylink a:visited {
color: #eaf2ff !important;
background: #1b2333 !important;
border: 1px solid rgba(138,180,255,0.35) !important;

padding: 2px 7px !important;
border-radius: 7px !important;

display: inline-block !important;
line-height: 1.2 !important;
text-decoration: none !important;
}

.tt1_storylink a:hover,
.tt1_storylink a:focus {
background: #24304a !important;
border-color: rgba(138,180,255,0.55) !important;
text-decoration: underline !important;
}
}

/* ===== Dark mode: image thumbs + captions (borders + caption strip) ===== */
@media (prefers-color-scheme: dark) {

/* The image itself often has its own border */
.thumbimage,
.thumbinner img {
border-color: rgba(255,255,255,0.18) !important;
}

/* Caption area */
.thumbcaption {
background: transparent !important; /* keep it inside the dark frame */
color: #e6e6e6 !important;
}

/* Caption links */
.thumbcaption a { color: #8ab4ff !important; }
.thumbcaption a:visited { color: #c58af9 !important; }

/* The little “magnify” icon area if present */
.magnify a,
.magnify img {
opacity: 0.85 !important;
}
}

/* ===== Dark mode: remove the nasty white thumbnail borders ===== */
@media (prefers-color-scheme: dark) {

/* The box that wraps the thumbnail */
.thumb .thumbinner {
background: #0f131a !important;
border: 0 !important; /* kill outer border */
}

/* The image itself often has its own border */
.thumb .thumbimage {
border: 0 !important; /* kill inner border */
display: block !important; /* avoids tiny gaps */
}

/* If the link wrapper is adding any light background */
.thumb a.image,
.thumb a.image img {
background: transparent !important;
}
}

/* ===== Dark mode: NUCLEAR removal of thumbnail white frame ===== */
@media (prefers-color-scheme: dark) {

/* The wrapper box around thumbnails */
#mw-content-text .thumb .thumbinner,
#content .thumb .thumbinner,
.mw-parser-output .thumb .thumbinner,
div.thumbinner {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important; /* prevents white panel look */
}

/* The image itself often has a second border */
#mw-content-text img.thumbimage,
#content img.thumbimage,
.mw-parser-output img.thumbimage,
img.thumbimage {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
display: block !important; /* avoids tiny “gap line” artifacts */
}

/* Sometimes the link wrapper contributes */
#mw-content-text .thumb a.image,
#content .thumb a.image,
.mw-parser-output .thumb a.image {
background: transparent !important;
}
}

/* ===== Dark mode: FINAL thumbnail frame killer (border/padding/background) ===== */
@media (prefers-color-scheme: dark) {

/* The outer thumb wrapper sometimes has its own spacing */
.thumb {
background: transparent !important;
border: 0 !important;
}

/* This is the “frame” box */
.thumb .thumbinner,
.thumbinner {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;

/* THIS is usually what looks like a border */
padding: 0 !important;
background: transparent !important;
}

/* The link wrapper can have its own border/background */
.thumb a.image,
.thumbinner a.image {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
display: block !important;
}

/* The image itself can have a second border */
img.thumbimage,
.thumb img.thumbimage,
.thumbinner img {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
display: block !important;
margin: 0 !important;
}

/* Keep captions readable + nicely padded */
.thumb .thumbcaption,
.thumbcaption {
background: transparent !important;
color: #e6e6e6 !important;
padding: 8px 10px !important;
}
}

/* ===== Dark mode: fix the "tt1_graynote" strip (the ugly white note box) ===== */
@media (prefers-color-scheme: dark) {

/* The note strip itself */
.tt1_graynote {
background: rgba(255,255,255,0.06) !important; /* subtle dark-mode panel */
color: #d6dbe6 !important;
border: 1px solid rgba(255,255,255,0.12) !important;
padding: 6px 10px !important;
border-radius: 8px !important;
}

/* Make the generated “Events from ” part match */
.tt1_graynote:before {
color: inherit !important;
}

/* Links inside the note */
.tt1_graynote a { color: #8ab4ff !important; }
.tt1_graynote a:visited { color: #c58af9 !important; }

/* Just in case something inside it is forcing a light background */
.tt1_graynote * {
background: transparent !important;
}
}

/* ===== Dark mode: fix article titles (h1.firstHeading) ===== */
@media (prefers-color-scheme: dark) {

/* Your skin uses class="firstHeading" (not always id="firstHeading") */
h1.firstHeading,
#firstHeading {
color: #e7edf6 !important;
background: transparent !important;
opacity: 1 !important;

/* the thin line under the title */
border-bottom: 1px solid rgba(255,255,255,0.18) !important;
}

/* If anything inside the H1 is being styled weirdly, inherit the fixed color */
h1.firstHeading * ,
#firstHeading * {
color: inherit !important;
background: transparent !important;
}

/* The faction icon container that sits inside the title */
#title-factionicons,
#title-factionicons * {
background: transparent !important;
}
}

/* ===== Dark mode: fix page titles + the light-cyan “Preview” notice box ===== */
@media (prefers-color-scheme: dark) {

/* --- Article/page titles --- */
h1.firstHeading,
#firstHeading {
color: #e6e6e6 !important;
border-bottom-color: rgba(255,255,255,0.18) !important;
}
/* if anything inside the h1 is forcing a weird color */
h1.firstHeading * {
color: inherit !important;
}

/* --- The “Please use the Preview button…” notice box (inline background-color:#efffff) --- */
#mw-content-text [style*="background-color:#efffff"],
#mw-content-text [style*="background-color: #efffff"] {
background-color: #12151c !important;
color: #e6e6e6 !important;
border-color: rgba(255,255,255,0.18) !important;
}

/* make sure text inside doesn’t stay dark */
#mw-content-text [style*="background-color:#efffff"] *,
#mw-content-text [style*="background-color: #efffff"] * {
color: #e6e6e6 !important;
}

/* links inside that box */
#mw-content-text [style*="background-color:#efffff"] a,
#mw-content-text [style*="background-color: #efffff"] a {
color: #8ab4ff !important;
}
#mw-content-text [style*="background-color:#efffff"] a:visited,
#mw-content-text [style*="background-color: #efffff"] a:visited {
color: #c58af9 !important;
}
}

/* ===== Dark mode: GLOBAL fix for inline light boxes (incl. #efffff Preview notice) ===== */
@media (prefers-color-scheme: dark) {

/* Page titles (global, just in case) */
h1.firstHeading,
#firstHeading {
color: #e6e6e6 !important;
border-bottom-color: rgba(255,255,255,0.18) !important;
}
h1.firstHeading * { color: inherit !important; }

/* Any inline “light box” backgrounds (global) */
[style*="background-color:#efffff"],
[style*="background-color: #efffff"],
[style*="background:#efffff"],
[style*="background: #efffff"],

[style*="background-color:#f7f8ff"],
[style*="background-color: #f7f8ff"],
[style*="background:#f7f8ff"],
[style*="background: #f7f8ff"],

[style*="background-color:#fff"],
[style*="background-color: #fff"],
[style*="background:#fff"],
[style*="background: #fff"],

[style*="background-color:#ffffff"],
[style*="background-color: #ffffff"],
[style*="background:#ffffff"],
[style*="background: #ffffff"] {
background-color: #12151c !important;
background: #12151c !important;
color: #e6e6e6 !important;
border-color: rgba(255,255,255,0.18) !important;
}

/* Ensure text inside those boxes doesn’t stay dark */
[style*="background-color:#efffff"] *,
[style*="background-color: #efffff"] *,
[style*="background:#efffff"] *,
[style*="background: #efffff"] *,

[style*="background-color:#f7f8ff"] *,
[style*="background-color: #f7f8ff"] *,
[style*="background:#f7f8ff"] *,
[style*="background: #f7f8ff"] *,

[style*="background-color:#fff"] *,
[style*="background-color: #fff"] *,
[style*="background:#fff"] *,
[style*="background: #fff"] *,

[style*="background-color:#ffffff"] *,
[style*="background-color: #ffffff"] *,
[style*="background:#ffffff"] *,
[style*="background: #ffffff"] * {
color: #e6e6e6 !important;
}

/* Links inside those boxes */
[style*="background-color:#efffff"] a,
[style*="background-color: #efffff"] a,
[style*="background:#efffff"] a,
[style*="background: #efffff"] a,

[style*="background-color:#f7f8ff"] a,
[style*="background-color: #f7f8ff"] a,
[style*="background:#f7f8ff"] a,
[style*="background: #f7f8ff"] a,

[style*="background-color:#fff"] a,
[style*="background-color: #fff"] a,
[style*="background:#fff"] a,
[style*="background: #fff"] a,

[style*="background-color:#ffffff"] a,
[style*="background-color: #ffffff"] a,
[style*="background:#ffffff"] a,
[style*="background: #ffffff"] a {
color: #8ab4ff !important;
}

[style*="background-color:#efffff"] a:visited,
[style*="background-color: #efffff"] a:visited,
[style*="background:#efffff"] a:visited,
[style*="background: #efffff"] a:visited,

[style*="background-color:#f7f8ff"] a:visited,
[style*="background-color: #f7f8ff"] a:visited,
[style*="background:#f7f8ff"] a:visited,
[style*="background: #f7f8ff"] a:visited,

[style*="background-color:#fff"] a:visited,
[style*="background-color: #fff"] a:visited,
[style*="background:#fff"] a:visited,
[style*="background: #fff"] a:visited,

[style*="background-color:#ffffff"] a:visited,
[style*="background-color: #ffffff"] a:visited,
[style*="background:#ffffff"] a:visited,
[style*="background: #ffffff"] a:visited {
color: #c58af9 !important;
}
}

/* ===== Dark mode: GLOBAL fix for the “noprint” notice box (Preview warning etc.) ===== */
@media (prefers-color-scheme: dark) {

/* The wrapper table used for that notice */
table.noprint,
table.noprint tbody,
table.noprint tr,
table.noprint td,
table.noprint center {
background: transparent !important;
}

/* The actual box (the inner div with the inline light background) */
table.noprint td > div {
background: #12151c !important;
color: #e6e6e6 !important;
border: 1px solid rgba(255,255,255,0.18) !important;
}

/* Make sure text inside doesn’t stay “dark-mode light on light” */
table.noprint td > div,
table.noprint td > div p,
table.noprint td > div span,
table.noprint td > div i,
table.noprint td > div b,
table.noprint td > div em,
table.noprint td > div strong {
color: #e6e6e6 !important;
}

/* Divider line in the box */
table.noprint td > div hr {
border-color: rgba(255,255,255,0.18) !important;
}

/* Links inside the box */
table.noprint td > div a { color: #8ab4ff !important; }
table.noprint td > div a:visited { color: #c58af9 !important; }
}

User:CannonProductions/monacobookbeta.css

2026-01-02T04:18:34Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2026-01-02T04:16:55Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2026-01-02T04:10:44Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2026-01-02T04:07:42Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2026-01-02T04:01:33Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2026-01-02T03:56:47Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2026-01-02T03:53:48Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2026-01-02T03:51:15Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2026-01-02T03:46:49Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2025-12-30T14:31:55Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2025-12-30T14:19:07Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2025-12-30T14:13:46Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2025-12-30T14:11:03Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2025-12-30T14:07:59Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2025-12-30T14:06:03Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2025-12-30T14:02:16Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2025-12-30T14:01:45Z

CannonProductions: Undo revision 1882076 by CannonProductions (talk)

User:CannonProductions/monacobookbeta.css

2025-12-30T14:01:14Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2025-12-30T13:55:38Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2025-12-30T13:52:06Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2025-12-30T13:51:35Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2025-12-30T13:48:47Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2025-12-30T13:46:43Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2025-12-30T13:37:07Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2025-12-30T13:17:37Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2025-12-30T13:16:35Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2025-12-30T13:15:55Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2025-12-30T13:15:26Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2025-12-30T13:14:32Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2025-12-30T13:14:02Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2025-12-30T13:11:53Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2025-12-30T13:09:56Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2025-12-30T13:08:29Z

CannonProductions:

User:CannonProductions/monacobookbeta.js

2025-12-30T13:07:20Z

CannonProductions:

/* User:CannonProductions/monacobookbeta.js
- Scales #top-ad iframe banner to fit available width on mobile
- Locks background scroll when #column-one is open on mobile
- Adds html.tf-nav-open while the sidebar is open
- Aggressively removes the redundant mobile logo image block (p-m-logo / mobilelogo.jpg)
*/

(function () {
"use strict";

// === SETTINGS ===
var DEBUG_BADGE = false;
var MOBILE_MAX_WIDTH = 720;

// Banner creative’s native size
var BASE_W = 468;
var BASE_H = 60;

// Banner scale limits
var MIN_SCALE = 0.55;
var MAX_SCALE = 1.0;

function onReady(fn) {
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", fn);
} else {
fn();
}
}

function addBadge() {
if (!DEBUG_BADGE) return;
if (!document.body) return;
if (document.getElementById("js-test-badge")) return;

var d = document.createElement("div");
d.id = "js-test-badge";
d.textContent = "User JS RUNNING";
d.style.cssText =
"position:fixed;top:0;left:0;z-index:999999;" +
"padding:6px 10px;background:#e11;color:#fff;" +
"font:12px sans-serif";
document.body.prepend(d);
}

function isMobileWidth() {
return window.matchMedia("(max-width: " + MOBILE_MAX_WIDTH + "px)").matches;
}

// ===== Kill redundant mobile logo as hard as possible =====
function nukeMobileLogo() {
try {
// 1) Remove the whole portlet if present
var p = document.getElementById("p-m-logo");
if (p && p.parentNode) p.parentNode.removeChild(p);

// 2) If it gets reinserted or appears elsewhere, kill any image that looks like it
var imgs = document.querySelectorAll('img[src*="mobilelogo"]');
for (var i = 0; i < imgs.length; i++) {
// try to stop load ASAP
imgs[i].src = "";
// remove a wrapper link if it exists, otherwise just remove img
var wrap = imgs[i].closest ? imgs[i].closest("#p-m-logo, a, div") : null;
if (wrap && wrap.parentNode) wrap.parentNode.removeChild(wrap);
else if (imgs[i].parentNode) imgs[i].parentNode.removeChild(imgs[i]);
}
} catch (e) {
// swallow — we don't want a single hiccup to break everything else
}
}

// Run it as early as we can
nukeMobileLogo();
document.addEventListener("readystatechange", function () {
if (document.readyState === "interactive" || document.readyState === "complete") {
nukeMobileLogo();
}
});

// ===== Banner scaling =====
function resetBannerStyles(ad, iframe) {
if (ad) {
ad.style.height = "";
ad.style.overflow = "";
ad.style.width = "";
}
if (iframe) {
iframe.style.transform = "";
iframe.style.transformOrigin = "";
iframe.style.width = "";
iframe.style.height = "";
iframe.style.border = "";
iframe.style.display = "";
}
}

function rescaleBanner() {
var ad = document.getElementById("top-ad");
if (!ad) return;

var iframe = ad.querySelector("iframe");
if (!iframe) return;

if (!isMobileWidth()) {
resetBannerStyles(ad, iframe);
return;
}

iframe.style.width = BASE_W + "px";
iframe.style.height = BASE_H + "px";
iframe.style.border = "0";
iframe.style.display = "block";
iframe.style.transformOrigin = "top left";

var available = ad.getBoundingClientRect().width || window.innerWidth;

var scale = available / BASE_W;
if (scale > MAX_SCALE) scale = MAX_SCALE;
if (scale < MIN_SCALE) scale = MIN_SCALE;

iframe.style.transform = "scale(" + scale.toFixed(4) + ")";

ad.style.width = "100%";
ad.style.overflow = "hidden";
ad.style.height = (BASE_H * scale) + "px";
}

// ===== Nav open detection =====
function isNavOpen() {
var nav = document.getElementById("column-one");
if (!nav) return false;

var cs = window.getComputedStyle(nav);
if (!cs) return false;
if (cs.display === "none") return false;

var r = nav.getBoundingClientRect();
if (r.width < 20 || r.height < 20) return false;

// must intersect viewport
if (r.right <= 0 || r.bottom <= 0) return false;
if (r.left >= window.innerWidth || r.top >= window.innerHeight) return false;

return true;
}

// ===== Nav scroll locking + html class =====
function setScrollLocked(locked) {
if (locked) {
document.documentElement.style.overflow = "hidden";
document.body.style.overflow = "hidden";
document.body.setAttribute("data-nav-locked", "1");
} else {
if (document.body.getAttribute("data-nav-locked") === "1") {
document.documentElement.style.overflow = "";
document.body.style.overflow = "";
document.body.removeAttribute("data-nav-locked");
}
}
}

function updateNavLockAndClass() {
if (!isMobileWidth()) {
setScrollLocked(false);
document.documentElement.classList.remove("tf-nav-open");
return;
}

var open = isNavOpen();
setScrollLocked(open);

if (open) document.documentElement.classList.add("tf-nav-open");
else document.documentElement.classList.remove("tf-nav-open");
}

// ===== Plumbing =====
var t = null;
function scheduleAll() {
if (t) clearTimeout(t);
t = setTimeout(function () {
nukeMobileLogo();
rescaleBanner();
updateNavLockAndClass();
}, 60);
}

function installObservers() {
nukeMobileLogo();
rescaleBanner();
updateNavLockAndClass();

window.addEventListener("resize", scheduleAll);
window.addEventListener("orientationchange", scheduleAll);

if (window.mw && mw.hook) {
mw.hook("wikipage.content").add(function () {
scheduleAll();
});
}

// If the skin re-inserts the logo, kill it again
var obs = new MutationObserver(function () {
scheduleAll();
});
obs.observe(document.documentElement, { childList: true, subtree: true, attributes: true });

document.addEventListener("click", function () {
setTimeout(updateNavLockAndClass, 0);
});
}

onReady(function () {
addBadge();
installObservers();
});
})();

User:CannonProductions/monacobookbeta.css

2025-12-30T13:02:41Z

CannonProductions:

User:CannonProductions/monacobookbeta.js

2025-12-30T13:02:05Z

CannonProductions:

/* User:CannonProductions/monacobookbeta.js
- Dynamically scales #top-ad iframe banner to fit available width on mobile
- Locks background scroll when the sidebar (#column-one) is open on mobile
- Adds html.tf-nav-open while the sidebar is open (for CSS styling)
- Removes the redundant mobile logo portlet (#p-m-logo) so it doesn’t waste space
*/

(function () {
"use strict";

// === SETTINGS ===
var DEBUG_BADGE = false;
var MOBILE_MAX_WIDTH = 720;

// Banner creative’s native size
var BASE_W = 468;
var BASE_H = 60;

// Banner scale limits
var MIN_SCALE = 0.55;
var MAX_SCALE = 1.0;

function onReady(fn) {
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", fn);
} else {
fn();
}
}

function addBadge() {
if (!DEBUG_BADGE) return;
if (!document.body) return;
if (document.getElementById("js-test-badge")) return;

var d = document.createElement("div");
d.id = "js-test-badge";
d.textContent = "User JS RUNNING";
d.style.cssText =
"position:fixed;top:0;left:0;z-index:999999;" +
"padding:6px 10px;background:#e11;color:#fff;" +
"font:12px sans-serif";
document.body.prepend(d);
}

function isMobileWidth() {
return window.matchMedia("(max-width: " + MOBILE_MAX_WIDTH + "px)").matches;
}

// ===== Remove the redundant mobile logo portlet =====
function removeMobileLogoPortlet() {
var p = document.getElementById("p-m-logo");
if (p && p.parentNode) p.parentNode.removeChild(p);
}

// ===== Banner scaling =====
function resetBannerStyles(ad, iframe) {
if (ad) {
ad.style.height = "";
ad.style.overflow = "";
ad.style.width = "";
}
if (iframe) {
iframe.style.transform = "";
iframe.style.transformOrigin = "";
iframe.style.width = "";
iframe.style.height = "";
iframe.style.border = "";
iframe.style.display = "";
}
}

function rescaleBanner() {
var ad = document.getElementById("top-ad");
if (!ad) return;

var iframe = ad.querySelector("iframe");
if (!iframe) return;

if (!isMobileWidth()) {
resetBannerStyles(ad, iframe);
return;
}

iframe.style.width = BASE_W + "px";
iframe.style.height = BASE_H + "px";
iframe.style.border = "0";
iframe.style.display = "block";
iframe.style.transformOrigin = "top left";

var available = ad.getBoundingClientRect().width || window.innerWidth;

var scale = available / BASE_W;
if (scale > MAX_SCALE) scale = MAX_SCALE;
if (scale < MIN_SCALE) scale = MIN_SCALE;

iframe.style.transform = "scale(" + scale.toFixed(4) + ")";

ad.style.width = "100%";
ad.style.overflow = "hidden";
ad.style.height = (BASE_H * scale) + "px";
}

// ===== Nav open detection (more reliable) =====
function isNavOpen() {
var nav = document.getElementById("column-one");
if (!nav) return false;

var cs = window.getComputedStyle(nav);
if (!cs) return false;

// Some skins don’t toggle visibility, just move/resize it.
if (cs.display === "none") return false;

var r = nav.getBoundingClientRect();

// Must have real size
if (r.width < 20 || r.height < 20) return false;

// Must intersect the viewport (prevents “off-canvas but present” false positives)
if (r.right <= 0 || r.bottom <= 0) return false;
if (r.left >= window.innerWidth || r.top >= window.innerHeight) return false;

return true;
}

// ===== Nav scroll locking + html class =====
function setScrollLocked(locked) {
if (locked) {
document.documentElement.style.overflow = "hidden";
document.body.style.overflow = "hidden";
document.body.setAttribute("data-nav-locked", "1");
} else {
if (document.body.getAttribute("data-nav-locked") === "1") {
document.documentElement.style.overflow = "";
document.body.style.overflow = "";
document.body.removeAttribute("data-nav-locked");
}
}
}

function updateNavLockAndClass() {
if (!isMobileWidth()) {
setScrollLocked(false);
document.documentElement.classList.remove("tf-nav-open");
return;
}

var open = isNavOpen();
setScrollLocked(open);

if (open) {
document.documentElement.classList.add("tf-nav-open");
} else {
document.documentElement.classList.remove("tf-nav-open");
}
}

// ===== Plumbing =====
var t = null;
function scheduleAll() {
if (t) clearTimeout(t);
t = setTimeout(function () {
removeMobileLogoPortlet();
rescaleBanner();
updateNavLockAndClass();
}, 60);
}

function installObservers() {
removeMobileLogoPortlet();
rescaleBanner();
updateNavLockAndClass();

window.addEventListener("resize", scheduleAll);
window.addEventListener("orientationchange", scheduleAll);

if (window.mw && mw.hook) {
mw.hook("wikipage.content").add(function () {
scheduleAll();
});
}

var obs = new MutationObserver(function () {
scheduleAll();
});
obs.observe(document.documentElement, { childList: true, subtree: true, attributes: true });

document.addEventListener("click", function () {
setTimeout(updateNavLockAndClass, 0);
});
}

onReady(function () {
addBadge();
installObservers();
});
})();

User:CannonProductions/monacobookbeta.js

2025-12-30T13:01:42Z

CannonProductions:

User:CannonProductions/monacobookbeta.js

2025-12-30T12:58:36Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2025-12-30T12:58:16Z

CannonProductions:

/* User:CannonProductions/monacobookbeta.js
- Dynamically scales #top-ad iframe banner to fit available width on mobile
- Locks background scroll when the sidebar (#column-one) is open on mobile
- Adds html.tf-nav-open while the sidebar is open (for CSS styling)
- Removes the redundant mobile logo portlet (#p-m-logo) so it doesn’t waste space
*/

(function () {
"use strict";

// === SETTINGS ===
var DEBUG_BADGE = false;
var MOBILE_MAX_WIDTH = 720;

// Banner creative’s native size
var BASE_W = 468;
var BASE_H = 60;

// Banner scale limits
var MIN_SCALE = 0.55;
var MAX_SCALE = 1.0;

function onReady(fn) {
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", fn);
} else {
fn();
}
}

function addBadge() {
if (!DEBUG_BADGE) return;
if (!document.body) return;
if (document.getElementById("js-test-badge")) return;

var d = document.createElement("div");
d.id = "js-test-badge";
d.textContent = "User JS RUNNING";
d.style.cssText =
"position:fixed;top:0;left:0;z-index:999999;" +
"padding:6px 10px;background:#e11;color:#fff;" +
"font:12px sans-serif";
document.body.prepend(d);
}

function isMobileWidth() {
return window.matchMedia("(max-width: " + MOBILE_MAX_WIDTH + "px)").matches;
}

// ===== Remove the redundant mobile logo portlet =====
function removeMobileLogoPortlet() {
var p = document.getElementById("p-m-logo");
if (p && p.parentNode) p.parentNode.removeChild(p);
}

// ===== Banner scaling =====
function resetBannerStyles(ad, iframe) {
if (ad) {
ad.style.height = "";
ad.style.overflow = "";
ad.style.width = "";
}
if (iframe) {
iframe.style.transform = "";
iframe.style.transformOrigin = "";
iframe.style.width = "";
iframe.style.height = "";
iframe.style.border = "";
iframe.style.display = "";
}
}

function rescaleBanner() {
var ad = document.getElementById("top-ad");
if (!ad) return;

var iframe = ad.querySelector("iframe");
if (!iframe) return;

if (!isMobileWidth()) {
resetBannerStyles(ad, iframe);
return;
}

iframe.style.width = BASE_W + "px";
iframe.style.height = BASE_H + "px";
iframe.style.border = "0";
iframe.style.display = "block";
iframe.style.transformOrigin = "top left";

var available = ad.getBoundingClientRect().width || window.innerWidth;

var scale = available / BASE_W;
if (scale > MAX_SCALE) scale = MAX_SCALE;
if (scale < MIN_SCALE) scale = MIN_SCALE;

iframe.style.transform = "scale(" + scale.toFixed(4) + ")";

ad.style.width = "100%";
ad.style.overflow = "hidden";
ad.style.height = (BASE_H * scale) + "px";
}

// ===== Nav open detection =====
function isNavOpen() {
var nav = document.getElementById("column-one");
if (!nav) return false;

var cs = window.getComputedStyle(nav);
if (!cs || cs.display === "none" || cs.visibility === "hidden") return false;

var r = nav.getBoundingClientRect();
return r.width > 40 && r.height > 40;
}

// ===== Nav scroll locking + html class =====
function setScrollLocked(locked) {
if (locked) {
document.documentElement.style.overflow = "hidden";
document.body.style.overflow = "hidden";
document.body.setAttribute("data-nav-locked", "1");
} else {
if (document.body.getAttribute("data-nav-locked") === "1") {
document.documentElement.style.overflow = "";
document.body.style.overflow = "";
document.body.removeAttribute("data-nav-locked");
}
}
}

function updateNavLockAndClass() {
if (!isMobileWidth()) {
setScrollLocked(false);
document.documentElement.classList.remove("tf-nav-open");
return;
}

var open = isNavOpen();
setScrollLocked(open);

if (open) {
document.documentElement.classList.add("tf-nav-open");
} else {
document.documentElement.classList.remove("tf-nav-open");
}
}

// ===== Plumbing =====
var t = null;
function scheduleAll() {
if (t) clearTimeout(t);
t = setTimeout(function () {
removeMobileLogoPortlet();
rescaleBanner();
updateNavLockAndClass();
}, 60);
}

function installObservers() {
// Do ASAP
removeMobileLogoPortlet();

// Run once now
rescaleBanner();
updateNavLockAndClass();

// Re-run on resize/rotate
window.addEventListener("resize", scheduleAll);
window.addEventListener("orientationchange", scheduleAll);

// MediaWiki dynamic content hook
if (window.mw && mw.hook) {
mw.hook("wikipage.content").add(function () {
scheduleAll();
});
}

// Watch for DOM changes
var obs = new MutationObserver(function () {
scheduleAll();
});
obs.observe(document.documentElement, { childList: true, subtree: true, attributes: true });

// Click safety
document.addEventListener("click", function () {
setTimeout(updateNavLockAndClass, 0);
});
}

onReady(function () {
addBadge();
installObservers();
});
})();

User:CannonProductions/monacobookbeta.css

2025-12-30T12:46:33Z

CannonProductions:

/* ===== TFWiki Mobile (MonacoBookBeta-ish) — clean + conflict-proof ===== */
@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;
}

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

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

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

/* keep top bar clickable */
#sitemenutop,
#usermenutop,
#mobileusermenu {
position: relative !important;
z-index: 1000000 !important;
}

/* keep banner ad low by default */
#top-ad,
#top-ad iframe {
position: relative !important;
z-index: 1 !important;
}

/* =========================================================
FULL-SCREEN NAV: ONLY when html.tf-nav-open is present
========================================================= */

html.tf-nav-open #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 the sidebar contents to match the full width */
html.tf-nav-open #column-one .portlet,
html.tf-nav-open #column-one .pBody,
html.tf-nav-open #column-one ul,
html.tf-nav-open #column-one form,
html.tf-nav-open #column-one fieldset {
width: 100% !important;
max-width: none !important;
box-sizing: border-box !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
}

/* Full-width menu lists + big tap targets */
html.tf-nav-open #column-one ul {
list-style: none !important;
}
html.tf-nav-open #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;
}

/* Hide the redundant big logo image above NAVIGATION */
html.tf-nav-open #column-one #p-m-logo {
display: none !important;
}

/* (Optional) If another logo block shows up, hide it too */
html.tf-nav-open #column-one #p-logo {
display: none !important;
}

/* Hide the banner ad while nav is open */
html.tf-nav-open #top-ad {
display: none !important;
}
}

User:CannonProductions/monacobookbeta.css

2025-12-30T12:43:22Z

CannonProductions:

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

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

/* Banner: keep scaling, and prevent it from forcing width */
#top-ad {
width: 100% !important;
overflow: hidden !important;
}
#top-ad iframe {
transform: scale(0.77);
transform-origin: top left;
}

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

/* Stop sideways scroll in the ARTICLE area (not the whole page) */
#mw-content-text,
.mw-parser-output {
overflow-x: hidden !important;
}

/* breathing room for article text */
#content, #bodyContent {
padding-left: 10px !important;
padding-right: 10px !important;
}

/* keep "more" / action menus able to overflow */
#p-cactions,
#p-cactions .pBody,
#column-content,
#globalWrapper {
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 (table scrolls, page doesn't) */
#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;
}

/* --- Navigation panel: DO NOT override its positioning --- */
/* Just ensure it can sit above other stuff when it opens */
#column-one {
z-index: 999999 !important;
}

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

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

User:CannonProductions/monacobookbeta.css

2025-12-30T12:40:45Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2025-12-30T12:37:37Z

CannonProductions:

User:CannonProductions/monacobookbeta.css

2025-12-30T12:29:20Z

CannonProductions:

/* ===== 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 (THIS is the important part for your new screenshots) --- */

/* Keep #p-personal neutral: positioned but NO z-index => no stacking context */
#p-personal {
position: relative !important;
z-index: auto !important;
}

/* Put ONLY the top bar bits above the sidebar (so hamburger stays clickable) */
#sitemenutop,
#usermenutop,
#mobileusermenu {
position: relative !important;
z-index: 1000000 !important;
}

/* Keep the ad BELOW the sidebar */
#top-ad {
position: relative !important;
z-index: 1 !important; /* far below sidebar's 999999 */
}
#top-ad iframe {
position: relative !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) */
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;
}

/* This targets that Main Page intro box (the white text panel you see above the menu) */
html.tf-nav-open #content,
html.tf-nav-open #bodyContent {
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;
}
}

User:CannonProductions/monacobookbeta.css

2025-12-30T12:28:05Z

CannonProductions:

User:CannonProductions/monacobookbeta.js

2025-12-30T12:25:40Z

CannonProductions:

/* User:CannonProductions/monacobookbeta.js
- Dynamically scales #top-ad iframe banner to fit available width on mobile
- Locks background scroll when the sidebar (#column-one) is open on mobile
- Adds html.tf-nav-open while the sidebar is open (for CSS styling)
*/

(function () {
"use strict";

// === SETTINGS ===
var DEBUG_BADGE = false; // keep false (you already confirmed it runs)
var MOBILE_MAX_WIDTH = 720; // rules apply on screens <= this width

// Banner creative’s native size
var BASE_W = 468;
var BASE_H = 60;

// Banner scale limits
var MIN_SCALE = 0.55;
var MAX_SCALE = 1.0;

function onReady(fn) {
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", fn);
} else {
fn();
}
}

function addBadge() {
if (!DEBUG_BADGE) return;
if (!document.body) return;
if (document.getElementById("js-test-badge")) return;

var d = document.createElement("div");
d.id = "js-test-badge";
d.textContent = "User JS RUNNING";
d.style.cssText =
"position:fixed;top:0;left:0;z-index:999999;" +
"padding:6px 10px;background:#e11;color:#fff;" +
"font:12px sans-serif";
document.body.prepend(d);
}

function isMobileWidth() {
return window.matchMedia("(max-width: " + MOBILE_MAX_WIDTH + "px)").matches;
}

// ===== Banner scaling =====
function resetBannerStyles(ad, iframe) {
if (ad) {
ad.style.height = "";
ad.style.overflow = "";
ad.style.width = "";
}
if (iframe) {
iframe.style.transform = "";
iframe.style.transformOrigin = "";
iframe.style.width = "";
iframe.style.height = "";
iframe.style.border = "";
iframe.style.display = "";
}
}

function rescaleBanner() {
var ad = document.getElementById("top-ad");
if (!ad) return;

var iframe = ad.querySelector("iframe");
if (!iframe) return;

if (!isMobileWidth()) {
resetBannerStyles(ad, iframe);
return;
}

iframe.style.width = BASE_W + "px";
iframe.style.height = BASE_H + "px";
iframe.style.border = "0";
iframe.style.display = "block";
iframe.style.transformOrigin = "top left";

var available = ad.getBoundingClientRect().width || window.innerWidth;

var scale = available / BASE_W;
if (scale > MAX_SCALE) scale = MAX_SCALE;
if (scale < MIN_SCALE) scale = MIN_SCALE;

iframe.style.transform = "scale(" + scale.toFixed(4) + ")";

ad.style.width = "100%";
ad.style.overflow = "hidden";
ad.style.height = (BASE_H * scale) + "px";
}

// ===== Nav open detection =====
function isNavOpen() {
var nav = document.getElementById("column-one");
if (!nav) return false;

var cs = window.getComputedStyle(nav);
if (!cs || cs.display === "none" || cs.visibility === "hidden") return false;

var r = nav.getBoundingClientRect();
// If it has some real onscreen area, treat it as open
return r.width > 40 && r.height > 40;
}

// ===== Nav scroll locking =====
function setScrollLocked(locked) {
// Use a data flag so we don’t fight other styles
if (locked) {
document.documentElement.style.overflow = "hidden";
document.body.style.overflow = "hidden";
document.body.setAttribute("data-nav-locked", "1");
} else {
if (document.body.getAttribute("data-nav-locked") === "1") {
document.documentElement.style.overflow = "";
document.body.style.overflow = "";
document.body.removeAttribute("data-nav-locked");
}
}
}

function updateNavLockAndClass() {
if (!isMobileWidth()) {
// clean up when leaving mobile width
setScrollLocked(false);
document.documentElement.classList.remove("tf-nav-open");
return;
}

var open = isNavOpen();
setScrollLocked(open);

if (open) {
document.documentElement.classList.add("tf-nav-open");
} else {
document.documentElement.classList.remove("tf-nav-open");
}
}

// ===== Plumbing =====
var t = null;
function scheduleAll() {
if (t) clearTimeout(t);
t = setTimeout(function () {
rescaleBanner();
updateNavLockAndClass();
}, 60);
}

function installObservers() {
// Run once now
rescaleBanner();
updateNavLockAndClass();

// Re-run on resize/rotate
window.addEventListener("resize", scheduleAll);
window.addEventListener("orientationchange", scheduleAll);

// MediaWiki dynamic content hook
if (window.mw && mw.hook) {
mw.hook("wikipage.content").add(function () {
scheduleAll();
});
}

// Watch for DOM changes (menu open/close often changes styles/DOM)
var obs = new MutationObserver(function () {
scheduleAll();
});
obs.observe(document.documentElement, { childList: true, subtree: true, attributes: true });

// Extra safety: click anywhere updates lock + class (covers purely-CSS toggles)
document.addEventListener("click", function () {
setTimeout(updateNavLockAndClass, 0);
});
}

onReady(function () {
addBadge();
installObservers();
});
})();

User:CannonProductions/monacobookbeta.css

2025-12-30T12:19:35Z

CannonProductions:

User:CannonProductions/monacobookbeta.js

2025-12-30T12:18:50Z

CannonProductions: Undo revision 1882027 by CannonProductions (talk)

/* User:CannonProductions/monacobookbeta.js
- Dynamically scales #top-ad iframe banner to fit available width on mobile
- Locks background scroll when the sidebar (#column-one) is open on mobile
*/

(function () {
"use strict";

// === SETTINGS ===
var DEBUG_BADGE = false; // keep false (you already confirmed it runs)
var MOBILE_MAX_WIDTH = 720; // rules apply on screens <= this width

// Banner creative’s native size
var BASE_W = 468;
var BASE_H = 60;

// Banner scale limits
var MIN_SCALE = 0.55;
var MAX_SCALE = 1.0;

function onReady(fn) {
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", fn);
} else {
fn();
}
}

function addBadge() {
if (!DEBUG_BADGE) return;
if (!document.body) return;
if (document.getElementById("js-test-badge")) return;

var d = document.createElement("div");
d.id = "js-test-badge";
d.textContent = "User JS RUNNING";
d.style.cssText =
"position:fixed;top:0;left:0;z-index:999999;" +
"padding:6px 10px;background:#e11;color:#fff;" +
"font:12px sans-serif";
document.body.prepend(d);
}

function isMobileWidth() {
return window.matchMedia("(max-width: " + MOBILE_MAX_WIDTH + "px)").matches;
}

// ===== Banner scaling =====
function resetBannerStyles(ad, iframe) {
if (ad) {
ad.style.height = "";
ad.style.overflow = "";
ad.style.width = "";
}
if (iframe) {
iframe.style.transform = "";
iframe.style.transformOrigin = "";
iframe.style.width = "";
iframe.style.height = "";
iframe.style.border = "";
iframe.style.display = "";
}
}

function rescaleBanner() {
var ad = document.getElementById("top-ad");
if (!ad) return;

var iframe = ad.querySelector("iframe");
if (!iframe) return;

if (!isMobileWidth()) {
resetBannerStyles(ad, iframe);
return;
}

iframe.style.width = BASE_W + "px";
iframe.style.height = BASE_H + "px";
iframe.style.border = "0";
iframe.style.display = "block";
iframe.style.transformOrigin = "top left";

var available = ad.getBoundingClientRect().width || window.innerWidth;

var scale = available / BASE_W;
if (scale > MAX_SCALE) scale = MAX_SCALE;
if (scale < MIN_SCALE) scale = MIN_SCALE;

iframe.style.transform = "scale(" + scale.toFixed(4) + ")";

ad.style.width = "100%";
ad.style.overflow = "hidden";
ad.style.height = (BASE_H * scale) + "px";
}

// ===== Nav scroll locking =====
// MonacoBookBeta toggles #column-one visibility; when it’s visible on mobile, stop the page behind from scrolling.
function setScrollLocked(locked) {
// Use a data flag so we don’t fight other styles
if (locked) {
document.documentElement.style.overflow = "hidden";
document.body.style.overflow = "hidden";
document.body.setAttribute("data-nav-locked", "1");
} else {
if (document.body.getAttribute("data-nav-locked") === "1") {
document.documentElement.style.overflow = "";
document.body.style.overflow = "";
document.body.removeAttribute("data-nav-locked");
}
}
}

function isNavOpen() {
var nav = document.getElementById("column-one");
if (!nav) return false;

var cs = window.getComputedStyle(nav);
if (!cs || cs.display === "none" || cs.visibility === "hidden") return false;

var r = nav.getBoundingClientRect();
// If it has some real onscreen area, treat it as open
return r.width > 40 && r.height > 40;
}

function updateNavLock() {
if (!isMobileWidth()) {
setScrollLocked(false);
return;
}
setScrollLocked(isNavOpen());
}

// ===== Plumbing =====
var t = null;
function scheduleAll() {
if (t) clearTimeout(t);
t = setTimeout(function () {
rescaleBanner();
updateNavLock();
}, 60);
}

function installObservers() {
// Run once now
rescaleBanner();
updateNavLock();

// Re-run on resize/rotate
window.addEventListener("resize", scheduleAll);
window.addEventListener("orientationchange", scheduleAll);

// MediaWiki dynamic content hook
if (window.mw && mw.hook) {
mw.hook("wikipage.content").add(function () {
scheduleAll();
});
}

// Watch for DOM changes (menu open/close often changes styles/DOM)
var obs = new MutationObserver(function () {
scheduleAll();
});
obs.observe(document.documentElement, { childList: true, subtree: true, attributes: true });

// Extra safety: click anywhere updates lock (covers purely-CSS toggles)
document.addEventListener("click", function () {
setTimeout(updateNavLock, 0);
});
}

onReady(function () {
addBadge();
installObservers();
});
})();

User:CannonProductions/monacobookbeta.js

2025-12-30T12:17:59Z

CannonProductions:

/* User:CannonProductions/monacobookbeta.js
- Dynamically scales #top-ad iframe banner to fit available width on mobile
- Adds/removes html.tf-nav-open when the sidebar (#column-one) is open
*/

(function () {
"use strict";

// === SETTINGS ===
var MOBILE_MAX_WIDTH = 720;

// Banner creative’s native size
var BASE_W = 468;
var BASE_H = 60;

// Banner scale limits
var MIN_SCALE = 0.55;
var MAX_SCALE = 1.0;

function onReady(fn) {
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", fn);
} else {
fn();
}
}

function isMobileWidth() {
return window.matchMedia("(max-width: " + MOBILE_MAX_WIDTH + "px)").matches;
}

// ===== Banner scaling =====
function resetBannerStyles(ad, iframe) {
if (ad) {
ad.style.height = "";
ad.style.overflow = "";
ad.style.width = "";
}
if (iframe) {
iframe.style.transform = "";
iframe.style.transformOrigin = "";
iframe.style.width = "";
iframe.style.height = "";
iframe.style.border = "";
iframe.style.display = "";
}
}

function rescaleBanner() {
var ad = document.getElementById("top-ad");
if (!ad) return;

var iframe = ad.querySelector("iframe");
if (!iframe) return;

if (!isMobileWidth()) {
resetBannerStyles(ad, iframe);
return;
}

iframe.style.width = BASE_W + "px";
iframe.style.height = BASE_H + "px";
iframe.style.border = "0";
iframe.style.display = "block";
iframe.style.transformOrigin = "top left";

var available = ad.getBoundingClientRect().width || window.innerWidth;

var scale = available / BASE_W;
if (scale > MAX_SCALE) scale = MAX_SCALE;
if (scale < MIN_SCALE) scale = MIN_SCALE;

iframe.style.transform = "scale(" + scale.toFixed(4) + ")";

ad.style.width = "100%";
ad.style.overflow = "hidden";
ad.style.height = (BASE_H * scale) + "px";
}

// ===== Nav open/closed detection =====
function isNavOpen() {
var nav = document.getElementById("column-one");
if (!nav) return false;

var cs = window.getComputedStyle(nav);
if (!cs || cs.display === "none" || cs.visibility === "hidden") return false;

var r = nav.getBoundingClientRect();
return r.width > 40 && r.height > 40;
}

function updateNavClass() {
// Only care on mobile
if (!isMobileWidth()) {
document.documentElement.classList.remove("tf-nav-open");
return;
}

if (isNavOpen()) {
document.documentElement.classList.add("tf-nav-open");
} else {
document.documentElement.classList.remove("tf-nav-open");
}
}

// ===== Plumbing =====
var t = null;
function scheduleAll() {
if (t) clearTimeout(t);
t = setTimeout(function () {
rescaleBanner();
updateNavClass();
}, 60);
}

function installObservers() {
// Run once now
rescaleBanner();
updateNavClass();

window.addEventListener("resize", scheduleAll);
window.addEventListener("orientationchange", scheduleAll);

if (window.mw && mw.hook) {
mw.hook("wikipage.content").add(function () {
scheduleAll();
});
}

// Watch for DOM + style changes (menu open/close)
var obs = new MutationObserver(function () {
scheduleAll();
});
obs.observe(document.documentElement, {
childList: true,
subtree: true,
attributes: true
});

// Extra safety: tapping hamburger triggers class update
document.addEventListener("click", function () {
setTimeout(updateNavClass, 0);
});
}

onReady(function () {
installObservers();
});
})();