@zzish/math-rich-input 0.1.42 → 0.1.44
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +937 -1536
- package/dist/math-rich-input.css +550 -518
- package/package.json +3 -3
- package/src/AccentBar.css +113 -111
- package/src/EquationEditor.css +160 -159
- package/src/EquationEditor.jsx +528 -560
- package/src/EquationEditorModal.css +109 -101
- package/src/EquationEditorModal.jsx +65 -68
- package/src/MathRichInput.css +86 -66
- package/src/MathRichInput.jsx +1981 -2070
- package/src/Toolbar.css +83 -82
- package/src/Toolbar.jsx +220 -234
- package/src/index.js +4 -8
package/dist/math-rich-input.css
CHANGED
|
@@ -1,232 +1,253 @@
|
|
|
1
1
|
*,
|
|
2
2
|
:after,
|
|
3
3
|
:before {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
-webkit-box-sizing: border-box;
|
|
5
|
+
-moz-box-sizing: border-box;
|
|
6
|
+
box-sizing: border-box;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
.MathRichInput-Container {
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
width: 100%;
|
|
11
|
+
border-radius: 5px;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
|
|
15
|
-
|
|
16
14
|
.MathRichInput-scrollview {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
15
|
+
position: relative;
|
|
16
|
+
display: flex;
|
|
17
|
+
border-radius: 5px;
|
|
20
18
|
}
|
|
21
19
|
|
|
22
20
|
.MathRichInput p {
|
|
23
|
-
|
|
24
|
-
|
|
21
|
+
padding: 0px;
|
|
22
|
+
margin: 0px;
|
|
25
23
|
}
|
|
26
24
|
|
|
27
25
|
.MathRichInput {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
26
|
+
font-size: 18px;
|
|
27
|
+
padding: 10px;
|
|
28
|
+
width: 100%;
|
|
29
|
+
border-radius: 5px;
|
|
30
|
+
background-color: #fff;
|
|
31
|
+
overflow-x: scroll;
|
|
32
|
+
overflow: overlay;
|
|
35
33
|
}
|
|
36
34
|
|
|
37
35
|
.MathRichInput:empty::before {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
36
|
+
content: attr(data-placeholder);
|
|
37
|
+
color: #acb6c0;
|
|
38
|
+
font-size: 15px;
|
|
41
39
|
}
|
|
42
40
|
.MathRichInput:empty:focus::before {
|
|
43
|
-
|
|
41
|
+
content: "";
|
|
44
42
|
}
|
|
45
43
|
|
|
46
44
|
.MathRichInput:focus {
|
|
47
|
-
|
|
45
|
+
outline: 0;
|
|
48
46
|
}
|
|
49
47
|
|
|
50
48
|
.MathRichInput .katex {
|
|
51
|
-
|
|
49
|
+
border: 0px;
|
|
52
50
|
}
|
|
53
51
|
|
|
54
52
|
.MathRichInput .base {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
53
|
+
/* Combine the katex and base class name to ensure the whole equation is surrounded */
|
|
54
|
+
background-color: #f0f0f0;
|
|
55
|
+
border: 0px;
|
|
56
|
+
border: 1px dotted #d0d0d0;
|
|
57
|
+
border-radius: 5px;
|
|
58
|
+
padding: 2px;
|
|
59
|
+
margin: 0px 2px;
|
|
62
60
|
}
|
|
63
61
|
|
|
64
62
|
.katex .mathnormal {
|
|
65
|
-
|
|
66
|
-
|
|
63
|
+
font-family: KaTeX_Math;
|
|
64
|
+
font-style: italic;
|
|
67
65
|
}
|
|
68
66
|
|
|
69
67
|
.MathRichInput .katex-error {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
68
|
+
background-color: #f0f0f0;
|
|
69
|
+
border: 0px;
|
|
70
|
+
border: 1px dotted #ff8080;
|
|
71
|
+
border-radius: 5px;
|
|
72
|
+
padding: 2px;
|
|
73
|
+
margin: 0px 2px;
|
|
76
74
|
}
|
|
77
75
|
|
|
78
76
|
.MathRichInput-Container {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
background: none;
|
|
88
|
-
outline: 0px;
|
|
89
|
-
border: none;
|
|
90
|
-
}
|
|
91
|
-
.MathRichInput {
|
|
92
|
-
background: none;
|
|
93
|
-
color: white;
|
|
94
|
-
border: none;
|
|
95
|
-
|
|
96
|
-
.katex, .base {
|
|
77
|
+
:focus-within {
|
|
78
|
+
background-color: white;
|
|
79
|
+
outline: 0px;
|
|
80
|
+
/* border: 1px solid #663676; */
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
&.dark {
|
|
84
|
+
:focus-within {
|
|
97
85
|
background: none;
|
|
98
|
-
|
|
86
|
+
outline: 0px;
|
|
87
|
+
border: none;
|
|
88
|
+
}
|
|
89
|
+
.MathRichInput {
|
|
90
|
+
color: white;
|
|
99
91
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
92
|
+
background: none;
|
|
93
|
+
border: none;
|
|
94
|
+
|
|
95
|
+
.katex,
|
|
96
|
+
.base {
|
|
97
|
+
background: none;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
&:focus {
|
|
101
|
+
border: none;
|
|
102
|
+
background: none;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
&.question-edit-input {
|
|
108
|
+
.MathRichInput {
|
|
109
|
+
border-radius: 12px;
|
|
110
|
+
font-size: 32px;
|
|
111
|
+
font-weight: 400;
|
|
112
|
+
|
|
113
|
+
&:focus {
|
|
114
|
+
border: none;
|
|
115
|
+
background: rgba(255, 255, 255, 0.1);
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
&.answer-edit-input {
|
|
121
|
+
.MathRichInput {
|
|
122
|
+
font-weight: 400;
|
|
123
|
+
font-size: 16px;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
106
126
|
}
|
|
107
127
|
/* Note that the top left position of the toolbar is set programatically in componentDidMount */
|
|
108
128
|
|
|
109
129
|
.Toolbar {
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
130
|
+
position: absolute;
|
|
131
|
+
z-index: 10;
|
|
132
|
+
display: flex;
|
|
133
|
+
height: 42px;
|
|
134
|
+
background-color: white;
|
|
135
|
+
border: 1px solid #d0d0d0;
|
|
136
|
+
border-radius: 5px;
|
|
137
|
+
box-shadow: 1px 1px 5px #a0a0a0;
|
|
138
|
+
animation: 0.5s fadeIn1;
|
|
139
|
+
animation-fill-mode: forwards;
|
|
140
|
+
color: black;
|
|
120
141
|
}
|
|
121
142
|
|
|
122
143
|
@keyframes fadeIn1 {
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
144
|
+
0% {
|
|
145
|
+
opacity: 0;
|
|
146
|
+
}
|
|
147
|
+
100% {
|
|
148
|
+
opacity: 1;
|
|
149
|
+
}
|
|
129
150
|
}
|
|
130
151
|
|
|
131
152
|
.Toolbar-button {
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
153
|
+
font-family: sans-serif;
|
|
154
|
+
font-size: 16px;
|
|
155
|
+
width: 40px;
|
|
156
|
+
height: 36px;
|
|
157
|
+
background-color: white;
|
|
158
|
+
border-radius: 5px;
|
|
159
|
+
border: 0px;
|
|
160
|
+
padding: 1px;
|
|
161
|
+
margin: 2px;
|
|
141
162
|
}
|
|
142
163
|
|
|
143
164
|
.Toolbar-button:hover {
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
165
|
+
color: white;
|
|
166
|
+
background: #663676;
|
|
167
|
+
cursor: pointer;
|
|
147
168
|
}
|
|
148
169
|
|
|
149
170
|
.Toolbar-button:active {
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
171
|
+
background: #808080;
|
|
172
|
+
color: white;
|
|
173
|
+
cursor: pointer;
|
|
153
174
|
}
|
|
154
175
|
|
|
155
176
|
.TB-narrow {
|
|
156
|
-
|
|
177
|
+
width: 30px;
|
|
157
178
|
}
|
|
158
179
|
|
|
159
180
|
.TB-wide {
|
|
160
|
-
|
|
181
|
+
width: 46px;
|
|
161
182
|
}
|
|
162
183
|
|
|
163
184
|
.TB-selected {
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
185
|
+
background: #d0d0d0;
|
|
186
|
+
color: black;
|
|
187
|
+
cursor: pointer;
|
|
188
|
+
animation: 0.2s TB-fadeIn;
|
|
189
|
+
animation-fill-mode: forwards;
|
|
169
190
|
}
|
|
170
191
|
|
|
171
192
|
.TB-selected:hover {
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
193
|
+
color: white;
|
|
194
|
+
background: #663676;
|
|
195
|
+
cursor: pointer;
|
|
175
196
|
}
|
|
176
197
|
|
|
177
198
|
@keyframes TB-fadeIn {
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
199
|
+
00% {
|
|
200
|
+
background: white;
|
|
201
|
+
}
|
|
202
|
+
100% {
|
|
203
|
+
background: #d0d0d0;
|
|
204
|
+
}
|
|
184
205
|
}
|
|
185
206
|
|
|
186
207
|
/* Tooltip text */
|
|
187
208
|
.Toolbar-button .tooltiptext {
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
209
|
+
font-weight: normal;
|
|
210
|
+
visibility: hidden;
|
|
211
|
+
width: 100px;
|
|
212
|
+
background-color: #222;
|
|
213
|
+
color: #fff;
|
|
214
|
+
/*font-weight: bold;*/
|
|
215
|
+
font-size: 12px;
|
|
216
|
+
text-align: center;
|
|
217
|
+
padding: 4px 10px;
|
|
218
|
+
border-radius: 6px;
|
|
219
|
+
|
|
220
|
+
/* Position the tooltip text - see examples below! */
|
|
221
|
+
position: absolute;
|
|
222
|
+
z-index: 11;
|
|
223
|
+
top: -90%; /* Must leave a small gap between tooltip and button */
|
|
224
|
+
left: 50px;
|
|
225
|
+
|
|
226
|
+
/* transform: translate (50%,0%); */
|
|
206
227
|
}
|
|
207
228
|
|
|
208
229
|
/* Show the tooltip text when you mouse over the tooltip container */
|
|
209
230
|
.Toolbar-button:hover .tooltiptext {
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
231
|
+
animation: 0.8s fadeIn2;
|
|
232
|
+
animation-fill-mode: forwards;
|
|
233
|
+
visibility: visible;
|
|
234
|
+
/* width: 100px; */
|
|
235
|
+
/* top: -90%; */ /* Must leave a small gap between tooltip and button */
|
|
236
|
+
/* left: 20%; */
|
|
237
|
+
/* margin-left: -50px; */
|
|
217
238
|
}
|
|
218
239
|
|
|
219
240
|
@keyframes fadeIn2 {
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
241
|
+
00% {
|
|
242
|
+
opacity: 0;
|
|
243
|
+
}
|
|
244
|
+
70% {
|
|
245
|
+
opacity: 0;
|
|
246
|
+
}
|
|
247
|
+
100% {
|
|
248
|
+
visibility: visible;
|
|
249
|
+
opacity: 0.9;
|
|
250
|
+
}
|
|
230
251
|
}
|
|
231
252
|
|
|
232
253
|
/* .tooltip {
|
|
@@ -235,588 +256,599 @@
|
|
|
235
256
|
border-bottom: 1px dotted black; /* If you want dots under the hoverable text
|
|
236
257
|
} */
|
|
237
258
|
.EquationEditorModal-background {
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
259
|
+
position: fixed;
|
|
260
|
+
top: 0;
|
|
261
|
+
left: 0;
|
|
262
|
+
width: 100%;
|
|
263
|
+
height: 100%;
|
|
264
|
+
background: black;
|
|
265
|
+
z-index: 99;
|
|
266
|
+
animation: 0.3s shade;
|
|
267
|
+
animation-fill-mode: forwards;
|
|
247
268
|
}
|
|
248
269
|
|
|
249
270
|
@keyframes shade {
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
271
|
+
00% {
|
|
272
|
+
opacity: 0;
|
|
273
|
+
}
|
|
274
|
+
100% {
|
|
275
|
+
opacity: 0.6;
|
|
276
|
+
}
|
|
256
277
|
}
|
|
257
278
|
|
|
258
279
|
.EquationEditorModal {
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
280
|
+
background: white;
|
|
281
|
+
border: 1px solid #808080;
|
|
282
|
+
border-radius: 10px;
|
|
283
|
+
box-shadow: 0px 2px 5px 1px #a0a0a0;
|
|
284
|
+
position: fixed;
|
|
285
|
+
max-width: 500px;
|
|
286
|
+
width: 98%;
|
|
287
|
+
top: 50%;
|
|
288
|
+
left: 50%;
|
|
289
|
+
/* transform: translate(-50%,-50%); */
|
|
290
|
+
z-index: 100;
|
|
291
|
+
animation: 0.3s rise;
|
|
292
|
+
animation-fill-mode: forwards;
|
|
272
293
|
}
|
|
273
294
|
|
|
274
295
|
@keyframes rise {
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
296
|
+
00% {
|
|
297
|
+
transform: translate(-50%, 100%);
|
|
298
|
+
opacity: 0;
|
|
299
|
+
}
|
|
300
|
+
100% {
|
|
301
|
+
transform: translate(-50%, -50%);
|
|
302
|
+
opacity: 1;
|
|
303
|
+
}
|
|
283
304
|
}
|
|
284
305
|
|
|
285
306
|
.EquationEditorModal-mobile {
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
307
|
+
background: white;
|
|
308
|
+
border: 1px solid #808080;
|
|
309
|
+
border-radius: 10px;
|
|
310
|
+
box-shadow: 0px 2px 5px 1px #a0a0a0;
|
|
311
|
+
position: fixed;
|
|
312
|
+
max-width: 500px;
|
|
313
|
+
width: 99%;
|
|
314
|
+
top: 0%;
|
|
315
|
+
left: 50%;
|
|
316
|
+
transform: translate(-50%, 1px);
|
|
317
|
+
z-index: 100;
|
|
297
318
|
}
|
|
298
319
|
|
|
299
320
|
.EquationEditorModal .title {
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
321
|
+
display: flex;
|
|
322
|
+
justify-content: space-between;
|
|
323
|
+
font-size: 14px;
|
|
324
|
+
color: #404040;
|
|
325
|
+
text-align: left;
|
|
326
|
+
background: #e0e0e0;
|
|
327
|
+
border: 0px;
|
|
328
|
+
border-radius: 5px 5px 0px 0px;
|
|
329
|
+
padding: 15px;
|
|
330
|
+
margin: 0px;
|
|
310
331
|
}
|
|
311
332
|
|
|
312
333
|
.EquationEditorModal-mobile .title {
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
334
|
+
display: flex;
|
|
335
|
+
justify-content: space-between;
|
|
336
|
+
font-size: 14px;
|
|
337
|
+
color: #404040;
|
|
338
|
+
text-align: left;
|
|
339
|
+
background: #e0e0e0;
|
|
340
|
+
border: 0px;
|
|
341
|
+
border-radius: 5px 5px 0px 0px;
|
|
342
|
+
height: 30px;
|
|
343
|
+
padding: 15px;
|
|
344
|
+
margin: 0px;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
.expertModeSwitch {
|
|
348
|
+
display: flex;
|
|
349
|
+
flex-direction: row;
|
|
350
|
+
align-items: center;
|
|
324
351
|
}
|
|
325
352
|
|
|
326
353
|
.EquationEditorModal .expertModeSwitch .switch {
|
|
327
|
-
|
|
354
|
+
margin-left: 10px;
|
|
328
355
|
}
|
|
329
356
|
|
|
330
357
|
/* The switch - the box around the slider */
|
|
331
358
|
.EquationEditorModal .switch {
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
359
|
+
position: relative;
|
|
360
|
+
display: inline-block;
|
|
361
|
+
width: 35px;
|
|
362
|
+
height: 22px;
|
|
363
|
+
margin-bottom: 0;
|
|
364
|
+
padding: 0;
|
|
336
365
|
}
|
|
337
366
|
|
|
338
367
|
/* Hide default HTML checkbox */
|
|
339
368
|
.EquationEditorModal .switch input {
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
369
|
+
opacity: 0;
|
|
370
|
+
width: 0;
|
|
371
|
+
height: 0;
|
|
343
372
|
}
|
|
344
373
|
|
|
345
374
|
/* The slider */
|
|
346
375
|
.EquationEditorModal .slider {
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
376
|
+
position: absolute;
|
|
377
|
+
cursor: pointer;
|
|
378
|
+
top: 0;
|
|
379
|
+
left: 0;
|
|
380
|
+
right: 0;
|
|
381
|
+
bottom: 0;
|
|
382
|
+
background-color: #ccc;
|
|
383
|
+
-webkit-transition: 0.4s;
|
|
384
|
+
transition: 0.4s;
|
|
356
385
|
}
|
|
357
386
|
|
|
358
387
|
.EquationEditorModal .slider:before {
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
388
|
+
position: absolute;
|
|
389
|
+
content: "";
|
|
390
|
+
height: 14px;
|
|
391
|
+
width: 14px;
|
|
392
|
+
left: 4px;
|
|
393
|
+
bottom: 4px;
|
|
394
|
+
background-color: white;
|
|
395
|
+
-webkit-transition: 0.4s;
|
|
396
|
+
transition: 0.4s;
|
|
368
397
|
}
|
|
369
398
|
|
|
370
399
|
.EquationEditorModal input:checked + .slider {
|
|
371
|
-
|
|
400
|
+
background-color: #663676;
|
|
372
401
|
}
|
|
373
402
|
|
|
374
403
|
.EquationEditorModal input:focus + .slider {
|
|
375
|
-
|
|
404
|
+
box-shadow: 0 0 1px #2196f3;
|
|
376
405
|
}
|
|
377
406
|
|
|
378
407
|
.EquationEditorModal input:checked + .slider:before {
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
408
|
+
-webkit-transform: translateX(13px);
|
|
409
|
+
-ms-transform: translateX(13px);
|
|
410
|
+
transform: translateX(13px);
|
|
382
411
|
}
|
|
383
412
|
|
|
384
413
|
/* Rounded sliders */
|
|
385
414
|
.EquationEditorModal .slider.round {
|
|
386
|
-
|
|
415
|
+
border-radius: 18px;
|
|
387
416
|
}
|
|
388
417
|
|
|
389
418
|
.EquationEditorModal .slider.round:before {
|
|
390
|
-
|
|
419
|
+
border-radius: 50%;
|
|
391
420
|
}
|
|
392
421
|
/* Note that the top left position of the accent bar is set programatically in componentDidMount */
|
|
393
422
|
|
|
394
423
|
.AccentBar {
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
424
|
+
position: absolute;
|
|
425
|
+
z-index: 1;
|
|
426
|
+
width: 360px;
|
|
427
|
+
background-color: #fff;
|
|
428
|
+
border: 1px solid #d0d0d0;
|
|
429
|
+
border-radius: 5px;
|
|
430
|
+
box-shadow: 1px 1px 5px #a0a0a0;
|
|
431
|
+
padding: 8px;
|
|
432
|
+
animation: 0.4s fadeIn1;
|
|
433
|
+
animation-fill-mode: forwards;
|
|
434
|
+
color: black;
|
|
405
435
|
}
|
|
406
436
|
|
|
407
437
|
.AccentBar-compact {
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
438
|
+
display: flex;
|
|
439
|
+
position: absolute;
|
|
440
|
+
z-index: 1;
|
|
441
|
+
background-color: white;
|
|
442
|
+
border: 1px solid #d0d0d0;
|
|
443
|
+
border-radius: 5px;
|
|
444
|
+
box-shadow: 1px 1px 5px #a0a0a0;
|
|
445
|
+
padding: 5px;
|
|
446
|
+
animation: 0.4s fadeIn1;
|
|
447
|
+
animation-fill-mode: forwards;
|
|
448
|
+
color: black;
|
|
418
449
|
}
|
|
419
450
|
|
|
420
451
|
.AccentBar-outerContainer {
|
|
421
|
-
|
|
422
|
-
|
|
452
|
+
overflow-y: scroll;
|
|
453
|
+
border-radius: 5px;
|
|
423
454
|
}
|
|
424
455
|
|
|
425
456
|
.AccentBar-innerContainer {
|
|
426
|
-
|
|
457
|
+
height: 350px;
|
|
427
458
|
}
|
|
428
459
|
|
|
429
460
|
@keyframes fadeIn1 {
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
461
|
+
0% {
|
|
462
|
+
opacity: 0;
|
|
463
|
+
}
|
|
464
|
+
100% {
|
|
465
|
+
opacity: 1;
|
|
466
|
+
}
|
|
436
467
|
}
|
|
437
468
|
|
|
438
469
|
.AccentBar .symbols-grid {
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
470
|
+
display: grid;
|
|
471
|
+
grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
|
|
472
|
+
grid-auto-rows: minmax(min-content, max-content);
|
|
473
|
+
grid-gap: 3px;
|
|
443
474
|
}
|
|
444
475
|
|
|
445
476
|
.AccentBar .insert-grid {
|
|
446
|
-
|
|
477
|
+
padding: 5px;
|
|
447
478
|
}
|
|
448
479
|
|
|
449
480
|
.AccentBar .type-a-letter {
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
481
|
+
grid-column: 1/-1;
|
|
482
|
+
color: #a0a0a0;
|
|
483
|
+
font-family: sans-serif;
|
|
484
|
+
font-size: 14px;
|
|
485
|
+
font-weight: bold;
|
|
486
|
+
height: 36px;
|
|
487
|
+
padding-top: 12px;
|
|
488
|
+
padding-left: 20px;
|
|
458
489
|
}
|
|
459
490
|
|
|
460
491
|
.AccentBar-button {
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
492
|
+
font-family: sans-serif;
|
|
493
|
+
font-size: 17px;
|
|
494
|
+
width: 40px;
|
|
495
|
+
height: 36px;
|
|
496
|
+
background: #f4f4f4;
|
|
497
|
+
border-radius: 5px;
|
|
498
|
+
border: 0px;
|
|
499
|
+
padding: 1px;
|
|
469
500
|
}
|
|
470
501
|
|
|
471
502
|
.AB-compact {
|
|
472
|
-
|
|
473
|
-
|
|
503
|
+
margin: 0px;
|
|
504
|
+
background: white;
|
|
474
505
|
}
|
|
475
506
|
|
|
476
507
|
.AB-narrow {
|
|
477
|
-
|
|
508
|
+
width: 36px;
|
|
478
509
|
}
|
|
479
510
|
|
|
480
511
|
.AccentBar-button:hover {
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
512
|
+
color: white;
|
|
513
|
+
background: #663676;
|
|
514
|
+
cursor: pointer;
|
|
515
|
+
box-shadow: 1px 1px 3px #808080;
|
|
516
|
+
animation: 2s grow;
|
|
517
|
+
animation-fill-mode: forwards;
|
|
487
518
|
}
|
|
488
519
|
|
|
489
520
|
@keyframes grow {
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
521
|
+
00% {
|
|
522
|
+
transform: scale(1);
|
|
523
|
+
box-shadow: 0px 0px 0px #808080;
|
|
524
|
+
}
|
|
525
|
+
10% {
|
|
526
|
+
transform: scale(1.3);
|
|
527
|
+
box-shadow: 1px 1px 3px #808080;
|
|
528
|
+
}
|
|
529
|
+
90% {
|
|
530
|
+
transform: scale(1.3);
|
|
531
|
+
box-shadow: 1px 1px 3px #808080;
|
|
532
|
+
}
|
|
533
|
+
100% {
|
|
534
|
+
transform: scale(1.8);
|
|
535
|
+
box-shadow: 1px 1px 3px #808080;
|
|
536
|
+
}
|
|
506
537
|
}
|
|
507
538
|
|
|
508
539
|
.AccentBar-button:active {
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
540
|
+
background: #808080;
|
|
541
|
+
color: white;
|
|
542
|
+
cursor: pointer;
|
|
512
543
|
}
|
|
513
544
|
|
|
514
545
|
.AccentBar .tabBar {
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
546
|
+
background: white;
|
|
547
|
+
text-align: left;
|
|
548
|
+
border: 0px;
|
|
549
|
+
padding: 10px 0;
|
|
519
550
|
}
|
|
520
551
|
|
|
521
552
|
.AccentBar .tab {
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
553
|
+
font-size: 14px;
|
|
554
|
+
font-weight: bold;
|
|
555
|
+
color: #404040;
|
|
556
|
+
text-align: left;
|
|
557
|
+
border: 0px;
|
|
558
|
+
height: 30px;
|
|
559
|
+
padding: 2px 5px 2px 5px;
|
|
560
|
+
margin: 2px;
|
|
561
|
+
border-bottom: 4px solid #d0d0d0;
|
|
531
562
|
}
|
|
532
563
|
|
|
533
564
|
.AccentBar .tab:hover {
|
|
534
|
-
|
|
565
|
+
cursor: pointer;
|
|
535
566
|
}
|
|
536
567
|
|
|
537
568
|
.AccentBar .tab-selected {
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
569
|
+
font-size: 14px;
|
|
570
|
+
font-weight: bold;
|
|
571
|
+
color: #404040;
|
|
572
|
+
text-align: left;
|
|
573
|
+
border: 0px;
|
|
574
|
+
height: 30px;
|
|
575
|
+
padding: 2px 5px 2px 5px;
|
|
576
|
+
margin: 2px;
|
|
577
|
+
border-bottom: 4px solid #663676;
|
|
547
578
|
}
|
|
548
579
|
|
|
549
580
|
.AccentBar .section-label {
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
581
|
+
grid-column: 1/-1;
|
|
582
|
+
font-size: 13px;
|
|
583
|
+
font-weight: bold;
|
|
584
|
+
color: #663676;
|
|
585
|
+
margin-top: 8px;
|
|
586
|
+
margin-left: 8px;
|
|
587
|
+
margin-bottom: 4px;
|
|
557
588
|
}
|
|
558
589
|
|
|
559
590
|
.AccentBar .replace-section {
|
|
560
|
-
|
|
591
|
+
min-height: 70px;
|
|
561
592
|
}
|
|
562
593
|
|
|
563
594
|
.AccentBar .tabArea {
|
|
564
|
-
|
|
565
|
-
|
|
595
|
+
animation: 0.4s fadeIn1;
|
|
596
|
+
animation-fill-mode: forwards;
|
|
566
597
|
}
|
|
567
598
|
.EquationEditor {
|
|
568
|
-
|
|
569
|
-
|
|
599
|
+
height: auto;
|
|
600
|
+
text-align: center;
|
|
570
601
|
}
|
|
571
602
|
|
|
572
603
|
.EquationEditor .editableAndCursorButtonsWrapper {
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
604
|
+
display: flex;
|
|
605
|
+
align-items: center;
|
|
606
|
+
justify-content: center;
|
|
576
607
|
}
|
|
577
608
|
|
|
578
609
|
.EquationEditor .editableWrapper {
|
|
579
|
-
|
|
580
|
-
|
|
610
|
+
overflow: auto;
|
|
611
|
+
width: 100%;
|
|
581
612
|
}
|
|
582
613
|
|
|
583
614
|
.EquationEditor .cursorButton {
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
615
|
+
font-size: 14px;
|
|
616
|
+
font-weight: bold;
|
|
617
|
+
color: #663676;
|
|
618
|
+
background: white;
|
|
619
|
+
text-align: center;
|
|
620
|
+
border: 1px solid #663676;
|
|
621
|
+
border-radius: 5px;
|
|
622
|
+
min-width: 40px;
|
|
623
|
+
width: auto;
|
|
624
|
+
height: 40px;
|
|
625
|
+
padding: 0px;
|
|
626
|
+
margin-top: 10px;
|
|
627
|
+
margin-left: 15px;
|
|
628
|
+
margin-right: 15px;
|
|
629
|
+
/* transition: all .2s ease-in-out; */
|
|
599
630
|
}
|
|
600
631
|
|
|
601
632
|
.EquationEditor .centerBox {
|
|
602
|
-
|
|
603
|
-
|
|
633
|
+
display: inline-block;
|
|
634
|
+
text-align: center;
|
|
604
635
|
}
|
|
605
636
|
|
|
606
637
|
.EquationEditor .editable {
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
638
|
+
/* width:auto; */
|
|
639
|
+
text-align: left;
|
|
640
|
+
min-height: 26px;
|
|
641
|
+
min-width: 150px;
|
|
642
|
+
font-size: 20px;
|
|
643
|
+
color: #404040;
|
|
644
|
+
border: 1px solid #b0b0b0;
|
|
645
|
+
border-radius: 5px;
|
|
646
|
+
/* height:36px; */
|
|
647
|
+
padding: 7px 10px 7px 10px;
|
|
648
|
+
margin-top: 6px;
|
|
649
|
+
margin-bottom: 5px;
|
|
619
650
|
}
|
|
620
651
|
|
|
621
652
|
.EquationEditor .editable-placeholder {
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
653
|
+
position: absolute;
|
|
654
|
+
z-index: -1;
|
|
655
|
+
min-height: 26px;
|
|
656
|
+
min-width: 150px;
|
|
657
|
+
font-size: 15px;
|
|
658
|
+
color: grey;
|
|
659
|
+
/* Note the x translation needs to be updatad programatically if the modal width changes */
|
|
660
|
+
transform: translate(-12px, -36px);
|
|
630
661
|
}
|
|
631
662
|
|
|
632
663
|
.EquationEditor .editable:focus-within {
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
664
|
+
border-radius: 5px;
|
|
665
|
+
border: 1px solid #663676 !important;
|
|
666
|
+
box-shadow: 0px 0px 0px white;
|
|
667
|
+
/* box-shadow: inset 1px 1px 5px #a0a0a0; */
|
|
637
668
|
}
|
|
638
669
|
|
|
639
670
|
.latexInputAreaWrapper {
|
|
640
|
-
|
|
671
|
+
width: auto;
|
|
641
672
|
}
|
|
642
673
|
|
|
643
674
|
.EquationEditor .katexRenderedInput {
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
675
|
+
text-align: left;
|
|
676
|
+
min-height: 30px;
|
|
677
|
+
width: 90%;
|
|
678
|
+
font-size: 16px;
|
|
679
|
+
color: #404040;
|
|
680
|
+
border: 0px solid #b0b0b0;
|
|
681
|
+
border-radius: 5px;
|
|
682
|
+
/* height:36px; */
|
|
683
|
+
padding: 7px 10px 4px 10px;
|
|
684
|
+
margin: 5px 15px;
|
|
654
685
|
}
|
|
655
686
|
|
|
656
687
|
.EquationEditor .latexInput {
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
688
|
+
text-align: left;
|
|
689
|
+
height: 88px;
|
|
690
|
+
width: 90%;
|
|
691
|
+
font-size: 16px;
|
|
692
|
+
/* color: #202020; */
|
|
693
|
+
/* background-color: #e0e0e0; */
|
|
694
|
+
/* color: #00ff00;
|
|
664
695
|
background-color: #202020; */
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
696
|
+
color: #007000;
|
|
697
|
+
background-color: #fff;
|
|
698
|
+
border: 1px solid #b0b0b0;
|
|
699
|
+
border-radius: 5px;
|
|
700
|
+
padding: 7px 10px 5px 10px;
|
|
701
|
+
margin-top: 10px;
|
|
702
|
+
box-shadow: 0px 0px 0px white;
|
|
671
703
|
}
|
|
672
704
|
|
|
673
705
|
.EquationEditor .latexInput:focus {
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
706
|
+
border: 1px solid #663676 !important;
|
|
707
|
+
outline: 0;
|
|
708
|
+
/* outline: 2px solid #663676!important; */ /* Has square corners */
|
|
709
|
+
/* box-shadow: inset 1px 1px 5px #a0a0a0, 0px 0px 3px #663676; */
|
|
678
710
|
}
|
|
679
711
|
|
|
680
712
|
.EquationEditor .insertButton {
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
713
|
+
font-size: 14px;
|
|
714
|
+
color: white;
|
|
715
|
+
background: #663676;
|
|
716
|
+
text-align: left;
|
|
717
|
+
border: 0px;
|
|
718
|
+
border-radius: 5px;
|
|
719
|
+
height: 36px;
|
|
720
|
+
padding: 0px 30px;
|
|
721
|
+
margin-top: 5px;
|
|
722
|
+
margin-bottom: 5px;
|
|
723
|
+
margin-left: 5px;
|
|
724
|
+
margin-right: 5px;
|
|
693
725
|
}
|
|
694
726
|
|
|
695
727
|
.EquationEditor .cancelButton {
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
728
|
+
font-size: 14px;
|
|
729
|
+
background: white;
|
|
730
|
+
color: #663676;
|
|
731
|
+
text-align: left;
|
|
732
|
+
border: 1px solid #663676;
|
|
733
|
+
border-radius: 5px;
|
|
734
|
+
height: 36px;
|
|
735
|
+
padding: 0px 30px;
|
|
736
|
+
margin-bottom: 10px;
|
|
737
|
+
margin-left: 5px;
|
|
738
|
+
margin-right: 5px;
|
|
707
739
|
}
|
|
708
740
|
|
|
709
741
|
.EquationEditor .insertButton:hover {
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
742
|
+
color: white;
|
|
743
|
+
background: #461656;
|
|
744
|
+
cursor: pointer;
|
|
713
745
|
}
|
|
714
746
|
|
|
715
747
|
.EquationEditor .recentSymbols-recentText-active {
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
748
|
+
font-size: 14px;
|
|
749
|
+
font-weight: bold;
|
|
750
|
+
color: #404040;
|
|
751
|
+
margin-right: 10px;
|
|
720
752
|
}
|
|
721
753
|
|
|
722
754
|
.EquationEditor .recentSymbols-recentText-not-active {
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
755
|
+
font-size: 14px;
|
|
756
|
+
font-weight: bold;
|
|
757
|
+
color: #808080;
|
|
758
|
+
margin-top: 10px;
|
|
759
|
+
margin-bottom: 10px;
|
|
728
760
|
}
|
|
729
761
|
|
|
730
762
|
.EquationEditor .tabBar {
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
763
|
+
background: white;
|
|
764
|
+
text-align: left;
|
|
765
|
+
border: 0px;
|
|
766
|
+
padding: 10px 10px 5px 20px;
|
|
767
|
+
margin: 5px;
|
|
736
768
|
}
|
|
737
769
|
|
|
738
770
|
@media (max-width: 500px) {
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
771
|
+
.EquationEditor .tabBar {
|
|
772
|
+
padding: 5px 0;
|
|
773
|
+
}
|
|
742
774
|
}
|
|
743
775
|
|
|
744
776
|
.EquationEditor .tab {
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
777
|
+
font-size: 14px;
|
|
778
|
+
font-weight: bold;
|
|
779
|
+
color: #404040;
|
|
780
|
+
text-align: left;
|
|
781
|
+
border: 0px;
|
|
782
|
+
height: 30px;
|
|
783
|
+
padding: 5px 10px;
|
|
784
|
+
margin: 5px;
|
|
785
|
+
border-bottom: 6px solid #d0d0d0;
|
|
754
786
|
}
|
|
755
787
|
|
|
756
788
|
.EquationEditor .tab:hover {
|
|
757
|
-
|
|
789
|
+
cursor: pointer;
|
|
758
790
|
}
|
|
759
791
|
.EquationEditor .tab-selected {
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
792
|
+
font-size: 14px;
|
|
793
|
+
font-weight: bold;
|
|
794
|
+
color: #404040;
|
|
795
|
+
text-align: left;
|
|
796
|
+
border: 0px;
|
|
797
|
+
height: 30px;
|
|
798
|
+
padding: 5px 10px;
|
|
799
|
+
margin: 5px;
|
|
800
|
+
border-bottom: 6px solid #663676;
|
|
769
801
|
}
|
|
770
802
|
|
|
771
803
|
.EquationEditor .recentSymbolsButtonArea {
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
804
|
+
display: flex;
|
|
805
|
+
justify-content: flex-start;
|
|
806
|
+
width: 486px;
|
|
807
|
+
padding: 2px;
|
|
808
|
+
margin: 5px;
|
|
809
|
+
margin-left: 15px;
|
|
778
810
|
}
|
|
779
811
|
|
|
780
812
|
.EquationEditor .symbolButtonAreasOuterContainer {
|
|
781
|
-
|
|
813
|
+
overflow-x: auto;
|
|
782
814
|
}
|
|
783
815
|
|
|
784
816
|
.EquationEditor .symbolButtonAreasInnerContainer {
|
|
785
|
-
|
|
786
|
-
|
|
817
|
+
display: flex;
|
|
818
|
+
width: 2330px;
|
|
787
819
|
}
|
|
788
820
|
|
|
789
821
|
.EquationEditor .symbolButtonArea {
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
822
|
+
display: grid;
|
|
823
|
+
grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
|
|
824
|
+
grid-auto-rows: minmax(min-content, max-content);
|
|
825
|
+
grid-gap: 1.5px;
|
|
826
|
+
padding: 12px;
|
|
827
|
+
margin: 0px;
|
|
796
828
|
}
|
|
797
829
|
|
|
798
830
|
.EquationEditor .symbolButtonArea-1 {
|
|
799
|
-
|
|
831
|
+
width: 66px;
|
|
800
832
|
}
|
|
801
833
|
|
|
802
834
|
.EquationEditor .symbolButtonArea-2 {
|
|
803
|
-
|
|
835
|
+
width: 108px;
|
|
804
836
|
}
|
|
805
837
|
|
|
806
838
|
.EquationEditor .symbolButtonArea-3 {
|
|
807
|
-
|
|
839
|
+
width: 150px;
|
|
808
840
|
}
|
|
809
841
|
|
|
810
842
|
.EquationEditor .symbolButtonArea-4 {
|
|
811
|
-
|
|
843
|
+
width: 192px;
|
|
812
844
|
}
|
|
813
845
|
|
|
814
846
|
.EquationEditor .symbolButtonArea-5 {
|
|
815
|
-
|
|
847
|
+
width: 234px;
|
|
816
848
|
}
|
|
817
849
|
|
|
818
850
|
.EquationEditor .symbolButtonArea-6 {
|
|
819
|
-
|
|
851
|
+
width: 276px;
|
|
820
852
|
}
|
|
821
853
|
/* Fixes is a katex bug where horizontal lines are not rendering */
|
|
822
854
|
/* .frac-line {
|