MediaWiki:Mobile.css: Difference between revisions

From Caves of Qud Wiki
Jump to navigation Jump to search
(pixelated image rendering)
(inventory pop table formatting)
 
(3 intermediate revisions by the same user not shown)
Line 1,189: Line 1,189:
}
}


/* INVENTORY: POPULATION TABLES */
.qud-inv-poptable-icon {
    font-family: var(--qud-font-terminal1);
    font-weight: bold;
    font-size: 1.25em;
    display: inline-block;
    margin: 0 5px;
    line-height: 1.5em;
}


/* INVENTORY: INLINE WEAPON STATS */
/* INVENTORY: INLINE WEAPON STATS */
Line 1,631: Line 1,640:
tt {
tt {
font-family: monospace;
font-family: monospace;
font-size: 110%;
color: var(--code-color);
color: var(--code-color);
}
}
Line 2,072: Line 2,080:


/* ------- pixel sprite scaling ------- */
/* ------- pixel sprite scaling ------- */
.moduleinfobox img,
.pixel-image,
.moduleinfobox .infobox-imagearea img,
.ambox-image img,
.ambox-image img,
.qud-image .qud-image-link-image-container img {
.qud-image .qud-image-link-image-container img {

Latest revision as of 14:50, 3 July 2022

/* 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 <b> 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 <th> 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 <th> 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: POPULATION TABLES */
.qud-inv-poptable-icon {
    font-family: var(--qud-font-terminal1);
    font-weight: bold;
    font-size: 1.25em;
    display: inline-block;
    margin: 0 5px;
    line-height: 1.5em;
}

/* 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;
    }
}

/* ----------------------------------------------------- */
/* --------------------- IMPORTANT --------------------- */
/* All mobile-only styles in this gadget MUST have their selectors prefixed by or they will override desktop styles on desktop as well due to a bug with gadgets. If the style is okay with being loaded with javascript, use [[MediaWiki:Mobile.css]] instead */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */

@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(https://fonts.gstatic.com/s/sourcecodepro/v9/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevWnsUnxg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
	--body-background-color: #190d07;
	--body-background-image: url(/resources/assets/qud_mobile_bg.jpg);
	--body-background-attachment: fixed;
	--body-background-size: cover;
	--body-background-position: center center;
	--body-background-repeat: no-repeat;
	--body-color: #c1d3d6;
	--body-secondary-color: #ccc;

	--content-background: radial-gradient(rgba(22, 60, 51,0.8),rgba(6, 28, 23,0.8));
	--header-background: rgba(22, 60, 51,1);
	--footer-background: rgba(22, 60, 51,0.8);
	--interface-border: #000;
	--search-background: #212121;

	--link-color: #7fbadd;
	--link-redlink-color: #bb312c;

	--navigation-selected: rgba(108, 180, 122,0.5);
	--navigation-link-background: rgba(108, 180, 122,0.1);

	--last-modified-background: #444;
	--invert-icons: 1;
	
	--fpbox-background: transparent;
	--fpbox-border: 1px solid rgba(108, 180, 122,0.2);

	--fpheading-background: #061c17;
	--fpheading-border: 1px solid #c1d3d6;
	--fpheading-color: #c9c9c9;
	--fpheading-font: "Source Code Pro","Courier new",Courier,monospace;

	--fplink-background: rgba(108, 180, 122,0.2);
	--fplink-border: 0;
	--fplink-fullwidth-background: rgba(0,0,0, 0.3);

	--infobox-border: 1px solid rgba(108, 180, 122,0.2);
	--infobox-details-background: rgba(108, 180, 122,0.3);
	--infobox-details-color: #fff;
	--infobox-header-background: rgba(108, 180, 122,0.5);
	--infobox-header-color: #fff;
	--infobox-label-background: rgba(108, 180, 122,0.2);
	--infobox-label-color: #fff;

	--navbox-alt-background: rgba(108, 180, 122,0.1);
	--navbox-background: rgba(6, 28, 23,0.2);
	--navbox-border: 1px solid rgba(108, 180, 122,0.2);
	--navbox-color: #c1d3d6;
	--navbox-secondary-background: rgba(108, 180, 122,0.2);

	--wikitable-alt-background: rgba(100,100,100, 0.6);
	--wikitable-background: rgba(6, 28, 23,0.2);
	--wikitable-border: 1px solid rgba(108, 180, 122,0.3);
	--wikitable-border-collapse: collapse;
	--wikitable-border-spacing: 0;
	--wikitable-header-background: rgba(108, 180, 122,0.2);
	--wikitable-header-color: #fff;

	--code-background: rgba(6, 28, 23,0.5);
	--code-color: #c1d3d6;

	--doc-background: rgba(6, 28, 23,0.2);
	--doc-border: 1px solid rgba(108, 180, 122,0.2);
	
	--ambox-background: rgba(120,120,120,0.3);
	--ambox-blue: #1e90ff;
	--ambox-gray: #bbbbaa;
	--ambox-green: #228b22;
	--ambox-orange: #f28500;
	--ambox-purple: #9932cc;
	--ambox-red: #b22222;
	--ambox-yellow: #f4c430;
}

/*** mobile-specific style classes ***/
.nomobile {
	display: none;
}

.mobileleft {
	text-align: left;
}

.mobilecenter {
	text-align: center;
}

.mobileright {
	text-align: right;
}

/**********
interface
**********/
/*** text colors ***/
#mw-mf-diffview #mw-mf-userinfo,
#mw-mf-diffview #mw-mf-userinfo .mw-mf-edit-count,
#mw-mf-diffview #mw-mf-userinfo .mw-mf-edit-count div,
#mw-mf-page-center,
.globalNotice,
.header-container.header-chrome,
.last-modified-bar a,
.last-modified-bar a:visited,
.last-modified-bar.active a,
.last-modified-bar.active a:visited,
.list-header,
.minerva-footer,
.mw-echo-ui-notificationItemWidget-content-actions-timestamp,
.mw-echo-ui-notificationItemWidget-content-message-header,
.mw-mf-user,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
.overlay-footer-container,
.overlay-header-container,
.page-list .component,
.page-list .info,
.page-list li > a,
.page-list.side-list .list-thumb,
.page-summary h2,
.page-summary h3,
.search-overlay,
.search-overlay .results,
.search-overlay .search-content,
.search-overlay .search-feedback,
.site-link-list .component,
.site-link-list .info,
.site-link-list li,
.site-link-list li > a,
.site-link-list.side-list .list-thumb,
.topic-title-list .component,
.topic-title-list .info,
.topic-title-list li > .topic-title-list.side-list .list-thumb,
footer .last-modified-bar,
footer .last-modified-bar.active,
nav ul li a,
.skin-minerva.navigation-enabled #mw-mf-page-center,
.skin-minerva.primary-navigation-enabled,
.skin-minerva.secondary-navigation-enabled,
a,
a:not([href]),
body{
	color: var(--body-color);
}

.skin-minerva.action-edit #editpage-copywarn,
.skin-minerva.action-edit #mw-anon-edit-warning,
.skin-minerva.action-edit #section_0,
.skin-minerva.action-edit .diff-ntitle,
.skin-minerva.action-edit .diff-otitle,
.skin-minerva.action-edit .mw-editTools,
.skin-minerva.action-edit .mw-editnotice,
.skin-minerva.action-edit .preview-limit-report-wrapper,
.skin-minerva.action-submit #editpage-copywarn,
.skin-minerva.action-submit #mw-anon-edit-warning,
.skin-minerva.action-submit #section_0,
.skin-minerva.action-submit .diff-ntitle,
.skin-minerva.action-submit .diff-otitle,
.skin-minerva.action-submit .mw-editTools,
.skin-minerva.action-submit .mw-editnotice,
.skin-minerva.action-submit .preview-limit-report-wrapper,
.heading-holder .tagline,
.mw-echo-ui-notificationItemWidget-content-message-body,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
nav ul li a:visited {
	color: var(--body-secondary-color);
}

.mw-ui-anchor.mw-ui-progressive,
.mw-ui-anchor.mw-ui-progressive:active,
.mw-ui-anchor.mw-ui-progressive:focus,
nav ul.hlist li a,
a,
a.external,
a.extiw,
a:visited {
	color: var(--link-color);
}

a.new {
	color: var(--link-redlink-color);
}

/** code/pre tags **/
.mw-code,
code,
kbd,
pre,
samp,
tt {
	font-family: monospace;
	color: var(--code-color);
}

.mw-highlight {
	background: transparent;
}

.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;
}

/*** interface colors ***/
.client-js .toc-mobile,
#mw-mf-diffview #mw-mf-userinfo,
.globalNotice,
.header-container.header-chrome,
.list-header,
.mw-echo-ui-bundleNotificationItemWidget-group,
.mw-echo-ui-crossWikiNotificationItemWidget-group,
.notifications-overlay .overlay-content,
.overlay-header-container,
.search-overlay .results,
.search-overlay .search-content,
.search-overlay .search-feedback {
	background-color: var(--header-background);
}

.minerva-footer,
.overlay-footer-container,
nav {
	background-color: var(--footer-background);
}

.client-js .toc-mobile,
#mw-mf-diffview #mw-mf-userinfo,
.header,
.header-container,
.minerva-footer,
.mw-echo-ui-bundleNotificationItemWidget-separator,
.mw-echo-ui-crossWikiNotificationItemWidget-separator,
.mw-echo-ui-notificationItemWidget,
.mw-echo-ui-notificationItemWidget:last-child,
.overlay-footer-container,
.page-list li,
.search-overlay .search-content,
.site-link-list li,
.topic-title-list li,
footer .last-modified-bar,
footer > .post-content > nav .secondary-action,
nav ul li,
.skin-minerva.ns-special .content-header,
h2 {
	border-color: var(--interface-border);
}

.search-overlay,
.skin-minerva.search-overlay {
	background: var(--search-background);
}

#mw-mf-page-center,
.skin-minerva.navigation-enabled #mw-mf-page-center,
.skin-minerva.primary-navigation-enabled,
.skin-minerva.secondary-navigation-enabled,
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);
}

