MediaWiki:Mobile.less/interface.less

From Old School RuneScape Wiki
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://Old_School_RuneScape_Wiki_background.jpg") #c0a886 no-repeat;
        background-color: #c0a886 !important;
        background-size: 900px;
        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;
        }

    }

    // 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;
}

.mw-body #page-actions {
	border-color: @SIDEBAR;
}

#page-actions .language-selector {
	display: none;
}

//Mobile top icons
.mw-ui-icon-minerva-magnifying-glass:before {
	background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Ctitle%3Emagnifying glass%3C/title%3E%3Cpath fill=%22%23fff%22 fill-rule=%22evenodd%22 d=%22M16.474 15.44c1.147-1.375 1.835-3.21 1.835-5.16a7.98 7.98 0 0 0-8.03-8.03 7.98 7.98 0 0 0-8.03 8.03 7.98 7.98 0 0 0 8.03 8.03c1.72 0 3.21-.46 4.47-1.378l4.473 4.474c.46.46 1.262.46 1.836 0l.69-.688-5.278-5.277zm-11.93-5.16c0-3.21 2.524-5.735 5.735-5.735 3.21 0 5.732 2.524 5.732 5.735 0 3.212-2.524 5.736-5.736 5.736-3.212 0-5.736-2.638-5.736-5.736z%22/%3E%3C/svg%3E") !important;
}

.mw-ui-icon-minerva-mainmenu:before {
    background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2224%22 height%3D%2224%22%3E%3Cpath fill%3D%22%23fff%22 fill-rule%3D%22evenodd%22 d%3D%22M6 15h12a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1zm-1-4v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1zm0-5v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1z%22 %2F%3E%3C%2Fsvg%3E") !important;
}

.mw-ui-icon-minerva-notifications:before {
    background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 48 48%22%3E%3Cpath fill%3D%22%23fff%22 d%3D%22M21.7 6.8v1.3C11.8 9.1 10.6 17 9.6 24c-.7 4.7-1.3 9.6-4.5 12.9-.6.7-.8 1.6-.5 2.5.4.8 1.2 1.4 2.1 1.4H21a2.9 2.9 0 0 0 2.9 2.8 3 3 0 0 0 2.9-2.8h14.4c.9 0 1.8-.6 2.1-1.4.4-.8.2-1.8-.5-2.5-3.2-3.3-3.9-8.2-4.5-12.9-1-7-2.1-14.9-12-15.9V6.8c0-1.3-1-2.3-2.3-2.3s-2.3 1-2.3 2.3zm2.2 5.8c7.8 0 8.7 3.9 9.8 12a35 35 0 0 0 3 11.6H11.2a35 35 0 0 0 3-11.6c1.1-8.1 2-12 9.7-12z%22%2F%3E%3C%2Fsvg%3E") !important;
}

// Temporarily hide GE graph from the infoboxes
.infobox-exchange-data {
    display: none !important;
}

//Infobox page width
.wikitable .infobox {
	width: 100%;
}

#content {
	background-color: @BODY_MAIN !important;
	
	h2 {
		border-bottom-color: @SIDEBAR;
	}
}

//Mobile Diff thank window
#mw-mf-diffview #mw-mf-userinfo {
    background-color: @BODY_LIGHT !important;
    border-top: solid 1px @BODY_BORDER !important;
}
#mw-mf-diffview #mw-mf-userinfo .mw-mf-edit-count div {
    color: #2f3133 !important;
}

// Hatnotes
.hatnote {
	padding: 5px 7px;
	color: black;
	font-size: 0.8em;
	background-color: @BODY_MID;
	margin-bottom: 1px;
	overflow: hidden;	
}