WorkingClassKid: Created page with " /* All CSS here will be loaded for users of the Citizen skin / :root { --width-layout: 1800px; --border-mw-color-base: var(--border-color-interactive); / citizen default is --border-color-base / --background-mw-0: var(--color-surface-0); / heading / --background-mw-1: var(--color-surface-1); / normal / --background-mw-2: var(--color-surface-2); / odd / --background-mw-3: var(--color-surface-3); / even */ --background-mw-4: var(--co..."

2026-03-22T12:53:51Z

Created page with " All CSS here will be loaded for users of the Citizen skin: :root { --width-layout: 1800px; --border-mw-color-base: var(--border-color-interactive); citizen default is --border-color-base: --background-mw-0: var(--color-surface-0); heading: --background-mw-1: var(--color-surface-1); normal: --background-mw-2: var(--color-surface-2); odd: --background-mw-3: var(--color-surface-3); even: --background-mw-4: var(--co..."

New page

/* All CSS here will be loaded for users of the Citizen skin */

:root {
--width-layout: 1800px;
--border-mw-color-base: var(--border-color-interactive); /* citizen default is --border-color-base */
--background-mw-0: var(--color-surface-0); /* heading */
--background-mw-1: var(--color-surface-1); /* normal */
--background-mw-2: var(--color-surface-2); /* odd */
--background-mw-3: var(--color-surface-3); /* even */
--background-mw-4: var(--color-surface-4);
}

/* light theme */
:root.skin-theme-clientpref-day {
--color-mw-light: var(--color-surface-0);
}

