MediaWiki:Attributes.css: Difference between revisions

.attribute-pill {
    --attribute-Beauty: #88cec6;
    --attribute-Change: #a0a9f4;
    --attribute-Competition: linear-gradient(90deg, rgba(213, 67, 68, 1) 0%, rgba(86, 112, 176, 1) 100%);
    --attribute-Dark: #734e9d;
    --attribute-Hate: #a893dd;
    --attribute-Insatiability: #c5db7d;
    --attribute-Joy: #f68481;
    --attribute-Light: #f8b430;
    --attribute-Love: #eda1b6;
    --attribute-Memory: #8ec0e8;
    --attribute-Oblivion: #aab4da;
    --attribute-Peace: #deceb0;
    --attribute-Pride: #b27ad3;
    --attribute-Prosperity: #fa8d43;
    --attribute-Reality: #959595;
    --attribute-Regret: #775378;
    --attribute-Right: #5bb8e7;
    --attribute-Satiation: #f5a77d;
    --attribute-Strength: #87b5f3;
    --attribute-Ugliness: #7c93aa;
    --attribute-War: #964545;
    --attribute-Weakness: #b6d0e7;
    
    --attribute-Blaster: #9c749d;
    --attribute-Cherubim: #fff;
    --attribute-Cherubim--text: #bba479;
    --attribute-Explorer: #9fc47b;
    --attribute-Gladiator: #bba479;
    --attribute-Hothead: #e36566;
    --attribute-Mascot: #f6b560;
    --attribute-Mastermind: #71b7af;
    --attribute-Protector: #d2a3ba;
    --attribute-Striker: #fa9269;
    
    display: inline-flex;
    align-items: center;
    border-radius: 16px;
    padding: 0 8px;
    height: 25px;
    margin: 2px;
    background-color: var(--theme-color-5);
    line-height: 1;
    position: relative;
}

.attribute-pill a,
.attribute-pill .mw-selflink {
    color: white;
    font-weight: 600;
}

.theme-fandomdesktop-light .attribute-pill-Cherubim,
.theme-fandommobile-light .attribute-pill-Cherubim {
    box-shadow: 0px 0px 3px var(--attribute-Cherubim--text);
}

/* Aspect Colors */
.attribute-pill-Beauty { background-color: var(--attribute-Beauty); }
.attribute-pill-Change { background-color: var(--attribute-Change); }
.attribute-pill-Competition { background: var(--attribute-Competition); }
.attribute-pill-Dark { background-color: var(--attribute-Dark); }
.attribute-pill-Hate { background-color: var(--attribute-Hate); }
.attribute-pill-Insatiability { background-color: var(--attribute-Insatiability); }
.attribute-pill-Insatiability a { color: black; }
.attribute-pill-Joy { background-color: var(--attribute-Joy); }
.attribute-pill-Light { background-color: var(--attribute-Light); }
.attribute-pill-Love { background-color: var(--attribute-Love); }
.attribute-pill-Memory { background-color: var(--attribute-Memory); }
.attribute-pill-Oblivion { background-color: var(--attribute-Oblivion); }
.attribute-pill-Peace { background-color: var(--attribute-Peace); }
.attribute-pill-Peace a { color: black; }
.attribute-pill-Pride { background-color: var(--attribute-Pride); }
.attribute-pill-Prosperity { background-color: var(--attribute-Prosperity); }
.attribute-pill-Regret { background-color: var(--attribute-Regret); }
.attribute-pill-Reality { background-color: var(--attribute-Reality); }
.attribute-pill-Right { background-color: var(--attribute-Right); }
.attribute-pill-Satiation { background-color: var(--attribute-Satiation); }
.attribute-pill-Strength { background-color: var(--attribute-Strength); }
.attribute-pill-Ugliness { background-color: var(--attribute-Ugliness); }
.attribute-pill-War { background-color: var(--attribute-War); }
.attribute-pill-Weakness { background-color: var(--attribute-Weakness); }
.attribute-pill-Weakness a { color: black; }

/* Trait Colors */
.attribute-pill-Blaster { background-color: var(--attribute-Blaster); }
.attribute-pill-Cherubim { background-color: var(--attribute-Cherubim); }
.attribute-pill-Cherubim a { color: var(--attribute-Cherubim--text) !important; }
.attribute-pill-Explorer { background-color: var(--attribute-Explorer); }
.attribute-pill-Gladiator { background-color: var(--attribute-Gladiator); }
.attribute-pill-Hothead { background-color: var(--attribute-Hothead); }
.attribute-pill-Mascot { background-color: var(--attribute-Mascot); }
.attribute-pill-Mastermind { background-color: var(--attribute-Mastermind); }
.attribute-pill-Protector { background-color: var(--attribute-Protector); }
.attribute-pill-Striker { background-color: var(--attribute-Striker); }

/* Invert unreadable icons */
.attribute-pill-Insatiability img,
.attribute-pill-Peace img,
.attribute-pill-Weakness img {
    filter: invert();
}

.theme-fandomdesktop-light .attributeicon img {
    filter: invert();
}

.attribute-area-icon {
    width: 32px;
    height: 32px;
    background-color: white;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    position: relative;
    border: 2px solid #989daf;
}