MediaWiki:Mainpage.css

/* Everything mainpage related styling are located here */

/** Top bar for platform versions **/
.mainpage-box-top {
	position:relative;
	height:20px;
	width:100%;
	max-width:100%;
	margin-bottom:5px;
	font-size:14px;
	font-family:'Open Sans';
}
.mainpage-box-top .bg {
	position:absolute;
	left:0;
	background:black;
	width:80%;
	padding-left:4px;
}
.mainpage-box-top .platforms {
	position:absolute;
	right:0;
	padding-right:8px;	
}
.mainpage-box-top .platformversion {
	display:inline-block;
	padding:0 12px;
	transform: skew(30deg);
	text-align:center;
	text-transform:uppercase;
	box-shadow: -5px 0 0 white;
}
.mainpage-box-top .platformversion > span {
	display:inline-block;
	transform: skew(-30deg);
	color:white;
}
.mainpage-box-top .platformversion img {
	height: 15px;
    width: auto;
	vertical-align: middle;
    transform: translate(0,-2px);
    image-rendering: -webkit-optimize-contrast;
}

/** Content box **/
.mainpage-box-content {
    position:relative;
    max-width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    margin-bottom:5px;
}
.mainpage-box-content-nav {
    position:relative;
    width: calc(100% + 30px);
    display:flex;
    justify-content:space-between;
    margin-bottom:20px;
    margin-left: -15px;
}
/*Homepage Buttons effects (bottom nav)*/
.home-nav {
    display:inline-block;
    position:relative;
    width:17%;
    transform: skew(30deg);
    text-align:center;
    background:#D50F04;
    padding:5px;
    text-transform:uppercase;
    font-size:14px;
    margin:0 5px;
}
.home-nav span {
    display:inline-block;
    transform: skew(-30deg);
}
.home-nav span a {
    font-size:14px;
    font-weight:bold;
    font-family:'Open Sans';
    color:white;
    text-decoration:none;
}
.home-nav:hover span a {
    color:black;   
}

