MediaWiki:Timeless.css
From OpenTreeID Help
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.
/* Table of contents, relocated to the right rail by MediaWiki:Common.js */
#p-toc ul {
list-style: none;
margin: 0;
padding-left: 0;
font-size: 0.9em;
line-height: 1.5;
}
#p-toc ul ul {
padding-left: 0.9em;
}
#p-toc li {
margin: 0.2em 0;
}
#p-toc .tocnumber {
color: #72777d;
padding-right: 0.4em;
}
#p-toc .toctogglespan {
display: none;
}
/* Keep the rail (contents, page tools, categories) in view while reading. */
@media screen and (min-width: 1100px) {
#mw-related-navigation {
position: sticky;
top: 0.5em;
align-self: flex-start;
max-height: calc( 100vh - 1em );
overflow-y: auto;
}
}
/* ---------------------------------------------------------------------------
Roboto, matching squidweb.com. Self-hosted from /assets/fonts/ (shipped in
the image) rather than Google Fonts: hotlinking would send every reader's IP
to Google, and the box is meant to work without outbound internet.
latin-ext is loaded because the wiki ships DE/ES/FR as well as EN.
--------------------------------------------------------------------------- */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/roboto-400-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/roboto-400-latin-ext.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/assets/fonts/roboto-500-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/assets/fonts/roboto-500-latin-ext.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/assets/fonts/roboto-700-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/assets/fonts/roboto-700-latin-ext.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
body,
.mw-body,
.mw-body-content,
#mw-site-navigation,
#mw-related-navigation,
#p-personal,
#personal,
.sidebar-chunk,
#mw-content-text {
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
/* Timeless sets headings and the wordmark in Linux Libertine (a serif) with
higher specificity than a bare h1..h6 selector, so those need to be matched
at the same level or they stay serif while the body text turns sans. */
.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6,
.mw-body-content h1, .mw-body-content h2, .mw-body-content h3,
.mw-body-content h4, .mw-body-content h5, .mw-body-content h6,
#mw-content-text h1, #mw-content-text h2, #mw-content-text h3,
#mw-content-text h4, #mw-content-text h5, #mw-content-text h6,
#firstHeading,
.mw-heading, .mw-heading1, .mw-heading2, .mw-heading3, .mw-heading4,
#p-logo-text a,
.mw-parser-output h1, .mw-parser-output h2, .mw-parser-output h3,
.mw-parser-output h4, .mw-parser-output h5, .mw-parser-output h6 {
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
/* ---------------------------------------------------------------------------
Language bar: es/fr write their own language names lowercase ("español",
"français") while de/nl/en capitalise, so the row reads inconsistently.
Capitalise for display only — the underlying autonyms stay correct.
--------------------------------------------------------------------------- */
.mw-pt-languages-list li a,
.mw-pt-languages-list li span,
.uls-language-list a {
text-transform: capitalize;
}
/* ---------------------------------------------------------------------------
Left sidebar: tighten the gaps between nav blocks. Timeless spaces portlets
for menus with many entries; "Get started" holds a single link, so the
default margin reads as a hole underneath it.
--------------------------------------------------------------------------- */
#mw-site-navigation .sidebar-inner .mw-portlet {
margin-bottom: 0.75em;
}
#mw-site-navigation .sidebar-inner .mw-portlet:last-child {
margin-bottom: 0;
}
#mw-site-navigation .mw-portlet-body ul {
margin-bottom: 0;
}
#mw-site-navigation .mw-portlet-body li {
margin: 0.15em 0;
}
#mw-site-navigation .sidebar-chunk h3 {
margin-bottom: 0.3em;
}
/* ---------------------------------------------------------------------------
Left sidebar scrolls with the page, same as the right rail above. The module
list is longer than a viewport, so without this the lower entries are simply
unreachable while reading a long article.
--------------------------------------------------------------------------- */
@media screen and (min-width: 1100px) {
#mw-site-navigation {
position: sticky;
top: 0.5em;
align-self: flex-start;
max-height: calc( 100vh - 1em );
overflow-y: auto;
overscroll-behavior: contain;
}
}
/* ---------------------------------------------------------------------------
Wanda assistant — Trello 4TyPgtP9 "Cleanup Wanda".
Hide the two settings blocks readers should not have to reason about: the
"Remember conversation" toggle and the "Sources:" row (Wiki / Wikidata /
LLM Knowledge / Cargo / External Wiki). Only "Wiki" is meaningful here and it
is on by default; the checkboxes stay checked in the DOM, so hiding them
changes appearance only, not which sources are queried.
Everything is scoped to the Wanda panel on purpose: .cdx-* are MediaWiki's
Codex design-system classes used across the whole site, so an unscoped rule
would hide checkboxes and restyle buttons far outside this widget.
--------------------------------------------------------------------------- */
.wanda-floating-chat .chat-input-container > .cdx-checkbox,
.wanda-floating-window .chat-input-container > .cdx-checkbox,
.wanda-floating-chat .wanda-sources-row,
.wanda-floating-window .wanda-sources-row {
display: none;
}
/* Send is the button you press to get an answer, and it was small next to the
message box. */
.wanda-floating-chat .cdx-button--action-progressive.cdx-button--weight-primary,
.wanda-floating-window .cdx-button--action-progressive.cdx-button--weight-primary {
min-width: 6rem;
font-size: 1.05em;
font-weight: 600;
letter-spacing: 0.01em;
}
/* ===========================================================================
Trello 4TyPgtP9 — visual pass against the PO mockup (2026-08-05)
Layout rules are inside the min-width:1100px block at the bottom. Below that
Timeless switches to a compact two-row header with the navigation collapsed
into dropdowns, and desktop numbers push that second row out of the header.
Colour, type and the Wanda panel are safe at every width and stay out here.
=========================================================================== */
/* ---------------------------------------------------------------------------
Timeless paints a red / blue / green tricolour under the header and a green
line under the content — MediaWiki's palette, not ours. All four become the
brand cyan of the logo.
--------------------------------------------------------------------------- */
.color-left,
.color-middle,
.color-right {
background-color: #00ADEE;
}
#mw-content-container {
border-bottom-color: #00ADEE;
}
/* The user name in the header was the last serif left in the chrome: Timeless
sets #personal h2 in Linux Libertine. */
#personal h2,
#personal h2 span {
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
font-size: 1.05rem;
}
/* The article is a card: rounded and lifted off the background. */
#mw-content {
padding: 2rem 2.5rem 3rem;
border-bottom: 0;
border-radius: 10px;
box-shadow: 0 1px 2px rgba( 9, 30, 66, 0.08 ), 0 4px 12px rgba( 9, 30, 66, 0.06 );
}
/* Page behind the cards: a cooler grey, and without Timeless' cat watermark. */
#mw-content-container {
background-color: #eef1f5;
background-image: none;
}
/* The search field is a rounded box in the mockup, not a square one. */
#simpleSearch,
#searchInput,
#searchInput-container {
border-radius: 6px;
}
/* ---------------------------------------------------------------------------
Wanda.
The octopus is cropped out of the wide lockup with background-size and
-position rather than shipping a second asset. In the 240x62 SVG the mark is
the left 84.2 units and it uses the full height, so: SVG width = 240 x
(icon / 84.2), left inset = the disc's padding, top inset = whatever centres
the resulting 62-unit-tall strip. The wordmark starts only 8% past the mark,
so the inset has to stay under 0.08 x the icon or the "S" bleeds into the
disc.
--------------------------------------------------------------------------- */
/* Launcher: white disc with the mark, instead of the 💬 emoji on blue.
56px mark in a 64px disc → 160px wide SVG at 4px / 11.4px. background-origin
has to be the border box: by default the offsets start inside the 2px border,
which pushed the octopus 2px right and 2px down and left it lopsided. */
.wanda-floating-button {
font-size: 0;
background: #fff url( '/assets/logo/opentreeid-logo-dark.svg' ) no-repeat 4px 11.4px / 160px auto;
background-origin: border-box;
border: 2px solid #00ADEE;
box-shadow: 0 4px 12px rgba( 0, 173, 238, 0.35 );
}
/* Panel header: avatar, then "Wanda" over the subtitle.
32px mark in a 36px disc → 91.2px wide SVG at 2px / 6.2px. */
.wanda-chat-header {
align-items: center;
gap: 0.75rem;
padding: 14px 16px;
border-radius: 12px 12px 0 0;
}
.wanda-chat-header::before {
content: "";
flex: 0 0 auto;
width: 36px;
height: 36px;
border-radius: 50%;
background: #fff url( '/assets/logo/opentreeid-logo-dark.svg' ) no-repeat 2px 6.2px / 91.2px auto;
}
/* The name belongs next to the avatar; the close button keeps the far right. */
.wanda-chat-header > span {
margin-right: auto;
font-size: 1.15rem;
font-weight: 700;
line-height: 1.2;
}
.wanda-chat-header > span::after {
content: "AI Wiki Assistant";
display: block;
font-size: 0.8rem;
font-weight: 400;
opacity: 0.9;
}
/* The greeting sat on grey while the rest of the panel is white. */
.wanda-floating-chat {
background: #fff;
}
/* The two emoji bullets under the greeting repeat what the greeting says. */
.wanda-floating-chat .chat-instructions ul {
display: none;
}
/* Every assistant needs this line, and Wanda ships no message for it. */
.wanda-floating-window::after {
content: "Wanda can make mistakes. Please check important information.";
padding: 0 16px 12px;
font-size: 0.72rem;
line-height: 1.3;
color: #72777d;
text-align: center;
}
/* Logged-out visitors reach exactly two pages — the "Login required" notice and
the login form — and Wanda answers neither: the API refuses anonymous
requests (readapidenied), so the launcher would only produce an error. */
.mw-special-Badtitle .wanda-floating-chat-wrapper,
.mw-special-Userlogin .wanda-floating-chat-wrapper {
display: none;
}
/* ---------------------------------------------------------------------------
Desktop layout, following the mockup: the lockup in the header, a taller
header bar over a thinner accent line, a centred search field, the left
navigation sitting straight on the page, and the right-hand rail as white
cards lined up with the top of the article.
--------------------------------------------------------------------------- */
@media screen and (min-width: 1100px) {
/* Logo moves out of the left sidebar and into the header. Timeless has no
logo slot there — only a text wordmark (#p-banner) — so the lockup rides
in as a background on that link. The sitename text is sized to 0 rather
than removed: it stays in the accessibility tree as the link's name, and
"Wiki" is drawn after the divider, because the lockup already says
"SquidWeb". */
#mw-site-navigation #p-logo {
display: none;
}
/* #p-logo-text in front: Timeless sizes a "long" sitename (OpenTreeID Help
is one, SquidWeb Wiki is not) with #p-logo-text a.long, which outranks
the bare #p-banner selector and brought the text back. */
#p-logo-text #p-banner.mw-wiki-title {
display: flex;
align-items: center;
font-size: 0;
line-height: 1;
}
/* Timeless gives #p-logo-text the sidebar's fixed width, which is narrower
than lockup + divider + "Wiki" — the logo was being flex-shrunk to 129px
and rendered small and low. Let the block size to its content and take the
lockup out of the shrinking. */
#p-logo-text {
width: auto;
}
#p-banner.mw-wiki-title::before {
content: "";
flex: 0 0 auto;
width: 150px;
height: 38px;
padding-right: 0.7rem;
border-right: 1px solid #c8ccd1;
background: url( '/assets/logo/opentreeid-logo-dark.svg' ) no-repeat left center / contain;
/* so the padding for the divider does not enlarge the image */
background-origin: content-box;
}
#p-banner.mw-wiki-title::after {
/* The empty alt text keeps the link's accessible name at "OpenTreeID
Help" instead of "OpenTreeID Help Help". */
content: "Help" / "";
margin-left: 0.7rem;
/* "Wiki" sits on the baseline of the lockup's own wordmark, which runs
along the bottom of the SVG — centred on the flex line it floats above
the SQUIDWEB letters. Offset, not margin: a margin grows the flex line
and drags the lockup down with it, so it only ever closes half the
gap. */
position: relative;
top: 11px;
font-size: 1.5rem;
font-variant: normal;
font-weight: 400;
color: #042734;
}
#mw-header-container {
height: 62px;
padding-top: 12px;
}
#p-search {
max-width: 780px;
margin: 0 auto;
}
/* #user-tools is a fixed-width column and the user chip only fills half of
it, so the name floated 130px short of the margin the cards below line up
with. */
#user-tools {
text-align: right;
}
/* Timeless pins the accent bar to its own header height and wins on
specificity from #mw-wrapper — so match it, or the bar stays at 47px and
disappears behind the taller header. Its thickness comes from the
children, not the bar itself. */
#mw-wrapper > .color-bar,
#mw-wrapper > .color-bar .color-middle-container,
#mw-wrapper > .color-bar .color-left,
#mw-wrapper > .color-bar .color-middle,
#mw-wrapper > .color-bar .color-right {
height: 4px;
}
/* color-left/right are floated back up over the middle container by its
negative bottom margin, which Timeless sets to the old 5.3px bar height.
Thinning the bar without moving that leaves them riding high, and the dark
body colour shows through in the strip beside the article. */
#mw-wrapper > .color-bar .color-middle-container {
margin-bottom: -4px;
}
#mw-wrapper > .color-bar {
top: 62px;
}
#mw-content-container {
margin-top: 66px;
}
/* One gutter for the whole page: the lockup, the navigation text and the
right-hand cards all start 32px in from their edge. Timeless uses 15px on
the outside and insets the navigation separately, so the logo, the nav and
the rail each began at a different x. */
#mw-header,
#mw-content-block {
padding-left: 32px;
padding-right: 32px;
}
#mw-content-block {
padding-top: 2rem;
}
/* Left navigation: no card behind it. The card's own top inset is what
pushed "Get started" below the top of the article; without a card it is
just a hole. */
#mw-site-navigation .sidebar-chunk {
background: transparent;
border: 0;
box-shadow: none;
margin-top: 0;
padding-top: 0;
padding-left: 0;
}
/* Timeless insets the first chunk, which left the rail hanging below the top
of the article instead of lining up with it. */
#mw-related-navigation .sidebar-chunk:first-child {
margin-top: 0;
}
#mw-related-navigation .sidebar-chunk {
background: #fff;
border: 0;
border-radius: 10px;
box-shadow: 0 1px 2px rgba( 9, 30, 66, 0.08 ), 0 4px 12px rgba( 9, 30, 66, 0.06 );
padding-bottom: 0.9rem;
}
/* Both rails scroll with the page (see the sticky rules above); the
scrollbar gutter that came with it cut a grey strip between the
navigation and the article. */
#mw-site-navigation,
#mw-related-navigation {
scrollbar-width: none;
}
#mw-site-navigation::-webkit-scrollbar,
#mw-related-navigation::-webkit-scrollbar {
width: 0;
height: 0;
}
}
/* ---------------------------------------------------------------------------
Hide the Page / Discussion namespace tabs — Trello 4TyPgtP9 "Hide Page/
Discussion buttons". Readers only ever view articles here and the talk
namespace is unused; the tabs just add chrome. Editing tools stay in the
right-hand rail, which this does not touch.
--------------------------------------------------------------------------- */
#p-namespaces {
display: none;
}
