MediaWiki:MP.css

/* MainPageTable */ .MainPageTable { width: 100%; height: 59px;/* DO NOT MODIFY W/O UPDATING SHUTTER ANIMATIONS */ background: #313131; text-align: center; border-radius: 0 0 5px 5px; border-spacing: 0; margin: 0 auto 15px; }

.MainPageTable td { position: relative; color: #FFFFFF; padding-bottom: 6px; }

.MainPageTable td div span { width: 30px; height: 30px; }

.MainPageTable td[class^="mp-"] div span { content: ""; display: block; -webkit-mask-size: 30px 30px; mask-size: 30px 30px; margin: 0 auto; }

.MainPageTable td[class^="mp-"]:hover div span { background-color: #FFFFFF; }

.MainPageTable td > a.image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 4; }

.MainPageTable td a.image img { position: absolute; right: 0; left: 0; z-index: 3; width: 100%; height: 100%; }

/* MainPageTable - Trim/Animations */ .MainPageTable td[class^="mp-"] > div { position: absolute; top: 1px; right: 0; left: 0; z-index: 2; }

.MainPageTable td[class^="mp-"]:before, .MainPageTable td[class^="mp-"]:after { content: ""; display: block; position: absolute; top: 0; right: 1px; bottom: 59px; left: 1px; z-index: 1; background-color: #919191; }

.MainPageTable td[class^="mp-"]:after { top: auto; bottom: 0; height: 5px; }

.MainPageTable td[class^="mp-"]:first-child:before, .MainPageTable td[class^="mp-"]:first-child:after { left: 0; border-radius: 0 0 0 5px; }

.MainPageTable td[class^="mp-"]:last-child:before, .MainPageTable td[class^="mp-"]:last-child:after { right: 0; border-radius: 0 0 5px 0; }

/* MainPageTable - Call, configure, & deploy animation */ .MainPageTable td[class^="mp-"]:before { animation-name: shutter-reverse; animation-duration: 0.15s; animation-timing-function: linear; }

.MainPageTable td[class^="mp-"]:hover:before { animation-name: shutter; bottom: 0; }

/* MainPageTable - Define animations */ @keyframes shutter { 0% {       bottom: auto; }

10% {       bottom: calc(9/10 * 59px); }

20% {       bottom: calc(8/10 * 59px); }

30% {       bottom: calc(7/10 * 59px); }

40% {       bottom: calc(6/10 * 59px); }

50% {       bottom: calc(5/10 * 59px); }

60% {       bottom: calc(4/10 * 59px); }

70% {       bottom: calc(3/10 * 59px); }

80% {       bottom: calc(2/10 * 59px); }

90% {       bottom: calc(1/10 * 59px); }

100% {       bottom: 0; } }

@keyframes shutter-reverse { 0% {       bottom: 0; }

10% {       bottom: calc(1/10 * 59px); }

20% {       bottom: calc(2/10 * 59px); }

30% {       bottom: calc(3/10 * 59px); }

40% {       bottom: calc(4/10 * 59px); }

50% {       bottom: calc(5/10 * 59px); }

60% {       bottom: calc(6/10 * 59px); }

70% {       bottom: calc(7/10 * 59px); }

80% {       bottom: calc(8/10 * 59px); }

90% {       bottom: calc(9/10 * 59px); }

100% {       bottom: auto; } }

/* MainPageElement - Default */ .MainPageElement { display: flex; flex-direction: column; position: relative; width: 100%; overflow: hidden; border-radius: 5px; margin-bottom: 15px; }

/* MainPageElement - mp-banner */ .MainPageElement .mp-banner { order: 1; background-color: #1B53BA; padding: 20px; border-radius: 0 0 5px 5px; transition: background-color 0.1s linear; }

.MainPageElement:hover .mp-banner { background-color: #1847D7; }

.MainPageElement .mp-banner h2 { font-family: Rubik, Arial, sans-serif; font-size: 22px; line-height: 27px; border: none; margin-top: 0; }

.MainPageElement .mp-banner .caption { margin-bottom: 0; }

.MainPageElement .mp-banner .caption, .MainPageElement .mp-banner h2 { color: #FFFFFF; }

/* MainPageElement - mp-images */ .MainPageElement .mp-images { border-radius: 5px; }

.MainPageElement .mp-banner + .mp-images { border-radius: 5px 5px 0 0; }

.MainPageElement .mp-images > img { width: 100%; height: auto; }

/* MainPageElement - mp-link */ .MainPageElement .mp-link a { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

.MainPageElement .mp-link a img { width: 100%; height: 100%; }

/* MainPageElement - Container */ .MainPageElement-container { display: flex; }

.MainPageElement-container .MainPageElement:not(:first-child) { margin-left: 15px; }

/* MainPageElement - Prepare for animation clipping */ .mainpage #mw-content-text { padding-top: 5px; }

/* MainPageElement - Call, configure, & deploy animation */ .MainPageElement:hover { animation-name: hop; animation-duration: 0.2s; animation-timing-function: linear; }

/* MainPageElement - Define animation */ @keyframes hop { 50% {       margin-top: -5px; margin-bottom: 20px; } }

/** MAIN PAGE ELEMENT/TABLE ACCENT & ANIMATION COLORS **/

/* MP Color - Gray */ .MainPageTable .mp-gray div .mp-pokeball, .MainPageTable .mp-gray div .mp-events, .MainPageTable .mp-gray div .mp-anime, .MainPageTable .mp-gray div .mp-games, .MainPageTable .mp-gray div .mp-home, .MainPageTable .mp-gray div .mp-manga, .MainPageTable .mp-gray div .mp-tcg, .MainPageTable td.mp-gray:before, .MainPageTable td.mp-gray:after { background-color: #919191; }

.MainPageElement.mp-gray .mp-banner { background-color: #6B6B6B; }

.MainPageElement.mp-gray .caption .embeddable-discussions-threads { border-color: #6B6B6B; }

.MainPageElement.mp-gray:hover .mp-banner { background-color: #313131; }

/* MP Color - Red */ .MainPageTable .mp-red div .mp-pokeball, .MainPageTable .mp-red div .mp-events, .MainPageTable .mp-red div .mp-anime, .MainPageTable .mp-red div .mp-games, .MainPageTable .mp-red div .mp-home, .MainPageTable .mp-red div .mp-manga, .MainPageTable .mp-red div .mp-tcg, .MainPageElement.mp-red .mp-banner, .MainPageTable td.mp-red:before, .MainPageTable td.mp-red:after { background-color: #E3350D; }

.MainPageElement.mp-red .caption .embeddable-discussions-threads { border-color: #E3350D; }

.MainPageElement.mp-red:hover .mp-banner { background-color: #C72F0C; }

/* MP Color - Orange */ .MainPageTable .mp-orange div .mp-pokeball, .MainPageTable .mp-orange div .mp-events, .MainPageTable .mp-orange div .mp-anime, .MainPageTable .mp-orange div .mp-games, .MainPageTable .mp-orange div .mp-manga, .MainPageTable .mp-orange div .mp-home, .MainPageTable .mp-orange div .mp-tcg, .MainPageElement.mp-orange .mp-banner, .MainPageTable td.mp-orange:before, .MainPageTable td.mp-orange:after { background-color: #EE6B2F; }

.MainPageElement.mp-orange .caption .embeddable-discussions-threads { border-color: #EE6B2F; }

.MainPageElement.mp-orange:hover .mp-banner { background-color: #CF5C27; }

/* MP Color - Mustard */ .MainPageTable .mp-mustard div .mp-pokeball, .MainPageTable .mp-mustard div .mp-events, .MainPageTable .mp-mustard div .mp-anime, .MainPageTable .mp-mustard div .mp-games, .MainPageTable .mp-mustard div .mp-manga, .MainPageTable .mp-mustard div .mp-home, .MainPageTable .mp-mustard div .mp-tcg, .MainPageElement.mp-mustard .mp-banner, .MainPageTable td.mp-mustard:before, .MainPageTable td.mp-mustard:after { background-color: #E6BC2F; }

.MainPageElement.mp-mustard .caption .embeddable-discussions-threads { border-color: #E6BC2F; }

.MainPageElement.mp-mustard:hover .mp-banner { background-color: #DAA31C; }

/* MP Color - Green */ .MainPageTable .mp-green div .mp-pokeball, .MainPageTable .mp-green div .mp-events, .MainPageTable .mp-green div .mp-anime, .MainPageTable .mp-green div .mp-games, .MainPageTable .mp-green div .mp-manga, .MainPageTable .mp-green div .mp-home, .MainPageTable .mp-green div .mp-tcg, .MainPageElement.mp-green .mp-banner, .MainPageTable td.mp-green:before, .MainPageTable td.mp-green:after { background-color: #4DAD5B; }

.MainPageElement.mp-green .caption .embeddable-discussions-threads { border-color: #4DAD5B; }

.MainPageElement.mp-green:hover .mp-banner { background-color: #369143; }

/* MP Color - Teal */ .MainPageTable .mp-teal div .mp-pokeball, .MainPageTable .mp-teal div .mp-events, .MainPageTable .mp-teal div .mp-anime, .MainPageTable .mp-teal div .mp-games, .MainPageTable .mp-teal div .mp-manga, .MainPageTable .mp-teal div .mp-home, .MainPageTable .mp-teal div .mp-tcg, .MainPageElement.mp-teal .mp-banner, .MainPageTable td.mp-teal:before, .MainPageTable td.mp-teal:after { background-color: #30A7D7; }

.MainPageElement.mp-teal .caption .embeddable-discussions-threads { border-color: #30A7D7; }

.MainPageElement.mp-teal:hover .mp-banner { background-color: #1B82B1; }

/* MainPageElement - Blue */ .MainPageTable .mp-blue div .mp-pokeball, .MainPageTable .mp-blue div .mp-events, .MainPageTable .mp-blue div .mp-anime, .MainPageTable .mp-blue div .mp-games, .MainPageTable .mp-blue div .mp-manga, .MainPageTable .mp-blue div .mp-home, .MainPageTable .mp-blue div .mp-tcg, .MainPageElement.mp-blue .mp-banner, .MainPageTable td.mp-blue:before, .MainPageTable td.mp-blue:after { background-color: #1B53BA; }

.MainPageElement.mp-blue .caption .embeddable-discussions-threads { border-color: #1B53BA; }

.MainPageElement.mp-blue:hover .mp-banner { background-color: #1847D7; }

/* MainPageElement - Black */ .MainPageTable .mp-black div .mp-pokeball, .MainPageTable .mp-black div .mp-events, .MainPageTable .mp-black div .mp-anime, .MainPageTable .mp-black div .mp-games, .MainPageTable .mp-black div .mp-manga, .MainPageTable .mp-black div .mp-home, .MainPageTable .mp-black div .mp-tcg, .MainPageElement.mp-black .mp-banner, .MainPageTable td.mp-black:before, .MainPageTable td.mp-black:after { background-color: #313131; }

.MainPageElement.mp-black .caption .embeddable-discussions-threads { border-color: #313131; }

.MainPageElement.mp-black:hover .mp-banner { background-color: #282828; }

/* MainPageElement - Purple */ .MainPageTable .mp-purple div .mp-pokeball, .MainPageTable .mp-purple div .mp-events, .MainPageTable .mp-purple div .mp-anime, .MainPageTable .mp-purple div .mp-games, .MainPageTable .mp-purple div .mp-manga, .MainPageTable .mp-purple div .mp-home, .MainPageTable .mp-purple div .mp-tcg, .MainPageElement.mp-purple .mp-banner, .MainPageTable td.mp-purple:before, .MainPageTable td.mp-purple:after { background-color: #855AC9; }

/* MP Color - PokeYellow */ .MainPageTable .mp-pokeyellow div .mp-pokeball, .MainPageTable .mp-pokeyellow div .mp-events, .MainPageTable .mp-pokeyellow div .mp-anime, .MainPageTable .mp-pokeyellow div .mp-games, .MainPageTable .mp-pokeyellow div .mp-home, .MainPageTable .mp-pokeyellow div .mp-manga, .MainPageTable .mp-pokeyellow div .mp-tcg, .MainPageTable td.mp-pokeyellow:before, .MainPageTable td.mp-pokeyellow:after { background-color: #3D7DCA; }

/* MP Color - PokeBlue */ .MainPageTable .mp-pokeblue div .mp-pokeball, .MainPageTable .mp-pokeblue div .mp-events, .MainPageTable .mp-pokeblue div .mp-anime, .MainPageTable .mp-pokeblue div .mp-games, .MainPageTable .mp-pokeblue div .mp-home, .MainPageTable .mp-pokeblue div .mp-manga, .MainPageTable .mp-pokeblue div .mp-tcg, .MainPageTable td.mp-pokeblue:before, .MainPageTable td.mp-pokeblue:after { background-color: #FFCB05; }

/* MP Color - PokeRed */ .MainPageTable .mp-pokered div .mp-pokeball, .MainPageTable .mp-pokered div .mp-events, .MainPageTable .mp-pokered div .mp-anime, .MainPageTable .mp-pokered div .mp-games, .MainPageTable .mp-pokered div .mp-home, .MainPageTable .mp-pokered div .mp-manga, .MainPageTable .mp-pokered div .mp-tcg, .MainPageTable td.mp-pokered:before, .MainPageTable td.mp-pokered:after { background-color: #ce2029; }

.MainPageElement.mp-purple .caption .embeddable-discussions-threads { border-color: #855AC9; }

.MainPageElement.mp-purple:hover .mp-banner { background-color: #734BB2; }

/** MAIN PAGE TABLE IMAGE MASKS **/ .MainPageTable td div .mp-home { -webkit-mask-image: url("https://vignette.wikia.nocookie.net/ursuul/images/9/9a/Home.png"); mask-image: url("https://vignette.wikia.nocookie.net/ursuul/images/9/9a/Home.png"); }

.MainPageTable td div .mp-pokeball { -webkit-mask-image: url("https://vignette.wikia.nocookie.net/ursuul/images/4/4c/Pokeball.png"); mask-image: url("https://vignette.wikia.nocookie.net/ursuul/images/4/4c/Pokeball.png"); }

.MainPageTable td div .mp-games { -webkit-mask-image: url("https://vignette.wikia.nocookie.net/ursuul/images/6/6a/Games.png"); mask-image: url("https://vignette.wikia.nocookie.net/ursuul/images/6/6a/Games.png"); }

.MainPageTable td div .mp-tcg { -webkit-mask-image: url("https://vignette.wikia.nocookie.net/ursuul/images/4/45/TCG.png"); mask-image: url("https://vignette.wikia.nocookie.net/ursuul/images/4/45/TCG.png"); }

.MainPageTable td div .mp-anime { -webkit-mask-image: url("https://vignette.wikia.nocookie.net/ursuul/images/c/c2/Anime.png"); mask-image: url("https://vignette.wikia.nocookie.net/ursuul/images/c/c2/Anime.png"); }

.MainPageTable td div .mp-events { -webkit-mask-image: url("https://vignette.wikia.nocookie.net/ursuul/images/e/e8/Events.png"); mask-image: url("https://vignette.wikia.nocookie.net/ursuul/images/e/e8/Events.png"); }

.MainPageTable td div .mp-manga { -webkit-mask-image: url("https://vignette.wikia.nocookie.net/sandbox9869508/images/0/07/News.png"); mask-image: url("https://vignette.wikia.nocookie.net/sandbox9869508/images/0/07/News.png"); }

/* Discussions Module */ .MainPageElement .caption .embeddable-discussions-module { padding: 0; border: 0; }

.MainPageElement .caption .embeddable-discussions-module .embeddable-discussions-heading-container, .MainPageElement .caption .embeddable-discussions-module .embeddable-action-gap { display: none; }

.MainPageElement .caption .embeddable-discussions-module .embeddable-discussions-threads { max-height: 500px; overflow: scroll; background: #FFFFFF; padding: 0; border-width: 2px; border-style: inset; border-radius: 5px; }

.MainPageElement .caption .embeddable-discussions-module .embeddable-discussions-post-detail { background-color: transparent; padding: 10px 0 0 0; border-style: inset; border-color: inherit; border-top-width: 2px; border-right: 0; border-bottom: 0; border-left: 0; margin-bottom: 0; }

.MainPageElement .caption .embeddable-discussions-module .embeddable-discussions-post-detail:first-child { border-top-width: 0; }

.MainPageElement .caption .embeddable-discussions-module .embeddable-discussions-post-actions { justify-content: space-around; padding: 0 5px; border-top-width: 0; }

.MainPageElement .caption .embeddable-discussions-module .embeddable-discussions-side-spaced { padding: 0 10px; }

.MainPageElement .caption .embeddable-discussions-module .embeddable-discussions-title { color: #000000; }

.MainPageElement .caption .embeddable-discussions-module .avatar-details { font-size: 12px; }

/* News Module */ .MainPageElement .mp-twins { display: flex; justify-content: space-evenly; }

.MainPageElement .mp-twin { display: flex; flex-direction: column; justify-content: space-between; }

.MainPageElement .mp-twin + .mp-twin { flex-shrink: 0; flex-basis: calc(50% - 16px); padding-left: 15px; border-left: 2px outset; margin-left: 15px; }

.MainPageElement .mp-twin:before { content: "This month"; display: block; font-weight: bold; font-size: medium; text-align: center; text-decoration: underline; }

.MainPageElement .mp-twin + .mp-twin:before { content: "Last month"; }