MediaWiki:Gadget-HeroSkins.css
Ir a la navegación
Ir a la búsqueda
Nota: Después de publicar, quizás necesite actualizar la caché de su navegador para ver los cambios.
- Firefox/Safari: Mantenga presionada la tecla Shift mientras pulsa el botón Actualizar, o presiona Ctrl+F5 o Ctrl+R (⌘+R en Mac)
- Google Chrome: presione Ctrl+Shift+R (⌘+Shift+R en Mac)
- Internet Explorer/Edge: mantenga presionada Ctrl mientras pulsa Actualizar, o presione Ctrl+F5
- Opera: Presiona Ctrl+F5.
/*
---------------------
Hero Skin Wardrobes
---------------------
-----------------------
COMPLEMENTARY SCRIPTS
-----------------------
- HeroSkins.js
-----------------------
AUTHORS & MAINTAINERS
-----------------------
- E12Dragon: current and original version
--------------
INFORMATION
--------------
- Used for the Skin Menus (Template:Wardrobe-BK etc)
- Post June 2023 Hero Skin Wardrobes
*/
/********************/
/* Mobile overrides */
/********************/
body.skin-fandommobile .HSM-Container .HSM-Icons,
body.skin-fandommobile .HSM-Container .HSM-Toggle,
body.skin-fandommobile .HSM-Container .HSM-GWM,
body.skin-fandommobile .HSM-Container .HSM-Sound,
body.skin-fandommobile .HSM-Container .HSM-Boot,
body.skin-fandommobile .HSM-Container .HSM-Scroll-Left,
body.skin-fandommobile .HSM-Container .HSM-Scroll-Right {
display:none;
}
/*************/
/* Container */
/*************/
.HSM-Container {
width:100%;
max-width:881px;
height:400px;
background-color:var(--theme-page-background-color--secondary);
border-radius:12px;
position:relative;
margin:0 auto 5px auto;
overflow-y:hidden;
user-select:none;
}
/***********************/
/*Background Displaying*/
/***********************/
/* Backgrounds use opacity:0 rather than display:none so they are all loaded when the page is loaded*/
.HSM-Container:not([data-mode="Preview"]) .HSM-Background-Sky,
.HSM-Container:not([data-mode="Preview"]) .HSM-Background-Clouds,
.HSM-Container:not([data-mode="Preview"]) .HSM-Background-Ground,
.HSM-Container:not([data-mode="Preview"]) .HSM-Background-Sky {
opacity:0;
}
.HSM-Container:not([data-mode="Downed"]) .HSM-Background-Altar {
opacity:0;
}
.HSM-Container:not([data-mode="Idle"]):not([data-mode="Pose"]):not([data-mode="KO"]):not([data-mode="Ability"]) .HSM-Background-Field {
opacity:0;
}
/************/
/*Background*/
/************/
.HSM-Container > .HSM-Background {
width:inherit;
height:inherit;
position:relative;
border-radius:inherit;
overflow:hidden;
}
.HSM-Container > .HSM-Background > div {
width:inherit;
height:inherit;
position:absolute;
top:0;
}
/*Preview sky layer*/
.HSM-Container > .HSM-Background .HSM-Background-Sky {
background-image:url(https://clashofclans.wiki.gg/es/images/d/d1/HSM-Background-Sky.png);
background-size:882px;
background-repeat:no-repeat;
background-position:center;
}
/*Preview Clouds layer*/
.HSM-Container > .HSM-Background .HSM-Background-Clouds {
background-image:url(https://clashofclans.wiki.gg/es/images/0/02/HSM-Background-Clouds.png);
background-size:882px;
background-repeat:repeat-x;
animation:clouds 450s infinite linear;
}
@keyframes clouds {
0% {
background-position:0 0;
}
100% {
background-position:882px 0;
}
}
/*Preview Ground layer*/
.HSM-Container > .HSM-Background .HSM-Background-Ground {
background-image:url(https://clashofclans.wiki.gg/es/images/d/d2/HSM-Background-Ground.png);
background-size:882px;
background-repeat:no-repeat;
background-position:center;
}
/*Field Vignette*/
.HSM-Container:not([data-mode="Preview"]) > .HSM-Background .HSM-Background-Vignette {
box-shadow:0 0 60px 40px #00000052 inset;
}
/*Field and Altar general*/
.HSM-Container > .HSM-Background .HSM-Background-Field,
.HSM-Container > .HSM-Background .HSM-Background-Altar {
background-size:882px;
background-repeat:no-repeat;
background-position:center;
}
/*HV Field Tile layer*/
.HSM-Container:not([data-hero="BM"]):not([data-hero="BC"]) > .HSM-Background .HSM-Background-Field {
background-image:url(https://clashofclans.wiki.gg/es/images/5/55/HSM-Tiles-HV.jpg);
}
/*BB Field Tile layer*/
.HSM-Container:not([data-hero="BK"]):not([data-hero="AQ"]):not([data-hero="GW"]):not([data-hero="RC"]) > .HSM-Background .HSM-Background-Field {
background-image:url(https://clashofclans.wiki.gg/es/images/9/90/HSM-Tiles-BB.jpg);
}
/*BK Downed layer*/
.HSM-Container[data-hero="BK"] > .HSM-Background .HSM-Background-Altar {
background-image:url(https://clashofclans.wiki.gg/es/images/c/cf/HSM-Tiles-BK.jpg);
}
/*AQ Downed layer*/
.HSM-Container[data-hero="AQ"] > .HSM-Background .HSM-Background-Altar {
background-image:url(https://clashofclans.wiki.gg/es/images/a/af/HSM-Tiles-AQ.jpg);
}
/*GW Downed layer*/
.HSM-Container[data-hero="GW"] > .HSM-Background .HSM-Background-Altar {
background-image:url(https://clashofclans.wiki.gg/es/images/f/f1/HSM-Tiles-GW.jpg);
}
/*RC Downed layer*/
.HSM-Container[data-hero="RC"] > .HSM-Background .HSM-Background-Altar {
background-image:url(https://clashofclans.wiki.gg/es/images/8/82/HSM-Tiles-RC.jpg);
}
/*BM Downed layer*/
.HSM-Container[data-hero="BM"] > .HSM-Background .HSM-Background-Altar {
background-image:url(https://clashofclans.wiki.gg/es/images/7/7c/HSM-Tiles-BM.jpg);
}
/*BC Downed layer*/
.HSM-Container[data-hero="BC"] > .HSM-Background .HSM-Background-Altar {
background-image:url(https://clashofclans.wiki.gg/es/images/5/5a/HSM-Tiles-BC.jpg);
}
/*Shadow layer general*/
.HSM-Container:not([data-mode="Downed"]) > .HSM-Background .HSM-Background-Shadow {
position:relative;
margin:auto;
background:#00000080;
border-radius:50%;
}
/*Hide shadow until JS loaded*/
.HSM-Container:not(.loaded) > .HSM-Background .HSM-Background-Shadow {
display:none;
}
/*HV Preview Shadow layer*/
.HSM-Container[data-mode="Preview"]:not([data-hero="BM"]):not([data-hero="BC"]) > .HSM-Background .HSM-Background-Shadow {
width: 85px;
height: 0;
top: 285px;
box-shadow: 0 0 12px 10px #00000080;
}
/*BB Preview Shadow layer*/
.HSM-Container[data-mode="Preview"]:not([data-hero="BK"]):not([data-hero="AQ"]):not([data-hero="GW"]):not([data-hero="RC"]) > .HSM-Background .HSM-Background-Shadow {
width:180px;
height:12px;
top: 285px;
box-shadow: 0 0 12px 10px #00000080;
}
/*HV Field Shadow layer*/
.HSM-Container:not([data-mode="Downed"]):not([data-mode="Preview"]):not([data-hero="BM"]):not([data-hero="BC"]) > .HSM-Background .HSM-Background-Shadow {
width:38px;
height:25px;
top:200px;
box-shadow:0 0 7px 6px #00000080;
}
/*BB Field Shadow layer*/
.HSM-Container:not([data-mode="Downed"]):not([data-mode="Preview"]):not([data-hero="BK"]):not([data-hero="AQ"]):not([data-hero="GW"]):not([data-hero="RC"]) > .HSM-Background .HSM-Background-Shadow {
width:50px;
height:34px;
top:195px;
box-shadow:0 0 7px 6px #00000080;
}
/**************/
/* Skin Icons */
/**************/
.HSM-Container > .HSM-Icons {
width: min-content;
max-width: 100%;
height: 90px;
position: relative;
bottom: 90px;
display: flex;
overflow-x: scroll;
overflow-y: hidden;
flex-direction: row-reverse;
margin: auto;
}
.HSM-Container > .HSM-Icons::-webkit-scrollbar {
display: none;
overflow-y: hidden;
}
/*********************/
/* Skin Icon designs */
/*********************/
/*Shape*/
.HSM-Container > .HSM-Icons .SkinIcon {
padding:1px;
border-radius: 10px;
margin:9px 5px 5px 5px;
height:72px;
}
.HSM-Container > .HSM-Icons .SkinIcon > div {
border-radius: 9px;
padding:5px;
}
.HSM-Container > .HSM-Icons .SkinIcon > div > div {
overflow:hidden;
border-radius: 6px;
}
.HSM-Container > .HSM-Icons .SkinIcon img {
width:58px;
height:auto;
pointer-events:none;
}
/*Standard*/
.HSM-Container > .HSM-Icons .SkinIcon:not([data-type="Gold"]):not([data-type="Legendary"]) {
background: linear-gradient(#EDF0ED 0%, #ffffff 40%, #f1f1f1 100%);
box-shadow: 0 3px lightgrey;
}
.HSM-Container > .HSM-Icons .SkinIcon:not([data-type="Gold"]):not([data-type="Legendary"]) > div {
background:linear-gradient(#f4f4ec 40%, #f6f5f1 49%);
}
.HSM-Container > .HSM-Icons .SkinIcon:not([data-type="Gold"]):not([data-type="Legendary"]) > div > div {
background: #fefff9;
border-top: 1px solid grey;
box-shadow:0 0 8px 7px #dcddda inset;
}
.HSM-Container > .HSM-Icons .SkinIcon:not([data-type="Gold"]):not([data-type="Legendary"]).active{
box-shadow:0 3px lightgrey, 0 0 0 2px #b6d74a, 0 3px 0 2px #b6d74a;
}
/*Gold*/
.HSM-Container > .HSM-Icons .SkinIcon[data-type="Gold"] {
background: linear-gradient(#DBA74D 0%, #FFFF9A 40%, #DCAB54 100%);
box-shadow: 0 3px #B38F39;
}
.HSM-Container > .HSM-Icons .SkinIcon[data-type="Gold"] > div {
background: linear-gradient(#ffc64b 40%, #FEE277 49%);
}
.HSM-Container > .HSM-Icons .SkinIcon[data-type="Gold"] > div > div {
background: #fdee5b;
border-top: 1px solid #8E6B29;
box-shadow:0 0 8px 7px #e2b124 inset;
}
.HSM-Container > .HSM-Icons .SkinIcon[data-type="Gold"].active{
box-shadow:0 3px #B38F39, 0 0 0 2px #b6d74a, 0 3px 0 2px #b6d74a;
}
/*Legendary*/
.HSM-Container > .HSM-Icons .SkinIcon[data-type="Legendary"] {
background: linear-gradient(#7A30D4 0%, #E47CF8 40%, #8237DB 100%);
box-shadow: 0 3px #793abe;
}
.HSM-Container > .HSM-Icons .SkinIcon[data-type="Legendary"] > div {
background: linear-gradient(#d35ef4 40%, #E692F8 49%);
}
.HSM-Container > .HSM-Icons .SkinIcon[data-type="Legendary"] > div > div {
background: #dc66ff;
border-top: 1px solid #552187;
box-shadow:0 0 8px 7px #9f2ede inset;
}
.HSM-Container > .HSM-Icons .SkinIcon[data-type="Legendary"].active{
box-shadow:0 3px #793abe, 0 0 0 2px #b6d74a, 0 3px 0 2px #b6d74a;
}
/*Psuedo States*/
.HSM-Container > .HSM-Icons .SkinIcon:hover:not(.active) {
filter:brightness(1.1);
cursor:pointer;
}
.HSM-Container > .HSM-Icons .SkinIcon:active:not(.active) {
transform:scale(0.95);
}
/*Only display if image is uploaded*/
.HSM-Container .SkinIcon:not(:has(img)) {
display:none;
}
/******************/
/* Other Elements */
/******************/
/*Title*/
.HSM-Container > .HSM-Title {
position:absolute;
top:10px;
left:20px;
font-family:'Clash';
font-size:18px;
color:white;
text-shadow:1px 1px black, 1px -1px black, -1px 1px black, -1px -1px black, 1px 2px black;
text-align:center;
pointer-events:none;
}
/*Subtitle*/
.HSM-Container > .HSM-Subtitle {
position:absolute;
top:35px;
left:20px;
font-family:'Clash';
text-shadow:1px 1px black, 1px -1px black, -1px 1px black, -1px -1px black, 1px 2px black;
font-size:14px;
text-align:center;
pointer-events:none;
}
/*Subtitle- Standard*/
.HSM-Container[data-type="Standard"] .HSM-Subtitle {
color:white;
}
/*Subtitle- Gold*/
.HSM-Container[data-type="Gold"] .HSM-Subtitle {
color:gold;
}
/*Subtitle- Legendary*/
.HSM-Container[data-type="Legendary"] .HSM-Subtitle {
color:magenta;
}
/*Subtitle- default*/
.HSM-Container:not([data-type]) .HSM-Subtitle{
display:none;
}
/*Shortcut arrows*/
.HSM-Container > .HSM-Link-Left,
.HSM-Container > .HSM-Link-Right {
position:absolute;
top:175px;
}
.HSM-Container > .HSM-Link-Left img,
.HSM-Container > .HSM-Link-Right img {
width:20px;
height:auto;
border:none; /*Remove the dumb img borders on Fandom mobile*/
}
.HSM-Container > .HSM-Link-Left {
left:10px;
transform: scale(-1, 1);
}
.HSM-Container > .HSM-Link-Right {
right:10px;
}
/*Author credit*/
.HSM-Container > .HSM-Author {
position:absolute;
right:7px;
top:3px;
font-size:6px;
color:white;
opacity:0.5;
}
.HSM-Container > .HSM-Author span {
color:white;
font-weight:400;
}
/*Custom spawns*/
.HSM-Container .HSM-Ability-Text:not(.active) {
display:none;
}
.HSM-Container:not([data-mode="Ability"]) .HSM-Ability-Text {
display:none;
}
.HSM-Container .HSM-Ability-Text {
position: absolute;
width: 100%;
top: 285px;
text-align: center;
font-family: BackBeat;
font-size: 16px;
color: white;
text-shadow: 1px 1px black, 1px -1px black, -1px 1px black, -1px -1px black, 1px 2px black;
}
/*Boot text*/
.HSM-Container.loaded .HSM-Boot {
display:none;
}
.HSM-Container .HSM-Boot {
position: absolute;
top: 180px;
width: 100%;
text-align: center;
font-family: BackBeat;
color: white;
text-shadow: 1px 1px black, 1px -1px black, -1px 1px black, -1px -1px black, 1px 2px black;
font-size: 16px;
}
/*Mobile text*/
body:not(.skin-fandommobile) .HSM-Container .HSM-Mobile {
display:none;
}
.HSM-Container .HSM-Mobile {
position: absolute;
top: 180px;
width: 100%;
text-align: center;
font-family: BackBeat;
color: white;
text-shadow: 1px 1px black, 1px -1px black, -1px 1px black, -1px -1px black, 1px 2px black;
font-size: 16px;
}
/******************************/
/* Toggle, GWM, Sound, Scroll */
/******************************/
/*All button images are in an atlas so they are preloaded*/
.HSM-Container .HSM-Toggle,
.HSM-Container .HSM-GWM,
.HSM-Container .HSM-Sound {
position: absolute;
height:26px;
background-image: url(https://clashofclans.wiki.gg/es/images/f/fb/HSM-Atlas.png);
background-repeat:no-repeat;
background-size: 180px;
cursor: pointer;
}
.HSM-Container[data-mode="Preview"] .HSM-GWM,
.HSM-Container:not([data-gwm]) .HSM-GWM {
display:none;
}
/*Toggle*/
.HSM-Container .HSM-Toggle {
bottom: 90px;
right:35px;
width: 26px;
}
/*GWM*/
.HSM-Container .HSM-GWM {
bottom: 90px;
width: 36px;
right: 64px;
}
.HSM-Container[data-gwm="Ground"] .HSM-GWM {
background-position:-79px 0;
}
.HSM-Container[data-gwm="Air"] .HSM-GWM {
background-position:-115px 0;
}
/*Sound*/
.HSM-Container .HSM-Sound {
bottom: 90px;
right: 6px;
width: 26px;
}
.HSM-Container.muted .HSM-Sound {
background-position:-53px 0;
}
.HSM-Container:not(.muted) .HSM-Sound {
background-position:-26.5px 0;
}
/*Scroll*/
.HSM-Container > .HSM-Scroll-Left,
.HSM-Container > .HSM-Scroll-Right {
width:12px;
height:22px;
position:absolute;
bottom:34px;
background-image:url(https://clashofclans.wiki.gg/es/images/a/a1/HSM-Link.png);
background-size:12px;
background-repeat:no-repeat;
cursor:pointer;
}
.HSM-Container > .HSM-Scroll-Left:not(:hover),
.HSM-Container > .HSM-Scroll-Right:not(:hover) {
opacity:0.6;
}
.HSM-Container > .HSM-Scroll-Left {
left:10px;
transform: scale(-1, 1);
}
.HSM-Container > .HSM-Scroll-Right {
right:10px;
}
/*Psuedo states*/
.HSM-Container .HSM-Toggle:hover,
.HSM-Container .HSM-GWM:hover,
.HSM-Container .HSM-Sound:hover,
.HSM-Container .HSM-Scroll-Left:hover,
.HSM-Container .HSM-Scroll-Right:hover {
filter:brightness(1.1);
}
.HSM-Container .HSM-Toggle:active,
.HSM-Container .HSM-GWM:active,
.HSM-Container .HSM-Sound:active,
.HSM-Container .HSM-Scroll-Right:active {
transform:scale(0.9);
}
.HSM-Container .HSM-Scroll-Left:active {
transform:scale(0.9) scale(-1, 1);
}
/********************/
/* Model Visibility */
/********************/
/*Hide inactive models*/
.HSM-Container .HSM-Models > div:not(.active),
.HSM-Container .HSM-Models > div > div:not(.active),
.HSM-Container[data-gwm="Ground"] .HSM-Models > .Air,
.HSM-Container[data-gwm="Air"] .HSM-Models > div:not(.Air):not(.HSM-Models-Preview) {
display:none;
}
/**********/
/* Models */
/**********/
.HSM-Container .HSM-Models {
width:100%;
position:absolute;
top:0;
}
.HSM-Container .HSM-Models > div > div > img {
width:inherit;
height:auto;
}
.HSM-Container .HSM-Models > div > div {
position:relative;
margin:auto;
}
/***************/
/* Theme Icons */
/***************/
.HSM-Container .HSM-Themes {
position:absolute;
top: 60px;
left: 15px;
text-align:center;
}
/*Theme icon text*/
.HSM-Container .HSM-Themes:hover > div.active {
display: block;
position: absolute;
width: 200px;
padding: 7px 0;
border: 1px solid black;
border-radius: 10px;
box-shadow: 0 2px 0 0 darkslategrey;
font-family: BackBeat;
font-size: 11px;
left:55px;
top:10px;
}
body.theme-fandomdesktop-light .HSM-Container .HSM-Themes:hover > div.active {
background: white;
}
body.theme-fandomdesktop-dark .HSM-Container .HSM-Themes:hover > div.active {
background:#373737;
}
/*Triangle*/
.HSM-Container .HSM-Themes > div.active::before {
width: 20px;
height: 20px;
position: absolute;
content: '';
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
left:-21px;
bottom:3px;
}
body.theme-fandomdesktop-light .HSM-Container .HSM-Themes > div.active::before {
border-right: 12px solid white;
}
body.theme-fandomdesktop-dark .HSM-Container .HSM-Themes > div.active::before {
border-right: 12px solid #373737;
}
/*Hide if inactive*/
.HSM-Container .HSM-Themes > div {
display:none;
}
/*********************/
/* Theme Icons Atlas */
/*********************/
.HSM-Container .HSM-Themes {
background-image:url(https://clashofclans.wiki.gg/es/images/d/d0/ThemeIconsAtlas.png?format=original);
width:50px;
height:50px;
}
.HSM-Container[data-theme="Make"] .HSM-Themes {
background-position:0 0;
background-size:170px;
}
.HSM-Container[data-theme="Anniversary"] .HSM-Themes {
background-position:-50px 0;
background-size:170px;
}
.HSM-Container[data-theme="Champions"] .HSM-Themes {
background-position:-100px 0;
background-size:170px;
}
.HSM-Container[data-theme="Lunar"] .HSM-Themes {
background-position:0 -50px;
background-size:170px;
}
/**************/
/* Animations */
/**************/
.HSM-Container.transition .HSM-Title,
.HSM-Container.transition .HSM-Subtitle,
.HSM-Container.transition .HSM-Models,
.HSM-Container .HSM-Models > div > div,
.HSM-Container.transition .HSM-Themes,
.HSM-Container.transition .HSM-Background-Shadow,
.HSM-Container.transition .HSM-Ability-Text {
animation-name:loadpreview;
animation-duration: .3s;
animation-iteration-count: 1;
animation-play-state: running;
animation-fill-mode: forwards;
}
@keyframes loadpreview {
from {
opacity:0;
}
to {
opacity:1;
}
}
.HSM-Container.transition .HSM-Background {
transition:background-image .3s;
}
/*Lazy loaded Previews*/
.HSM-Container .HSM-Load {
width: 50px;
height: 50px;
position: absolute;
bottom: calc(50% - 25px);
left: calc(50% - 25px);
pointer-events:none;
user-select:none;
}
.HSM-Container .HSM-Load.active {
background-image:url(hhttps://clashofclans.wiki.gg/es/images/1/1c/HSM-Load.png);
background-size:50px 50px;
background-repeat:no-repeat;
animation:spin 2s infinite linear;
}
@keyframes spin {
0% {
transform:rotate(360deg);
}
100% {
transform:rotate(0);
}
}
.HSM-Container .SkinIcon[data-type="Legendary"] > div::before {
content:'';
background-image:url(https://clashofclans.wiki.gg/es/images/4/42/Glint1.png);
background-size:70px;
width:70px;
height:70px;
margin:-15px 0 0 -6px;
position:absolute;
background-repeat:no-repeat;
animation-name: legendary-skin-button;
animation-duration: 4s;
animation-timing-function: ease-out;
animation-iteration-count: infinite;
animation-play-state: running;
}
@keyframes legendary-skin-button {
0% {
background-position:0 0;
opacity:0;
}
20% {
opacity:1;
}
25% {
background-position:0 50px;
opacity:0;
}
100% {
background-image:none;
background-position:0 50px;
opacity:0;
}
}
/* #region Sidebar sticky ToC */
#p-stoc {
position: sticky;
top: 35px;
background: none !important;
border: 0 !important;
width: 100%;
margin: 10px 0;
}
#p-stoc > .vector-menu-content {
overflow: hidden;
word-break: break-word;
max-height: calc(100vh - var(--sticky-offset) - 2rem - .75em);
margin-left: -0.2em;
}
#p-stoc .tocnumber {
word-break: keep-all;
}
#p-stoc .vector-menu-content li {
font-size: .725rem;
}
#p-stoc-label {
margin: 0;
padding: 6px 10px;
border: 0;
border-radius: var(--main-inner-box-border-radius) var(--main-inner-box-border-radius) 0px 0px;
background: #888367;
font-size: 15px;
line-height: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
color: var(--theme-text-color);
}
/* Currently not supported on tablet and below... but it's not very usable in this form anyway */
@media screen and (max-width: 1260px) {
#p-stoc {
display: none;
}
}
/* #endregion */