User:StaticoAlt/common.css

@import "https://en.wikipedia.org/w/index.php?title=MediaWiki:Gadget-dark-mode.css&action=raw&ctype=text/css";

/* ============================================================
 * NetHackWiki dark-mode template fixes — v1.0
 * Append to the existing MediaWiki:Common.css.
 *
 * Why: Vector 2022 night mode only restyles its own chrome
 * (header/sidebar/page bg). It does not override hardcoded
 * background colors in NetHackWiki templates (.upcoming,
 * .nhencyclopedia, etc) or in core wikitable/prettytable rules.
 * Result: in dark mode those become light-bg + light-text,
 * unreadable. These rules add dark-mode variants for each
 * problem class.
 *
 * Pattern: `:where(html.skin-theme-clientpref-night)` matches
 * when the user has explicitly chosen Night mode. The media
 * query handles the case where the user picked "Auto" and
 * their OS prefers dark. `:where()` keeps specificity at 0,
 * so editors can still override per-instance.
 * ============================================================ */

/* ---------- Always-night (user chose Night manually) ---------- */
:where(html.skin-theme-clientpref-night) table.wikitable,
:where(html.skin-theme-clientpref-night) table.prettytable {
  background: #1f1f1f;
  border-color: #444;
  color: #eaecf0;
}
:where(html.skin-theme-clientpref-night) table.wikitable th,
:where(html.skin-theme-clientpref-night) table.prettytable th {
  background: #161616;
  color: #f0f0f0;
  border-color: #444;
}
:where(html.skin-theme-clientpref-night) table.wikitable td,
:where(html.skin-theme-clientpref-night) table.prettytable td {
  border-color: #444;
}

:where(html.skin-theme-clientpref-night) .upcoming {
  background: #6b3a1c;
  color: #f6e7d8;
  border-color: #8a4f29;
}
:where(html.skin-theme-clientpref-night) .upcoming a,
:where(html.skin-theme-clientpref-night) .upcoming a:visited {
  color: #ffd699;
}

:where(html.skin-theme-clientpref-night) .nhencyclopedia {
  background: #50503a;
  color: #f0f0e0;
  border-color: #6e6e4e;
}

:where(html.skin-theme-clientpref-night) .nhguidebook {
  background: #3a2e2e;
  color: #f0e8e8;
  border-color: #5a4444;
}

:where(html.skin-theme-clientpref-night) .previewnote-inner-msg {
  background: #4a2a2a;
  color: #f0e0e0;
  border-color: #8a3030;
}

:where(html.skin-theme-clientpref-night) #mw-anon-edit-warning,
:where(html.skin-theme-clientpref-night) #mw-read-only-warning {
  background: #4a3a00;
  color: #f6f0d0;
  border-color: #8a3030;
}

:where(html.skin-theme-clientpref-night) .mw-interwikitable-row:hover {
  background: #2a2a2a;
}

:where(html.skin-theme-clientpref-night) .forumlist tr:nth-child(even) td {
  background: #1c1c1c;
}

/* Spoiler-credit / license boxes (e.g. .license_dod for "based on a spoiler by
 * Dylan O'Donnell"). Matches `.license_*` class pattern. */
:where(html.skin-theme-clientpref-night) [class^="license_"],
:where(html.skin-theme-clientpref-night) [class*=" license_"] {
  background: #2e2e1f;
  color: #f0f0d8;
  border-color: #5a5a3a;
}

/* Sister-project sidebox (Template:Wikipedia and similar link-out boxes) */
:where(html.skin-theme-clientpref-night) .sidebox,
:where(html.skin-theme-clientpref-night) .noprint.sidebox {
  background: #1f1f1f;
  color: #eaecf0;
  border-color: #444;
}

/* Yes/No/Partial color-coded cells (level info tables on Sokoban, Oracle-level, etc.) */
:where(html.skin-theme-clientpref-night) .table-yes {
  background: #224422;
  color: #d4f0d4;
}
:where(html.skin-theme-clientpref-night) .table-no {
  background: #4a2424;
  color: #f0d4d4;
}
:where(html.skin-theme-clientpref-night) .table-partial {
  background: #4a4422;
  color: #f0ecd4;
}

/* .kbdsym — keyboard-key glyph used in strategy/help articles */
:where(html.skin-theme-clientpref-night) .kbdsym {
  background: #2a2a2a !important;
  color: #eaecf0 !important;
  border-color: #555 #333 #333 #555 !important;
}

