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