MediaWiki:Gadget-Site.css

De Official Temtem Wiki
Aller à la navigation Aller à la recherche

Dans d’autres langues: English • Español


Tous changements apportés au fichiers CSS et Javascript doivent être conforme aux règles de design du wiki.


Note : après avoir enregistré vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.

  • Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou pressez Ctrl-F5 ou Ctrl-R (⌘-R sur un Mac)
  • Google Chrome : appuyez sur Ctrl-Maj-R (⌘-Shift-R sur un Mac)
  • Internet Explorer : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl-F5
  • Opera : allez dans Menu → Settings (Opera → Préférences sur un Mac) et ensuite à Confidentialité & sécurité → Effacer les données d’exploration → Images et fichiers en cache.
/*****
 * 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 */

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

/* Table Styling */

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

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

table.wikitable > tbody > tr:nth-child(2n),
.content table.wikitable > tbody > tr:nth-child(2n) {
    background: #FFF;
}

table.wikitable > tbody > tr:nth-child(2n+1),
.content table.wikitable > tbody > tr:nth-child(2n+1) {
    background: #DDD;
}

table.wikitable > tbody > tr:hover,
.content table.wikitable > tbody > tr:hover {
    background: #FFD;
}

table.wikitable > tbody > tr > th,
table.wikitable > thead > tr > th,
.content table.wikitable > tbody > tr > th,
.content table.wikitable > thead > tr > th {
    border: none;
}

table.wikitable > tbody > tr > th,
table.wikitable > thead > tr > th,
table.wikitable > tbody > tr > td,
.content table.wikitable > tbody > tr > th,
.content table.wikitable > thead > tr > th,
.content table.wikitable > tbody > tr > td {
    border: none;
}

table.wikitable > tbody > tr > th:not(:first-child),
table.wikitable > thead > tr > th:not(:first-child),
table.wikitable > tbody > tr > td:not(:first-child),
.content table.wikitable > tbody > tr > th:not(:first-child),
.content table.wikitable > thead > tr > th:not(:first-child),
.content table.wikitable > tbody > tr > td:not(:first-child)  {
    border-left: #0003 solid 1px;
}

table.wikitable > tbody > tr:not(:first-child) > th,
table.wikitable > thead > tr:not(:first-child) > th,
.content table.wikitable > tbody > tr:not(:first-child) > th,
.content table.wikitable > thead > tr:not(:first-child) > th {
    border-top: #0003 solid 1px;
}

/* Type Navigation */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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