MediaWiki:Common.css

/* --- body --- */ html { line-height: 1.15; }

body { background-color: var(--body-background-color); background-image: var(--body-background-image); background-size: var(--body-background-size); background-attachment: var(--body-background-attachment); background-position: var(--body-background-position); background-repeat: var(--body-background-repeat); }

.mobileonly { display: none; } /* --- page structure --- */ div#content, div#footer { background: var(--content-background); border: var(--content-border); border-radius: var(--content-border-radius); margin-right: 1em; }

ul#filetoc { background: var(--catlinks-background); border: var(--catlinks-border); border-radius: 0.3em; } /** thumbnails **/ li.gallerybox div.thumb { background: var(--thumbnail-background); border: var(--thumbnail-border); margin: 2px; text-align: center; }
 * 1) catlinks,

div.thumbinner, table.mw_metadata td { background: var(--thumbnail-background); border: var(--thumbnail-border); }

html .thumbimage { background-color: transparent; border: var(--thumbnail-border); } /** footer **/ div#footer { margin-top: 0.5em; }

div#footer ul li { color: var(--body-color); } /* --- text styles --- */ div#content h1, div#content h2, div#content h3, div#content h4, div#content h5, div#content h6, div#pageWrapper div#content, div#pageWrapper div#footer, div#pageWrapper div#mw-navigation { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; color: var(--body-color); }

a, a:visited, div#content a.external, div#content a.external:visited, div#content a.extiw, div#content a.extiw:visited, div#mw-navigation a, div#mw-navigation li a { color: var(--link-color); }

div#content a.new, div#content li.new a, div#footer a.new, div#footer li.new a, div#mw-navigation a.new, div#mw-navigation li.new a { color: var(--link-redlink-color); }

ul { list-style-type: disc; list-style-image: none; }

div#content h1, div#content h2, div#content h4, div#content h5, div#content h6 { border-color: var(--body-color); } /** code/pre tags **/ .mw-code, code, kbd, pre, samp, tt { font-family: monospace; font-size: 110%; color: var(--code-color); }

.mw-highlight { background: transparent; }

.mw-highlight pre { max-height: 75vh; overflow: auto; }

.mw-code, code, pre, pre.mw-code { background: var(--code-background); border-color: var(--code-color); }

.mw-code a, code a { color: var(--code-color); text-decoration: underline double; } /** fieldset **/ fieldset { border: 1px solid var(--body-color); }

.warning { color: var(--text-color); text-decoration: underline double; } /* --- header & top navigation --- */ div#mw-page-base { background: transparent !important; height: calc(2em + var(--logo-height,160px) + 2 * var(--logo-vertical-space,0.5em) + var(--logo-content-space,0px)); }

display: none; }
 * 1) mw-head-base {

div#mw-head { top: calc(var(--logo-height,160px) + 2 * var(--logo-vertical-space,0.5em) + var(--logo-content-space,0px)); height: 2em; }

margin: 0 auto; height: 2em; }
 * 1) left-navigation,
 * 2) right-navigation {

div#left-navigation { margin-left: 11.25em; }

div#right-navigation { margin-right: 0.5em; } /** basics **/ div.vectorMenu, div.vectorTabs { background: transparent; height: 2em; font-size: 80%; }
 * 1) p-search,

div#mw-head div.vectorMenu h3 span, div#mw-head div.vectorTabs span a { text-transform: uppercase; padding: 0; height: 1em; font-weight: bold; font-size: 100%; display: inline-block; }

div#mw-head div.vectorMenu h3 span { padding-right: 16px; vertical-align: top; }

div#mw-head div.vectorMenu h3 span:after { top: 0; filter: invert(var(--navigation-arrow-invert)); }

div#mw-head div.vectorMenu h3, div#mw-head div.vectorTabs ul li span { background: var(--navigation-tab-background); box-shadow: var(--navigation-tab-box-shadow); padding: 0.5em; margin: 0 0.25em; height: 1em; line-height: 1; overflow: visible; border-radius: var(--content-border-radius); }

div#pageWrapper div#mw-navigation div.vectorMenu h3 span, div#pageWrapper div#mw-navigation li.selected a { color: var(--navigation-tab-active-color); }

div#mw-head div.vectorMenu:hover h3, div#mw-head div.vectorTabs ul li.selected span, div.vectorMenu div.menu { background: var(--navigation-tab-active-background); }

div#mw-head div.vectorMenu:hover h3 { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }

div.vectorMenu:hover ul, div.vectorTabs ul, div.vectorTabs ul li, div.vectorTabs ul li.selected { background: transparent; }

/** vectorMenu **/ div.vectorMenu div.menu { top: 2em; border: 0; padding: 0.25em; }

div#mw-navigation div.vectorMenu #ca-unwatch a, div#mw-navigation div.vectorMenu #ca-watch a, div#mw-navigation div.vectorMenu div.menu li a { padding: 0.3em; font-size: 90%; display: block; height: auto; margin: auto; color: var(--navigation-tab-active-color)!important; }

box-sizing: border-box; left: 1px; }
 * 1) p-sharing .menu {

display: inline-block; margin: 0; width: 50%; padding: 2%; box-sizing: border-box; }
 * 1) p-sharing #socialIconImages > a {

/** watch button **/ div#mw-head #ca-unwatch.icon a, div#mw-head #ca-watch.icon a { color: transparent; background-size: 1.5em; height: 1.5em; margin: -0.25em 0; padding-top: 0; background-position: center center; } /** searchbox **/ margin: 0 1.25em 0 0.25em; }
 * 1) p-search {

div#simpleSearch { height: 2em; width: 17.5vw; border: 0; background: var(--navigation-tab-background); box-shadow: var(--navigation-tab-box-shadow); margin: 0; padding-left: 0.5em; }

margin: 0; }
 * 1) p-search form {

div#simpleSearch #searchInput { padding: 0.5em 0; margin: 0; height: 1em; color: var(--navigation-tab-active-color); box-sizing: content-box; text-overflow: ellipsis; font-size: 1em; }

div#simpleSearch #searchInput::placeholder { color: var(--navigation-tab-active-color); opacity: 0.65; font-style: italic; }

filter: brightness(calc(var(--navigation-arrow-invert) + 0.5)); }
 * 1) simpleSearch #searchButton {

/** search suggestions **/ .mediawiki .suggestions { margin-top: -2.5em; }

.mediawiki .suggestions-results, .mediawiki .suggestions-special { background: var(--searchsuggestions-background); }

.mediawiki .suggestions a, .mediawiki .suggestions-result { background: transparent; }

.mediawiki .suggestions-result { font-size: 1.15em; }

.mediawiki .suggestions-results, .mediawiki .suggestions-special { border-color: var(--searchsuggestions-border-color); box-shadow: none; }

.suggestions a.mw-searchSuggest-link, .suggestions a.mw-searchSuggest-link:active, .suggestions a.mw-searchSuggest-link:focus, .suggestions a.mw-searchSuggest-link:hover, .suggestions-result, .suggestions-special .special-label, .suggestions-special .special-query { color: var(--navigation-tab-active-color); }

.mediawiki .suggestions-result-current { background: var(--searchsuggestions-hover-background); color: var(--searchsuggestions-hover-color); }

.mediawiki .suggestions-result-current .special-label, .mediawiki .suggestions-result-current .special-query { color: var(--searchsuggestions-hover-color); } /* --- sidebar --- */ div#mw-panel { top: calc(var(--logo-height,160px) + 2 * var(--logo-vertical-space,0.5em)); padding-top: 0; }

height: var(--logo-height,160px); width: var(--logo-width,160px); }
 * 1) p-logo,
 * 2) p-logo a {

left: calc(50vw * var(--logo-center,0)); margin-left: calc(var(--logo-left,0px) + var(--logo-width,160px) / -2 * var(--logo-center,0)); top: 0; margin-top: calc(0px - var(--logo-height,160px) - var(--logo-vertical-space,0.5em)); }
 * 1) p-logo {

background-size: 100%; }
 * 1) p-logo a {

div#mw-panel div.portal { background: transparent; margin: 0.25em; }

div#mw-panel #p-logo + div.portal div.body { margin: 0; }

.mediawiki div#mw-panel div.portal h3, .mediawiki div#mw-panel.collapsible-nav div.portal h3, .mediawiki div#mw-panel.collapsible-nav div.portal.collapsed h3 { font-size: 80%; padding: 0.5em; margin: 0 0 0.25em; background: var(--sidebar-header-background); box-shadow: var(--sidebar-link-box-shadow); text-transform: uppercase; font-weight: bold; border-radius: var(--content-border-radius); }

content: '+'; float: right; color: var(--sidebar-header-color); }
 * 1) mw-panel.collapsible-nav .portal.collapsed h3::after {

content: '-'; float: right; color: var(--sidebar-header-color); }
 * 1) mw-panel.collapsible-nav .portal.expanded h3::after {

text-decoration: none; }
 * 1) mw-panel.collapsible-nav .portal.collapsed h3:hover {

.mediawiki div#mw-panel div.portal h3, div#pageWrapper div#mw-panel h3 a { color: var(--sidebar-header-color); }

.mediawiki div#mw-panel .portal.persistent h3 { background: transparent; border: 0; box-shadow: none; }
 * 1) mw-panel.collapsible-nav .portal.persistent h3,

div#mw-panel div.portal div.body ul { padding-top: 0; }
 * 1) mw-panel.collapsible-nav .portal .body ul,

div#mw-panel div.portal div.body ul li { padding: 0.35em 0.5em; margin: 0.25em 0; background: var(--sidebar-link-background); box-shadow: var(--sidebar-link-box-shadow); border-radius: var(--content-border-radius); }
 * 1) mw-panel.collapsible-nav .portal .body ul li,

.mediawiki div#mw-panel div.portal div.body ul li a, div#mw-panel.collapsible-nav div.portal div.body ul li a { color: var(--sidebar-header-color); }

.mediawiki div#mw-panel div.portal div.body { background: transparent; margin-left: 0; }
 * 1) mw-panel.collapsible-nav .portal .body,

