MediaWiki:Vector-darkmode.less

//

/* ------------------------------------------------------------------------------
   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.
   ------------------------------------------------------------------------------ */

/* --------------------
          COLORS
   -------------------- */
@dark-body:          @black-pearl;
@dark-links:         @portage;       // link color
@red-links:          lighten( @flamingo, 10% );
@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;

@mp-text-light: fade( @white, 90% );

/* --------------------
         IMPORTS
   -------------------- */
@dir: 'MediaWiki:Vector-darkmode.less';
@common: 'MediaWiki:Common.less';

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

// Define dark mode colors post import since Common variables with
// the same name would squash them otherwise. Should be extracted out to css vars.
@ADMIN_BLUE: #0087ff;
@BEARCAT_GREEN: #00ff55;
@AWB_PURPLE: #f319ff;
@JMOD_CROWN: "Jagex_small_logo_dark.png";

/* 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 {

	// Variables
	// 2022-04-04 Note: There is an ongoing migration to convert most of darkmode
	// to use variables. Some variables are temporarily here until everything is
	// ready. See MediaWiki:Test.less for the current progress.
	--filter-black-to-link: invert(63%) sepia(67%) saturate(242%) hue-rotate(182deg) brightness(93%) contrast(94%);
	--transcript-border-color: #596e96;
	--transcript-border-hover-color: #8596b7;
	--filter-transcript-icon: invert(1);
	
	// 22-6-1 Note: Adding the most used variables for now in case anything is
	// not manually dark moded
	--body-background-color: @dark-body;
	--body-main: @dark-page;
	/* actually, we do hacky inverts and such e.g. TimeMediaHandler; let's 
	 * comment these out in the mean time
	 */
//	--body-light: @pickled-bluewood;
//	--body-mid: @cloud-burst;
//	--body-dark: @cloud-burst;
//	--body-border: @waikawa-grey;
	
	--link-color: @dark-links;
	--background-link-color: var(--link-color);
	--redlink-color: @red-links;
	
	--sidebar: @pickled-bluewood;
	
	--ooui-text: @dark-text;
	--ooui-interface: @pickled-bluewood;
	--ooui-interface-border: @waikawa-grey;
	--ooui-window-background: rgba(25,25,25,0.6);
	--ooui-input: #384766;
	--ooui-input-border: #475980;
	--ooui-input-border--hover: #556c9b;
	
	// SVGs
//	--watch-icon: 
//	--unwatch-icon:
	--external-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238cabe6' d='M6 1h5v5L8.86 3.85 4.7 8 4 7.3l4.15-4.16L6 1Z M2 3h2v1H2v6h6V8h1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");

	//Interface
	@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, json
	@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}/dooglemaps.less';        //Doogle Maps
	@import '@{dir}/poll.less';              //Ajaxpoll
	@import '@{dir}/sidebar.less';           //Sidebar (rc widget)
	
	// 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
	@import '@{dir}/listen.less';
	
	// Page Specific
	@import '@{dir}/mainpage.less';          //OSRS Wiki mainpage
	@import '@{dir}/specials.less';          //Special pages
	@import '@{dir}/gadgets.less';           //Gadgets
	@import '@{dir}/transcripts';            //Transcript pages
	@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}/toc.less';               
	@import '@{dir}/tabber.less';            //Tabber design
	@import '@{dir}/oswf.less';              //RS:OSWF
	
	// Misc
	
	#rsw-config {
		color: @dark-text;
	}
	
	//Updated since my last visit message
	.updatedmarker {
		background-color: transparent;
	}
	
	.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle {
		background-color: transparent;
	}
	
	// Search
	.oo-ui-selectWidget .oo-ui-labelElement:not(.oo-ui-optionWidget-selected) .oo-ui-labelElement-label {
		color: @dark-links;
	}
	
	//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-color: @dark-interface-border;
	}

	#p-personal .mw-echo-alert {
		color: #000;
	}
	
	//background when opening file insertion widget in source editor
	//possibly other stuff too
	.ui-widget-overlay {
		background-color: rgba(25, 25, 25, 0.6);
	}
}