MediaWiki:Common.css: Difference between revisions

/* Site styles for imported content and the Elite wiki home page. */
.mw-parser-output {
  --elite-ink: var(--color-base, #202122);
  --elite-muted: var(--color-subtle, #54595d);
  --elite-surface: var(--background-color-base, #fff);
  --elite-subtle: var(--background-color-neutral-subtle, #f8f9fa);
  --elite-border: var(--border-color-base, #a2a9b1);
  --elite-accent: #a34a00;
  --elite-accent-bg: #fff3e3;
  --elite-heading: #663600;
}
.skin-theme-clientpref-night .mw-parser-output {
  --elite-ink: #eaecf0; --elite-muted: #b8c0c8; --elite-surface: #202122;
  --elite-subtle: #27292c; --elite-border: #72777d; --elite-accent: #ffb14a;
  --elite-accent-bg: #38291c; --elite-heading: #ffd18e;
}
@media (prefers-color-scheme: dark) {
  .skin-theme-clientpref-os .mw-parser-output {
    --elite-ink: #eaecf0; --elite-muted: #b8c0c8; --elite-surface: #202122;
    --elite-subtle: #27292c; --elite-border: #72777d; --elite-accent: #ffb14a;
    --elite-accent-bg: #38291c; --elite-heading: #ffd18e;
  }
}
/* Shared boxes for source and Wikipedia-style templates. */
.mw-parser-output :is(.infobox, .wikia-infobox, .portable-infobox) {
  float: right; clear: right; width: 22em; max-width: 100%; margin: .5em 0 1em 1.25em;
  padding: .4em; border: 1px solid var(--elite-border); background: var(--elite-subtle);
  color: var(--elite-ink); font-size: 90%; line-height: 1.5; border-spacing: 3px;
}
.mw-parser-output :is(.infobox, .wikia-infobox) :is(th, td) { padding: .25em .4em; vertical-align: top; }
.mw-parser-output :is(.infobox-header, .infobox-title, .wikia-infobox-header, .wikia-infobox-section-header, .pi-header, .pi-title) {
  padding: .45em; text-align: center; font-weight: bold; color: var(--elite-heading); background: var(--elite-accent-bg);
}
.mw-parser-output :is(.infobox-image, .wikia-infobox-image, .wikia-infobox-caption, .pi-image, .pi-caption) { text-align: center; }
.mw-parser-output :is(.infobox img, .wikia-infobox img, .portable-infobox img) { max-width: 100%; height: auto; }
.mw-parser-output :is(.ambox, .mbox, .tmbox, .imbox, .cmbox, .ombox) {
  box-sizing: border-box; margin: 1em auto; border: 1px solid var(--elite-border);
  border-left: 5px solid #a35a00; padding: .35em; background: var(--elite-subtle); color: var(--elite-ink);
  width: 80%; max-width: 100%; line-height: 1.5;
}
.mw-parser-output .ambox td { color: var(--elite-ink) !important; }
.mw-parser-output :is(.ambox-image, .mbox-image) { width: 52px; text-align: center; vertical-align: middle; }
.mw-parser-output .ambox-small { float: right; clear: right; width: 25em; margin: .5em 0 .8em 1em; font-size: 90%; }
.mw-parser-output :is(.ambox-red, .mbox-delete) { border-left-color: #d33; }
.mw-parser-output :is(.ambox-yellow, .ambox-orange, .mbox-content) { border-left-color: #ea9700; }
.mw-parser-output :is(.ambox-blue, .mbox-notice, .notice) { border-left-color: #36c; }
.mw-parser-output .ambox-green { border-left-color: #14866d; }
.mw-parser-output :is(.navbox, .vertical-navbox) { border: 1px solid var(--elite-border); background: var(--elite-subtle); color: var(--elite-ink); padding: .3em; }
.mw-parser-output .navbox-title { background: var(--elite-accent-bg); color: var(--elite-heading); font-weight: bold; text-align: center; }
.mw-parser-output .eWikiColor { background: var(--elite-accent-bg); color: var(--elite-ink); border: 1px solid var(--elite-border); }
.mw-parser-output .clear, .mw-parser-output .clearboth { clear: both; }
/* Home: a compact editorial layout that follows the active skin theme. */
.elite-home { color: var(--elite-ink); max-width: 100%; }
.elite-home .elite-hero { position: relative; overflow: hidden; border: 1px solid var(--elite-border); border-top: 4px solid var(--elite-accent); background: var(--elite-subtle); padding: clamp(1.3rem, 3vw, 2.4rem); }
.elite-home .elite-hero::after { content: ''; position: absolute; right: -2rem; top: -5rem; width: 18rem; height: 18rem; border: 1px solid var(--elite-accent); border-radius: 50%; opacity: .18; pointer-events: none; box-shadow: 0 0 0 2.2rem var(--elite-surface), 0 0 0 2.25rem var(--elite-accent), 0 0 0 4.5rem var(--elite-surface), 0 0 0 4.55rem var(--elite-accent); }
.elite-home .elite-hero > * { position: relative; z-index: 1; }
.elite-home .elite-eyebrow { margin: 0 0 .65rem; color: var(--elite-accent); font-size: .72rem; letter-spacing: .16em; font-weight: 700; text-transform: uppercase; }
.elite-home .elite-hero h2 { margin: 0 0 .6rem; border: 0; color: var(--elite-ink); font-family: inherit; font-weight: 700; font-size: clamp(1.7rem,3.4vw,2.5rem); line-height: 1.15; }
.elite-home .elite-lead { max-width: 37rem; margin: 0; font-size: 1.04rem; line-height: 1.65; }
.elite-home .elite-actions { margin: 1.25rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.elite-home .elite-actions a { display: inline-block; padding: .52em .8em; border: 1px solid var(--elite-border); background: var(--elite-surface); font-weight: 600; text-decoration: none; }
.elite-home .elite-section-title { margin: 1.8rem 0 .7rem; border-bottom: 1px solid var(--elite-border); padding-bottom: .35rem; font-size: 1.25rem; }
.elite-home .elite-intro { margin: 0 0 1rem; color: var(--elite-muted); }
.elite-home .elite-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; }
.elite-home .elite-card { border: 1px solid var(--elite-border); border-top: 3px solid var(--elite-accent); background: var(--elite-surface); padding: 1rem; min-width: 0; }
.elite-home .elite-card h3 { margin: 0 0 .35rem; font-family: inherit; font-size: 1.05rem; line-height: 1.35; }
.elite-home .elite-card p { margin: 0; color: var(--elite-muted); line-height: 1.5; }
.elite-home .elite-two { display: grid; grid-template-columns: 1.2fr 1fr; gap: .75rem; margin-top: .75rem; }
.elite-home .elite-panel { border: 1px solid var(--elite-border); padding: 1rem 1.15rem; background: var(--elite-subtle); }
.elite-home .elite-panel h2 { margin: 0 0 .5rem; padding: 0; border: 0; font-family: inherit; font-weight: 700; font-size: 1.08rem; }
.elite-home .elite-panel p { margin: 0 0 .6rem; line-height: 1.55; }
.elite-home .elite-panel ul { margin-bottom: 0; }
@media (max-width: 720px) {
  .elite-home .elite-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .elite-home .elite-two { grid-template-columns: 1fr; }
  .mw-parser-output :is(.infobox,.wikia-infobox,.portable-infobox) { float: none; margin: 1em auto; }
  .mw-parser-output :is(.ambox,.mbox,.tmbox,.imbox,.cmbox,.ombox) { width: 100%; }
}
@media (max-width: 420px) { .elite-home .elite-grid { grid-template-columns: 1fr; } }
/* Keep Wikipedia TemplateStyles message boxes readable in dark mode. */
.skin-theme-clientpref-night .mw-parser-output :is(.ambox,.cmbox,.imbox,.tmbox,.fmbox,.ombox,.dmbox) { background-color: var(--elite-subtle); color: var(--elite-ink); }
@media (prefers-color-scheme: dark) { .skin-theme-clientpref-os .mw-parser-output :is(.ambox,.cmbox,.imbox,.tmbox,.fmbox,.ombox,.dmbox) { background-color: var(--elite-subtle); color: var(--elite-ink); } }
/* Matched wordmark images for Vector light and dark appearances. */
html.skin-theme-clientpref-night .mw-logo-container.skin-invert { filter: none; color-scheme: normal; }
html.skin-theme-clientpref-night .mw-logo-wordmark { content: url(/w/images/wiki-brand/wordmark-dark.png); }
@media (prefers-color-scheme: dark) { html.skin-theme-clientpref-os .mw-logo-container.skin-invert { filter: none; color-scheme: normal; } html.skin-theme-clientpref-os .mw-logo-wordmark { content: url(/w/images/wiki-brand/wordmark-dark.png); } }
/* Give the wider wordmark its own space beside search. */
.mw-header { grid-template-columns: max-content minmax(0, 1fr); }
.mw-header .vector-header-end { min-width: 0; }
@media (max-width: 1100px) { .mw-header .mw-logo-wordmark { width: min(180px, 24vw) !important; height: auto !important; } }
/* The wordmark is the header identity; the emblem remains the browser favicon. */
.mw-header .mw-logo-icon { display: none !important; }
.mw-header { column-gap: 1.25rem; }
/* Keep Vector search clear of the wider wordmark. */
.client-js .mw-header .vector-search-box.vector-search-box-auto-expand-width { margin-left: 0; }

/* Imported Fandom tables, adapted to the selected MediaWiki colour scheme. */
.mw-parser-output table.article-table,
.mw-parser-output table.fandom-table,
.mw-parser-output table.eStationTable {
  border-collapse: collapse;
  border: 1px solid var(--elite-border, #a2a9b1);
  background: var(--elite-surface, #fff);
  color: var(--elite-ink, #202122);
  margin: 1em 0;
}
.mw-parser-output table.eStationTable { margin-left: auto; margin-right: auto; text-align: left; }
.mw-parser-output table:is(.article-table, .fandom-table, .eStationTable) > :is(thead, tbody, tfoot) > tr > :is(th, td),
.mw-parser-output table:is(.article-table, .fandom-table, .eStationTable) > tr > :is(th, td) {
  border: 1px solid var(--elite-border, #a2a9b1);
  padding: 0.35em 0.6em;
}
.mw-parser-output table:is(.article-table, .fandom-table, .eStationTable) > :is(thead, tbody, tfoot) > tr > th,
.mw-parser-output table:is(.article-table, .fandom-table, .eStationTable) > tr > th {
  background-color: var(--elite-subtle, #f8f9fa);
  color: var(--elite-ink, #202122);
  text-align: center;
}
.mw-parser-output table.eStationTable > :is(thead, tbody, tfoot) > tr > th,
.mw-parser-output table.eStationTable > tr > th { text-align: right; }
.mw-parser-output table.eTable_RowHighlighting > :is(thead, tbody, tfoot) > tr:nth-child(even),
.mw-parser-output table.eTable_RowHighlighting > tr:nth-child(even) { background: var(--elite-subtle, #f8f9fa); }
.mw-parser-output table:is(.article-table, .fandom-table, .eStationTable) > caption { font-weight: bold; padding: 0.35em; }
.fandom-import-mark { display: inline-block; vertical-align: -0.1em; margin-inline-end: 0.25em; }
.fandom-import-mark img { display: inline-block; width: 48px; height: 12px; object-fit: contain; }
.fandom-import-legend { font-size: 0.875em; margin: 0.5em 0 1em; }

.fandom-import-mark img, .fandom-import-legend img { background: #fff; border-radius: 2px; }
/* Preserve the meaning of message-box colours in the dark appearance. */
:is(.skin-theme-clientpref-night, .skin-theme-clientpref-os) .mw-parser-output {
  --elite-notice-blue: #1c3048;
  --elite-notice-orange: #40301b;
  --elite-notice-red: #432326;
  --elite-notice-green: #1d382d;
  --elite-notice-purple: #342941;
}
.skin-theme-clientpref-night .mw-parser-output :is(.ambox,.cmbox,.imbox,.tmbox,.fmbox,.ombox,.dmbox),
.skin-theme-clientpref-night .mw-parser-output .mbox {
  background-color: #27292c !important;
  color: #eaecf0;
}
.skin-theme-clientpref-night .mw-parser-output :is(.ambox-notice,.mbox-notice,.ambox-blue) { background-color: var(--elite-notice-blue) !important; }
.skin-theme-clientpref-night .mw-parser-output :is(.ambox-content,.mbox-content,.ambox-yellow,.ambox-orange) { background-color: var(--elite-notice-orange) !important; }
.skin-theme-clientpref-night .mw-parser-output :is(.ambox-delete,.mbox-delete,.ambox-red) { background-color: var(--elite-notice-red) !important; }
.skin-theme-clientpref-night .mw-parser-output :is(.ambox-move,.mbox-move,.ambox-purple) { background-color: var(--elite-notice-purple) !important; }
.skin-theme-clientpref-night .mw-parser-output :is(.ambox-protection,.mbox-protection,.ambox-green) { background-color: var(--elite-notice-green) !important; }
/* Imported source tables sometimes set a dark striped row inline. */
.skin-theme-clientpref-night .mw-parser-output tr[style*="#333333"] > :is(th,td),
.skin-theme-clientpref-night .mw-parser-output tr[style*="#333;"] > :is(th,td) { color: #eaecf0; }
@media (prefers-color-scheme: dark) {
  .skin-theme-clientpref-os .mw-parser-output :is(.ambox,.cmbox,.imbox,.tmbox,.fmbox,.ombox,.dmbox,.mbox) { background-color: #27292c !important; color: #eaecf0; }
  .skin-theme-clientpref-os .mw-parser-output :is(.ambox-notice,.mbox-notice,.ambox-blue) { background-color: var(--elite-notice-blue) !important; }
  .skin-theme-clientpref-os .mw-parser-output :is(.ambox-content,.mbox-content,.ambox-yellow,.ambox-orange) { background-color: var(--elite-notice-orange) !important; }
  .skin-theme-clientpref-os .mw-parser-output :is(.ambox-delete,.mbox-delete,.ambox-red) { background-color: var(--elite-notice-red) !important; }
  .skin-theme-clientpref-os .mw-parser-output :is(.ambox-move,.mbox-move,.ambox-purple) { background-color: var(--elite-notice-purple) !important; }
  .skin-theme-clientpref-os .mw-parser-output :is(.ambox-protection,.mbox-protection,.ambox-green) { background-color: var(--elite-notice-green) !important; }
  .skin-theme-clientpref-os .mw-parser-output tr[style*="#333333"] > :is(th,td),
  .skin-theme-clientpref-os .mw-parser-output tr[style*="#333;"] > :is(th,td) { color: #eaecf0; }
}
/* Match the content notices even when a skin supplies stronger table rules. */
html.skin-theme-clientpref-night body .mw-parser-output table.ambox-content { background: #40301b !important; border-left-color: #f28500 !important; }
@media (prefers-color-scheme: dark) { html.skin-theme-clientpref-os body .mw-parser-output table.ambox-content { background: #40301b !important; border-left-color: #f28500 !important; } }