Gamepedia Help Wiki
Register
Line 71: Line 71:
 
color: #5a93cc;
 
color: #5a93cc;
 
}
 
}
 
/* For hydradark only */
 
/* This makes the section collapse arrow visible */
 
/*
 
.mw-ui-icon-arrow::before {
 
filter: invert(100%);
 
}
 
*/
 
/* this styles the interlanguage links overlay */
 
/*
 
.language-overlay {
 
background: #101010 !important;
 
}
 
.language-overlay .list-header {
 
background: #101010;
 
}
 
.language-overlay .site-link-list a .autonym {
 
color: #505050 !important;
 
*/
 
   
 
.thumb,
 
.thumb,

Revision as of 15:00, 29 August 2018

With the implementation of the Mobile Frontend extension, each wiki main page should to be verified on a mobile device to make sure it is presentable and usable. The Default loadout wiki has a basic Mobile.css file (copied below) and Mobile.js file which governs the behaviour of the latest version.

The mobile view of the wiki does not include the left navigation bar. It also does not allow for mobile editing.

It is not necessary to tag every element. The focus should be on those elements that do the following:

  1. Define the purpose of the wiki
  2. Provide links to the content.

When creating a mobile skin for a wiki, keep in mind that this is for mobile viewing. Not everyone has unlimited data as part of their mobile plan, so keep images as small as possible. Generally speaking no one will be viewing the mobile view at a higher resolution than 1024x768, so having large images scaled small is only wasting their data usage, and will cause slow load times.

The Mobile.css file you create will be used by the extension in conjunction with Mobile Common.css.

Examples

Generic css

These are the core elements of the mobile view to include in your Mobile.css file (don't forget that some of the responsive elements rely on Mobile.js):

/* CSS placed here will affect users of the mobile site */
/* Header and footer */
.header-container.header-chrome,
#mw-mf-page-center {
    background: transparent;
}

footer {
    /* 
    color: #e0e0e0;
    */
}

.overlay #secondary-button.user-button,
.header #secondary-button.user-button,
.overlay .user-button,
.header .user-button {
    background: transparent;
}

/* end header and footer */

.nomobile {
    display: none;
}

.client-js .toc-mobile {
    background-color: rgba(0, 0, 0, 0) !important;
    border: 1px solid #505050 !important;
}

.mw-ui-button,
.last-modified-bar #mw-mf-last-modified {
    background-color: rgba(0, 0, 0, 0);
    /* 
    color: #e0e0e0;
    */
}

.overlay-enabled, #content {
    /* 
    background: #101010;
    color: #e0e0e0;
    */
}

a,
a:visited,
a.external {
    color: #5a93cc;
}

.thumb,
#content_wrapper .thumb,
li.gallerybox div.thumb {
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #505050;
}

.content table th {
    background-color: rgba(0, 0, 0, 0);
}

.content table td,
.content table th {
    border: 1px solid #505050;
    padding: 3px;
}

.content table.wikitable {
    background-color: rgba(0, 0, 0, 0);
    margin: auto;
    margin-bottom: 1em;
}

.content table.wikitable > tr > th,
.content table.wikitable > tr > td,
.content table.wikitable > * > tr > th,
.content table.wikitable > * > tr > td {
    border: 1px solid #505050;
}

.content table.wikitable > tr > th,
.content table.wikitable > * > tr > th {
    background-color: inherit;
    padding: 3px;
}

/* Responsive main page stuff */
/********************
/* Main menu styles *
/********************/
.primary-navigation-enabled {
    border-left: 12px solid #505050 !important;
    background: #101010 !important;
}

#mw-mf-page-left {
    border-left: 12px solid #505050;
    background: transparent;
}

#mw-mf-page-left ul {
    background: transparent;
}

#mw-mf-page-left ul:first-child {
    border-bottom: 12px solid #505050;
}

#mw-mf-page-left ul li {
    border-top: 1px solid #505050;
    border-bottom: 1px solid #505050;
    background: transparent;
    text-shadow: none;
}

#mw-mf-page-left ul li a,
#mw-mf-page-left ul.hlist li a {
    border: none;
    color: #3674b3;
}

