MediaWiki:Common.css
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.
/*
* Custom NARA CSS Start
*/
/* grid for lists of staff cards inside a role section */
.vc-card-grid {
display: grid;
gap: 16px;
margin: 10px 0 22px 0;
}
/* two cards side-by-side */
.vc-card-grid--2 {
grid-template-columns: 1fr 1fr;
}
/* keep it 1-column on small screens */
@media (max-width: 900px) {
.vc-card-grid--2 {
grid-template-columns: 1fr;
}
}
/* IMPORTANT: when cards are in a grid, remove the card's bottom margin */
.vc-card-grid .vc-staff-card {
margin-bottom: 0;
}
/* Prefer: opt out of DarkMode transforms */
html.client-darkmode .vc-staff-page.mw-no-invert,
html.client-darkmode .vc-staff-page.mw-no-invert * {
filter: none !important;
mix-blend-mode: normal !important;
}
/* Fallback: if DarkMode is inverting a parent container, cancel it */
html.client-darkmode #content .vc-staff-page.mw-no-invert {
filter: invert(1) hue-rotate(180deg) !important;
}
/* ===== Staff page wrapper ===== */
.vc-staff-page {
max-width: 1200px;
margin: 0 auto;
background: #060606;
padding: 22px 22px 30px 22px;
border-radius: 12px;
border: 1px solid #202020;
}
/* Headings inside the wrapper */
.vc-staff-page h2,
.vc-staff-page h3,
.vc-staff-page h4 {
color: #f2f2f2 !important;
}
/* Section dividers (Founder/Staff) */
.vc-staff-page h2 {
border-bottom: 1px solid #2a2a2a !important;
padding-bottom: 8px;
margin-bottom: 18px;
}
/* ===== Grid ===== */
.vc-staff-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 28px;
margin: 14px 0 26px 0;
}
@media (max-width: 900px) {
.vc-staff-grid {
grid-template-columns: 1fr;
}
}
.vc-staff-col {
min-width: 0;
}
/* ===== Column + role labels ===== */
.vc-col-title {
font-size: 24px;
font-weight: 900;
color: #ffffff;
margin: 0 0 18px 0;
text-align: center;
letter-spacing: .6px;
/* keep this subtle; remove if you want it less neon */
text-shadow: 0 0 10px rgba(51,255,0,0.18);
}
.vc-role-title {
font-size: 13px;
font-weight: 800;
color: #e6e6e6 !important;
letter-spacing: .6px;
text-transform: uppercase;
margin: 22px 0 10px 0;
opacity: 0.9;
}
/* ===== Staff card ===== */
.vc-staff-card {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border-radius: 10px;
background: linear-gradient(90deg, #121212 0%, #181818 60%, #121212 100%);
border: 1px solid #2a2a2a;
box-shadow: 0 8px 24px rgba(0,0,0,.25);
min-height: 92px;
margin-bottom: 16px; /* gives breathing room between cards */
}
.vc-staff-card:hover {
border-color: #33ff00;
box-shadow: 0 0 0 1px rgba(51,255,0,.22),
0 8px 20px rgba(0,0,0,.45);
}
/* Avatar */
.vc-staff-avatar {
width: 64px;
height: 64px;
flex: 0 0 64px;
border-radius: 8px;
background: #fff;
display: grid;
place-items: center;
overflow: hidden;
}
.vc-avatar-img {
image-rendering: pixelated;
}
/* Text */
.vc-staff-info { line-height: 1.15; }
.vc-staff-name a { text-decoration: none; font-weight: 750; }
.vc-staff-title { color: #cfcfcf; font-size: 12px; margin-top: 4px; }
/* Role colors */
.vc-role-founder .vc-staff-name a { color: #ff3b3b; }
.vc-role-director .vc-staff-name a { color: #ff3b3b; }
.vc-role-admin .vc-staff-name a { color: #ff4d4d; }
.vc-role-moderator .vc-staff-name a { color: #c85cff; }
.vc-role-programmer .vc-staff-name a { color: #00e5ff; }
.vc-role-builder .vc-staff-name a { color: #ffb020; }
/* ===== VindexCraft Rules Styling (High-Color Sections) ===== */
/* DarkMode extension: re-invert the logo so it appears normal */
html.client-darkmode .mw-logo a.mw-wiki-logo,
html.client-darkmode #p-logo a.mw-wiki-logo {
filter: invert(1) hue-rotate(180deg) !important;
}
.vc-header {
border: 1px solid #e5e5e5;
background: #fafafa;
border-radius: 14px;
padding: 16px 18px;
margin: 14px 0 18px 0;
}
.vc-header .vc-title { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.vc-header .vc-meta { opacity: .85; margin-bottom: 10px; }
.vc-header .vc-meta .vc-staff { color: #EB0505; font-weight: 800; }
/* Rule cards */
.vc-rule {
border: 1px solid #e8e8e8;
border-radius: 14px;
padding: 14px 16px;
margin: 14px 0;
background: #fff;
box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
/* Colorized section headers (H2 inside wrappers) */
.vc-section-ban > h2,
.vc-section-warn > h2,
.vc-section-kick > h2,
.vc-section-resp > h2,
.vc-section-statute > h2 {
display: block;
padding: 10px 14px;
border-radius: 14px;
margin: 22px 0 14px 0;
border: 1px solid rgba(0,0,0,.08);
letter-spacing: .3px;
}
/* Red */
.vc-section-ban > h2 {
background: #EB0505;
color: #fff;
}
/* Yellow */
.vc-section-warn > h2 {
background: #EB8F05;
color: #111;
}
/* Green */
.vc-section-kick > h2 {
background: #2EA818;
color: #fff;
}
/* Blue */
.vc-section-resp > h2 {
background: #367FD9;
color: #fff;
}
/* Light green */
.vc-section-statute > h2 {
background: #5CD936;
color: #111;
}
/* Small callout boxes */
.vc-callout {
border-left: 6px solid #999;
background: #f8f8f8;
padding: 12px 14px;
border-radius: 12px;
margin: 12px 0;
}
/* Optional: make rule cards match the section they're in */
.vc-in-ban .vc-rule { border-left: 8px solid #EB0505; }
.vc-in-warn .vc-rule { border-left: 8px solid #EB8F05; }
.vc-in-kick .vc-rule { border-left: 8px solid #2EA818; }
.vc-in-resp .vc-rule { border-left: 8px solid #367FD9; }
.vc-in-statute .vc-rule { border-left: 8px solid #5CD936; }
.page-Main_Page figure[typeof="mw:File/Thumb"] {
display: none !important;
}
/* Featured Article - Gold */
.featured-lead {
background: #fff8e6; /* light gold */
border: 1px solid #e6d08a;
border-left: 6px solid #c9a227; /* deep gold accent */
padding: 16px;
border-radius: 8px;
margin-bottom: 20px;
}
.featured-lead b a {
font-size: 1.3em;
color: #8a6d1d; /* darker gold text */
text-decoration: none;
}
.featured-lead b a:hover {
text-decoration: underline;
}
/* Popular Pages - Green */
.popularpages-block {
background: #eef8f0; /* soft green */
border: 1px solid #b7dfc1;
border-left: 6px solid #2e8b57; /* forest green accent */
padding: 16px;
border-radius: 8px;
margin-bottom: 12px;
}
.popularpages-block .pp-item {
padding: 6px 0;
border-bottom: 1px solid #d6eadc;
}
.popularpages-block .pp-item:last-child {
border-bottom: none;
}
.popularpages-block .pp-item {
display: block;
padding: 4px 0;
border-bottom: 1px solid #e6e6e6;
}
.popularpages-block .pp-item:last-child {
border-bottom: none;
}
.popularpages-block .pp-item a {
text-decoration: none;
}
.popularpages-block .pp-item a:hover {
text-decoration: underline;
}
/* button */
.popularpages-more {
margin-top: 10px;
}
.popularpages-more a {
display: inline-block;
padding: 8px 12px;
border: 1px solid #cfcfcf;
border-radius: 8px;
background: #f8f9fa;
text-decoration: none;
}
.popularpages-more a:hover {
background: #eeeeee;
}
.featured-lead .infobox,
.featured-lead .portable-infobox,
.featured-lead table.infobox {
display: none !important;
}
.mainpage-hero {
margin: 12px 0 18px 0;
padding: 14px 16px;
border: 1px solid #cfcfcf;
background: #f8f9fa;
}
.mainpage-hero-title {
font-size: 1.6em;
font-weight: 700;
margin-bottom: 4px;
}
.mainpage-hero-sub {
font-size: 1.05em;
line-height: 1.4;
}
.mainpage-wrapper {
display: flex;
gap: 18px;
align-items: flex-start;
flex-wrap: wrap; /* important for smaller screens */
}
.mainpage-left { flex: 2 1 520px; min-width: 360px; }
.mainpage-right { flex: 1 1 320px; min-width: 300px; }
.mainpage-box {
border: 1px solid #cfcfcf;
background: #fff;
padding: 12px 14px;
margin-bottom: 16px;
}
.mainpage-box h3 {
margin-top: 0;
padding-bottom: 6px;
}
/* Fix squashed columns on Special:Version "Installed skins/extensions" tables */
.mw-installed-software td,
.mw-installed-software th {
word-break: normal; /* undo break-word */
overflow-wrap: normal; /* undo aggressive wrapping */
white-space: normal;
}
.mw-installed-software .mw-version,
.mw-installed-software .mw-name {
white-space: nowrap; /* keep “MinervaNeue” / “GPL-2.0-or-later” from stacking */
}
/*Hide whitespace*/
div.mw-parser-output p:has(br:only-child) {
display: none;
}
div.mw-parser-output p:empty {
display: none;
}
/*Prevent wide tables from overflowing off the page*/
table.wikitable {
max-width: 100%;
overflow-x: auto;
display: block;
}
/* Remove border from wikitables */
table.wikitable {
border: 0px transparent !important;
}
/*
* Custom NARA CSS End
*/
/*Completely stolen from en.wikipedia.org*/
/*
* This is the CSS common to all desktop skins on nara.vindexcraft.net.
* Styling inside .mw-parser-output should generally use TemplateStyles.
*/
/* Reset italic styling set by user agent */
cite,
dfn {
font-style: inherit;
}
/* Straight quote marks for <q> */
q {
quotes: '"' '"' "'" "'";
}
/* Avoid collision of blockquote with floating elements by swapping margin and padding */
blockquote {
overflow: hidden;
margin: 1em 0;
padding: 0 40px;
}
/* Consistent size for <small>, <sub> and <sup> */
small {
font-size: 85%;
}
.mw-body-content sub,
.mw-body-content sup {
font-size: 80%;
}
/* Same spacing for indented and unindented paragraphs on talk pages */
.ns-talk .mw-body-content dd {
margin-top: 0.4em;
margin-bottom: 0.4em;
}
/* Reduce page jumps by hiding collapsed/dismissed content */
.client-js .collapsible:not( .mw-made-collapsible).collapsed > tbody > tr:not(:first-child),
/* Avoid FOUC/reflows on collapsed elements. */
/* This copies MediaWiki's solution for T42812 to apply to innercollapse/outercollapse (T325115). */
/* TODO: Use :is() selector at some reasonable future when support is good for Most Clients */
/* Reference: https://gerrit.wikimedia.org/g/mediawiki/core/+/ecda06cb2aef55b77c4b4d7ecda492d634419ead/resources/src/jquery/jquery.makeCollapsible.styles.less#75 */
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) > p,
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) > table,
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) > thead + tbody,
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) tr:not( :first-child ),
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) .mw-collapsible-content,
/* Hide charinsert base for those not using the gadget */
#editpage-specialchars {
display: none;
}
/* Make the list of references smaller
* Keep in sync with Template:Refbegin/styles.css
* And Template:Reflist/styles.css
*/
ol.references {
font-size: 90%;
margin-bottom: 0.5em;
}
/* Cite customizations for Parsoid
* Once everything uses the one true parser these are just customizations
*/
span[ rel="mw:referencedBy" ] {
counter-reset: mw-ref-linkback 0;
}
span[ rel='mw:referencedBy' ] > a::before {
content: counter( mw-ref-linkback, lower-alpha );
font-size: 80%;
font-weight: bold;
font-style: italic;
}
a[ rel="mw:referencedBy" ]::before {
font-weight: bold;
content: "^";
}
span[ rel="mw:referencedBy" ]::before {
content: "^ ";
}
.mw-ref > a[data-mw-group=lower-alpha]::after {
content: '[' counter( mw-Ref, lower-alpha ) ']';
}
.mw-ref > a[data-mw-group=upper-alpha]::after {
content: '[' counter( mw-Ref, upper-alpha ) ']';
}
.mw-ref > a[data-mw-group=decimal]::after {
content: '[' counter( mw-Ref, decimal ) ']';
}
.mw-ref > a[data-mw-group=lower-roman]::after {
content: '[' counter( mw-Ref, lower-roman ) ']';
}
.mw-ref > a[data-mw-group=upper-roman]::after {
content: '[' counter( mw-Ref, upper-roman ) ']';
}
.mw-ref > a[data-mw-group=lower-greek]::after {
content: '[' counter( mw-Ref, lower-greek ) ']';
}
/* Styling for jQuery makeCollapsible, matching that of collapseButton */
.mw-parser-output .mw-collapsible-toggle:not(.mw-ui-button) {
font-weight: normal;
padding-right: 0.2em;
padding-left: 0.2em;
}
.mw-collapsible-leftside-toggle .mw-collapsible-toggle {
/* @noflip */
float: left;
}
/* Lists in wikitable data cells are always left-aligned */
.wikitable td ul,
.wikitable td ol,
.wikitable td dl {
/* @noflip */
text-align: left;
}
/* Change the external link icon to a PDF icon for all PDF files */
.mw-parser-output a[href$=".pdf"].external,
.mw-parser-output a[href*=".pdf?"].external,
.mw-parser-output a[href*=".pdf#"].external,
.mw-parser-output a[href$=".PDF"].external,
.mw-parser-output a[href*=".PDF?"].external,
.mw-parser-output a[href*=".PDF#"].external {
background: url("//upload.wikimedia.org/wikipedia/commons/4/4d/Icon_pdf_file.png") no-repeat right;
/* @noflip */
padding: 8px 18px 8px 0;
}
/* System messages styled similarly to fmbox */
div.mw-warning-with-logexcerpt,
div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning,
div#mw-protect-cascadeon,
div.titleblacklist-warning {
clear: both;
margin: 0.2em 0;
border: 1px solid #bb7070;
background-color: #ffdbdb;
padding: 0.25em 0.9em;
box-sizing: border-box;
}
/* default colors for partial block message */
.mw-contributions-blocked-notice-partial .mw-warning-with-logexcerpt {
border-color: #fc3;
background-color: #fef6e7;
}
/* Increase the height of the image upload box */
#wpUploadDescription {
height: 13em;
}
/* Minimum thumb width */
figure[typeof~='mw:File/Thumb'],
figure[typeof~='mw:File/Frame'],
.thumbinner {
min-width: 100px;
}
/* Prevent floating boxes from overlapping any category listings,
file histories, edit previews, and edit [Show changes] views. */
#mw-subcategories,
#mw-pages,
#mw-category-media,
#filehistory,
#wikiPreview,
#wikiDiff {
clear: both;
}
/* Styling for tags in changes pages */
.mw-tag-markers {
font-style: italic;
font-size: 90%;
}
/* Hide stuff meant for accounts with special permissions. Made visible again in
[[MediaWiki:Group-checkuser.css]], [[MediaWiki:Group-sysop.css]], [[MediaWiki:Group-abusefilter.css]],
[[MediaWiki:Group-abusefilter-helper.css]], [[MediaWiki:Group-patroller.css]],
[[MediaWiki:Group-templateeditor.css]], [[MediaWiki:Group-extendedmover.css]],
[[MediaWiki:Group-extendedconfirmed.css]], and [[Mediawiki:Group-autoconfirmed.css]]. */
.checkuser-show,
.sysop-show,
.abusefilter-show,
.abusefilter-helper-show,
.patroller-show,
.templateeditor-show,
.extendedmover-show,
.extendedconfirmed-show,
.autoconfirmed-show,
.user-show {
display: none;
}
/* Hide the redlink generated by {{Editnotice}},
this overrides the ".sysop-show { display: none; }" above that applies
to the same link as well. See [[phab:T45013]]
Hide the images in editnotices to keep them readable in VE view.
Long term, editnotices should become a core feature so that they can be designed responsive. */
.ve-ui-mwNoticesPopupTool-item .editnotice-redlink,
.ve-ui-mwNoticesPopupTool-item .mbox-image,
.ve-ui-mwNoticesPopupTool-item .mbox-imageright {
display: none !important;
}
/* Remove bullets when there are multiple edit page warnings */
ul.permissions-errors {
margin: 0;
}
ul.permissions-errors > li {
list-style: none;
}
/* larger inline math */
span.mwe-math-mathml-inline {
font-size: 118%;
}
/* Make <math display="block"> be left aligned with one space indent for
* compatibility with style conventions
*/
.mwe-math-fallback-image-display,
.mwe-math-mathml-display {
margin-left: 1.6em !important;
margin-top: 0.6em;
margin-bottom: 0.6em;
}
.mwe-math-mathml-display math {
display: inline;
}
@media screen {
/* Gallery styles background changes are restricted to screen view.
In printing we should avoid applying backgrounds. */
/* The backgrounds for galleries. */
#content .gallerybox div.thumb {
/* Light gray padding */
background-color: #f8f9fa;
}
/* Put a chequered background behind images, only visible if they have transparency.
'.filehistory a img' and '#file img:hover' are handled by MediaWiki core (as of 1.19) */
.gallerybox .thumb img {
background: #fff url(//upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png) repeat;
}
/* But not on articles, user pages, or portals. */
.ns-0 .gallerybox .thumb img,
.ns-2 .gallerybox .thumb img,
.ns-100 .gallerybox .thumb img {
background-image: none;
}
/* Display "From Wikipedia, the free encyclopedia" in skins that support it,
do not apply to print mode */
#siteSub {
display: block;
}
}
/* Hide FlaggedRevs notice UI when there are no pending changes */
.flaggedrevs_draft_synced,
.flaggedrevs_stable_synced,
/* "Temporary" to remove links in sidebar T255381 */
#t-upload,
/* Hide broken download box on Special:Book pending T285400 */
.mw-special-Book #coll-downloadbox {
display: none;
}
/*
* BELOW HERE THERE BE SOONTOBE TEMPLATESTYLES THINGS;
* SEE [[MediaWiki talk:Common.css/to do]]
*/
/* Infobox template style */
.infobox {
border: 1px solid #a2a9b1;
border-spacing: 3px;
background-color: #f8f9fa;
color: black;
/* @noflip */
margin: 0.5em 0 0.5em 1em;
padding: 0.2em;
/* @noflip */
float: right;
/* @noflip */
clear: right;
font-size: 88%;
line-height: 1.5em;
width: 22em;
}
.infobox-header,
.infobox-label,
.infobox-above,
.infobox-full-data,
.infobox-data,
.infobox-below,
.infobox-subheader,
.infobox-image,
.infobox-navbar,
/* Remove element selector when every .infobox thing is using the standard module/templates */
.infobox th,
.infobox td {
vertical-align: top;
}
.infobox-label,
.infobox-data,
/* Remove element selector when every .infobox thing is using the standard module/templates */
.infobox th,
.infobox td {
/* @noflip */
text-align: left;
}
/* Remove .infobox when element selectors above are removed */
.infobox .infobox-above,
.infobox .infobox-title,
/* Remove element selector when every .infobox thing is using the standard module/templates */
.infobox caption {
font-size: 125%;
font-weight: bold;
text-align: center;
}
.infobox-title,
/* Remove element selector when every .infobox thing is using the standard module/templates */
.infobox caption {
padding: 0.2em;
}
/* Remove .infobox when element selectors above are removed */
.infobox .infobox-header,
.infobox .infobox-subheader,
.infobox .infobox-image,
.infobox .infobox-full-data,
.infobox .infobox-below {
text-align: center;
}
/* Remove .infobox when element selectors above are removed */
.infobox .infobox-navbar {
/* @noflip */
text-align: right;
}
/* Normal font styling for wikitable row headers with scope="row" tag */
.wikitable.plainrowheaders th[scope=row],
.wikitable.plainrowheaders th[scope=rowgroup] {
font-weight: normal;
/* @noflip */
text-align: left;
}
/* Remove underlines from certain links */
.nounderlines a,
.IPA a:link,
.IPA a:visited {
text-decoration: none !important;
}
/* Prevent line breaks in silly places where desired (nowrap)
and links when we don't want them to (nowraplinks a) */
.nowrap,
.nowraplinks a {
white-space: nowrap;
}
/* But allow wrapping where desired: */
.wrap,
.wraplinks a {
white-space: normal;
}
/* texhtml class for inline math (based on generic times-serif class) */
span.texhtml {
font-family: "Nimbus Roman No9 L", "Times New Roman", Times, serif;
font-size: 118%;
line-height: 1;
white-space: nowrap;
/* Force tabular and lining display for texhtml */
-webkit-font-feature-settings: "lnum", "tnum", "kern" 0;
font-feature-settings: "lnum", "tnum", "kern" 0;
font-variant-numeric: lining-nums tabular-nums;
font-kerning: none;
}
span.texhtml span.texhtml {
font-size: 100%;
}
@media screen {
.nochecker .gallerybox .thumb img {
background-image: none;
}
}
/* Put anything you mean to be a sitewide addition above the TemplateStyles
* comment above.
*/