MediaWiki:Mainpage.css

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

/* Remove the word "Home" on the main page */ .mainpage .page-header__title { display: none; }

.mainpage .page-header { margin-bottom: 0; }

/* Main Page Layout */ .mp-header { background-color: #3333ff; color: white; margin: 0 0 10px 0; font-size: 20px; font-family: 'Circular Std', sans-serif; text-align: center; font-weight: bold; } .mp-box { margin-bottom: 12px; padding: 6px; text-align: center; background-color: #3333ff; color: white; } .mp-box a { color: #66ccff; } .mp-box > .mp-header { background-color: #3399ff; color: white; } .mp-welcome-header { font-family: 'Circular Std', sans-serif; font-size: 32px; color: white; font-weight: bold; } .mp-featured-header { font-family: 'Circular Std', sans-serif; font-weight: bold; font-size: 32px; line-height: 34px; color: #3333FF; } .mp-logo { display: block; margin-top: 8px; position: relative; } .mp-logo img { height: 100px; width: auto; position: absolute; top: 12px; left: 12px; } .mp-box > .tabber .wds-tabs__wrapper { border-bottom: none; margin-bottom: 6px; } .mp-box > .tabber .wds-tabs__tab { border-top-left-radius: 6px; border-top-right-radius: 6px; } .mp-box > .tabber .wds-tabs__tab-label { height: auto; margin: 0; letter-spacing: normal; font-weight: normal; } .mp-box > .tabber .wds-tabs__tab a { padding: 6px 10px; color: white; } .mp-box > .tabber .wds-tabs__tab.wds-is-current { background-color: #3399ff; box-shadow: none; }

/* Buttons */ /* Main page button */ .custom-button { border-radius: 20px; margin-bottom: 8px; transition: 0.3s; font-weight: bold; font-family: 'Circular Std', sans-serif; text-decoration: none; margin-left: auto; margin-right: auto; text-align: center; display: block; } .custom-button a { background-color: #3333ff; padding: 9px 18px; border-radius: 20px; margin: 0 auto 8px; transition: 0.3s; font-family: 'Circular Std', sans-serif; text-decoration: none; } .custom-button a:hover { background-color: #3366ff; }

/* Shows footer -- Make border more visible in dark theme */ .theme-fandomdesktop-dark #showsfooter > div > div { border-style: solid !important; border-color: white !important; box-shadow: none !important; }

/* Portals */ .mp-explore .gallery-image-wrapper img { transition: opacity .4s; } .mp-explore .gallery-image-wrapper img:hover { opacity: 0.7; } .mp-explore .wikia-gallery-item>.lightbox-caption { display: none; margin: 0; } .mp-explore .wikia-gallery-item, .mp-explore .wikia-gallery-row, .mp-explore .wikia-gallery-item .thumb a.image, .mp-explore .wikia-gallery-item .thumb a.image img { height: auto !important; margin: 0 !important; }

/* Tweak - De-center the bullets in the "on this day" template */ .mp-box ul li { text-align: left; }

/* Credits to Wookieepedia and Harry Potter Wiki, with some modifications */ .mainpage-wrap a, .mainpage-wrap a:visited, .mainpage-wrap a:link, .mainpage-wrap a.new, .mainpage-wrap a.new:visited { color:#113ccf; } .mainpage-wrap .wikia-gallery-caption-below .lightbox-caption a, .mainpage-wrap .wikia-gallery-caption-below .lightbox-caption a.new, .mainpage-wrap .wikia-gallery-caption-below .lightbox-caption a.new:visited, .mainpage-wrap .wikia-gallery-caption-below .lightbox-caption a.visited, .mainpage-wrap .wikia-gallery-caption-below .lightbox-caption a.link, .mainpage-wrap .wikia-gallery-caption-below .lightbox-caption { color:#113ccf; } .mainpage ficaption p.title, .mainpage .article-thumb figcaption { display:none; } .mainpage .article-thumb { margin-top:0px; }

.mainpage .wikia-gallery-item .lightbox-caption { line-height:150%; font-size:14px; background:transparent; } .mainpage-box-explore .gallery .description, .mainpage-box-upcoming .gallery .description, .mainpage-box-books .gallery .description, .mainpage-box-films .gallery .description { font-size:11px; color:#fff; letter-spacing:0; font-weight:normal; } .mainpage .wikia-gallery-item .lightbox-caption .subheader { text-transform:none; letter-spacing:1px; font-family:Circular Std; font-size:16px; font-weight:600; } /* Basic box qualities */ .mainpage-box-welcome, .mainpage-box-explore, .mainpage-box-upcoming, .mainpage-box-books, .mainpage-box-films { margin:30px auto 10px auto; width:670px; } .mainpage-box-about { padding:10px 0; }

/* Main declarations for all the left rail headers */ .mainpage-box-welcome .header { text-align:left; font-size:16px; letter-spacing:3px; font-weight:normal; text-transform:uppercase; font-family: "Circular Std"; color:#113ccf; line-height:100%; }

.mainpage-box-explore .header, .mainpage-box-upcoming .header, .mainpage-box-books .header, .mainpage-box-films .header { text-align:left; font-size:18px; letter-spacing:3px; font-weight:normal; text-transform:uppercase; font-family: "Circular Std"; color:#113ccf; line-height:100%; }

.mainpage-box-welcome .top { text-align:left; font-size:24px; letter-spacing:3px; text-transform:uppercase; font-family: "Circular Std"; font-weight:400; color:#113ccf; line-height:100%; line-height:110%; }

.mainpage-box-explore .top, .mainpage-box-upcoming .top, .mainpage-box-books .top, .mainpage-box-films .top { text-align:left; font-size:28px; letter-spacing:3px; text-transform:uppercase; font-family: "Circular Std"; font-weight:400; color:#113ccf; line-height:100%; line-height:110%; }

/* Exceptions for the left rail */

.mainpage-box-welcome .header { font-size:54px; margin-bottom:20px; } .mainpage-box-explore .header { margin-bottom:20px!important; } .mainpage-box-videos .header { margin-bottom:20px; } .mainpage-box-featured-videos .vid2 { margin-top:20px; } .mainpage-box-welcome { margin-top:0; }

/* Broad declarations for the right rail */ .mainpage-box-wiki { padding:10px 0; } .mainpage-box-today, .mainpage-box-contribute, .mainpage-box-randomcharacter, .mainpage-box-randomposter, .mainpage-box-browse { margin:20px auto; padding:20px 0; }

.mainpage-box-wiki { background:#113ccf; color:#fff; font-size:14px; line-height:150%; text-align:left; padding:20px; margin: 20px auto; } .mainpage-box-wiki a, .mainpage-box-wiki a.visited, .mainpage-box-wiki a.link, .mainpage-box-wiki a.new { color:#bff5fd!important; text-decoration:underline!important;

} .mainpage-box-contribute a.visited, .mainpage-box-contribute a.link, .mainpage-box-contribute a.new { color:#113ccf; text-decoration:none; }

.mainpage-box-wiki .header, .mainpage-box-today .header, .mainpage-box-contribute .header, .mainpage-box-randomcharacter .header, .mainpage-box-randomposter .header { font-size:18px; text-align:left; line-height:130%; color:#113ccf; text-transform:uppercase; letter-spacing:0; font-weight:bold; font-family:"Circular Std"; }

.mainpage-box-wiki .top, .mainpage-box-today .top, .mainpage-box-contribute .top, .mainpage-box-randomcharacter .top, .mainpage-box-randomposter .top { text-align:left; font-size:24px; letter-spacing:3px; text-transform:uppercase; font-family: "Circular Std"; font-weight:400; color:#113ccf; line-height:100%; line-height:110%; }

.mainpage-box-wiki .top, .mainpage-box-wiki .header { color:#fff }

/* Portability */ @media (max-width: 1024px) { .mainpage-box-wiki, .mainpage-box-today, .mainpage-box-contribute, .mainpage-box-randomcharacter, .mainpage-box-randomposter { display:inline-block; }    .mainpage-box-wiki .header { line-height:120%; } } /* Remove overlapping rails */ @media (min-width:1025px) and (max-width:1280px) { .mainpage-box-welcome, .mainpage-box-explore, .mainpage-box-upcoming { margin-left: 20px; margin-right: 20px; width: auto; } }