div#mw-panel.collapsible-nav div.portal#p-socialProfiles h3 { background: transparent; display: none; }
 * 1) mw-panel.collapsible-nav .portal#p-claimWiki h3,

.socialSidebar { width: 100%; }

div#mw-panel.collapsible-nav div.portal#p-socialProfiles { margin: 0.25em; } /* --- front page --- */ .fp-container { display: grid; grid-template-areas: 'h' 'l' 'm' 'r'; grid-template-columns: 100%; }
 * 1) mw-panel.collapsible-nav .portal#p-claimWiki,

@media screen and (min-width:990px) { .fp-container { grid-template-areas: 'h h' 'l m' 'r m'; grid-template-columns: 50% 50%; } }

@media screen and (min-width:1350px) { .fp-container { grid-template-areas: 'h m r' 'l m r' 'l m r'; grid-template-columns: 33% 33% 33%; } }

.fp-section { display: flex; flex-wrap: wrap; }

grid-area: h; }
 * 1) fp-section1 {

grid-area: l; }
 * 1) fp-section2 {

grid-area: m; }
 * 1) fp-section3 {

grid-area: r; } /* --- front page boxes **/ .fpbox { background: var(--fpbox-background); color: var(--body-color); margin: 5px; padding: 0.75em; overflow: auto; box-sizing: border-box; border: var(--fpbox-border); width: calc(100% - 2px); }
 * 1) fp-section4 {

.fpbox-heading { border-bottom: var(--fpheading-border); background: var(--fpheading-background); text-align: center; color: var(--fpheading-color); font-family: var(--fpheading-font), sans-serif; font-size: 132%; margin: 0 0 0.5em; padding: 0.25em; letter-spacing: 1px; }

.fpbox-body { margin: 5px; }

.fpbox-plain { background: transparent; border: 0; box-shadow: none; }

.fpbox-mainheading { font-size: 150%; }

.fpbox-subheading { font-size: 120%; border: 0; text-align: center; } /** wiki help box **/ .wikihelp { display: flex; flex-wrap: wrap; }

.wikihelp-info { flex-basis: 65%; flex-grow: 1; }

.wikihelp-form { flex-basis: 35%; text-align: center; flex-grow: 1; } /* --- Template:FP links --- */ .fplinks { display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: stretch; text-align: center; }

.fplink-outer { padding: 5px; flex-basis: calc(25% - 10px); width: calc(25% - 15px); min-width: 115px; display: inline-block; vertical-align: middle; }

.fplink-wide { flex-basis: calc(33% - 10px); width: calc(33% - 15px); }

.fplink-fullwidth { flex-basis: 100%; width: calc(100% - 15px); font-weight: bold; }

.fplink { background: var(--fplink-background); border: var(--fplink-border); padding: 0.5em; box-sizing: border-box; width: 100%; height: 100%; display: table; }

.fplink-fullwidth .fplink { background: var(--fplink-fullwidth-background); }

.fplink-plain { background: transparent; border-radius: 0; border: 0; box-shadow: none; }

.fplink-inner { display: table-row; }

.fplink a { display: table-cell; vertical-align: middle; }

.fplink img { max-width: 150px; width: 100%; height: auto; } /** Miscellaneous front page fixes **/ .fpbox .embedvideo, .fpbox .embedvideowrap { width: 100%!important; max-width: 480px; margin: 0 auto; }

.fpbox .embedvideowrap iframe { width: 100%!important; }

.fpbox .slideboxlightshow { max-width: 100%; margin: 0 auto; }

.fpbox .slideboxlightshow a, .fpbox .slideboxlightshow img { max-width: 100%!important; } /* --- community portal --- */ .cp-container { display: flex; flex-direction: row-reverse; flex-wrap: wrap; }

.cp-section { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: stretch; flex-grow: 1; }

.cp-sidebar { width: 33%; min-width: 280px; }

.cp-main { width: 66%; }

.cp-box { background: var(--fpbox-background); padding: 10px; margin: 5px; flex-grow: 1; } /* --- Amboxes --- */ .ambox { background-color: var(--ambox-background); border-width: 0 0 0 10px; border-style: solid; border-collapse: collapse; font-size: 95%; margin: 0 auto 2px; /* fit ambox to 100% minus infobox width - this prevents the amboxes from unintentionally pushing content down below the float:right infoboxes */ width: calc(100% - 276px - 1em); } @media screen and (max-width: 511px) { /* at 511px, mediawiki expands the infobox to full width, so we do the same with the ambox */ table.ambox { width: auto; } }

.ambox.ambox-tiny { font-size: 90%; margin: 2px 0; width: auto; }

.ambox + .ambox { margin-top: -2px; }

.ambox-text { padding: 0.25em 0.5em; }

.ambox-image { padding: 2px 0 2px 0.5em; text-align: center; width: 60px; }

.ambox-tiny .ambox-image { padding: 2px 0.5em; text-align: left; width: auto; } /* Ambox colors */ .ambox-gray { border-left-color: var(--ambox-gray); }

.ambox-blue { border-left-color: var(--ambox-blue); }

.ambox-red { border-left-color: var(--ambox-red); }

.ambox-orange { border-left-color: var(--ambox-orange); }

.ambox-yellow { border-left-color: var(--ambox-yellow); }

.ambox-purple { border-left-color: var(--ambox-purple); }

.ambox-green { border-left-color: var(--ambox-green); } .ambox-qud-c { border-left-color: var(--qud-color-c); } /* Ambox small text */ .amsmalltext { font-size: smaller; margin-left: 0.8em; margin-top: 0.5em; } /** for 'edit this page' and 'discussion' link in template:cleanup etc **/ .pagetab { border: 1px solid var(--body-color); padding: 0.25ex 1ex; font-size: 95%; } /* copyright images tweak */ .copyright-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22200%22%3E%3Cpath d=%22M100 200C44.772 200 0 155.228 0 100S44.772 0 100 0s100 44.772 100 100-44.772 100-100 100zm0-179.115c-43.694 0-79.115 35.421-79.115 79.115 0 43.694 35.421 79.115 79.115 79.115 43.694 0 79.115-35.421 79.115-79.115 0-43.694-35.421-79.115-79.115-79.115zm0 108.599c20.627 0 27.518-18.427 27.518-18.427h26.536s-7.847 43.734-54.054 43.734c-30.532 0-55.283-24.751-55.283-55.282 0-30.532 24.751-55.283 55.283-55.283 45.365 0 53.317 41.769 53.317 41.769h-26.781S118.966 69.533 100 69.533c-16.555 0-29.975 13.421-29.975 29.976s13.42 29.975 29.975 29.975z%22/%3E%3C/svg%3E%0A"); background-size: 100%; width: 32px; height: 32px; }

.skin-hydradark .copyright-icon { filter:invert(1); } /* --- toc --- */ div#toc, div.toc { background-color: var(--toc-background); border: var(--toc-border); } /* --- page history --- */ background: transparent; border: none; padding: 3px; }
 * 1) pagehistory li,
 * 2) pagehistory li.selected {

border: 1px dashed var(--body-color); }
 * 1) pagehistory li.selected {

.mediawiki table.diff, .mediawiki td.diff-ntitle, .mediawiki td.diff-otitle { background: transparent; }

.mw-plusminus-pos { color: #21b921; }

.mw-plusminus-neg { color: #f35e5e; } /* --- Template:Doc --- */ .doc, .doc-footer { background: var(--doc-background); border: var(--doc-border); margin: 0 auto 1em; border-radius: 1em; padding: 1em; }

.doc-footer { margin-bottom: 0; }

.doc-header { padding-bottom: 3px; border-bottom: var(--doc-border); margin-bottom: 1ex; } /* --- tables --- */ table.wikitable { border-collapse: var(--wikitable-border-collapse); border-spacing: var(--wikitable-border-spacing); background: transparent; border: var(--wikitable-border); }

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

.mediawiki table.wikitable > * > tr > th, .mediawiki table.wikitable > tr > th { background: var(--wikitable-header-background); color: var(--wikitable-header-color); text-align: center; }

.mediawiki table.wikitable > * > tr > td { background: var(--wikitable-background); padding: 0.2em 0.4em; }

.mediawiki table.jquery-tablesorter th.headerSort { background-image: none!important; padding-right: 1.4em; }

.mediawiki table.jquery-tablesorter th.headerSort:after { content: '\f0dc'; font-family: 'FontAwesome'; display: inline-block; width: 1em; margin-right: -1em; text-align: right; }

.mediawiki table.jquery-tablesorter th.headerSortUp:after { content: '\f0de'; }

.mediawiki table.jquery-tablesorter th.headerSortDown:after { content: '\f0dd'; }

.mediawiki table.jquery-tablesorter th.unsortable, .mediawiki th.header-bg.th.unsortable { background: var(--wikitable-header-background); } /** Cargo tables **/ .mediawiki table.cargoTable { border-collapse: collapse; color: var(--body-color); background: transparent; }

.mediawiki table.cargoTable td.even, .mediawiki table.cargoTable td.odd, table.cargoTable.noMerge tr:nth-child(2n+1) { background: transparent; }

.cargoTable tr:nth-child(even) { background: transparent; }

.mediawiki table.cargoTable > * > tr > th, .mediawiki table.cargoTable > tr > th { background: var(--wikitable-header-background); color: var(--wikitable-header-color); text-align: center; font-variant: small-caps; border: var(--wikitable-border); }

.mediawiki table.cargoTable > * > tr > td { border: var(--wikitable-border); padding: 0.2em 0.4em; color: var(--body-color); } /** Cargo Drilldown **/ div.drilldown-filters-wrapper { background: transparent; border: var(--preferences-border); margin: 0; color: var(--body-color); }

div#drilldown-format-tabs-wrapper { border: 0; }
 * 1) drilldown-tables-tabs-wrapper,

.drilldown-tabs { background: transparent; }

.drilldown-tabs li, .drilldown-tabs li:first-child { background: var(--preferences-tab-background); margin: 0.25em; height: 1em; position: relative; padding: 0.5em; line-height: 1; display: inline-block; float: none; }

.drilldown-tabs li a { color: var(--link-color); padding: 0; display: inline-block; }

.drilldown-tabs li.selected a { background: transparent; font-weight: bold; color: var(--body-color); }

.drilldown-tabs li.selected { background: var(--preferences-tab-active-background); }

/** Dynamic Tables **/ table.cargoDynamicTable { margin-top: 1em; border: 0 solid transparent; }

table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td { border-top: var(--wikitable-border); }

table.dataTable tfoot td, table.dataTable tfoot th, table.dataTable thead td, table.dataTable thead th { background: var(--wikitable-header-background)!important; border: var(--wikitable-border)!important; }

table.dataTable tbody tr { color: var(--body-color); background: transparent; }

table.dataTable.display tbody tr.odd, table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1, table.dataTable.stripe tbody tr.odd { background: transparent; text-align: left; }

table.dataTable.display tbody tr.even, table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1, table.dataTable.stripe tbody tr.even { background: transparent; text-align: left; }

table.dataTable.display tbody tr:hover, table.dataTable.hover tbody tr:hover { background: var(--wikitable-header-background); }

.dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_paginate, .dataTables_wrapper .dataTables_processing { color: var(--wikitable-header-color); padding: 0.5em 0; }

.dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--link-color)!important; }

