MediaWiki:Mobile.css

/* CSS placed here will affect users of the mobile site */
 * 1) 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; }

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

/* ================= * * Template: Spoiler * * ================= */ .spoiler { background-color: black; color: black; } .spoiler:focus, .spoiler:active, .spoiler:hover { color: inherit; } /* noselect source: https://stackoverflow.com/a/4407335 */ .noselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ }

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

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