/* Spoiler/credit/reference yellow boxes (some templates use light-yellow bg).
 * Catch-all selector for any element with a hardcoded #FFFFE0/#FFFFEE-ish bg
 * via the inline style attribute pattern. */
:where(html.skin-theme-clientpref-night) [style*="background:#FFFFE0" i],
:where(html.skin-theme-clientpref-night) [style*="background-color:#FFFFE0" i],
:where(html.skin-theme-clientpref-night) [style*="background:#FFFFEE" i],
:where(html.skin-theme-clientpref-night) [style*="background-color:#FFFFEE" i] {
  background: #2e2e1f !important;
  color: #f0f0d8;
}

/* ---------- Auto-OS (user chose Auto + OS is dark) ----------
 * Repeats the above using :where(html.skin-theme-clientpref-os).
 * Vector 2022 adds clientpref-os when the user picks "Automatic". */
@media (prefers-color-scheme: dark) {
  :where(html.skin-theme-clientpref-os) table.wikitable,
  :where(html.skin-theme-clientpref-os) table.prettytable {
    background: #1f1f1f;
    border-color: #444;
    color: #eaecf0;
  }
  :where(html.skin-theme-clientpref-os) table.wikitable th,
  :where(html.skin-theme-clientpref-os) table.prettytable th {
    background: #161616;
    color: #f0f0f0;
    border-color: #444;
  }
  :where(html.skin-theme-clientpref-os) table.wikitable td,
  :where(html.skin-theme-clientpref-os) table.prettytable td {
    border-color: #444;
  }

  :where(html.skin-theme-clientpref-os) .upcoming {
    background: #6b3a1c;
    color: #f6e7d8;
    border-color: #8a4f29;
  }
  :where(html.skin-theme-clientpref-os) .upcoming a,
  :where(html.skin-theme-clientpref-os) .upcoming a:visited {
    color: #ffd699;
  }

  :where(html.skin-theme-clientpref-os) .nhencyclopedia {
    background: #50503a;
    color: #f0f0e0;
    border-color: #6e6e4e;
  }

  :where(html.skin-theme-clientpref-os) .nhguidebook {
    background: #3a2e2e;
    color: #f0e8e8;
    border-color: #5a4444;
  }

  :where(html.skin-theme-clientpref-os) .previewnote-inner-msg {
    background: #4a2a2a;
    color: #f0e0e0;
    border-color: #8a3030;
  }

  :where(html.skin-theme-clientpref-os) #mw-anon-edit-warning,
  :where(html.skin-theme-clientpref-os) #mw-read-only-warning {
    background: #4a3a00;
    color: #f6f0d0;
    border-color: #8a3030;
  }

  :where(html.skin-theme-clientpref-os) .mw-interwikitable-row:hover {
    background: #2a2a2a;
  }

  :where(html.skin-theme-clientpref-os) .forumlist tr:nth-child(even) td {
    background: #1c1c1c;
  }

  :where(html.skin-theme-clientpref-os) [class^="license_"],
  :where(html.skin-theme-clientpref-os) [class*=" license_"] {
    background: #2e2e1f;
    color: #f0f0d8;
    border-color: #5a5a3a;
  }

  :where(html.skin-theme-clientpref-os) .sidebox,
  :where(html.skin-theme-clientpref-os) .noprint.sidebox {
    background: #1f1f1f;
    color: #eaecf0;
    border-color: #444;
  }

  :where(html.skin-theme-clientpref-os) .table-yes {
    background: #224422;
    color: #d4f0d4;
  }
  :where(html.skin-theme-clientpref-os) .table-no {
    background: #4a2424;
    color: #f0d4d4;
  }
  :where(html.skin-theme-clientpref-os) .table-partial {
    background: #4a4422;
    color: #f0ecd4;
  }

  :where(html.skin-theme-clientpref-os) .kbdsym {
    background: #2a2a2a !important;
    color: #eaecf0 !important;
    border-color: #555 #333 #333 #555 !important;
  }

  :where(html.skin-theme-clientpref-os) [style*="background:#FFFFE0" i],
  :where(html.skin-theme-clientpref-os) [style*="background-color:#FFFFE0" i],
  :where(html.skin-theme-clientpref-os) [style*="background:#FFFFEE" i],
  :where(html.skin-theme-clientpref-os) [style*="background-color:#FFFFEE" i] {
    background: #2e2e1f !important;
    color: #f0f0d8;
  }
}

