Difference between revisions of "User:Wookipan/common.css"
(👀🎄) |
|||
Line 55: | Line 55: | ||
pointer-events: none; | pointer-events: none; | ||
} | } | ||
+ | |||
+ | |||
+ | /******* START MAIN PAGE EVENT SMISSMAS *******/ | ||
+ | |||
+ | .mp-event-text-smissmas { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | display: flex; | ||
+ | justify-content: center; | ||
+ | align-items: center; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | color: #fff; | ||
+ | font-family: 'TF2 Secondary', sans-serif; | ||
+ | font-size: 3vw; | ||
+ | font-weight: 600; | ||
+ | text-shadow: 2px -2px 0 #E91E63, -2px 2px 0 #E91E63, 2px 2px 0 #E91E63; | ||
+ | pointer-events: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | .mp-event-smissmas.festive-wire { | ||
+ | position: absolute; | ||
+ | top: 5px; | ||
+ | width: 100%; | ||
+ | height: 5px; | ||
+ | margin: 0; | ||
+ | text-align: center; | ||
+ | white-space: nowrap; | ||
+ | pointer-events: none; | ||
+ | box-shadow: inset 0px 0px 1px 1px rgb(0, 0, 0); | ||
+ | z-index: 1; | ||
+ | } | ||
+ | |||
+ | .mp-event-smissmas .light-group { | ||
+ | display: inline-block; | ||
+ | |||
+ | } | ||
+ | |||
+ | .mp-event-smissmas .light-group:first-child .lightbulb:first-child { | ||
+ | margin-left: 50px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .mp-event-smissmas .lightbulb { | ||
+ | position: relative; | ||
+ | display: inline-block; | ||
+ | width: 10px; | ||
+ | height: 30px; | ||
+ | border-radius: 50%; | ||
+ | margin: 5px 50px 0 0; | ||
+ | background: #fff; | ||
+ | } | ||
+ | |||
+ | .mp-event-smissmas .lightbulb:before { | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | display: block; | ||
+ | margin: -1px; | ||
+ | width: 12px; | ||
+ | height: 10px; | ||
+ | border-radius: 2px; | ||
+ | } | ||
+ | |||
+ | .mp-event-smissmas.festive-wire, | ||
+ | .mp-event-smissmas .lightbulb:before { | ||
+ | background-color: #3E5D31; | ||
+ | } | ||
+ | |||
+ | .mp-event-smissmas .light-group.even .lightbulb { | ||
+ | animation: 1.5s both light-group-even-flash-even infinite; | ||
+ | -webkit-animation: 1.5s both light-group-even-flash-even infinite; | ||
+ | } | ||
+ | |||
+ | .mp-event-smissmas .light-group.even .lightbulb:nth-child(odd) { | ||
+ | animation-name: light-group-even-flash-odd; | ||
+ | -webkit-animation-name: light-group-even-flash-odd; | ||
+ | } | ||
+ | |||
+ | .mp-event-smissmas .light-group.odd .lightbulb { | ||
+ | animation: 1.5s both light-group-odd-flash-even infinite; | ||
+ | -webkit-animation: 1.5s both light-group-odd-flash-even infinite; | ||
+ | } | ||
+ | |||
+ | .mp-event-smissmas .light-group.odd .lightbulb:nth-child(odd) { | ||
+ | animation-name: light-group-odd-flash-odd; | ||
+ | -webkit-animation-name: light-group-odd-flash-odd; | ||
+ | } | ||
+ | |||
+ | /* Festive lights animation */ | ||
+ | @keyframes light-group-even-flash-even { | ||
+ | 50% { | ||
+ | background: rgb(0, 190, 255); | ||
+ | box-shadow: 0px 2px 20px 4px rgba(0, 190, 255); | ||
+ | } | ||
+ | |||
+ | 0%, | ||
+ | 100% { | ||
+ | background: rgb(20, 98, 152, .5); | ||
+ | box-shadow: 0px 2px 20px 4px rgba(20, 98, 152, .5); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @keyframes light-group-even-flash-odd { | ||
+ | 50% { | ||
+ | background: rgba(0, 255, 0); | ||
+ | box-shadow: 0px 2px 20px 4px rgba(0, 255, 0); | ||
+ | } | ||
+ | |||
+ | 0%, | ||
+ | 100% { | ||
+ | background: rgba(20, 163, 49, .5); | ||
+ | box-shadow: 0px 2px 20px 4px rgba(20, 163, 49, .5); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | @keyframes light-group-odd-flash-even { | ||
+ | |||
+ | 0%, | ||
+ | 100% { | ||
+ | background: rgb(255, 0, 61); | ||
+ | box-shadow: 0px 2px 20px 4px rgba(255, 0, 61); | ||
+ | } | ||
+ | |||
+ | 50% { | ||
+ | background: rgb(110, 25, 45, .5); | ||
+ | box-shadow: 0px 2px 20px 4px rgba(110, 25, 45, .5); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @keyframes light-group-odd-flash-odd { | ||
+ | |||
+ | 0%, | ||
+ | 100% { | ||
+ | background: rgb(255, 198, 0); | ||
+ | box-shadow: 0px 2px 20px 4px rgba(255, 198, 0); | ||
+ | } | ||
+ | |||
+ | 50% { | ||
+ | background: rgb(100, 84, 26, .5); | ||
+ | box-shadow: 0px 2px 20px 4px rgba(100, 84, 26, .5); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /* WebKit animation support */ | ||
+ | @-webkit-keyframes light-group-even-flash-even { | ||
+ | 50% { | ||
+ | background: rgb(0, 190, 255); | ||
+ | box-shadow: 0px 2px 20px 4px rgba(0, 190, 255); | ||
+ | } | ||
+ | |||
+ | 0%, | ||
+ | 100% { | ||
+ | background: rgb(20, 98, 152, .5); | ||
+ | box-shadow: 0px 2px 20px 4px rgba(20, 98, 152, .5); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @-webkit-keyframes light-group-even-flash-odd { | ||
+ | 50% { | ||
+ | background: rgba(0, 255, 0); | ||
+ | box-shadow: 0px 2px 20px 4px rgba(0, 255, 0); | ||
+ | } | ||
+ | |||
+ | 0%, | ||
+ | 100% { | ||
+ | background: rgba(20, 163, 49, .5); | ||
+ | box-shadow: 0px 2px 20px 4px rgba(20, 163, 49, .5); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | @-webkit-keyframes light-group-odd-flash-even { | ||
+ | |||
+ | 0%, | ||
+ | 100% { | ||
+ | background: rgb(255, 0, 61); | ||
+ | box-shadow: 0px 2px 20px 4px rgba(255, 0, 61); | ||
+ | } | ||
+ | |||
+ | 50% { | ||
+ | background: rgb(110, 25, 45, .5); | ||
+ | box-shadow: 0px 2px 20px 4px rgba(110, 25, 45, .5); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @-webkit-keyframes light-group-odd-flash-odd { | ||
+ | |||
+ | 0%, | ||
+ | 100% { | ||
+ | background: rgb(255, 198, 0); | ||
+ | box-shadow: 0px 2px 20px 4px rgba(255, 198, 0); | ||
+ | } | ||
+ | |||
+ | 50% { | ||
+ | background: rgb(100, 84, 26, .5); | ||
+ | box-shadow: 0px 2px 20px 4px rgba(100, 84, 26, .5); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /******* END MAIN PAGE EVENT SMISSMAS *******/ |
Revision as of 23:02, 6 December 2022
/* Sparkly soldier */ li#pt-userpage { background-image: url('/w/images/9/92/Soldier_Login_WikiCap.gif') !important; } .lootbox { position: fixed; width: 10em; bottom: 2em; right: 5em; cursor: pointer; z-index: 1; } .apfools22 p { position: absolute; left: 1em; bottom: 0; width: 5em; font-size: 90px; font-style: italic; font-family: 'TF2'; text-transform: uppercase; z-index: 9999; } .thewikiskeleton-bg { position: absolute; width: 100%; height: 100%; background: url('/w/images/8/87/User_Wookipan_bg_fire.gif') no-repeat; background-size: cover; opacity: 0.8; z-index: 999; } .thewikiskeleton { position: absolute; top: 50%; left: 0; right: 0; width: 35em; height: 50em; margin: 0 auto 0 auto; transform: translateY(-50%); background: url('/w/images/4/4c/User_Wookipan_thewikiskeleton.png') no-repeat; background-size: contain; z-index: 9999; } .apfools22 p, .thewikiskeleton-bg, .thewikiskeleton { display: none; pointer-events: none; } /******* START MAIN PAGE EVENT SMISSMAS *******/ .mp-event-text-smissmas { position: absolute; top: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; color: #fff; font-family: 'TF2 Secondary', sans-serif; font-size: 3vw; font-weight: 600; text-shadow: 2px -2px 0 #E91E63, -2px 2px 0 #E91E63, 2px 2px 0 #E91E63; pointer-events: none; } .mp-event-smissmas.festive-wire { position: absolute; top: 5px; width: 100%; height: 5px; margin: 0; text-align: center; white-space: nowrap; pointer-events: none; box-shadow: inset 0px 0px 1px 1px rgb(0, 0, 0); z-index: 1; } .mp-event-smissmas .light-group { display: inline-block; } .mp-event-smissmas .light-group:first-child .lightbulb:first-child { margin-left: 50px; } .mp-event-smissmas .lightbulb { position: relative; display: inline-block; width: 10px; height: 30px; border-radius: 50%; margin: 5px 50px 0 0; background: #fff; } .mp-event-smissmas .lightbulb:before { content: ''; position: absolute; top: 0; left: 0; display: block; margin: -1px; width: 12px; height: 10px; border-radius: 2px; } .mp-event-smissmas.festive-wire, .mp-event-smissmas .lightbulb:before { background-color: #3E5D31; } .mp-event-smissmas .light-group.even .lightbulb { animation: 1.5s both light-group-even-flash-even infinite; -webkit-animation: 1.5s both light-group-even-flash-even infinite; } .mp-event-smissmas .light-group.even .lightbulb:nth-child(odd) { animation-name: light-group-even-flash-odd; -webkit-animation-name: light-group-even-flash-odd; } .mp-event-smissmas .light-group.odd .lightbulb { animation: 1.5s both light-group-odd-flash-even infinite; -webkit-animation: 1.5s both light-group-odd-flash-even infinite; } .mp-event-smissmas .light-group.odd .lightbulb:nth-child(odd) { animation-name: light-group-odd-flash-odd; -webkit-animation-name: light-group-odd-flash-odd; } /* Festive lights animation */ @keyframes light-group-even-flash-even { 50% { background: rgb(0, 190, 255); box-shadow: 0px 2px 20px 4px rgba(0, 190, 255); } 0%, 100% { background: rgb(20, 98, 152, .5); box-shadow: 0px 2px 20px 4px rgba(20, 98, 152, .5); } } @keyframes light-group-even-flash-odd { 50% { background: rgba(0, 255, 0); box-shadow: 0px 2px 20px 4px rgba(0, 255, 0); } 0%, 100% { background: rgba(20, 163, 49, .5); box-shadow: 0px 2px 20px 4px rgba(20, 163, 49, .5); } } @keyframes light-group-odd-flash-even { 0%, 100% { background: rgb(255, 0, 61); box-shadow: 0px 2px 20px 4px rgba(255, 0, 61); } 50% { background: rgb(110, 25, 45, .5); box-shadow: 0px 2px 20px 4px rgba(110, 25, 45, .5); } } @keyframes light-group-odd-flash-odd { 0%, 100% { background: rgb(255, 198, 0); box-shadow: 0px 2px 20px 4px rgba(255, 198, 0); } 50% { background: rgb(100, 84, 26, .5); box-shadow: 0px 2px 20px 4px rgba(100, 84, 26, .5); } } /* WebKit animation support */ @-webkit-keyframes light-group-even-flash-even { 50% { background: rgb(0, 190, 255); box-shadow: 0px 2px 20px 4px rgba(0, 190, 255); } 0%, 100% { background: rgb(20, 98, 152, .5); box-shadow: 0px 2px 20px 4px rgba(20, 98, 152, .5); } } @-webkit-keyframes light-group-even-flash-odd { 50% { background: rgba(0, 255, 0); box-shadow: 0px 2px 20px 4px rgba(0, 255, 0); } 0%, 100% { background: rgba(20, 163, 49, .5); box-shadow: 0px 2px 20px 4px rgba(20, 163, 49, .5); } } @-webkit-keyframes light-group-odd-flash-even { 0%, 100% { background: rgb(255, 0, 61); box-shadow: 0px 2px 20px 4px rgba(255, 0, 61); } 50% { background: rgb(110, 25, 45, .5); box-shadow: 0px 2px 20px 4px rgba(110, 25, 45, .5); } } @-webkit-keyframes light-group-odd-flash-odd { 0%, 100% { background: rgb(255, 198, 0); box-shadow: 0px 2px 20px 4px rgba(255, 198, 0); } 50% { background: rgb(100, 84, 26, .5); box-shadow: 0px 2px 20px 4px rgba(100, 84, 26, .5); } } /******* END MAIN PAGE EVENT SMISSMAS *******/