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;
     color: #656e78;
     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 {
     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-blogs .blog {
     margin: 0 0 20px 0;
     width: calc(50% - 10px);
}

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

.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: 0px 0px 4px 4px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     height: 64px;
}

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

.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;
}

.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;
}

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

/** Wikia University **/
.mainpage-wikiauniversity h2 {
     margin-bottom: 5px;
     margin-top: 40px;
}

.mainpage-wikiauniversity h2::before, .mainpage-wikiauniversity h2::after {
     background: #b3b8bc none repeat scroll 0% 0%;
}

.mainpage-wikiauniversity .description {
     color: #656e78;
     font-size: 12px;
     font-weight: bold;
     margin-bottom: 5px;
     position: relative;
     text-align: center;
     text-transform: uppercase;
}

.mainpage-wikiauniversity .description .youtube-button {
     bottom: 0;
     margin: auto;
     position: absolute;
     right: 0;
     top: 0;
}

.mainpage-wikiauniversity .videos {
     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;
     list-style: outside none none;
     margin: 0px;
}

.mainpage-wikiauniversity .videos li {
     margin: 10px 0;
     width: calc(50% - 10px);
}

.mainpage-wikiauniversity .videos .article-thumb, .mainpage-wikiauniversity .videos .article-thumb .thumbimage {
     height: auto ! important;
     width: 100% ! important;
}

.mainpage-wikiauniversity .videos .article-thumb {
     margin: 0px;
}

.mainpage-wikiauniversity .videos .inline-video {
     display: block;
     height: 0px;
     padding-bottom: 56%;
     position: relative;
     width: 100%;
}

.mainpage-wikiauniversity .videos .inline-video iframe {
     height: 100% ! important;
     left: 0px;
     position: absolute;
     top: 0px;
     width: 100% ! important;
}

.mainpage-wikiauniversity .videos figcaption .title, .mainpage-wikiauniversity .videos .article-thumb .duration {
     display: none;
}

.mainpage-wikiauniversity .videos figcaption .title {
     color: #4a90e2;
     font-size: 18px;
     line-height: 22px;
}

.mainpage-wikiauniversity .videos .details {
     margin: 10px 0px 0px;
     padding-left: 10px;
}

.mainpage-wikiauniversity .videos .details .title {
     color: #4a90e2;
     font-size: 18px;
     line-height: 22px;
}

.mainpage-wikiauniversity .videos .details .title a, .mainpage-wikiauniversity .videos .details .title a:active, .mainpage-wikiauniversity .videos .details .title a:visited {
     color: #4a90e2;
     text-decoration: none;
}

.mainpage-wikiauniversity .videos .details .title a:hover {
     color: #6aaefc;
}

.mainpage-wikiauniversity .videos .details .duration {
     color: #c5ceda;
     font-size: 12px;
}

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

.mainpage-social .twitter-follow-button {
     height: 20px ! important;
     position: static ! important;
     visibility: visible ! important;
     width: 64px ! 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;
}

/* Discord on Mainpage*/
.discord-banner {
	text-align: center;
	border-radius: 3px;
	border: solid 1px;
	border-color: rgba(125,129,139,0.38);;
	margin-bottom: 20px;
	padding: 2px 15px 10px;
}
.discord-banner h3 {
	font-size: 21px;
	font-weight: bold;
	line-height: normal;
}
.discord-banner #discord-image {
	padding: 50px;
}
.discord-banner #discord-text {
	font-size: 13px;
}
.discord-banner #discord-button {
	cursor: pointer;
}
.discord-banner #discord-button a {
	color: white;
}
.discord-banner span > a {
	text-decoration: none;
}
.discord-banner #discord-button {
	background-color: #5865F2;
	border-color: #5865F2;
}
.discord-banner #discord-button:hover {
	background-color: hsl(226,58%,72%);
	border-color: hsl(226,58%,72%);
}
.skin-fandomdesktop.theme-fandomdesktop-light .discord-banner #discord-image {
	background: url("https://static.wikia.nocookie.net/nekky_api_wiki/images/1/19/Discord-Logo%2BWordmark-Color.svg/revision/latest?cb=20210713205447&path-prefix=de") no-repeat;
	background-position: center;
}
.skin-fandomdesktop.theme-fandomdesktop-dark .discord-banner #discord-image {
	background: url("https://static.wikia.nocookie.net/nekky_api_wiki/images/3/36/Discord-Logo%2BWordmark-White.svg/revision/latest?cb=20210713204039&path-prefix=de") no-repeat;
	background-position: center;
}