Dark mode fixes for ANRFC closer (#268)

* Dark mode fixes

* Use CSS instead of inline JS styles

* Add CSS file

* Delete anrfc-lister.css

* Use internal styles instead

* change changelog

* use direct descendant selector which is more efficient

Author: Matr1x-101

anrfc-lister.js

@@ -36,6 +36,9 @@ CHANGES BY NOVEM LINGUAE:
 - Titles shouldn't have underscores
 - Fixed bug where the script would always give "signature not found" error if you had MediaWiki:Gadget-CommentsInLocalTime.js gadget installed
 
+CHANGES BY OTHERS SINCE THIS WAS FORKED
+- Added dark mode support
+
 NOVEM LINGUAE TODO:
 - test unicode titles
 - test titles with weird punctuation in section names, e.g. ending in ?
@@ -45,6 +48,41 @@ NOVEM LINGUAE TODO:
 
 // <nowiki>
 
+const style = `.anrfc-box {
+	margin: 16px 0px;
+	padding: 16px;
+	background-color: var(--background-color-neutral-subtle, #f8f9fa);
+	color: inherit;
+	border: 1px solid #a2a9b1;
+	font-size: 14px;
+	font-family: sans-serif;
+}
+
+.anrfc-box > h3 {
+	margin: 0 0 16px;
+}
+
+.anrfc-box .anrfc-box-margins {
+	margin-top: 8px;
+}
+
+.mw-ANRFC {
+	margin-left: 8px;
+	font-size: small;
+	font-family: sans-serif;
+}
+
+#ca-anrfc .anrfc-link-active {
+	color: var(--color-destructive, #bf3c2c);
+}
+
+#ca-anrfc .anrfc-link-active:hover {
+	color: var(--color-destructive--hover, #9f3526);
+}
+`;
+
+mw.util.addCSS(style);
+
 class ANRFC {
 	constructor( document, mw, $ ) {
 		this.document = document;
@@ -85,11 +123,11 @@ class ANRFC {
 
 	toggle() {
 		const $anrfcListerLinkInMoreMenu = this.$( '#ca-anrfc a' );
-		if ( $anrfcListerLinkInMoreMenu.css( 'color' ) === 'rgb(255, 0, 0)' ) {
-			$anrfcListerLinkInMoreMenu.css( 'color', '' );
+		if ( $anrfcListerLinkInMoreMenu.hasClass( 'anrfc-link-active' ) ) {
+			$anrfcListerLinkInMoreMenu.removeClass('anrfc-link-active');
 			this.removeLabels();
 		} else {
-			$anrfcListerLinkInMoreMenu.css( 'color', 'red' );
+			$anrfcListerLinkInMoreMenu.addClass('anrfc-link-active');
 			this.addLabels();
 		}
 	}
@@ -115,7 +153,6 @@ class ANRFC {
 			that.$( 'a[indexkey="' + index + '"]' ).on( 'click', function () {
 				that.addForm( this );
 			} );
-			that.$( 'a.mw-ANRFC' ).css( { 'margin-left': '8px', 'font-size': 'small', 'font-family': 'sans-serif' } );
 		} );
 	}
 
@@ -137,16 +174,8 @@ class ANRFC {
 
 	getFormHtmlAndSetFormListeners( keyId ) {
 		const $anrfcBox = this.$( '<div>', {
-			id: keyId
-		} );
-
-		$anrfcBox.css( {
-			margin: '16px 0',
-			padding: '16px',
-			'background-color': '#f3f3f3',
-			border: '1px solid grey',
-			'font-size': '14px',
-			'font-family': 'sans-serif'
+			id: keyId,
+			class: "anrfc-box"
 		} );
 
 		const items = [];
@@ -184,21 +213,17 @@ class ANRFC {
 			label: 'Cancel'
 		} );
 
-		$anrfcBox.append( '<h3 style="margin: 0 0 16px;">List this discussion on <a href="/wiki/Wikipedia:Closure_requests" target="_blank">Wikipedia:Closure requests</a></h3>' );
+		$anrfcBox.append( '<h3>List this discussion on <a href="/wiki/Wikipedia:Closure_requests" target="_blank">Wikipedia:Closure requests</a></h3>' );
 		let wrapper = this.document.createElement( 'div' );
 		this.$( wrapper ).append( '<p>Under section: </p>' );
 		this.$( wrapper ).append( dropDown.$element );
 		$anrfcBox.append( wrapper );
 
 		wrapper = this.document.createElement( 'div' );
-		this.$( wrapper ).css( { 'margin-top': '8px' } );
+		this.$( wrapper ).addClass( 'anrfc-box-margins' );
 		this.$( wrapper ).append( messageInput.$element );
-		this.$( wrapper ).append( this.$( submitButton.$element ).css( {
-			'margin-top': '8px'
-		} ) );
-		this.$( wrapper ).append( this.$( cancelButton.$element ).css( {
-			'margin-top': '8px'
-		} ) );
+		this.$( wrapper ).append( this.$( submitButton.$element ).addClass( 'anrfc-box-margins' ));
+		this.$( wrapper ).append( this.$( cancelButton.$element ).addClass( 'anrfc-box-margins' ));
 		$anrfcBox.append( wrapper );
 
 		submitButton.on( 'click', () => {