mirror of
https://github.com/Smaug123/KaTeX
synced 2025-10-05 11:18:39 +00:00
b866cd5224
* Fix interaction between styles and sizes by implementing styles as sizes. Rather than having both `textstyle` CSS classes and `size5` CSS classes affect the font size (and step on each other), implement sizes more the way TeX does: a command like `\displaystyle` changes the current size. This is actually a simplification, since now only `size` affects the size. Simplifies CSS and computation. Many screenshotter tests change; they change to be more like TeX. For instance, `\sqrt` fixes some discrepancies in size treatment. Also: Remove the `Options.withX()` methods in favor of `.havingX()`, which might return the same `options`. Remove `Style.cls()` and `Style.reset()`. Remove `Options.reset()`. You should never modify an `Options`; they should change only by the `havingX()` methods. * Implement TeX sizing for scriptsize/scriptscriptsize. At every size level. Also make the sizes match TeX to the last decimal. * Review comments.
1177 lines
31 KiB
Plaintext
1177 lines
31 KiB
Plaintext
@import "fonts.less";
|
|
|
|
// The mu unit is defined as 1/18 em
|
|
@mu: 1.0/18.0em;
|
|
|
|
.katex-display {
|
|
display: block;
|
|
margin: 1em 0;
|
|
text-align: center;
|
|
|
|
> .katex {
|
|
display: inline-block;
|
|
text-align: initial;
|
|
}
|
|
}
|
|
|
|
.katex {
|
|
font: normal 1.21em KaTeX_Main, Times New Roman, serif;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
|
|
// Protect elements inside .katex from inheriting text-indent.
|
|
text-indent: 0;
|
|
|
|
// Prevent a rendering bug that misplaces \vec in Chrome.
|
|
text-rendering: auto;
|
|
|
|
// Prevent background resetting on elements in Windows's high-contrast
|
|
// mode, while still allowing background/foreground setting on root .katex
|
|
* { -ms-high-contrast-adjust: none !important; }
|
|
|
|
.katex-html {
|
|
// Making .katex inline-block allows line breaks before and after,
|
|
// which is undesireable ("to $x$,"). Instead, adjust the .katex-html
|
|
// style and put nowrap on the inline .katex element.
|
|
display: inline-block;
|
|
}
|
|
|
|
.katex-mathml {
|
|
// Accessibility hack to only show to screen readers
|
|
// Found at: http://a11yproject.com/posts/how-to-hide-content/
|
|
position: absolute;
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
padding: 0;
|
|
border: 0;
|
|
height: 1px;
|
|
width: 1px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.base {
|
|
display: inline-block;
|
|
}
|
|
|
|
.strut {
|
|
display: inline-block;
|
|
}
|
|
|
|
.mathrm {
|
|
font-style: normal;
|
|
}
|
|
|
|
.textit {
|
|
font-style: italic;
|
|
}
|
|
|
|
.mathit {
|
|
font-family: KaTeX_Math;
|
|
font-style: italic;
|
|
}
|
|
|
|
.mathbf {
|
|
font-family: KaTeX_Main;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.amsrm {
|
|
font-family: KaTeX_AMS;
|
|
}
|
|
|
|
.mathbb {
|
|
font-family: KaTeX_AMS;
|
|
}
|
|
|
|
.mathcal {
|
|
font-family: KaTeX_Caligraphic;
|
|
}
|
|
|
|
.mathfrak {
|
|
font-family: KaTeX_Fraktur;
|
|
}
|
|
|
|
.mathtt {
|
|
font-family: KaTeX_Typewriter;
|
|
}
|
|
|
|
.mathscr {
|
|
font-family: KaTeX_Script;
|
|
}
|
|
|
|
.mathsf {
|
|
font-family: KaTeX_SansSerif;
|
|
}
|
|
|
|
.mainit {
|
|
font-family: KaTeX_Main;
|
|
font-style: italic;
|
|
}
|
|
|
|
// This value is also used in fontMetrics.js, if you change it make sure the
|
|
// values match.
|
|
@ptperem: 10.0;
|
|
@nulldelimiterspace: 1.2em / @ptperem;
|
|
|
|
@thinspace: 0.16667em; // 3mu
|
|
@mediumspace: 0.22222em; // 4mu
|
|
@thickspace: 0.27778em; // 5mu
|
|
|
|
// These spacings apply in textstyle and displaystyle.
|
|
.mord {
|
|
& + .mord {}
|
|
& + .mop { margin-left: @thinspace; }
|
|
& + .mbin { margin-left: @mediumspace; }
|
|
& + .mrel { margin-left: @thickspace; }
|
|
& + .mopen {}
|
|
& + .mclose {}
|
|
& + .mpunct {}
|
|
& + .minner { margin-left: @thinspace; }
|
|
}
|
|
|
|
.mop {
|
|
& + .mord { margin-left: @thinspace; }
|
|
& + .mop { margin-left: @thinspace; }
|
|
& + .mbin {}
|
|
& + .mrel { margin-left: @thickspace; }
|
|
& + .mopen {}
|
|
& + .mclose {}
|
|
& + .mpunct {}
|
|
& + .minner { margin-left: @thinspace; }
|
|
}
|
|
|
|
.mbin {
|
|
& + .mord { margin-left: @mediumspace; }
|
|
& + .mop { margin-left: @mediumspace; }
|
|
& + .mbin {}
|
|
& + .mrel {}
|
|
& + .mopen { margin-left: @mediumspace; }
|
|
& + .mclose {}
|
|
& + .mpunct {}
|
|
& + .minner { margin-left: @mediumspace; }
|
|
}
|
|
|
|
.mrel {
|
|
& + .mord { margin-left: @thickspace; }
|
|
& + .mop { margin-left: @thickspace; }
|
|
& + .mbin {}
|
|
& + .mrel {}
|
|
& + .mopen { margin-left: @thickspace; }
|
|
& + .mclose {}
|
|
& + .mpunct {}
|
|
& + .minner { margin-left: @thickspace; }
|
|
}
|
|
|
|
.mopen {
|
|
& + .mord {}
|
|
& + .mop {}
|
|
& + .mbin {}
|
|
& + .mrel {}
|
|
& + .mopen {}
|
|
& + .mclose {}
|
|
& + .mpunct {}
|
|
& + .minner {}
|
|
}
|
|
|
|
.mclose {
|
|
& + .mord {}
|
|
& + .mop { margin-left: @thinspace; }
|
|
& + .mbin { margin-left: @mediumspace; }
|
|
& + .mrel { margin-left: @thickspace; }
|
|
& + .mopen {}
|
|
& + .mclose {}
|
|
& + .mpunct {}
|
|
& + .minner { margin-left: @thinspace; }
|
|
}
|
|
|
|
.mpunct {
|
|
& + .mord { margin-left: @thinspace; }
|
|
& + .mop { margin-left: @thinspace; }
|
|
& + .mbin {}
|
|
& + .mrel { margin-left: @thinspace; }
|
|
& + .mopen { margin-left: @thinspace; }
|
|
& + .mclose { margin-left: @thinspace; }
|
|
& + .mpunct { margin-left: @thinspace; }
|
|
& + .minner { margin-left: @thinspace; }
|
|
}
|
|
|
|
.minner {
|
|
& + .mord { margin-left: @thinspace; }
|
|
& + .mop { margin-left: @thinspace; }
|
|
& + .mbin { margin-left: @mediumspace; }
|
|
& + .mrel { margin-left: @thickspace; }
|
|
& + .mopen { margin-left: @thinspace; }
|
|
& + .mclose {}
|
|
& + .mpunct { margin-left: @thinspace; }
|
|
& + .minner { margin-left: @thinspace; }
|
|
}
|
|
|
|
// These tighter spacings apply in scriptstyle and scriptscriptstyle.
|
|
.mord.mtight { margin-left: 0; }
|
|
.mop.mtight { margin-left: 0; }
|
|
.mbin.mtight { margin-left: 0; }
|
|
.mrel.mtight { margin-left: 0; }
|
|
.mopen.mtight { margin-left: 0; }
|
|
.mclose.mtight { margin-left: 0; }
|
|
.mpunct.mtight { margin-left: 0; }
|
|
.minner.mtight { margin-left: 0; }
|
|
|
|
.mord {
|
|
& + .mop.mtight { margin-left: @thinspace; }
|
|
}
|
|
|
|
.mop {
|
|
& + .mord.mtight { margin-left: @thinspace; }
|
|
& + .mop.mtight { margin-left: @thinspace; }
|
|
}
|
|
|
|
.mclose {
|
|
& + .mop.mtight { margin-left: @thinspace; }
|
|
}
|
|
|
|
.minner {
|
|
& + .mop.mtight { margin-left: @thinspace; }
|
|
}
|
|
|
|
.vlist {
|
|
display: inline-block;
|
|
|
|
> span {
|
|
display: block;
|
|
height: 0;
|
|
position: relative;
|
|
|
|
> span {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.baseline-fix {
|
|
display: inline-table;
|
|
table-layout: fixed;
|
|
}
|
|
}
|
|
|
|
.msupsub {
|
|
text-align: left;
|
|
}
|
|
|
|
.mfrac {
|
|
> span > span {
|
|
text-align: center;
|
|
}
|
|
|
|
.frac-line {
|
|
width: 100%;
|
|
|
|
&:before {
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 1px;
|
|
content: "";
|
|
display: block;
|
|
}
|
|
|
|
&:after {
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 0.04em;
|
|
content: "";
|
|
display: block;
|
|
margin-top: -1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mspace {
|
|
display: inline-block;
|
|
|
|
&.negativethinspace {
|
|
margin-left: -@thinspace;
|
|
}
|
|
|
|
&.thinspace {
|
|
width: @thinspace;
|
|
}
|
|
|
|
&.negativemediumspace {
|
|
margin-left: -@mediumspace;
|
|
}
|
|
|
|
&.mediumspace {
|
|
width: @mediumspace;
|
|
}
|
|
|
|
&.thickspace {
|
|
width: @thickspace;
|
|
}
|
|
|
|
&.sixmuspace {
|
|
width: 0.333333em;
|
|
}
|
|
|
|
&.eightmuspace {
|
|
width: 0.444444em;
|
|
}
|
|
|
|
&.enspace {
|
|
width: 0.5em;
|
|
}
|
|
|
|
&.twelvemuspace {
|
|
width: 0.666667em;
|
|
}
|
|
|
|
&.quad {
|
|
width: 1em;
|
|
}
|
|
|
|
&.qquad {
|
|
width: 2em;
|
|
}
|
|
}
|
|
|
|
.llap,
|
|
.rlap {
|
|
width: 0;
|
|
position: relative;
|
|
|
|
> .inner {
|
|
position: absolute;
|
|
}
|
|
|
|
> .fix {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.llap > .inner {
|
|
right: 0;
|
|
}
|
|
|
|
.rlap > .inner {
|
|
left: 0;
|
|
}
|
|
|
|
.katex-logo {
|
|
.a {
|
|
font-size: 0.75em;
|
|
margin-left: -0.32em;
|
|
position: relative;
|
|
top: -0.2em;
|
|
}
|
|
.t {
|
|
margin-left: -0.23em;
|
|
}
|
|
.e {
|
|
margin-left: -0.1667em;
|
|
position: relative;
|
|
top: 0.2155em;
|
|
}
|
|
.x {
|
|
margin-left: -0.125em;
|
|
}
|
|
}
|
|
|
|
.rule {
|
|
display: inline-block;
|
|
border: solid 0;
|
|
position: relative;
|
|
}
|
|
|
|
.overline .overline-line,
|
|
.underline .underline-line {
|
|
width: 100%;
|
|
|
|
&:before {
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 1px;
|
|
content: "";
|
|
display: block;
|
|
}
|
|
|
|
&:after {
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 0.04em;
|
|
content: "";
|
|
display: block;
|
|
margin-top: -1px;
|
|
}
|
|
}
|
|
|
|
.sqrt {
|
|
> .sqrt-sign {
|
|
position: relative;
|
|
}
|
|
|
|
.sqrt-line {
|
|
width: 100%;
|
|
|
|
&:before {
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 1px;
|
|
content: "";
|
|
display: block;
|
|
}
|
|
|
|
&:after {
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 0.04em;
|
|
content: "";
|
|
display: block;
|
|
margin-top: -1px;
|
|
}
|
|
}
|
|
|
|
> .root {
|
|
// These values are taken from the definition of `\r@@t`,
|
|
// `\mkern 5mu` and `\mkern -10mu`.
|
|
margin-left: 5*@mu;
|
|
margin-right: -10*@mu;
|
|
}
|
|
}
|
|
|
|
.sizing, .fontsize-ensurer {
|
|
display: inline-block;
|
|
|
|
@size1: 0.5;
|
|
@size2: 0.6;
|
|
@size3: 0.7;
|
|
@size4: 0.8;
|
|
@size5: 0.9;
|
|
@size6: 1.0;
|
|
@size7: 1.2;
|
|
@size8: 1.44;
|
|
@size9: 1.728;
|
|
@size10: 2.074;
|
|
@size11: 2.488;
|
|
|
|
.generate-size-change(@from, @to) {
|
|
&.reset-size@{from}.size@{to} {
|
|
@sizeFromVariable: ~"size@{from}";
|
|
@sizeToVariable: ~"size@{to}";
|
|
font-size: (@@sizeToVariable / @@sizeFromVariable) * 1em;
|
|
}
|
|
}
|
|
|
|
.generate-to-size-change(@from, @currTo) when (@currTo =< 11) {
|
|
.generate-size-change(@from, @currTo);
|
|
|
|
.generate-to-size-change(@from, (@currTo + 1));
|
|
}
|
|
|
|
.generate-from-size-change(@currFrom) when (@currFrom =< 11) {
|
|
.generate-to-size-change(@currFrom, 1);
|
|
|
|
.generate-from-size-change((@currFrom + 1));
|
|
}
|
|
|
|
.generate-from-size-change(1);
|
|
}
|
|
|
|
.delimsizing {
|
|
&.size1 { font-family: KaTeX_Size1; }
|
|
&.size2 { font-family: KaTeX_Size2; }
|
|
&.size3 { font-family: KaTeX_Size3; }
|
|
&.size4 { font-family: KaTeX_Size4; }
|
|
|
|
&.mult {
|
|
.delim-size1 > span {
|
|
font-family: KaTeX_Size1;
|
|
}
|
|
.delim-size4 > span {
|
|
font-family: KaTeX_Size4;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nulldelimiter {
|
|
display: inline-block;
|
|
width: @nulldelimiterspace;
|
|
}
|
|
|
|
.delimcenter {
|
|
position: relative;
|
|
}
|
|
|
|
.op-symbol {
|
|
position: relative;
|
|
|
|
&.small-op {
|
|
font-family: KaTeX_Size1;
|
|
}
|
|
&.large-op {
|
|
font-family: KaTeX_Size2;
|
|
}
|
|
}
|
|
|
|
.op-limits {
|
|
> .vlist > span {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.accent {
|
|
> .vlist > span {
|
|
text-align: center;
|
|
}
|
|
|
|
.accent-body > span {
|
|
width: 0;
|
|
}
|
|
|
|
.accent-body.accent-vec > span {
|
|
position: relative;
|
|
// This value is half of the value that the MathJax's makeFF shifts
|
|
// it left. We center it by shifting it half way right again.
|
|
left: 0.326em;
|
|
}
|
|
}
|
|
|
|
.mtable {
|
|
.vertical-separator {
|
|
display: inline-block;
|
|
margin: 0 -0.025em;
|
|
border-right: 0.05em solid black;
|
|
}
|
|
|
|
.arraycolsep {
|
|
display: inline-block;
|
|
}
|
|
|
|
.col-align-c > .vlist {
|
|
text-align: center;
|
|
}
|
|
|
|
.col-align-l > .vlist {
|
|
text-align: left;
|
|
}
|
|
|
|
.col-align-r > .vlist {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
// Define CSS for background-image whose width will match its span width.
|
|
.stretchy {
|
|
width: 100%;
|
|
display: block;
|
|
background-repeat: no-repeat;
|
|
background-position: right center; //right, so that \widehat will shift right when it is shortened
|
|
background-size: 100% 100%;
|
|
|
|
&:before,
|
|
&:after {
|
|
content: "";
|
|
}
|
|
}
|
|
|
|
// Lengthen the extensible arrows via padding.
|
|
.x-arrow > span > span {
|
|
text-align: center;
|
|
> span > .mord {
|
|
padding: 0 0.5em 0 0.5em;
|
|
}
|
|
}
|
|
|
|
.mover > span > span,
|
|
.munder > span > span {
|
|
text-align: center; // above and below a horizontal brace
|
|
}
|
|
|
|
.boxpad {
|
|
padding: 0 0.3em 0 0.3em; // \fboxsep = 3pt
|
|
}
|
|
.fbox {
|
|
box-sizing: border-box;
|
|
border: 0.04em solid black; // \fboxrule = 0.4pt
|
|
}
|
|
.cancel-pad {
|
|
padding: 0 0.2em 0 0.2em; // ref: cancel package \advance\dimen@ 2\p@ % "+2"
|
|
}
|
|
.mord + .cancel-lap,
|
|
.mbin + .cancel-lap {
|
|
margin-left: -0.2em;
|
|
}
|
|
.cancel-lap + .mord,
|
|
.cancel-lap + .mbin,
|
|
.cancel-lap + .msupsub {
|
|
margin-left: -0.2em;
|
|
}
|
|
.sout {
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 0.08em;
|
|
}
|
|
|
|
.widehat1 {
|
|
height: 0.24em;
|
|
background-image: url(images/widehat1.svg);
|
|
}
|
|
.widehat2 {
|
|
height: 0.30em;
|
|
background-image: url(images/widehat2.svg);
|
|
}
|
|
.widehat3 {
|
|
height: 0.36em;
|
|
background-image: url(images/widehat3.svg);
|
|
}
|
|
.widehat4 {
|
|
height: 0.42em;
|
|
background-image: url(images/widehat4.svg);
|
|
}
|
|
.tilde1 {
|
|
height: 0.26em;
|
|
background-image: url(images/tilde1.svg);
|
|
}
|
|
.tilde2 {
|
|
height: 0.29em;
|
|
background-image: url(images/tilde2.svg);
|
|
}
|
|
.tilde3 {
|
|
height: 0.306em;
|
|
background-image: url(images/tilde3.svg);
|
|
}
|
|
.tilde4 {
|
|
height: 0.312em;
|
|
background-image: url(images/tilde4.svg);
|
|
}
|
|
.rightarrow {
|
|
height: 0.522em;
|
|
min-width: 0.5em;
|
|
background-image: url(images/rightarrow.svg);
|
|
}
|
|
.xrightarrow {
|
|
height: 0.522em;
|
|
min-width: 0.783em;
|
|
background-image: url(images/rightarrow.svg);
|
|
}
|
|
.leftarrow {
|
|
height: 0.522em;
|
|
min-width: 0.5em;
|
|
background-image: url(images/leftarrow.svg);
|
|
}
|
|
.xleftarrow {
|
|
height: 0.522em;
|
|
min-width: 0.783em;
|
|
background-image: url(images/leftarrow.svg);
|
|
}
|
|
.overbrace {
|
|
height: 0.548em;
|
|
min-width: 1.6em;
|
|
background-image: url(images/overbrace.svg);
|
|
}
|
|
.underbrace {
|
|
height: 0.548em;
|
|
min-width: 1.6em;
|
|
background-image: url(images/underbrace.svg);
|
|
}
|
|
.leftrightarrow {
|
|
height: 0.522em;
|
|
min-width: 0.5em;
|
|
background-image: url(images/leftrightarrow.svg);
|
|
}
|
|
.xleftrightarrow {
|
|
height: 0.522em;
|
|
min-width: 0.783em;
|
|
background-image: url(images/leftrightarrow.svg);
|
|
}
|
|
.doublerightarrow {
|
|
height: 0.56em;
|
|
min-width: 0.783em;
|
|
background-image: url(images/doublerightarrow.svg);
|
|
}
|
|
.doubleleftarrow {
|
|
height: 0.56em;
|
|
min-width: 0.783em;
|
|
background-image: url(images/doubleleftarrow.svg);
|
|
}
|
|
.doubleleftrightarrow {
|
|
height: 0.56em;
|
|
min-width: 0.955em;
|
|
background-image: url(images/doubleleftrightarrow.svg);
|
|
}
|
|
.leftharpoon {
|
|
height: 0.522em;
|
|
min-width: 0.5em;
|
|
background-image: url(images/leftharpoon.svg);
|
|
}
|
|
.leftharpoon {
|
|
height: 0.522em;
|
|
min-width: 0.783em;
|
|
background-image: url(images/leftharpoon.svg);
|
|
}
|
|
.rightharpoon {
|
|
height: 0.522em;
|
|
min-width: 0.5em;
|
|
background-image: url(images/rightharpoon.svg);
|
|
}
|
|
.xrightharpoon {
|
|
height: 0.522em;
|
|
min-width: 0.783em;
|
|
background-image: url(images/rightharpoon.svg);
|
|
}
|
|
.hookleftarrow {
|
|
height: 0.522em;
|
|
min-width: 0.87em;
|
|
background-image: url(images/hookleftarrow.svg);
|
|
}
|
|
.hookrightarrow {
|
|
min-width: 0.87em;
|
|
height: 0.522em;
|
|
background-image: url(images/hookrightarrow.svg);
|
|
}
|
|
.mapsto {
|
|
height: 0.522em;
|
|
min-width: 0.783em;
|
|
background-image: url(images/mapsto.svg);
|
|
}
|
|
.leftharpoondown {
|
|
height: 0.522em;
|
|
min-width: 0.5em;
|
|
background-image: url(images/leftharpoondown.svg);
|
|
}
|
|
.leftharpoondown {
|
|
height: 0.522em;
|
|
min-width: 0.783em;
|
|
background-image: url(images/leftharpoondown.svg);
|
|
}
|
|
.rightharpoondown {
|
|
height: 0.522em;
|
|
min-width: 0.5em;
|
|
background-image: url(images/rightharpoondown.svg);
|
|
}
|
|
.xrightharpoondown {
|
|
height: 0.522em;
|
|
min-width: 0.783em;
|
|
background-image: url(images/rightharpoondown.svg);
|
|
}
|
|
.rightleftharpoons {
|
|
height: 0.716em;
|
|
min-width: 0.783em;
|
|
background-image: url(images/rightleftharpoons.svg);
|
|
}
|
|
.leftrightharpoons {
|
|
height: 0.716em;
|
|
min-width: 0.783em;
|
|
background-image: url(images/leftrightharpoons.svg);
|
|
}
|
|
.overgroup {
|
|
height: 0.342em;
|
|
min-width: 0.87em;
|
|
background-image: url(images/overgroup.svg);
|
|
}
|
|
.undergroup {
|
|
height: 0.342em;
|
|
min-width: 0.87em;
|
|
background-image: url(images/undergroup.svg);
|
|
}
|
|
.twoheadleftarrow {
|
|
height: 0.334em;
|
|
min-width: 0.86em;
|
|
background-image: url(images/twoheadleftarrow.svg);
|
|
}
|
|
.twoheadrightarrow {
|
|
height: 0.334em;
|
|
min-width: 0.86em;
|
|
background-image: url(images/twoheadrightarrow.svg);
|
|
}
|
|
.linesegment {
|
|
height: 0.414em;
|
|
min-width: 0.5em;
|
|
background-image: url(images/linesegment.svg);
|
|
}
|
|
.longequal {
|
|
height: 0.334em;
|
|
min-width: 0.5em;
|
|
background-image: url(images/longequal.svg);
|
|
}
|
|
.tofrom {
|
|
height: 0.528em;
|
|
min-width: 0.86em;
|
|
background-image: url(images/tofrom.svg);
|
|
}
|
|
|
|
// \cancel, \bcancel, and \xcancel again.
|
|
// Define the detailed background-image for the span.
|
|
// Use a linear-gradient to draw a diagonal line that is 0.08 ems wide,
|
|
// that is, 0.04 ems on each side of the line on the diagonal of the span.
|
|
.cancel {
|
|
background:
|
|
linear-gradient(to top left,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) ~"calc(50% - 0.04em)",
|
|
rgba(0,0,0,1) ~"calc(50% - 0.04em)",
|
|
rgba(0,0,0,1) ~"calc(50% + 0.04em)",
|
|
rgba(0,0,0,0) ~"calc(50% + 0.04em)",
|
|
rgba(0,0,0,0) 100%);
|
|
}
|
|
|
|
.bcancel {
|
|
background:
|
|
linear-gradient(to top right,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) ~"calc(50% - 0.04em)",
|
|
rgba(0,0,0,1) ~"calc(50% - 0.04em)",
|
|
rgba(0,0,0,1) ~"calc(50% + 0.04em)",
|
|
rgba(0,0,0,0) ~"calc(50% + 0.04em)",
|
|
rgba(0,0,0,0) 100%);
|
|
}
|
|
|
|
.xcancel {
|
|
background:
|
|
linear-gradient(to top left,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) ~"calc(50% - 0.04em)",
|
|
rgba(0,0,0,1) ~"calc(50% - 0.04em)",
|
|
rgba(0,0,0,1) ~"calc(50% + 0.04em)",
|
|
rgba(0,0,0,0) ~"calc(50% + 0.04em)",
|
|
rgba(0,0,0,0) 100%),
|
|
linear-gradient(to top right,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) ~"calc(50% - 0.04em)",
|
|
rgba(0,0,0,1) ~"calc(50% - 0.04em)",
|
|
rgba(0,0,0,1) ~"calc(50% + 0.04em)",
|
|
rgba(0,0,0,0) ~"calc(50% + 0.04em)",
|
|
rgba(0,0,0,0) 100%);
|
|
}
|
|
|
|
@media screen and (min-width:~"0\0") {
|
|
// CSS hack for IE 9, 10, & 11.
|
|
// IE doesn't recognize @supports. Hence the media screen hack.
|
|
|
|
.mask {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
// Instead of a linear gradient, use an SVG to draw the diagonal line for \cancel.
|
|
// This line unfortunately has a width that varies with the size of the span.
|
|
.bcancel,
|
|
.bcancel-mask {
|
|
background-color: transparent !important; // Prevent a blob of color.
|
|
background-image: url(images/bcancel.svg);
|
|
}
|
|
.cancel,
|
|
.cancel-mask {
|
|
background-color: transparent !important;
|
|
background-image: url(images/cancel.svg);
|
|
}
|
|
.xcancel,
|
|
.xcancel-mask {
|
|
background-color: transparent !important;
|
|
background-image: url(images/xcancel.svg);
|
|
}
|
|
}
|
|
|
|
@supports ((mask-image:none) or (-webkit-mask:none)) {
|
|
// This section is part of the KaTeX support for \color of stretchy elements.
|
|
// In up-to-date browsers, over-ride the background-image set above.
|
|
// This section won't be applied by some older browsers, so they will instead
|
|
// render the black background-image defined above.
|
|
|
|
.mask {
|
|
background-image: none;
|
|
}
|
|
}
|
|
|
|
@supports not ((mask-image:none) or (-webkit-mask:none)) {
|
|
// Fall back for older browswers that do not support CSS mask.
|
|
|
|
.mask {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
// For \cancel, use a background:linear-gradient, not a mask-image:linear-gradient.
|
|
.cancel-mask {
|
|
background-color: transparent !important;
|
|
background:
|
|
linear-gradient(to top left,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) ~"calc(50% - 0.04em)",
|
|
rgba(0,0,0,1) ~"calc(50% - 0.04em)",
|
|
rgba(0,0,0,1) ~"calc(50% + 0.04em)",
|
|
rgba(0,0,0,0) ~"calc(50% + 0.04em)",
|
|
rgba(0,0,0,0) 100%);
|
|
}
|
|
|
|
.bcancel-mask {
|
|
background-color: transparent !important;
|
|
background:
|
|
linear-gradient(to top right,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) ~"calc(50% - 0.04em)",
|
|
rgba(0,0,0,1) ~"calc(50% - 0.04em)",
|
|
rgba(0,0,0,1) ~"calc(50% + 0.04em)",
|
|
rgba(0,0,0,0) ~"calc(50% + 0.04em)",
|
|
rgba(0,0,0,0) 100%);
|
|
}
|
|
|
|
.xcancel-mask {
|
|
background-color: transparent !important;
|
|
background:
|
|
linear-gradient(to top left,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) ~"calc(50% - 0.04em)",
|
|
rgba(0,0,0,1) ~"calc(50% - 0.04em)",
|
|
rgba(0,0,0,1) ~"calc(50% + 0.04em)",
|
|
rgba(0,0,0,0) ~"calc(50% + 0.04em)",
|
|
rgba(0,0,0,0) 100%),
|
|
linear-gradient(to top right,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) ~"calc(50% - 0.04em)",
|
|
rgba(0,0,0,1) ~"calc(50% - 0.04em)",
|
|
rgba(0,0,0,1) ~"calc(50% + 0.04em)",
|
|
rgba(0,0,0,0) ~"calc(50% + 0.04em)",
|
|
rgba(0,0,0,0) 100%);
|
|
}
|
|
}
|
|
|
|
.cancel-mask {
|
|
mask-image:
|
|
linear-gradient(to top left,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) ~"calc(50% - 0.04em)",
|
|
rgba(0,0,0,1) ~"calc(50% - 0.04em)",
|
|
rgba(0,0,0,1) ~"calc(50% + 0.04em)",
|
|
rgba(0,0,0,0) ~"calc(50% + 0.04em)",
|
|
rgba(0,0,0,0) 100%);
|
|
-webkit-mask-image:
|
|
linear-gradient(to top left,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) ~"calc(50% - 0.04em)",
|
|
rgba(0,0,0,1) ~"calc(50% - 0.04em)",
|
|
rgba(0,0,0,1) ~"calc(50% + 0.04em)",
|
|
rgba(0,0,0,0) ~"calc(50% + 0.04em)",
|
|
rgba(0,0,0,0) 100%);
|
|
}
|
|
|
|
.bcancel-mask {
|
|
mask-image:
|
|
linear-gradient(to top right,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) ~"calc(50% - 0.04em)",
|
|
rgba(0,0,0,1) ~"calc(50% - 0.04em)",
|
|
rgba(0,0,0,1) ~"calc(50% + 0.04em)",
|
|
rgba(0,0,0,0) ~"calc(50% + 0.04em)",
|
|
rgba(0,0,0,0) 100%);
|
|
-webkit-mask-image:
|
|
linear-gradient(to top right,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) ~"calc(50% - 0.04em)",
|
|
rgba(0,0,0,1) ~"calc(50% - 0.04em)",
|
|
rgba(0,0,0,1) ~"calc(50% + 0.04em)",
|
|
rgba(0,0,0,0) ~"calc(50% + 0.04em)",
|
|
rgba(0,0,0,0) 100%);
|
|
}
|
|
|
|
.xcancel-mask {
|
|
mask-image:
|
|
linear-gradient(to top left,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) ~"calc(50% - 0.04em)",
|
|
rgba(0,0,0,1) ~"calc(50% - 0.04em)",
|
|
rgba(0,0,0,1) ~"calc(50% + 0.04em)",
|
|
rgba(0,0,0,0) ~"calc(50% + 0.04em)",
|
|
rgba(0,0,0,0) 100%),
|
|
linear-gradient(to top right,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) ~"calc(50% - 0.04em)",
|
|
rgba(0,0,0,1) ~"calc(50% - 0.04em)",
|
|
rgba(0,0,0,1) ~"calc(50% + 0.04em)",
|
|
rgba(0,0,0,0) ~"calc(50% + 0.04em)",
|
|
rgba(0,0,0,0) 100%);
|
|
-webkit-mask-image:
|
|
linear-gradient(to top left,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) ~"calc(50% - 0.04em)",
|
|
rgba(0,0,0,1) ~"calc(50% - 0.04em)",
|
|
rgba(0,0,0,1) ~"calc(50% + 0.04em)",
|
|
rgba(0,0,0,0) ~"calc(50% + 0.04em)",
|
|
rgba(0,0,0,0) 100%),
|
|
linear-gradient(to top right,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) ~"calc(50% - 0.04em)",
|
|
rgba(0,0,0,1) ~"calc(50% - 0.04em)",
|
|
rgba(0,0,0,1) ~"calc(50% + 0.04em)",
|
|
rgba(0,0,0,0) ~"calc(50% + 0.04em)",
|
|
rgba(0,0,0,0) 100%);
|
|
}
|
|
|
|
@supports (-ms-touch-action: none) {
|
|
// CSS hack for Edge
|
|
// TODO(ron): If/When Edge fixes its CSS calc() bug, delete the next few lines and use gradients for \cancel.
|
|
.bcancel,
|
|
.bcancel-mask {
|
|
background-color: transparent !important;
|
|
background-image: url(images/bcancel.svg);
|
|
}
|
|
.cancel,
|
|
.cancel-mask {
|
|
background-color: transparent !important;
|
|
background-image: url(images/cancel.svg);
|
|
}
|
|
.xcancel,
|
|
.xcancel-mask {
|
|
background-color: transparent !important;
|
|
background-image: url(images/xcancel.svg);
|
|
}
|
|
}
|
|
|
|
// Next, define the CSS masks used for \color on stretchy wide elements.
|
|
.widehat1-mask {
|
|
-webkit-mask: url(images/widehat1.svg);
|
|
mask: url(images/widehat1.svg) no-repeat;
|
|
}
|
|
.widehat2-mask {
|
|
-webkit-mask: url(images/widehat2.svg);
|
|
mask: url(images/widehat2.svg) no-repeat;
|
|
}
|
|
.widehat3-mask {
|
|
-webkit-mask: url(images/widehat3.svg);
|
|
mask: url(images/widehat3.svg) no-repeat;
|
|
}
|
|
.widehat4-mask {
|
|
-webkit-mask: url(images/widehat4.svg);
|
|
mask: url(images/widehat4.svg) no-repeat;
|
|
}
|
|
.tilde1-mask {
|
|
-webkit-mask: url(images/tilde1.svg);
|
|
mask: url(images/tilde1.svg) no-repeat;
|
|
}
|
|
.tilde2-mask {
|
|
-webkit-mask: url(images/tilde2.svg);
|
|
mask: url(images/tilde2.svg) no-repeat;
|
|
}
|
|
.tilde3-mask {
|
|
-webkit-mask: url(images/tilde3.svg);
|
|
mask: url(images/tilde3.svg) no-repeat;
|
|
}
|
|
.tilde4-mask {
|
|
-webkit-mask: url(images/tilde4.svg);
|
|
mask: url(images/tilde4.svg) no-repeat;
|
|
}
|
|
.rightarrow-mask {
|
|
mask: url(images/rightarrow.svg);
|
|
-webkit-mask: url(images/rightarrow.svg);
|
|
}
|
|
.xrightarrow-mask {
|
|
mask: url(images/rightarrow.svg);
|
|
-webkit-mask: url(images/rightarrow.svg);
|
|
}
|
|
.leftarrow-mask {
|
|
mask: url(images/leftarrow.svg);
|
|
-webkit-mask: url(images/leftarrow.svg);
|
|
}
|
|
.xleftarrow-mask {
|
|
mask: url(images/leftarrow.svg);
|
|
-webkit-mask: url(images/leftarrow.svg);
|
|
}
|
|
.overbrace-mask {
|
|
min-width: 1.6em;
|
|
mask: url(images/overbrace.svg);
|
|
-webkit-mask: url(images/overbrace.svg);
|
|
}
|
|
.underbrace-mask {
|
|
min-width: 1.6em;
|
|
mask: url(images/underbrace.svg);
|
|
-webkit-mask: url(images/underbrace.svg);
|
|
}
|
|
.leftrightarrow-mask {
|
|
mask: url(images/leftrightarrow.svg);
|
|
-webkit-mask: url(images/leftrightarrow.svg);
|
|
}
|
|
.xleftrightarrow-mask {
|
|
mask: url(images/leftrightarrow.svg);
|
|
-webkit-mask: url(images/leftrightarrow.svg);
|
|
}
|
|
.doublerightarrow-mask {
|
|
mask: url(images/doublerightarrow.svg);
|
|
-webkit-mask: url(images/doublerightarrow.svg);
|
|
}
|
|
.doubleleftarrow-mask {
|
|
mask: url(images/doubleleftarrow.svg);
|
|
-webkit-mask: url(images/doubleleftarrow.svg);
|
|
}
|
|
.doubleleftrightarrow-mask {
|
|
mask: url(images/doubleleftrightarrow.svg);
|
|
-webkit-mask: url(images/doubleleftrightarrow.svg);
|
|
}
|
|
.leftharpoon-mask {
|
|
mask: url(images/leftharpoon.svg);
|
|
-webkit-mask: url(images/leftharpoon.svg);
|
|
}
|
|
.xleftharpoon-mask {
|
|
mask: url(images/leftharpoon.svg);
|
|
-webkit-mask: url(images/leftharpoon.svg);
|
|
}
|
|
.rightharpoon-mask {
|
|
mask: url(images/rightharpoon.svg);
|
|
-webkit-mask: url(images/rightharpoon.svg);
|
|
}
|
|
.xrightharpoon-mask {
|
|
mask: url(images/rightharpoon.svg);
|
|
-webkit-mask: url(images/rightharpoon.svg);
|
|
}
|
|
.hookleftarrow-mask {
|
|
mask: url(images/hookleftarrow.svg);
|
|
-webkit-mask: url(images/hookleftarrow.svg);
|
|
}
|
|
.hookrightarrow-mask {
|
|
mask: url(images/hookrightarrow.svg);
|
|
-webkit-mask: url(images/hookrightarrow.svg);
|
|
}
|
|
.mapsto-mask {
|
|
mask: url(images/mapsto.svg);
|
|
-webkit-mask: url(images/mapsto.svg);
|
|
}
|
|
.leftharpoondown-mask {
|
|
mask: url(images/leftharpoondown.svg);
|
|
-webkit-mask: url(images/leftharpoondown.svg);
|
|
}
|
|
.xleftharpoondown-mask {
|
|
mask: url(images/leftharpoondown.svg);
|
|
-webkit-mask: url(images/leftharpoondown.svg);
|
|
}
|
|
.rightharpoondown-mask {
|
|
mask: url(images/rightharpoondown.svg);
|
|
-webkit-mask: url(images/rightharpoondown.svg);
|
|
}
|
|
.xrightharpoondown-mask {
|
|
mask: url(images/rightharpoondown.svg);
|
|
-webkit-mask: url(images/rightharpoondown.svg);
|
|
}
|
|
.rightleftharpoons-mask {
|
|
mask: url(images/rightleftharpoons.svg);
|
|
-webkit-mask: url(images/rightleftharpoons.svg);
|
|
}
|
|
.leftrightharpoons-mask {
|
|
mask: url(images/leftrightharpoons.svg);
|
|
-webkit-mask: url(images/leftrightharpoons.svg);
|
|
}
|
|
.overgroup-mask {
|
|
mask: url(images/overgroup.svg);
|
|
-webkit-mask: url(images/overgroup.svg);
|
|
}
|
|
.undergroup-mask {
|
|
mask: url(images/undergroup.svg);
|
|
-webkit-mask: url(images/undergroup.svg);
|
|
}
|
|
.twoheadleftarrow-mask {
|
|
mask: url(images/twoheadleftarrow.svg);
|
|
-webkit-mask: url(images/twoheadleftarrow.svg);
|
|
}
|
|
.twoheadrightarrow-mask {
|
|
mask: url(images/twoheadrightarrow.svg);
|
|
-webkit-mask: url(images/twoheadrightarrow.svg);
|
|
}
|
|
.linesegment-mask {
|
|
mask: url(images/linesegment.svg);
|
|
-webkit-mask: url(images/linesegment.svg);
|
|
}
|
|
.longequal-mask {
|
|
mask: url(images/longequal.svg);
|
|
-webkit-mask: url(images/longequal.svg);
|
|
}
|
|
.tofrom-mask {
|
|
mask: url(images/tofrom.svg);
|
|
-webkit-mask: url(images/tofrom.svg);
|
|
}
|
|
|
|
}
|