MediaWiki:Gadget-clippy.css

@keyframes spinny {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}
 
.spinny {
    animation: 3s spinny linear infinite;
    animation-play-state: paused;
    display: inline-block;
}
 
.spinny.spinning {
    animation-play-state: running;
}

.infobox-monster {
  position: relative;
}

/* Borrowed from https://codepen.io/mdg445/pen/Jxgny */
.achievement-banner {
  box-sizing: border-box;
  opacity: 0;
  margin: 0 auto;
  font-size: 350%;
  width: 10em;
  color: #efefef;
  background: #3d4142;
  border-radius: 10em;
  position: fixed;
  padding: .125em;
  min-height: 1.5em;
  overflow: hidden;
  bottom: 50px;
  margin: 0 auto;
  margin-left: -5em;
  left: 50%;
}
.achievement-banner .achievement-icon {
  box-sizing: border-box;
  border-radius: 10em;
  position: relative;
  background: #000;
  border: .125em solid #656766;
  border-top-color: #45ca3d;
  height: 1.25em;
  width: 1.25em;
  transform: rotate(-45deg);
  z-index: 100;
}
.achievement-banner .achievement-icon .icon {
  box-sizing: border-box;
  display: block;
  border-radius: 10em;
  border: 4px solid #000;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  line-height: 1;
  z-index: 1000;
  transform: rotate(45deg);
}
.achievement-banner .achievement-icon .icon .icon-trophy {
  font-size: 75%;
  line-height: 1;
  position: relative;
  top: -.125em;
}
.achievement-banner .achievement-text {
  font-family: "Trebuchet MS";
  text-shadow: 0 2px 0 #000;
  position: absolute;
  top: .5em;
  left: 4em;
  font-size: 50%;
  line-height: 1;
  width: 400%;
}
.achievement-banner .achievement-notification {
  margin: 0;
}
.achievement-banner .achievement-name {
  margin: 0;
}

/* Generated content */
.achievement-banner .achievement-icon:before,
.achievement-banner .achievement-icon:after,
.achievement-banner .achievement-icon .icon:before,
.achievement-banner .achievement-icon .icon:after {
  content: "";
  display: block;
  position: absolute;
}

.achievement-banner .achievement-icon:before{
  border-radius: 12em;
  z-index: -100;
  background: transparent;
  border: 4px solid #000;
  top: -.175em;
  left: -.175em;
  right: -.175em;
  bottom: -.175em;
  transform: rotate(45deg);
}

.achievement-banner .achievement-icon .icon:before,
.achievement-banner .achievement-icon .icon:after {
  width: 150%;
  height: .125em;
  background: #000;
  border-radius: .05em;
  z-index: -10;
  top: 42.5%;
  left: -25%;
}

.achievement-banner .achievement-icon .icon:before {
  transform: rotate(90deg);
}

@keyframes open-close-banner {
  0% {width: 1.5em; opacity: 0;}
  2% {width: 1.5em; opacity: 1;}
  8% {width: 10em;}
  80% {width: 10em;}
  90% {
    width: 1.5em; 
    opacity: 1;
    transform: rotate(0deg);
  }
  98% {
    width: 1.5em;
    transform: rotate(720deg);
  }
  100% {width: 1.5em; opacity: 0;}
}

