MediaWiki:Gadget-Site.css

/***** * Styles placed here are loaded on both desktop and mobile views. * On mobile, it is loaded without using JS, so is good for critical styles * that can't wait for MediaWiki:Mobile.css to be loaded (like the basic theme). * * Desktop-only styles should go in MediaWiki:Common.css or MediaWiki:Hydra.css. * Non-critical mobile-only styles should go in MediaWiki:Mobile.css. *****/

/* Front Page */

div.heading, .fpbox .heading { position: relative; padding: 4px; border-radius: 4px; letter-spacing: 0.05em; border: #503153 solid 2px; border-top-color: #AE718B; border-bottom-color: #3D2447; background: linear-gradient(#523351, #393351); }

div.heading, .fpbox .heading { color: #FFD66E; font-weight: normal; text-shadow: 0px 1px #8B8C99; }

/* Table of Contents */

background: #FFF6; box-shadow: none; }
 * toc, .toc {

/* Table Styling */

border-collapse: separate; border-spacing: 0; border: 1px solid #B2738D; }
 * 1) bodyContent table.wikitable {

table.wikitable > caption { background: #FFF4; }

/* Type Navigation */

display: inline-block; width: 32px; height: 32px; background: transparent; border-radius: 50%; transition: background .2s; }
 * 1) ttw-type-navigation span {

background: #3338; }
 * 1) ttw-type-navigation span:hover {

background: #333; }
 * 1) ttw-type-navigation span.current {

/* Type Interactions Table */ display: inline-table; table-layout: fixed; margin: 0; border-spacing: 0; border: none; border-radius: 76px 0 0 0; background: white; }
 * 1) ttw-type-interactions-static { /* Outer Table */

min-width: 32px; height: 32px; border: none; }
 * 1) ttw-type-interactions-static td { /* Grid */

border-color: black; border-bottom-style: solid; border-width: 1px; }
 * 1) ttw-type-interactions-static > tbody > tr > td.type-row { /* Left Column of Types*/

margin: 0; border-collapse: collapse; border: none; }
 * 1) ttw-type-interactions-dynamic { /* Inner Table */

border-color: black; border-right-style: solid; border-width: 1px; }
 * 1) ttw-type-interactions-dynamic > tbody > tr:first-child > td { /* Top Row of Types*/

border-left-style: solid; }
 * 1) ttw-type-interactions-dynamic > tbody > tr:first-child > td:first-child {

border: black solid 1px; }
 * 1) ttw-type-interactions-dynamic > tbody > tr:not(:first-child) > td { /* Inner Table */

background: repeating-linear-gradient(45deg, transparent 0px, transparent 4px, #0004 4px, #0004 5px); }
 * 1) ttw-type-interactions-dynamic > tbody > tr > td.type-match {

background-color: #AAA; }
 * 1) ttw-type-interactions-dynamic > tbody > tr > td.type-repeat {

font-family: "GothamPro-Black"; background-color: #AFA; }
 * 1) ttw-type-interactions-dynamic > tbody > tr > td.type-effective {

font-family: "GothamPro-Black"; background-color: #AFF; }
 * 1) ttw-type-interactions-dynamic > tbody > tr > td.type-very-effective {

font-family: "GothamPro-Black"; background-color: #FFA; }
 * 1) ttw-type-interactions-dynamic > tbody > tr > td.type-ineffective {

font-family: "GothamPro-Black"; font-size: 11px; background-color: #FAA; }
 * 1) ttw-type-interactions-dynamic > tbody > tr > td.type-very-ineffective {

/* Temtem Info Box */

/* Default Interactive */

.js-button { font-family: "GothamPro-Black"; font-weight: normal; padding: 4px; background: #0006; border: black solid 1px; border-radius: 4px; cursor: pointer; user-select: none; }

.js-button:hover { background: #8886; }

.js-button:active { background: #FFF6; }

.js-button.active { background: #FF86; border-radius: 4px; cursor: default; }

.js-button.disabled { color: #AAA; background: #888; border: #AAA solid 1px; border-radius: 4px; cursor: default; }

.js-button.js-dropdown { position: relative; cursor: pointer; }

.js-dropdown:before { content: ""; display: inline-block; margin-right: .5em; transform-origin: 50%; transition: transform .2s; width: .75em; height: .75em; background: white; clip-path: polygon(50% 100%, 0 0, 100% 0); }

.js-dropdown.active:before { transform: rotate(-90deg); }

.js-dropdown > .js-dropdown-content { position: absolute; display: none; top: 100%; }

.js-dropdown.active > .js-dropdown-content { display: block; }