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