diff --git a/unpacked/extensions/HelpDialog.js b/unpacked/extensions/HelpDialog.js index 9d9e80a02..09365fd26 100644 --- a/unpacked/extensions/HelpDialog.js +++ b/unpacked/extensions/HelpDialog.js @@ -59,13 +59,34 @@ "max-height":"20em", "max-width":"30em", "background-color":"#EEEEEE" }, - ".MathJax_Menu_Close": { - position:"absolute", - width:"21px", height:"21px", - top:".2em", right:".2em", - cursor:"pointer", - "font-weight": "bold", - "font-size": "1.33em" + "#MathJax_HelpClose": { + position:"absolute", top:".2em", right:".2em", + 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_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",{ - className: "MathJax_Menu_Close", - onclick: HELP.Remove}, - ["\u00D7"] + ["span",{id: "MathJax_HelpClose", onclick: HELP.Remove}, + [["span",{},["\u00D7"]]] ] ])); LOCALE.setCSS(help); diff --git a/unpacked/extensions/MathEvents.js b/unpacked/extensions/MathEvents.js index 2a8ff98ab..49853e69b 100644 --- a/unpacked/extensions/MathEvents.js +++ b/unpacked/extensions/MathEvents.js @@ -43,9 +43,8 @@ hcolor: "#83A" // haze color }, button: { - x: -4, y: -3, // menu button offsets - 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 + x: -6, y: -3, // menu button offsets + wx: -2 // button offset for full-width equations }, 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 - // - if (HUB.Browser.isMobile) { - var arrow = CONFIG.styles[".MathJax_Hover_Arrow"]; - arrow.width = "25px"; arrow.height = "18px"; - CONFIG.button.x = -6; - } + /* + * // + * // Mobile screens are small, so use larger version of arrow + * // + * if (HUB.Browser.isMobile) { + * var arrow = CONFIG.styles[".MathJax_Hover_Arrow"]; + * arrow.width = "25px"; arrow.height = "18px"; + * CONFIG.button.x = -6; + * } + */ // // Set up browser-specific values diff --git a/unpacked/extensions/MathMenu.js b/unpacked/extensions/MathMenu.js index 9f866a6df..08b32b2c6 100644 --- a/unpacked/extensions/MathMenu.js +++ b/unpacked/extensions/MathMenu.js @@ -158,21 +158,43 @@ color: (isPC ? "HighlightText" : "white") }, - ".MathJax_Menu_Close": { - position:"absolute", - width:"21px", height:"21px", - top:".2em", right:".2em", - cursor:"pointer", - "font-weight": "bold", - "font-size": "1.33em" + "#MathJax_AboutClose": { + top:".2em", right:".2em" }, - ".MathJax_Menu_Mobile_Close": { - position:"absolute", - width:"1em", height:"1em", - top:"0", left:"0", - "font-weight": "bold", - "font-size": "1.33em" + ".MathJax_Menu .MathJax_MenuClose": { + top:"-10px", left:"-10px" + }, + + ".MathJax_MenuClose": { + 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",{ - className: "MathJax_Menu_Close", - onclick: MENU.About.Remove}, - "\u00D7" - ] + ["span",{className:"MathJax_MenuClose",id:"MathJax_AboutClose",onclick:MENU.About.Remove}, + [["span",{},"\u00D7"]]] ]); MathJax.Localization.setCSS(about); var doc = (document.documentElement||{});