#mw-mf-page-left ul li:hover {
    border-left: 12px solid #aaaaaa;
    background: #505050;
}

#mw-mf-page-left ul.hlist li:hover {
    border: none;
}

#mw-mf-page-left ul li:hover a,
#mw-mf-page-left ul.hlist li:hover a {
    color: #ffffff;
}

/* Recent changes */
.content .mw-changeslist table td {
    border: none;
    padding: 1px;
}

/* Template documentation styles */
/* If modifying these styles, be sure to update the desktop skin! */
.doc {
    margin: 0em auto 1em;
    background-color: rgba(0, 0, 0, 0.1);
    border: 2px solid #BDCAC3;
    border-radius: 1em;
    padding: 1em;
}

.doc-header {
    padding-bottom: 3px;
    border-bottom: 1px solid #BDCAC3;
    margin-bottom: 1ex;
}

.doc-footer {
    margin: 0;
    background-color: rgba(0, 0, 0, 0.1);
    border: 2px solid #BDCAC3;
    border-radius: 1em;
    padding: 1em;
}

/*********************
/* Front page styles *
/*********************/
.fpbox {
    border-radius: 5px;
    border: 2px solid #505050;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0) inset;
    background: transparent;
    color: inherit;
    margin: 5px;
    padding: 5px;
}

.fpbox .welcome {
    border-bottom: 1px solid #505050;
    background: transparent;
    /* color: #e0e0e0; */
    font-size: 150%;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 10px 0;
    padding: 0 0 5px 0;
}

.fpbox .heading {
    border-bottom: 1px solid #505050;
    background: transparent;
    /* color: #e0e0e0; */
    font-size: 132%;
    font-variant: small-caps;
    margin: 0 0 10px 0;
    padding: 0 0 5px 0;
}

.fpbox .heading .smalllink {
    color: #3674b3;
    font-weight: bold;
    font-size: 75%;
}

.fpbox .body {
    overflow: hidden;
}

.fpbox.mobilecollapsible .heading a.togglecollapse {
    display: block;
    padding: 0 0 0 15px;
}

.fpbox.mobilecollapsible .heading a.togglecollapse:hover, .fpbox.mobilecollapsible .heading a.togglecollapse:active {
    text-decoration: none;
}

.fpbox.mobilecollapsible.collapsed .heading {
    border: none;
    margin-bottom: -4px;
}

.fpbox.mobilecollapsible.collapsed .heading a.togglecollapse {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAHCAQAAABqrk9lAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfiBgcKGQuEiih2AAAALklEQVQI12OczPD2vzAjAwMDAxMDAwPD2/9wJoQDZTIwvP0PZwozMsEYUAUQEwDWNwihamz9rAAAAABJRU5ErkJggg==") left center no-repeat;
}

.fpbox.mobilecollapsible.collapsed .body {
    display: none;
}

.fpbox.mobilecollapsible.expanded .heading a.togglecollapse {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAECAQAAADoz+32AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfiBgcKGQFkX8FoAAAAIklEQVQI12Ns+M+ABJiEGREcYUYmBgaYgDAjAwMTjAERBABjNAH/5hy/QgAAAABJRU5ErkJggg==") left center no-repeat;
}

.fpbox hr {
    border: none;
    border-bottom: 2px solid #505050;
}

.fpplainbox {
    padding: 5px 8px 10px 8px;
    margin: 0 5px 10px 5px;
    vertical-align: top;
}

.fpmain .columns {
    overflow: hidden;
}

.fpmain .columns .leftcol {
    width: 100%;
    margin: 0;
    padding: 0;
}

.fpmain .columns .rightcol {
    width: 100%;
    margin: 0;
    padding: 0;
}

@media (min-width: 400px) {
  .fpmain .columns .leftcol {
    float: left;
    width: 50%;
    margin: 0;
    padding: 0;
  }

  .fpmain .columns .rightcol {
    float: right;
    width: 50%;
    margin: 0;
    padding: 0;
  }
}

.fplinks {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: -2px -3px;
}

.fplinks .linkslabel {
    border-bottom: 2px solid #505050;
    margin: 6px 3px 0 3px;
    flex: 0 0 100%;
}