/* dark theme */
:root.skin-theme-clientpref-night {
--color-mw-light: var(--color-base);
--color-pz-subtle: #404347;
--background-message-error: var(--background-color-error-subtle);
--background-message-warn: var(--background-color-warning-subtle);
--background-message-info: #19192b;
--background-message-success: #041602;
--border-message-error: 1px solid var(--border-color-error, #9f3526);
--border-message-warn: 1px solid var(--border-color-warning, #987027);
--border-message-info: 1px solid #3366cc;
--border-message-success: 1px solid #4d2;
}

/* dark theme: os pref (auto) */
@media screen and (prefers-color-scheme: dark) {
:root.skin-theme-clientpref-os {
--color-mw-light: var(--color-base);
--color-pz-subtle: #404347;
--background-message-error: var(--background-color-error-subtle);
--background-message-warn: var(--background-color-warning-subtle);
--background-message-info: #19192b;
--background-message-success: #041602;
--border-message-error: 1px solid var(--border-color-error,#9f3526);
--border-message-warn: 1px solid var(--border-color-warning,#987027);
--border-message-info: 1px solid #3366cc;
--border-message-success: 1px solid #4d2;
}
}

/* pure black theme (extension of dark theme) */
:root.skin-citizen-pure-black {
--background-message-success: #041602;
--border-message-success: 1px solid #4d2;
}

/* pure black theme: os pref dark (auto) */
@media screen and (prefers-color-scheme: dark) {
:root.skin-theme-clientpref-os.citizen-feature-pure-black-clientpref-1 {
--background-message-success: #041602;
--border-message-success: 1px solid #4d2;
}
}

/* switch to vector skin sidebar message */
#n-vector-opt-out {
display: list-item;
}

/* Template:Infobox */
div.infobox div.infobox-image > div.infobox-gallery img:hover {
background: var(--background-mw-2);
box-shadow: 0 0 0.25em var(--border-mw-color-base);
}
div.infobox div.infobox-image > div.infobox-gallery img.selected {
background: var(--background-mw-2);
box-shadow: 0 0 0.25em var(--border-mw-color-base) inset;
}
div.infobox div.infobox-item > div:first-child > div.floatright {
margin-left: 0;
}
div.infobox div.infobox-item > div:first-child {
width: 45%;
}

/* Sitenotice - resize with user defined screen-wdith */
.sitenotice {
display: grid;
grid-template-columns: 1fr minmax(0, var(--width-layout)) 1fr;
transition-timing-function: var(--transition-timing-function-ease);
transition-duration: var(--transition-duration-medium)
}
.sitenotice-card {
grid-column: 2;
}

/* Div based "system" style messages (system messages). */
div.mw-lag-warn-normal, div.noarticletext, div.fmbox-system {
border: 1px solid var(--border-color-base);
background-color: var(--color-surface-2);
}

/* Error message */
div.mw-warning-with-logexcerpt,
div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning {
border: var(--border-message-warn);
background: var(--background-message-warn);
}

/* Responsive elements */
/* Mobile/small displays */
@media screen and (max-width: 720px) {
div.infobox,
div.userbox-showcase,
div.userbox-showcase div.userbox {
max-width: none;
width: 100%;
}
.quote {
clear: both;
}
}
/* Less than citizen's "Standard" screen size */
@media screen and (max-width: 1079px) {
div.citizen-overflow-wrapper:has(div.citizen-overflow-content table.wikitable.no-shrink) {
width: 100%;
}
}
/* Less than citizen's 'Standard' screen size */
/* Range is between before TOC and sidebar collapse */
/* <1120px is the point the sidebar and TOC collapse */
/* 1479px is when the content area begins to shrink with 'Standard' screen size */
@media screen and (min-width: 1120px) and (max-width: 1479px) {
div.citizen-overflow-wrapper:has(div.citizen-overflow-content table.wikitable.no-shrink) {
width: 100%;
}
}

/* h2 */
h2 {
padding-bottom: 0.2em;
border-bottom: 2px solid var(--color-surface-4);
}
h2.citizen-section-heading:has(+ .citizen-section[hidden]) { /* h2 collapsed */
border-bottom: 2px solid var(--color-surface-2);
}

/* wikitable */
table.wikitable th {
text-align: center;
}
/* Change to the same as body background */
table.wikitable tr,
.sticky-column td:first-child {
background-color: var(--background-mw-0);
}
/* reduce wikitbale padding added by citizen */
table.wikitable > * > tr > td,
table.wikitable > * > tr > th {
padding: 0.2em; /* default is `var(--space-xs) var(--space-sm)` (0.5rem x 0.75rem) */
}
/* Highlight targetted table row */
table.wikitable tr:target,
.highlight-target:target {
background-color: var(--background-color-warning-subtle);
}
/* Remove border-top from caption (and other elements) */
.wikitable > :where(caption,tr,thead,tbody,tfoot):not([hidden]) ~ :where(caption,tr,thead,tbody,tfoot):not([hidden]) {
border-top: none;
}
/* Add border radius to bottom of first row when collapsed */
table.wikitable.mw-collapsed tr td:first-child,
table.wikitable.mw-collapsed tr th:first-child {
border-bottom-left-radius: var(--border-radius);
}
table.wikitable.mw-collapsed tr td:last-child,
table.wikitable.mw-collapsed tr th:last-child {
border-bottom-right-radius: var(--border-radius);
}

/* Template:Item_list */
div.itemlist:hover {
border-color: var(--color-progressive--hover);
}
div.itemlist:hover.itemlist-dropdown {
box-shadow: var(--box-shadow-drop-medium);
}
div.itemlist div.itemlist-data {
width: 96px;
background-color: var(--color-surface-1);
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
box-shadow: var(--box-shadow-drop-xx-large);
border-right: 1px solid var(--color-progressive--hover);
border-left: 1px solid var(--color-progressive--hover);
border-bottom: 1px solid var(--color-progressive--hover);
}

/* list-columns: remove extra margin */
.list-columns > ul > li:first-child,
.list-columns > ol > li:first-child {
margin-top:-1em;
}

/* remove img scale on hover */
figure[typeof~='mw:File'] > a:first-child:hover:not(.lazy):not(.new) img,
figure[typeof~='mw:File/Frameless'] > a:first-child:hover:not(.lazy):not(.new) img,
figure[typeof~='mw:File/Thumb'] > a:first-child:hover:not(.lazy):not(.new) img,
figure[typeof~='mw:File/Frame'] > a:first-child:hover:not(.lazy):not(.new) img,
figure[typeof~='mw:File'] > a:first-child:hover:not(.lazy):not(.new) source,
figure[typeof~='mw:File/Frameless'] > a:first-child:hover:not(.lazy):not(.new) source,
figure[typeof~='mw:File/Thumb'] > a:first-child:hover:not(.lazy):not(.new) source,
figure[typeof~='mw:File/Frame'] > a:first-child:hover:not(.lazy):not(.new) source {
transform: none;
}

/* remove img effects on file page */
#file.fullImageLink > a {
box-shadow: none;
}
.filehistory a img,
#file.fullImageLink img {
background-color: inherit;
transition: 0;
}
#file.fullImageLink img:hover {
background-color: inherit;
}
#file.fullImageLink > a:hover img {
transform: none;
}

