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 { display: none; }

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

/* Reset full-width on Mobile skin */ .skin-fandommobile .main-page-tag-lcs-exploded { width: 100%; }

/* Move the language listing to the left, in place of the default main page title "Home" */ .mainpage .page-header__languages { position: absolute; left: 0; right: auto; }

/* 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; }

/* Test heading - from (James Cameron's) Avatar Wiki */ .heading { padding:0.2em 0.4em; margin:0 0 10px 0; background: url('https://images.wikia.nocookie.net/__cb20100817183041/jamescameronsavatar/images/c/cd/Heading_Filler.png') repeat-x; color:#e1e1e1; font-size:120%; font-weight:bold; text-align:left; width:100%; border:1px solid #104E8B; }