.fplink {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    flex: 0 0 100%;
    padding: 2px 3px;
    box-sizing: border-box;
}

@media (min-width: 400px) {
  .fplink {
    flex: 0 0 50%;
  }
}

.fplink.wide {
    flex: 0 0 100%;
}

.fplink .box {
    background: transparent;
    /* 
    background-color: #000000;
    background-image: -moz-linear-gradient(center top , #151515 0%, #000000 100%);
    background-image:-webkit-gradient(linear, center top, left bottom, color-stop(0%,#151515), color-stop(100%,#000000));
    background-image:-webkit-linear-gradient(top, #151515 0%, #000000 100%);
    background-image:-o-linear-gradient(top, #151515 0%, #000000 100%);
    background-image:-ms-linear-gradient(top, #151515 0%, #000000 100%);
    background-image: linear-gradient(to bottom, #151515 0%, #000000 100%);
    */
    border: 2px solid #505050;
    border-radius: 2px;
    box-shadow: 0 0 0 2px #505050 inset;
    /* color: #e0e0e0; */
    display: flex;
    flex-flow: column nowrap;
    font-weight: bold;
    align-items: stretch;
    justify-content: stretch;
    text-transform: uppercase;
    flex-grow: 1;
    min-height: 4em;
}

.fplink.image {
    justify-content: flex-start;
}

.fplink.image .box {
    min-height: 70px;
}

.fplink.image .box .image {
    display: flex;
    flex-grow: 1;
    min-height: 70px;
}

.fplink.image .image a {
    min-height: 70px;
}

.fplink.image .box .image img {
    max-width: 100% !important;
    width: auto !important;
    max-height: 70px !important;
}

.fplink.image .image {
    font-size: 75%;
}

.fplink .link {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    flex-grow: 1;
}

.fplink a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}

.fplink.image .link a {
    border-top: 2px solid #505050;
    background: #ddddb7 !important;
}

.fpvideos {
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
    max-width: 480px;
}

.fpvideo {
    position: relative;
    padding-top: 25px;
    padding-bottom: 56.25%;
    height: 0;
}

.fpvideo iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.fpbox .bigmobilelinks .rightcol {
    padding: 0.25em 0 0 0;
}

@media (min-width: 400px) {
  .fpbox .bigmobilelinks .rightcol {
    padding: 0;
  }
}

.fpbox .bigmobilelinks ul, 
.fpbox .bigmobilelinks .leftcol ul, 
.fpbox .bigmobilelinks .rightcol ul {
    list-style: none;
    margin: 0;
    padding: 0 15px;
}

.fpbox .bigmobilelinks ul ul, 
div#content .fpbox .bigmobilelinks .leftcol ul ul, 
div#content .fpbox .bigmobilelinks .rightcol ul ul {
    list-style: none;
    padding: 0.25em 1em 0 1em;
}

.fpbox .bigmobilelinks ul li div {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(128, 128, 128, 0.1);
    min-height: 4em;
    margin: 0.25em 0;
    padding: 0;
}

.fpbox .bigmobilelinks a {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(128, 128, 128, 0.2);
    min-height: 4em;
    margin: 0.25em 0;
    padding: 0;
}

div.cpbox div.feature {
    width: unset !important;
}

/* Classes permitting setting of alignment on mobile only or differently on desktop and mobile */
/* (See .desktopleft, .desktopcenter, .desktopright in MediaWiki:Common.css for the desktop equivalents */
.mobileleft {
    text-align: left;
}

.mobilecenter {
    text-align: center;
}

.mobileright {
    text-align: right;
}

Content area tweak for mobile.css with semi-transparent content areas

The body area, or general background is now where the text color is specified. Text is dark/black unless the following css change is made:

body {
    color: <text-color>;
}

The content area defaults to a background colour of #101010 unless the following css change is made:

div#content_wrapper {
    background-color: unset;
    border: 1px solid <border-color>;
}

body.mediawiki #mw-mf-page-center {
    background-color: <bg-color>;
}

Section collapse arrows

.mw-ui-icon-arrow::before {
    filter: invert(100%);
}