/*Homepage Buttons effects (main content grid)*/
.home-tile {
	position:relative;
	display:inline-block;
	height:105px;
	width:105px;
	margin:1px;
	overflow:hidden;
	background: radial-gradient(#727272, #151515); 
}
.home-tile img {
	position:absolute;
	width:105px;
	height:210px;
	transition:0.3s;
}
.home-tile .home-tile-silver img {
	top:0;
	z-index:1;
}
.home-tile .home-tile-gold img {
	bottom:0;
	background: radial-gradient(circle at 50% 75%, #727272 0, #151515 50%);
	z-index:2;
	opacity:0;
}
.home-tile .home-tile-link {
    position:absolute;
    bottom:0;
    width:100%;
    background-color:rgba(0,0,0,0.6);
    text-align:center;
    text-transform:uppercase;
    color:white;
    text-shadow: 0 0 2px;
    font-size:12px;
    z-index:4;
	font-family:'Open Sans', 'Helvetica Neue', helvetica, arial, sans-serif;
}
.home-tile .home-tile-link a {
    color:white;
    text-decoration: none;
}
.home-tile:hover .home-tile-gold img {
	opacity:1;
}

/** Header **/
.mainpage-header {
    position:relative;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: black;
    padding-top: 8px;
    padding-left: 22px;
    height: 54px;
    width: 97.5%;
    width: -moz-calc(100% - 35px);
    width: -webkit-calc(100% - 35px);
    width: -o-calc(100% - 35px);
    width: calc(100% - 35px);
    margin-bottom: 5px;
    margin-top: 19px;
    font-size:25px;
    color:white;
    font-family:'Open Sans';
    font-weight:700;
}
.mainpage-header-right {
    position:absolute;
    top:0px;
    right:-20px;
    height:100%; 
    width:50px;
    background:black;
    transform: skew(30deg);
}
.mainpage-header-sub {
    font-size:25px;
    color:#D50F04;
    font-family:'Open Sans';
    font-weight:700;
}

/** Featured Videos box **/
.mainpage-box-featuredvideos {
	margin:0 auto 20px auto;
}
/* fix video bottom having extra margin*/
.mainpage-box-featuredvideos > p {
	display:none;
}
/* remove default border */
.mainpage-box-featuredvideos .wikiaPhotoGallery-slider-body {
	border:0;
}
/* fix sometimes thumbnail having non-default size by ensuring it aligns at middle vertically*/
.mainpage-box-featuredvideos .wikiaPhotoGallery-slider-list a {
	top: 50%;
	transform: translateY(-50%);
}
/*
.mainpage-box-featuredvideos .thumbnail-play-icon-container svg {
	display:none;
}
.mainpage-box-featuredvideos .thumbnail-play-icon-container {
	color:red;
	font-size:60px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
*/
/* Responsive video slider (requires Mainpage.js)*/
.mainpage-box-featuredvideos-responsive {
	position:relative;
	width:100%;
	max-width:100%;
	height:269px;
	background:black;
	margin:0 auto 20px auto;
}
.mainpage-box-featuredvideos-responsive .description {
	position:absolute;
	top:200px; 
	left:0; 
	padding:0 10px;
	color:white;
	background:rgba(0,0,0,0.5);
	font-family:Open Sans;
	font-size:15px;
}
.mainpage-box-featuredvideos-responsive .vid-item1 a,
.mainpage-box-featuredvideos-responsive .vid-item2 a,
.mainpage-box-featuredvideos-responsive .vid-item3 a,
.mainpage-box-featuredvideos-responsive .vid-item4 a {
	top: 50%;
	transform: translateY(-50%);
}
.mainpage-box-featuredvideos-responsive .vid-item1,
.mainpage-box-featuredvideos-responsive .vid-item2,
.mainpage-box-featuredvideos-responsive .vid-item3,
.mainpage-box-featuredvideos-responsive .vid-item4 {
	position:absolute;
	width:480px; 
	height:269px; 
	overflow:hidden;
	border: 1px solid black;
    box-sizing: border-box;
    transition-duration: 0.1s;
}
.mainpage-box-featuredvideos-responsive .vid-item1 {
	left:0;
	z-index:5;
}
.mainpage-box-featuredvideos-responsive .vid-item2 {
	left: calc((100% - 480px) * 0.33);
	z-index:4;
}
.mainpage-box-featuredvideos-responsive .vid-item3 {
	left: calc((100% - 480px) * 0.66);
	z-index:3;
}
.mainpage-box-featuredvideos-responsive .vid-item4 {
	right:0;
	z-index:2;
}

/** Lede **/
.mainpage-box-lede {
	position:relative;
	max-width:100%; 
	background:rgba(255,255,255,0.5); 
	text-align:center;
	padding:20px;
	margin:0 auto 20px auto;
	font-family:Open Sans;
	background-image:url("https://images.wikia.nocookie.net/__cb20140911231247/warframe/images/0/08/Navboxflower6.png");
	background-position: 150% bottom;
	background-repeat: no-repeat;
	background-size: 55%;
}

/** Blogs box **/
.mainpage-box-blogs {
    margin-bottom: 10px;
}
.mainpage-box-blogs .blog-listing {
    width:0;
    min-width:98%;
}
.mainpage-box-blogs .blog-listing__post {
	margin:10px 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	border-bottom: 1px solid darkgray;
}
.mainpage-box-blogs .blog-listing__post-details {
	font-size:12px;
}
.mainpage-box-blogs .blog-listing .blog-listing__comment-count {
	float:right;
}
.mainpage-box-blogs .blog-listing .blog-listing__read-post,
.mainpage-box-blogs .blog-listing .blog-listing__create-post {
	display:none;
}
.mainpage-box-blogs .blog-listing .blog-listing__title {
	font-size:18px;
	white-space: nowrap;
    text-overflow: ellipsis;
    margin: 8px 0 2px 0 !important;
}

/** External Link box **/
.mainpage-box-external-button-big {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    -user-select: none;
    cursor: pointer;
    display: block;
    width: 268px;
    margin: 0 auto 15px;
    padding:5px 0px;
    text-align: center;
}
.mainpage-box-external-button-big a {
    vertical-align:middle;
    font-family:'Open Sans';
    font-weight: 300;
    text-transform: uppercase;
    text-decoration: none !important;
    font-size: 30px;
    color: #FFFFFF;
}
.mainpage-box-playfree {
    background:#D40001;
}
.mainpage-box-playfree:hover {
    background:#e53b3c;
}
.mainpage-box-discord {
    background:#7289DA;
}
.mainpage-box-discord:hover {
    background:#7F94D8;
}

/** Social Media box **/
.mainpage-box-socialmedia {
    text-align: center;
    margin-bottom: 15px;
}
.mainpage-box-socialmedia img {
	width:30px;
	height:30px;
}
.mainpage-box-socialmedia img:hover {
	transition: box-shadow 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

/** News box **/
.mainpage-box-news {
	margin-bottom: 15px;
}
.mainpage-box-news ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.mainpage-box-news li {
	background:rgba(255,255,255,0.5);
	border-radius:4px;
	padding:1px 10px;
	margin:0 2px 5px 2px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

/** Timers box **/
.mainpage-box-timers {
	margin-bottom: 15px;
}
.mainpage-box-timers .timer-item {
	min-height:49px;
	background:rgba(255,255,255,0.5);
	border-radius:4px;
	padding:1px 2px;	/*h-padding is lower than news to prevent wrapping*/
	margin:0 2px 5px 2px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	white-space: nowrap;
	line-height:22px;
}

/** Recent Activity box **/
.mainpage-box-recentactivity {
    margin-bottom: 15px;
}
/*removes filter tabs, legend, description header, date at h4*/
.mainpage-box-recentactivity .wds-tabs,
.mainpage-box-recentactivity .mw-changeslist-legend,
.mainpage-box-recentactivity .activity-summary,
.mainpage-box-recentactivity h4 {
	display:none;
}
/*filter out non essential info, retains only page name and changed bytes (diff)*/
.mainpage-box-recentactivity td:not(.mw-changeslist-line-inner) {
	display:none;
}
.mainpage-box-recentactivity .mw-changeslist-line-inner :not(.mw-changeslist-line-inner-articleLink):not(.mw-title):not(.mw-changeslist-title) :not(.mw-changeslist-line-inner-characterDiff):not(.mw-plusminus-pos):not(.mw-diff-bytes) {
	display:none;
}
/*removes anything without revid (move, delete), and the empty space that it'd leave behind*/
.mainpage-box-recentactivity table:not([data-mw-revid]),
.mainpage-box-recentactivity .table-wrapper, 
.mainpage-box-recentactivity .fl-scrolls {
	display:none;
}
/*actual styling*/
.mainpage-box-recentactivity table {
	background:rgba(255,255,255,0.5);
	padding:1px 10px;
	margin:2px;
	width:98%;
}
.mainpage-box-recentactivity a {
	color:black;
	font-weight:bold;
}
.mainpage-box-recentactivity .mw-changeslist-line-inner-characterDiff {
	font-size:10px;
	float:right;
}
/*fix some recent activity entries having colored background due to custom JS*/
.mainpage-box-recentactivity .mw-changeslist tr {
	background-color:transparent !important;
}

/** Maintenance box **/
.mainpage-box-maintenance {
	margin-bottom: 15px;
}
.mainpage-box-maintenance ul {
	font-size:12px;
	overflow:hidden;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.mainpage-box-maintenance li {
	background:rgba(255,255,255,0.5);
	padding:1px 5px;
	margin:0 2px 5px 2px;
}
.mainpage-box-maintenance ul li:nth-of-type(1n+5) {
	display: none;
}