MediaWiki:Mobile.less/interface.less

From the RuneScape Wiki, the wiki for all things RuneScape
Jump to: navigation, search
// <pre>
/* ================================
      changes to the mobile skin
   ================================ */

@mobile-header-height: 3.75em;

/* -----------------------
      header/search bar
   ----------------------- */

.header-container {

    &.header-chrome {
        background: url('filepath://RuneScape_Wiki_background.jpg') #f6f6f6 no-repeat;
        background-size: 900px;
        background-position: 0 50%;
        box-shadow: inset 0 -1px 3px rgba(0,0,0,.1);
    }

    .header {
        height: @mobile-header-height;

        // for bigger screen sizes where search bar is shown automatically
        .search-box {
            text-align: right;
        }

        .search {
            box-shadow: @box-shadow;
        }

    }

    // hamburger icon
    .mw-ui-icon-mainmenu:before {
        // change fill color to #fff
        background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3C%3Fxml version=%221.0%22 encoding=%22UTF-8%22%3F%3E%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Ctitle%3Emenu%3C/title%3E%3Cpath fill=%22%23ffffff%22 fill-rule=%22evenodd%22 d=%22M21 19H2v-2h19v2zm0-6H2v-2h19v2zm0-6H2V5h19v2z%22/%3E%3C/svg%3E");
        filter: drop-shadow(0 .05em .25em rgba(0,0,0,.5));
    }

    // wiki name
    .branding-box h1 {
        color: @white;
        font-size: 1.5em;
        font-weight: bold;
        font-family: @serif-stack;
        margin: .15em 0;
        text-shadow: 0 .05em .25em rgba(0,0,0,.5);
        .user-select( none );
    }

}

.search-overlay {

    &.overlay {
        padding-top: @mobile-header-height;
    }

    // fix clear text button
    .mw-ui-icon-clear.clear {
        top: 30%;
    }

    .mw-ui-icon.mw-ui-icon-small:before {
        background-size: inherit;
    }
    
    // search result pagename
    .page-summary h3 {
    	line-height: 1.4em;
    }

}

/* -------------
       footer
   ------------- */

footer > .post-content {
    margin-top: 1em;
}

// remove the 'RuneScape Wiki' text in the footer
footer > .post-content > h2:first-child {
	display: none;
}

/* -------------
       other
   ------------- */

// gap between search bar and content
#content {
	border-top: none;
}

// we don't have any interlanguage wikis (yet)
#page-actions .language-selector {
	display: none;
}

// reduce eye strain
.overlay-enabled, #content, .search-overlay {
	background-color: @content-bg;
}