MediaWiki:Gadget-clippy.css: Difference between revisions

From RuneRealm Wiki
Jump to navigation Jump to search
Browse history interactively
Content added Content deleted
(Created page with "@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;...")
 
No edit summary
Tag: Reverted
Line 1: Line 1:
@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;}
@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;
}

Revision as of 17:12, 17 October 2024

@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;}
Retrieved from "https://wiki.runerealm.org/index.php?title=MediaWiki:Gadget-clippy.css&oldid=38900"