User:CannonProductions/monacobookbeta.css

From MediaWiki
Jump to navigationJump to search

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