#content,
.mw-echo-ui-notificationsInboxWidget-toolbarWrapper,
.skin-minerva.ns-special #content,
.skin-minerva.ns-special #content form,
.skin-minerva.ns-special .pre-content {
	background: var(--content-background);
}

/*** basics ***/
.center {
	text-align: center;
}

.content h1,
.content h2,
.pre-content h1,
body {
	font-family: sans-serif;
}

/*** header and footer ***/
.header {
	border-width: 1px 0;
	border-style: solid;
}

.header-container.header-chrome {
	box-shadow: 0 1px 1px rgba(100,100,100,0.2);
}

@supports (position:sticky) {
	.header-container.header-chrome {
		position: sticky;
		top: 0;
		z-index: 1000;
	}

	.overlay-enabled .header-container.header-chrome {
		position: static;
	}

	.navigation-enabled .header-container.header-chrome {
		z-index: 0;
	}
}

.globalNotice {
	overflow: hidden;
	padding: 0 0.5em 0.25em;
}

.notification-count {
	background: transparent;
}

/*** notifications ***/
.mw-echo-ui-bundleNotificationItemWidget-separator,
.mw-echo-ui-crossWikiNotificationItemWidget-separator,
.mw-echo-ui-notificationItemWidget,
.mw-echo-ui-notificationItemWidget:last-child {
	background: rgba(0,0,0,0.1);
}

