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; }

div.weblinks img:active { -webkit-filter: invert(100%); /* Safari */ filter: invert(100%); }

/** For Template:Update **/ /* in-out animation */ @keyframes inout { 0%   {font-size: 16px;} 50%  {font-size: 14px;} 100% {font-size: 16px;} }

/* apply in-out animation to span update class */ .update { color: red; text-shadow: 0 0 3px orange, 0 0 5px yellow; display: inline-block; height: 16px; animation-name: inout; animation-duration: 1.5s; animation-iteration-count: infinite; animation-timing-function: 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-name: spin; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: linear; }