MediaWiki:Gadget-Site.css

/* CSS for all desktop and mobile skins. See also MediaWiki:Gadget-Variables.css

Inteded to replacement Common.css and Mobile.css which only target desktop and mobile versions, respectively.

Most styles apply to all devices and those that don't generally require media queries anyway. Also, the default mobile skin (Timeless) can be used on desktop as well. It simplifies site maintenance to keep all general styles in one place.

The CSS is encapsulated in a gadget for minification and any other ResourceLoader optimizations.



body { background-color: var(--zw-background-body); } body, .mw-body h1, .mw-body-content h1, .mw-body-content h2 { font-family: var(--zw-font-family-sans); }

/* MediaWiki icons */ background-image: url("//cdn.wikimg.net/en/zeldawiki/images/0/02/Wiki_Icon_Help_Notice_Dark.svg"); }
 * 1) mw-indicator-mw-helplink a {

/* MediaWiki OOUI elements */ .oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-warning { color: black; }

/* Notifications */ .mw-echo-notifications-badge { filter: var(--zw-text-filter); opacity: 1 !important; }

.mw-notification { background-color: var(--mw-surface); border-color: var(--zw-border); box-shadow: var(--zw-box-shadow-2); color: var(--zw-text); }

/* Styled Discord link in sidebar Adapted with permission from Runescape Wiki implementation by User:JaydenKieran, licensed under CC BY-NC-SA 3.0 https://runescape.wiki/w/MediaWiki:Vector.css https://runescape.wiki/w/User:JaydenKieran */ color: white !important; font-size: 12px; font-weight: bold; border-radius: 5px; border: 1px solid #4b56d0; background-color: #5865F2; display: block; position: relative; padding: 4px 0 5px calc(17px + 5.5px * 2); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); transition: 0.2s ease; }   content: 'Chat on '; font-weight: normal; opacity: 0.85; }   content: ''; background: url('https://cdn.wikimg.net/en/zeldawiki/images/7/7b/Discord_Logo.svg') no-repeat; background-size: 17px 13px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1)); position: absolute; top: 5px; left: 7px; width: 17px; height: 13px; }   text-decoration: none; background-color: #4b56d0; }
 * 1) p-Navigation #n-Discord a {
 * 1) p-Navigation #n-Discord a::before {
 * 1) p-Navigation #n-Discord a::after {
 * 1) p-Navigation #n-Discord a:hover {

/* Page content */ .mw-body { background-color: var(--zw-background-page); border: 1px solid var(--zw-border); color: var(--zw-text); }

/* Site notice */ .mw-dismissable-notice .mw-dismissable-notice-body { margin: 0; } .mw-dismissable-notice-close { margin: var(--zw-space-3); } .mw-dismissable-notice-close a { cursor: pointer; }

color: var(--zw-text); } h1, h2, h3, h4, h5, h6 { color: var(--zw-text); } .mw-body h1, .mw-body h2 { border-color: var(--zw-border); } hr { background-color: var(--zw-border); } li { list-style-image: none; }
 * 1) contentSub, #contentSub2 { /* Redirect notices and such */

/* Unbulleted lists */ ol.plainlist, ul.plainlist { line-height: inherit; list-style: none none; margin: 0; } ol.plainlist li, ul.plainlist li { margin-bottom: 0; }