/* ============================================================
 * End NetHackWiki dark-mode template fixes
 * ============================================================ */
/* ============================================================
 * NetHackWiki mobile responsive overlay for Vector 2022 — v1.0
 * Paste into MediaWiki:Vector.css (replaces existing content,
 * or appends if you've customized that page).
 *
 * Affects only the Vector skin. Readers on Cologne Blue,
 * DarkVector, MonoBook, or Modern see no change here.
 *
 * Above 1080px, this file does nothing — desktop layout is
 * untouched. Below 1080px, mobile-friendly improvements kick
 * in progressively.
 * ============================================================ */

/* ---------- 720px – 1080px : tablet & narrow desktop ---------- */
@media (max-width: 1080px) {
  /* Tighten content padding so we get more text per line */
  .mw-page-container-inner {
    padding-left: 0.5em;
    padding-right: 0.5em;
  }
}

/* ---------- ≤ 720px : phablet and below ---------- */
@media (max-width: 720px) {
  /* 1. Reduce heading sizes — Vector 2022 H1 is ~1.8em which
   *    eats 60–80px of a 360px viewport for the page title alone. */
  .mw-body h1.firstHeading,
  .mw-body-content h1 {
    font-size: 1.4em;
    line-height: 1.3;
  }
  .mw-body-content h2 {
    font-size: 1.25em;
    line-height: 1.3;
  }
  .mw-body-content h3 {
    font-size: 1.1em;
  }

  /* 2. Infobox stacking — right-floated wikitables/prettytables go
   *    full-width above the body text. NetHackWiki uses prettytable
   *    for monster/item infoboxes. Also forces width:100% for tables
   *    that have absurdly narrow inline widths (e.g. Oracle (level)
   *    has style="width:50px" which clips its dungeon-map content). */
  .mw-parser-output > table.wikitable,
  .mw-parser-output > table.prettytable,
  .mw-parser-output table.wikitable[style*="float"],
  .mw-parser-output table.prettytable[style*="float"],
  .mw-parser-output table.wikitable[style*="width:"],
  .mw-parser-output table.prettytable[style*="width:"] {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 1em 0 !important;
  }

  /* 3. Wide-table scrollers — pure CSS, table itself becomes
   *    horizontally scrollable. Tradeoff: display:block decouples
   *    column alignment across separate tables, but each table
   *    scrolls cleanly within the viewport. */
  table.wikitable,
  table.prettytable {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  /* 4. Code blocks — horizontal scroll, no wrap, tighter font.
   *    Used by Source: pages with SyntaxHighlight. */
  .mw-highlight,
  .mw-highlight pre,
  pre {
    overflow-x: auto;
    white-space: pre;
    -webkit-overflow-scrolling: touch;
    font-size: 0.85em;
  }

  /* 5. Sidebar drawer tap targets — bump to 44px (Apple HIG /
   *    WCAG AAA tap target). Vector 2022 mobile drawer items are
   *    smaller than that by default. */
  .mw-mf-page-sidebar a,
  .vector-menu-content li a,
  .mw-portlet-body li a,
  .vector-main-menu .vector-menu-content li a {
    padding: 12px 16px;
    min-height: 44px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }

  /* 6. Thumbnails scale to viewport */
  .thumb,
  .thumbinner,
  figure.mw-default-size {
    max-width: 100% !important;
  }
  .thumbinner img,
  figure.mw-default-size img {
    max-width: 100%;
    height: auto;
  }

  /* 7. Tighter line-height on body for mobile reading */
  .mw-body-content {
    line-height: 1.55;
  }

  /* 8. Trim the gap between site header and article header.
   *    Vector 2022 reserves space for the page tools sidebar
   *    even when collapsed; reclaim it on mobile. */
  .mw-body-header,
  .vector-page-titlebar {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }
}

/* ---------- ≤ 480px : phones ---------- */
@media (max-width: 480px) {
  /* Footer category list — stack vertically with breathing room */
  #catlinks ul,
  #mw-normal-catlinks ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25em;
    padding-left: 0;
  }
  #catlinks li,
  #mw-normal-catlinks li {
    border-left: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  /* Even smaller body text for phones */
  .mw-body-content {
    font-size: 0.95em;
  }

  /* Slightly tighter heading sizes still */
  .mw-body h1.firstHeading,
  .mw-body-content h1 {
    font-size: 1.3em;
  }
}

/* ============================================================
 * End NetHackWiki mobile responsive overlay
 * ============================================================ */