MediaWiki:Mobile.css

/* CSS placed here will affect users of the mobile site */
#discord-widget { display: none; }


/* ========== *
 *  NOL-TABS  *
 * ========== */
 
.NOL-tabs-wrapper {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    display: block;
    margin-bottom: 0.3em;
}

.NOL-tabs {
	-webkit-columns: 60em 1;
	columns: 60em 1;
	display:inline;
	margin: 0 !important;
	vertical-align:top;
}
.NOL-tabs p,
.NOL-tabs ul,
.NOL-tabs li,
.NOL-tabs ul li {
	display: inline;
	margin: 0 !important;
	padding: 0 !important;
}
/* unselected tabs */
.NOL-tabs p a,
.NOL-tabs li a,
.NOL-tabs ul li a {
    padding: 2px 5px 3px 5px;
	border-radius: 0px /*!important*/;
	border-bottom: 0px;
}
/* current tab */
.NOL-tabs p .mw-selflink,
.NOL-tabs li .mw-selflink,
.NOL-tabs ul li .mw-selflink {
	border-bottom-width: 1.6px;
	border-bottom-style: solid;
}
/* float the bullet points to the left of each item */
.NOL-tabs-divider {
    float: left;
    margin: 0px 5px;
    /* hide this since they're not needed any more */
    display: none /*!important*/;
}
/* hide new links */
.NOL-tabs p a.new,
.NOL-tabs li a.new,
.NOL-tabs ul li a.new {
    display: none /*!important*/;
}
/* hide bullet points for new links */
.NOL-tabs p a.new ~ span.NOL-tabs-divider,
.NOL-tabs li a.new ~ span.NOL-tabs-divider,
.NOL-tabs ul li a.new ~ span.NOL-tabs-divider {
    display: none;
}
/* hide bullet points for the first listed item */
.NOL-tabs li:first-child a ~ span.NOL-tabs-divider,
.NOL-tabs ul li:first-child a ~ span.NOL-tabs-divider {
	display: none;
}

/* ========== *
 *  DROPDOWN  * 
 * ========== */
 
.dropdown {
display:inline-block;
}

.dropdown a {
position: relative;
}

.dropdown div.mw-prefixindex-body {
    position: absolute;
    width: 0px;
}

.dropdown div ul,
.dropdown ul {
background-color: inherit;
margin: -3px 0 0 0;
position: absolute;
visibility: hidden;
z-index: 1;
}

.dropdown a:hover ~ div ul,
.dropdown a:focus ~ div ul,
.dropdown a:active ~ div ul,
.dropdown a:hover ~ ul,
.dropdown a:focus ~ ul,
.dropdown a:active ~ ul,
.dropdown div ul:hover,
.dropdown ul:hover {
visibility: visible;
}

.dropdown ul li {
display: block;
list-style:none;
padding: 0 5px;
}

.dropdown ul li a {
display: inline-block;
width: 100%;
}

/* ========= *
 *  TOOLTIP  *
 * ========= */

.tooltip {
  position: relative;
  display: inline;
  border-bottom: 1px dotted black;
}

.tooltiptext {
  visibility: hidden;
  min-width: 250px;
  padding: 12px 14px;
  text-align: center;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 20px);
  z-index: 99999;
  background: #fff;
  box-shadow: 0 2px 0 0 rgba(0,0,0,0.15);
  border: 1px solid #a2a9b1;
  border-radius: 2px;
  font-weight: normal;
  white-space: normal;
}

.tooltiptext:after,
.tooltiptext:before {
  content: '';
  position: absolute;
  left: 50%;
  border-style: solid;
}

.tooltiptext:after,
.tooltip .tooltip .tooltiptext:after {
  top: 100%;
  bottom: auto;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  background: #fff;
  box-shadow: 1px 1px 0px #a2a9b1;
  transform: rotate(45deg);
  border-width: 0;
}

.tooltiptext:before {
  top: 100%;
  bottom: auto;
  border-width: 18px;
  margin-left: -18px;
  border-color: white transparent transparent transparent; /* fallback border color */
  border-color: rgba(0,0,0,0.15) transparent transparent transparent;
  pointer-events: none;
}

.tooltip .tooltip .tooltiptext {
  bottom: auto;
  top: calc(100% + 20px);
}

.tooltip .tooltip .tooltiptext:after {
  top: 0px;
  bottom: 100%;
  box-shadow: -1px -1px 0px #a2a9b1;
}

.tooltip .tooltip .tooltiptext:before {
  top: auto;
  bottom: 100%;
  border-width: 16px;
  margin-left: -16px;
  border-color: transparent transparent #888 transparent;
}

.tooltiptext hr {
  margin: 10px 0 12px;
  position: relative;
  background: none;
}

.tooltiptext hr:after {
  content: '';
  display: block;
  width: 100%;
  height: 1px !important;
  position: absolute;
  left: -14px;
  background: #a2a9b1;
  padding: 0 14px;
}

.tooltip:hover > .tooltiptext,
.tooltip.hover > .tooltiptext {
  visibility: visible;
}

.tooltiptext {
  opacity: 0;
  transition: opacity 200ms ease, visibility 0s ease 200ms, transform 200ms ease;
  transform: translate(-50%, 8px);
}

.tooltip .tooltip .tooltiptext {
  transform: translate(-50%, -8px);
}

.tooltip:hover > .tooltiptext,
.tooltip.hover > .tooltiptext {
  opacity: 1;
  transition-delay: 0s;
  transform: translate(-50%, 0);
}

/* =======================
   Tooltip colors & styles
   ======================= */