/* remove extra spacing between list levels */
.mw-content-ltr ul li > ul,
.mw-content-ltr ol li > ol {
margin: 0 0 0 var(--space-lg)
}

/* invert icons on light theme */
.skin-theme-clientpref-day #footer-tagline, /* footer icons */
.skin-theme-clientpref-day .logo-light {
filter: invert(1);
}

/* invert icons on dark theme */
.skin-theme-clientpref-night .logo-dark,
.skin-theme-clientpref-os.citizen-feature-pure-black-clientpref-1 .logo-dark,
.skin-theme-clientpref-night .redirectText li:first-child,
.skin-theme-clientpref-night .redirectText li:first-child a { /* invert text again to return to normal */
filter: invert(1);
}
/* OS dark theme (auto) */
@media screen and (prefers-color-scheme: dark) {
.skin-theme-clientpref-os .logo-dark {
filter: invert(1);
}
}

/* improve separation between lines on Special:NewPages */
.not-patrolled {
border-radius: var(--border-radius-base);
margin: 2px 0
}

/* TESTING: Heading 3 toggle */
div.toggle-heading-container {
position: relative;
}
div.toggle-heading.indent {
padding-left: 30px
}
div.toggle-heading:not(.indent)::before {
content: url(/w/load.php?modules=skins.citizen.icons&image=collapse&format=original&skin=citizen&version=1pors);
position: absolute;
top: 4px;
height: 18px;
margin-right: 4px;
opacity: var(--opacity-icon-base);
filter: var(--filter-invert);
background-repeat: no-repeat;
background-size: contain;
}
div.mw-collapsed + div.toggle-heading:not(.indent)::before {
transform: rotate3d(1,0,0,180deg);
top: 8px;
}

/* CITIZEN BUG FIXES */
/* Citizen bug fix: thumb with link adding unnecessary padding. */
.thumbinner > a:not(.image) {
padding: 0;
}
/* Remove extra box-shadow (border) added to div table wrapper, causing a border to appear around a caption */
.citizen-overflow-wrapper:has(.citizen-overflow-content > .wikitable) {
box-shadow: none;
margin-top: 0; /* not part of bug fix - remove margin above tables */
}
/* Fix rounded corners for highlight code blocks (rounded corners added to <pre> but not the parent <div> that has a background) */
.skin-citizen .mw-highlight:has(pre) {
border-radius: var(--border-radius-large)
}
/* Fix line height being less than font height (small label beneath heading - #contentSub and #contentSub2 overlap if both present, e.g. delete on an already deleted page) */
#siteSub, #contentSub, #contentSub2 {
line-height: var(--line-height-medium)
}
/* Fix MsUpload icon positioning and hover and source editor widget */
#msupload-container {
padding: 0;
}
#msupload-select {
width: 42px;
height: 42px;
background: none;
filter: none;
}
#msupload-select::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3E upload %3C/title%3E%3Cpath d='M17 12v5H3v-5H1v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5z'/%3E%3Cpath d='M10 1 5 7h4v8h2V7h4z'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
transform: translate(35%, 25%);
filter: var(--filter-invert);
}
#msupload-container:hover {
background-color: var(--background-color-button-quiet--hover);
border-radius: var(--border-radius-base);
}
/* Fix white background color for search thumbnail */
.cdx-thumbnail__image {
background-color: var(--background-color-interactive-subtle);
}
/* Fix cite highlight */
ol.references li:target,
sup.reference:target {
background-color: var(--background-color-warning-subtle);
}
/* All CSS here will be loaded for users of the Citizen skin */

