MediaWiki:Citizen.css

/* All CSS here will be loaded for users of the Citizen skin */ /* @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700'); */ /* latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.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: italic; font-weight: 400; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1Mu51xIIzI.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: 600; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBBc4.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: italic; font-weight: 600; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TzBic6CsQ.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; } /* @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: 600; 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: 600; 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, .infobox th[colspan], .mw-footer { font-family: 'Noto Sans','Roboto',system-ui,-apple-system,sans-serif; }

/* Wordmark */ .mw-footer .mw-logo-wordmark { height: 2rem; width: auto; 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); } .client-js .section-heading { user-select: auto; } .citizen-sections-enabled .section-indicator { margin-right: 6px; }

/* Message box */ .mw-message-box { border: 1px solid var(--color-base); margin-bottom: 1em; } .mw-message-box-error {	border-color: var(--color-error); } .mw-message-box-warning { border-color: var(--color-warning); } .mw-message-box-success { border-color: var(--color-success); }
 * 1) siteNotice { max-width: calc( var(--width-layout) + var(--width-toc) ); margin: auto; }

/* Gallery */ .mw-gallery-nolines .gallerybox .thumb { background-color: var(--color-surface-2) !important; } .mw-gallery-nolines img { border-radius: var(--border-radius--small); } @media screen { a.image:hover:not(.lazy):not(.new) > img { filter: brightness(1.1); transform: none !important; } }

/* Table */ table.wikitable > tr > th, table.wikitable > * > tr > th { text-align: center; padding: var(--space-xs) 0 var(--space-xs) 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: var(--space-xs); } table.wikitable tr td table:not(.wikitable) tr td { padding: inherit; } table.wikitable caption { padding: 0; }

/* HotCat */ .catlinks .mw-normal-catlinks { font-size: 0.8125rem; } .catlinks .mw-normal-catlinks > a { display: inline; } .catlinks .mw-normal-catlinks > ul li a, .catlinks .mw-hidden-catlinks > ul li a { margin: 0 -2px; border: 1px solid var(--border-color-base--darker); border-radius: 0; border-top-left-radius: 100px; border-bottom-left-radius: 100px; } .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 li { display: inline-flex; } .catlinks .hotcatlink { white-space: nowrap; margin: calc( var(--space-xs) + 1px) 3px; } .catlinks .hotcatlink a { padding: calc( var(--space-xs) + 1px) 3px !important; 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:hover { background-color: var(--color-primary--hover); color: #fff; } .catlinks .hotcatinput { top: var(--space-xs); } .catlinks .hotcatinput input[type=text] { width: 200px; }

/* Actions */ .section-heading--collapsed .mw-editsection { display: none; } .page-actions__card a { width: 100% } .page-actions__card { overflow-x: hidden; }
 * 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 span { display: none; } .page-actions > .mw-portlet li > a::before { 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); }
 * 1) p-All_Menu { display: block; }