.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--wikitable-header-background); }

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { color: var(--body-color) !important; background: var(--wikitable-alt-background); border: var(--wikitable-border); }

/* widescreen styles for cooking effects page only */ @media screen and (min-width: 1700px) { body.page-Cooking_effects table.dataTable tr > td:first-child { width: 720px; } body.page-Cooking_effects table.dataTable tr > td:nth-child(2) { white-space: nowrap; } }

/** Tablepager **/ .mediawiki .TablePager th { background: var(--wikitable-header-background); color: var(--wikitable-header-color); border: var(--wikitable-border); padding: 0 0.15em; }

.mediawiki .TablePager td { background: var(--wikitable-background); border: var(--wikitable-border); color: var(--body-color); }

.mediawiki .TablePager tr:hover td { background: var(--wikitable-alt-background)!important; color: var(--wikitable-header-color); } /* --- source editor --- */ div.wikiEditor-ui { background: transparent; border: medium none; }

div.wikiEditor-ui div.wikiEditor-ui-view { border: var(--editor-border); margin-bottom: 0.5em; }

div.wikiEditor-ui-controls { background-color: transparent; border-bottom: 0; }

div.wikiEditor-ui .wikiEditor-ui-top { border-bottom: var(--editor-border); }

div.wikiEditor-ui-toolbar { background: var(--editor-toolbar-background); border-bottom: var(--editor-border); }

div.wikiEditor-ui-toolbar .group { border-right: var(--editor-border); }

div.wikiEditor-ui-toolbar .group-search { border-left: var(--editor-border); border-right: none; }

div.wikiEditor-ui-toolbar .group .label { color: var(--body-color); }

div.wikiEditor-ui-toolbar .group .tool-select .label { color: var(--link-color); }

div.wikiEditor-ui-toolbar .sections .section { background: var(--editor-subtoolbar-background); border-top: var(--editor-border); }

div.wikiEditor-ui-toolbar .booklet .index div { color: var(--link-color); }

div.wikiEditor-ui-toolbar .booklet .index .current { background-color: var(--editor-toolbar-selected-background); color: var(--body-color); border-bottom: var(--editor-border); border-top: var(--editor-border); }

div.wikiEditor-ui-toolbar .booklet .pages { background-color: var(--editor-toolbar-selected-background); }

div.wikiEditor-ui-toolbar .page-characters div span { border: var(--editor-border); color: var(--body-color); }

div.wikiEditor-ui-toolbar .page-characters div span:hover { background-color: var(--editor-subtoolbar-background); color: var(--link-color); }

div.wikiEditor-ui-toolbar .page-table { padding: 0; }

div.wikiEditor-ui-toolbar .page-table th { background-color: var(--editor-subtoolbar-background); color: var(--link-color); }

div.wikiEditor-ui-toolbar .page-table td { border-top: var(--editor-border); color: var(--body-color); }

div.editOptions { background-color: var(--editor-toolbar-background); border: var(--editor-border); color: var(--body-color); } /** msupload **/ background: var(--msupload-filelist); border: 0; }
 * 1) msupload-div #msupload-list .file {

color: var(--body-color); }
 * 1) msupload-div #msupload-list .file .file-size,
 * 2) msupload-div #msupload-list .file .file-title,
 * 3) msupload-div #msupload-list .file .file-warning {

border-color: var(--body-color); color: var(--body-color); }
 * 1) msupload-dropzone {

background: var(--msupload-background); border: 1px solid transparent; } /** checkboxes **/ .mediawiki .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked+span { background-color: var(--editor-button-background); border-color: var(--editor-button-border-color); }
 * 1) msupload-div {

.mediawiki .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:hover:checked+span, .mediawiki .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:focus:checked+span, .mediawiki .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:active:checked+span, .mediawiki .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:focus:hover:checked+span { background-color: var(--editor-button-border-color); border-color: var(--editor-button-background); outline-color: var(--editor-button-background); box-shadow: none; } /** buttons **/ .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { background: var(--editor-button-background); border-color: var(--editor-button-border-color); color: var(--body-color); }

.mediawiki .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover, .mediawiki .oo-ui-popupWidget .oo-ui-popupWidget-popup .oo-ui-buttonWidget:hover, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus:hover, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover { background-color: var(--editor-button-border-color); border-color: var(--editor-button-background); }

.mediawiki .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button { background: var(--content-background); border-color: var(--link-color); color: var(--body-color); }

.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus { box-shadow: inset 0 0 0 1px var(--editor-button-border-color); } /** cancel button **/ .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button > .oo-ui-labelElement-label, .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > input.oo-ui-buttonElement-button { color: var(--body-color)!important; } /* --- navboxes --- */ table.navbox { border: var(--navbox-border); clear: both; font-size: 88%; margin: auto; margin-top: 1em; padding: 1px; text-align: center; width: 100%; } /** Border between adjacent navboxes **/ table.navbox+table.navbox { margin-top: -1px; }

.navbox-abovebelow, .navbox-group, .navbox-title, table.navbox th { padding-left: 1em; padding-right: 1em; }

.navbox-group { font-weight: bold; white-space: nowrap; } /** Base background **/ .navbox, .navbox-subgroup { background: var(--navbox-background); }

.navbox-list { border-color: var(--navbox-background); } /** Level 1 & 2 styling **/ .navbox-group, .navbox-subgroup .navbox-title, .navbox-title, table.navbox th { background: var(--navbox-secondary-background); color: var(--navbox-color); } /** Level 3 styling **/ .navbox-subgroup .navbox-abovebelow, .navbox-subgroup .navbox-group { background: var(--navbox-background); color: var(--navbox-color); } /** row striping **/ .navbox-even { background: var(--navbox-alt-background); color: var(--navbox-color); }

.navbox-odd { background: transparent; } /** collapsible navboxes **/ .collapseButton { font-weight: normal; width: auto; }

.navbox .collapseButton { width: 6em; }

.navbar { font-size: 88%; font-weight: normal; }

.navbox .navbar { font-size: 100%; }

table.collapsed tr.collapsible { display: none; } /* --- special:search --- */ .mediawiki .mw-search-profile-tabs { background: var(--catlinks-background); border: var(--catlinks-border); margin-top: 1em; }

div#pageWrapper div#content .search-types .current a { color: var(--body-color); }

.mediawiki fieldset#mw-searchoptions { background: var(--catlinks-background); border: var(--catlinks-border); margin-top: 0.25em; }

.mediawiki fieldset#mw-searchoptions div.divider { border-bottom: var(--catlinks-border); } /* --- special:searchlog --- */ .mediawiki .pagination li { background: var(--wikitable-background); color: var(--body-color); text-align: center; border: var(--wikitable-border); }

.mediawiki .pagination li.selected { background: var(--wikitable-header-background); color: var(--wikitable-header-color); }

.mediawiki table.wikitable > tr > th { background: var(--wikitable-header-background); color: var(--wikitable-header-color); text-align: center; border: var(--wikitable-border); }
 * 1) searchlog > * > tr > th,

