fix twinkle settings, other misc fixes

wikimedia-gadgets · Oct 17, 2024 · 736345f · 736345f
1 parent 75bde74
commit 736345f
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 11 deletions.
diff --git a/modules/twinkleconfig.js b/modules/twinkleconfig.js
@@ -991,9 +991,10 @@ Twinkle.config.init = function twinkleconfigInit() {
 		if (!document.getElementById('twinkle-config')) {
 			return;  // maybe the page is misconfigured, or something - but any attempt to modify it will be pointless
 		}
-
-		// set style (the url() CSS function doesn't seem to work from wikicode - ?!)
-		document.getElementById('twinkle-config-titlebar').style.backgroundImage = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAMAAAB%2FqqA%2BAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEhQTFRFr73ZobTPusjdsMHZp7nVwtDhzNbnwM3fu8jdq7vUt8nbxtDkw9DhpbfSvMrfssPZqLvVztbno7bRrr7W1d%2Fs1N7qydXk0NjpkW7Q%2BgAAADVJREFUeNoMwgESQCAAAMGLkEIi%2FP%2BnbnbpdB59app5Vdg0sXAoMZCpGoFbK6ciuy6FX4ABAEyoAef0BXOXAAAAAElFTkSuQmCC)';
+
+		// set style to nothing to prevent conflict with external css
+		document.getElementById('twinkle-config').removeAttribute("style")
+		document.getElementById('twinkle-config-titlebar').removeAttribute("style")
 
 		var contentdiv = document.getElementById('twinkle-config-content');
 		contentdiv.textContent = '';  // clear children
@@ -1258,9 +1259,8 @@ Twinkle.config.init = function twinkleconfigInit() {
 
 				// add help tip
 				cell = document.createElement('td');
-				cell.style.fontSize = '90%';
+				cell.className = 'twinkle-config-helptip';
 
-				cell.style.color = 'gray';
 				if (pref.helptip) {
 					// convert mentions of templates in the helptip to clickable links
 					cell.innerHTML = pref.helptip.replace(/{{(.+?)}}/g,
@@ -1287,8 +1287,6 @@ Twinkle.config.init = function twinkleconfigInit() {
 
 		var footerbox = document.createElement('div');
 		footerbox.setAttribute('id', 'twinkle-config-buttonpane');
-		footerbox.style.backgroundColor = '#BCCADF';
-		footerbox.style.padding = '0.5em';
 		var button = document.createElement('button');
 		button.setAttribute('id', 'twinkle-config-submit');
 		button.setAttribute('type', 'submit');

diff --git a/morebits.css b/morebits.css
@@ -15,8 +15,9 @@ html {
 	--morebits-color-tooltip: #0000cd;
 	--morebits-color-info: #228B22;
 	--morebits-color-warning: #FF4500;
+	--morebits-color-titlebar-links: #3062AD;
 	--morebits-bgcolor-dialog: #F0F8FF;
-	--morebits-bgcolor-titlebar: #BCCADF
+	--morebits-bgcolor-titlebar: #BCCADF;
 }
 
 @media screen {
@@ -26,8 +27,9 @@ html {
 		--morebits-color-tooltip: #7A7AFF;
 		--morebits-color-info: #6BDB6B;
 		--morebits-color-warning: #FFC7B3;
+		--morebits-color-titlebar-links: #8BADDF;
 		--morebits-bgcolor-dialog: #17244A;
-		--morebits-bgcolor-titlebar: #2F4165
+		--morebits-bgcolor-titlebar: #2F4165;
 	}
 }
 
@@ -38,6 +40,7 @@ html {
 		--morebits-color-tooltip: #7A7AFF;
 		--morebits-color-info: #6BDB6B;
 		--morebits-color-warning: #FFC7B3;
+		--morebits-color-titlebar-links: #8BADDF;
 		--morebits-bgcolor-dialog: #17244A;
 		--morebits-bgcolor-titlebar: #2F4165
 	}
@@ -309,7 +312,7 @@ body .ui-dialog.morebits-dialog .ui-dialog-buttonpane button {
 }
 
 body .ui-dialog.morebits-dialog .morebits-dialog-footerlinks a {
-	color: #3062AD;
+	color: var(--morebits-color-titlebar-links, #3062AD);
 }
 
 .morebits-dialog-buttons[data-empty] + .morebits-dialog-footerlinks {
@@ -347,8 +350,38 @@ th.morebits-mbox-text, td.morebits-mbox-text {
     width: 100%;
 }
 
+/* Twinkle config */
+#twinkle-config {
+	border: 1px solid #666;
+	background: var(--morebits-bgcolor-dialog, #F0F8FF);
+	color: inherit;
+}
+
+#twinkle-config label {
+	color: var(--color-base, #202122);
+}
+
+#twinkle-config-titlebar {
+	background: var(--morebits-bgcolor-titlebar, #BCCADF);
+	color: inherit;
+}
+
+#twinkle-config-buttonpane {
+	background: var(--morebits-bgcolor-titlebar, #BCCADF);
+	color: inherit;
+	padding: 0.5em;
+}
+
+.twinkle-config-helptip {
+	font-size: 90%;
+	color: var(--color-subtle, #54595d);
+}
+
 /* Override select2 silliness */
-.select2, .select2-container, .select2-selection, .select2-results {
+.morebits-dialog-content .select2,
+.morebits-dialog-content .select2-container,
+.morebits-dialog-content .select2-selection,
+.morebits-dialog-content .select2-results {
     background: var(--background-color-base, #fff) !important;
     color: inherit !important;
 }