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