MediaWiki:Citizen.css

/* All CSS here will be loaded for users of the Citizen skin */ /* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700'); */ /* latin */ @font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/notosans/v27/o-0IIpQlx3QUlC5A4PNr5TRA.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: 'Noto Sans'; font-style: italic; font-weight: 400; src: url(https://fonts.gstatic.com/s/notosans/v27/o-0OIpQlx3QUlC5A4PNr4ARCQ_k.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: 'Noto Sans'; font-style: normal; font-weight: 700; src: url(https://fonts.gstatic.com/s/notosans/v27/o-0NIpQlx3QUlC5A4PNjXhFVZNyB.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: 'Noto Sans'; font-style: italic; font-weight: 700; src: url(https://fonts.gstatic.com/s/notosans/v27/o-0TIpQlx3QUlC5A4PNr4Az5ZuyDzW0.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 */ .mw-header, .mw-body-header, .mw-body-content h1, .mw-body-content h2, .portable-infobox .pi-title, .portable-infobox .pi-header, .mw-footer { font-family: 'Noto Sans','Roboto',system-ui,-apple-system,sans-serif; }

/* Wordmark */ .citizen-header .mw-logo-wordmark { height: 1.5rem; width: auto; max-width: 100%; object-fit: contain; } .mw-footer .mw-logo-wordmark { height: 2rem !important; filter: none !important; } .skin-citizen-dark .mw-footer .mw-logo-wordmark { filter: invert(1) hue-rotate(180deg) !important; }

/* Heading */ .mw-body-content h1, .mw-body-content h2 { border-bottom: 1px solid var(--border-color-base); } .mw-body-content h3 span:not(.mw-headline), .mw-body-content h4 span:not(.mw-headline) { margin-left: -0.75rem; } .client-js .section-heading { user-select: auto; } .client-js .section-heading span:not(.mw-headline) { margin-left: -0.75rem; }

/* Message box */ .mw-message-box, .messagebox, .errorbox, .warningbox, .successbox { border: 1px solid var(--color-base); background-color: var(--background-color-framed); color: var(--color-base--emphasized); box-sizing: border-box; margin-bottom: 16px; padding: 12px 24px; word-wrap: break-word; overflow: hidden; } .errorbox { border-color: var(--color-error); background-color: var(--background-color-destructive); } .warningbox { border-color: var(--color-warning); background-color: var(--background-color-warning); } .successbox { border-color: var(--color-success); background-color: var(--background-color-success); }	max-width: var(--width-layout); margin-right: auto; margin-left: auto; position: relative; }
 * 1) siteNotice {

/* Gallery */ .gallery { max-width: 100%; } .mw-gallery-nolines .gallerybox .thumb { background-color: var(--color-surface-2) !important; } .mw-gallery-nolines img { border-radius: var(--border-radius--small); } @media only screen and (max-width:576px) { ul.gallery { margin: 0.8rem 0 0 0.8rem; } }

/* Table */ table.wikitable > tr > th, table.wikitable > * > tr > th { text-align: center; padding: 10px 0 10px 0; background-color: var(--color-surface-3); color: var(--color-base--emphasized); } table.wikitable tr > th:nth-last-child(n+2), table.wikitable > * > tr > th:nth-last-child(n+2) { border-right: 1px solid var(--border-color-base); } table.wikitable tr td { padding: 10px; } table.wikitable tr td table:not(.wikitable) tr td { padding: inherit; }

/* HotCat */ .mw-footer { margin-top: calc(var(--padding-page) * 2); } .catlinks .mw-normal-catlinks { font-size: inherit; } .catlinks .mw-normal-catlinks > a { display: inline; } .catlinks .mw-normal-catlinks > ul li, .catlinks .mw-hidden-catlinks > ul li { overflow: visible; min-height: 1.75rem; } .catlinks .mw-normal-catlinks > ul li a, .catlinks .mw-hidden-catlinks > ul li a { border-radius: 0; border-top-left-radius: 100px; border-bottom-left-radius: 100px; margin: 0 -2px; } .catlinks .mw-normal-catlinks > ul li a:last-child, .catlinks .mw-hidden-catlinks > ul li a:last-child { border-top-right-radius: 100px; border-bottom-right-radius: 100px; } .catlinks .hotcatlink a { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } .catlinks .hotcatlink a:only-child { border-top-left-radius: 100px !important; border-bottom-left-radius: 100px !important; } .catlinks .hotcatlink a { color: var(--color-link) !important; padding: 8px 3px !important; } .catlinks .hotcatinput { top: 4px; padding: 5px; } .catlinks .hotcatinput input[type=text] { width: 200px; }

/* Actions */ .section-heading--collapsed .mw-editsection { display: none; }
 * 1) p-views { padding-left: 10px; }
 * 2) p-views #ca-edit { order: inherit; }