/* Just have it inherit
.tooltiptext a { color: #0645ad; border-bottom: 0; }
.tooltiptext a:visited { color: #0b0080; }
.tooltiptext a:active { color: #faa700; }
.tooltiptext a:hover, a:focus { text-decoration: underline; }
.tooltiptext { color: #252525; }
.tooltiptext a.new { color: #ba0000; }*/


/* Remove .mw-body-content stacking context so the tooltip can
   overlap with elements outside content area and be shown properly */
.mw-body-content { z-index: auto; }

/* =============
      Quotes
   ============= */

/* For ~/Quotes pages and templates in Category:Quotes_Templates */

.toc-float-right {
	float:right; 
	margin:1em 0 0 1em; 
	width:25%;
}

table.quotes { width:65%; }

.quotes > tbody > tr > th:first-child,
.quotes > * > tr > th:first-child,
.quotes > tr > th:first-child {
	width: 9em; 
}
.quotes > tbody > tr > th:last-child,
.quotes > * > tr > th:last-child,
.quotes > tr > th:last-child { 
	width: 4em; 
}

/* ==================
      Guides Pages
   ================== */

.inline { display: inline; }
.uppercase { text-transform: uppercase; }

.guide-header {
	font-family:sans-serif;
	font-weight:bold;
	text-align:center;
}

.character-grid > div {
	border-radius: 0.9em;
	padding-bottom:0.3em;
}
.character-grid > div:hover { filter: brightness(1.2); }

.bb div   { background-color: rgb(  3,126,226); }
.p4u div  { background-color: rgb(221,177,  0); }
.uni div  { background-color: rgb(144, 56,184); }
.rwby div { background-color: rgb(248, 76, 96); }
.ah div   { background-color: rgb(196, 99, 194);}
.sk div   { background-color: rgb(137, 202, 255); }
.bk div   { background-color: rgb(187, 168, 118); }
.plain div{ background-color: grey;             }
.bbdw div { background-color: rgb(108, 16, 27); }

.bb, .p4u, .uni, .rwby, .ah,  .sk, .bk, .plain, .bbdw,
.bb a, .p4u a, .uni a, .rwby a, .ah a, .sk a, .bk a, .plain a, .bbdw a {
	color: white;
}

.bb2 div {
	background-color:rgb(51, 102, 204);
	border-color: rgb(51, 102, 204);
	border-radius: 2px;
	color: #fff;
	display: inline-block;
	font-size: large;
	font-weight: bold;
	line-height: normal;
	padding: 0.57142857em 0.85714286em 0.5em 0.85714286em;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
}
.bb2 div:active {
	color: #fff;
	background-color: #2a4b8d;
	box-shadow:none;
}

/* ============= *
 * News Articles *
 * ============= */
 
.news-box {
	border:1px solid;
	margin:0.5em 0;
	padding:0 1em 0.5em 1em;
}

.news-header {
	border-bottom:1px solid;
	font-size:20px;
	margin:0.5em 0; 
	padding:0.4em; 
}

.news-subheader {
	border-left:3px solid; 
	margin:1.5em 0 0 0;
	padding:0; 
	padding-left:.5em; 
}

/* ==================
      Guides Pages
    (BBDW Character)
   ================== */
.wikitable.bbdw-light > * > tr > th {
    background-color: rgb(220, 220, 120);
    color: black;
}
.wikitable.bbdw-dark > * > tr > th {
    background-color: rgb(120, 80, 120);
    color: black;
}
.wikitable.bbdw-fire > * > tr > th {
    background-color: rgb(250, 120, 120);
    color: black;
}
.wikitable.bbdw-water > * > tr > th {
    background-color: rgb(80, 150, 250);
    color: black;
}
.wikitable.bbdw-earth > * > tr > th {
    background-color: rgb(180, 120, 70);
    color: black;
}
.wikitable.bbdw-wind > * > tr > th {
    background-color: rgb(120, 200, 120);
    color: black;
}

/* ================= *
 * Template: Spoiler *
 * ================= */
 
.spoiler {
    background-color: black;
    color: black;
}
.spoiler:focus, .spoiler:active, .spoiler:hover {
    color: inherit;
}

.noselect {
	user-select: none;
}

/* =========================== */
/* mw-collapsible table styles */
/* =========================== */

/* fix formatting of collapsible tables-within-tables */
.mw-collapsed > tbody > tr:first-child > th:first-child {
    width: 100em;
}

.mw-collapsible-toggle {
    float: right;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.mw-content-ltr .mw-collapsible-toggle, .mw-content-rtl .mw-content-ltr .mw-collapsible-toggle {
    float: right;
}
.mw-customtoggle, .mw-collapsible-toggle {
    cursor: pointer;
}
.mw-collapsible-toggle-default::after {
    content: ']';
}
.mw-collapsible-toggle-default::before {
    content: '[';
}

/* ======================= */
/* Template:DropdownFilter */
/* ======================= */

/*
 * Class to hide elements while keeping them accessible to Javascript; created
 * for Template:DropdownFilter.
 * Combine this class with the HTML attribute aria-hidden="true" to hide the
 * elements from screen readers, and with the mediawiki <nomobile></nomobile> 
 * HTML element to hide it from mobile viewers.
 */
.offscreen{
 clip-path: inset(100%);
 clip: rect(1px 1px 1px 1px); /* IE 6/7 */
 clip: rect(1px, 1px, 1px, 1px);
 height: 1px;
 overflow: hidden;
 position: absolute;
 white-space: nowrap; /* added line */
 width: 1px;
}