display: block; content: 'icon'; width: 16px; color: transparent; opacity: 0.6; background-size: contain; background-repeat: no-repeat; } .skin-citizen-dark #n-contents > a::before, .skin-citizen-dark #n-aboutsite > a::before, .skin-citizen-dark #n-newpage > a::before, .skin-citizen-dark #n-upload > a::before, .skin-citizen-dark #n-portal > a::before { filter: invert(1) hue-rotate(180deg) !important; }	background-image: url(/w/load.php?modules=skins.citizen.icons.wmui&image=article&format=rasterized&lang=en&skin=citizen&version=imtxr); background-image: linear-gradient(transparent,transparent),url(/w/load.php?modules=skins.citizen.icons.wmui&image=article&format=original&lang=en&skin=citizen&version=imtxr); }	background-image: url(/w/load.php?modules=skins.citizen.icons.wmui&image=infoFilled&format=rasterized&lang=en&skin=citizen&version=imtxr); background-image: linear-gradient(transparent,transparent),url(/w/load.php?modules=skins.citizen.icons.wmui&image=infoFilled&format=original&lang=en&skin=citizen&version=imtxr); }	background-image: url(/w/load.php?modules=skins.citizen.icons.wmui&image=edit&format=rasterized&skin=citizen&version=imtxr); background-image: linear-gradient(transparent,transparent),url(/w/load.php?modules=skins.citizen.icons.wmui&image=edit&format=original&skin=citizen&version=imtxr); }	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-image: linear-gradient(transparent,transparent),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-image: url(/w/load.php?modules=skins.citizen.icons.wmui&image=speechBubbles&format=rasterized&lang=en&skin=citizen&version=imtxr); background-image: linear-gradient(transparent,transparent),url(/w/load.php?modules=skins.citizen.icons.wmui&image=speechBubbles&format=original&lang=en&skin=citizen&version=imtxr); }
 * 1) n-contents > a::before, #n-aboutsite > a::before, #n-newpage > a::before, #n-upload > a::before, #n-portal > a::before {
 * 1) n-contents > a::before {
 * 1) n-aboutsite > a::before {
 * 1) n-newpage > a::before {
 * 1) n-upload > a::before {
 * 1) n-portal > a::before {

display: block; content: 'icon'; width: 20px; color: transparent; opacity: 0.6; background-size: contain; background-repeat: no-repeat; } .skin-citizen-dark #ca-masseditregex > a::before, .skin-citizen-dark #t-editcount > a::before, .skin-citizen-dark #pt-sandbox > a::before { filter: invert(1) hue-rotate(180deg) !important; }	background-image: url(/w/load.php?modules=skins.citizen.icons.wmui&image=recentChanges&format=rasterized&lang=en&skin=citizen&version=imtxr); background-image: linear-gradient(transparent,transparent),url(/w/load.php?modules=skins.citizen.icons.wmui&image=recentChanges&format=original&lang=en&skin=citizen&version=imtxr); }	background-image: url(/w/load.php?modules=skins.citizen.icons.wmui&image=userContributions&format=rasterized&lang=en&skin=citizen&version=imtxr); background-image: linear-gradient(transparent,transparent),url(/w/load.php?modules=skins.citizen.icons.wmui&image=userContributions&format=original&lang=en&skin=citizen&version=imtxr); }	background-image: url(/w/load.php?modules=skins.vector.icons&image=sandbox&format=rasterized&skin=vector-2022&version=5eu0l); background-image: linear-gradient(transparent,transparent),url(/w/load.php?modules=skins.vector.icons&image=sandbox&format=original&skin=vector-2022&version=5eu0l); }
 * 1) ca-masseditregex > a::before, #t-editcount > a::before, #pt-sandbox > a::before {
 * 1) ca-masseditregex > a::before {
 * 1) t-editcount > a::before {
 * 1) pt-sandbox > a::before {
 * 1) p-managewiki-sidebar-header a span { display: none; }

/* Search box */ .citizen-typeahead__title { display: block; } .citizen-typeahead__thumbnail { background-position: top; }

/* TOC */ .citizen-toc-level--1 .citizen-toc__text { color: var(--color-primary); } .citizen-toc-level--2 .citizen-toc__text, .citizen-toc-level--3 .citizen-toc__text, .citizen-toc-level--4 .citizen-toc__text, .citizen-toc-level--5 .citizen-toc__text, .citizen-toc-level--6 .citizen-toc__text { color: inherit } .citizen-toc a { padding-left: 12px; } .citizen-toc-level--2, .citizen-toc-level--3, .citizen-toc-level--4, .citizen-toc-level--5, .citizen-toc-level--6 { margin-left: 12px !important; } .citizen-toc li.haschildren > a::after { content: '+/-'; font-size: 14px; color: transparent; background-image: url(/w/load.php?modules=skins.citizen.icons.wmui&image=collapse&format=original&skin=citizen&version=imtxr); background-size: 12px; background-repeat: no-repeat; background-position: center; position: absolute; float: left; margin-left: -15px; transition: transform 250ms; transform: rotate3d(0,0,1,180deg); } .citizen-toc li.haschildren.collapsed > a::after { transform: rotate3d(0,0,1,90deg); } .skin-citizen-dark .citizen-toc li.haschildren > a::after { filter: invert(1) hue-rotate(180deg) !important; } @media screen and (max-width: 999px) { .mw-body-header { z-index: 11; } .client-js #citizen-toc__checkbox:checked ~ #citizen-toc__buttonCheckbox { background-color: var(--background-color-primary--active); box-shadow: var(--box-shadow-dialog); pointer-events: auto; transform: scale(1); }	.client-js #citizen-toc__checkbox:checked ~ #citizen-toc__buttonCheckbox .citizen-ui-icon { display: block; } } @media screen and (min-width: 1300px) { .citizen-toc { background-color: var(--color-surface-2); } }

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

/* Infobox */ .infobox { border: none; background: var(--color-surface-2); color: var(--color-base); } .infobox .infobox-above, .infobox caption { color: var(--color-base--emphasized); } .infobox .infobox-header { background: var(--color-surface-3); } .infobox.bordered td, .infobox.bordered th { border: 1px solid var(--border-color-base); }

/* 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 */ flex-direction: row; margin-top: 20px; }
 * 1) footer-places ul {

/* Scroll fix */ html { scroll-padding-top: calc(var(--header-size) + var( --space-md )); }


 * root {

--width-layout: 960px; }