User:CannonProductions/monacobookbeta.css
From MediaWiki
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: 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 framed thumbnail box */
.thumbinner {
background: #12151c !important;
border: 1px solid rgba(255,255,255,0.18) !important;
}
/* 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;
}
}
