MediaWiki:Mobile.css

/* Use MediaWiki:Gadget-mobile.css instead for main skin styles that should be loaded before javascript initializes. Any other custom styles can go here. */

.qud-box-wrapper { overflow: hidden; line-height: normal; } .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: 0.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 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'; /* pause icon */ background-color: white; color: black; border-radius:12px; height: 20px; width: 22px; padding: 4px 0 0 2px; margin-bottom:9px; font-size: 11px; }

.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 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 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.mobile-visible:hover .qud-tooltip-text, .qud-tooltip.mobile-visible:focus .qud-tooltip-text { /* must be explicitly enabled for mobile using mobile-visible class */ visibility: visible; } .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.mobile-visible:hover sup, .qud-tooltip.mobile-visible:focus sup { transform: scale(1.15, 1.15); color: var(--qud-color-c); border-color: var(--qud-color-c); font-weight: bold; } .qud-tooltip.mobile-visible:hover .qud-tooltip-ulabel, .qud-tooltip.mobile-visible:focus .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 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 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 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: var(--qud-bg-color-darker); 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 { display: table; /* prevent minerva mobile style's all-purpose display:block; table override from applying to infobox-rows in particular */ } .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 > tbody > tr > td > p { margin: 0.2em 0; /* override huge margins that normally get added from minerva mobile theme */ } .moduleinfobox > .infobox-rows { border-spacing: 0 1px !important; } /* Mobile only styles */ .qud-item-infobox.moduleinfobox .nomobile, .qud-food-infobox.moduleinfobox .nomobile, .qud-effect-infobox.moduleinfobox .nomobile, .qud-location-infobox.moduleinfobox .nomobile, .qud-mutation-infobox.moduleinfobox .nomobile, .qud-character-infobox.moduleinfobox .nomobile { display: none !important; } /* *  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: var(--qud-bg-color-semidark); 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: var(--qud-bg-color-darker); } .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); } /* Mobile-only collapsible adjustments */ .qud-collapser > .qud-collapser-title { height: 2.5em; line-height: 2.5; } .qud-collapser-arrow:after { top: .8em; right: 1em; } /* *  QUD CHARACTER - CORE STATS * ========================== */ .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; } /* enable tooltips for core stats specifically (most other tooltips are not active on mobile) */ .qud-core-stats-entry.qud-tooltip:hover .qud-tooltip-text, .qud-core-stats-entry.qud-tooltip:focus .qud-tooltip-text { visibility: visible; } .qud-stat-icon{ display: inline-block; padding-right: 0.2em; line-height: 1.2em; font-size: 1.3em; } .qud-stat-icon img { height: .7em !important; width: .57em !important; } .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); -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-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: 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; */ /* <-- disabled for mobile */ padding: 0.4em 0; } .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; } /* *  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); } /* enable tooltips for item stats specifically (most other tooltips are not active on mobile) */ .qud-item-stats-entry.qud-tooltip:hover .qud-tooltip-text, .qud-item-stats-entry.qud-tooltip:focus .qud-tooltip-text { visibility: visible; } .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; } }