/* All CSS here will be loaded for users of the Citizen skin */

:root {
--width-layout: 1800px;
--border-mw-color-base: var(--border-color-interactive); /* citizen default is --border-color-base */
--background-mw-0: var(--color-surface-0); /* heading */
--background-mw-1: var(--color-surface-1); /* normal */
--background-mw-2: var(--color-surface-2); /* odd */
--background-mw-3: var(--color-surface-3); /* even */
--background-mw-4: var(--color-surface-4);
}

/* light theme */
:root.skin-theme-clientpref-day {
--color-mw-light: var(--color-surface-0);
}

/* dark theme */
:root.skin-theme-clientpref-night {
--color-mw-light: var(--color-base);
--color-pz-subtle: #404347;
--background-message-error: var(--background-color-error-subtle);
--background-message-warn: var(--background-color-warning-subtle);
--background-message-info: #19192b;
--background-message-success: #041602;
--border-message-error: 1px solid var(--border-color-error, #9f3526);
--border-message-warn: 1px solid var(--border-color-warning, #987027);
--border-message-info: 1px solid #3366cc;
--border-message-success: 1px solid #4d2;
}

/* dark theme: os pref (auto) */
@media screen and (prefers-color-scheme: dark) {
:root.skin-theme-clientpref-os {
--color-mw-light: var(--color-base);
--color-pz-subtle: #404347;
--background-message-error: var(--background-color-error-subtle);
--background-message-warn: var(--background-color-warning-subtle);
--background-message-info: #19192b;
--background-message-success: #041602;
--border-message-error: 1px solid var(--border-color-error,#9f3526);
--border-message-warn: 1px solid var(--border-color-warning,#987027);
--border-message-info: 1px solid #3366cc;
--border-message-success: 1px solid #4d2;
}
}

/* pure black theme (extension of dark theme) */
:root.skin-citizen-pure-black {
--background-message-success: #041602;
--border-message-success: 1px solid #4d2;
}

/* pure black theme: os pref dark (auto) */
@media screen and (prefers-color-scheme: dark) {
:root.skin-theme-clientpref-os.citizen-feature-pure-black-clientpref-1 {
--background-message-success: #041602;
--border-message-success: 1px solid #4d2;
}
}

/* switch to vector skin sidebar message */
#n-vector-opt-out {
display: list-item;
}

/* Template:Infobox */
div.infobox div.infobox-image > div.infobox-gallery img:hover {
background: var(--background-mw-2);
box-shadow: 0 0 0.25em var(--border-mw-color-base);
}
div.infobox div.infobox-image > div.infobox-gallery img.selected {
background: var(--background-mw-2);
box-shadow: 0 0 0.25em var(--border-mw-color-base) inset;
}
div.infobox div.infobox-item > div:first-child > div.floatright {
margin-left: 0;
}
div.infobox div.infobox-item > div:first-child {
width: 45%;
}

/* Sitenotice - resize with user defined screen-wdith */
.sitenotice {
display: grid;
grid-template-columns: 1fr minmax(0, var(--width-layout)) 1fr;
transition-timing-function: var(--transition-timing-function-ease);
transition-duration: var(--transition-duration-medium)
}
.sitenotice-card {
grid-column: 2;
}

/* Div based "system" style messages (system messages). */
div.mw-lag-warn-normal, div.noarticletext, div.fmbox-system {
border: 1px solid var(--border-color-base);
background-color: var(--color-surface-2);
}

/* Error message */
div.mw-warning-with-logexcerpt,
div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning {
border: var(--border-message-warn);
background: var(--background-message-warn);
}

/* Responsive elements */
/* Mobile/small displays */
@media screen and (max-width: 720px) {
div.infobox,
div.userbox-showcase,
div.userbox-showcase div.userbox {
max-width: none;
width: 100%;
}
.quote {
clear: both;
}
}
/* Less than citizen's "Standard" screen size */
@media screen and (max-width: 1079px) {
div.citizen-overflow-wrapper:has(div.citizen-overflow-content table.wikitable.no-shrink) {
width: 100%;
}
}
/* Less than citizen's 'Standard' screen size */
/* Range is between before TOC and sidebar collapse */
/* <1120px is the point the sidebar and TOC collapse */
/* 1479px is when the content area begins to shrink with 'Standard' screen size */
@media screen and (min-width: 1120px) and (max-width: 1479px) {
div.citizen-overflow-wrapper:has(div.citizen-overflow-content table.wikitable.no-shrink) {
width: 100%;
}
}

/* h2 */
h2 {
padding-bottom: 0.2em;
border-bottom: 2px solid var(--color-surface-4);
}
h2.citizen-section-heading:has(+ .citizen-section[hidden]) { /* h2 collapsed */
border-bottom: 2px solid var(--color-surface-2);
}

/* wikitable */
table.wikitable th {
text-align: center;
}
/* Change to the same as body background */
table.wikitable tr,
.sticky-column td:first-child {
background-color: var(--background-mw-0);
}
/* reduce wikitbale padding added by citizen */
table.wikitable > * > tr > td,
table.wikitable > * > tr > th {
padding: 0.2em; /* default is `var(--space-xs) var(--space-sm)` (0.5rem x 0.75rem) */
}
/* Highlight targetted table row */
table.wikitable tr:target,
.highlight-target:target {
background-color: var(--background-color-warning-subtle);
}
/* Remove border-top from caption (and other elements) */
.wikitable > :where(caption,tr,thead,tbody,tfoot):not([hidden]) ~ :where(caption,tr,thead,tbody,tfoot):not([hidden]) {
border-top: none;
}
/* Add border radius to bottom of first row when collapsed */
table.wikitable.mw-collapsed tr td:first-child,
table.wikitable.mw-collapsed tr th:first-child {
border-bottom-left-radius: var(--border-radius);
}
table.wikitable.mw-collapsed tr td:last-child,
table.wikitable.mw-collapsed tr th:last-child {
border-bottom-right-radius: var(--border-radius);
}

/* Template:Item_list */
div.itemlist:hover {
border-color: var(--color-progressive--hover);
}
div.itemlist:hover.itemlist-dropdown {
box-shadow: var(--box-shadow-drop-medium);
}
div.itemlist div.itemlist-data {
width: 96px;
background-color: var(--color-surface-1);
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
box-shadow: var(--box-shadow-drop-xx-large);
border-right: 1px solid var(--color-progressive--hover);
border-left: 1px solid var(--color-progressive--hover);
border-bottom: 1px solid var(--color-progressive--hover);
}

/* list-columns: remove extra margin */
.list-columns > ul > li:first-child,
.list-columns > ol > li:first-child {
margin-top:-1em;
}

/* remove img scale on hover */
figure[typeof~='mw:File'] > a:first-child:hover:not(.lazy):not(.new) img,
figure[typeof~='mw:File/Frameless'] > a:first-child:hover:not(.lazy):not(.new) img,
figure[typeof~='mw:File/Thumb'] > a:first-child:hover:not(.lazy):not(.new) img,
figure[typeof~='mw:File/Frame'] > a:first-child:hover:not(.lazy):not(.new) img,
figure[typeof~='mw:File'] > a:first-child:hover:not(.lazy):not(.new) source,
figure[typeof~='mw:File/Frameless'] > a:first-child:hover:not(.lazy):not(.new) source,
figure[typeof~='mw:File/Thumb'] > a:first-child:hover:not(.lazy):not(.new) source,
figure[typeof~='mw:File/Frame'] > a:first-child:hover:not(.lazy):not(.new) source {
transform: none;
}

/* remove img effects on file page */
#file.fullImageLink > a {
box-shadow: none;
}
.filehistory a img,
#file.fullImageLink img {
background-color: inherit;
transition: 0;
}
#file.fullImageLink img:hover {
background-color: inherit;
}
#file.fullImageLink > a:hover img {
transform: none;
}