.mw-echo-ui-notificationItemWidget-unread {
	background: rgba(0,0,0,0.3);
}

.mw-echo-ui-notificationItemWidget:hover {
	background: rgba(0,0,0,0.2);
}

.mw-echo-ui-notificationItemWidget-unread:hover {
	background: rgba(0,0,0,0.4);
}

/*** search ***/
.page-list li .watch-this-article,
.site-link-list li .watch-this-article,
.topic-title-list li .watch-this-article {
	top: 50%;
	margin-top: -0.75em;
}

/*** navigation ***/
.skin-minerva.navigation-enabled .transparent-shield {
	background: rgba(50,50,50,0.9);
}

nav ul li {
	background: var(--navigation-link-background);
	width: 100%;
}

nav ul li a:hover {
	box-shadow: inset 4px 0 0 0 var(--navigation-selected);
}

/*** last-modified bar ***/
footer .last-modified-bar {
	background-color: var(--last-modified-background);
}

/* recently changed page last-modified bar*/
footer .last-modified-bar.active {
	background: #00af89;
}

/*** page history and diffs ***/
.minoredit {
	color: #808080;
}

#mw-mf-diffview #mw-mf-userinfo {
	z-index: 100;
	box-shadow: 0 -1px 3px rgba(0,0,0,0.6);
	opacity: 0.95;
}

/*** editor ***/
.editor-overlay-ve {
	color: #000;
}

.editor-overlay .wikitext-editor {
	background: rgba(0,0,0,0.1);
}
/* ------- 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;
}
/**********
content
**********/
/*** mobile front page collapse ***/
.fpbox.mobilecollapsible .fpbox-heading a.togglecollapse {
	display: block;
	padding: 0 0 0 15px;
}

.fpbox.mobilecollapsible .fpbox-heading a.togglecollapse:active,
.fpbox.mobilecollapsible .fpbox-heading a.togglecollapse:hover {
	text-decoration: none;
}

.fpbox.mobilecollapsible.collapsed .fpbox-heading {
	border: none;
	margin-bottom: 0;
}

.fpbox.mobilecollapsible .fpbox-heading a {
	position: relative;
}