/* Links */ a { transition: var(--zw-duration-300); } a, .mw-parser-output a.extiw, .mw-parser-output a.external { color: var(--zw-link); } a:hover, a:visited:hover, .mw-parser-output a.extiw:hover, .mw-parser-output a.external:hover { color: var(--zw-link-hover); } a:visited, .mw-parser-output a.extiw:visited, .mw-parser-output a.external:visited { color: var(--zw-link-visited); } a.new, .new a, a.new:visited, .new a:visited { color: var(--zw-text-red-link); } a.new:hover, .new a:hover { color: var(--zw-text-red-link-hover); text-decoration-style: dashed; } .mw-parser-output a.external { background-image: url(//cdn.wikimg.net/en/strategywiki/skins/Vector/resources/common/images/external-link-ltr-icon.svg?48e54); }

/* Footer */ .mw-footer li { color: var(--zw-text); }

/* Article content */ .mw-parser-output { font-size: 1rem; line-height: 1.75; }	color: var(--zw-text); font-size: 0.875rem; } .mw-content-ltr .mw-editsection, .mw-content-rtl .mw-content-ltr .mw-editsection, .mw-content-ltr .mw-editsection-like, .mw-content-rtl .mw-content-ltr .mw-editsection-like { margin-left: var(--zw-space-2); }
 * 1) mw-content-text .mw-editsection-bracket, .mw-editsection-divider {

/* Table of Contents */ .toc { background-color: var(--mw-surface); border-color: var(--zw-border); border-radius: var(--zw-border-radius-2); } .tocnumber { color: var(--zw-text); } .toctogglelabel { color: var(--zw-link); font-size: 0.875rem; }

/* Collapsible content */ .mw-collapsible-text { font-size: 0.875rem; }

/* For pixel art (sprites, 2D game screenshots) to be resized using nearest-neighbor interpolation so that the images don't appear blurry. */ /* Should not be applied to all images as it makes images like logos and models and artwork look jagged. */ /* Also applied to all gallery thumbnails, all File namespace thumbnails, and infobox thumbnails not using Template:Media since we can't reliably distinguish what is pixel art and what isn't in those cases */ .gallery img, .filehistory img, .pi-data-value p > a > img, .pixel-art { image-rendering:-moz-crisp-edges; image-rendering:-o-crisp-edges; image-rendering:-webkit-optimize-contrast; -ms-interpolation-mode:nearest-neighbor; image-rendering:crisp-edges; image-rendering:pixelated; }

/* Thumbnails */ div.thumbinner, .thumbimage { background-color: var(--mw-surface); border-color: var(--zw-border); border-radius: var(--zw-border-radius-2); } div.thumbinner { padding: var(--zw-space-1); } .thumbimage { border: none; } .magnify { display: none; } .MediaTransformError { color: var(--zw-text-warning); font-weight: bold; /* The height property breaks templates such as Template:Tabs. */   height: auto !important; /* !important necessary to override inline style */ }

/* Galleries */ ul.gallery { margin: 0; margin-left: calc(-1*var(--zw-space-1)); } .gallerybox { margin-left: var(--zw-space-1) } li.gallerybox div.thumb { background-color: var(--mw-surface); border-color: var(--zw-border); border-radius: var(--zw-border-radius-2); margin: 0;

display: flex; align-items: center; /* Center align file name that appears when the file does not exist */ } .gallerytext p { line-height: 1.5rem; font-size: 0.875rem; margin-top: 0; }

/* Tables */

/* Adds a horizontal scrollbar to tables wider than the viewport */ table { display: block; overflow-x: auto; }

.wikitable { background-color: var(--zw-background-page); border-color: var(--zw-border); border-radius: var(--zw-border-radius-2); border-width: 1px; color: var(--zw-text); margin: 0; }

table.wikitable { padding: 4px; border-collapse: separate; }

table.wikitable > * > tr > th { background-color: var(--zw-background-header); }

table.wikitable > * > tr > th, table.wikitable > * > tr > td { border-color: var(--zw-border); }

table.infobox tr.infobox-field th { text-align: right; max-width: 50%; }

table.infobox tr.infobox-field td { min-width: 50%; }

table.infobox tr.infobox-field th, table.wikitable td { padding: 8px; }

table.infobox tr.infobox-field th:first-child, .wikitable td:first-child, .wikitable th:first-child { border-radius: var(--roundy-border-radius) 0px 0px var(--roundy-border-radius); }

table.infobox tr.infobox-field th:last-child, .wikitable td:last-child, .wikitable th:last-child { border-radius: 0px var(--roundy-border-radius) var(--roundy-border-radius) 0px; }

table.infobox tr.infobox-field th:first-child:last-child, .wikitable td:first-child:last-child, .wikitable th:first-child:last-child { border-radius: var(--roundy-border-radius) var(--roundy-border-radius) var(--roundy-border-radius) var(--roundy-border-radius); }

/* References and notes */ ol.references li:target, sup.reference:target { background-color: var(--zw-background-highlight); }

/* Categories */ .catlinks { background-color: var(--mw-surface); border-color: var(--zw-border); border-radius: var(--zw-border-radius-2); }

/* Script error dialogs and such */ .ui-widget-content { background: var(--mw-surface); border-color: var(--zw-border); color: var(--zw-text); } body .ui-dialog .ui-widget-header { background: var(--mw-surface) !important; border: 0; border-bottom: 1px solid var(--zw-border) !important; border-radius: 0; color: var(--zw-text); font-weight: bold; }

/* Editing */ font-size: 14px; } div.editOptions, .warningbox { background-color: var(--mw-surface); border-color: var(--zw-border); color: var(--zw-text); } .warningbox p:not(:first-child) { color: var(--zw-text-warning); } .oo-ui-menuSelectWidget .oo-ui-optionWidget a { /* e.g. "Preview page with this template" dropdown */ color: #0645ad; } .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button { color: var(--zw-text-warning); } .codeEditor-status-message { color: initial; }
 * 1) wpTextbox1 {

/* VisualEditor */ .ve-ui-surface .oo-ui-icon-puzzle { filter: var(--zw-text-filter); } .ve-ui-surface .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button { color: var(--zw-text) } .ve-ui-surface .oo-ui-popupWidget-popup { background-color: var(--mw-surface); border-color: var(--zw-border) } .ve-ui-surface .oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor:before { border-bottom-color: var(--zw-border) } .ve-ui-surface .oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor:after { border-bottom-color: var(--mw-surface) }

/* History */ background-color: var(--zw-background-highlight); color: var(--zw-text); }
 * 1) pagehistory li.selected {

/* Diffs */ .diff-context { background-color: var(--zw-background-page); border-color: var(--zw-border); color: var(--zw-text); } .diff-addedline { background-color: var(--zw-background-page); border-color: var(--zw-text-success); } .diff-addedline .diffchange { background-color: var(--zw-text-success); color: black; } .diff-deletedline { background-color: var(--zw-background-page); border-color: var(--zw-text-warning); } .diff-deletedline .diffchange { background-color: var(--zw-text-warning); color: black; }

/* Code */ code, :not(.mw-highlight) > pre { background-color: var(--mw-surface); border-color: var(--zw-border); color: var(--zw-text); } .mw-highlight a { color: inherit; }

/* Files */ ul#filetoc { /* ul qualification is needed to override styles in Vector and Timeless skins */ background-color: var(--mw-surface); border-color: var(--zw-border); padding-left: var(--zw-space-4); text-align: left; } .mw_metadata td { background-color: var(--zw-background-page); border-color: var(--zw-border); } .mw_metadata th { background-color: var(--zw-background-header); border-color: var(--zw-border); } /* For some reason MediaWiki outputs an error about being unable to animate APNG thumbnails despite actually being able to. */ .mw-noanimatethumb { display: none; }

/* Extension:Popups */ .mwe-popups { background-color: var(--mw-surface); } .mwe-popups .mwe-popups-container { background-color: inherit; } .mwe-popups .mwe-popups-extract { background-color: inherit; color: var(--zw-text); } a.mwe-popups-extract:hover { color: var(--zw-text); } .mwe-popups .mwe-popups-extract[dir='ltr']:after { background: none; } .mw-ui-icon-reference-generic { filter: var(--zw-text-filter); } .mw-ui-icon-settings:before { filter: var(--zw-text-filter); } .mwe-popups .mwe-popups-settings-icon { opacity: 1; } .mwe-popups .mwe-popups-settings-icon:hover { background-color: var(--zw-background-interactive-hover); }

background-color: var(--mw-surface); }   border-color: var(--zw-border); }   color: var(--zw-text); }   color: var(--zw-text); } .mw-ui-icon-popups-close { filter: var(--zw-text-filter); }
 * 1) mwe-popups-settings {
 * 1) mwe-popups-settings header {
 * 1) mwe-popups-settings main#mwe-popups-settings-form p {
 * 1) mwe-popups-settings main#mwe-popups-settings-form form label > span {

