Difference between revisions of "MediaWiki:Common.js"

From Morloch Wiki
Jump to: navigation, search
Line 7: Line 7:
  
 
}());
 
}());
 +
 +
body {
 +
  background: #e6e6e6;
 +
}
 +
 +
.pin {
 +
  width: 30px;
 +
  height: 30px;
 +
  border-radius: 50% 50% 50% 0;
 +
  background: #00cae9;
 +
  position: absolute;
 +
  transform: rotate(-45deg);
 +
  left: 50%;
 +
  top: 50%;
 +
  margin: -20px 0 0 -20px;
 +
}
 +
.pin:after {
 +
  content: "";
 +
  width: 14px;
 +
  height: 14px;
 +
  margin: 8px 0 0 8px;
 +
  background: #e6e6e6;
 +
  position: absolute;
 +
  border-radius: 50%;
 +
}
 +
 +
.bounce {
 +
  animation-name: bounce;
 +
  animation-fill-mode: both;
 +
  animation-duration: 1s;
 +
}
 +
 +
.pulse {
 +
  background: #d6d4d4;
 +
  border-radius: 50%;
 +
  height: 14px;
 +
  width: 14px;
 +
  position: absolute;
 +
  left: 50%;
 +
  top: 50%;
 +
  margin: 11px 0px 0px -12px;
 +
  transform: rotateX(55deg);
 +
  z-index: -2;
 +
}
 +
.pulse:after {
 +
  content: "";
 +
  border-radius: 50%;
 +
  height: 40px;
 +
  width: 40px;
 +
  position: absolute;
 +
  margin: -13px 0 0 -13px;
 +
  animation: pulsate 1s ease-out;
 +
  animation-iteration-count: infinite;
 +
  opacity: 0;
 +
  box-shadow: 0 0 1px 2px #00cae9;
 +
  animation-delay: 1.1s;
 +
}
 +
 +
@keyframes pulsate {
 +
  0% {
 +
    transform: scale(0.1, 0.1);
 +
    opacity: 0;
 +
  }
 +
 +
  50% {
 +
    opacity: 1;
 +
  }
 +
 +
  100% {
 +
    transform: scale(1.2, 1.2);
 +
    opacity: 0;
 +
  }
 +
}
 +
 +
@keyframes bounce {
 +
  0% {
 +
    opacity: 0;
 +
    transform: translateY(-2000px) rotate(-45deg);
 +
  }
 +
 +
  60% {
 +
    opacity: 1;
 +
    transform: translateY(30px) rotate(-45deg);
 +
  }
 +
 +
  80% {
 +
    transform: translateY(-10px) rotate(-45deg);
 +
  }
 +
 +
  100% {
 +
    transform: translateY(0) rotate(-45deg);
 +
  }
 +
}

Revision as of 17:18, 22 September 2017

/* Any JavaScript here will be loaded for all users on every page load. */

$(function () {

  var myElement = document.getElementById('cf');
  myElement.innerHTML = '<img src="http://morloch.shadowbaneemulator.com/images/6/6b/Whitemapvor.png">';

}());

body {
  background: #e6e6e6;
}

.pin {
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  background: #00cae9;
  position: absolute;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -20px 0 0 -20px;
}
.pin:after {
  content: "";
  width: 14px;
  height: 14px;
  margin: 8px 0 0 8px;
  background: #e6e6e6;
  position: absolute;
  border-radius: 50%;
}

.bounce {
  animation-name: bounce;
  animation-fill-mode: both;
  animation-duration: 1s;
}

.pulse {
  background: #d6d4d4;
  border-radius: 50%;
  height: 14px;
  width: 14px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 11px 0px 0px -12px;
  transform: rotateX(55deg);
  z-index: -2;
}
.pulse:after {
  content: "";
  border-radius: 50%;
  height: 40px;
  width: 40px;
  position: absolute;
  margin: -13px 0 0 -13px;
  animation: pulsate 1s ease-out;
  animation-iteration-count: infinite;
  opacity: 0;
  box-shadow: 0 0 1px 2px #00cae9;
  animation-delay: 1.1s;
}

@keyframes pulsate {
  0% {
    transform: scale(0.1, 0.1);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}

@keyframes bounce {
  0% {
    opacity: 0;
    transform: translateY(-2000px) rotate(-45deg);
  }

  60% {
    opacity: 1;
    transform: translateY(30px) rotate(-45deg);
  }

  80% {
    transform: translateY(-10px) rotate(-45deg);
  }

  100% {
    transform: translateY(0) rotate(-45deg);
  }
}