MediaWiki:Wikia.css/Variants.css

.HeroSkinMenu { height:362px; overflow:hidden; background: white; width: 630px; padding: 8px; padding-right: 10px; border-radius: 10px; margin:auto; text-align:left; }

.SkinPreviewText { -webkit-text-stroke:1px black; -webkit-text-fill-color:white; color:white; text-shadow:0 1.5px black; position:relative; top:-340px; width:200px; left:5px; display:none; text-align:center; z-index:1; }

.SkinPreviewImg { position:relative; top:-300px; margin:auto; }

.SkinPreview { display:none; }

.SkinPreview.active { display:table !important; -webkit-animation-name:loadpreview; -webkit-animation-duration: .3s; -webkit-animation-iteration-count: 1; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; animation-name:loadpreview; animation-duration: .3s; animation-iteration-count: 1; animation-play-state: running; animation-fill-mode: forwards; }

@-webkit-keyframes loadpreview { from { opacity:0; }	to { opacity:1; } } @keyframes loadpreview { from { opacity:0; }	to { opacity:1; } }

.HeroSkinSelect{ background:linear-gradient(to bottom, lightgrey 0%, darkgrey 100%); border-radius:5px; margin-right: 0; margin-left: auto; overflow: auto; display: inline-block; width:330.4px; height: 346px; padding-top:5px; position:relative; top:5px; }

.HeroSkinSelect::-webkit-scrollbar { display: none; overflow-x: hidden; }

.HeroSkinSelect td { padding:4px 8px 4px 8px !important; }

.HeroSkinSelectCol { vertical-align:top; position:relative; left:18px; } .HeroSkinMenu .author { text-align:right; font-size:8px; opacity:0.5; }

/*Skin Icons design*/ .SkinIcon { overflow:hidden; height:95px; } .SkinIcon.active div{ border-color:#5DD137; box-shadow:0 3px 0 0 #528E36; } .SkinIcon div { border:6px solid white; background:lightgrey; box-shadow:0 3px 0 0 grey; border-radius:12px; width:80px; height:80px; overflow:hidden; }

/*Button Hovers/Actives*/ .SkinIcon:hover:not(.active) { filter:brightness(1.1); transform:scale(0.95); } .SkinIcon:active:not(.active) { filter:brightness(1.1); transform:scale(1); }

/*When using multiple audio*/ .NoSkinIcon { border:none !important; box-shadow:none !important; overflow:visible !important; }

/*******/ /*Audio*/ /*******/ .SkinIcon .audio-button { border:none; background: transparent; position: absolute; height: 100px; width: 90px; } .SkinIcon .SwitchSound[id="1"] .audio-button.SwitchSound-2 { display:none; } .HeroSkinMenu .active .audio-button { visibility:collapse; } /*Positionings of audio gets a bit funky*/ .HeroSkinSelect tr:nth-child(1) .audio-button, .HeroSkinSelect tr:nth-child(2) .audio-button, .HeroSkinSelect tr:nth-child(3) .audio-button { transform:translate(-1px, 0); } .HeroSkinSelect tr .audio-button { transform:translate(-8px, -8px); }

/******************************/ /*Custom adjustments to images*/ /******************************/ .SkinPreviewImg img{ position:relative; }

.SkinPreviewImg.BK-Gladiator img{ top:-10px; left:10px; } .SkinPreviewImg.BK-Skeleton img{ top:10px; left:3px; } .SkinPreviewImg.BK-Jolly img{ top:10px; left:2px; } .SkinPreviewImg.BK-Primal img{ top:-10px; } .SkinPreviewImg.BK-Clockwork img{ left:3px; } .SkinPreviewImg.BK-Champion img{ top:-140px; } .SkinPreviewImg.AQ-Original img{ left:-15px; } .SkinPreviewImg.AQ-Warrior img{ left:20px; } .SkinPreviewImg.GW-Original img{ top:30px; left:-14px; } .SkinPreviewImg.GW-Party img{ top:20px; } .SkinPreviewImg.GW-Primal img{ top:-10px; } .SkinPreviewImg.GW-Gladiator img{ top:-15px; } .SkinPreviewImg.GW-Northern img{ top:-20px; } .SkinPreviewImg.GW-Jungle img{ top:-20px; } .SkinPreviewImg.RC-Jungle img { top:-25px; }