/* remove extra spacing between list levels */
.mw-content-ltr ul li > ul,
.mw-content-ltr ol li > ol {
margin: 0 0 0 var(--space-lg)
}

/* invert icons on light theme */
.skin-theme-clientpref-day #footer-tagline, /* footer icons */
.skin-theme-clientpref-day .logo-light {
filter: invert(1);
}

/* invert icons on dark theme */
.skin-theme-clientpref-night .logo-dark,
.skin-theme-clientpref-os.citizen-feature-pure-black-clientpref-1 .logo-dark,
.skin-theme-clientpref-night .redirectText li:first-child,
.skin-theme-clientpref-night .redirectText li:first-child a { /* invert text again to return to normal */
filter: invert(1);
}
/* OS dark theme (auto) */
@media screen and (prefers-color-scheme: dark) {
.skin-theme-clientpref-os .logo-dark {
filter: invert(1);
}
}

/* improve separation between lines on Special:NewPages */
.not-patrolled {
border-radius: var(--border-radius-base);
margin: 2px 0
}

/* TESTING: Heading 3 toggle */
div.toggle-heading-container {
position: relative;
}
div.toggle-heading.indent {
padding-left: 30px
}
div.toggle-heading:not(.indent)::before {
content: url(/w/load.php?modules=skins.citizen.icons&image=collapse&format=original&skin=citizen&version=1pors);
position: absolute;
top: 4px;
height: 18px;
margin-right: 4px;
opacity: var(--opacity-icon-base);
filter: var(--filter-invert);
background-repeat: no-repeat;
background-size: contain;
}
div.mw-collapsed + div.toggle-heading:not(.indent)::before {
transform: rotate3d(1,0,0,180deg);
top: 8px;
}

