MediaWiki:Mainpage.css

/* Main page */ /** General **/ .mainpage-box { font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif; margin: 0 0 30px; }

.mainpage-box h2 { border: medium none; font-family: 'Rubik',"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif; font-size: 26px; font-weight: bold; line-height: normal; margin: 45px 0 20px; overflow: hidden; padding: 0; text-align: center; text-transform: uppercase; }

.mainpage-box h2::before, .mainpage-box h2::after { background-color: #707070; content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 50%; }

.mainpage-box h2::before { margin-left: -50%; right: 0.5em; }

.mainpage-box h2::after { left: 0.5em; margin-right: -50%; }

.mainpage-box h3 { font-weight: bold; font-size: 22px; line-height: normal; margin: 15px 0px 20px; }

.mainpage-more { margin-top: 20px; }

.mainpage-more a, .mainpage-more .recent a:active, .mainpage-more .recent a:visited { color: #4a90e2; font-size: 18px; text-decoration: none; }

.mainpage-more a:hover { color: #6aaefc; }

.mainpage-more a::after { background-size: cover; background-image: url("https://vignette.wikia.nocookie.net/central/images/4/45/Mainpage_Arrows.png/revision/latest?cb=20160711222557"); background-position: 0px 0px; background-repeat: no-repeat; content: ""; display: inline-block; height: 16px; left: 8px; position: relative; top: 3px; width: 22px; }

.mainpage-more a:hover::after { background-position: -23px 0px; }

@media screen and (max-width: 1023px) { .page-Community_Central .WikiaRail, .page-Community_Central .main-page-tag-rcs { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; } }

/** Blogs **/ .mainpage-blogs { column-gap: 24px; display: grid; grid-template-columns: 1fr 1fr; justify-content: space-between; }

.mainpage-blogs .blog { align-self: center; display: flex; flex-direction: column; margin: 0 0 20px 0; width: 100%; }

.mainpage-blogs .blog.featured { width: 100%; }

.mainpage-blogs .blog.featured-image:first-child { grid-column: 1 / 3; } .mainpage-blogs .blog.featured-image:not(:first-child) .hero-image { display: none; } .mainpage-blogs-wrapper.compact .blog { grid-column: 1 / 3; }

.mainpage-blogs .hero-image img { height: auto; width: 100%; }

.mainpage-blogs .blog-info { -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; border: 1px solid rgba(109, 109, 109, 0.4); /* border-top: 0; */ border-radius: 4px 4px 4px 4px; display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 64px; height: 100%; /* display:flex - make same size as box next to it */ }

.mainpage-blogs .blog .blog-info { padding: 15px; }

.mainpage-blogs .blog .blog-info:hover { background: rgba(100,100,100,0.37); }

.mainpage-blogs .details { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; line-height: 18px; }

.mainpage-blogs .blog-info .avatar { height: 55px; margin: 0px 20px 0px 0px; }

.mainpage-blogs .blog-info .avatar img { border-radius: 50%; height: 100%; width: auto; }

.mainpage-blogs .blog-info .author a, .mainpage-blogs .blog-info .author a:active, .mainpage-blogs .blog-info .author a:visited { color: var(--theme-page-text-color); text-decoration: none; }

.mainpage-blogs .blog-info .author a:hover { color: var(--theme-page-text-color-hover); }

.mainpage-blogs .blog-info .timestamp { color: var(--theme-page-text-mix-color); font-size: 14px; }

.mainpage-blogs .blog-info .timestamp::before { content: "\00a0\00a0•\00a0"; font-size: 10px; }

.mainpage-blogs .blog .blog-info .title { font-size: 16px; font-weight: bold; margin-top: 4px; line-height: 1.1; }

.mainpage-blogs .blog.featured .blog-info .title { font-size: 23px; }

.mainpage-blogs .blog-info .title a, .mainpage-blogs .blog-info .title a:active, .mainpage-blogs .blog-info .title a:visited { color: #4a90e2; text-decoration: none; }

.mainpage-blogs .blog .title a:hover { color: #6aaefc; }

.rcs-container .mainpage-blogs .blog:not(:first-of-type) { margin-top: 5px; }

@media screen and (min-width: 1024px) and (max-width: 1083px) { .mainpage-blogs .blog .blog-info .title { font-size: 14px; } }

/** FAQ **/ .mainpage-faq .faqs { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

.mainpage-faq .faq-section { margin: 10px 0px; width: calc(50% - 10px); }

.mainpage-faq h4 { background-color: var(--theme-accent-color); color: var(--theme-accent-label-color); font-size: 18px; font-weight: bold; line-height: normal; margin: 0px; padding: 20px 10px 15px; }

.mainpage-faq .faq-list { border: 1px solid var(--theme-accent-color); border-top: 0; padding: 10px; }

.mainpage-faq .faq-list a, .mainpage-faq .faq-list a:active, .mainpage-faq .faq-list a:visited { color: #4a90e2; text-decoration: none; }

.mainpage-faq .faq-list a:hover { color: #6aaefc; }

.mainpage-faq ul { list-style: outside none none; margin: 0px; }

.mainpage-faq li { margin: 0px 0px 10px; }

.mainpage-faq .faq-section .mainpage-more { font-weight: bold; }

/** Connect **/ .mainpage-connect .staff { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; list-style: outside none none; margin: 0px; }

.mainpage-connect .staff li { border-radius: 4px; border: 1px solid rgba(125,129,139,0.38); box-sizing: border-box; margin: 0px 0px 20px; padding: 15px 20px; text-align: center; width: calc(50% - 10px); }

.mainpage-connect .staff img { border-radius: 50%; height: auto; width: 95px; }

.mainpage-connect .staff .name { line-height: 18px; margin-top: 10px; }

.mainpage-connect .staff .name a, .mainpage-connect .staff .name a:active, .mainpage-connect .staff .name a:visited { color: var(--theme-page-text-color); font-weight: bold; text-decoration: none; }

.mainpage-connect .staff .name a:hover { color: #545454; }

.mainpage-connect .mainpage-more { margin-top: 10px; }

@media screen and (max-width: 1023px) { .mainpage-connect .staff li { width: auto; }    .mainpage-connect .staff .notablet { display: none; } }

/** Social **/ .mainpage-social { background-color: rgba(142,142,142,0.19); padding: 30px 0px 35px; text-align: center; }

.mainpage-social h3 { font-size: 25px; font-weight: bold; margin: 0px 0px 15px; }

.mainpage-social .social-button { display: inline-block; vertical-align: top; }

.mainpage-social .social-button.facebook span { vertical-align: top ! important; }

/** Highlight on cover code **/ .mainpage-box .staff li:hover, .mainpage-box .featured:hover, .mainpage-box .not-featured:hover { background: rgba(100, 100, 100, 0.37) } .mainpage-box .avatar { border: none; }

/* CC REVAMP 2023-07 */ .mainpage-blogs-wrapper.compact .blog { margin: 0; width: 100%; } .mainpage-blogs-wrapper.compact .mainpage-blogs .blog-info { border-top: 1px solid rgba(109,109,109,0.4); }

.mainpage-more.small-text a, .mainpage-more.small-text .recent a:active, .mainpage-more.small-text .recent a:visited { color: #4a90e2; font-size: 14px; text-decoration: none; }

.mainpage-more.small-text a::after { height: 10px; top: 1px; width: 14px; } .mainpage-more.small-text a:hover::after { background-position: -14px 0px !important; }

.mainpage-button { -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; border: 1px solid rgba(109, 109, 109, 0.4); /* border-top: 0; */ border-radius: 0px 0px 4px 4px; /* display: -webkit-box; display: -ms-flexbox; display: flex; - where was this used? */    display: block; /* button text needs to be centered and for that it needs to be full width */ text-align: center; } .mainpage-button-centered { text-align: center; display: block !important; }

/* Template:Advice Spotlight */ .blogspotlight { align-items: center; border: 1px solid rgba(109, 109, 109, 0.6); border-radius: 5px; column-gap: 12px; display: grid; grid-template-columns: auto 1fr; margin: 16px 0; padding: 8px; transition: background 0.3s; } .blogspotlight:hover { background-color: rgba(109, 109, 109, 0.1); } .blogspotlight__avatar { grid-row: 1 / 3; } .blogspotlight__avatar img { border-radius: 100%; } .blogspotlight__title { font-size: 1.6em; } .blogspotlight__author { align-items: center; display: flex; font-size: 1.1em; } .blogspotlight__tags { color: #ccc; font-size: 0.75em; margin-left: 8px; padding-left: 8px; position: relative; vertical-align: middle; } .theme-fandomdesktop-light .blogspotlight__tags { color: #333; } .blogspotlight__tags::before { background-color: rgba(109, 109, 109, 0.6); content: ""; height: 50%; left: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 2px; }

.wiki-list-box { background: var(--theme-sticky-nav-dynamic-color-2); padding: 5px 20px; } .wiki-list-box div div p { line-height: 2; }

.theme-fandomdesktop-dark .mainpage-button-wrap .image img { filter: invert(1); }

.mainpageccheader img { height: auto; max-width: 100%; }

@media (max-width: 1240px) { .getting-started-guides-buttons .wikia-gallery { display: grid; grid-template-columns: repeat(2, auto); justify-content: space-around; } .getting-started-guides-buttons .wikia-gallery .wikia-gallery-caption { display: none; } }

.mainpage-box__links img { height: auto; image-rendering: optimizequality; width: 25px; }