MediaWiki:Gadget-EasterAddons.css

/* The following is for the easteregg code */ .easteregg-canvas { top: 0; left: 0; width: 100%; height: 0; z-index: 3; position: fixed; } .easteregg-canvas.debug-mode { z-index: 999; } /* Sprites */ .easteregg-sprite { background-size: var(--easteregg-sprite-size) var(--easteregg-sprite-size); background-repeat: no-repeat; height: var(--easteregg-sprite-size); width: var(--easteregg-sprite-size); display: none; position: fixed; z-index: 1; } .easteregg-sprite.active { display: block; } .easteregg-sprite.egg1 { background-image: url(https://raw.githubusercontent.com/skyblock-wiki/wiki-assets/main/images/egg-1.png); background-position: 50%; animation: easter-anim1a 3s forwards, easter-anim1b 1s 7s forwards; } .easteregg-sprite.egg2 { background-image: url(https://raw.githubusercontent.com/skyblock-wiki/wiki-assets/main/images/egg-2.png); background-position-y: 100px; animation: easter-anim2 8s; } .easteregg-sprite.egg3 { background-image: url(https://raw.githubusercontent.com/skyblock-wiki/wiki-assets/main/images/egg-3.gif); background-position-y: 100px; animation: easter-anim2 8s; } .easteregg-sprite.egg4 { background-image: url(https://raw.githubusercontent.com/skyblock-wiki/wiki-assets/main/images/egg-4.png); animation: easter-anim3 8s forwards; } .easteregg-sprite.egg5 { background-image: url(https://raw.githubusercontent.com/skyblock-wiki/wiki-assets/main/images/egg-5.png); animation: 8s ease-in-out forwards easter-anim4; } .easteregg-sprite.egg6 { background-image: url(https://raw.githubusercontent.com/skyblock-wiki/wiki-assets/main/images/egg-6.png); background-position: 50%; animation: easter-anim1a 3s forwards, easter-anim6b 1s 7s forwards; } .easteregg-sprite.gifeggs { /* background image needs to be inserted with script to play correctly */ animation: easter-animgifs 12s forwards; background-position-y: 100px; } .easteregg-sprite.animate { display: block; opacity: 0; animation: easterEggAnimation var(--easteregg-animation-time) infinite; } /* Animations */ @keyframes easter-anim1a { 0% {background-size: 0 0;} 0%, 30%, 39%, 45%, 51%, 57%, 62%, 66%, 100%, 87% {transform: translateY(0);} 20%, 25% {transform: translateY(-75px);} 36% {transform: translateY(-32px);} 42% {transform: translateY(-12px);} 48% {transform: translateY(-10px);} 54% {transform: translateY(-7px);} 60% {transform: translateY(-3px);} 64% {transform: translateY(-2px);} 68% {transform: translateY(-1px);} 20%, 87% {background-size: 100px 100px;} } @keyframes easter-anim1b { 0%, 68% {background-position-y: 0px;} 68% {transform: translateX(-100%) rotate(-120deg);} 75% {transform: translateX(-120%) rotate(-180deg);} 80%, 100% {background-position-y: -100px;} 100% {transform: translateX(-120%) translateY(100%) rotate(-180deg);} } @keyframes easter-anim2 { 0%, 100% {transform: scale(70%);} 12%, 88% {transform: scale(100%);} 8%, 92% {background-position-y: 0px;} } @keyframes easter-anim3 { 0%, 100% {opacity: 0;} 12%, 88% {opacity: 1;} 0% { transform: translateX(-100%) rotate(-120deg); } 10%, 90% { transform: translateX(0) rotate(0); } 100% { transform: translateX(100%) rotate(120deg); } } @keyframes easter-anim4 { 0%, 100% {opacity: 0;} 12%, 94% {opacity: 1;} 0%, 20%, 40%, 60%, 80%, 100% {transform: translateY(-50px);} 10%, 30%, 50%, 70%, 90% {transform: translateY(0);} } @keyframes easter-anim6b { 100% {background-size: 0 0;} } @keyframes easter-animgifs { 0% {transform: scale(70%);} 12%, 100% {transform: scale(100%);} 8%, 92% {background-position-y: 0px;} } /* Debug */ .easteregg-debug-area { opacity: .5; position: fixed; z-index: 999; } .easteregg-bound-debug { background-color: blueviolet; } .easteregg-border-debug { background-color: lightskyblue; } .easteregg-region-debug { background-color: darkcyan; }