MediaWiki:Common.css: Difference between revisions

Revision as of 19:14, 2 October 2025

/* Prevent Chrome auto-boost weirdness */
html { -webkit-text-size-adjust: 100%; }

/* ===== Infobox base (light theme default) ===== */
table.infobox{
  width:22em; max-width:22em; box-sizing:border-box;
  float:right; clear:right; margin:0 0 1em 1em;
  border:1px solid #a2a9b1; background:#f8f9fa; color:inherit;
  font-size:90%; line-height:1.5em;
  /* use 'separate' so table padding works like enwiki */
  border-collapse:separate; border-spacing:0; padding:.5em;
}

table.infobox th, table.infobox td{
  padding:.5em .45em;          /* enwiki-ish cell padding */
  vertical-align:top;
}
table.infobox th{ text-align:left; }

/* Title — no background by default; 125% and centered */
table.infobox th.infobox-title{
  text-align:center;
  font-size:125%;
  font-weight:bold;
  background:transparent;      /* default: none */
  padding:.35em .45em .3em;
}

/* Only apply color when |color= was set (module adds class + CSS var) */
table.infobox th.infobox-title.has-title-color{
  background:var(--ib-title-bg);
}

/* Image row: remove padding so image can touch the inner edges; make image 100% */
table.infobox td.infobox-image-cell{
  padding:0;
}
table.infobox td.infobox-image-cell img{
  display:block; width:100%; height:auto;
}

/* Prevent long strings from breaking layout */
table.infobox td{ overflow-wrap:anywhere; word-break:break-word; }

/* Explicit Dark (already present, keep yours) */
html.skin-theme-clientpref-night table.infobox        { background:#1f2327; border-color:#3c4043; color:#e8eaed; }
html.skin-theme-clientpref-night table.infobox th     { background:transparent; color:#e8eaed; }
html.skin-theme-clientpref-night table.infobox td     { background:transparent; color:#e8eaed; }
html.skin-theme-clientpref-night table.infobox a      { color:#8ab4f8; }
html.skin-theme-clientpref-night table.infobox a:visited { color:#c58af9; }

/* Automatic + OS is dark */
@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os table.infobox        { background:#1f2327; border-color:#3c4043; color:#e8eaed; }
  html.skin-theme-clientpref-os table.infobox th     { background:transparent; color:#e8eaed; }
  html.skin-theme-clientpref-os table.infobox td     { background:transparent; color:#e8eaed; }
  html.skin-theme-clientpref-os table.infobox a      { color:#8ab4f8; }
  html.skin-theme-clientpref-os table.infobox a:visited { color:#c58af9; }
  /* keep title readable; no special bg unless |color= was set */
  html.skin-theme-clientpref-os table.infobox th.infobox-title { background: transparent; }
}


/* — Light mode: improve infobox label/value contrast; title stays transparent — */
table.infobox th:not(.infobox-title) {
  background: #f2f2f2;
  font-weight: 600;
}


/* ===================== QUICK FACTS (touch devices only) ===================== */
/* The block is scoped to coarse pointers so desktop is untouched */
@media (pointer: coarse) {
  /* Default (light) tokens */
  :root {
    --qf-bg:      #f8f9fa;
    --qf-hdr-bg:  #eaecf0;
    --qf-fg:      #202122;
    --qf-border:  #a2a9b1;
  }

  details.quickfacts {
    margin: .5em 0 1em;
    border: 1px solid var(--qf-border);
    border-radius: 6px;
    background: var(--qf-bg);
    color: var(--qf-fg);
    overflow: hidden;
  }

  /* Summary header + chevron affordance */
  details.quickfacts > summary.quickfacts-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-weight: 600;
    padding: .6em .8em;
    background: var(--qf-hdr-bg);
    color: var(--qf-fg);
    list-style: none;
  }
  details.quickfacts > summary.quickfacts-summary::-webkit-details-marker { display: none; }
  details.quickfacts > summary.quickfacts-summary::after {
    content: "▾";                 /* closed state chevron */
    font-size: 1.1em;
    line-height: 1;
    margin-left: .5em;
    transition: transform .2s ease;
  }
  details.quickfacts[open] > summary.quickfacts-summary::after {
    content: "▴";                 /* open state chevron */
  }

  /* Optional polish */
  details.quickfacts > summary.quickfacts-summary:hover { filter: brightness(.98); }
  details.quickfacts > summary.quickfacts-summary:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 4px;
  }

  /* Make the infobox full width inside Quick facts */
  details.quickfacts .infobox.infobox--in-quickfacts {
    float: none;
    width: 100%;
    max-width: none;
    margin: 0;
  }
}

/* ===================== DARK / AUTO-DARK OVERRIDES ===================== */
/* Vector's explicit dark toggles */
html.skin-theme-clientpref-night  details.quickfacts,
html.skin-theme-clientpref-dark   details.quickfacts,
html[data-mw-color-scheme="dark"] details.quickfacts {
  --qf-bg:     #1f2327;
  --qf-hdr-bg: #2a2e33;
  --qf-fg:     #e8eaed;
  --qf-border: #3c4043;
}

/* “Automatic” (OS dark) */
@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os details.quickfacts {
    --qf-bg:     #1f2327;
    --qf-hdr-bg: #2a2e33;
    --qf-fg:     #e8eaed;
    --qf-border: #3c4043;
  }
}

/* ===== Hero from infobox image (touch devices only) ===== */
@media (pointer: coarse) {
  /* If JS is enabled, don't show the infobox image in its cell.
     This prevents the "double image" flash before promotion. */
  html.client-js table.infobox .infobox-image-cell {
    display: none !important;
  }

  /* The hero frame inserted above the title; height is stable immediately. */
  .article-hero {
    width: 100%;
    aspect-ratio: 10 / 7;           /* reserve space — no jump after insert */
    overflow: hidden;
    border-radius: 0 0 8px 8px;
    margin: 0 0 1rem 0;
    background: #111;
    contain: layout paint size;      /* isolate painting for smoother render */
    transform: translateZ(0);        /* promote to its own layer on many GPUs */
  }

  /* Make whatever we moved in (a <span><a><img>…) fill and crop */
  .article-hero a,
  .article-hero span,
  .article-hero figure,
  .article-hero picture {
    display: block; height: 100%;
  }
  .article-hero img, .article-hero video {
    display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;
  }
}

/* Dark/auto placeholder tint */
html.skin-theme-clientpref-night  .article-hero,
html.skin-theme-clientpref-dark   .article-hero,
html[data-mw-color-scheme="dark"] .article-hero { background: #0f1316; }
@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .article-hero { background: #0f1316; }
}