Make text-based close boxes appear closer to the original versions, and remove data URI for image in MathEvents. One motivatino for the change is the mobile menu close icon needs a background, which was missing in the previous version.

unpacked/extensions/HelpDialog.js

@@ -59,13 +59,34 @@
         "max-height":"20em", "max-width":"30em", "background-color":"#EEEEEE"
       },
       
-      ".MathJax_Menu_Close": {
+      "#MathJax_HelpClose": {
-          position:"absolute",
+        position:"absolute", top:".2em", right:".2em",
-          width:"21px", height:"21px", 
+        cursor:"pointer",
-          top:".2em", right:".2em",
+        display:"inline-block",
-          cursor:"pointer",
+        border:"2px solid #AAA",
-          "font-weight": "bold", 
+        "border-radius":"18px",
-          "font-size": "1.33em"
+        "-webkit-border-radius": "18px",             // Safari and Chrome
+        "-moz-border-radius": "18px",                // Firefox
+        "-khtml-border-radius": "18px",              // Konqueror
+        "font-family":"'Courier New',Courier",
+        "font-size":"24px",
+        color:"#F0F0F0"
+      },
+      "#MathJax_HelpClose span": {
+        display:"block", "background-color":"#AAA", border:"1.5px solid",
+        "border-radius":"18px",
+        "-webkit-border-radius": "18px",             // Safari and Chrome
+        "-moz-border-radius": "18px",                // Firefox
+        "-khtml-border-radius": "18px",              // Konqueror
+        "line-height":0, 
+        padding:"8px 0 6px"     // may need to be browser-specific
+      },
+      "#MathJax_HelpClose:hover": {
+        color:"white!important",
+        border:"2px solid #CCC!important"
+      },
+      "#MathJax_HelpClose:hover span": {
+        "background-color":"#CCC!important"
       }
     }
   });
@@ -127,10 +148,8 @@
         ]
       ]],
       ["a",{href:"http://www.mathjax.org/"},["www.mathjax.org"]],
-      ["span",{
+      ["span",{id: "MathJax_HelpClose", onclick: HELP.Remove},
-        className: "MathJax_Menu_Close",
+        [["span",{},["\u00D7"]]]
-        onclick: HELP.Remove},
-        ["\u00D7"]
       ]
     ]));
     LOCALE.setCSS(help);

unpacked/extensions/MathEvents.js

@@ -43,9 +43,8 @@
       hcolor: "#83A"         // haze color
     },       
     button: {
-      x: -4, y: -3,          // menu button offsets
+      x: -6, y: -3,          // menu button offsets
-      wx: -2,                // button offset for full-width equations
+      wx: -2                 // button offset for full-width equations
-      src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAA5CAMAAABJeiYSAAAAUVBMVEX////l5OTY19e2tbW3tbWVk5Owrq6cmpr5+Pj////X19fKycne3d3r6+vy8vKpp6fEwsLR0NCioaG5t7fl5OTT0tK9vLzY19eenJzt7e329vb9tHZmAAAABXRSTlMAQF+vr1FpKV4AAAEuSURBVHhe7dhrjsMgDARg0nRsyLvv7t7/oLtK1FCh3Thg/+wc4JNBExRwzlVH6HOs3G8OsMnBuQpWqVxtZtVuAS5dKE93WZDFegRdHtFqgzbtanm15V8WzWNSaeYNoneLUBoytT7WSJvJsaQvauDd1hikTLuts2jd7dbYQbD2D+Y5w0IrrDDHYr9B9ZldvW9YlGmh/5dqkGuRtPGyJfeixU5L7sWADEvoBRVZz7+oLxRZOAljCZZU2CsyLKGw52IL14Q6odwa05oqLDTJaaqx+DvZeIUFipR/KqykZBOUVizZALWFKTZeZ8VTsYOFRbHxagtNHEtt8RA8GVkAcQJ8/gunYmt6tzjow4sFNGqqwcviXkn1vFrgm1dI/jZTWO+1VB4sqS3v25bvAJbvEz/hAGybD4dbVwAAAABJRU5ErkJggg=="  // button image
     },
     fadeinInc: .2,           // increment for fade-in
     fadeoutInc: .05,         // increment for fade-out
@@ -69,10 +68,33 @@
         display: "inline-block", position:"absolute"
       },
 
-      ".MathJax_Hover_Arrow": {
+      ".MathJax_Menu_Button .MathJax_Hover_Arrow": {
         position:"absolute",
-        width:"15px", height:"11px",
+        cursor:"pointer",
-        cursor:"pointer"
+        display:"inline-block",
+        border:"2px solid #AAA",
+        "border-radius":"4px",
+        "-webkit-border-radius": "4px",           // Safari and Chrome
+        "-moz-border-radius": "4px",              // Firefox
+        "-khtml-border-radius": "4px",            // Konqueror
+        "font-family":"'Courier New',Courier",
+        "font-size":"9px",
+        color:"#F0F0F0"
+      },
+      ".MathJax_Menu_Button .MathJax_Hover_Arrow span": {
+        display:"block",
+        "background-color":"#AAA",
+        border:"1px solid",
+        "border-radius":"3px",
+        "line-height":0,
+        padding:"4px"
+      },
+      ".MathJax_Hover_Arrow:hover": {
+        color:"white!important",
+        border:"2px solid #CCC!important"
+      },
+      ".MathJax_Hover_Arrow:hover span": {
+        "background-color":"#CCC!important"
       }
     }
   };