background: var(--wikitable-background); border: var(--wikitable-border); padding: 0.2em 0.4em; color: var(--body-color); }
 * 1) searchlog > * > tr > td {

.oo-ui-menuSelectWidget { z-index: 10; } /* --- Preferences --- */ .mediawiki #preferences { background: transparent; color: var(--body-color); }

.client-js .mediawiki #preferences { border: var(--preferences-border); margin: 0; }

.client-js .mediawiki #preftoc { background: transparent; margin: 0 0 0.5em 0.25em; }

.client-js .mediawiki #preferences legend { color: var(--body-color); margin-left: 1em; }

.client-js .mediawiki #preftoc li a, .client-js .mediawiki #preftoc li a:active { color: var(--link-color); padding: 0; display: inline-block; }

.client-js .mediawiki #preftoc li.selected a { background: transparent; font-weight: bold; color: var(--body-color); }

.client-js .mediawiki #preftoc li { background: var(--preferences-tab-background); margin: 0 0.25em; height: 1em; position: relative; padding: 0.5em; line-height: 1; display: inline-block; }

.client-js .mediawiki #preftoc li.selected { background: var(--preferences-tab-active-background); }

.client-js .mediawiki #preferences td.htmlform-tip { color: var(--body-color); }

.mediawiki #preferences fieldset { border: var(--preferences-border); margin-top: 0; }

.client-js .mediawiki #preferences > fieldset, .client-js .mediawiki #preferences fieldset.prefsection fieldset { border: 0; border-top: var(--preferences-border); }

.client-js #preferences fieldset > fieldset { padding: 0; }

.client-js #preferences > fieldset:first-of-type { border-top: 0; } /* --- infoboxes --- */ .infoboxtable { width: 270px; float: right; margin-left: 1em; border: var(--infobox-border); padding: 0.25em; border-radius: 1px; }

.infoboxname { color: var(--infobox-header-color); padding: 5px; background: var(--infobox-header-background); }

.infoboxdetails { color: var(--infobox-details-color); background: var(--infobox-details-background); }

.infoboxtable div { text-align: right; font-weight: bold; color: var(--infobox-label-color); background: var(--infobox-label-background); padding: 1px 5px; } /* --- small screen fixes for top nav and sidebar --- */ @media screen and (max-width:720px) { div#mw-head { position: absolute!important; top: 0; }

div#mw-page-base { height: 6em; }

div#p-cactions, div#p-namespaces, div#p-search, div#p-variants, div#p-views { position: relative; top: 0; float: left; }

div#left-navigation, div#right-navigation { position: relative; float: none; margin: 0 auto; }

div.vectorMenu div.menu { left: 0; right: auto; }

div#p-search { width: auto; float: right; }

div#simpleSearch { width: calc(100vw - 10em); max-width: 100vw; }

div#mw-navigation div#mw-panel { font-size: 120%; top: 0; }

div#mw-navigation div#mw-panel .portal { width: auto; }

div#content, div#footer { margin-right: 0; }

div#content { padding: 0.75em; } }

ol.references li:target, sup.reference:target { background-color: rgba(102, 146, 204, 0.15); } /* - */ /* - */ /* ---                                      --- */ /* --- CUSTOM & TEMPLATE CSS BELOW THIS LINE --- */ /* ---                                      --- */ /* - */ /* - */

img.scalable { /* class for scalable images (https://help.gamepedia.com/Advanced_images#Using_css-defined_classes) */ max-width: 100%; height:auto; }

/* Template:Infobox, Template:Infobox row */ .moduleinfobox { position: relative; clear: right; margin: 0 0 1em 1em; width: 270px; font-size: 90%; float: right; border: var(--infobox-border); padding: 2px; overflow: auto; z-index: 1; } @media all and (max-width: 511px) { .moduleinfobox { float: none; margin-left: 0; width: auto; } } @media all and (max-width: 337px) { .moduleinfobox { margin-left: -16px; margin-right: -16px; border-left: none; border-right: none; } }

.moduleinfobox > .infobox-title { font-weight: bold; text-align: center; font-size: 120%; color: var(--infobox-header-color); background: var(--infobox-header-background); }

.infobox-imagearea { text-align: center; padding: 4px; } .infobox-imagearea > div:not(:first-child) { padding-top: 1em; } /* Horizontally centre animated images */ display: inline-flex; align-items: center; }
 * 1) bodyContent .infobox-imagearea .animated {

.moduleinfobox .infobox-rows { display: table; margin: 0 !important; width: 100% !important; border-collapse: separate !important; border-spacing: 1px !important; } .infobox-rows > tbody > tr > th { text-align: right; white-space: nowrap; background: var(--infobox-label-background); color: var(--infobox-label-color); }	margin: 0; } /* Merge adjacent dls in the infobox (since they're usually supposed to be one, but the wiki screws up sometimes) */ .infobox-rows dl + dl { margin-top: -0.4em; } .infobox-rows dl:last-child { margin-bottom: 0.2em; }
 * 1) bodyContent .infobox-rows p {

.infobox-footer { text-align: center; }

/* Element animator */ display: none }	display: inline-block; }	display: block; }
 * 1) bodyContent .animated > *:not(.animated-active),
 * 2) bodyContent .animated > .animated-subframe > *:not(.animated-active) {
 * 1) bodyContent span.animated,
 * 2) bodyContent span.animated.animated-visible > *,
 * 3) bodyContent span.animated.animated-visible > .animated-subframe > * {
 * 1) bodyContent div.animated.animated-visible > *,
 * 2) bodyContent div.animated.animated-visible > .animated-subframe > * {

.qud-box-wrapper { overflow: hidden; line-height: 1.5em; } .qud-box { border: 4px solid #77bfcf; border-top: 0; border-bottom: 0; padding: 0.4em 1em 0.1em 0.5em; margin: 1em 0 1em 0; font-family: Source Code Pro, Lucida Console, Consolas; font-size: medium; color: #b1c9c3; background: none; background: -o-repeating-linear-gradient(transparent 0px, transparent 2px, rgba(0,0,0,0.25) 2px, rgba(0,0,0,0.25) 4px); background: -moz-repeating-linear-gradient(transparent 0px, transparent 2px, rgba(0,0,0,0.25) 2px, rgba(0,0,0,0.25) 4px); background: -webkit-repeating-linear-gradient(transparent 0px, transparent 2px, rgba(0,0,0,0.25) 2px, rgba(0,0,0,0.25) 4px); background: repeating-linear-gradient(transparent 0px, transparent 2px, rgba(0,0,0,0.25) 2px, rgba(0,0,0,0.25) 4px); -o-background-size: 100% 4px; -moz-background-size: 100% 4px; -webkit-background-size: 100% 4px; background-size: 100% 4px; } .qud-box-header { position: relative; top: -1em; padding-left: 0.6em; padding-right: 0.6em; font-size: 1.2rem; font-weight: bold; display: inline-block; } .qud-box-header:before, .qud-box-header:after { content: ""; position: absolute; height: 4px; background: #77bfcf; top: .5em; } .qud-box-header:before { width: 100px; left: -100px; } .qud-box-header:after { width: 9999px; right: -9999px; } .qud-box-content { margin-top: -0.5em; padding-left: 0.3em; line-height: 1.5em; } .qud-box-footer-left { position: relative; top: 0.6em; padding-left: 0.1em; padding-right: 0.1em; font-size:1.2rem; font-weight: bold; color: #fff; } .qud-box-footer-left:before, .qud-box-footer-left:after { content: ""; position: absolute; height: 4px; background: #77bfcf; top: 50%; } .qud-box-footer-left:before { width: 100px; left: -98px; } .qud-box-footer-left:after { width: 9999px; right: -9997px; }

.white-border .qud-box-header:before, .white-border .qud-box-header:after, .white-border .qud-box-footer-left:before, .white-border .qud-box-footer-left:after {   background: #b1c9c3; } .white-border .qud-box { border: 4px solid #b1c9c3; border-top: 0; border-bottom: 0; }

.qud-image-link { text-decoration: none; cursor: pointer; font-weight: bold; line-height: 1em; height: 1em; display: inline-block; } .qud-image-link-image-container img { display: inline-block; position: absolute; top: -100%; left: 0; right: 0; bottom: -100%; margin: auto; margin-left: 0; margin-right: 0; vertical-align: middle; width: 16px; height: 24px; } .qud-image-link-image-container { height: 24px; width: 16px; padding-right: 0.25em; text-align: center; vertical-align: middle; display: inline-block; position: relative; } .qud-image-link:hover .qud-image-link-image-container { border-bottom: 0; } .qud-image-link span { text-decoration: underline; text-decoration-style: solid; } .qud-image { height: 1em; background: transparent; transition: background 0.2s ease-in-out; display: inline-block; padding: 0 2px 0.7em 0px; margin: 0 0 -0.2em 0; border-radius: 0.2em; white-space: nowrap; } .qud-image:hover { background: #0f3b3a; } /* * Qud Style for Category Pages * ============================ */ span.CategoryTreeEmptyBullet, span.CategoryTreeToggle { position: relative; padding-right:19px; color:transparent; } span.CategoryTreeToggle { color: transparent; position: relative; line-height:30px; } span.CategoryTreeEmptyBullet:before, span.CategoryTreeToggle:before { position: absolute; left:0; font-family: var(--qud-font-terminal1); font-weight: bold; font-size: 18px; color: var(--qud-color-y-dark); z-index: 1; } span.CategoryTreeToggle[title="collapse"]:before { content:'[-]'; } span.CategoryTreeToggle[title="expand"]:before { content:'[+]'; } span.CategoryTreeEmptyBullet:before { color: var(--qud-color-k); content:'\00a0>'; line-height:22px; }   position: relative; padding-left: 36px; margin-left: -19px; }   position: relative; padding-right:19px; color:transparent; }   position: absolute; left:0; font-family: var(--qud-font-terminal1); font-weight: bold; font-size: 18px; z-index: 1; color: var(--qud-color-k); content:'\00a0>'; line-height:22px; }   font-family: 'Open Sans'; } /* *  QUD INFOBOX - PNG/GIF ANIMATOR * ============================== */ .qud-animated-image-wrap { position: relative; } .qud-animated-image-wrap .qud-toggle-for-gif { position: absolute; top: 0px; right: 0px; font-size: 11px; z-index: 10; font-family: "Open Sans"; } .qud-toggle-for-gif { display: flex; justify-content: center; } .qud-initial-animate-btn { transition: all 0.5s ease-out; display: inline-block; text-align: center; background-color: var(--qud-bg-color-darker); border: var(--infobox-border); padding: 0px 4px 2px 4px; border-radius: 3px; opacity: 0.8; } .qud-initial-animate-btn:hover { cursor: pointer; background-color: var(--qud-color-k); color: #fff; } .qud-animate-ctrl-down::before { display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; font-family: "FontAwesome", "Font Awesome 5 Free"; font-weight: 900; content: "\f0d7"; margin-left: 5px; } .qud-infobox-animated-image { height: 386px; /* extra room to hold gif-play-controls */ } .gif-play-controls { font-weight: 700; padding-bottom: 10px; position: absolute; bottom: 0; left: 0; right: 0; color: var(--qud-color-y); } .gif-play-controls .play-pause-btn { font-size: 2em; } .gif-play-controls .play-pause-lbl { line-height: 2em; font-size: 16px; } .gif-play-controls .play-pause-warning { font-size: 14px; font-weight: normal; font-family: "Open Sans"; padding: 0 10px; color: #1c6362; /* slightly brighter than qud-color-k */ height: 3.6em; line-height: 1.2em; } .gif-play-controls .play-pause-btn::before { display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; font-family: "FontAwesome", "Font Awesome 5 Free"; font-weight: 900; content: "\f144"; /* play icon */ font-size: 26px; } .qud-html-summary.qud-html-summary-open .gif-play-controls .play-pause-btn::before { content: "\f04c"; background-color: white; color: black; border-radius: 12px; height: 20px; width: 22px; padding: 4px 0 0 2px; margin-bottom: 9px; font-size: 11px; }
 * 1) mw-pages .mw-category li {
 * 1) mw-pages .mw-category li::marker {
 * 1) mw-pages .mw-category li:before {
 * 1) mw-subcategories li a,
 * 2) mw-pages .mw-category li a {

.qud-infobox-animated-image-initial, .qud-infobox-carousel-static-image, .qud-infobox-animated-image { display: inline-block; position: relative; width: 100%; } .qud-infobox-animated-image-initial img, .qud-infobox-carousel-static-image img, .qud-infobox-animated-image img { width: 160px; } .qud-infobox-animated-image .qud-html-summary { /* the summary element acts as a clickable area over the entire object */ cursor: pointer; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 2; background: transparent; } /* for blink/webkit */ .qud-infobox-animated-image details .qud-html-summary::-webkit-details-marker { display: none; } /* for firefox */ .qud-infobox-animated-image details > .qud-html-summary:first-of-type { list-style: none; } .qud-infobox-animated-image .qud-html-summary + * { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; } .qud-infobox-animated-image .qud-html-summary + * a { color: #fff; /* unsure if this style is used */ } .qud-infobox-animated-image .qud-html-summary:focus { outline: transparent; /* suppress outline when clicked */ } .qud-infobox-animated-image .qud-html-details .animated-image { text-align: center; } .qud-infobox-animated-image .qud-html-details .animated-image img { display: inline-block; overflow: visible; } .qud-html-summary + * { z-index: -1; display: none; } .qud-html-summary-open + * { z-index: 1; display: unset; } /* CAROUSEL STYLES */ .qud-carousel-title { height: 0px; /* javascript expands this to 25px */ font-size: 16px; line-height: 25px; color: var(--qud-color-k); overflow: hidden; } .qud-sprite-carousel { position: relative; } .qud-sprite-carousel > .qud-carousel-item { display: block; } .qud-sprite-carousel > .qud-carousel-item ~ .qud-carousel-item { display: none; /* applied to all but the first .qud-carousel-item */ } .qud-carousel-left, .qud-carousel-right { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; z-index: 5; font-size: 38px; width: 18%; height: 240px; } .qud-carousel-left { left: 0; } .qud-carousel-right { right: 0; } .qud-carousel-btn { display: flex; align-items: center; justify-content: center; height: 60%; width: 100%; cursor: pointer; color: var(--qud-color-k-dark); color: rgba(108, 180, 122, 0.2); transition: color 0.3s ease-out; } .qud-carousel-btn:hover { color: var(--qud-color-k); color: rgba(108, 180, 122, 0.5); } /* * QUD INLINE GIF PLAYER * ===================== */ .qud-inline-gif { position: relative; display: inline-block; cursor: pointer; } .qud-inline-gif-mask { z-index: 1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; background: var(--qud-bg-color-semidark); } .qud-inline-gif-mask > span { color: var(--qud-color-k-dark); font-weight: bold; font-family: var(--qud-font-terminal1); font-size: 18px; background: var(--qud-color-y); height: 44px; width: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; } .qud-inline-gif .qud-invisible { display: none; } .qud-inline-gif-wrap { display: inline-block; padding: 4px 4px 2px 4px; border: var(--infobox-border); } .qud-inline-gif-label { margin-top: 2px; text-align: right; font-size: 80%; opacity: 0.5; } /* * QUD SUBTYPE INFOCARD * ==================== *  Styles to supplement Template:Subtype infocard for smaller screens. * Note that these use !important more than I'd usually like, because they * need to override inline styles applied by the template. */ @media screen and (max-width: 1599px) { .subtype-infobox { width: unset !important; max-width: 780px !important; }   .subtype-items { flex: 0 0 100% !important; flex-wrap: wrap !important; } } @media screen and (max-width: 900px) { .subtype-title { flex-wrap: wrap; justify-content: center; padding: 0.2em 0 !important; }  .subtype-title > div:first-child { flex: 0 0 100%; }  .subtype-title > div:nth-child(2) { color: var(--qud-color-k) !important; }  .subtype-title div { flex-grow: 1; text-align: center; padding: 0 !important; }  .subtype-image, .subtype-bonus-box { flex: 0 0 50%; justify-content: center; margin-right: 0 !important; }  .subtype-skill-box { margin: auto; flex: 0 0 90%; padding: 0 !important; }  .subtype-items-list ul { display: flex !important; flex-wrap: wrap; }  .subtype-items-list ul li { flex: 0 0 100% !important; }  .subtype-equip-list, .subtype-items-list { width: 100%; padding: 1em !important; text-align: center; }  .subtype-equip-list ul, .subtype-items-list ul { list-style-type: none; margin: 0 !important; }  .subtype-equip-list div, .subtype-items-list div { padding: 0 !important; }  .subtype-footnote { justify-content: center !important; } } @media screen and (max-width: 550px) { .subtype-image, .subtype-bonus-box { flex: 0 0 100%; max-width: unset !important; margin: 0; }  .subtype-bonus-box { text-align: center; height: unset !important; padding: 1em 0 !important; }  .subtype-bonus-box div { position: static !important; } } /* * QUD WILLPOWER/COOLDOWN TABLES * ============================= */ .willpower-cooldown-table { border-collapse: collapse; } .willpower-cooldown-table td, .willpower-cooldown-table th { padding: 0.3em 0.5em; text-align: center; background-color: var(--qud-bg-color-darker); border-bottom: none; border-top: none; color: var(--wikitable-color); } .willpower-cooldown-table th { border-bottom: 2px solid var(--qud-color-y-dark); } .willpower-cooldown-table .cd-wi-cell { border-bottom: var(--wikitable-border); } .willpower-cooldown-table .cd-wi-cell, .willpower-cooldown-table .cd-wi-header { background: var(--wikitable-background); } .willpower-cooldown-table tr:last-child .cd-wi-cell { border-bottom: none; } .willpower-cooldown-table .cd-cd-cell { font-weight: bold; background-color: var(--wikitable-header-background); color: var(--wikitable-header-color); border-right: 2px solid var(--qud-color-y-dark); border-left: var(--wikitable-border); } .willpower-cooldown-table .cd-cd-cell:last-child { border-right: none; } .willpower-cooldown-table .cd-cd-header { border-right: 2px solid var(--qud-color-y-dark); border-left: var(--wikitable-border); background: var(--wikitable-header-background); } .willpower-cooldown-table .cd-cd-header:last-child { border-right: none; } .cd-wi-32-cell { position: relative; } .cd-wi-32-cell:after { position: absolute; content:'+'; font-size: 0.7em; top:45%; bottom:55%; display:flex; right:2px; line-height: 0; } /* * QUD COLORS AND FONTS * ==================== */
 * root {

--qud-color-y:     #ffffff; --qud-color-y-dark: #b1c9c3; --qud-color-r:     #d74200; --qud-color-r-dark: #a64a2e; --qud-color-o:     #e99f10; --qud-color-o-dark: #f15f22; --qud-color-w:     #cfc041; --qud-color-w-dark: #98875f; --qud-color-g:     #00c420; --qud-color-g-dark: #009403; --qud-color-b:     #0096ff; --qud-color-b-dark: #0048bd; --qud-color-c:     #77bfcf; --qud-color-c-dark: #40a4b9; --qud-color-m:     #da5bd6; --qud-color-m-dark: #b154cf; --qud-color-k:     #155352; --qud-color-k-dark: #0f3b3a;

--qud-font-terminal1: 'Source Code Pro','Consolas','Courier New','Courier','Lucida Console'; --qud-font-terminal2: 'Source Code Pro','Consolas','Lucida Console','Courier New','Courier'; --qud-font-icon1: 'Source Code Pro','Calibri','Courier New','Courier','Arial'; --qud-font-icon2: 'Source Code Pro','Calibri','Consolas','Lucida Console'; --qud-font-infobox-title: 'Source Code Pro','Open Sans','Segoe UI','Consolas','Lucida Console','Courier New','Courier'; --qud-font-infobox-content: 'Open Sans','Segoe UI','Consolas','Lucida Console','Courier New','Courier','Source Code Pro'; --qud-font-collapser-arrows: 'Source Code Pro, Lucida Console, Consolas';

--qud-bg-color-ultralight: rgba(6,28,23,0.2); --qud-bg-color-semidark: rgba(6,28,23,0.7); --qud-bg-color-dark: rgba(6,28,23,0.8); --qud-bg-color-darker: rgba(6,28,23,0.9); } /* * QUD STYLES - GENERAL TWEAKS * =========================== */ b { font-weight: 700; /* fix for firefox additive bolding when there are multiple nested  tags */ } /* * QUD INFOBOX VERSION INFO * ======================== */ .qud-infobox-version { border-top: var(--infobox-border); padding-top: 7px; margin-top: 5px; text-align: center; font-weight: normal; font-size: 12px; font-family: var(--qud-font-infobox-content); color: var(--qud-color-y-dark); opacity: 0.8; } .qud-infobox-version > .qud-version-num { font-weight: bold; } /* *  QUD STYLES - TOOLTIPS * ===================== */ .qud-tooltip { position: relative; z-index: 11; } .qud-tooltip .qud-tooltip-text { visibility: hidden; width: 120px; background-color: var(--qud-bg-color-darker); color: var(--qud-color-y); text-align: center; padding: 5px 0; border-radius: 6px; font-size: calc(0.23em + 7px); position: absolute; z-index: 2; width: 120px; bottom: 100%; left: 50%; margin-left: -60px; /* half of the width */ border: 1px solid rgba(177,201,195,0.1); } .qud-quote-box .qud-tooltip-text { /* additional adjustment for qud quote boxes */ font-family: 'Open Sans'; font-weight: normal; font-size: calc(0.23em + 9px); } .qud-tooltip .qud-tooltip-text.qud-tooltip-wide { width: 160px; margin-left: -80px; } .qud-tooltip > sup + .qud-tooltip-text { font-weight: normal; } .qud-tooltip:hover .qud-tooltip-text { visibility: visible; } .qud-tooltip:hover .qud-tooltip-text.delayed-tooltip { transition-delay: 0.35s; /* delayed-tooltip class to delay the appearance */ } .qud-tooltip-ulabel { /* apply ulabel class for dotted underline on tooltip word */ text-decoration: underline dotted rgba(177,201,195,0.7); } .qud-quote-box .qud-tooltip-ulabel { /* additional adjustment for qud quote boxes */ text-underline-position: under; } /* extend-line style uses dynamic width extending rightward from tooltip text (instead of fixed width centered tooltip) */ .qud-tooltip > span.qud-tooltip-text.extend-line { width:auto; white-space: nowrap; padding: 0.8em 1em; margin-left: -0.5em; left:0; right:auto; top:auto; bottom:100%; margin-left:unset; } /* style superscripts - intended to contain a question mark for tooltip hover (other symbols might work but are untested) */ .qud-tooltip > sup { display: inline-block; width:9px; height:9px; line-height:9px; border-radius:20px; margin-left: 3px; margin-right: 3px; border:1px solid #cccccc; text-align:center; padding:1px; font-family:'Source Code Pro','Lucida Console',Monaco,'Courier New',Courier; font-size:10px; font-weight:100; } .qud-tooltip sup, .qud-tooltip .qud-tooltip-ulabel { transition: all 0.15s; } .qud-tooltip:hover sup { transform: scale(1.15, 1.15); color: var(--qud-color-c); border-color: var(--qud-color-c); font-weight: bold; cursor: help; } .qud-tooltip:hover .qud-tooltip-ulabel { text-decoration-color: var(--qud-color-c); } .qud-tooltip-text code { /* override code style in tooltips */ border: 1px solid var(--qud-color-k-dark); padding: 0px 3px 1px 3px; font-size: 100%; } /* * QUD CHARACTER - INFOBOX ADJUSTMENTS * =================================== */ .moduleinfobox { font-family: var(--qud-font-infobox-content); overflow: hidden; /* prevents horizontal scrollbar from appearing */ } .moduleinfobox :focus { outline: 0px solid #000; /* remove focus outline on selected collapsible */ } .moduleinfobox > .infobox-title { background: rgba(0,0,0,0.5); color: var(--qud-color-y); font-family: var(--qud-font-infobox-title); font-size: 1.5em; line-height: 1.35em; padding: 0.1em 8px 0.3em 8px; } .moduleinfobox > .infobox-title, .moduleinfobox > .infobox-imagearea { text-align: center; } .moduleinfobox > .infobox-imagearea > .qud-displaychar-standin-for-image { height: 180px; font-size: 140px; line-height: 140px; overflow: hidden; } .moduleinfobox > .infobox-rows > tbody > tr > th { white-space: normal; /* allow infobox titles to wrap */ font-weight: 700; color: var(--qud-color-y-dark); } .moduleinfobox > .infobox-rows > tbody > tr > th, .moduleinfobox > .infobox-rows > tbody > tr > th + td { background: var(--qud-bg-color-ultralight); } .moduleinfobox > .infobox-rows > tbody > tr > th + td { font-size: 1.12em; word-break: break-word; word-wrap: break-word; overflow-wrap: break-word; } .moduleinfobox > .infobox-rows > tbody > tr > th > div { max-width: 130px; /* limit width of infobox titles */ text-align: left; } /* hover effect for infobox rows */ .moduleinfobox > .infobox-rows > tbody > tr:hover > th, .moduleinfobox > .infobox-rows > tbody > tr:hover > th + td { background-color: var(--qud-bg-color-darker); color: var(--qud-color-y); } .moduleinfobox > .infobox-rows > tbody > tr > th, .moduleinfobox > .infobox-rows > tbody > tr > th + td { transition: background-color 0.5s, color 0.5s; } .moduleinfobox > .infobox-rows { border-spacing: 0 1px !important; } /* Desktop/fullscreen only styles */ .qud-item-infobox.moduleinfobox .mobileonly, .qud-food-infobox.moduleinfobox .mobileonly, .qud-effect-infobox.moduleinfobox .mobileonly, .qud-location-infobox.moduleinfobox .mobileonly, .qud-mutation-infobox.moduleinfobox .mobileonly, .qud-character-infobox.moduleinfobox .mobileonly { display: none !important; } @media (min-width: 512px) /* Only for use with desktop/fullscreen */ { .qud-item-infobox.moduleinfobox, .qud-food-infobox.moduleinfobox, .qud-effect-infobox.moduleinfobox, .qud-location-infobox.moduleinfobox, .qud-mutation-infobox.moduleinfobox, .qud-character-infobox.moduleinfobox { margin-top: 1em; /* aligns the character infobox with the Qud Look description */ } } /* prevent long infobox favilinks from over-expanding the width of the entire infobox container: */ .moduleinfobox > .infobox-rows > tbody > tr > th + td > p span.qud-image-link { max-width: 150px; overflow: hidden; text-overflow: ellipsis; } /* *  QUD CHARACTER - COLLAPSIBLES * ============================ */ .moduleinfobox > .infobox-rows > tbody > tr > th.qud-collapser, .moduleinfobox > .infobox-rows > tbody > tr > td.qud-collapser { position: relative; font-weight: bold; font-family: 'Open Sans'; height: 2.6em; background: rgba(0,0,0,0.3); transition: background-color 0.2s, color 0.5s; } .moduleinfobox > .infobox-rows > tbody > tr:hover > th.qud-collapser, .moduleinfobox > .infobox-rows > tbody > tr:hover > td.qud-collapser { background: rgba(0,0,0,0.5); } .qud-collapser-content { padding: 0 4px; background: var(--code-background); } .qud-collapser-content div, .qud-collapser-content span { font-family: var(--qud-font-infobox-content); } .qud-collapser > .qud-collapser-arrow { display: block !important; /* override display:none applied by mw-collapsible */ } .qud-collapser > .qud-collapser-arrow:after { font-size: 0.95em; font-weight: normal; position: absolute; top: .8em; letter-spacing: 0.02em; content:'[hide]'; color: var(--qud-color-c-dark); opacity: 0.5; transition: color 0.4s, transform 0.1s; transform: perspective(1px); /* fixes some hover bluriness in Chrome */ } .qud-collapser > .qud-collapser-arrow.mw-collapsed:after, .qud-collapser > .qud-collapser-arrow.collapsed:after { content:'[show]'; } tr:hover > .qud-collapser > .qud-collapser-arrow:after { text-decoration: underline; color: var(--qud-color-c); opacity: 1; } .qud-collapser > .qud-collapser-title { margin-left: 0; color: var(--qud-color-y-dark); transition: color 0.5s; } tr:hover > .qud-collapser > .qud-collapser-title { color: var(--qud-color-y); } /* *  QUD CHARACTER - CORE STATS * ========================== */ .qud-core-stats:hover, .qud-basic-attributes:hover, .qud-attribute-entry:hover, .qud-attributes-row:hover, .qud-attributes-wrapper:hover, .qud-resistances:hover { cursor: default; } .qud-core-stats-wrapper { display: flex; padding: 0 1.2em 18px 1.2em; height: 1.7em; } .qud-core-stats-entry { flex: 1 0 33%; text-align: center; white-space: nowrap; font-size: 1.7em; font-weight: bold; font-family: var(--qud-font-terminal1); margin-top: 0px; transition: font-size 0.1s, margin-top 0.1s; } .qud-core-stats-entry:hover { font-size: calc(1.7em + 4px); margin-top: -2px; } .qud-stat-icon{ display: inline-block; padding-right: 0.2em; line-height: 1.2em; font-size: 1.3em; } .qud-stat-icon img { height: .7em; width: .57em; } .qud-stat-value { display: inline-block; color: var(--qud-color-y); } /* *  QUD CHARACTER - LEVEL * ===================== */ .qud-character-level-wrapper { color: var(--qud-color-y-dark); padding: 0em 2em 10px 2em; font-family: var(--qud-font-terminal1); font-size: 1.3em; font-weight: bold; text-align: center; } .qud-character-level-text, .qud-character-level-value { display: inline-block; padding-right: 0.45em; } .qud-character-level-value { color: var(--qud-color-c); } /* *  QUD CHARACTER - ATTRIBUTES * ========================== */ .qud-attributes-wrapper, .qud-attributes-header-row { color: var(--qud-color-y-dark); padding: 0 1em 4px 1em; } .qud-attributes-row, .qud-attributes-header-row { display: flex; line-height: 1.6em; white-space: nowrap; } .qud-attributes-header-button { flex: 1 0 50%; opacity: 0.5; color: var(--qud-color-c-dark); font-size: 1em; font-weight: bold; font-family: var(--qud-font-terminal1); text-align: center; font-style: italic; text-decoration: underline; transition: color 0.1s, opacity 0.1s; } .qud-attributes-header-button:hover { opacity: 1; color: var(--qud-color-c); } .qud-attributes-title { padding: 0 0 0.2em 0; color: var(--qud-color-y-dark); font-size: 1em; font-weight:bold; font-family: var(--qud-font-terminal1); } .qud-attribute-entry { font-size: 1.3em; font-weight: bold; font-family: var(--qud-font-terminal1); transition: transform 0.1s; transform: perspective(1px); /* fixes bluriness in Chrome immediately after hover, during transition-delay */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } .qud-attribute-entry { flex: 1 0 35%; } .qud-attribute-entry:nth-child(3) { flex: 1 0 30%; } .qud-attribute-entry.qud-tooltip:hover { transform: scale(1.08,1.08); transition-delay: 0.35s; } .qud-attribute-entry.qud-tooltip:hover .qud-tooltip-text { transition-delay: 0.35s; } .qud-attribute-label { display: inline-block; padding-right: 0.45em; } .qud-attribute-value { display: inline-block; } .qud-roll-range, .qud-roll-average { font-style: italic; display: block; color: var(--qud-color-y-dark) } .qud-roll-raw { display: none; } div.qud-attribute-st + div.qud-attribute-value, div.qud-attribute-ag + div.qud-attribute-value, div.qud-attribute-to + div.qud-attribute-value, div.qud-attribute-wi + div.qud-attribute-value, div.qud-attribute-in + div.qud-attribute-value, div.qud-attribute-eg + div.qud-attribute-value { color: var(--qud-color-c) } .qud-attribute-st { color: var(--qud-color-y); } .qud-attribute-ag { color: var(--qud-color-w); } .qud-attribute-qn { color: var(--qud-color-y-dark); } .qud-attribute-to { color: var(--qud-color-r); } .qud-attribute-wi { color: var(--qud-color-g); } .qud-attribute-ms { color: var(--qud-color-y-dark); } .qud-attribute-in { color: var(--qud-color-b); } .qud-attribute-eg { color: var(--qud-color-m); } .qud-attribute-ma { color: var(--qud-color-y-dark); } .qud-character-xp { text-align: center; position: relative; height:1.8em; margin-top: 0.4em; } .qud-xp-wrapper { color: var(--qud-color-y-dark); padding: 0 1em 0 1em; font-family: var(--qud-font-terminal1); font-size: 1.3em; font-weight: bold; text-align: center; display: inline-block; font-size: 1.3em; transition: all 0.1s; transform: perspective(1px); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .qud-xp-wrapper:hover { transform: scale(1.08,1.08); transition-delay: 0.35s; } .qud-xp-label, .qud-xp-value { display: inline-block; padding-right: 0.45em; } .qud-xp-value { color: var(--qud-color-c); } .qud-stat-details-entry .qud-xp-table-header { color: var(--qud-color-k); width: 72% } .qud-stat-details-wrapper.xp-stat-details { margin: 0.9em 10% 0.5em 10%; width: 80%; } .qud-stat-details-wrapper.xp-stat-details .qud-stat-details-entry > div { border-left:0; } /* *  QUD CHARACTER - DETAILED ATTRIBUTES * =================================== */ .qud-attributes #mw-customcollapsible-qud-detailed-attributes, .qud-attributes #collapsible-qud-detailed-attributes { width: 260px; } @media (max-width: 511px) { .qud-attributes #mw-customcollapsible-qud-detailed-attributes, .qud-attributes #collapsible-qud-detailed-attributes { width: auto; } } .qud-stat-table-header:first-child { width: 34%; } .qud-stat-table-header:nth-child(2) { width: 17%; } .qud-stat-table-header:nth-child(3) { width: 14%; } .qud-stat-details-wrapper { color: var(--qud-color-y-dark); margin: 0.5em 0; display: table; border-collapse: collapse; width: 100%; table-layout: fixed; } .qud-stat-details-entry { display: table-row; font-size: 0.9em; font-weight: bold; font-family: var(--qud-font-terminal1); } .qud-stat-details-entry > div { display: table-cell; text-align: center; padding: 0 0.2em; color: var(--qud-color-y-dark); border-left: var(--infobox-border); } .qud-stat-details-entry > div:first-child { border-left: none; text-align: left; padding: 0 0.2em 0 0; overflow: hidden; text-overflow: ellipsis; word-wrap: normal; } .qud-stat-details-entry > div:nth-child(4) { padding: 0 0 0 0.2em; word-wrap: break-word; } .qud-stat-details-entry > div.qud-stat-table-header { color: var(--qud-color-k); } .qud-stat-name { color: var(--qud-color-y); } /* *  QUD CHARACTER - RESISTANCES * =========================== */ .qud-resistances-wrapper { color: var(--qud-color-y-dark); padding: 0 1.3em 1.8em 1.6em; display: flex; flex-wrap: wrap; border-bottom: var(--infobox-border); margin-bottom: 12px; } .qud-resistance-row { flex: 1 0 50%; font-size: 1em; font-weight: bold; font-family: var(--qud-font-terminal1); } .qud-resistance-prefix, .qud-resistance-text, .qud-resistance-value { display: inline-block; padding-right: 0.45em; } .qud-resistance-value.positive-value { color: var(--qud-color-g); } .qud-resistance-value.negative-value { color: var(--qud-color-r); } /* *  QUD CHARACTER - INVENTORY * ========================= */ .qud-inv-content-itemlist { font-size: 1em; font-family: var(--qud-font-infobox-content); padding: 2px 3px 2px 5px; margin-left: -7px; margin-right: -7px; display: table; table-layout: fixed; width: auto; } .qud-inv-content-itemlist > .qud-inv-group { display: table; font-weight: bold; border-collapse: collapse; table-layout: fixed; width: 100%; } .qud-equipped { border-bottom: var(--infobox-border); padding-bottom: 6px; } .qud-carried { border-top: none; padding-bottom: 6px; } .qud-equipped-title { color: var(--infobox-details-background); } .qud-inv-content-itemlist > .qud-inv-group > .qud-inventory-item { display: table-row; white-space: nowrap; } .qud-inv-content-itemlist > .qud-inv-group > .qud-inventory-item:hover, .qud-inv-content-itemlist > .qud-inv-group > .qud-inventory-item:focus { background: var(--qud-bg-color-darker); } .qud-inv-content-itemlist > .qud-inv-group > .qud-inventory-item > .qud-inv-favilink-wrapper, .qud-inv-content-itemlist > .qud-inv-group > .qud-inventory-item > .qud-item-qty { display: table-cell; padding-bottom: 0; vertical-align: middle; } .qud-inv-content-itemlist > .qud-inv-group > .qud-inventory-item > .qud-inv-favilink-wrapper { width: 85%; padding-left: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media all and (min-width: 512px) { .qud-inv-content-itemlist { width: 268px; } .qud-inv-content-itemlist > .qud-inv-group > .qud-inventory-item > .qud-inv-favilink-wrapper { width: 79%; } }

/* INVENTORY: FAVILINK OVERRIDES */ .qud-inv-content-itemlist > .qud-inv-group > .qud-inventory-item > .qud-inv-favilink-wrapper > .qud-image:hover, .qud-inv-content-itemlist > .qud-inv-group > .qud-inventory-item > .qud-inv-favilink-wrapper > .qud-image:focus { background: transparent; } .qud-inv-content-itemlist > .qud-inv-group > .qud-inventory-item > .qud-inv-favilink-wrapper > .qud-image { display: inline; } .qud-inv-content-itemlist > .qud-inv-group > .qud-inventory-item > .qud-inv-favilink-wrapper > .qud-image > .qud-image-link { height: 24px; } .qud-inv-content-itemlist > .qud-inv-group > .qud-inventory-item > .qud-inv-favilink-wrapper > .qud-image > .qud-image-link, .qud-inv-content-itemlist > .qud-inv-group > .qud-inventory-item > .qud-inv-favilink-wrapper > .qud-image > .qud-image-link > a { display: inline; padding-top: 0.4em; } .qud-inv-content-itemlist > .qud-inv-group > .qud-inventory-item > .qud-inv-favilink-wrapper > .qud-image > .qud-image-link > a { padding-bottom: 0.2em; margin-bottom: -0.3em; }

/* INVENTORY: INLINE WEAPON STATS */ .qud-inv-content-itemlist > .qud-inv-group > .qud-inventory-item > .qud-inv-favilink-wrapper > .qud-inline-weap-stats { font-weight: normal; margin-left: 0.5em; font-size: 0.9em; color: var(--qud-color-y-dark); opacity: 0.5; transition: opacity 0.4s; } .qud-inv-content-itemlist > .qud-inv-group > .qud-inventory-item > .qud-inv-favilink-wrapper > .qud-inline-weap-stats > .qud-stat-icon { padding-right: 1px; font-size: 1.1em; } .qud-inv-content-itemlist > .qud-inv-group > .qud-inventory-item > .qud-inv-favilink-wrapper > .qud-inline-weap-stats > .qud-inline-pv > span { font-weight: bold; } .qud-inv-content-itemlist > .qud-inv-group > .qud-inventory-item:hover > .qud-inv-favilink-wrapper > .qud-inline-weap-stats > .qud-inline-pv > span, .qud-inv-content-itemlist > .qud-inv-group > .qud-inventory-item:focus > .qud-inv-favilink-wrapper > .qud-inline-weap-stats > .qud-inline-pv > span { color: #297872 !important; transition: color 0.4s; } .qud-inv-content-itemlist > .qud-inv-group > .qud-inventory-item:hover > .qud-inv-favilink-wrapper > .qud-inline-weap-stats, .qud-inv-content-itemlist > .qud-inv-group > .qud-inventory-item:focus > .qud-inv-favilink-wrapper > .qud-inline-weap-stats { opacity: 1; } .qud-inv-content-itemlist > .qud-inv-group > .qud-inventory-item:hover > .qud-inv-favilink-wrapper > .qud-inline-weap-stats .qud-inline-pv > span, .qud-inv-content-itemlist > .qud-inv-group > .qud-inventory-item:focus > .qud-inv-favilink-wrapper > .qud-inline-weap-stats .qud-inline-pv > span { color: #155352 !important; }

/* INVENTORY: ITEM QUANTITY & CHANCE */ .qud-inv-content-itemlist > .qud-inv-group > .qud-inventory-item > .qud-item-qty { padding-left: 6px; padding-right: 3px; font-weight: bold; font-size: 0.9em; text-align: right; direction: rtl; color: var(--qud-color-y-dark); opacity: 0.5; transition: opacity 0.4s; } .qud-inv-content-itemlist > .qud-inv-group > .qud-inventory-item > .qud-item-qty > .qud-item-chance { color: var(--infobox-details-background); font-weight: normal; display: inline-block; font-size: 0.95em; padding: 0 3px; color: var(--qud-color-y-dark); } .qud-inv-content-itemlist > .qud-inv-group > .qud-inventory-item > .qud-item-qty > .qud-item-chance.chance-100 { display: none; } .qud-inv-content-itemlist > .qud-inv-group > .qud-inventory-item:hover > .qud-item-qty, .qud-inv-content-itemlist > .qud-inv-group > .qud-inventory-item:focus > .qud-item-qty { opacity: 1; } /* *  QUD CHARACTER - SKILLS and MUTATIONS * ==================================== */ .qud-skills-wrapper, .qud-mutations-wrapper { display: flex; flex-direction: row; flex-wrap: wrap; font-size: 1.1em; font-weight: bold; font-family: var(--qud-font-infobox-content); max-width: 260px; padding: 0.4em 0; } @media (max-width: 511px) { .qud-skills-wrapper, .qud-mutations-wrapper { max-width: none; } } .qud-skill-entry, .qud-mutation-entry { flex: 1 0 100%; transition: .8s opacity; line-height: 1.2em; padding: 0.1em 0 0.4em 0.5em; overflow: hidden; box-sizing: border-box; text-overflow: clip; justify-content: center; align-items: center; border-radius: 2px; transition: background 0.15s; } .qud-skill-entry:hover, .qud-mutation-entry:hover { background: var(--qud-bg-color-dark); } .qud-skill-entry a, .qud-mutation-entry a { display: block; /* make entire row clickable */ } .qud-mutation-entry { display: flex; justify-content: left; } .qud-mutation-entry a { width: 100%; } .qud-mutation-entry:hover a b { display: inline-block; text-decoration: none; }

/* plainlist */ .plainlist ul { line-height: inherit; list-style: none none; margin: 0; } .plainlist ul li { margin-bottom: 0; } /* *  QUD ITEM - CORE STATS * ===================== */ .qud-item-stats-entry > .qud-tooltip-text { transition: all 0.1s; color: var(--qud-color-y-dark); } .qud-item-stats-entry:hover > .qud-tooltip-text { transform: scale(0.8695652, 0.8695652) translateY(3px); } .qud-item-stats { display: flex; flex-wrap: wrap; align-items: center; color: var(--qud-color-y); padding-bottom: 8px; border-bottom: var(--infobox-border); margin-bottom: 12px; } .qud-item-stats > .qud-item-stats-entry-wrap { flex: 1 0 50%; text-align: center; font-size: 1.7em; font-family: var(--qud-font-terminal1); white-space: nowrap; font-weight: bold; margin: 0.1em 0; } .qud-item-stats-entry { display: inline-block; transition: all 0.1s; } .qud-item-stats-entry:hover { transform: scale(1.15, 1.15); } .qud-item-stats-entry > div { display: inline-block; padding: 0 0.1em; } .qud-item-stat-value .symbol-vibro { font-size: 1.35em; line-height: 1em; font-weight: normal; } .qud-item-stat-symbol.symbol-lb { margin-right: -0.3em; /* visual tweak to make this look more "centered" */ padding-left: 0.3em; opacity: 0.9; } .qud-item-stat-symbol.symbol-dram { color: var(--qud-color-b); padding-right: 0; } .qud-item-stat-symbol.symbol-dram-trade { color: var(--qud-color-w); padding-right: 0; } .symbol-dram + .qud-item-stat-value, .symbol-dram-trade + .qud-item-stat-value { color: var(--qud-color-c); padding-left: 0; } .qud-item-stat-symbol > .qud-stat-icon { padding-right: 0px; /* normalize padding to match non-"qud-stat-icon" symbols */ } .qud-max-pv { color: var(--qud-color-k); }

/* *  QUD WORLD MAP NUMBER OVERLAY * ============================ */ .world-map-tier-overlay, .world-map-tier-overlay:after, .world-map-tier-overlay .numeric-tier-rows, .world-map-tier-overlay img { width: 72vw; height: 33.75vw; /* width / 2.133333333 */ }

.world-map-tier-overlay { position: relative; } .world-map-tier-overlay .numeric-tier-rows, .world-map-tier-overlay a, .world-map-tier-overlay:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .world-map-tier-overlay:after { background: rgba(255, 255, 255, 0.14); z-index: 1; content: ''; } .world-map-tier-overlay .numeric-tier-rows { display: grid; grid-auto-rows: 1fr; left: 0.178vw; top: 0.178vw; line-height: 1; letter-spacing: 0.178vw; font-family: 'Source Code Pro'; font-weight: 700; font-size: 1.2vw; color: rgba(0, 0, 0, 0.9); z-index: 2; } @media only screen and (max-width: 720px) { .world-map-tier-overlay { margin: auto; }   .world-map-tier-overlay, .world-map-tier-overlay:after, .world-map-tier-overlay .numeric-tier-rows, .world-map-tier-overlay img { width: 90vw; height: 42.1875vw; /* width / 2.133333333 */ }   .world-map-tier-overlay .numeric-tier-rows { letter-spacing: 0.406vw; top: 0.3vw; } } /* CSS placed here will be applied to all skins */ /* This governs the sections on the Community portal */ .cpbox { display: flex; flex-direction: row-reverse; flex-wrap: wrap; }

.cpbox #admins { box-sizing: border-box; width: calc(33% - 10px); margin: 5px; flex-grow: 1; min-width: 300px; }

.cpbox #help { box-sizing: border-box; width: calc(67% - 10px); margin: 5px; flex-grow: 1; }

/* Template documentation styles */ /* If modifying these styles, be sure to update the mobile skin! */ .doc { margin: 0em auto 1em; background-color: rgba(0, 0, 0, 0.1); border: 2px solid #BDCAC3; border-radius: 1em; padding: 1em; }

.doc-header { padding-bottom: 3px; border-bottom: 1px solid #BDCAC3; margin-bottom: 1ex; }

.doc-footer { margin: 0; background-color: rgba(0, 0, 0, 0.1); border: 2px solid #BDCAC3; border-radius: 1em; padding: 1em; }

/* Classes permitting setting of alignment on desktop only or differently on desktop and mobile */ /* (See .mobileleft, .mobilecenter, .mobileright in MediaWiki:Mobile.css for the mobile equivalents */ .desktopleft {   text-align: left; }

.desktopcenter { text-align: center; }

.desktopright { text-align: right; }

/* Front page structure */ .fpbox { margin: 5px; padding: 5px; overflow: auto; width: calc(100% - 2px); }

.fpbox.plain { background: transparent; border: none; box-shadow: none; }

.fpbox .heading, .fpbox .mainheading, .fpbox .welcome { margin: 0 0 10px; padding: 0 0 5px; overflow: auto; }

.fpbox .mainheading, .fpbox .welcome { font-size: 150%; font-weight: bold; }

.fpbox .heading { text-align: center; font-size: 132%; }

.linkslabel { margin: 15px 5px 5px; padding: 0 0 5px; }

/* Template:FP links styles */ .fplinks { display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: stretch; text-align: center; }

.fplink-outer { padding: 5px; flex-basis: calc(25% - 10px); width: calc(25% - 15px); min-width: 115px; display: inline-block; vertical-align: middle; }

.fplink-wide { flex-basis: calc(33% - 10px); width: calc(33% - 15px); }

.fplink-fullwidth { flex-basis: 100%; width: calc(100% - 15px); font-weight: bold; }

.fplink { padding: 0.5em; box-sizing: border-box; width: 100%; height: 100%; display: table; }

.fplink-plain { background: transparent; border-radius: 0; border: 0; box-shadow: none; }

.fplink-inner { display: table-row; }

.fplink a { display: table-cell; vertical-align: middle; }

.fplink img { max-width: 150px; width: 100%; height: auto; } /* Auto-resize front page video to fit smaller columns */ .fpbox .embedvideowrap { width: 100%!important; max-width: 480px; margin: 0 auto; }

.fpbox .embedvideowrap iframe { width: 100%!important; }

/* Multi-column box support */ .fp-container main .columns .leftcol, .fp-container .columns .rightcol { width: 100%; margin: 0; padding: 0; }

@media (min-width: 990px) { .fp-container .columns .leftcol { float: left; width: 50%; }

.fp-container .columns .rightcol { float: right; width: 50%; } }

.fp-section { display: flex; flex-wrap: wrap; }

/* ***************************************************** */ /* This section affects the main page layout            */ /*                                                      */ /* Both 3 and 2 column layouts are here. Managers should */ /* remove whichever of the two they are not using, as   */ /* well as this comment. */ /* ***************************************************** */

/* This CSS governs the responsive 3 column main page layout */ min-height:calc(325px + 2.3em); }
 * 1) fptweets {

display: grid; grid-template-areas: "a" "b" "c" "d"; grid-template-columns: 100%; } @media screen and (min-width:990px) { #fp-3column.fp-container { grid-template-areas: "a b" "c b" "c d"; grid-template-columns: 50% 50%; } } @media screen and (min-width:1350px) { #fp-3column.fp-container { grid-template-areas: "a b c" "d b c"; grid-template-columns: 33.3% 33.3% 33.3%; } }
 * 1) fp-3column.fp-container {

grid-area: a; }
 * 1) fp-1 {

grid-area: b; }
 * 1) fp-2 {

grid-area: c; }
 * 1) fp-3 {

grid-area: d; }
 * 1) fp-4 {

/* end responsive 3 column main page layout */

/* this CSS governs the responsive 2 column main page layout */ display: grid; grid-template-areas: "a" "b" "c"; grid-template-columns: 100%; } @media screen and (min-width:990px) { #fp-2column.fp-container { grid-template-areas: "a b" "c c"; grid-template-columns: 50% 50%; } } @media screen and (min-width:1350px) { #fp-2column.fp-container { grid-template-areas: "a b" "c b"; grid-template-columns: auto 520px; } }
 * 1) fp-2column.fp-container {

grid-area: a; }
 * 1) fp-top {

grid-area: b; }
 * 1) fp-flex {

grid-area: c; }
 * 1) fp-bottom {

/* end responsive 2 column main page layout */

/* ******************** */ /* End main page layout */ /* ******************** */