/* CITIZEN BUG FIXES */
/* Citizen bug fix: thumb with link adding unnecessary padding. */
.thumbinner > a:not(.image) {
padding: 0;
}
/* Remove extra box-shadow (border) added to div table wrapper, causing a border to appear around a caption */
.citizen-overflow-wrapper:has(.citizen-overflow-content > .wikitable) {
box-shadow: none;
margin-top: 0; /* not part of bug fix - remove margin above tables */
}
/* Fix rounded corners for highlight code blocks (rounded corners added to <pre> but not the parent <div> that has a background) */
.skin-citizen .mw-highlight:has(pre) {
border-radius: var(--border-radius-large)
}
/* Fix line height being less than font height (small label beneath heading - #contentSub and #contentSub2 overlap if both present, e.g. delete on an already deleted page) */
#siteSub, #contentSub, #contentSub2 {
line-height: var(--line-height-medium)
}
/* Fix MsUpload icon positioning and hover and source editor widget */
#msupload-container {
padding: 0;
}
#msupload-select {
width: 42px;
height: 42px;
background: none;
filter: none;
}
#msupload-select::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3E upload %3C/title%3E%3Cpath d='M17 12v5H3v-5H1v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5z'/%3E%3Cpath d='M10 1 5 7h4v8h2V7h4z'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
transform: translate(35%, 25%);
filter: var(--filter-invert);
}
#msupload-container:hover {
background-color: var(--background-color-button-quiet--hover);
border-radius: var(--border-radius-base);
}
/* Fix white background color for search thumbnail */
.cdx-thumbnail__image {
background-color: var(--background-color-interactive-subtle);
}
/* Fix cite highlight */
ol.references li:target,
sup.reference:target {
background-color: var(--background-color-warning-subtle);
}

MediaWiki:Citizen.css - Revision history