MediaWiki:Common.css

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.

/* Site-wide CSS. */

/* Wanda floating chat: user-resizable via the top-left grip that
   MediaWiki:Common.js adds. The native bottom-right resize handle is off on
   purpose: the window is bottom/right-anchored, so that handle grew the box
   away from the cursor and felt inverted.
   The extension also ships transition:all on the window for its open/close
   fade - scoped down to transform/opacity here, because "all" made every
   width/height step during a drag lag 300ms behind the cursor. */
.wanda-floating-window {
    overflow: hidden;
    max-height: 90vh;
    max-width: 90vw;
    min-width: 320px;
    min-height: 280px;
    transition-property: transform, opacity;
}

.wanda-resize-tl {
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
    z-index: 2;
}

/* Language dropdown — built by MediaWiki:Common.js from the Translate list. */
.mw-pt-languages-select {
    font: inherit;
    padding: 2px 8px;
    border: 1px solid #c8ccd1;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

/* Wanda opens larger by default — Trello 4TyPgtP9 "Can the wanda box be
   enlarged?". The extension ships 450x450; this widens and heightens the
   default while the resize grips (above) still let readers change it.
   Desktop only: below 1100px the extension's own media queries size the
   window to the viewport, and a fixed 560px would overflow small screens. */
@media screen and (min-width: 1100px) {
    .wanda-floating-window {
        width: 560px;
        height: 70vh;
    }
}

/* Wanda: before the first message the history box (.chat-box) is empty, so
   the greeting and the input field stacked at the top of the panel with all
   the free space below them. Auto top margin claims that space instead and
   keeps the input at the bottom, like every chat app. No effect once messages
   fill the history. */
.wanda-floating-chat .chat-input-container {
    margin-top: auto;
}

/* Article images are floated (thumb|right); without clearing, a tall image
   bleeds past its section into the next one and squeezes the following
   heading against it. Every h2 starts below any floats of the previous
   section. */
.mw-parser-output h2,
.mw-parser-output .mw-heading2 {
    clear: both;
}
/* ------------------------------------------------------------------ */
/* SquidWeb content blocks — used by Template:Note, Template:Careful,   */
/* Template:Draft, Template:Availability, Template:YouDecide,           */
/* Template:Faq, Template:Figure, Template:FigureRow. Edit the look     */
/* here, never inline on a page. Added 2026-09-22 (Octopodi refactor). */
/* ------------------------------------------------------------------ */

/* Callouts: left accent bar. --info teal, --warn amber. */
.sq-callout {
    border-left: 3px solid #79c9c4;
    background: #f4fafa;
    padding: 10px 14px;
    border-radius: 0 6px 6px 0;
    margin: 14px 0;
    font-size: 14.5px;
}
.sq-callout--warn {
    border-left-color: #e0a93b;
    background: #fffaf0;
}
.sq-callout__title {
    font-weight: bold;
}

/* Full-width status banner at the top of a page (Draft). */
.sq-banner {
    border: 1px solid #f0d48a;
    background: #fff9e8;
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 18px;
    color: #7a5300;
    font-size: 14.5px;
}

/* FAQ entry: question in bold, answer below. */
.sq-faq {
    margin: 0 0 14px;
    max-width: 960px;
}
.sq-faq__q {
    font-weight: bold;
    margin-bottom: 3px;
}
.sq-faq__a {
    color: #3d454e;
    font-size: 14.5px;
}

/* Screenshot card: bordered image with a caption strip. Several cards
   sit side by side inside .sq-figrow and wrap on narrow screens. */
.sq-figrow {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
    margin: 16px 0 22px;
}
.sq-figure {
    flex: 0 0 auto;
    max-width: 100%;
    border: 1px solid #e3e8ee;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    margin: 16px 0 22px;
}
.sq-figrow > .sq-figure {
    margin: 0;
}
/* Blank lines between the Figure calls become empty <p>s; keep them out of the flex flow. */
.sq-figrow > p {
    display: none;
}
.sq-figure img {
    display: block;
    max-width: 100%;
    height: auto;
}
.sq-figure__caption {
    padding: 7px 12px;
    border-top: 1px solid #e3e8ee;
    background: #f7f9fb;
    color: #4a5560;
    font-size: 13px;
}

/* Table header strip in the accent colour (settings/reference tables). */
.wikitable.sq-table > * > tr > th,
.sq-table th {
    text-align: left;
    padding: 9px 12px;
    background: #f4f9f9;
    color: #25444a;
    border-bottom: 2px solid #79c9c4;
    font-size: 13.5px;
}
.wikitable.sq-table > * > tr > td,
.sq-table td {
    padding: 7px 12px;
    vertical-align: top;
    border-bottom: 1px solid #e8edf1;
}

/* Two columns: a figure (aside) next to running text or a table (main). */
.sq-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: flex-start;
    margin: 16px 0 28px;
}
.sq-cols__aside {
    flex: 0 0 455px;
    max-width: 100%;
}
.sq-cols__aside > .sq-figure {
    margin: 0;
}
.sq-cols__main {
    flex: 1 1 320px;
    min-width: 290px;
}
.sq-cols__main > .sq-table {
    margin: 0 0 6px;
}
.sq-cols > p {
    display: none;
}

/* Small spaced-caps label above a block ("Recommended", "Watch out"). */
.sq-eyebrow {
    font-size: 13px;
    letter-spacing: .06em;
    color: #1f6f6a;
    font-weight: bold;
    margin-bottom: 6px;
}
.sq-eyebrow--warn {
    color: #a4494d;
}

/* Even two-column text (no figure): both halves grow. */
.sq-cols--even > .sq-cols__main {
    flex: 1 1 380px;
    min-width: 320px;
}
.sq-cols--even {
    margin: 14px 0;
}

/* Inline value pill ("On", "Off", "11 h"). --on is the accent variant. */
.sq-pill {
    background: #f1f3f5;
    color: #5b6570;
    border-radius: 10px;
    padding: 1px 9px;
    font-size: 12.5px;
    white-space: nowrap;
}
.sq-pill--on {
    background: #e9f6f5;
    color: #1f6f6a;
}