@keyframes border-top-pulse {
  0% {border-top-color: #656766;}
  40% {border-top-color: #ffffff;}
  80% {border-top-color: #00ff00;}
  100% {border-top-color: #45ca3d;}
}
@keyframes fade-in-text {
  0% {opacity: 0;}
  80% {opacity: 0;}
  100% {opacity: 1;}
}
.achievement-banner {
  animation: open-close-banner 5s 1;
}

.achievement-banner .achievement-icon {
  /* Make border-top pulse. */
  animation: border-top-pulse 1.25s 2;
}

.achievement-banner .achievement-text {
  animation: fade-in-text .5s 1;
}

@supports (display: grid) {
  .apr-achievement-container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(35em, 1fr));
  }
  
  .apr-achievement-container .apr-achievement {
    margin: 0;
  }
}

.apr-achievement {
  display: flex;
  align-items: center;
  
  color: white;
  border: 4px solid black;
  border-image: url('/images/Clippy_Achievement_background.png?a8104') 4 fill repeat;
  margin: 4px 0;
  padding: .25em;
}

.apr-achievement:not(.achieved) > * {
  opacity: .5;
}

.apr-achievement-icon {
  width: 120px;
  height: 120px;
  margin: 0 1em 0 .5em;
}

.apr-achievement-icon .bumper {
  padding: 0;
}

.apr-achievement-icon img {
  width: 120px;
  height: 120px;
}

.apr-achievement-text {
  flex: 1;
  line-height: 1.5;
}

.apr-achievement-title {
  font-size: 1.25em;
  font-weight: bold;
}

.apr-achievement-filler {
  font-style: italic;
}

.apr-achievement-points {
  color: yellow;
  font-size: 1.15em;
  font-weight: bold;
  margin: 0 .5em 0 1em;
}

.apr-weapon-big {
  height: 40px;
}
.apr-weapon {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  float: left;
  border-style: dashed;
  border-width: 1px;
  background-color: rgb(255,255,255,0.5);
  padding-top: 4px;
}
.apr-weapon-icon {
 height: 30px;
}
.apr-weapon img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.apr-weapon-price {
  text-align: center;
}

@keyframes apr-hitsplat {
  0% {opacity: 1;}
  80% {opacity: 1;}
  100% {opacity: 0;}
}
img.apr-hitsplat {
  position:absolute;
  height:auto;
  width:auto;
  animation: apr-hitsplat 5s 1 forwards;
}

@keyframes apr-barrage {
  0% {opacity: 0;}
  33% {opacity: 1;}
  67% {opacity: 1;}
  100% {opacity: 0;}
}
.apr-barrage {
  animation: apr-barrage 1.8s 1 forwards;
}

.apr-cucco {
  background-color: rgba(255, 0, 0, 0.1);
}

.apr-prayer {
  width:34px;
  height:34px;
  bottom:56px;
  position:fixed;
  cursor:default;
  background-repeat: no-repeat;
  background-position: center;
}
.apr-prayer-highlight {
  background-image:url(/images/Activated_prayer.png?2eb10);
  opacity:0;
}
.apr-prayer-background {
  width:164px;
  height:92px;
  bottom:28px;
  right:28px;
  position:fixed;
  background-color:rgb(62,53,41);
}

@keyframes apr-ttj-ranged {
  0% {opacity: 0;}
  25% {opacity: 1;}
  75% {opacity: 1;}
  100% {opacity: 0;}
}
.apr-ttj-ranged {
  animation: apr-ttj-ranged 0.6s 1 forwards;
}

.apr-invader {
  background-color: rgba(128, 128, 128, 0.3);
  position:fixed;
}
.apr-invader-mob {
  position:fixed;
}

.apr-hydra {
  position:fixed;
  left:0px;
  top:0px;
}
.apr-hydra-vent {
  position:fixed;
  width:250px;
  height:250px;
}
.apr-hydra-ranged {
  width:80px;
}
.apr-hydra-magic {
  width:50px;
}
@keyframes apr-hydra-poison {
  0% {opacity: 0;}
  6% {opacity: 1;}
  94% {opacity: 1;}
  100% {opacity: 0;}
}
.apr-hydra-poison {
  animation: apr-hydra-poison 10s 1 forwards;
  background-color: rgba(255, 0, 0, 0.1);
}
.apr-hydra-poison.apr-burndone {
  animation-delay: -0.6s;
}

@keyframes apr-hydra-burn {
  0% {opacity: 0;}
  3% {opacity: 1;}
  94% {opacity: 1;}
  100% {opacity: 0;}
}
.apr-hydra-burn {
  animation: apr-hydra-burn 10s 1 forwards;
  background-color: rgba(255, 0, 0, 0.1);
}
.apr-hydra-burn.apr-burndone {
  animation-delay: -0.3s;
}