.fpbox.mobilecollapsible .fpbox-heading a:before {
	content: '';
	width: 12px;
	height: 12px;
	background-image: url("/skins/Vector/images/arrow-down.png");
	background-image: linear-gradient(transparent,transparent),url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E %3Cpath d=%22M11.05 3.996l-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5 5-5%22 fill=%22%23222%22/%3E %3C/svg%3E');
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -6px;
}

.fpbox.mobilecollapsible.collapsed .fpbox-heading a:before {
	transform: rotate(-90deg);
}

.fpbox.mobilecollapsible.collapsed .body {
	display: none;
}

/* ------- navboxes ------- */
table.navbox {
	border: var(--navbox-border);
	clear: both;
	font-size: 88%;
	margin: auto;
	padding: 1px;
	text-align: center;
	width: 100%;
	display: table !important;
}
/** 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;
}
/*** amboxes ***/
/* ------- 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;
	width: 80%;
}

.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 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;
	filter:invert(var(--invert-icons,0));
}

/* ------- pixel sprite scaling ------- */
.pixel-image,
.moduleinfobox .infobox-imagearea img,
.ambox-image img,
.qud-image .qud-image-link-image-container img {
  image-rendering: pixelated;
}

/* ------- tables ------- */
table.wikitable {
	border-collapse: var(--wikitable-border-collapse);
	border-spacing: var(--wikitable-border-spacing);
	background: transparent;
	border: var(--wikitable-border);
}

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

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

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

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

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

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

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

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

table.cargoTable td.even,
table.cargoTable td.odd {
	background: transparent;
}

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

table.cargoTable > * > tr > th,
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);
}

table.cargoTable > * > tr > td {
	border: var(--wikitable-border);
	padding: 0.2em 0.4em;
	color: var(--body-color);
}
/** Dynamic Tables **/
table.cargoDynamicTable {
	margin-top: 1em;
	border: 0 solid transparent;
}

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: center;
}

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: var(--wikitable-background);
	text-align: center;
}

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-header-background);
	border: var(--wikitable-border);
}
/** Tablepager **/
.TablePager th {
	background: var(--wikitable-header-background);
	color: var(--wikitable-header-color);
	border: var(--wikitable-border);
	padding: 0 0.15em;
}

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

.TablePager tr:hover td {
	background: var(--wikitable-header-background)!important;
	color: var(--wikitable-header-color);
}

/*** front page styles ***/
.fpmain {
	width: 100%;
	overflow: hidden;
}
/* ------- 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);
}

.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;
}

.linkslabel {
	margin: 15px 5px 5px;
	padding: 0 0 5px;
	border-bottom: 2px solid #505050;
}

/* ------- 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 .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;
}

/*** infoboxes ***/
.infoboxtable {
	max-width: 300px;
	float: none;
	border: var(--infobox-border);
	padding: 0.25em;
	display: table !important;
	border-collapse: separate;
}

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

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

.infoboxtable div {
	color: var(--infobox-label-color);
	background: var(--infobox-label-background);
	text-align: right;
	font-weight: bold;
	padding: 1px 5px;
}

/*** invert icons for dark theme ***/
.fpbox.mobilecollapsible .heading a:before,
.oo-ui-iconElement-icon,
.copyright-icon {
	filter:invert(var(--invert-icons,0));
}

.mw-echo-ui-notificationItemWidget-icon,
.mw-echo-ui-toggleReadCircleButtonWidget-circle,
.mw-ui-icon:before {
	filter:brightness(calc(2 * var(--invert-icons,0)));
}

#mw-mf-diffview .meta:before,
.mw-echo-ui-notificationsInboxWidget-main-toolbar-top .oo-ui-iconElement-icon,
.mw-mf-user:before,
.search-overlay .clear:before {
	filter:none;
}

/* invert extension:math images */
.mwe-math-fallback-image-inline {
	filter: invert(1);
}

/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* -------                                       ------- */
/* ------- CUSTOM & TEMPLATE CSS BELOW THIS LINE ------- */
/* -------                                       ------- */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */

/* IMPORTANT: all mobile-only styles in this gadget MUST have their selectors prefixed by or they will override desktop styles on desktop as well due to a bug with gadgets. If the style is okay with being loaded with javascript, use [[MediaWiki:Mobile.css]] instead */

img.scalable { /* class for scalable images (https://help.gamepedia.com/Advanced_images#Using_css-defined_classes) */
    max-width: 100%;
    height:auto;
}
.header .branding-box h1, .header .branding-box a {
    /* fix wiki header title color */
    color: var(--body-color);
}
Retrieved from "https://wiki.cavesofqud.com/index.php?title=MediaWiki:Mobile.css&oldid=79628"