Tip of the day
Equipping a gear set while at a bank will automatically withdraw all the items from the bank.
MediaWiki:Common.css
From Walkscape Walkthrough
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.
/*
* This is the CSS common to all desktop skins on en.Wikipedia.
* 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: '"' '"' "'" "'";
}
.mw-wiki-logo {
background-image: url(https://static.miraheze.org/walkscapewiki/thumb/d/d9/Logo_square.png/240px-Logo_square.png)
}
/* 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 */
/* for .mw-warning-with-logexcerpt, behavior of this line differs between
* the edit-protected notice and the special:Contribs for blocked users
* The latter has specificity of 3 classes so we have to triple up here.
*/
.mw-warning-with-logexcerpt.mw-warning-with-logexcerpt.mw-warning-with-logexcerpt,
div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning,
div#mw-protect-cascadeon {
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 */
/* gotta get over the hump introduced by the triple class above */
.mw-contributions-blocked-notice-partial .mw-warning-with-logexcerpt.mw-warning-with-logexcerpt {
border-color: #fc3;
background-color: #fef6e7;
}
/* 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 {
/* Put a chequered background behind images, only visible if they have transparency,
* except on main, user, and portal namespaces
*/
body:not(.ns-0):not(.ns-2):not(.ns-100) .gallerybox .thumb img {
background: #fff url(//upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png) repeat;
}
/* 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 */
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;
}
}
/* Sptite and pet animation handeling. */
.ws-sprite {
display: inline-block;
/* Defaults */
--frames: 1;
--sheetW: 48px;
--scale: 1;
--frame: 48px;
--frameMS: 150ms;
width: calc(var(--frame) * var(--scale));
height: calc(var(--frame) * var(--scale));
background-repeat: no-repeat;
background-size: calc(var(--sheetW) * var(--scale)) calc(var(--frame) * var(--scale));
image-rendering: pixelated;
image-rendering: crisp-edges;
animation-name: ws-sprite-anim;
animation-duration: calc(var(--frames) * var(--frameMS));
animation-timing-function: steps(var(--frames));
animation-iteration-count: infinite;
}
.ws-dev-walker {
position: fixed;
left: 0;
bottom: 30px;
z-index: 9999;
pointer-events: none;
transform-origin: center center;
--walker-x: 0px;
--walker-face: 1;
transform: translateX(var(--walker-x)) scaleX(var(--walker-face));
}
/* Desktop defaults (optional, if you want to centralize control) */
.ws-dev-walker {
--scale: 3;
--walker-speed: 1.5;
}
/* Mobile override */
@media screen and (max-width: 850px) {
.ws-dev-walker {
--scale: 1;
--walker-speed: 0.25;
}
}
@keyframes ws-sprite-anim {
from { background-position: 0 0; }
to { background-position: calc(-1 * var(--sheetW) * var(--scale)) 0; }
}
@media (prefers-reduced-motion: reduce) {
.ws-sprite { animation: none; }
.ws-dev-walker { animation: none; }
}
/* User log spam filtering */
.mw-changeslist-newuser-group {
cursor: pointer;
font-weight: 600;
user-select: none;
}
.mw-changeslist-newuser-group .mw-changeslist-newuser-label::before {
content: "> ";
}
.mw-changeslist-newuser-group.is-open .mw-changeslist-newuser-label::before {
content: "v ";
}
.mw-changeslist-newuser-hidden {
display: none;
}
.mw-changeslist-newuser-hidden.is-open {
display: list-item;
}
/* ============================================================
Old newspaper / in-universe periodical styling
Used with Template:Periodical
============================================================ */
.ws-periodical {
width: 100%;
max-width: none;
box-sizing: border-box;
margin: 1.5em 0;
padding: 2em;
background: #f2ead3;
color: #261d12;
border: 1px solid #7d6847;
box-shadow:
0 0 0 4px #d5c391 inset,
0 4px 12px rgba(0, 0, 0, 0.25);
font-family: Georgia, "Times New Roman", serif;
line-height: 1.55;
}
/* Header / masthead */
.ws-periodical-header {
text-align: center;
padding-bottom: 0.6em;
}
.ws-periodical-title {
font-size: 3em;
font-weight: bold;
line-height: 1.05;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.ws-periodical-subtitle {
margin-top: 0.35em;
font-size: 1.15em;
font-style: italic;
}
/* Date / issue / author box */
.ws-periodical-meta {
display: flex;
justify-content: center;
gap: 1.5em;
flex-wrap: wrap;
margin: 1em 0 1.5em;
padding: 0.65em 1em;
background: rgba(255, 255, 255, 0.45);
border-top: 1px solid #9c875e;
border-bottom: 1px solid #9c875e;
text-align: center;
font-family: Georgia, "Times New Roman", serif;
}
.ws-periodical-meta-item {
display: inline-flex;
align-items: baseline;
gap: 0.35em;
white-space: nowrap;
}
.ws-periodical-meta-label {
font-size: 0.75em;
font-weight: bold;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #5c4a2f;
}
.ws-periodical-meta-value {
font-size: 0.95em;
letter-spacing: 0.04em;
}
/* Heavy newspaper rule below the masthead */
.ws-periodical-rule {
border-top: 4px double #2f2417;
margin: 1em 0 1.3em;
}
/* Main article body */
.ws-periodical-content {
column-count: 2;
column-gap: 2.2em;
column-rule: 1px solid #9c875e;
text-align: justify;
}
/* ============================================================
Headings inside the newspaper
Supports both older MediaWiki h2 output and newer .mw-heading wrappers
============================================================ */
/* Reset MediaWiki / skin heading styling */
.ws-periodical-content h2,
.ws-periodical-content h3,
.ws-periodical-content h4,
.ws-periodical-content h5,
.ws-periodical-content h6,
.ws-periodical-content .mw-heading {
border: 0 !important;
background: none !important;
text-decoration: none !important;
box-shadow: none !important;
}
/* Newer MediaWiki heading wrapper */
.ws-periodical-content .mw-heading {
display: block;
margin: 1.1em 0 0.7em;
padding: 0;
break-inside: avoid;
break-after: avoid;
}
/* Actual heading text */
.ws-periodical-content h2,
.ws-periodical-content h3,
.ws-periodical-content h4,
.ws-periodical-content h5,
.ws-periodical-content h6,
.ws-periodical-content .mw-heading h2,
.ws-periodical-content .mw-heading h3,
.ws-periodical-content .mw-heading h4,
.ws-periodical-content .mw-heading h5,
.ws-periodical-content .mw-heading h6 {
display: block;
margin: 1.1em 0 0.7em;
padding: 0;
border: 0 !important;
background: none !important;
box-shadow: none !important;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.35em;
font-weight: bold;
line-height: 1.2;
text-align: left;
color: #261d12;
break-inside: avoid;
break-after: avoid;
}
/* Avoid double margins when MediaWiki wraps headings in .mw-heading */
.ws-periodical-content .mw-heading h2,
.ws-periodical-content .mw-heading h3,
.ws-periodical-content .mw-heading h4,
.ws-periodical-content .mw-heading h5,
.ws-periodical-content .mw-heading h6 {
margin: 0;
}
/* Remove extra top space from the first heading */
.ws-periodical-content > h2:first-child,
.ws-periodical-content > h3:first-child,
.ws-periodical-content > h4:first-child,
.ws-periodical-content > h5:first-child,
.ws-periodical-content > h6:first-child,
.ws-periodical-content > .mw-heading:first-child {
margin-top: 0;
}
/* Newspaper-style rule below headings only */
.ws-periodical-content h2::after,
.ws-periodical-content h3::after,
.ws-periodical-content h4::after,
.ws-periodical-content h5::after,
.ws-periodical-content h6::after,
.ws-periodical-content .mw-heading h2::after,
.ws-periodical-content .mw-heading h3::after,
.ws-periodical-content .mw-heading h4::after,
.ws-periodical-content .mw-heading h5::after,
.ws-periodical-content .mw-heading h6::after {
content: "";
display: block;
margin-top: 0.35em;
border-bottom: 1px solid #3a2a19;
}
/* Hide section edit links inside the periodical */
.ws-periodical-content .mw-editsection {
display: none;
}
/* Paragraph spacing */
.ws-periodical-content p {
margin: 0 0 1em;
}
/* Drop cap on normal issue pages only, not archive/index pages */
.ws-periodical:not(.ws-periodical-index) .ws-periodical-content > p:first-of-type::first-letter {
float: left;
font-size: 3.5em;
line-height: 0.8;
padding-right: 0.08em;
font-weight: bold;
}
/* Avoid ugly breaks inside images, tables, and thumbnails */
.ws-periodical-content figure,
.ws-periodical-content table,
.ws-periodical-content .thumb {
break-inside: avoid;
}
/* Links should still look readable on the paper background */
.ws-periodical a {
color: #4a321d;
text-decoration: underline;
}
.ws-periodical a:visited {
color: #5c3d26;
}
/* Mobile / narrow-screen fallback */
@media screen and (max-width: 700px) {
.ws-periodical {
padding: 1.2em;
}
.ws-periodical-title {
font-size: 2em;
letter-spacing: 0.04em;
}
.ws-periodical-meta {
display: block;
}
.ws-periodical-meta-item {
display: block;
margin: 0.25em 0;
}
.ws-periodical-content {
column-count: 1;
text-align: left;
}
}
/* ============================================================
Periodical collection / archive page
Reuses .ws-periodical base styling
============================================================ */
.ws-periodical-index {
max-width: none;
}
.ws-periodical-index-description {
max-width: 760px;
margin: 0.8em auto 1.3em;
text-align: center;
font-style: italic;
font-size: 1.05em;
}
/* Collection pages should not use newspaper article columns */
.ws-periodical-index-content {
column-count: 1;
column-rule: 0;
text-align: left;
}
/* Individual issue cards */
.ws-periodical-issue-link {
margin: 1em 0;
padding: 1em 1.2em;
background: rgba(255, 255, 255, 0.32);
border: 1px solid #9c875e;
box-shadow: 0 0 0 2px rgba(213, 195, 145, 0.45) inset;
break-inside: avoid;
}
.ws-periodical-issue-title {
font-family: Georgia, "Times New Roman", serif;
font-size: 1.35em;
font-weight: bold;
line-height: 1.2;
}
.ws-periodical-issue-title a {
color: #261d12;
text-decoration: none;
}
.ws-periodical-issue-title a:hover {
text-decoration: underline;
}
.ws-periodical-issue-meta {
margin-top: 0.35em;
font-size: 0.85em;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #5c4a2f;
}
.ws-periodical-issue-meta span + span::before {
content: " • ";
margin: 0 0.35em;
}
.ws-periodical-issue-summary {
margin-top: 0.7em;
font-size: 0.98em;
line-height: 1.45;
}
/* Optional two-column issue grid on wider screens */
@media screen and (min-width: 900px) {
.ws-periodical-index-content {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1em;
}
.ws-periodical-issue-link {
margin: 0;
}
}
/* Mobile cleanup */
@media screen and (max-width: 700px) {
.ws-periodical-index-description {
text-align: left;
}
.ws-periodical-issue-meta span {
display: block;
}
.ws-periodical-issue-meta span + span::before {
content: "";
margin: 0;
}
}
/* Do not use drop caps on periodical archive / collection pages */
.ws-periodical-index .ws-periodical-content p:first-of-type::first-letter,
.ws-periodical-index .ws-periodical-issue-link::first-letter,
.ws-periodical-index .ws-periodical-issue-meta::first-letter,
.ws-periodical-index .ws-periodical-issue-summary::first-letter {
float: none;
font-size: inherit;
line-height: inherit;
padding-right: 0;
font-weight: inherit;
}
/* ============================================================
Preserve transparent SVGs in Vector 2022 night mode
============================================================ */
html.skin-theme-clientpref-night
.mw-parser-output
figure[typeof="mw:File"]
img.mw-file-element[src*=".svg"] {
background-color: transparent;
filter: none;
}
/* Follow the operating-system theme preference. */
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os
.mw-parser-output
figure[typeof="mw:File"]
img.mw-file-element[src*=".svg"] {
background-color: transparent;
filter: none;
}
}
/* Keep the main SVG preview transparent on File pages. */
html.skin-theme-clientpref-night
#file.fullImageLink
img[src*=".svg"] {
background-color: transparent;
}
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os
#file.fullImageLink
img[src*=".svg"] {
background-color: transparent;
}
}
/* ============================================================
WalkScape Wiki Builder
============================================================ */
/* ============================================================
WSWB shared interface colors
============================================================ */
:root {
/*
Prefer the active skin's colors. The second value is the
fallback used when a skin does not provide that token.
*/
--wswb-ui-border-color:
var(--border-color-base, #22333d);
--wswb-ui-subtle-color:
var(--color-subtle, #22333d);
--wswb-ui-action-color:
var(--color-progressive, #22333d);
--wswb-ui-action-border-color:
var(--border-color-progressive, #22333d);
--wswb-ui-action-background:
var(--background-color-progressive, #22333d);
--wswb-ui-action-text-color:
var(--color-inverted, #fff);
/*
Vector normally supplies --background-color-base.
Citizen also supplies --color-surface-1 for dropdowns
and cards.
*/
--wswb-ui-surface-color:
var(
--background-color-base,
var(--color-surface-1, #fff)
);
--wswb-ui-text-color:
var(--color-base, #202122);
--wswb-ui-hover-background:
var(
--background-color-interactive-subtle,
rgb(34 51 61 / 10%)
);
}
/* ============================================================
WSWB: Automatically generated page footer
============================================================ */
.wswb-auto-footer {
display: table;
box-sizing: border-box;
max-width: 90%;
min-height: 60px;
margin: 1em auto 0;
padding: 0 15px;
border: 2px solid var(--wswb-ui-border-color);
border-radius: 10px;
text-align: center;
}
.wswb-auto-footer__translation {
display: block;
margin-top: 0.35em;
font-size: 0.85em;
line-height: 1.4;
}
/* ============================================================
Infoboxes
============================================================ */
.ItemInfobox {
margin-left: 0.8em;
}
.tabber__panel .ItemInfobox {
margin-left: 0 !important;
}
.wswb-infobox {
margin-left: 0.8em;
}
.tabber__panel .wswb-infobox {
margin-left: 0 !important;
}
/* ============================================================
WSWB image outlines
============================================================ */
:root {
/* --------------------------------------------------------
Rarity colors
-------------------------------------------------------- */
--wswb-outline-none: #CCCCCC;
--wswb-outline-none-muted: #BFBFBF;
--wswb-service-basic: #BDBEC1;
--wswb-service-basic-muted: #42413E;
--wswb-rarity-normal: #929BA1;
--wswb-rarity-normal-muted: #3F4448;
--wswb-rarity-uncommon: #B8FF97;
--wswb-rarity-uncommon-muted: #24461E;
--wswb-rarity-rare: #A3B8FF;
--wswb-rarity-rare-muted: #1F3147;
--wswb-rarity-epic: #DAA2FF;
--wswb-rarity-epic-muted: #3E1A44;
--wswb-rarity-legendary: #FFC880;
--wswb-rarity-legendary-muted: #503B1F;
--wswb-rarity-ethereal: #FF5F5F;
--wswb-rarity-ethereal-muted: #4D2020;
/* --------------------------------------------------------
Item tag colors
-------------------------------------------------------- */
--wswb-item-fine: #B0F7EE;
--wswb-item-fine-muted: #7A9C98;
--wswb-item-collectible: #FFB951;
--wswb-item-collectible-muted: #966B2B;
--wswb-item-lore: #51FF94;
--wswb-item-lore-muted: #238047;
--wswb-item-magical: #D5B0F7;
/*
No official muted magical color currently exists.
Resolve it to the normal color when muted is requested.
*/
--wswb-item-magical-muted: var(--wswb-item-magical);
--wswb-item-valuable: #F7D0B0;
/*
No official muted valuable color currently exists.
*/
--wswb-item-valuable-muted: var(--wswb-item-valuable);
--wswb-item-egg: #E991FF;
--wswb-item-egg-muted: #91599C;
--wswb-item-rare-egg: #FF538C;
--wswb-item-rare-egg-muted: #9C2D59;
/* --------------------------------------------------------
Money colors
-------------------------------------------------------- */
--wswb-money-coins: #FFC107;
--wswb-money-coins-muted: #D9B44A;
/* --------------------------------------------------------
Credit-rating colors
-------------------------------------------------------- */
--wswb-credit-negative: #D16F74;
/*
No separate muted txNegative value is currently known.
*/
--wswb-credit-negative-muted:
var(--wswb-credit-negative);
/* --------------------------------------------------------
Individual skill colors
-------------------------------------------------------- */
--wswb-skill-woodcutting: #5FF16B;
--wswb-skill-agility: #F15FC0;
--wswb-skill-cooking: #F1AD5F;
--wswb-skill-fishing: #5FDBF1;
--wswb-skill-carpentry: #F18D5F;
--wswb-skill-mining: #8CA5D3;
--wswb-skill-foraging: #AAD3A0;
--wswb-skill-crafting: #E9477D;
--wswb-skill-smithing: #E2A7A7;
--wswb-skill-trinketry: #FFE1AB;
--wswb-skill-hunting: #FFA256;
--wswb-skill-tailoring: #ABF2FF;
/*
No official muted skill colors currently exist.
*/
--wswb-skill-woodcutting-muted:
var(--wswb-skill-woodcutting);
--wswb-skill-agility-muted:
var(--wswb-skill-agility);
--wswb-skill-cooking-muted:
var(--wswb-skill-cooking);
--wswb-skill-fishing-muted:
var(--wswb-skill-fishing);
--wswb-skill-carpentry-muted:
var(--wswb-skill-carpentry);
--wswb-skill-mining-muted:
var(--wswb-skill-mining);
--wswb-skill-foraging-muted:
var(--wswb-skill-foraging);
--wswb-skill-crafting-muted:
var(--wswb-skill-crafting);
--wswb-skill-smithing-muted:
var(--wswb-skill-smithing);
--wswb-skill-trinketry-muted:
var(--wswb-skill-trinketry);
--wswb-skill-hunting-muted:
var(--wswb-skill-hunting);
--wswb-skill-tailoring-muted:
var(--wswb-skill-tailoring);
/* --------------------------------------------------------
Skill-type colors
-------------------------------------------------------- */
--wswb-skill-type-gathering: #66ECAC;
--wswb-skill-type-artisan: #F8B052;
--wswb-skill-type-utility: #BE86DF;
--wswb-skill-type-combat: #EC8493;
/*
No official muted skill-type colors currently exist.
*/
--wswb-skill-type-gathering-muted:
var(--wswb-skill-type-gathering);
--wswb-skill-type-artisan-muted:
var(--wswb-skill-type-artisan);
--wswb-skill-type-utility-muted:
var(--wswb-skill-type-utility);
--wswb-skill-type-combat-muted:
var(--wswb-skill-type-combat);
/* --------------------------------------------------------
Service-tier colors
-------------------------------------------------------- */
--wswb-service-basic: #42413E;
/* No separate muted basic color currently exists. */
--wswb-service-basic-muted:
var(--wswb-service-basic);
--wswb-service-advanced:
var(--wswb-rarity-epic);
--wswb-service-advanced-muted:
var(--wswb-rarity-epic-muted);
--wswb-service-legendary:
var(--wswb-rarity-legendary);
--wswb-service-legendary-muted:
var(--wswb-rarity-legendary-muted);
--wswb-service-mythic:
var(--wswb-rarity-ethereal);
--wswb-service-mythic-muted:
var(--wswb-rarity-ethereal-muted);
}
/* ============================================================
Shared builder outline filter
============================================================ */
.wswb-outlined-image {
/*
MediaWiki applies image classes to the generated span
surrounding the image. An inline-block gives the filter
a consistent image-sized rendering box.
*/
display: inline-block;
overflow: visible;
--wswb-outline-size: 1px;
--wswb-outline-neg-size: -1px;
/*
Normal is also the safe fallback if an outlined image is
accidentally emitted without a specific role.
*/
--wswb-outline-normal-color:
var(--wswb-rarity-normal);
--wswb-outline-muted-color:
var(--wswb-rarity-normal-muted);
--wswb-outline-color:
var(--wswb-outline-normal-color);
-webkit-filter:
drop-shadow(
var(--wswb-outline-size)
0
0
var(--wswb-outline-color)
)
drop-shadow(
0
var(--wswb-outline-neg-size)
0
var(--wswb-outline-color)
)
drop-shadow(
var(--wswb-outline-neg-size)
0
0
var(--wswb-outline-color)
)
drop-shadow(
0
var(--wswb-outline-size)
0
var(--wswb-outline-color)
);
filter:
drop-shadow(
var(--wswb-outline-size)
0
0
var(--wswb-outline-color)
)
drop-shadow(
0
var(--wswb-outline-neg-size)
0
var(--wswb-outline-color)
)
drop-shadow(
var(--wswb-outline-neg-size)
0
0
var(--wswb-outline-color)
)
drop-shadow(
0
var(--wswb-outline-size)
0
var(--wswb-outline-color)
);
}
/* ============================================================
Outline modifiers
============================================================ */
/* Use the official muted version of the selected role. */
.wswb-outline--muted {
--wswb-outline-color:
var(--wswb-outline-muted-color);
}
/* Larger outline for primary infobox images. */
.wswb-outline--infobox {
--wswb-outline-size: 3px;
--wswb-outline-neg-size: -3px;
}
/*
Enlarge the currently selected outline without changing its
color.
*/
.wswb-outline--hover:hover {
--wswb-outline-size: 2px;
--wswb-outline-neg-size: -2px;
}
/*
Replace the selected outline with Fine while hovering.
Only color variables are changed here. The filter itself
remains on wswb-outlined-image, preventing a second outline
filter from being layered over the first.
*/
.wswb-outline--hover-fine:hover {
--wswb-outline-size: 2px;
--wswb-outline-neg-size: -2px;
--wswb-outline-normal-color:
var(--wswb-item-fine);
--wswb-outline-muted-color:
var(--wswb-item-fine-muted);
}
/* Replace the selected outline with Rare Egg while hovering. */
.wswb-outline--hover-rare-egg:hover {
--wswb-outline-size: 2px;
--wswb-outline-neg-size: -2px;
--wswb-outline-normal-color:
var(--wswb-item-rare-egg);
--wswb-outline-muted-color:
var(--wswb-item-rare-egg-muted);
}
/* ============================================================
Normal and item-quality roles
============================================================ */
.wswb-outline--none {
--wswb-outline-normal-color:
var(--wswb-outline-none);
--wswb-outline-muted-color:
var(--wswb-outline-none-muted);
}
.wswb-outline--normal,
.wswb-outline--quality-common {
--wswb-outline-normal-color:
var(--wswb-rarity-normal);
--wswb-outline-muted-color:
var(--wswb-rarity-normal-muted);
}
.wswb-outline--quality-uncommon {
--wswb-outline-normal-color:
var(--wswb-rarity-uncommon);
--wswb-outline-muted-color:
var(--wswb-rarity-uncommon-muted);
}
.wswb-outline--quality-rare {
--wswb-outline-normal-color:
var(--wswb-rarity-rare);
--wswb-outline-muted-color:
var(--wswb-rarity-rare-muted);
}
.wswb-outline--quality-epic {
--wswb-outline-normal-color:
var(--wswb-rarity-epic);
--wswb-outline-muted-color:
var(--wswb-rarity-epic-muted);
}
.wswb-outline--quality-legendary {
--wswb-outline-normal-color:
var(--wswb-rarity-legendary);
--wswb-outline-muted-color:
var(--wswb-rarity-legendary-muted);
}
.wswb-outline--quality-ethereal {
--wswb-outline-normal-color:
var(--wswb-rarity-ethereal);
--wswb-outline-muted-color:
var(--wswb-rarity-ethereal-muted);
}
/* ============================================================
Item tag roles
============================================================ */
.wswb-outline--tag-fine {
--wswb-outline-normal-color:
var(--wswb-item-fine);
--wswb-outline-muted-color:
var(--wswb-item-fine-muted);
}
.wswb-outline--tag-collectible {
--wswb-outline-normal-color:
var(--wswb-item-collectible);
--wswb-outline-muted-color:
var(--wswb-item-collectible-muted);
}
.wswb-outline--tag-lore {
--wswb-outline-normal-color:
var(--wswb-item-lore);
--wswb-outline-muted-color:
var(--wswb-item-lore-muted);
}
.wswb-outline--tag-magical {
--wswb-outline-normal-color:
var(--wswb-item-magical);
--wswb-outline-muted-color:
var(--wswb-item-magical-muted);
}
.wswb-outline--tag-valuable {
--wswb-outline-normal-color:
var(--wswb-item-valuable);
--wswb-outline-muted-color:
var(--wswb-item-valuable-muted);
}
.wswb-outline--tag-egg {
--wswb-outline-normal-color:
var(--wswb-item-egg);
--wswb-outline-muted-color:
var(--wswb-item-egg-muted);
}
.wswb-outline--tag-rare-egg {
--wswb-outline-normal-color:
var(--wswb-item-rare-egg);
--wswb-outline-muted-color:
var(--wswb-item-rare-egg-muted);
}
/* ============================================================
Money and credit roles
============================================================ */
.wswb-outline--money-coins {
--wswb-outline-normal-color:
var(--wswb-money-coins);
--wswb-outline-muted-color:
var(--wswb-money-coins-muted);
}
.wswb-outline--credit-negative {
--wswb-outline-normal-color:
var(--wswb-credit-negative);
--wswb-outline-muted-color:
var(--wswb-credit-negative-muted);
}
/* ============================================================
Individual skill roles
============================================================ */
.wswb-outline--skill-woodcutting {
--wswb-outline-normal-color:
var(--wswb-skill-woodcutting);
--wswb-outline-muted-color:
var(--wswb-skill-woodcutting-muted);
}
.wswb-outline--skill-agility {
--wswb-outline-normal-color:
var(--wswb-skill-agility);
--wswb-outline-muted-color:
var(--wswb-skill-agility-muted);
}
.wswb-outline--skill-cooking {
--wswb-outline-normal-color:
var(--wswb-skill-cooking);
--wswb-outline-muted-color:
var(--wswb-skill-cooking-muted);
}
.wswb-outline--skill-fishing {
--wswb-outline-normal-color:
var(--wswb-skill-fishing);
--wswb-outline-muted-color:
var(--wswb-skill-fishing-muted);
}
.wswb-outline--skill-carpentry {
--wswb-outline-normal-color:
var(--wswb-skill-carpentry);
--wswb-outline-muted-color:
var(--wswb-skill-carpentry-muted);
}
.wswb-outline--skill-mining {
--wswb-outline-normal-color:
var(--wswb-skill-mining);
--wswb-outline-muted-color:
var(--wswb-skill-mining-muted);
}
.wswb-outline--skill-foraging {
--wswb-outline-normal-color:
var(--wswb-skill-foraging);
--wswb-outline-muted-color:
var(--wswb-skill-foraging-muted);
}
.wswb-outline--skill-crafting {
--wswb-outline-normal-color:
var(--wswb-skill-crafting);
--wswb-outline-muted-color:
var(--wswb-skill-crafting-muted);
}
.wswb-outline--skill-smithing {
--wswb-outline-normal-color:
var(--wswb-skill-smithing);
--wswb-outline-muted-color:
var(--wswb-skill-smithing-muted);
}
.wswb-outline--skill-trinketry {
--wswb-outline-normal-color:
var(--wswb-skill-trinketry);
--wswb-outline-muted-color:
var(--wswb-skill-trinketry-muted);
}
.wswb-outline--skill-hunting {
--wswb-outline-normal-color:
var(--wswb-skill-hunting);
--wswb-outline-muted-color:
var(--wswb-skill-hunting-muted);
}
.wswb-outline--skill-tailoring {
--wswb-outline-normal-color:
var(--wswb-skill-tailoring);
--wswb-outline-muted-color:
var(--wswb-skill-tailoring-muted);
}
/* ============================================================
Skill-type roles
============================================================ */
.wswb-outline--skill-type-gathering {
--wswb-outline-normal-color:
var(--wswb-skill-type-gathering);
--wswb-outline-muted-color:
var(--wswb-skill-type-gathering-muted);
}
.wswb-outline--skill-type-artisan {
--wswb-outline-normal-color:
var(--wswb-skill-type-artisan);
--wswb-outline-muted-color:
var(--wswb-skill-type-artisan-muted);
}
.wswb-outline--skill-type-utility {
--wswb-outline-normal-color:
var(--wswb-skill-type-utility);
--wswb-outline-muted-color:
var(--wswb-skill-type-utility-muted);
}
.wswb-outline--skill-type-combat {
--wswb-outline-normal-color:
var(--wswb-skill-type-combat);
--wswb-outline-muted-color:
var(--wswb-skill-type-combat-muted);
}
/* ============================================================
Service-tier roles
============================================================ */
.wswb-outline--service-basic {
--wswb-outline-normal-color:
var(--wswb-service-basic);
--wswb-outline-muted-color:
var(--wswb-service-basic-muted);
}
.wswb-outline--service-advanced {
--wswb-outline-normal-color:
var(--wswb-service-advanced);
--wswb-outline-muted-color:
var(--wswb-service-advanced-muted);
}
.wswb-outline--service-legendary {
--wswb-outline-normal-color:
var(--wswb-service-legendary);
--wswb-outline-muted-color:
var(--wswb-service-legendary-muted);
}
.wswb-outline--service-mythic {
--wswb-outline-normal-color:
var(--wswb-service-mythic);
--wswb-outline-muted-color:
var(--wswb-service-mythic-muted);
}
/* ISO files are integer-scaled; fitting a narrow viewport may reduce displayed detail. */
.wswb-location-iso,
.wswb-location-iso img {
max-width: 100%;
height: auto;
}
.wswb-location-iso img,
img.wswb-location-iso {
image-rendering: pixelated;
object-fit: contain;
}
/* Give file wrappers a cell-sized containing block instead of intrinsic image width.
* Include .center for previously generated pages using centered file markup. */
.wswb-location-condition-comparison td .center,
.wswb-location-condition-comparison td .floatnone,
.wswb-location-condition-comparison td .wswb-location-comparison-image,
.wswb-location-condition-comparison td .wswb-location-iso--comparison,
.wswb-location-condition-comparison td .center a,
.wswb-location-condition-comparison td .wswb-location-comparison-image a,
.wswb-location-condition-comparison td .wswb-location-iso--comparison a {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
margin-inline: auto;
}
/* Images must not contribute their intrinsic width to automatic table layout. */
.wswb-location-condition-comparison td .center,
.wswb-location-condition-comparison td .wswb-location-comparison-image {
contain: inline-size;
}
.wswb-location-condition-comparison td img.wswb-location-iso--comparison,
.wswb-location-condition-comparison td .wswb-location-iso--comparison img,
.wswb-location-condition-comparison td .wswb-location-comparison-image img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
margin-inline: auto;
}
/* Positional route navigation. common.js toggles is-wide using the available
* content width. Keep the threshold in rem: 15rem per retained column plus gaps.
* Without JavaScript the accessible single column is retained. */
.wswb-route-navigation {
--wswb-route-wide-min: 46.2rem;
width: 100%;
min-width: 0;
margin-block: 0.75em 1em;
}
.wswb-route-grid {
--wswb-route-columns: 3;
/* Compass east/west positions must not reverse on an RTL wiki page. */
direction: ltr;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.6rem;
width: 100%;
min-width: min(15rem, 100%);
max-width: 100%;
}
.wswb-route-grid--columns-1 {
--wswb-route-columns: 1;
--wswb-route-wide-min: 15rem;
}
.wswb-route-grid--columns-2 {
--wswb-route-columns: 2;
--wswb-route-wide-min: 30.6rem;
}
.wswb-card-list > .wswb-card,
.wswb-route-cell {
border: 2px solid var(--border-color-base, #a2a9b1);
border-radius: 0.65rem;
}
.wswb-route-cell {
box-sizing: border-box;
min-width: 0;
padding: 0.8rem 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 0.6rem;
}
.wswb-route-cell--hidden {
border-style: dashed;
}
.mw-content-rtl .wswb-route-cell {
direction: rtl;
}
.wswb-route-cell--center {
background: var(--background-color-interactive-subtle, #eaecf0);
}
.wswb-route-destination .wswb-object-reference {
display: flex;
align-items: center;
gap: 0.65rem;
white-space: normal;
min-width: 0;
}
.wswb-route-destination .wswb-object-reference > :first-child {
flex: 0 0 auto;
}
.wswb-route-destination .wswb-object-reference > :last-child {
flex: 1;
min-width: 0;
text-align: center;
overflow-wrap: anywhere;
hyphens: auto;
}
.wswb-route-detail {
display: flex;
align-items: center;
gap: 0.65rem;
}
.wswb-route-detail > :first-child {
flex: 1;
min-width: 0;
text-align: center;
overflow-wrap: anywhere;
}
.wswb-route-arrow {
flex: 0 0 auto;
}
.wswb-route-direction {
font-size: 0.85em;
}
.wswb-route-empty {
display: none;
}
.wswb-route-notes > li {
margin-block: 0.4em;
}
.wswb-route-grid.is-wide {
width: max-content;
grid-template-columns: repeat(var(--wswb-route-columns), minmax(0, 1fr));
min-width: var(--wswb-route-wide-min);
}
.wswb-route-grid.is-wide > .wswb-route-empty {
display: block;
}
/* WSWB responsive object cards. Shared by location section collections. */
.wswb-card-collection {
--wswb-card-stack-max: 512px;
width: 100%;
min-width: 0;
margin-block: 0.75em 1em;
}
.wswb-card-list {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 0.6rem;
width: var(--wswb-card-width, 100%);
max-width: 100%;
}
.wswb-card-list > .wswb-card {
box-sizing: border-box;
flex: 0 1 auto;
width: max-content;
min-width: min(15rem, 100%);
max-width: 100%;
min-height: 4.5rem;
padding: 0.8rem 1rem;
display: flex;
align-items: center;
}
.wswb-card-collection--hidden > .wswb-card-list > .wswb-card,
.wswb-card-collection--emergency > .wswb-card-list > .wswb-card {
border-style: dashed;
}
.wswb-card-collection--emergency > .wswb-card-list > .wswb-card {
border-color: red;
}
.wswb-card > p {
margin: 0;
min-width: 0;
width: 100%;
}
/* Only card references wrap; ordinary inline references remain together. */
.wswb-card .wswb-object-reference {
display: flex;
align-items: center;
gap: 0.65rem;
width: 100%;
min-width: 0;
white-space: normal;
}
.wswb-card .wswb-object-reference > :first-child {
flex: 0 0 auto;
}
.wswb-card .wswb-object-reference > :last-child {
min-width: 0;
overflow-wrap: anywhere;
hyphens: auto;
}
.wswb-card-list.is-packed > .wswb-card {
flex: 1 1 var(--wswb-card-basis, 15rem);
max-width: 100%;
}
.wswb-compare-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
margin-block: 1rem;
}
.wswb-compare-controls select {
max-width: min(30rem, 80vw);
}
.wswb-compare-panels:not([hidden]) {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 1rem;
}
.wswb-compare-panel {
min-width: 0;
}
.wswb-compare-heading {
font-weight: bold;
overflow-wrap: anywhere;
margin-bottom: 0.5rem;
}
.wswb-compare-panel iframe {
display: block;
box-sizing: border-box;
width: 100%;
height: 80vh;
min-height: 30rem;
border: 1px solid #a2a9b1;
background: white;
}
