From Old School RuneScape Wiki
Jump to: navigation, search
// <pre>
/* ------------------------------------------------------------------------------
   This is the root LESS file that is parsed to produce [[MediaWiki:Vector-darkmode.css]].

   Subpages can be found at [[Special:PrefixIndex/MediaWiki:Vector-darkmode.less/]].

   To update [[MediaWiki:Vector-darkmode.css]] from here, users with the appropriate
   permissions can click the "Update CSS" button found to the left of the edit button.
   ------------------------------------------------------------------------------ */

/* --------------------
   -------------------- */
@dark-body:          @black-pearl;
@dark-links:         @portage;       // link color
@dark-links-escape : escape("@{dark-links}"); // For use in SVGs
@dark-links-lighter: lighten(@dark-links, 20%); // Used on hover effect
@dark-links-lighter-escape: escape("@{dark-links-lighter}"); // For use in SVGs
@dark-page:          @big-stone;     // page bg color
@dark-text:          lighten( @portage, 15% );

@dark-wikitable-header:             @cloud-burst;
@dark-wikitable-background:         @pickled-bluewood;
@dark-wikitable-background-lighter: lighten(@dark-wikitable-background, 20%); // Used on hover effect
@dark-wikitable-background-darker:  darken(@dark-wikitable-background, 20%); 
@dark-wikitable-border:             @big-stone;

@dark-infobox-header:       @big-stone;
@dark-infobox-subheader:    @cloud-burst;
@dark-infobox-background:   @pickled-bluewood;
@dark-infobox-border:       @waikawa-grey;

@dark-interface-border: @waikawa-grey;
@dark-button: #617EBC;

@bold-green: #41f474;
@bold-red: #f4425c;

@ADMIN_BLUE: #0087ff;
@BEARCAT_GREEN: #00ff55;
@AWB_PURPLE: #f319ff;
@JMOD_CROWN: "Jagex_small_logo_dark.png";

@mp-text-light: fade( @white, 90% );
/* --------------------
   -------------------- */
@dir: 'MediaWiki:Vector-darkmode.less';
@common: 'MediaWiki:Common.less';

@import '@{common}/variables.less';      //Colours, shadows, etc.

/* The following imports are nested inside body.wgl-darkmode for good reason.
 * Please do not change this. It is needed for "hot loading" darkmode when the
 * user tries to switch to it. */
