Files
KaTeX/static/katex.css
Ben Alpert e29fe0c683 Grosser color support for prettier results
Test Plan: `\orange{x}\blue{-4}`, `\orange{x-}\blue{-4}` look the same after desaturation as `x-4` and `x--4`. In addition, `\orange{x}\blue{{-4}}` looks appropriately atrocious (i.e., has no space whatsoever).

Reviewers: emily

Reviewed By: emily

Differential Revision: http://phabricator.khanacademy.org/D3050
2013-07-14 21:34:05 -07:00

167 lines
4.1 KiB
CSS

@import "fonts/fonts.css";
/*
thin space: 1/6 quad
medium space: 2/9 quad
thick space: 5/18 quad
things to do:
^ _ and styles
\sin
\sum, \int, \lim
\frac
\sqrt
big parens
*/
.mathmathmath {
font: normal 1.21em katex_main;
line-height: 1.2;
}
.mathit {
font-family: katex_math;
font-style: italic;
}
.textstyle > .mbin + .minner { margin-left: 0.22222em; }
.textstyle > .mbin + .mop { margin-left: 0.22222em; }
.textstyle > .mbin + .mopen { margin-left: 0.22222em; }
.textstyle > .mbin + .mord { margin-left: 0.22222em; }
.textstyle > .mclose + .mbin { margin-left: 0.22222em; }
.textstyle > .mclose + .minner { margin-left: 0.16667em; }
.mclose + .mop { margin-left: 0.16667em; }
.textstyle > .mclose + .mrel { margin-left: 0.27778em; }
.textstyle > .minner + .mbin { margin-left: 0.22222em; }
.textstyle > .minner + .minner { margin-left: 0.16667em; }
.minner + .mop { margin-left: 0.16667em; }
.textstyle > .minner + .mopen { margin-left: 0.16667em; }
.textstyle > .minner + .mord { margin-left: 0.16667em; }
.textstyle > .minner + .mpunct { margin-left: 0.16667em; }
.textstyle > .minner + .mrel { margin-left: 0.27778em; }
.textstyle > .mop + .minner { margin-left: 0.16667em; }
.mop + .mop { margin-left: 0.16667em; }
.mop + .mord { margin-left: 0.16667em; }
.textstyle > .mop + .mrel { margin-left: 0.27778em; }
.textstyle > .mord + .mbin { margin-left: 0.22222em; }
.textstyle > .mord + .minner { margin-left: 0.16667em; }
.mord + .mop { margin-left: 0.16667em; }
.textstyle > .mord + .mrel { margin-left: 0.27778em; }
.textstyle > .mpunct + .mbin { margin-left: 0.16667em; }
.textstyle > .mpunct + .mclose { margin-left: 0.16667em; }
.textstyle > .mpunct + .minner { margin-left: 0.16667em; }
.textstyle > .mpunct + .mop { margin-left: 0.16667em; }
.textstyle > .mpunct + .mopen { margin-left: 0.16667em; }
.textstyle > .mpunct + .mord { margin-left: 0.16667em; }
.textstyle > .mpunct + .mpunct { margin-left: 0.16667em; }
.textstyle > .mpunct + .mrel { margin-left: 0.16667em; }
.textstyle > .mrel + .minner { margin-left: 0.27778em; }
.textstyle > .mrel + .mop { margin-left: 0.27778em; }
.textstyle > .mrel + .mopen { margin-left: 0.27778em; }
.textstyle > .mrel + .mord { margin-left: 0.27778em; }
.textstyle > .scriptstyle { font-size: 0.66667em; }
.scriptstyle > .scriptscriptstyle { font-size: 0.75em; }
.msub {
vertical-align: bottom;
position: relative;
top: 0.2em;
}
.msup {
position: relative;
top: -0.5em;
}
.msupsub {
display: inline-table;
table-layout: fixed;
vertical-align: middle;
}
.msupsub > .msup, .msupsub > .msub {
display: table-row;
vertical-align: baseline;
}
.mfrac { display: inline-table; }
/* TODO(alpert): Where do these numbers come from? */
.mfrac.textstyle.displaystyle { vertical-align: 0.58em; }
.mfrac.textstyle { vertical-align: 0.50em; }
.mfrac.scriptstyle { vertical-align: 0.50em; }
.mfrac.scriptscriptstyle { vertical-align: 0.6em; }
.mfracnum, .mfracmid, .mfracden {
display: table-row;
text-align: center;
}
.mfracmid > span {
background: black;
display: block;
height: 0.05em;
min-height: 1px;
}
.mfracnum > span {
display: inline-block;
vertical-align: bottom;
}
.mspace {
display: inline-block;
}
.mspace.thinspace {
width: 0.16667em;
}
.mspace.mediumspace {
width: 0.22222em;
}
.mspace.thickspace {
width: 0.27778em;
}
.mspace.quad {
width: 1em;
}
.mspace.qquad {
width: 2em;
}
.llap, .rlap {
width: 0;
position: relative;
}
.llap > span {
position: absolute;
right: 0;
}
.rlap > span {
position: absolute;
left: 0;
}
.blue { color: #6495ed; }
.orange { color: #ffa500; }
.pink { color: #ff00af; }
.red { color: #df0030; }
.green { color: #28ae7b; }
.gray { color: gray; }
.purple { color: #9d38bd; }
.blue > .mfracmid > span { background: #6495ed; }
.orange > .mfracmid > span { background: #ffa500; }
.pink > .mfracmid > span { background: #ff00af; }
.red > .mfracmid > span { background: #df0030; }
.green > .mfracmid > span { background: #28ae7b; }
.gray > .mfracmid > span { background: gray; }
.purple > .mfracmid > span { background: #9d38bd; }