MediaWiki:Mobile.less

From Old School RuneScape Wiki
Jump to: navigation, search
// <pre>
/* ------------------------------------------------------------------------------------------------------
 * This is the root Less file that is parsed to produce [[MediaWiki:Mobile.css]],
 * which affects users of the mobile skin ([[mw:Extension:MobileFrontend]]).
 *
 * To update MediaWiki:Mobile.css from here, click the "Update CSS" button at the top.
 * ------------------------------------------------------------------------------------------------------
 * Less documentation:    <http://lesscss.org/features/>
 * Gadget:                <https://meta.weirdgloop.org/w/MediaWiki:Gadget-Less.js>
 * Core Less JS:          <https://meta.weirdgloop.org/w/MediaWiki:Gadget-Less-core.js>
 * Non-standard mixins:   <https://meta.weirdgloop.org/w/MediaWiki:Gadget-LessMixins.less>
 * Online Less tester:    <http://lesstester.com/>
 * ------------------------------------------------------------------------------------------------------ */
/* Constants */

// color constants
@BUTTON_BORDER: #0c0a06;
@BUTTON_DARK: #18140c;
@BUTTON_LIGHT: #3a301d;

@BODY_MAIN: #e2dbc8;
@BODY_LIGHT: #d8ccb4;
@BODY_MID: #d0bd97;
@BODY_DARK: #b8a282;
@BODY_BORDER: #94866d;

@SIDEBAR: #cfc08d;
@SEARCH_BOX: #efeee6;

@LINK_COLOR: #936039;
@REDLINK_COLOR: #ba0000;
@TEXT_COLOR: #000;

@ADMIN_BLUE: #332e75;
@BEARCAT_GREEN: #13592e;
@AWB_PURPLE: #933b96;
@JMOD_CROWN: "Jagex_small_logo.png";

/* =============
      IMPORTS
   ============= */

@dir: 'MediaWiki:Mobile.less';
@common: 'MediaWiki:Common.less';

// important stuff
@import '@{dir}/fonts.less';              // font imports and font stack definitions
@import '@{common}/variables.less';       // colors, shadows, etc.

// Link colors are being overridden by default skin. If the custom css can be
// loaded after the default css, this wrapper would not be necessary.
body.skin-minerva {
	@import '@{common}/links.less';           // link colors
}

// modifications
@import '@{dir}/interface.less';          // skin/chrome changes
@import '@{common}/highlight.less';

// templates
@import '@{dir}/templates.less';
@import '@{dir}/infobox.less';
@import '@{dir}/storage.less';
@import '@{dir}/tiles.less';
@import '@{dir}/navbox.less';
@import '@{dir}/questdetails.less';

// tables
@import '@{dir}/table.less';

// page-specific styles
@import '@{dir}/mainpage.less';           // main page (obviously)
@import '@{dir}/specials.less';           // special pages

@import '@{common}/messagebox.less';
@import '@{common}/questdetails.less';

// Need to wrap import because default skin styles are too specific.
.mw-body {
	@import '@{common}/tabber.less';
}

@import '@{common}/charts.less';
@import '@{dir}/gecharts.less'; 


/* =============
       OTHER
   ============= */
   
// for HiDPI screens; otherwise icons appear blurry
.pixelate() {
    image-rendering: -moz-crisp-edges; // firefox doesn't support unprefixed
    image-rendering: pixelated; // chrome only supports this value
    image-rendering: crisp-edges; // this is what should be used; only safari supports it
}

.ArchiveList {
	border:solid 1px #ccc;
	margin:5px;
	padding:5px;
	background-color: @BODY_LIGHT; 
	text-align:center; 
	width:120px;
}

.update-redirect {
	text-align: center;
	background: #fffbf1;
	border: 1px solid #909090;
	font-weight: 600;
	font-size: 2em;
	line-height: 1em;
	padding: 1em;
	color: #000 !important;

	&.nuke {
		margin-bottom: 25%;
	}
}

.floornumber-us {
	display: none;
}

.fact-text {
	color: #15f;
	font-style: italic;
	cursor: help;
	border-bottom: dotted 1px black;
}

.content table.messagebox, .messagebox {
    width: auto !important;
}