MediaWiki:Wikia.css

@import url('https://fonts.googleapis.com/css?family=Rubik:700&display=swap'); /** Main Styling **/ /* Site-wide font styling */ .wds-tabs, .wds-community-header__sitename, .page-header__title, .pi-title, .wds-button, .pi-section-label, .mw-headline, .wds-community-header__counter { font-family: "Rubik"; font-weight: 700; } .wds-community-header__wordmark { transition: 0.6s; } .wds-community-header__wordmark:hover { image-rendering: crisp-edges; -webkit-filter: drop-shadow(0 0 6px #f4ffc4); filter: drop-shadow(0 0 6px #f4ffc4); transition: ALL 0.6s ease; } .UserProfileMasthead .masthead-info-lower:before { display: none; /* gets rid of the annoying triangle on user pages */ } .wikia-photogallery-add { opacity: 20%; /* makes it not as visible so it doesn't look bad */ transition: ALL 0.5s; } .wikia-photogallery-add:hover { opacity: 100%; } /* Navigation */ /* Top Navigation */ .wds-icon-tiny { transition: transform 0.2s; } /* MP Navigation */ .nav-label { transition: 0.6s; } .nav-label:hover { image-rendering: crisp-edges; -webkit-filter: drop-shadow(0 0 15px #000); filter: drop-shadow(0 0 15px #000); transition: ALL 0.6s ease; } /** Infobox Setup **/ .pi-secondary-font { font-family: "Rubik"; font-weight: 700; } /* Keyframes */ @keyframes rainbow{ 0%{color: #ec59ee;} 20%{color: #ff6d72;} 40%{color: #f1d04c;} 60%{color: #7fee69;} 80%{color: #55d5ee;} 100%{color: #596df9;} } @-webkit-keyframes rainbow{ 0%{color: #ec59ee;} 20%{color: #ff6d72;} 40%{color: #f1d04c;} 60%{color: #7fee69;} 80%{color: #55d5ee;} 100%{color: #596df9;} } @keyframes rainbowPet { from { -webkit-filter:sepia(100%) hue-rotate(10deg) saturate(400%); filter:sepia(100%) hue-rotate(10deg) saturate(400%); }   to { -webkit-filter:sepia(100%) hue-rotate(360deg) saturate(400%); filter:sepia(100%) hue-rotate(360deg) saturate(400%); } } @-webkit-keyframes rainbowPet { from { -webkit-filter:sepia(100%) hue-rotate(10deg) saturate(400%); } to { -webkit-filter:sepia(100%) hue-rotate(360deg) saturate(400%); } } /* Rarities */ .basic { font-weight: 700; font-size: 20px; font-family: "Rubik"; -webkit-text-stroke: 0.8px black; color: #7a7a7a; } .rare { font-weight: 700; font-size: 20px; font-family: "Rubik"; -webkit-text-stroke: 0.8px black; color: #ff5050; } .epic { font-weight: 700; font-size: 20px; font-family: "Rubik"; -webkit-text-stroke: 0.8px black; color: #ffc832; } .unobtainable { font-weight: 700; font-size: 20px; font-family: "Rubik"; -webkit-text-stroke: 0.8px black; color: #271a2f; } .legendary { -webkit-animation: rainbow 5s infinite; -moz-animation: rainbow 5s infinite; -ms-animation: rainbow 5s infinite; animation: rainbow 5s infinite; font-weight: 700; font-size: 20px; -webkit-text-stroke: 0.8px black; font-family: "Rubik" } /* Other */ .level { font-weight: 700; font-size: 20px; font-family: "Rubik"; color: #3BB1FC; } .strength { font-weight: 700; font-size: 20px; font-family: "Rubik"; color: #ff8119; } .strength-s { font-weight: 700; font-size: 14px; font-family: "Rubik"; color: #ff8119; } .diamond { font-weight: 700; font-size: 20px; font-family: "Rubik"; -webkit-text-stroke: 0.8px black; color: #5ef6fc; } .coin { font-weight: 700; font-size: 20px; font-family: "Rubik"; -webkit-text-stroke: 0.8px black; color: #f2c337; } /* Custom table thing */ .ps2-wiki-table { left: 0%; } /** Pet Tables **/ /* Pet Info/Egg Name on hover */ .img-pet-table .pet-name { font-family: "Rubik"; font-weight: 700; font-size: 20px; } .img-pet-table .text-a { visibility: hidden; z-index: 2; position: absolute; font-family: "Rubik"; font-weight: 700; box-shadow: 0px 0px 0px 1.2px #000; border-radius: 5px; padding-left: 3px; padding-right: 3px; padding-bottom: 1px; background-color: #fff; text-align: center; } .img-pet-table:hover .text-a { visibility: visible; } /* Upgrade Difficulty */ .super-easy { font-weight: 700; font-size: 20px; font-family: "Rubik"; -webkit-text-stroke: 0.8px black; color: #30D630; } .easy { font-weight: 700; font-size: 20px; font-family: "Rubik"; -webkit-text-stroke: 0.8px black; color: #3BB1FC; } .medium { font-weight: 700; font-size: 20px; font-family: "Rubik"; -webkit-text-stroke: 0.8px black; color: #AB3AFC; } .hard { font-weight: 700; font-size: 20px; font-family: "Rubik"; -webkit-text-stroke: 0.8px black; color: #FC9B3A; } .insane { font-weight: 700; font-size: 20px; font-family: "Rubik"; -webkit-text-stroke: 0.8px black; color: #FC3C3C; } .impossible1 { -webkit-animation: rainbow 5s infinite; -moz-animation: rainbow 5s infinite; -ms-animation: rainbow 5s infinite; animation: rainbow 5s infinite; font-weight: 700; font-size: 20px; -webkit-text-stroke: 0.8px black; font-family: "Rubik" } .rainbowPet { -webkit-animation: rainbowPet 1.5s steps(36) infinite; -moz-animation: rainbowPet 1.5s steps(36) infinite; -ms-animation: rainbowPet 1.5s steps(36) infinite; animation: rainbowPet 1.5s steps(36) infinite; }