wikipedia>Synpath: Design tokens for responsive colouring in dark mode. If these do not match a desired style see mw:Recommendations_for_night_mode_compatibility_on_Wikimedia_wikis for other options.

2025-10-25T18:39:06Z

Design tokens for responsive colouring in dark mode. If these do not match a desired style see mw:Recommendations_for_night_mode_compatibility_on_Wikimedia_wikis for other options.

New page

.tpl-quote-article-content {
/* border: 1px solid var(--border-color-subtle, #c8ccd1); */
display: block;
box-sizing: border-box;
overflow: hidden;
padding: 1em;
margin: 1em 1.5em;
padding-left: 1.5em;
border: 1px solid var(--border-color-muted, #dadde3);
border-radius: 1px;
background-color: #f9f9f9d9;
background-color: var(--background-color-neutral-subtle, #f8f9fa);
}

/* This replicates the margin/padding given to blockquotes, without having
* to use that element and inherit its implicit semantics.
*/
.tpl-blockquote-container {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 2em;
margin-inline-end: 2em;
}

.tpl-blockquote-text {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
unicode-bidi: isolate;
}

/* Get rid of unequal top/bottom padding. For example, if the content starts
* with a <div> from a hatnote and ends with a <p> element, it will be uneven
* as the <div> has no implicit styles but the <p> elements does have that
* assigned by user style sheet. Add more elements here as needed.
*/
.tpl-quote-article-content p:last-child {
margin-bottom: inherit;
}

/* Nice paragraph spacing between <p> elements for example but not if first
* or last child or orphans, as then it looks too spaced out.
*/
.tpl-blockquote-text > :last-child {
margin-bottom: 0;
}

.tpl-blockquote-text > :first-child {
margin-top: 0;
}

.tpl-quote-article-content-text {
overflow: hidden;
color: var(--color-base, #202122);
}

/* @Discouraged. Make available the ability to replicate [[Template:Xt]]
* styles and related templates. Legacy way of presenting article quoted text.
*/
.tpl-quote-article-content--color-green {
color: var(--color-content-added, #006400);
/* font-family: serif; */
}

.tpl-quote-article-content--drop-target {
background-color: #f9f9f9d9;
background-color: var(--background-color-neutral-subtle, #f9f9f9d9);
transition-property: background-color, color, border-color;
transition-duration: 100ms;
border: 1px dashed var(--border-color-muted, #dadde3);
border-radius: 2px;
vertical-align: middle;
overflow: hidden;
}

.tpl-quote-article-content--drop-target:hover {
border-color: #72777d;
}

Template:Quote article content/styles.css - Revision history

wikipedia>Synpath: Design tokens for responsive colouring in dark mode. If these do not match a desired style see mw:Recommendations_for_night_mode_compatibility_on_Wikimedia_wikis for other options.