body.wgl-darkmode {
	@import '@{dir}/interface.less';         //MediaWiki messages, anything outside mw-body
	@import '@{dir}/tooltips.less';
	@import '@{dir}/button.less';            //Switch infobox buttons and such
	@import '@{dir}/elements.less';          //HTML elements
	@import '@{dir}/links.less';             //Link colours
	@import '@{dir}/diffs.less';             //Revision diffs
	@import '@{dir}/files.less';             //Files - images, audio, galleries
	@import '@{dir}/config.less';            //Citation tooltip popups
	@import '@{common}/highlight.less';      //Usergroup colouring; uses colour vars defined above
	@import '@{dir}/ooui.less';              //Ooui 
	@import '@{dir}/gecharts.less';          //Grand exchange charts
	@import '@{dir}/fields.less';            //Text input fields 
	// Editors
	@import '@{dir}/codehighlight.less';     //Code highlight
	@import '@{dir}/aceeditor.less';         //ace editor (for css, js, lua, etc.)
	@import '@{dir}/visualeditor.less';      //Vised
	@import '@{dir}/sourceeditor.less';      //Source editor styling
	// Templates
	@import '@{dir}/templates.less';         //Various single use templates
	@import '@{dir}/wikitables.less';        //Wikitables and infoboxes
	@import '@{dir}/messageboxes.less';      //Messageboxes
	@import '@{dir}/navboxes.less';          //Bottom navboxes
	@import '@{dir}/tablebg.less';           //Drop tables
	// Page Specific
	@import '@{dir}/mainpage.less';          //OSRS Wiki mainpage
	@import '@{dir}/specials.less';          //Special pages
	@import '@{dir}/gadgets.less';           //Gadgets
	@import '@{dir}/maintenance.less';       //RS:Maintenance & RS:Administrator Requests
	@import '@{dir}/prefs.less';             //Special:Preferences
	@import '@{dir}/rc.less';                //Recent changes
	@import '@{dir}/smw.less';          	 // SMW search and property pages
	@import '@{dir}/activediscussions.less';
	@import '@{dir}/tabber.less';            //Tabber design
	// Misc
	//AllPages, BlockList, etc
	.mw-datatable td {
	    background-color: @dark-wikitable-background;
	.mw-datatable th {
	    background-color: @dark-wikitable-header;
	.mw-datatable, .mw-datatable td, .mw-datatable th {
	    border: 1px solid @dark-wikitable-border;
	//<pre> and <code>
	.mw-parser-output {
	    pre {
	        background-color: @dark-wikitable-background;
	        border: 1px solid #172136;
	        line-height: 14px;
	        overflow: auto;
	        padding: 12px;
	        word-wrap: normal;
	    code {
	        background-color: @dark-wikitable-background;
	        border: 1px solid #172136;
	        border-radius: 2px;
	        padding: 1px 4px;
	//Notification page toolbar
	.mw-echo-ui-notificationsInboxWidget-toolbarWrapper {
	//More menu dropdown
	.menu {
		background-color: #212D43 !important;
		border:none !important;
	//Title parenthesis
	.title-parenthesis {
	    color: #9AA4B7;
	    font-size: 80%;
	.relativelocation {
	    background-color: #212D43;
	// Logo hover - Don't implement into Common {
	    filter: grayscale(80%);
	    transition: ease 0.4s;
	    -webkit-transition: ease 0.4s;
	} {
	    filter: grayscale(0%);
	    transition: ease 0.4s;
	    -webkit-transition: ease 0.4s;
	// Transparent image backgrounds 
	.thumbimage {
	    background: none;
	// Edit options
	.editOptions {
	    color: @dark-text;
	// MP Poll misc 
	.ajaxpoll .ajaxpoll-misc,
	.ajaxpoll .ajaxpoll-info {
	    color: @dark-text;
	// Watercooler "Last edited"
	.forumlist td.forum_edited a {
	    color: @dark-text;
	#rsw-config {
		color: @dark-text;
	//Page Category Shadows
	.catlinks {
	    box-shadow: 1px 1px 1px @dark-interface-border;
	   -moz-box-shadow: 1px 1px 1px @dark-interface-border;
	   -webkit-box-shadow: 1px 1px 1px @dark-interface-border;
	//Ajaxpoll stuff
	.ajaxpoll .ajaxpoll-hover-revoke {
		background: @dark-wikitable-background-lighter;
	        border-radius: 3px;
	.ajaxpoll .ajaxpoll-ajax {
	    background: @dark-page;
	.mw-changeslist-legend {
	    border: 1px solid @dark-interface-border;
	//Catch-all no darkmode tag
	.nodarkmode {
	//Updated since my last visit message
	.updatedmarker {
	    background-color: transparent;
	//Sort later
	.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
	    background-color: transparent;
	    border: 1px solid @dark-interface-border;
	.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle {
	// Search
	.oo-ui-selectWidget .oo-ui-labelElement:not(.oo-ui-optionWidget-selected) .oo-ui-labelElement-label {
	    color: @dark-links;
	//Calendar interface days of previous/next month
	.mw-widget-calendarWidget-day-additional {
		color: #6f7a85 !important;
	//Calendar interface
	.mw-widget-dateInputWidget-calendar {
		background-color: @big-stone;
	//Day of the Month inside Calendar interface
	.mw-widget-calendarWidget-day {
		color: #CBD9F4;
	//Date input
	.mw-widget-dateInputWidget-handle {
		background-color: @pickled-bluewood;
	//Mo, Tue, We,.. etc. inside Calendar interface
	.mw-widget-calendarWidget-day-heading {
		color: #e8e8e8;
	//Search results info
	.results-info {
	    color: @dark-text;
	//Readermode dropdown menu - to be moved
	&.wgl-readermode #ca-reader-dropdown {
	    background: @dark-page;
	    border: 1px solid @dark-interface-border;
	    box-shadow: 0 0.5rem 0.5rem rgba(0,0,0,0.3);
	.mw-rcfilters-ui-changesListWrapperWidget-previousChangesIndicator {
	    border-top: 2px solid @dark-interface-border;
	.oo-ui-panelLayout-framed {
	    border: 1px solid @dark-interface-border;
	#p-personal a {
	    color: #8cabe6;

	#p-personal .mw-echo-alert {
    	color: #000;
	#mw-searchoptions h4 {
	    color: @dark-text;
	#mw-searchoptions {
	    color: @dark-text;