MediaWiki:Mainpage.css
Jump to navigation
Jump to search
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;
}