/* Hide actions icons and show text on mobile */ @media only screen and (max-width:576px) { .page-actions > .mw-portlet li > a { font-size: 0.75rem; padding: 0.5rem; } .page-actions > .mw-portlet li > a::after { display: none; } }

/* Sidebar */ .citizen-drawer__card { overflow-x: hidden; } .citizen-drawer__menu { width: fit-content; font-size: 0.85rem; grid-template-columns: repeat(auto-fit, 14rem); }	background-image: url(/w/load.php?modules=skins.citizen.icons.sitestats&image=articles&format=rasterized&lang=en&skin=citizen&version=js5cg); background-image: linear-gradient(transparent,transparent),url(/w/load.php?modules=skins.citizen.icons.sitestats&image=articles&format=original&lang=en&skin=citizen&version=js5cg); }	background-image: url(/w/load.php?modules=skins.citizen.icons.t&image=info&format=rasterized&skin=citizen&version=tjz65); background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E info %3C/title%3E%3Cg fill=%22%23000%22%3E %3Cpath d=%22M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zM9 5h2v2H9zm0 4h2v6H9z%22/%3E %3C/g%3E%3C/svg%3E"); }	background-image: url(/w/load.php?modules=skins.citizen.icons.sitestats&image=edits&format=rasterized&skin=citizen&version=js5cg); background-image: linear-gradient(transparent,transparent),url(/w/load.php?modules=skins.citizen.icons.sitestats&image=edits&format=original&skin=citizen&version=js5cg); }	background-image: url(/w/load.php?modules=skins.citizen.icons.t&image=upload&format=rasterized&skin=citizen&version=tjz65); background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E upload %3C/title%3E%3Cg fill=%22%23000%22%3E %3Cpath d=%22M17 12v5H3v-5H1v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5z%22/%3E %3Cpath d=%22M10 1 5 7h4v8h2V7h4z%22/%3E %3C/g%3E%3C/svg%3E"); }	background-image: url(/w/load.php?modules=skins.citizen.icons.ca&image=talk&format=rasterized&lang=en&skin=citizen&version=1ftno); background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E speech bubbles %3C/title%3E%3Cg fill=%22%23000%22%3E %3Cpath d=%22M17 4v7a2 2 0 0 1-2 2H4v1a2 2 0 0 0 2 2h10l4 4V6a2 2 0 0 0-2-2zM6 10H0v6z%22/%3E %3Crect width=%2216%22 height=%2212%22 rx=%222%22/%3E %3C/g%3E%3C/svg%3E"); }	background-image: url(/w/load.php?modules=skins.citizen.icons.t&image=recentchangeslinked&format=rasterized&lang=en&skin=citizen&version=tjz65); background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E recent changes %3C/title%3E%3Cg fill=%22%23000%22%3E %3Ccircle cx=%222%22 cy=%224%22 r=%222%22/%3E %3Ccircle cx=%222%22 cy=%2210%22 r=%222%22/%3E %3Ccircle cx=%222%22 cy=%2216%22 r=%222%22/%3E %3Cpath d=%22M6 3h11v2H6zm0 6h6v2H6zm0 6h2v2H6zm12.76-3.11 1.078-1.112a.556.556 0 0 0 0-.783l-1.855-1.833a.556.556 0 0 0-.783 0l-1.09 1.077 2.65 2.65zm-3.227-2.062L10 15.361V18h2.639l5.533-5.533z%22/%3E %3C/g%3E%3C/svg%3E"); } background-image: url(/w/load.php?modules=skins.citizen.icons.t&image=contributions&format=rasterized&lang=en&skin=citizen&version=uhb1f); background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E user contributions %3C/title%3E%3Cg fill=%22%23000%22%3E %3Ccircle cx=%222%22 cy=%224%22 r=%222%22/%3E %3Ccircle cx=%222%22 cy=%2210%22 r=%222%22/%3E %3Ccircle cx=%222%22 cy=%2216%22 r=%222%22/%3E %3Ccircle cx=%2215.5%22 cy=%2210.5%22 r=%222.5%22/%3E %3Cpath d=%22M6 15h3v2H6zm0-6h5v2H6zm0-6h11v2H6zm9.5 10.556c-3.33 0-4.5 1.666-4.5 2.777V18h9v-1.667c0-1.11-1.17-2.777-4.5-2.777z%22/%3E %3C/g%3E%3C/svg%3E"); }
 * 1) n-contents > a::after {
 * 1) n-aboutsite > a::after {
 * 1) n-newpage > a::after {
 * 1) n-upload > a::after {
 * 1) n-portal > a::after {
 * 1) ca-masseditregex > a::after {
 * 1) p-managewiki-sidebar-header a::after { display: none; }
 * 2) t-editcount > a::after {

/* Search box */ .citizen-typeahead-suggestion__title { display: block; } .citizen-typeahead-suggestion__thumbnail img, .citizen-typeahead-suggestion__thumbnail source { object-position: top; }

/* TOC */ @media screen and (min-width: 1300px) { .toc { background-color: var(--color-surface-2); z-index: 1; top: -2rem; bottom: 0; padding-top: 5rem; } } @media screen and (min-width: 1300px) and (max-height: 800px) { .citizen-body-header--sticky .toc { transform: translateY(0.7rem) !important; }	.citizen-body-header--sticky .toc #mw-toc-heading { border-top: 1px solid var(--border-color-base); } } .toclevel-1 .toctext { color: var(--color-primary); } .toclevel-2 .toctext, .toclevel-3 .toctext, .toclevel-4 .toctext, .toclevel-5 .toctext, .toclevel-6 .toctext { color: inherit } .tocnumber { font-size: 0; } .toc a { padding-left: 17px; } .toclevel-2, .toclevel-3, .toclevel-4, .toclevel-5, .toclevel-6 { margin-left: 20px !important; } .tocnumber::after { content: '+/-'; font-size: 14px; color: transparent; background-image: url(/w/load.php?modules=skins.citizen.icons.sections&image=collapse&format=original&skin=citizen&version=zofk6); background-size: 12px; background-repeat: no-repeat; background-position: center; float: left; margin-left: -18px; transition: transform 250ms; transform: rotate3d(0,0,1,180deg); } .collapsed .tocnumber::after { transform: rotate3d(0,0,1,90deg); }
 * 1) mw-toc-heading { border: none; }

/* Navbox */ .navbox, .navbox-subgroup { background-color: var(--color-surface-1); } .navbox-list { border-color: var(--color-surface-1); } tr + tr > .navbox-abovebelow, tr + tr > .navbox-group, tr + tr > .navbox-image, tr + tr > .navbox-list {   /* Borders above 2nd, 3rd, etc. rows */ border-top: 2px solid var(--color-surface-1); } .navbox th, .navbox-title { background-color: var(--color-surface-4);     /* Level 1 color */ } .navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title { background-color: var(--color-surface-3);     /* Level 2 color */ } .navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background-color: var(--color-surface-2);     /* Level 3 color */ } .navbox-even { background-color: var(--color-surface-2);     /* Even row striping */ }

/* Media player */ .oo-ui-windowManager-modal > .oo-ui-dialog { z-index: 99; } .mw-tmh-player.audio .mw-tmh-play {	background-color: var(--color-link); background-position: left; }

/* Dark mode fix */ .skin-citizen-dark .tocnumber::after, .skin-citizen-dark .mwe-math-element { filter: invert(1); } .skin-citizen-dark #msupload-list .file-name-input { background: var(--background-color-input); } .skin-citizen-dark .ui-state-default { background: var(--background-color-input); } .skin-citizen-dark #siteNotice { color: var(--color-surface-4); } .skin-citizen-dark .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input[readonly]:not(.oo-ui-pendingElement-pending) { background-color: var(--color-surface---active); }

/* Remove external link icons */ .plainlinks a.external::after { display: none; }

/* Emphasized */ .emphasized { color: var(--color-base--emphasized); }

/* Footer */ @media screen and (min-width: 1300px) { .mw-footer { padding-right: calc(var(--width-toc) + var(--space-sm) * 2); } }	flex-direction: row; margin-top: 20px; }
 * 1) footer-places ul {