@zzish/math-rich-input 0.1.42 → 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 +592 -560
- 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,822 +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
|
-
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: 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
|
+
}
|
|
106
126
|
}
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
box-shadow: 1px 1px 5px #a0a0a0;
|
|
118
|
-
animation: 0.5s fadeIn1;
|
|
119
|
-
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;
|
|
120
137
|
}
|
|
121
138
|
|
|
122
|
-
@keyframes
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
139
|
+
@keyframes shade {
|
|
140
|
+
00% {
|
|
141
|
+
opacity: 0;
|
|
142
|
+
}
|
|
143
|
+
100% {
|
|
144
|
+
opacity: 0.6;
|
|
145
|
+
}
|
|
129
146
|
}
|
|
130
147
|
|
|
131
|
-
.
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
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;
|
|
141
162
|
}
|
|
142
163
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
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
|
+
}
|
|
147
173
|
}
|
|
148
174
|
|
|
149
|
-
.
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
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;
|
|
153
187
|
}
|
|
154
188
|
|
|
155
|
-
.
|
|
156
|
-
|
|
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;
|
|
157
200
|
}
|
|
158
201
|
|
|
159
|
-
.
|
|
160
|
-
|
|
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;
|
|
161
214
|
}
|
|
162
215
|
|
|
163
|
-
.
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
animation: 0.2s TB-fadeIn;
|
|
168
|
-
animation-fill-mode: forwards;
|
|
216
|
+
.expertModeSwitch {
|
|
217
|
+
display: flex;
|
|
218
|
+
flex-direction: row;
|
|
219
|
+
align-items: center;
|
|
169
220
|
}
|
|
170
221
|
|
|
171
|
-
.
|
|
172
|
-
|
|
173
|
-
background: #663676;
|
|
174
|
-
cursor: pointer;
|
|
222
|
+
.EquationEditorModal .expertModeSwitch .switch {
|
|
223
|
+
margin-left: 10px;
|
|
175
224
|
}
|
|
176
225
|
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
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;
|
|
184
234
|
}
|
|
185
235
|
|
|
186
|
-
/*
|
|
187
|
-
.
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
color: #fff;
|
|
193
|
-
/*font-weight: bold;*/
|
|
194
|
-
font-size: 12px;
|
|
195
|
-
text-align: center;
|
|
196
|
-
padding: 4px 10px;
|
|
197
|
-
border-radius: 6px;
|
|
198
|
-
|
|
199
|
-
/* Position the tooltip text - see examples below! */
|
|
200
|
-
position: absolute;
|
|
201
|
-
z-index: 2;
|
|
202
|
-
top: -90%; /* Must leave a small gap between tooltip and button */
|
|
203
|
-
left: 50px;
|
|
236
|
+
/* Hide default HTML checkbox */
|
|
237
|
+
.EquationEditorModal .switch input {
|
|
238
|
+
opacity: 0;
|
|
239
|
+
width: 0;
|
|
240
|
+
height: 0;
|
|
241
|
+
}
|
|
204
242
|
|
|
205
|
-
|
|
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;
|
|
206
254
|
}
|
|
207
255
|
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
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;
|
|
217
266
|
}
|
|
218
267
|
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
opacity: 0;
|
|
222
|
-
}
|
|
223
|
-
70% {
|
|
224
|
-
opacity: 0;
|
|
225
|
-
}
|
|
226
|
-
100% {
|
|
227
|
-
visibility: visible;
|
|
228
|
-
opacity: 0.9;
|
|
229
|
-
}
|
|
268
|
+
.EquationEditorModal input:checked + .slider {
|
|
269
|
+
background-color: #663676;
|
|
230
270
|
}
|
|
231
271
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
display: inline-block;
|
|
235
|
-
border-bottom: 1px dotted black; /* If you want dots under the hoverable text
|
|
236
|
-
} */
|
|
237
|
-
.EquationEditorModal-background {
|
|
238
|
-
position: fixed;
|
|
239
|
-
top: 0;
|
|
240
|
-
left: 0;
|
|
241
|
-
width: 100%;
|
|
242
|
-
height: 100%;
|
|
243
|
-
background: black;
|
|
244
|
-
z-index: 99;
|
|
245
|
-
animation: 0.3s shade;
|
|
246
|
-
animation-fill-mode: forwards;
|
|
272
|
+
.EquationEditorModal input:focus + .slider {
|
|
273
|
+
box-shadow: 0 0 1px #2196f3;
|
|
247
274
|
}
|
|
248
275
|
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
100% {
|
|
254
|
-
opacity: 0.6;
|
|
255
|
-
}
|
|
276
|
+
.EquationEditorModal input:checked + .slider:before {
|
|
277
|
+
-webkit-transform: translateX(13px);
|
|
278
|
+
-ms-transform: translateX(13px);
|
|
279
|
+
transform: translateX(13px);
|
|
256
280
|
}
|
|
257
281
|
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
border-radius: 10px;
|
|
262
|
-
box-shadow: 0px 2px 5px 1px #a0a0a0;
|
|
263
|
-
position: fixed;
|
|
264
|
-
max-width: 500px;
|
|
265
|
-
width: 98%;
|
|
266
|
-
top: 50%;
|
|
267
|
-
left: 50%;
|
|
268
|
-
/* transform: translate(-50%,-50%); */
|
|
269
|
-
z-index: 100;
|
|
270
|
-
animation: 0.3s rise;
|
|
271
|
-
animation-fill-mode: forwards;
|
|
282
|
+
/* Rounded sliders */
|
|
283
|
+
.EquationEditorModal .slider.round {
|
|
284
|
+
border-radius: 18px;
|
|
272
285
|
}
|
|
273
286
|
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
transform: translate(-50%, 100%);
|
|
277
|
-
opacity: 0;
|
|
278
|
-
}
|
|
279
|
-
100% {
|
|
280
|
-
transform: translate(-50%, -50%);
|
|
281
|
-
opacity: 1;
|
|
282
|
-
}
|
|
287
|
+
.EquationEditorModal .slider.round:before {
|
|
288
|
+
border-radius: 50%;
|
|
283
289
|
}
|
|
290
|
+
/* Note that the top left position of the toolbar is set programatically in componentDidMount */
|
|
284
291
|
|
|
285
|
-
.
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
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;
|
|
297
304
|
}
|
|
298
305
|
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
border: 0px;
|
|
307
|
-
border-radius: 5px 5px 0px 0px;
|
|
308
|
-
padding: 15px;
|
|
309
|
-
margin: 0px;
|
|
306
|
+
@keyframes fadeIn1 {
|
|
307
|
+
0% {
|
|
308
|
+
opacity: 0;
|
|
309
|
+
}
|
|
310
|
+
100% {
|
|
311
|
+
opacity: 1;
|
|
312
|
+
}
|
|
310
313
|
}
|
|
311
314
|
|
|
312
|
-
.
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
padding: 15px;
|
|
323
|
-
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;
|
|
324
325
|
}
|
|
325
326
|
|
|
326
|
-
.
|
|
327
|
-
|
|
327
|
+
.Toolbar-button:hover {
|
|
328
|
+
color: white;
|
|
329
|
+
background: #663676;
|
|
330
|
+
cursor: pointer;
|
|
328
331
|
}
|
|
329
332
|
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
width: 35px;
|
|
335
|
-
height: 22px;
|
|
333
|
+
.Toolbar-button:active {
|
|
334
|
+
background: #808080;
|
|
335
|
+
color: white;
|
|
336
|
+
cursor: pointer;
|
|
336
337
|
}
|
|
337
338
|
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
opacity: 0;
|
|
341
|
-
width: 0;
|
|
342
|
-
height: 0;
|
|
339
|
+
.TB-narrow {
|
|
340
|
+
width: 30px;
|
|
343
341
|
}
|
|
344
342
|
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
position: absolute;
|
|
348
|
-
cursor: pointer;
|
|
349
|
-
top: 0;
|
|
350
|
-
left: 0;
|
|
351
|
-
right: 0;
|
|
352
|
-
bottom: 0;
|
|
353
|
-
background-color: #ccc;
|
|
354
|
-
-webkit-transition: 0.4s;
|
|
355
|
-
transition: 0.4s;
|
|
343
|
+
.TB-wide {
|
|
344
|
+
width: 46px;
|
|
356
345
|
}
|
|
357
346
|
|
|
358
|
-
.
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
bottom: 4px;
|
|
365
|
-
background-color: white;
|
|
366
|
-
-webkit-transition: 0.4s;
|
|
367
|
-
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;
|
|
368
353
|
}
|
|
369
354
|
|
|
370
|
-
.
|
|
371
|
-
|
|
355
|
+
.TB-selected:hover {
|
|
356
|
+
color: white;
|
|
357
|
+
background: #663676;
|
|
358
|
+
cursor: pointer;
|
|
372
359
|
}
|
|
373
360
|
|
|
374
|
-
|
|
375
|
-
|
|
361
|
+
@keyframes TB-fadeIn {
|
|
362
|
+
00% {
|
|
363
|
+
background: white;
|
|
364
|
+
}
|
|
365
|
+
100% {
|
|
366
|
+
background: #d0d0d0;
|
|
367
|
+
}
|
|
376
368
|
}
|
|
377
369
|
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
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%); */
|
|
382
390
|
}
|
|
383
391
|
|
|
384
|
-
/*
|
|
385
|
-
.
|
|
386
|
-
|
|
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; */
|
|
387
401
|
}
|
|
388
402
|
|
|
389
|
-
|
|
390
|
-
|
|
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
|
+
}
|
|
391
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
|
+
} */
|
|
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 {
|