MediaWiki:Gadget-clippy.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
@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;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
z-index: 100;
}
.achievement-banner .achievement-icon .icon {
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;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
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;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
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 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
@-webkit-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;
-webkit-transform: rotate(0deg);
}
98% {
width: 1.5em;
-webkit-transform: rotate(720deg);
}
100% {width: 1.5em; opacity: 0;}
}
@-moz-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;
-moz-transform: rotate(0deg);
}
98% {
width: 1.5em;
-moz-transform: rotate(720deg);
}
100% {width: 1.5em; opacity: 0;}
}
@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;}
}
@-webkit-keyframes border-top-pulse {
0% {border-top-color: #656766;}
40% {border-top-color: #ffffff;}
80% {border-top-color: #00ff00;}
100% {border-top-color: #45ca3d;}
}
@-moz-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 border-top-pulse {
0% {border-top-color: #656766;}
40% {border-top-color: #ffffff;}
80% {border-top-color: #00ff00;}
100% {border-top-color: #45ca3d;}
}
@-webkit-keyframes fade-in-text {
0% {opacity: 0;}
80% {opacity: 0;}
100% {opacity: 1;}
}
@-moz-keyframes fade-in-text {
0% {opacity: 0;}
80% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fade-in-text {
0% {opacity: 0;}
80% {opacity: 0;}
100% {opacity: 1;}
}
.achievement-banner {
-webkit-animation: open-close-banner 5s 1;
-moz-animation: open-close-banner 5s 1;
animation: open-close-banner 5s 1;
}
.achievement-banner .achievement-icon {
/* Make border-top pulse. */
-webkit-animation: border-top-pulse 1.25s 2;
-moz-animation: border-top-pulse 1.25s 2;
animation: border-top-pulse 1.25s 2;
}
.achievement-banner .achievement-text {
-webkit-animation: fade-in-text .5s 1;
-moz-animation: fade-in-text .5s 1;
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('https://i.imgur.com/v6BL2be.png') 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/f/f2/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;
}