User:OH&S/wikia.css

/* Sandbox for CSS code */

/** sharpen class **/ .sharpen img { max-width: 100%; height: auto; }

/** For Template:Weblinks **/ div.weblinks { display: inline-flex; width: 169px; }

div.weblinks img { vertical-align: middle; transition: opacity 0.5s; -webkit-filter: invert(0%); /* Safari */ filter: invert(0%); }

/* style properties for images in weblinks div on hover */ div.weblinks img:hover { opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ transition: opacity 0.5s; }

/* style properties for images in weblinks div on click */ div.weblinks img:active { -webkit-filter: invert(100%); /* Safari */ filter: invert(100%); }

/** For Template:Update **/ /* in-out animation */ @keyframes update { 0%   {color: red;text-shadow: 0 0 3px orange, 0 0 5px yellow;} 25%  {color: orange;text-shadow: 0 0 3px yellow, 0 0 5px red;} 50%  {color: yellow;text-shadow: 0 0 3px red, 0 0 5px orange;} 75%  {color: orange;text-shadow: 0 0 3px yellow, 0 0 5px red;} 100% {color: red;text-shadow: 0 0 3px orange, 0 0 5px yellow;} }

/* apply 'update' animation to span update class */ .update { animation: update 2s infinite linear; }

/** For spinning images **/ /* spin animation */ @keyframes spin { from  	{transform: rotate(0deg);} to 		{transform: rotate(360deg);} }

/* apply spin animation to images in img-spin class containers*/ .img-spin img { animation: spin 10s infinite linear; }