@@ -334,17 +356,17 @@
         ]]
       );
       var button = HTML.Element("span",{
-         isMathJax: true, id:jax.hover.id+"Menu",
+         isMathJax: true, id:jax.hover.id+"Menu", className:"MathJax_Menu_Button",
          style:{display:"inline-block", "z-index": 1, width:0, height:0, position:"relative"}
-        },[["img",{
+        },[["span",{
             className: "MathJax_Hover_Arrow", isMathJax: true, math: math,
-            src: CONFIG.button.src, onclick: this.HoverMenu, jax:JAX.id,
+            onclick: this.HoverMenu, jax:JAX.id,
             style: {
               left:this.Px(bbox.w+dx+dd+(bbox.x||0)+CONFIG.button.x),
               top:this.Px(-bbox.h-dy-dd-(bbox.y||0)-CONFIG.button.y),
               opacity:0, filter:"alpha(opacity=0)"
             }
-          }]]
+          },[["span",{isMathJax:true},"\u25BC"]]]]
       );
       if (bbox.width) {
         frame.style.width = button.style.width = bbox.width;
@@ -502,14 +524,16 @@
     
   };
   
-  //
+  /* 
-  //  Mobile screens are small, so use larger version of arrow
+   * //
-  //
+   * //  Mobile screens are small, so use larger version of arrow
-  if (HUB.Browser.isMobile) {
+   * //
-    var arrow = CONFIG.styles[".MathJax_Hover_Arrow"];
+   * if (HUB.Browser.isMobile) {
-    arrow.width = "25px"; arrow.height = "18px";
+   *   var arrow = CONFIG.styles[".MathJax_Hover_Arrow"];
-    CONFIG.button.x = -6;
+   *   arrow.width = "25px"; arrow.height = "18px";
-  }
+   *   CONFIG.button.x = -6;
+   * }
+   */
   
   //
   //  Set up browser-specific values

unpacked/extensions/MathMenu.js

@@ -158,21 +158,43 @@
         color: (isPC ? "HighlightText" : "white")
       },
       
-      ".MathJax_Menu_Close": {
+      "#MathJax_AboutClose": {
-          position:"absolute",
+        top:".2em", right:".2em"
-          width:"21px", height:"21px", 
-          top:".2em", right:".2em",
-          cursor:"pointer",
-          "font-weight": "bold", 
-          "font-size": "1.33em"
       },
-      ".MathJax_Menu_Mobile_Close": {
+      ".MathJax_Menu .MathJax_MenuClose": {
-          position:"absolute",
+        top:"-10px", left:"-10px"
-          width:"1em", height:"1em", 
+      },
-          top:"0", left:"0",
+      
-          "font-weight": "bold", 
+      ".MathJax_MenuClose": {
-          "font-size": "1.33em"
+        position:"absolute",
+        cursor:"pointer",
+        display:"inline-block",
+        border:"2px solid #AAA",
+        "border-radius":"18px",
+        "-webkit-border-radius": "18px",             // Safari and Chrome
+        "-moz-border-radius": "18px",                // Firefox
+        "-khtml-border-radius": "18px",              // Konqueror
+        "font-family":"'Courier New',Courier",
+        "font-size":"24px",
+        color:"#F0F0F0"
+      },
+      ".MathJax_MenuClose span": {
+        display:"block", "background-color":"#AAA", border:"1.5px solid",
+        "border-radius":"18px",
+        "-webkit-border-radius": "18px",             // Safari and Chrome
+        "-moz-border-radius": "18px",                // Firefox
+        "-khtml-border-radius": "18px",              // Konqueror
+        "line-height":0, 
+        padding:"8px 0 6px"     // may need to be browser-specific
+      },
+      ".MathJax_MenuClose:hover": {
+        color:"white!important",
+        border:"2px solid #CCC!important"
+      },
+      ".MathJax_MenuClose:hover span": {
+        "background-color":"#CCC!important"
       }
+
     }
   });
   
@@ -219,10 +241,9 @@
       for (var i = 0, m = this.items.length; i < m; i++) {this.items[i].Create(menu)}
       if (MENU.isMobile) {
         HTML.addElement(menu,"span",{
-          className: "MathJax_Menu_Mobile_Close", menu: parent,
+          className: "MathJax_MenuClose", menu: parent,
           ontouchstart: MENU.Close, ontouchend: FALSE, onmousedown: MENU.Close, onmouseup: FALSE
-        },"\u00D7"
+        },[["span",{},"\u00D7"]]);
-        );
       }
       
       div.appendChild(menu);
@@ -668,11 +689,8 @@
         "background-color":"#E4E4E4", padding:".4em .6em", border:"1px inset"
       }},jax],["br"],["br"],
       ["a",{href:"http://www.mathjax.org/"},["www.mathjax.org"]],
-      ["span",{
+      ["span",{className:"MathJax_MenuClose",id:"MathJax_AboutClose",onclick:MENU.About.Remove},
-        className: "MathJax_Menu_Close",
+        [["span",{},"\u00D7"]]]
-        onclick: MENU.About.Remove},
-        "\u00D7"
-      ]
     ]);
     MathJax.Localization.setCSS(about);
     var doc = (document.documentElement||{});