MediaWiki:Citizen.css
MediaWiki interface page
More actions
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.
/* All CSS here will be loaded for users of the Citizen skin */
.faq-question::before {
content: "";
display: inline-block;
width: 1.2em;
height: 1.2em;
margin-right: 8px;
vertical-align: middle;
background-color: currentColor;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%23FFFFFF%22%3E%3Cpath%20d%3D%22M513.5-254.5Q528-269%20528-290t-14.5-35.5Q499-340%20478-340t-35.5%2014.5Q428-311%20428-290t14.5%2035.5Q457-240%20478-240t35.5-14.5ZM442-394h74q0-33%207.5-52t42.5-52q26-26%2041-49.5t15-56.5q0-56-41-86t-97-30q-57%200-92.5%2030T342-618l66%2026q5-18%2022.5-39t53.5-21q32%200%2048%2017.5t16%2038.5q0%2020-12%2037.5T506-526q-44%2039-54%2059t-10%2073Zm38%20314q-83%200-156-31.5T197-197q-54-54-85.5-127T80-480q0-83%2031.5-156T197-763q54-54%20127-85.5T480-880q83%200%20156%2031.5T763-763q54%2054%2085.5%20127T880-480q0%2083-31.5%20156T763-197q-54%2054-127%2085.5T480-80Zm0-80q134%200%20227-93t93-227q0-134-93-227t-227-93q-134%200-227%2093t-93%20227q0%20134%2093%20227t227%2093Zm0-320Z%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%23FFFFFF%22%3E%3Cpath%20d%3D%22M513.5-254.5Q528-269%20528-290t-14.5-35.5Q499-340%20478-340t-35.5%2014.5Q428-311%20428-290t14.5%2035.5Q457-240%20478-240t35.5-14.5ZM442-394h74q0-33%207.5-52t42.5-52q26-26%2041-49.5t15-56.5q0-56-41-86t-97-30q-57%200-92.5%2030T342-618l66%2026q5-18%2022.5-39t53.5-21q32%200%2048%2017.5t16%2038.5q0%2020-12%2037.5T506-526q-44%2039-54%2059t-10%2073Zm38%20314q-83%200-156-31.5T197-197q-54-54-85.5-127T80-480q0-83%2031.5-156T197-763q54-54%20127-85.5T480-880q83%200%20156%2031.5T763-763q54%2054%2085.5%20127T880-480q0%2083-31.5%20156T763-197q-54%2054-127%2085.5T480-80Zm0-80q134%200%20227-93t93-227q0-134-93-227t-227-93q-134%200-227%2093t-93%20227q0%20134%2093%20227t227%2093Zm0-320Z%22%2F%3E%3C%2Fsvg%3E");
mask-repeat: no-repeat;
mask-size: contain;
}
.mw-collapsible-toggle {
display: none !important;
}
/* hide last item TODO improve */
html.technical-info-clientpref-0 .infobox__section[data-source-title="Technical"] {
display: none !important;
}
/* make related articles thumbnails 16:9 */
/* .cdx-thumbnail__placeholder, .cdx-thumbnail__image {
background-size: contain;
border-radius: 0.5rem;
aspect-ratio: 16 / 9;
width: 5.3333rem !important;
} */
.cdx-thumbnail__placeholder,
.cdx-thumbnail__image {
border: none !important;
border-radius: 4px !important;
}
/* something */
.mw-codes-table-img > span > a > img {
border-radius: 6px;
}
/* extra sidebar icons */
.mw-ui-icon-controller::before {
-webkit-mask-image: url("https://2q2bp9cu5u.ufs.sh/f/jHfjIa1SBA5fpSiBSBJgqywLYCGxut7EZvFN4M0ebkJcaizR");
mask-image: url("https://2q2bp9cu5u.ufs.sh/f/jHfjIa1SBA5fpSiBSBJgqywLYCGxut7EZvFN4M0ebkJcaizR");
background-color: currentColor;
}
#p-navigation .citizen-keyboard-hint-key {
display: block !important;
}
/*.citizen-menu__content #n-randomobby a:before {
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 -960 960 960" width="16px" fill="%23adbedf"><path d="M182-200q-51 0-79-35.5T82-322l42-300q9-60 53.5-99T282-760h396q60 0 104.5 39t53.5 99l42 300q7 51-21 86.5T778-200q-21 0-39-7.5T706-230l-90-90H344l-90 90q-15 15-33 22.5t-39 7.5Zm526.5-251.5Q720-463 720-480t-11.5-28.5Q697-520 680-520t-28.5 11.5Q640-497 640-480t11.5 28.5Q663-440 680-440t28.5-11.5Zm-80-120Q640-583 640-600t-11.5-28.5Q617-640 600-640t-28.5 11.5Q560-617 560-600t11.5 28.5Q583-560 600-560t28.5-11.5ZM310-440h60v-70h70v-60h-70v-70h-60v70h-70v60h70v70Z"/></svg>');
color: var(--color-base);
}*/
/*.citizen-menu__content #n-randomobby a:before {
content: "",
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 -960 960 960" width="16px" fill="%23adbedf"><path d="M182-200q-51 0-79-35.5T82-322l42-300q9-60 53.5-99T282-760h396q60 0 104.5 39t53.5 99l42 300q7 51-21 86.5T778-200q-21 0-39-7.5T706-230l-90-90H344l-90 90q-15 15-33 22.5t-39 7.5Zm526.5-251.5Q720-463 720-480t-11.5-28.5Q697-520 680-520t-28.5 11.5Q640-497 640-480t11.5 28.5Q663-440 680-440t28.5-11.5Zm-80-120Q640-583 640-600t-11.5-28.5Q617-640 600-640t-28.5 11.5Q560-617 560-600t11.5 28.5Q583-560 600-560t28.5-11.5ZM310-440h60v-70h70v-60h-70v-70h-60v70h-70v60h70v70Z"/></svg>');
color: var(--color-base);
background-repeat: no-repeat;
vertical-align: middle;
display: inline-block;
height: 16px;
width: 16px;
}*/
.footer-icons {
padding: 0 !important;
margin: 0 !important;
}
/* if descendant has .full-width, remove max-width from .citizen-overflow-wrapper */
/* Code derived from the Star Citizen Wiki: https://starcitizen.tools/MediaWiki:Citizen.css */
.citizen-drawer__menu {
margin-bottom: 0;
padding-bottom: 0;
}
.mw-portlet-External {
position: sticky;
bottom: 0;
margin-top: var( --space-md );
padding: var( --space-xs ) 0;
border-top: 1px solid var( --border-color-base );
background: var( --color-surface-1 );
font-size: var( --font-size-x-small );
grid-column: 1 / -1;
white-space: nowrap;
}
.mw-portlet-External .citizen-menu__heading {
display: none;
}
.mw-portlet-External ul {
display: flex;
overflow: auto;
}
.mw-portlet-External .mw-list-item a {
gap: 0;
}
.citizen-drawer__menu [id^="n-sidebar-label-"] a {
pointer-events: none;
margin-left: var( --space-xs );
padding-left: var( --space-md );
padding-right: var( --space-xs );
border-left: 1px solid var( --border-color-base );
border-radius: 0;
letter-spacing: 0.05em;
font-weight: var( --font-weight-normal );
color: var( --color-subtle ) !important;
}
.citizen-drawer__menu [id^="n-sidebar-icon-"] a {
font-size: 0;
content-visibility: auto;
}
.citizen-drawer__menu [id^="n-sidebar-icon-"] a:before {
display: block;
content: "";
width: var( --size-icon );
height: var( --size-icon );
background-color: currentColor;
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
}
#n-sidebar-icon-discord a:before {
mask-image: url( https://2q2bp9cu5u.ufs.sh/f/jHfjIa1SBA5f4v36BHmiArxKSEWbsm23Yk91zcNIwgoTvLUa );
}
#n-sidebar-icon-twitter a:before {
mask-image: url( https://2q2bp9cu5u.ufs.sh/f/jHfjIa1SBA5fQcOlg5IlVuvBz0aDWjCnfP9H1g3tmJTh2GiU );
}
#n-sidebar-icon-bsky a:before {
mask-image: url( https://2q2bp9cu5u.ufs.sh/f/jHfjIa1SBA5fSzNhgnW5wCVx6FipmJNuk2R0Bj3PXfceUsty );
}
#n-sidebar-icon-github a:before {
mask-image: url( https://2q2bp9cu5u.ufs.sh/f/jHfjIa1SBA5f43gppomiArxKSEWbsm23Yk91zcNIwgoTvLUa );
}
.mw-collapsible-toggle-default {
display: hidden;
}
.citizen-drawer__menu [id^="n-sidebar-icon-"] a:before {
width: 20px;
height: 20px;
}