Admin: Imported from the SquidWeb wiki

2026-10-16T07:36:42Z

Imported from the SquidWeb wiki

New page

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

MediaWiki:Common.css - Revision history

Admin: Imported from the SquidWeb wiki