MediaWiki:Mainpage.css

/* CSS for the wiki's main page */

/* Hide page title */ .mainpage .page-header__title { display: none; }

/* Styling */ .mainpage-box { border-spacing: 0; padding: 4px; border: 1px solid; margin-bottom: 4px; } .mainpage-box-blue { border-color: #b4b8fe; background-color: #d9dbff; } .mainpage-box-red { border-color: #ffbdc7; background-color: #ffdae0; } .mainpage-box-skyblue { border-color: #6bedff; background-color: #d2f9fe; } .mainpage-box-purple { border-color: #cba6fe; background-color: #dfc8ff; } .mainpage-box-orange { border-color: #ffc69d; background-color: #fed8bd; } .mainpage-box-header { padding: 0 4px; border: 1px solid; font-weight: bold; font-size: 18px; margin-bottom: 4px; } .mainpage-box-blue .mainpage-box-header { border-color: #969cff; background-color: #bdc0ff; } .mainpage-box-red .mainpage-box-header { border-color: #ff6f85; background-color: #ffa8b5; } .mainpage-box-skyblue .mainpage-box-header { border-color: #4ee1f5; background-color: #a4f4ff; } .mainpage-box-purple .mainpage-box-header { border-color: #a567fc; background-color: #c9a3ff; } .mainpage-box-orange .mainpage-box-header { border-color: #ffaf75; background-color: #ffbe90; }

/* Dark theme fix on the animated shows/movies footer */ .theme-fandomdesktop-dark .animated-shows-footer > div.mw-parser-output > div, .theme-fandomdesktop-dark .animated-movies-footer > div.mw-parser-output > div { border-color: white !important; border-style: solid !important; box-shadow: 2px 2px 5px rgba(255,255,255,.1), 2px 2px 5px rgba(255,255,255,.3) !important; }

/* Dark theme */ .theme-fandomdesktop-dark .mainpage-box-blue, .theme-fandommobile-dark .mainpage-box-blue { background-color: rgba(0,0,255,.25); } .theme-fandomdesktop-dark .mainpage-box-red, .theme-fandommobile-dark .mainpage-box-red { background-color: rgba(255,0,0,.25); } .theme-fandomdesktop-dark .mainpage-box-skyblue, .theme-fandommobile-dark .mainpage-box-skyblue { background-color: rgba(0,255,255,.25); } .theme-fandomdesktop-dark .mainpage-box-purple, .theme-fandommobile-dark .mainpage-box-purple { background-color: rgba(160,32,240,.25); } .theme-fandomdesktop-dark .mainpage-box-orange, .theme-fandommobile-dark .mainpage-box-orange { background-color: rgba(255,128,0,.25); } .theme-fandomdesktop-dark .mainpage-box-blue .mainpage-box-header, .theme-fandommobile-dark .mainpage-box-blue .mainpage-box-header { background-image: linear-gradient(rgba(0,0,255,.5),rgba(0,0,255,.5)); background-color: var(--theme-page-background-color); } .theme-fandomdesktop-dark .mainpage-box-red .mainpage-box-header, .theme-fandommobile-dark .mainpage-box-red .mainpage-box-header { background-image: linear-gradient(rgba(255,0,0,.5),rgba(255,0,0,.5)); background-color: var(--theme-page-background-color); } .theme-fandomdesktop-dark .mainpage-box-skyblue .mainpage-box-header, .theme-fandommobile-dark .mainpage-box-skyblue .mainpage-box-header { background-image: linear-gradient(rgba(0,255,255,.5),rgba(0,255,255,.5)); background-color: var(--theme-page-background-color); } .theme-fandomdesktop-dark .mainpage-box-purple .mainpage-box-header, .theme-fandommobile-dark .mainpage-box-purple .mainpage-box-header { background-image: linear-gradient(rgba(160,32,240,.5),rgba(160,32,240,.5)); background-color: var(--theme-page-background-color); } .theme-fandomdesktop-dark .mainpage-box-orange .mainpage-box-header, .theme-fandommobile-dark .mainpage-box-orange .mainpage-box-header { background-image: linear-gradient(rgba(255,128,8,.5),rgba(255,128,0,.5)); background-color: var(--theme-page-background-color); }

/* Hide footer on Main Page */ .mainpage .page-footer .page-footer__categories, .mainpage .page-footer .page-footer__languages { display: none; }

/* Fix spacing */ .main-page-tag-lcs { margin-right: 0; } .main-page-tag-rcs { margin-left: 0; }

@media only screen and (min-width:1024px) { .main-page-tag-lcs-exploded { width: calc(100% - 304px); } }

/*** Temporary for Pride Month (June 2023) ***/ .mainpage-box-rainbow { border-image: linear-gradient(135deg, rgb(249, 0, 37), rgb(255, 118, 20), rgb(255, 196, 0), rgb(24, 184, 45), rgb(45, 54, 234), rgb(141, 66, 246)) 30; background-image: linear-gradient(135deg, rgba(249, 0, 37, .25), rgba(255, 118, 20, .25), rgba(255, 196, 0, .25), rgba(24, 184, 45, .25), rgba(45, 54, 234, .25), rgba(141, 66, 246, .25)); background-color: var(--theme-page-background-color); } .mainpage-box-rainbow .mainpage-box-header { border-image: linear-gradient(to right, rgb(249, 0, 37), rgb(255, 118, 20), rgb(255, 196, 0), rgb(24, 184, 45), rgb(45, 54, 234), rgb(141, 66, 246)) 9; background-image: linear-gradient(to right, rgba(249, 0, 37, .5), rgba(255, 118, 20, .5), rgba(255, 196, 0, .5), rgba(24, 184, 45, .5), rgba(45, 54, 234, .5), rgba(141, 66, 246, .5)); background-color: var(--theme-page-background-color); }

/* Dark theme page glow */ .theme-fandomdesktop-dark .mainpage-box-rainbow .mainpage-box-header, .theme-fandommobile-dark .mainpage-box-rainbow .mainpage-box-header { color: white; text-shadow: 0px 0px 2px rgba(255, 126, 121, .5), 0px 0px 2px rgba(255, 213, 121, .5), 0px 0px 4px rgba(255, 253, 120, .5), 0px 0px 4px rgba(115, 251, 121, .5), 0px 0px 6px rgba(122, 129, 255, .5), 0px 0px 6px rgba(216, 131, 255, .5); }

/* Rainbow on nav */ .wikia-gallery.wikia-gallery-caption-within .gallery-image-wrapper { border-image: linear-gradient(to right, rgb(249, 0, 37), rgb(255, 118, 20), rgb(255, 196, 0), rgb(24, 184, 45), rgb(45, 54, 234), rgb(141, 66, 246)) 9; } .wikia-gallery.wikia-gallery-caption-within .lightbox-caption { background: linear-gradient(to right, rgb(249, 0, 37), rgb(255, 118, 20), rgb(255, 196, 0), rgb(24, 184, 45), rgb(45, 54, 234), rgb(141, 66, 246)); }

/* Navigation buttons - Credits to Sonic News Network and Destiny Wiki */ .NavButton:hover .NavInfo, .NavButton:hover .AppInfo { top: 0; }

.NavButton { width: 150px; min-height: 150px; background-color: var(--general-bg-color); background-position: center; margin-bottom: 1em; margin:0 auto; position: relative; overflow: hidden; color: white; cursor: pointer; }

.NavInfo { width: 100%; height: 150px; position: absolute; top: 127px; left: 0; z-index: 1; background-color: #000; background-color: rgba(0, 0, 0, 0.6); -webkit-transition: top 0.3s; -moz-transition: top 0.3s; -o-transition: top 0.3s; transition: top 0.3s; }

.NavTitle { background: #2d36ea; height: 20px; padding-left: 5px; }