MediaWiki:Mainpage.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* Everything mainpage related styling are located here */

/** Top bar for platform versions **/
.mainpage-box-top {
	display: flex;
	justify-content: space-between;
	height: 25px;
	width: 100%;
	max-width: 100%;
	margin-bottom: 5px;
	font-size: 14px;
	font-family: 'Open Sans';
}

.mainpage-box-top a {
	color: white;
}

.mainpage-box-top .platformversion {
	flex-grow: 0;
	padding: 0 12px;
	transform: skew(30deg);
	text-align: center;
	text-transform: uppercase;
}

.mainpage-box-top .platformversion>span {
	display: inline-block;
	transform: skew(-30deg);
	color: white;
	height: 100%; 
	overflow: hidden;
}

.mainpage-box-top .platformversion img {
	height: 15px;
	width: auto;
	vertical-align: middle;
	transform: translate(0, -2px);
	image-rendering: -webkit-optimize-contrast;
}

/* Left bezel of mainpage-box-top is a trapazoid pointed rightward */
.mainpage-box-top .trapazoid-left-bezel {
  margin-right: -45px;
  border-bottom: 25px solid black;
  border-left: 0 solid transparent;
  border-top: 0 solid transparent;
  border-right: 15px solid transparent;
  transform: none;
}

/** 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;
	transition: 0s;
}

.home-nav:hover span a {
	color: black;
	text-decoration: none;
}

/* 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 MediaWiki: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 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

/** News box **/
.mainpage-box-news {
	font-weight: bold;
	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__wrapper,
.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: var(--theme-page-background-color--secondary);
	padding: 1px 10px;
	margin: 2px;
	width: 98%;
}

.mainpage-box-recentactivity a {
	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;
}

/* World State Timers */
.mainpage-box-timers .timer-item, .mainpage-box-news li, .mainpage-box-lede, .mainpage-box-maintenance li {
	background: var(--theme-page-background-color--secondary);
}

/* Blog posts */
.mainpage-box-blogs td {
	background-color: var(--theme-page-background-color--secondary) !important;
}