/* Main Page */ .page-Main_Page .firstHeading { display: none; }

/* Talk pages */ .ext-discussiontools-init-replylink-buttons .ext-discussiontools-init-replylink-bracket { color: var(--zw-text); } .ext-discussiontools-ui-replyWidget-footer { color: var(--zw-text); } .oo-ui-tabOptionWidget { color: var(--zw-text); }

/* Data tables, e.g. Special:CargoTables and Special:AllMessages */ .mw-datatable { border-color: var(--zw-border); } .mw-datatable th { background-color: var(--zw-background-header); border-color: var(--zw-border); } .mw-datatable td { background-color: transparent; border-color: var(--zw-border); transition: var(--zw-duration-300); } .mw-datatable tr:hover td { background-color: var(--zw-background-highlight); }

/* Special:AllMessages */ background-color: var(--zw-background-highlight); }
 * 1) mw-allmessagestable tbody:hover td {

/* Special:CreateAccount */ .mw-number-text, .mw-body-content .mw-number-text h3 { color: var(--zw-text); }

/* Special:ExpandTemplates */ .mw-special-ExpandTemplates textarea { height: 50rem; /* The textarea is too small by default */ }

/* Special:Preferences */ .oo-ui-labelWidget.oo-ui-inline-help { color: var(--zw-text-subdued); } .oo-ui-tabSelectWidget-framed, .mw-prefs-buttons { background-color: var(--mw-surface); } .mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed { border-color: var(--zw-border); } .mw-htmlform-ooui .mw-htmlform-matrix tbody tr:nth-child(2n) td { background-color: var(--zw-background-header); } .mw-htmlform-ooui .mw-htmlform-matrix tbody tr:hover td { background-color: var(--zw-background-highlight); } .oo-ui-icon-info { filter: var(--zw-text-filter); } .mw-prefs-tabs .oo-ui-popupWidget-popup { background-color: var(--mw-surface); border-color: var(--zw-border); } .mw-prefs-tabs .oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor:after { border-bottom-color: var(--mw-surface); } .mw-prefs-tabs .oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor:before { border-bottom-color: var(--zw-border); } .mw-prefs-buttons { padding-left: var(--zw-space-3); }

/* Special:Notifications */ .mw-echo-ui-notificationsInboxWidget-toolbarWrapper { background: none; box-shadow: none; }

/* Special:RecentChanges */ .mw-plusminus-neg { color: var(--zw-text-warning); } .mw-plusminus-pos { color: var(--zw-text-success); } .mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend { /* .mw-body qualifier is for Timeless */ background-color: var(--mw-surface); border-color: var(--zw-border); border-radius: var(--zw-border-radius-2); color: var(--zw-text-color); }

/* Special:ReplaceText */ .ext-replacetext-searchoptions { background-color: var(--mw-surface); border-color: var(--zw-border); }

.ext-replacetext-searchoptions .ext-replacetext-divider { border-color: var(--zw-border); }

/* Special:Search */ .mw-body .mw-search-profile-tabs { background-color: var(--mw-surface); border-color: var(--zw-border); } .search-types .current a { color: var(--zw-text); font-weight: bold; }