Template:CoinS/styles.css

From JoJo's Bizarre Encyclopedia - JoJo Wiki
< Template:CoinS
Revision as of 07:12, 6 August 2023 by Vish (talk | contribs)
Jump to navigation Jump to search
.zoomMedal img { width: 77px !IMPORTANT; height: 77px !IMPORTANT;}
.zoomMedal.SPanimation { width: 77px !IMPORTANT; height: 77px !IMPORTANT}
.zoomMedal.floatleft { margin: 0 !important;}
.zoomIcon img { width: 30px !IMPORTANT; height: auto}
.zoomLinkSkill img { width: 63px !IMPORTANT; height: 63px !IMPORTANT}

.ss-parent div.zoomMedal img, .ss-parent div.zoomMedal.SPanimation {animation: reversescale .2s ease-in-out forwards, SP 7s steps(4) infinite;}

.ss-parent:hover div.zoomMedal img, .ss-parent:hover div.zoomMedal.SPanimation {
	z-index:3;
	animation: scale .2s ease-in-out forwards, SP 7s steps(4) infinite;
}

.SPanimation {
	background: url('https://static.jojowiki.com/images/9/9f/latest/20230806064102/SPShiny.png') left center;
	background-size: cover;
}

.zoomMedal.SPanimation:hover {
    animation: SP 7s steps(4) infinite, reversescale .2s ease-in-out forwards !IMPORTANT;
}

.zoomIcon {display: inline;}
.zoomIcon img {animation: reversescaleIcon .2s ease-in-out forwards;}
.zoomIcon:hover img {animation: scaleIcon .2s ease-in-out forwards; cursor:none;}

.containerMedals {display: flow-root; width: 100%;margin: 3px 0 3px 0;}
.containerMedals:hover {background: transparent}

.ss-parent:hover > .ss-hideicon {
	display: none;
}

/* Animations */
@keyframes spin { 100% { transform:rotate(360deg); } }
@keyframes scale { from {transform: scale(1);} to { transform: scale(1.7); }}
@keyframes reversescale { from {transform: scale(1.7);} to { transform: scale(1); }}
@keyframes scaleIcon { from {transform: scale(1);} to { transform: scale(3.5); }}
@keyframes reversescaleIcon { from {transform: scale(3.5);} to { transform: scale(1); }}
@keyframes zoomIn { from {transform: scale(0.5);} to { transform: scale(1); }}
@keyframes zoomOut { from {transform: scale(1);} to { transform: scale(0.5); }}

@keyframes scaleLS { from {transform: scale(0.82);} to { transform: scale(1.7); }}
@keyframes reversescaleLS { from {transform: scale(1.7);} to { transform: scale(0.82); }}

@keyframes SP {
	from,to	{ }
	90%,95% {background-position:0px 0px}
	95%,100%{background-position:-308px 0px}
}