MediaWiki:Mainpage.css

/* Mainpage Boxes Core Designs */ .mp-content-box { background: #efefef !important; border-radius: 35px !important; margin: 60px auto 20px !important; padding: 40px 25px 25px !important; position: relative !important; } .mp-content-box-h { background: linear-gradient(90deg, #8fd87d 0, #24ccaa 80%); border-radius: 35px; color: white; text-align: center; font-family: Roboto, Helvetica !important; font-weight: 300 !important; text-transform: uppercase !important; font-size: 24pt !important; line-height: 40px !important; padding: 10px 25px !important; position: absolute !important; left: 0; margin-left: auto; margin-right: auto; right: 0; top: -30px !important; min-width: 225px !important; max-width: fit-content !important; } .mp-content-box-h a { color: white; text-decoration: none !important; } .mp-content-box-h2 { color: black; font-family: Roboto; font-size: 26px; line-height: 30px; font-weight: 100 !important; text-transform: uppercase; text-align: center; padding: 10px 0; border-bottom: solid 2px rgba(0,0,0,0.4); margin: 0 auto; } .mp-content-box-h2 a { color: black !important; } /* Mainpage Welcome Box */ .mp-box-welcome { background: radial-gradient(circle,rgba(0,0,0,0.69) 0,rgba(0,0,0,0.8) 50%),url(https://vignette.wikia.nocookie.net/pokemongo/images/5/5c/Anniversary_Artwork_2020.png/revision/latest?cb=20200707192824) no-repeat center center !important; background-size: 150%!important; box-shadow: inset 0 0 100px 25px rgba(0,0,0,0.55); padding: 10px 40px 60px; color: white; font-family: Lato; margin: 10px auto; border-bottom: 3px solid white; border-radius: 36px 36px 0 0; margin-bottom: 0; } .mp-box-welcome-h { color: white; text-align: center !important; font: 400 48px Roboto !important; text-transform: uppercase; padding: 15px 25px; border-radius: 50px; margin: 0 auto; max-width: fit-content !important; background: transparent; } .mp-box-welcome a, .mp-box-welcome b { color: #149aa0 !important; } .mp-box-welcome .mp-box-links { margin: 15px auto 0px; text-align: center; padding: 10px 0; background: #00000070; } .mp-box-welcome .mp-link { display: inline-block; margin: 0 10px; padding: 5px; } /* Mainpage Slider */ .mainpage-slider { margin: 40px auto !important; } .mainpage-slider .wikiaPhotoGallery-slider-body { background: transparent; border-radius: 25px; height: 360px !important; width: 585px !important; } .mainpage-slider .wikiaPhotoGallery-slider { height: 360px !important; width: 585px !important; margin: auto !important; top: 0 !important; } .mainpage-slider .wikiaPhotoGallery-slider-body .horizontal .wikiaPhotoGallery-slider-0 .nav { right: 202px; } .mainpage-slider .wikiaPhotoGallery-slider-body .horizontal .wikiaPhotoGallery-slider-1 .nav { right: 106px; } .mainpage-slider .wikiaPhotoGallery-slider-body .horizontal .wikiaPhotoGallery-slider-2 .nav { right: 10px; } .mainpage-slider .wikiaPhotoGallery-slider-body .horizontal .wikiaPhotoGallery-slider-3 .nav { display: none; } .mainpage-slider .wikiaPhotoGallery-slider-body .horizontal .nav img { border-radius: 25px; border: 0; margin-bottom: 10px; opacity: 0.75; } .mainpage-slider .wikiaPhotoGallery-slider-body .horizontal .nav.selected img { opacity: 1; } .mainpage-slider .description-background { background: black !important; height: 85px !important; opacity: 0.5 !important; } .mainpage-slider .description { margin: 10px 5px !important; } .mainpage-slider .description h2 { color: #c9efa9 !important; text-shadow: none !important; width: 350px !important; } .mainpage-slider .description .wikia-button { display: none; } /* Contents and Events Box */ .mp-content-box#Events, .mp-content-box#Contents { background: radial-gradient(circle, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, .7) 50%), url(https://vignette.wikia.nocookie.net/pokemongo/images/f/f8/Pokemon_Go_Live_Background.jpg) no-repeat center center fixed !important; padding: 60px 30px !important; } .mp-content-box#Contents { margin: 0 auto !important; border-bottom: 3px solid white; border-radius: 0 !important; } .mp-content-box#Events { margin: 0 auto 20px !important; border-radius: 0 0 36px 36px !important; } .mp-content-box#Contents .mp-content-box-h, .mp-content-box#Events .mp-content-box-h { border: 3px solid white; padding: 10px 40px !important; text-transform: uppercase !important; top: -34px !important; }

/** Pokémon Items **/ .mp-pokemon-item { display: inline-block; margin: 30px 10px; padding: 10px 20px; /*	background: rgba(255, 255, 255, .8); border-radius: 25px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 2px -2px rgba(0, 0, 0, 0.2); */ transition: 0.5s; position: relative; color: #266378 !important; width:300px; } .mp-pokemon-item img { transition: 0.5s; transform: translateZ(0); backface-visibility: hidden; } .mp-pokemon-item:hover img { -webkit-backface-visibility: hidden; -ms-transform: translateZ(0); /* IE 9 */ -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */ transform: translateZ(0); transition: 0.5s; transform: scale(1.09); } .mp-pokemon-item .pokemon-link { -webkit-font-smoothing: subpixel-antialiased; -webkit-backface-visibility: hidden; -ms-transform: translateZ(0); /* IE 9 */ -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */ transform: translateZ(0); backface-visibility: hidden; position: absolute; width:300px; text-align: center; transition: 0.5s; bottom: -5px; } .mp-pokemon-item .pokemon-link a { -webkit-font-smoothing: subpixel-antialiased; transform: translateZ(0); backface-visibility: hidden; color: white; font-family: Roboto; font-weight: 300; font-size: 34px; text-transform: uppercase; text-decoration: none !important; transition: 0.5s; text-shadow: 0 0 5px rgba(0, 0, 0, 1); } .mp-pokemon-item:hover .pokemon-link { -webkit-font-smoothing: subpixel-antialiased; transform: translateZ(0); backface-visibility: hidden; transform: scale(1.1); transition: 0.5s; } .mp-pokemon-item:hover .pokemon-link a { -webkit-font-smoothing: subpixel-antialiased; transform: translateZ(0); backface-visibility: hidden; transition: 0.5s; }

/** Content Items **/ .content-item { background: rgba(0, 0, 0, 0) !important; margin: 10px auto; padding: 10px; text-align: center; } .content-item-header { color: white; font-family: Roboto; font-size: 26px; line-height: 30px; font-weight: 100 !important; text-transform: uppercase; text-align: center; padding: 10px 0; border-bottom: solid 2px rgba(255,255,255,0.4); margin: 0 auto; } .content-item-header a { color: white !important; text-decoration: none !important; } .page-item { display: inline-block; margin: 10px; } .page-item a { color: white !important; font-family: Roboto; font-weight: 300; } .page-Current_events .mp-content-box#Events { margin-top: 15px !important; } .event-item { background: rgba(0, 0, 0, 0.5) !important; border-radius: 35px; box-shadow: inset 0 0 100px 25px rgba(0, 0, 0, 0.55); cursor: default; margin: 20px auto; padding: 10px 15px; } .mp-content-box .event-item:nth-child(2n+1) { background: rgba(12, 72, 84, 0.4) !important; } .mp-content-box#Events .event-item:first-child { margin-top: 0 !important; } .mp-content-box#Events .event-item:last-child { margin-bottom: 0 !important; } .event-item-header { color: white; font-family: Roboto; font-size: 26px; line-height: 30px; font-weight: 100 !important; text-transform: uppercase; text-align: center; padding: 10px 0; border-bottom: solid 2px rgba(255,255,255,0.4); margin: 10px auto; } .event-item-header a { color: white !important; } .event-item-time { color: white; padding: 5px; } .event-item-desc { color: white; padding: 5px; } .event-item-time a, .event-item-time b, .event-item-desc a, .event-item-desc b { color: #149aa0 !important; } .event-item-bonuses { color: white; padding: 5px; } .event-item-bonuses-header { font-family: Roboto; font-size: 16px; font-weight: bold; text-align: center; } .event-item-bonuses .mw-collapsible-toggle { cursor: pointer; display: block; float: none; position: relative; } .event-item-bonuses .mw-collapsible-toggle-collapsed { transform: rotate(0deg); transition: 0.2s; } .event-item-bonuses .mw-collapsible-toggle-expanded { transform: rotate(0deg); transition: 0.2s; } .event-item-bonuses .mw-collapsible-toggle img { cursor: pointer; top: 0; margin-top: auto; margin-bottom: auto; bottom: 0; right:0; position: absolute !important; } .event-item-bonuses .mw-collapsible-toggle img, .event-item-bonuses .mw-collapsible-toggle-expanded img { transform: rotate(90deg) !important; transition: 0.2s; } .event-item-bonuses .mw-collapsible-toggle-collapsed img { transform: rotate(-90deg) !important; transition: 0.2s; } .bonus-item { background: white !important; border-radius: 30px !important; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 2px -2px rgba(0, 0, 0, 0.2); color: #149aa0 !important; margin: 15px auto !important; opacity: 0.9; padding: 3px !important; transition: 0.5s; } .bonus-item:hover { opacity: 1; transition: 0.5s; } .bonus-item a { color: #149aa0 !important; } .bonus-item img { background: #149aa0; border-radius: 30px !important; margin-right: 10px; }

/* News Feed Box */ .mp-content-box#NewsFeed { text-align: center; padding: 40px 0 0 !important; } .mp-content-box#NewsFeed>p, .mp-content-box#NewsFeed .fb-page { margin: 0 auto !important; } .mp-content-box#NewsFeed .mp-content-box-h2 { background: linear-gradient(90deg,#8fd87d 0,#24ccaa 80%); border-bottom: 0 !important; color: white; margin: -1px auto -1px; }

/* Current Features Box */ .mp-content-box#Features { margin: 20px auto !important; padding: 25px !important; } .feature-item { text-align: center; padding-bottom: 15px; } .feature-item p { margin: 0; } .mp-cd { background: none; border-radius: 35px; height: 150px !important; margin: 0px auto; width: min-content; } .mp-cd-item1 { opacity: 1 !important; overlay: hidden; transition: 0.3s; } .mp-cd-item2 { opacity: 0 !important; position: relative !important; top: -150px !important; transition: 0.3s; } .mp-cd:hover .mp-cd-item1 { opacity: 0 !important; transition: 0.3s; } .mp-cd:hover .mp-cd-item2 { opacity: 1 !important; transition: 0.3s; }

/* Random Pages Box */ .mp-content-box#Random_Pages { text-align: center; padding: 40px 20px 20px !important; } .random-item { display: inline-block; } .random-item img { opacity: 0.75 !important; transform: scale(0.9) !important; transition: 0.3s; } .random-item:hover img { opacity: 1 !important; transform: scale(1) !important; transition: 0.3s; }

/* Poll Box */ .mp-content-box .ajax-poll { margin: 0 auto !important; padding: 10px 10px 0 !important; border: none !important; } .mp-content-box .pollAnswerVotes { border-radius: 10px !important; } .mp-content-box .pollAnswerVotes { border-radius: 10px !important; } .mp-content-box .pollAnswerVotes div { border-radius: 10px !important; } .mp-content-box .ajax-poll input[value="Vote!"] { background: linear-gradient(90deg, #8fd87d 0, #24ccaa 80%); border: none !important; border-radius: 25px !important; font-size: 105% !important; font-weight: bold; height: 25px; outline: none !important; padding: 3px; width: 60px; } .mp-content-box .ajax-poll input[value="Vote!"]:hover { text-decoration: underline !important; } .mp-content-box .ajax-poll input[value="Vote!"]:active { background: #06496f !important; }

/* Contribute Box */ .mp-content-box-h#H-Contribution { font-size: 20px !important; } .contribute-item ul { margin: 5px !important; list-style: none !important; } .contribute-item ul li { margin: 20px 0; }

/* Hide category navbox from mainpage */ .mainpage .article-categories { display: none; }