get ready for mw-message-box deprecation

fixes wikimedia-gadgets#2012

Was unable to use Codex, because Codex is usually only loaded on certain pages by certain extensions that use Codex. There is no guarantee it would be loaded and available on the page [[Wikipedia:Twinkle/Preferences]].

The strategy in this patch is to copy paste the necessary CSS from MediaWiki to Morebits.

modules/twinkleconfig.js

@@ -1742,7 +1742,7 @@ Twinkle.config.saveSuccess = function twinkleconfigSaveSuccess(pageobj) {
 	pageobj.getStatusElement().info('successful');
 
 	var noticebox = document.createElement('div');
-	noticebox.className = 'mw-message-box mw-message-box-success';
+	noticebox.className = 'morebits-message-box morebits-message-box-success';
 	noticebox.style.fontSize = '100%';
 	noticebox.style.marginTop = '2em';
 	noticebox.innerHTML = '<p><b>Your Twinkle preferences have been saved.</b></p><p>To see the changes, you will need to <b>clear your browser cache entirely</b> (see <a href="' + mw.util.getUrl('WP:BYPASS') + '" title="WP:BYPASS">WP:BYPASS</a> for instructions).</p>';

morebits.css

@@ -283,7 +283,7 @@ body .ui-dialog.morebits-dialog .morebits-dialog-footerlinks a {
 	display: inline-block;
 }
 
-/* For styling message/warning boxes. Cannot use MediaWiki ombox class because it will be deprecated soon. */
+/* For styling message/warning boxes. These are identical to the versions that used to be in MediaWiki but that were removed. */
 table.morebits-ombox {
     margin: 4px 10%;
     border-collapse: collapse;
@@ -304,3 +304,18 @@ th.morebits-mbox-text, td.morebits-mbox-text {
     padding: 0.25em 0.9em;
     width: 100%;
 }
+.morebits-message-box {
+    background-color: var(--background-color-notice-subtle, #eaecf0);
+    color: var(--color-emphasized, #000);
+    box-sizing: border-box;
+    margin-bottom: 16px;
+    border: 1px solid var(--border-color-notice, #54595d);
+    padding: 12px 24px;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    overflow: hidden;
+}
+.morebits-message-box-success {
+    background-color: var(--background-color-success-subtle, #d5fdf4);
+    border-color: var(--border-color-success, #096450);
+}