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.

This commit is contained in:
Davide P. Cervone 2015-04-09 14:58:24 -04:00
parent 8484e90345
commit ea697f335a
3 changed files with 111 additions and 50 deletions

View File

@ -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);

View File

@ -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

View File

@ -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||{});