@khanacademy/perseus 57.2.2 → 58.0.0

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/es/index.css DELETED
@@ -1,3184 +0,0 @@
1
- .perseus-sr-only {
2
- border: 0;
3
- clip: rect(0, 0, 0, 0);
4
- font-size: 0;
5
- height: 1px;
6
- margin: -1px;
7
- overflow: hidden;
8
- padding: 0;
9
- position: absolute;
10
- width: 1px;
11
- }
12
- .perseus-clearfix {
13
- *zoom: 1;
14
- }
15
- .perseus-clearfix:before,
16
- .perseus-clearfix:after {
17
- content: "";
18
- display: table;
19
- }
20
- .perseus-clearfix:after {
21
- clear: both;
22
- }
23
- /**
24
- * This file contains styles that are used in prod that ultimately
25
- * get passed onto Perseus components. This file is imported in the
26
- * .storybook/preview.js file so that the components can have the same
27
- * styles as prod when viewed within Storybook.
28
- */
29
- @layer reset, shared, legacy;
30
- @layer reset {
31
- /* http://meyerweb.com/eric/tools/css/reset/
32
- v2.0 | 20110126
33
- License: none (public domain)
34
- */
35
-
36
- html,
37
- body,
38
- div,
39
- span,
40
- applet,
41
- object,
42
- iframe,
43
- h1,
44
- h2,
45
- h3,
46
- h4,
47
- h5,
48
- h6,
49
- p,
50
- blockquote,
51
- pre,
52
- a,
53
- abbr,
54
- acronym,
55
- address,
56
- big,
57
- cite,
58
- code,
59
- del,
60
- dfn,
61
- em,
62
- img,
63
- ins,
64
- kbd,
65
- q,
66
- s,
67
- samp,
68
- small,
69
- strike,
70
- strong,
71
- sub,
72
- sup,
73
- tt,
74
- var,
75
- b,
76
- u,
77
- i,
78
- center,
79
- dl,
80
- dt,
81
- dd,
82
- ol,
83
- ul,
84
- li,
85
- fieldset,
86
- form,
87
- label,
88
- legend,
89
- table,
90
- caption,
91
- tbody,
92
- tfoot,
93
- thead,
94
- tr,
95
- th,
96
- td,
97
- article,
98
- aside,
99
- canvas,
100
- details,
101
- embed,
102
- figure,
103
- figcaption,
104
- footer,
105
- header,
106
- hgroup,
107
- menu,
108
- nav,
109
- output,
110
- ruby,
111
- section,
112
- summary,
113
- time,
114
- mark,
115
- audio,
116
- video {
117
- margin: 0;
118
- padding: 0;
119
- border: 0;
120
- font-size: 100%;
121
- font: inherit;
122
- vertical-align: baseline;
123
- }
124
- /* HTML5 display-role reset for older browsers */
125
- article,
126
- aside,
127
- details,
128
- figcaption,
129
- figure,
130
- footer,
131
- header,
132
- hgroup,
133
- menu,
134
- nav,
135
- section {
136
- display: block;
137
- }
138
- body {
139
- line-height: 1;
140
- }
141
- ol,
142
- ul {
143
- list-style: none;
144
- }
145
- blockquote,
146
- q {
147
- quotes: none;
148
- }
149
- blockquote:before,
150
- blockquote:after,
151
- q:before,
152
- q:after {
153
- content: "";
154
- content: none;
155
- }
156
- table {
157
- border-collapse: collapse;
158
- border-spacing: 0;
159
- }
160
-
161
- /* End Reset */
162
-
163
- }
164
- @layer shared {
165
- html,
166
- body {
167
- height: 100%;
168
- }
169
- body {
170
- font-family: "Lato", "Noto Sans", "Helvetica", "Corbel", sans-serif, "Helvetica", "Corbel", sans-serif;
171
- font-size: 14px;
172
- margin: 0;
173
- color: #21242c;
174
- line-height: 1.4;
175
- min-width: 0;
176
- }
177
- .box-sizing-border-box-reset {
178
- box-sizing: border-box;
179
- }
180
- .box-sizing-border-box-reset * {
181
- box-sizing: inherit;
182
- }
183
- }
184
- .framework-perseus code {
185
- font-family: Courier, monospace;
186
- }
187
- .framework-perseus pre {
188
- background-color: #f0f1f2;
189
- border-radius: 4px;
190
- color: #21242c;
191
- font-size: 18px;
192
- padding: 16px;
193
- white-space: pre;
194
- overflow: auto;
195
- }
196
- .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-widget-container:not(.perseus-widget__definition) {
197
- font-size: 14px;
198
- line-height: 19.6px;
199
- }
200
- .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-widget-container.widget-float-left,
201
- .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-widget-container.widget-float-right {
202
- max-width: 50%;
203
- padding-top: 32px;
204
- width: 100%;
205
- }
206
- .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-widget-container.widget-float-left .perseus-image-caption .paragraph .paragraph,
207
- .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-widget-container.widget-float-right .perseus-image-caption .paragraph .paragraph {
208
- margin-bottom: 0;
209
- }
210
- .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-widget-container.widget-float-left {
211
- float: left;
212
- padding-right: 32px;
213
- }
214
- .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-widget-container.widget-float-right {
215
- float: right;
216
- padding-left: 32px;
217
- }
218
- .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-renderer > .paragraph {
219
- color: #21242c;
220
- font-size: 20px;
221
- line-height: 30px;
222
- margin: 0 auto;
223
- max-width: 688px;
224
- }
225
- .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-renderer > .paragraph .paragraph {
226
- color: #21242c;
227
- font-size: 20px;
228
- line-height: 30px;
229
- margin-bottom: 32px;
230
- margin-top: 0;
231
- }
232
- .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-renderer > .paragraph mjx-container {
233
- font-size: 100%;
234
- }
235
- .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-renderer > .paragraph ul:not(.perseus-widget-radio) {
236
- color: #21242c;
237
- font-size: 20px;
238
- line-height: 30px;
239
- }
240
- .framework-perseus.perseus-article:not(.perseus-mobile) table {
241
- color: #21242c;
242
- font-size: 20px;
243
- line-height: 30px;
244
- margin-bottom: 32px;
245
- }
246
- .framework-perseus.perseus-article:not(.perseus-mobile) h2 {
247
- font-family: inherit;
248
- font-size: 30px;
249
- font-weight: 700;
250
- line-height: 1.1;
251
- margin-bottom: 16px;
252
- margin-top: 48px;
253
- }
254
- .framework-perseus.perseus-article:not(.perseus-mobile) h3 {
255
- font-family: inherit;
256
- font-size: 26px;
257
- font-weight: 700;
258
- line-height: 1.1;
259
- margin-bottom: 16px;
260
- margin-top: 32px;
261
- }
262
- .framework-perseus.perseus-article:not(.perseus-mobile) h4,
263
- .framework-perseus.perseus-article:not(.perseus-mobile) h5,
264
- .framework-perseus.perseus-article:not(.perseus-mobile) h6 {
265
- font-family: inherit;
266
- font-size: 22px;
267
- font-weight: 700;
268
- line-height: 25px;
269
- margin-bottom: 16px;
270
- margin-top: 32px;
271
- }
272
- .framework-perseus.perseus-article:not(.perseus-mobile) blockquote {
273
- padding: 0 32px;
274
- }
275
- .framework-perseus.perseus-article:not(.perseus-mobile) .MathJax .math {
276
- color: inherit;
277
- }
278
- .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-image-caption .perseus-renderer .paragraph .paragraph,
279
- .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-image-caption .perseus-renderer .paragraph ol,
280
- .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-image-caption .perseus-renderer .paragraph ul {
281
- color: rgba(33, 36, 44, 0.64);
282
- font-size: 14px;
283
- line-height: 19px;
284
- margin: 16px auto 42px;
285
- text-align: left;
286
- }
287
- .framework-perseus.perseus-article:not(.perseus-mobile) .paragraph.perseus-paragraph-full-width {
288
- margin-bottom: 32px;
289
- margin-left: 0;
290
- margin-right: 0;
291
- max-width: none;
292
- }
293
- .framework-perseus.perseus-article:not(.perseus-mobile) .paragraph.perseus-paragraph-full-width > .paragraph {
294
- margin: 0;
295
- max-width: none;
296
- }
297
- .framework-perseus.perseus-article:not(.perseus-mobile) .unresponsive-svg-image,
298
- .framework-perseus.perseus-article:not(.perseus-mobile) .svg-image {
299
- font-size: 14px;
300
- line-height: 19.6px;
301
- }
302
- .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-block-math {
303
- margin-bottom: 32px;
304
- position: relative;
305
- }
306
- .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-block-math:before {
307
- bottom: 0;
308
- content: "";
309
- position: absolute;
310
- right: 0;
311
- top: 0;
312
- width: 30px;
313
- }
314
- .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-block-math-inner {
315
- overflow-x: auto;
316
- padding-bottom: 8px;
317
- padding-right: 20px;
318
- padding-top: 8px;
319
- }
320
- .framework-perseus.perseus-article:not(.perseus-mobile) > .clearfix:first-child > .perseus-renderer:first-child > .paragraph:first-child h1:first-child,
321
- .framework-perseus.perseus-article:not(.perseus-mobile) > .clearfix:first-child > .perseus-renderer:first-child > .paragraph:first-child h2:first-child,
322
- .framework-perseus.perseus-article:not(.perseus-mobile) > .clearfix:first-child > .perseus-renderer:first-child > .paragraph:first-child h3:first-child,
323
- .framework-perseus.perseus-article:not(.perseus-mobile) > .clearfix:first-child > .perseus-renderer:first-child > .paragraph:first-child h4:first-child,
324
- .framework-perseus.perseus-article:not(.perseus-mobile) > .clearfix:first-child > .perseus-renderer:first-child > .paragraph:first-child h5:first-child,
325
- .framework-perseus.perseus-article:not(.perseus-mobile) > .clearfix:first-child > .perseus-renderer:first-child > .paragraph:first-child h6:first-child {
326
- margin-top: 0;
327
- }
328
- .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-renderer > .paragraph .perseus-formats-tooltip {
329
- padding: 8px 12px;
330
- }
331
- .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-renderer > .paragraph .perseus-formats-tooltip .paragraph {
332
- margin-bottom: 0;
333
- }
334
- .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-renderer > .paragraph .perseus-formats-tooltip .paragraph ul:not(.perseus-widget-radio) {
335
- font-size: 15px;
336
- line-height: 1.5;
337
- margin: 0;
338
- }
339
- .framework-perseus.perseus-article:not(.perseus-mobile) pre {
340
- margin: 0 -16px 32px -16px;
341
- }
342
- .framework-perseus:not(.perseus-article):not(.perseus-mobile) .perseus-radio-option-content .perseus-renderer > .paragraph {
343
- font-family: inherit;
344
- font-size: 14px;
345
- line-height: 1.25;
346
- color: #21242c;
347
- }
348
- .framework-perseus:not(.perseus-article):not(.perseus-mobile) .perseus-radio-option-content .perseus-renderer > .paragraph .paragraph {
349
- font-family: inherit;
350
- font-size: 14px;
351
- line-height: 1.25;
352
- color: #21242c;
353
- }
354
- .framework-perseus:not(.perseus-article):not(.perseus-mobile) .perseus-radio-rationale-content .perseus-renderer > .paragraph {
355
- font-family: inherit;
356
- font-size: 14px;
357
- line-height: 1.25;
358
- color: #21242c;
359
- }
360
- .framework-perseus:not(.perseus-article):not(.perseus-mobile) .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph {
361
- font-family: inherit;
362
- font-size: 14px;
363
- line-height: 1.25;
364
- color: #21242c;
365
- }
366
- .framework-perseus:not(.perseus-article):not(.perseus-mobile) .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph mjx-container {
367
- color: #21242c;
368
- }
369
- .framework-perseus.perseus-mobile .perseus-article .perseus-widget-container.widget-float-left {
370
- float: left;
371
- padding-right: 1em;
372
- max-width: 50%;
373
- width: 100%;
374
- }
375
- .framework-perseus.perseus-mobile .perseus-article .perseus-widget-container.widget-float-right {
376
- float: right;
377
- padding-left: 1em;
378
- max-width: 50%;
379
- width: 100%;
380
- }
381
- .framework-perseus.perseus-mobile .perseus-article .perseus-renderer > .paragraph {
382
- margin-left: auto;
383
- margin-right: auto;
384
- max-width: 700px;
385
- }
386
- .framework-perseus.perseus-mobile .perseus-article .paragraph.perseus-paragraph-full-width {
387
- margin-left: 0;
388
- margin-right: 0;
389
- max-width: none;
390
- }
391
- .framework-perseus.perseus-mobile .perseus-article .paragraph.perseus-paragraph-full-width > .paragraph {
392
- margin: 0;
393
- max-width: none;
394
- }
395
- .framework-perseus.perseus-mobile :not(blockquote) > div.paragraph {
396
- margin: 0;
397
- }
398
- .framework-perseus.perseus-mobile .perseus-renderer > .paragraph {
399
- margin: 0 auto;
400
- }
401
- .framework-perseus.perseus-mobile .perseus-renderer > .paragraph:not(:first-child) {
402
- margin-top: 32px;
403
- }
404
- .framework-perseus.perseus-mobile .perseus-renderer > .paragraph > .paragraph {
405
- margin: 0;
406
- }
407
- .framework-perseus.perseus-mobile .clearfix > .perseus-renderer {
408
- margin-bottom: 32px;
409
- }
410
- .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ul:not(.perseus-widget-radio, .indicatorContainer) {
411
- margin: 0 0 0 1em;
412
- padding: 0;
413
- }
414
- .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ul:not(.perseus-widget-radio, .indicatorContainer) > li {
415
- padding-left: 10px;
416
- margin-bottom: 24px;
417
- }
418
- .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol {
419
- margin: 0;
420
- padding-left: 32px;
421
- }
422
- .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol > li {
423
- list-style-type: decimal;
424
- margin-bottom: 24px;
425
- }
426
- .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol ol,
427
- .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ul:not(.perseus-widget-radio) ol,
428
- .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol ul:not(.perseus-widget-radio),
429
- .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ul:not(.perseus-widget-radio) ul:not(.perseus-widget-radio) {
430
- padding-top: 24px;
431
- }
432
- .framework-perseus.perseus-mobile .perseus-block-math {
433
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
434
- -webkit-touch-callout: none;
435
- }
436
- @media (max-width: 767px) {
437
- .framework-perseus.perseus-mobile .perseus-renderer > .paragraph {
438
- max-width: none;
439
- }
440
- .framework-perseus.perseus-mobile h1 {
441
- font-weight: 700;
442
- padding-top: 0px;
443
- font-family: inherit;
444
- font-size: 24px;
445
- line-height: 1.2;
446
- color: #21242c;
447
- }
448
- .framework-perseus.perseus-mobile h2 {
449
- font-weight: 700;
450
- padding-top: 16px;
451
- font-family: inherit;
452
- font-size: 24px;
453
- line-height: 1.2;
454
- color: #3b3e40;
455
- }
456
- .framework-perseus.perseus-mobile h3,
457
- .framework-perseus.perseus-mobile h4 {
458
- font-weight: 700;
459
- padding-top: 0px;
460
- font-family: inherit;
461
- font-size: 22px;
462
- line-height: 1.1;
463
- color: #626569;
464
- }
465
- .framework-perseus.perseus-mobile .default-body-text {
466
- font-family: inherit;
467
- font-size: 18px;
468
- line-height: 1.4;
469
- color: #626569;
470
- }
471
- .framework-perseus.perseus-mobile .perseus-renderer > .paragraph {
472
- font-family: inherit;
473
- font-size: 18px;
474
- line-height: 1.4;
475
- color: #626569;
476
- }
477
- .framework-perseus.perseus-mobile .perseus-renderer > .paragraph .paragraph {
478
- font-family: inherit;
479
- font-size: 18px;
480
- line-height: 1.4;
481
- color: #626569;
482
- }
483
- .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ul:not(.perseus-widget-radio) {
484
- font-family: inherit;
485
- font-size: 18px;
486
- line-height: 1.4;
487
- color: #626569;
488
- }
489
- .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol {
490
- font-family: inherit;
491
- font-size: 18px;
492
- line-height: 1.4;
493
- color: #626569;
494
- }
495
- .framework-perseus.perseus-mobile blockquote {
496
- font-family: inherit;
497
- font-size: 18px;
498
- line-height: 1.4;
499
- color: #626569;
500
- color: #888d93;
501
- }
502
- .framework-perseus.perseus-mobile table {
503
- font-family: inherit;
504
- font-size: 18px;
505
- line-height: 1.4;
506
- color: #626569;
507
- }
508
- .framework-perseus.perseus-mobile .perseus-radio-option-content .perseus-renderer > .paragraph {
509
- font-family: inherit;
510
- font-size: 16px;
511
- line-height: 1.25;
512
- color: #21242c;
513
- }
514
- .framework-perseus.perseus-mobile .perseus-radio-option-content .perseus-renderer > .paragraph .paragraph {
515
- font-family: inherit;
516
- font-size: 16px;
517
- line-height: 1.25;
518
- color: #21242c;
519
- }
520
- .framework-perseus.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph {
521
- font-family: inherit;
522
- font-size: 16px;
523
- line-height: 1.25;
524
- color: #21242c;
525
- }
526
- .framework-perseus.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph {
527
- font-family: inherit;
528
- font-size: 16px;
529
- line-height: 1.25;
530
- color: #21242c;
531
- }
532
- .framework-perseus.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph mjx-container {
533
- color: #21242c;
534
- }
535
- .framework-perseus.perseus-mobile .perseus-image-caption .paragraph .paragraph {
536
- color: #888d93;
537
- font-size: 14px;
538
- line-height: 1.3;
539
- text-align: left;
540
- }
541
- .framework-perseus.perseus-mobile .perseus-image-caption.has-title .paragraph .paragraph strong:first-child {
542
- color: #3b3e40;
543
- }
544
- .framework-perseus.perseus-mobile mjx-container:not(.mafs-graph *) {
545
- font-size: 21px;
546
- line-height: 1.2;
547
- color: #21242c;
548
- }
549
- .framework-perseus.perseus-mobile .perseus-block-math mjx-container {
550
- font-size: 21px;
551
- line-height: 1.5;
552
- }
553
- .framework-perseus.perseus-mobile .graphie-label mjx-container {
554
- font-size: 1.21em;
555
- line-height: 1.2;
556
- }
557
- .framework-perseus.perseus-mobile code {
558
- font-family: Courier, monospace;
559
- }
560
- .framework-perseus.perseus-mobile pre {
561
- background-color: #f0f1f2;
562
- border-radius: 4px;
563
- color: #21242c;
564
- font-size: 18px;
565
- line-height: 1.6;
566
- padding: 16px;
567
- white-space: pre;
568
- overflow: auto;
569
- }
570
- .framework-perseus.perseus-mobile blockquote {
571
- padding: 0 0 0 18px;
572
- border-left: 4px solid #d8d8d8;
573
- }
574
- }
575
- @media (min-width: 768px) and (max-width: 1199px) {
576
- .framework-perseus.perseus-mobile .perseus-renderer > .paragraph {
577
- max-width: 512px;
578
- }
579
- .framework-perseus.perseus-mobile h1 {
580
- font-weight: 700;
581
- padding-top: 0px;
582
- font-family: inherit;
583
- font-size: 30px;
584
- line-height: 1.1;
585
- color: #21242c;
586
- }
587
- .framework-perseus.perseus-mobile h2 {
588
- font-weight: 700;
589
- padding-top: 32px;
590
- font-family: inherit;
591
- font-size: 30px;
592
- line-height: 1.1;
593
- color: #3b3e40;
594
- }
595
- .framework-perseus.perseus-mobile h3,
596
- .framework-perseus.perseus-mobile h4 {
597
- font-weight: 700;
598
- padding-top: 16px;
599
- font-family: inherit;
600
- font-size: 28px;
601
- line-height: 1.1;
602
- color: #626569;
603
- }
604
- .framework-perseus.perseus-mobile .default-body-text {
605
- font-family: inherit;
606
- font-size: 20px;
607
- line-height: 1.5;
608
- color: #626569;
609
- }
610
- .framework-perseus.perseus-mobile .perseus-renderer > .paragraph {
611
- font-family: inherit;
612
- font-size: 20px;
613
- line-height: 1.5;
614
- color: #626569;
615
- }
616
- .framework-perseus.perseus-mobile .perseus-renderer > .paragraph .paragraph {
617
- font-family: inherit;
618
- font-size: 20px;
619
- line-height: 1.5;
620
- color: #626569;
621
- }
622
- .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ul:not(.perseus-widget-radio) {
623
- font-family: inherit;
624
- font-size: 20px;
625
- line-height: 1.5;
626
- color: #626569;
627
- }
628
- .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol {
629
- font-family: inherit;
630
- font-size: 20px;
631
- line-height: 1.5;
632
- color: #626569;
633
- }
634
- .framework-perseus.perseus-mobile blockquote {
635
- font-family: inherit;
636
- font-size: 20px;
637
- line-height: 1.5;
638
- color: #626569;
639
- color: #888d93;
640
- }
641
- .framework-perseus.perseus-mobile table {
642
- font-family: inherit;
643
- font-size: 20px;
644
- line-height: 1.5;
645
- color: #626569;
646
- }
647
- .framework-perseus.perseus-mobile .perseus-radio-option-content .perseus-renderer > .paragraph {
648
- font-family: inherit;
649
- font-size: 18px;
650
- line-height: 1.25;
651
- color: #21242c;
652
- }
653
- .framework-perseus.perseus-mobile .perseus-radio-option-content .perseus-renderer > .paragraph .paragraph {
654
- font-family: inherit;
655
- font-size: 18px;
656
- line-height: 1.25;
657
- color: #21242c;
658
- }
659
- .framework-perseus.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph {
660
- font-family: inherit;
661
- font-size: 18px;
662
- line-height: 1.25;
663
- color: #21242c;
664
- }
665
- .framework-perseus.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph {
666
- font-family: inherit;
667
- font-size: 18px;
668
- line-height: 1.25;
669
- color: #21242c;
670
- }
671
- .framework-perseus.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph mjx-container {
672
- color: #21242c;
673
- }
674
- .framework-perseus.perseus-mobile .perseus-image-caption .paragraph .paragraph {
675
- color: #888d93;
676
- font-size: 17px;
677
- line-height: 1.4;
678
- text-align: left;
679
- }
680
- .framework-perseus.perseus-mobile .perseus-image-caption.has-title .paragraph .paragraph strong:first-child {
681
- color: #3b3e40;
682
- }
683
- .framework-perseus.perseus-mobile mjx-container:not(.mafs-graph *) {
684
- font-size: 23px;
685
- line-height: 1.3;
686
- color: #21242c;
687
- }
688
- .framework-perseus.perseus-mobile .perseus-block-math mjx-container {
689
- font-size: 30px;
690
- line-height: 1.3;
691
- }
692
- .framework-perseus.perseus-mobile .graphie-label mjx-container {
693
- font-size: 1.21em;
694
- line-height: 1.2;
695
- }
696
- .framework-perseus.perseus-mobile code {
697
- font-family: Courier, monospace;
698
- }
699
- .framework-perseus.perseus-mobile pre {
700
- background-color: #f0f1f2;
701
- border-radius: 4px;
702
- color: #21242c;
703
- font-size: 18px;
704
- line-height: 1.6;
705
- padding: 16px;
706
- white-space: pre;
707
- overflow: auto;
708
- }
709
- .framework-perseus.perseus-mobile blockquote {
710
- padding: 0 0 0 20px;
711
- border-left: 4px solid #d8d8d8;
712
- }
713
- }
714
- @media (min-width: 1200px) {
715
- .framework-perseus.perseus-mobile .perseus-renderer > .paragraph {
716
- max-width: 688px;
717
- }
718
- .framework-perseus.perseus-mobile h1 {
719
- font-weight: 700;
720
- padding-top: 0px;
721
- font-family: inherit;
722
- font-size: 35px;
723
- line-height: 1.1;
724
- color: #21242c;
725
- }
726
- .framework-perseus.perseus-mobile h2 {
727
- font-weight: 700;
728
- padding-top: 32px;
729
- font-family: inherit;
730
- font-size: 35px;
731
- line-height: 1.1;
732
- color: #3b3e40;
733
- }
734
- .framework-perseus.perseus-mobile h3,
735
- .framework-perseus.perseus-mobile h4 {
736
- font-weight: 700;
737
- padding-top: 16px;
738
- font-family: inherit;
739
- font-size: 30px;
740
- line-height: 1.1;
741
- color: #626569;
742
- }
743
- .framework-perseus.perseus-mobile .default-body-text {
744
- font-family: inherit;
745
- font-size: 22px;
746
- line-height: 1.4;
747
- color: #626569;
748
- }
749
- .framework-perseus.perseus-mobile .perseus-renderer > .paragraph {
750
- font-family: inherit;
751
- font-size: 22px;
752
- line-height: 1.4;
753
- color: #626569;
754
- }
755
- .framework-perseus.perseus-mobile .perseus-renderer > .paragraph .paragraph {
756
- font-family: inherit;
757
- font-size: 22px;
758
- line-height: 1.4;
759
- color: #626569;
760
- }
761
- .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ul:not(.perseus-widget-radio) {
762
- font-family: inherit;
763
- font-size: 22px;
764
- line-height: 1.4;
765
- color: #626569;
766
- }
767
- .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol {
768
- font-family: inherit;
769
- font-size: 22px;
770
- line-height: 1.4;
771
- color: #626569;
772
- }
773
- .framework-perseus.perseus-mobile blockquote {
774
- font-family: inherit;
775
- font-size: 22px;
776
- line-height: 1.4;
777
- color: #626569;
778
- color: #888d93;
779
- }
780
- .framework-perseus.perseus-mobile table {
781
- font-family: inherit;
782
- font-size: 22px;
783
- line-height: 1.4;
784
- color: #626569;
785
- }
786
- .framework-perseus.perseus-mobile .perseus-radio-option-content .perseus-renderer > .paragraph {
787
- font-family: inherit;
788
- font-size: 20px;
789
- line-height: 1.25;
790
- color: #21242c;
791
- }
792
- .framework-perseus.perseus-mobile .perseus-radio-option-content .perseus-renderer > .paragraph .paragraph {
793
- font-family: inherit;
794
- font-size: 20px;
795
- line-height: 1.25;
796
- color: #21242c;
797
- }
798
- .framework-perseus.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph {
799
- font-family: inherit;
800
- font-size: 20px;
801
- line-height: 1.25;
802
- color: #21242c;
803
- }
804
- .framework-perseus.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph {
805
- font-family: inherit;
806
- font-size: 20px;
807
- line-height: 1.25;
808
- color: #21242c;
809
- }
810
- .framework-perseus.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph mjx-container {
811
- color: #21242c;
812
- }
813
- .framework-perseus.perseus-mobile .perseus-image-caption .paragraph .paragraph {
814
- color: #888d93;
815
- font-size: 20px;
816
- line-height: 1.4;
817
- text-align: left;
818
- }
819
- .framework-perseus.perseus-mobile .perseus-image-caption.has-title .paragraph .paragraph strong:first-child {
820
- color: #3b3e40;
821
- }
822
- .framework-perseus.perseus-mobile mjx-container:not(.mafs-graph *) {
823
- font-size: 25px;
824
- line-height: 1.2;
825
- color: #21242c;
826
- }
827
- .framework-perseus.perseus-mobile .perseus-block-math mjx-container {
828
- font-size: 30px;
829
- line-height: 1.3;
830
- }
831
- .framework-perseus.perseus-mobile .graphie-label mjx-container {
832
- font-size: 1.21em;
833
- line-height: 1.2;
834
- }
835
- .framework-perseus.perseus-mobile code {
836
- font-family: Courier, monospace;
837
- }
838
- .framework-perseus.perseus-mobile pre {
839
- background-color: #f0f1f2;
840
- border-radius: 4px;
841
- color: #21242c;
842
- font-size: 18px;
843
- line-height: 1.6;
844
- padding: 16px;
845
- white-space: pre;
846
- overflow: auto;
847
- }
848
- .framework-perseus.perseus-mobile blockquote {
849
- padding: 0 0 0 20px;
850
- border-left: 5px solid #d8d8d8;
851
- }
852
- }
853
- .framework-perseus.perseus-mobile .perseus-widget-container {
854
- font-size: 14px;
855
- line-height: 19.6px;
856
- }
857
- .framework-perseus.perseus-mobile .perseus-widget-container.widget-float-left,
858
- .framework-perseus.perseus-mobile .perseus-widget-container.widget-float-right {
859
- max-width: 50%;
860
- padding-top: 32px;
861
- width: 100%;
862
- }
863
- .framework-perseus.perseus-mobile .perseus-widget-container.widget-float-left .perseus-image-caption .paragraph .paragraph,
864
- .framework-perseus.perseus-mobile .perseus-widget-container.widget-float-right .perseus-image-caption .paragraph .paragraph {
865
- margin-bottom: 0;
866
- }
867
- .framework-perseus.perseus-mobile .perseus-widget-container.widget-float-left {
868
- float: left;
869
- padding-right: 32px;
870
- }
871
- .framework-perseus.perseus-mobile .perseus-widget-container.widget-float-right {
872
- float: right;
873
- padding-left: 32px;
874
- }
875
- .framework-perseus.perseus-mobile .MathJax .math {
876
- color: inherit;
877
- }
878
- .framework-perseus.perseus-mobile .perseus-image-widget {
879
- text-align: center;
880
- }
881
- .framework-perseus.perseus-mobile .perseus-block-math {
882
- padding-top: 16px;
883
- padding-bottom: 16px;
884
- }
885
- .framework-perseus.perseus-mobile .paragraph.perseus-paragraph-full-width {
886
- margin-left: 0;
887
- margin-right: 0;
888
- max-width: none;
889
- }
890
- .framework-perseus.perseus-mobile .paragraph.perseus-paragraph-full-width > .paragraph {
891
- margin: 0;
892
- max-width: none;
893
- }
894
- .framework-perseus.perseus-mobile .unresponsive-svg-image,
895
- .framework-perseus.perseus-mobile .svg-image {
896
- font-size: 14px;
897
- line-height: 19.6px;
898
- }
899
- .framework-perseus.perseus-mobile .perseus-renderer > .paragraph .perseus-formats-tooltip {
900
- padding: 8px 12px;
901
- }
902
- .framework-perseus.perseus-mobile .perseus-renderer > .paragraph .perseus-formats-tooltip .paragraph {
903
- margin-bottom: 0;
904
- }
905
- .framework-perseus.perseus-mobile .perseus-renderer > .paragraph .perseus-formats-tooltip .paragraph ul:not(.perseus-widget-radio) {
906
- font-size: 15px;
907
- line-height: 1.5;
908
- margin: 0;
909
- }
910
- /* Derived from the MIT-licensed zoom.js:
911
- https://github.com/fat/zoom.js/blob/fd4f3e43153da7596da0bade198e99f98b47791e/
912
- */
913
- .zoomable {
914
- cursor: pointer;
915
- cursor: -webkit-zoom-in;
916
- cursor: -moz-zoom-in;
917
- }
918
- .zoom-img {
919
- background-color: white;
920
- position: absolute;
921
- z-index: 9001;
922
- }
923
- img.zoom-img {
924
- cursor: pointer;
925
- cursor: -webkit-zoom-out;
926
- cursor: -moz-zoom-out;
927
- }
928
- .zoom-transition {
929
- transition: transform 300ms ease;
930
- }
931
- .zoom-overlay {
932
- z-index: 9000;
933
- position: fixed;
934
- top: 0;
935
- left: 0;
936
- right: 0;
937
- bottom: 0;
938
- overflow: scroll;
939
- }
940
- .zoom-overlay-open,
941
- .zoom-overlay-transitioning {
942
- cursor: default;
943
- }
944
- .zoom-overlay-open {
945
- height: 100%;
946
- max-height: 100%;
947
- overflow: hidden;
948
- }
949
- .zoom-backdrop {
950
- z-index: 8999;
951
- position: fixed;
952
- top: 0;
953
- left: 0;
954
- right: 0;
955
- bottom: 0;
956
- background: white;
957
- opacity: 0;
958
- transition: opacity 300ms;
959
- }
960
- .zoom-overlay-open > .zoom-backdrop {
961
- opacity: 0.9;
962
- }
963
- #perseus {
964
- position: relative;
965
- }
966
- .framework-perseus.perseus-mobile {
967
- margin-top: 48px;
968
- }
969
- .no-select {
970
- -webkit-user-select: none;
971
- user-select: none;
972
- }
973
- .blank-background {
974
- background-color: #fdfdfd;
975
- }
976
- .graphie {
977
- -webkit-user-select: none;
978
- user-select: none;
979
- }
980
- .graphie svg {
981
- position: absolute;
982
- top: 0;
983
- left: 0;
984
- }
985
- var,
986
- div.graphie {
987
- white-space: pre;
988
- /**
989
- * Graphie didn't have a fixed font-size and was just using
990
- * the surrounding font-size. However some labels are banking on
991
- * specific dimensions, so we need to lock it to a specific size.
992
- */
993
- font-size: 14px;
994
- }
995
- .hint.last-hint .paragraph {
996
- font-weight: bold;
997
- }
998
- #answercontent input[type=text].perseus-input-size-normal,
999
- #answercontent input[type=number].perseus-input-size-normal,
1000
- .framework-perseus input[type=text].perseus-input-size-normal,
1001
- .framework-perseus input[type=number].perseus-input-size-normal {
1002
- border: 1px solid #ccc;
1003
- width: 80px;
1004
- }
1005
- #answercontent input[type=text].perseus-input-size-small,
1006
- #answercontent input[type=number].perseus-input-size-small,
1007
- .framework-perseus input[type=text].perseus-input-size-small,
1008
- .framework-perseus input[type=number].perseus-input-size-small {
1009
- border: 1px solid #ccc;
1010
- width: 40px;
1011
- }
1012
- #answercontent input[type=text].perseus-input-right-align,
1013
- #answercontent input[type=number].perseus-input-right-align,
1014
- .framework-perseus input[type=text].perseus-input-right-align,
1015
- .framework-perseus input[type=number].perseus-input-right-align {
1016
- text-align: right;
1017
- }
1018
- .framework-perseus.perseus-mobile .perseus-input-right-align .keypad-input {
1019
- text-align: right;
1020
- }
1021
- .framework-perseus div.paragraph {
1022
- font-family: "Lato", sans-serif;
1023
- font-weight: 400;
1024
- font-size: 18px;
1025
- line-height: 22px;
1026
- margin: 22px 0px;
1027
- }
1028
- .framework-perseus .test-prep-blurb div.paragraph {
1029
- font-size: 16px;
1030
- line-height: 20px;
1031
- }
1032
- .framework-perseus div.instructions {
1033
- display: block;
1034
- font-family: "Noto Serif", serif;
1035
- font-weight: 800;
1036
- font-size: 18px;
1037
- line-height: 22px;
1038
- font-style: italic;
1039
- }
1040
- .framework-perseus .perseus-renderer > .paragraph > ul:not(.perseus-widget-radio),
1041
- .framework-perseus .perseus-renderer > .paragraph > ol {
1042
- margin: 0px 0px 22px 0px;
1043
- }
1044
- .framework-perseus .paragraph ul:not(.perseus-widget-radio, .indicatorContainer) {
1045
- padding-left: 35px;
1046
- list-style-type: disc;
1047
- }
1048
- .framework-perseus .paragraph ol {
1049
- list-style: decimal;
1050
- padding-left: 2em;
1051
- }
1052
- .framework-perseus blockquote {
1053
- padding: 0 2.5em;
1054
- }
1055
- .framework-perseus .zoomable {
1056
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1057
- -webkit-touch-callout: none;
1058
- }
1059
- .framework-perseus sup:not(.mq-non-leaf) {
1060
- font-size: smaller;
1061
- vertical-align: super;
1062
- line-height: 0;
1063
- }
1064
- .framework-perseus .range-input {
1065
- border: 1px solid #ccc;
1066
- border-radius: 5px;
1067
- display: inline-block;
1068
- padding: 0px 5px;
1069
- }
1070
- .framework-perseus .range-input > input {
1071
- border: 0;
1072
- display: inline;
1073
- text-align: center;
1074
- width: 30px;
1075
- }
1076
- .framework-perseus .range-input > span {
1077
- color: #999;
1078
- font-size: 14px;
1079
- }
1080
- .framework-perseus .number-input {
1081
- border: 1px solid #909296;
1082
- border-radius: 5px;
1083
- margin: 0;
1084
- padding: 5px 0;
1085
- text-align: center;
1086
- width: 40px;
1087
- }
1088
- .framework-perseus .number-input.invalid-input {
1089
- background-color: #ffbaba;
1090
- outline-color: red;
1091
- }
1092
- .framework-perseus .number-input.mini {
1093
- width: 40px;
1094
- }
1095
- .framework-perseus .number-input.small {
1096
- width: 60px;
1097
- }
1098
- .framework-perseus .number-input.normal {
1099
- width: 80px;
1100
- }
1101
- .framework-perseus .graph-settings .graph-settings-axis-label {
1102
- border: 1px solid #ccc;
1103
- border-radius: 5px;
1104
- display: inline-block;
1105
- padding: 5px 5px;
1106
- width: 70px;
1107
- float: right;
1108
- margin: 0 5px;
1109
- }
1110
- .framework-perseus .graph-settings .graph-settings-background-url {
1111
- width: 250px;
1112
- }
1113
- .framework-perseus .graphie-container {
1114
- position: relative;
1115
- }
1116
- .framework-perseus .graph-settings,
1117
- .framework-perseus .image-settings,
1118
- .framework-perseus .misc-settings {
1119
- padding-bottom: 5px;
1120
- }
1121
- .framework-perseus .misc-settings,
1122
- .framework-perseus .type-settings {
1123
- border-top: 1px solid black;
1124
- padding-top: 5px;
1125
- }
1126
- .framework-perseus .svg-image {
1127
- display: block;
1128
- margin: 0 auto;
1129
- margin-inline-start: auto;
1130
- margin-inline-end: auto;
1131
- }
1132
- .framework-perseus .unresponsive-svg-image,
1133
- .framework-perseus .perseus-rendered-radio .unresponsive-svg-image {
1134
- display: inline-block;
1135
- position: relative;
1136
- }
1137
- .framework-perseus .unresponsive-svg-image > .graphie-container,
1138
- .framework-perseus .perseus-rendered-radio .unresponsive-svg-image > .graphie-container {
1139
- position: absolute;
1140
- top: 0;
1141
- left: 0;
1142
- }
1143
- .framework-perseus .fixed-to-responsive {
1144
- position: relative;
1145
- width: 100%;
1146
- }
1147
- .framework-perseus .fixed-to-responsive > :not(:first-child) {
1148
- position: absolute;
1149
- top: 0;
1150
- left: 0;
1151
- width: 100%;
1152
- height: 100%;
1153
- }
1154
- /* Legacy table styles. Remove when XOM is rolled out (see below for
1155
- updated XOM styles). */
1156
- .framework-perseus:not(.perseus-mobile) table {
1157
- font-size: 14px;
1158
- line-height: 19.6px;
1159
- }
1160
- .framework-perseus:not(.perseus-mobile) table th,
1161
- .framework-perseus:not(.perseus-mobile) table td {
1162
- padding: 5px 10px;
1163
- text-align: left;
1164
- }
1165
- .framework-perseus:not(.perseus-mobile) table th[align="center"],
1166
- .framework-perseus:not(.perseus-mobile) table td[align="center"] {
1167
- text-align: center;
1168
- }
1169
- .framework-perseus:not(.perseus-mobile) table th[align="right"],
1170
- .framework-perseus:not(.perseus-mobile) table td[align="right"] {
1171
- text-align: right;
1172
- }
1173
- .framework-perseus:not(.perseus-mobile) table th {
1174
- border-bottom: 2px solid #ccc;
1175
- font-weight: bold;
1176
- padding-bottom: 2px;
1177
- }
1178
- .framework-perseus:not(.perseus-mobile) table tr:nth-child(odd) td {
1179
- background-color: #f7f8fa;
1180
- }
1181
- .framework-perseus:not(.perseus-mobile) .perseus-titled-table {
1182
- display: inline-block;
1183
- }
1184
- .framework-perseus:not(.perseus-mobile) .perseus-titled-table table {
1185
- margin-left: auto;
1186
- margin-right: auto;
1187
- }
1188
- .framework-perseus:not(.perseus-mobile) .perseus-table-title {
1189
- text-align: center;
1190
- font-size: larger;
1191
- }
1192
- .framework-perseus:not(.perseus-mobile) table.non-markdown tr:nth-child(odd) td {
1193
- background-color: transparent;
1194
- }
1195
- .framework-perseus:not(.perseus-mobile) table.non-markdown th,
1196
- .framework-perseus:not(.perseus-mobile) table.non-markdown td {
1197
- border-width: 0;
1198
- }
1199
- /* New XOM styles for tables. */
1200
- .framework-perseus.perseus-mobile {
1201
- /* There are three kinds of tables:
1202
- 1) normal "tables" - emitted by markdown (src/perseus-markdown.jsx)
1203
- 2) "titled tables" - emitted by markdown as well (these are just
1204
- tables with a title, and encased in one more element)
1205
- 3) "table widget" - where a user is expected to enter answers in a
1206
- table form (src/widgets/table.jsx).
1207
- Moreover, there the Categorizer widget uses <table> tags, so these
1208
- stylings will apply there as well. */
1209
- }
1210
- .framework-perseus.perseus-mobile table {
1211
- border-collapse: collapse;
1212
- margin: 0 auto;
1213
- }
1214
- .framework-perseus.perseus-mobile table tbody > tr {
1215
- border: 1px solid #e5e5e5;
1216
- }
1217
- .framework-perseus.perseus-mobile table th,
1218
- .framework-perseus.perseus-mobile table td {
1219
- padding: 16px;
1220
- text-align: left;
1221
- }
1222
- .framework-perseus.perseus-mobile table th[align="center"],
1223
- .framework-perseus.perseus-mobile table td[align="center"] {
1224
- text-align: center;
1225
- }
1226
- .framework-perseus.perseus-mobile table th[align="right"],
1227
- .framework-perseus.perseus-mobile table td[align="right"] {
1228
- text-align: right;
1229
- }
1230
- .framework-perseus.perseus-mobile table td {
1231
- background: #fff;
1232
- }
1233
- .framework-perseus.perseus-mobile table th {
1234
- font-weight: bold;
1235
- }
1236
- @media (max-width: 767px) {
1237
- .framework-perseus.perseus-mobile table {
1238
- width: 100%;
1239
- min-width: 480px;
1240
- }
1241
- .framework-perseus.perseus-mobile table tbody > tr {
1242
- border-left: 0;
1243
- border-right: 0;
1244
- }
1245
- }
1246
- .framework-perseus.perseus-mobile .perseus-titled-table {
1247
- display: inline-block;
1248
- }
1249
- .framework-perseus.perseus-mobile .perseus-table-title {
1250
- text-align: center;
1251
- font-size: larger;
1252
- }
1253
- /* Widget CSS */
1254
- .perseus-graph-padding {
1255
- box-sizing: content-box;
1256
- padding: 25px 25px 0 0;
1257
- }
1258
- .perseus-article .perseus-dropdown .perseus-renderer .paragraph,
1259
- .perseus-article .perseus-dropdown .perseus-renderer .perseus-block-math {
1260
- /* overriding overly broad selectors in .framework-perseus rules */
1261
- margin-bottom: 0 !important;
1262
- font-size: 18px !important;
1263
- }
1264
- .categorizer-container {
1265
- margin-top: 20px;
1266
- }
1267
- .categorizer-container div.paragraph {
1268
- margin: 10px 0px;
1269
- }
1270
- .categorizer-container .category {
1271
- text-align: center;
1272
- }
1273
- .categorizer-container table {
1274
- min-width: 0;
1275
- }
1276
- body.mobile .categorizer-container td.category input[type="radio"]:checked + span:before {
1277
- color: #1c758a;
1278
- }
1279
- body.mobile .categorizer-container td.category input[type="radio"] + span:active:before {
1280
- color: #666;
1281
- content: "\f111";
1282
- }
1283
- .perseus-widget-dropdown {
1284
- position: relative;
1285
- }
1286
- .perseus-widget-expression {
1287
- position: relative;
1288
- }
1289
- .perseus-widget-expression > span,
1290
- .perseus-widget-expression .error-tooltip {
1291
- display: inline-block;
1292
- vertical-align: middle;
1293
- }
1294
- .perseus-widget-expression .error-tooltip {
1295
- position: absolute;
1296
- right: 6px;
1297
- top: -2px;
1298
- }
1299
- .perseus-widget-expression .error-icon {
1300
- color: #fcc335;
1301
- cursor: pointer;
1302
- font-size: 20px;
1303
- }
1304
- .perseus-widget-expression .error-text {
1305
- background-color: #fff;
1306
- padding: 5px;
1307
- width: 210px;
1308
- }
1309
- .perseus-widget-expression .perseus-formats-tooltip {
1310
- width: 190px;
1311
- }
1312
- .perseus-widget-grapher {
1313
- box-sizing: content-box;
1314
- padding: 25px 25px 0 0;
1315
- }
1316
- .perseus-widget-grapher > .graphie-container {
1317
- position: relative;
1318
- }
1319
- .perseus-widget-grapher > .graphie-container > img,
1320
- .perseus-widget-grapher > .graphie-container .svg-image {
1321
- position: absolute;
1322
- }
1323
- .framework-perseus .perseus-graded-group {
1324
- position: relative;
1325
- width: 100%;
1326
- margin-left: 3px;
1327
- padding-left: 5px;
1328
- }
1329
- .framework-perseus .perseus-graded-group.answer-correct {
1330
- border-left: 3px solid #76a005;
1331
- margin-left: 0;
1332
- }
1333
- .framework-perseus .perseus-graded-group.answer-incorrect {
1334
- border-left: 3px solid #ff8787;
1335
- margin-left: 0;
1336
- }
1337
- .framework-perseus .perseus-graded-group .group-icon {
1338
- font-size: 14px;
1339
- position: absolute;
1340
- top: 50%;
1341
- top: calc(50% - 7px);
1342
- left: -30px;
1343
- text-align: center;
1344
- width: 16px;
1345
- }
1346
- .framework-perseus .perseus-group {
1347
- position: relative;
1348
- width: 100%;
1349
- }
1350
- .framework-perseus .perseus-group .group-icon {
1351
- font-size: 14px;
1352
- position: absolute;
1353
- top: 50%;
1354
- top: calc(50% - 7px);
1355
- margin-left: -20px;
1356
- }
1357
- .perseus-image-widget .perseus-image-title {
1358
- text-align: center;
1359
- }
1360
- .perseus-image-widget .perseus-image-caption {
1361
- color: rgba(33, 36, 44, 0.7);
1362
- padding-left: 16px;
1363
- position: relative;
1364
- }
1365
- .perseus-image-widget .perseus-image-caption::before {
1366
- content: "";
1367
- position: absolute;
1368
- top: 0;
1369
- bottom: 0;
1370
- left: 0;
1371
- margin-left: 4px;
1372
- width: 1px;
1373
- background-color: rgba(33, 36, 44, 0.5);
1374
- border: 1px solid rgba(33, 36, 44, 0.5);
1375
- border-radius: 2px;
1376
- }
1377
- .perseus-image-widget .perseus-image-caption .paragraph {
1378
- font-size: 14px;
1379
- padding-right: 12px;
1380
- }
1381
- .perseus-image-editor .label-settings td {
1382
- padding: 5px 4px;
1383
- text-align: center;
1384
- }
1385
- .perseus-image-editor .label-settings tr:nth-child(odd) td {
1386
- background-color: transparent;
1387
- }
1388
- .perseus-image-editor .label-settings th,
1389
- .perseus-image-editor .label-settings td {
1390
- border-width: 0;
1391
- }
1392
- .perseus-image-editor .image-settings,
1393
- .perseus-image-editor .graph-settings {
1394
- margin-top: 5px;
1395
- }
1396
- .perseus-image-widget {
1397
- margin-inline-start: auto;
1398
- margin-inline-end: auto;
1399
- }
1400
- .perseus-hint-renderer .perseus-image-widget {
1401
- margin-inline-start: 0;
1402
- }
1403
- .perseus-hint-renderer .svg-image {
1404
- margin-inline-start: 0;
1405
- }
1406
- .perseus-widget-interactive-graph {
1407
- box-sizing: content-box;
1408
- padding: 25px 25px 0 0;
1409
- }
1410
- .perseus-widget-interactive-graph > .graphie-container {
1411
- position: relative;
1412
- }
1413
- .perseus-widget-interactive-graph > .graphie-container > img,
1414
- .perseus-widget-interactive-graph > .graphie-container > .unresponsive-svg-image {
1415
- position: absolute;
1416
- bottom: 0;
1417
- left: 0;
1418
- }
1419
- .perseus-mobile .tooltip.visible {
1420
- z-index: 2;
1421
- }
1422
- .perseus-mobile .tooltip.visible .tooltip-content:before {
1423
- border: solid;
1424
- border-color: white transparent;
1425
- border-width: 10px 10px 0 10px;
1426
- bottom: -10px;
1427
- content: "";
1428
- left: 50%;
1429
- transform: translateX(-50%);
1430
- position: absolute;
1431
- z-index: 2;
1432
- }
1433
- .perseus-mobile .tooltip .tooltip-content {
1434
- display: none;
1435
- }
1436
- .perseus-mobile .tooltip.visible .tooltip-content {
1437
- display: inline-block;
1438
- background-color: #ffffff;
1439
- border-radius: 5px;
1440
- bottom: 50px;
1441
- left: 50%;
1442
- transform: translateX(-50%);
1443
- padding: 5px;
1444
- position: absolute;
1445
- white-space: nowrap;
1446
- min-width: 30px;
1447
- text-align: center;
1448
- }
1449
- .perseus-mobile .tooltip.visible .tooltip-content mjx-container {
1450
- color: #71b307 !important;
1451
- }
1452
- .perseus-mobile .graphie-label mjx-container {
1453
- color: inherit !important;
1454
- }
1455
- .framework-perseus .perseus-label-image-widget-instructions div.paragraph {
1456
- margin: 0;
1457
- }
1458
- @media (max-width: 767px) {
1459
- [id*="perseus-label-image-widget-answer-pill"] > div.perseus-renderer-responsive {
1460
- all: revert;
1461
- }
1462
- .framework-perseus.perseus-mobile [id*="perseus-label-image-widget-answer-pill"] mjx-container {
1463
- all: revert;
1464
- }
1465
- }
1466
- .framework-perseus:not(.perseus-article).perseus-mobile .perseus-label-image-widget-instructions {
1467
- color: initial;
1468
- }
1469
- .framework-perseus:not(.perseus-article).perseus-mobile .perseus-label-image-widget-instructions .perseus-renderer .paragraph > .paragraph {
1470
- color: initial !important;
1471
- font-size: initial !important;
1472
- line-height: initial !important;
1473
- }
1474
- .framework-perseus:not(.perseus-article).perseus-mobile .perseus-label-image-widget-instructions .perseus-block-math {
1475
- padding: 0;
1476
- }
1477
- .framework-perseus:not(.perseus-article).perseus-mobile .perseus-label-image-widget-instructions .perseus-block-math mjx-container {
1478
- font-size: initial !important;
1479
- line-height: initial !important;
1480
- }
1481
- .perseus-label-image-widget-answer-choices .perseus-block-math > .perseus-block-math-inner,
1482
- .perseus-label-image-widget-instructions .perseus-block-math > .perseus-block-math-inner {
1483
- overflow-x: hidden !important;
1484
- }
1485
- .perseus-widget-matcher {
1486
- /* Ideally we'd get rid of this, as most of the styles have been moved
1487
- to inline styles using Aphrodite, but this is a hacky "reach-in" into
1488
- descendent widgets that we can't modify */
1489
- }
1490
- .perseus-widget-matcher div.paragraph {
1491
- margin: 0;
1492
- }
1493
- .perseus-matrix .matrix-prefix,
1494
- .perseus-matrix .matrix-suffix {
1495
- display: inline-block;
1496
- margin: 10px 5px 0 10px;
1497
- vertical-align: top;
1498
- }
1499
- .perseus-matrix .matrix-suffix {
1500
- margin: 10px 10px 0 5px;
1501
- }
1502
- .perseus-matrix div.paragraph {
1503
- margin: 0;
1504
- }
1505
- .perseus-matrix .matrix-input {
1506
- background: #e2e2e2;
1507
- display: inline-block;
1508
- margin: 5px;
1509
- padding: 3px;
1510
- position: relative;
1511
- width: auto;
1512
- }
1513
- .perseus-matrix .matrix-row {
1514
- white-space: nowrap;
1515
- }
1516
- .perseus-matrix .matrix-bracket {
1517
- border-color: #666;
1518
- border-style: solid;
1519
- border-bottom-width: 2px;
1520
- border-top-width: 2px;
1521
- margin-top: -2px;
1522
- position: absolute;
1523
- width: 6px;
1524
- }
1525
- .perseus-matrix .matrix-bracket.bracket-left {
1526
- border-color: #666;
1527
- border-left-width: 2px;
1528
- border-right-width: 0;
1529
- left: 3px;
1530
- }
1531
- .perseus-matrix .matrix-bracket.bracket-right {
1532
- border-color: #666;
1533
- border-left-width: 0;
1534
- border-right-width: 2px;
1535
- margin-left: -3px;
1536
- }
1537
- .perseus-matrix input,
1538
- .perseus-matrix .number-input {
1539
- border: none;
1540
- border-radius: 0;
1541
- box-sizing: border-box;
1542
- margin: 3px;
1543
- padding: 0;
1544
- text-align: center;
1545
- }
1546
- .perseus-matrix input.outside,
1547
- .perseus-matrix .number-input.outside {
1548
- background: #f3f3f3;
1549
- }
1550
- .perseus-matrix input:focus,
1551
- .perseus-matrix .number-input:focus {
1552
- border: none;
1553
- outline: none;
1554
- }
1555
- .static-mode.perseus-matrix input,
1556
- .static-mode.perseus-matrix .number-input {
1557
- background: #f5f5f5;
1558
- }
1559
- .perseus-matrix.the-matrix .matrix-bracket,
1560
- .perseus-matrix.the-matrix .matrix-left,
1561
- .perseus-matrix.the-matrix .matrix-right {
1562
- border-color: #29f139;
1563
- }
1564
- .perseus-matrix.the-matrix .matrix-input {
1565
- background: #222;
1566
- }
1567
- .perseus-matrix.the-matrix input,
1568
- .perseus-matrix.the-matrix .number-input {
1569
- background: #666;
1570
- color: #29f139;
1571
- font-weight: bold;
1572
- }
1573
- .perseus-matrix.the-matrix input.outside,
1574
- .perseus-matrix.the-matrix .number-input.outside {
1575
- background: #444;
1576
- }
1577
- body.mobile .perseus-matrix .matrix-input {
1578
- display: table;
1579
- }
1580
- body.mobile .perseus-matrix .matrix-row {
1581
- display: table-row;
1582
- }
1583
- body.mobile .perseus-matrix .matrix-input-field {
1584
- display: table-cell;
1585
- }
1586
- .perseus-matrix-editor .perseus-single-editor {
1587
- width: 338px;
1588
- }
1589
- .perseus-widget-measurer {
1590
- position: relative;
1591
- }
1592
- .perseus-widget-measurer img {
1593
- position: absolute;
1594
- }
1595
- .perseus-widget-measurer-url {
1596
- width: 70%;
1597
- }
1598
- #translations-dashboard .perseus-widget-measurer > .graphie {
1599
- z-index: -1;
1600
- }
1601
- .input-with-examples-tooltip {
1602
- font-size: 18px;
1603
- line-height: 28px;
1604
- color: #717378;
1605
- background: #fff;
1606
- }
1607
- .input-with-examples-tooltip ul {
1608
- list-style-type: disc;
1609
- margin-left: 30px;
1610
- }
1611
- .input-with-examples-tooltip strong {
1612
- font-weight: 700;
1613
- }
1614
- .input-with-examples-tooltip em {
1615
- font-style: italic;
1616
- }
1617
- .orderer {
1618
- position: relative;
1619
- }
1620
- .orderer.layout-horizontal .draggable-box {
1621
- margin-left: 0;
1622
- margin-top: 30px;
1623
- padding: 13px;
1624
- }
1625
- .orderer .card {
1626
- padding: 0 10px;
1627
- cursor: pointer;
1628
- position: relative;
1629
- -webkit-user-select: none;
1630
- user-select: none;
1631
- width: auto;
1632
- display: flex;
1633
- flex-direction: column;
1634
- justify-content: center;
1635
- }
1636
- .orderer.height-normal.layout-horizontal .card {
1637
- height: 65px;
1638
- }
1639
- .orderer.height-normal.layout-vertical .card {
1640
- padding: 5px;
1641
- }
1642
- .orderer.height-auto .card {
1643
- padding: 0;
1644
- }
1645
- .orderer.height-auto.layout-horizontal .drag-hint {
1646
- min-height: 65px;
1647
- min-width: 22px;
1648
- }
1649
- .orderer.layout-horizontal .bank {
1650
- padding: 0;
1651
- margin: 0px 13px;
1652
- }
1653
- .orderer div.paragraph {
1654
- margin: 0;
1655
- }
1656
- .orderer .card-wrap {
1657
- width: auto;
1658
- }
1659
- .orderer.layout-horizontal .card-wrap {
1660
- float: left;
1661
- }
1662
- .orderer.layout-horizontal .card-wrap:not(:first-child) {
1663
- margin-left: 8px;
1664
- }
1665
- .orderer.layout-vertical .card-wrap {
1666
- float: none;
1667
- text-align: center;
1668
- }
1669
- .orderer.layout-vertical .card-wrap:not(:first-child) {
1670
- margin-top: 8px;
1671
- }
1672
- .orderer.layout-vertical .bank,
1673
- .orderer.layout-vertical .draggable-box {
1674
- box-sizing: border-box;
1675
- float: left;
1676
- max-width: 50%;
1677
- }
1678
- .orderer.layout-vertical .bank {
1679
- padding: 11px 20px 11px 0;
1680
- margin: 0;
1681
- }
1682
- .orderer.layout-vertical .draggable-box {
1683
- margin-top: 0;
1684
- padding: 10px;
1685
- min-height: 170px;
1686
- }
1687
- .orderer.layout-vertical .draggable-box .drag-hint {
1688
- box-sizing: border-box;
1689
- min-width: 140px;
1690
- min-height: 34px;
1691
- }
1692
- .orderer.layout-vertical .draggable-box .placeholder {
1693
- box-sizing: border-box;
1694
- }
1695
- .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .perseus-widget-passage,
1696
- .perseus-widget-passage-container .perseus-widget-passage {
1697
- line-height: 20px;
1698
- margin: 22px;
1699
- position: relative;
1700
- }
1701
- .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .perseus-widget-passage div.paragraph,
1702
- .perseus-widget-passage-container .perseus-widget-passage div.paragraph {
1703
- font-family: KaTeX_Main, Times, "Times New Roman", serif;
1704
- }
1705
- .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .perseus-widget-passage .passage-title div.paragraph,
1706
- .perseus-widget-passage-container .perseus-widget-passage .passage-title div.paragraph {
1707
- font-family: "Noto Serif", serif;
1708
- font-weight: 700;
1709
- font-size: 20px;
1710
- line-height: 22px;
1711
- margin: 0 0 10px;
1712
- }
1713
- .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .perseus-widget-passage > .passage-text div.paragraph,
1714
- .perseus-widget-passage-container .perseus-widget-passage > .passage-text div.paragraph {
1715
- font-weight: 400;
1716
- font-size: 16px;
1717
- line-height: 20px;
1718
- text-indent: 20px;
1719
- margin: 0;
1720
- }
1721
- .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .perseus-widget-passage > .passage-text div.paragraph span,
1722
- .perseus-widget-passage-container .perseus-widget-passage > .passage-text div.paragraph span {
1723
- text-indent: 0;
1724
- }
1725
- .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .perseus-widget-passage > .passage-text div.paragraph em,
1726
- .perseus-widget-passage-container .perseus-widget-passage > .passage-text div.paragraph em {
1727
- line-height: 0;
1728
- }
1729
- .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container mjx-container,
1730
- .perseus-widget-passage-container mjx-container {
1731
- line-height: 18px;
1732
- }
1733
- .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .footnotes,
1734
- .perseus-widget-passage-container .footnotes {
1735
- margin-top: 22px;
1736
- }
1737
- .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .footnotes div.paragraph,
1738
- .perseus-widget-passage-container .footnotes div.paragraph {
1739
- font-size: 14px;
1740
- margin: 0;
1741
- }
1742
- .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .perseus-highlight,
1743
- .perseus-widget-passage-container .perseus-highlight {
1744
- background-color: #fffabe;
1745
- }
1746
- .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .perseus-review-highlight,
1747
- .perseus-widget-passage-container .perseus-review-highlight {
1748
- background-color: #eee7b2;
1749
- }
1750
- .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .perseus-passage-square-label,
1751
- .perseus-widget-passage-container .perseus-passage-square-label,
1752
- .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .perseus-passage-circle-label,
1753
- .perseus-widget-passage-container .perseus-passage-circle-label,
1754
- .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .perseus-passage-bracket-label,
1755
- .perseus-widget-passage-container .perseus-passage-bracket-label {
1756
- font-family: Times, "Times New Roman", serif;
1757
- font-size: 16px;
1758
- }
1759
- .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .line-numbers,
1760
- .perseus-widget-passage-container .line-numbers {
1761
- font-size: 12px;
1762
- font-style: italic;
1763
- font-weight: 600;
1764
- position: absolute;
1765
- text-align: right;
1766
- max-height: 100%;
1767
- overflow: hidden;
1768
- padding-right: 6px;
1769
- left: -52px;
1770
- width: 37px;
1771
- }
1772
- .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .line-numbers span,
1773
- .perseus-widget-passage-container .line-numbers span {
1774
- display: block;
1775
- line-height: 20px;
1776
- position: relative;
1777
- top: 2px;
1778
- visibility: hidden;
1779
- }
1780
- .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .line-numbers span:nth-of-type(5n),
1781
- .perseus-widget-passage-container .line-numbers span:nth-of-type(5n),
1782
- .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .line-numbers .line-marker,
1783
- .perseus-widget-passage-container .line-numbers .line-marker {
1784
- visibility: visible;
1785
- }
1786
- .perseus-widget-passage-editor .perseus-single-editor {
1787
- font-family: Times, "Times New Roman", serif;
1788
- margin-left: -11px;
1789
- }
1790
- .perseus-widget-passage-editor .perseus-textarea-pair textarea {
1791
- font-size: 13px;
1792
- line-height: 17px;
1793
- }
1794
- body.sat-section .perseus-widget-passage {
1795
- margin-top: 0;
1796
- }
1797
- .perseus-widget-plotter svg,
1798
- .perseus-widget-plotter vml {
1799
- position: absolute;
1800
- }
1801
- .perseus-widget-plotter span.rotate {
1802
- transform: rotate(-90deg);
1803
- }
1804
- .set-from-scale-box {
1805
- border: 2px solid #eeeeee;
1806
- border-radius: 3px;
1807
- padding: 3px;
1808
- }
1809
- .categories-title {
1810
- font-size: 14px;
1811
- }
1812
- .perseus-mobile .perseus-widget-plotter {
1813
- border: solid 0.5px #babec2;
1814
- border-radius: 4px;
1815
- }
1816
- .perseus-mobile .perseus-widget-plotter .graphie-label mjx-container {
1817
- color: #626569;
1818
- }
1819
- .perseus-widget-radio.perseus-rendered-radio div,
1820
- .perseus-widget-radio.perseus-rendered-radio div > p {
1821
- /* TODO(alpert): Find a better way of doing inline renderers */
1822
- display: inline;
1823
- }
1824
- .perseus-widget-radio.perseus-rendered-radio .perseus-radio-rationale-content > .perseus-renderer > .paragraph {
1825
- display: table;
1826
- margin: 0;
1827
- }
1828
- .perseus-widget-radio.perseus-rendered-radio .perseus-radio-rationale-content > .perseus-renderer > .paragraph:not(:last-child) {
1829
- margin-bottom: 8px;
1830
- }
1831
- .perseus-widget-radio .unresponsive-svg-image div,
1832
- .perseus-widget-radio .svg-image div {
1833
- display: block;
1834
- }
1835
- .perseus-widget-radio li div.instructions {
1836
- margin-bottom: 5px;
1837
- }
1838
- .perseus-widget-radio li .value {
1839
- display: block;
1840
- margin-left: 18px;
1841
- min-height: 22px;
1842
- }
1843
- .perseus-widget-radio li img,
1844
- .perseus-widget-radio li table {
1845
- display: inline-block;
1846
- vertical-align: middle;
1847
- }
1848
- .perseus-widget-radio li table {
1849
- border: 1px solid #ccc;
1850
- }
1851
- .perseus-widget-radio .perseus-radio-option {
1852
- /* Radio options with images that are set apart should be on their own line */
1853
- }
1854
- .perseus-widget-radio .perseus-radio-option .paragraph + .paragraph:has(img:only-child),
1855
- .perseus-widget-radio .perseus-radio-option .paragraph:has(img:only-child):has(+ .paragraph) {
1856
- display: block;
1857
- }
1858
- .perseus-widget-radio-fieldset .instructions {
1859
- font-family: "Lato", sans-serif;
1860
- }
1861
- .draggy-boxy-thing .draggable-box,
1862
- .draggy-boxy-thing .cards-area {
1863
- background: #eee;
1864
- border: 1px solid #ccc;
1865
- border-bottom: 1px solid #aaa;
1866
- box-shadow: 0 1px 2px #ccc;
1867
- }
1868
- .draggy-boxy-thing .card {
1869
- background-color: #fff;
1870
- border: 1px solid #b9b9b9;
1871
- border-bottom-color: #939393;
1872
- border-radius: 4px;
1873
- cursor: pointer;
1874
- touch-action: none;
1875
- }
1876
- .draggy-boxy-thing .card.placeholder {
1877
- background: #ddd;
1878
- border: 1px solid #ccc;
1879
- }
1880
- .draggy-boxy-thing .card.drag-hint {
1881
- background: none;
1882
- border: 1px dashed #aaa;
1883
- cursor: auto;
1884
- }
1885
- .draggy-boxy-thing .card.drag-hint:hover {
1886
- border-color: #aaa;
1887
- box-shadow: none;
1888
- }
1889
- .draggy-boxy-thing .card.dragging {
1890
- background-color: #ffedcd;
1891
- opacity: 0.8;
1892
- filter: opacity(0.8);
1893
- }
1894
- .draggy-boxy-thing .card.stack {
1895
- z-index: auto;
1896
- }
1897
- .draggy-boxy-thing .card.stack:after {
1898
- content: " ";
1899
- background-color: #fff;
1900
- border: 1px solid #b9b9b9;
1901
- border-bottom-color: #939393;
1902
- border-radius: 4px;
1903
- height: 100%;
1904
- width: 100%;
1905
- z-index: -1;
1906
- top: 1px;
1907
- left: 1px;
1908
- position: absolute;
1909
- }
1910
- .draggy-boxy-thing .card:hover {
1911
- border-color: #ffa500;
1912
- box-shadow: 0 0 4px #c78100;
1913
- }
1914
- .perseus-sortable div.paragraph {
1915
- margin: 0;
1916
- }
1917
- .perseus-sortable .perseus-sortable-draggable:before {
1918
- content: "";
1919
- display: inline-block;
1920
- height: 100%;
1921
- vertical-align: middle;
1922
- }
1923
- .perseus-sortable .perseus-sortable-draggable > div {
1924
- display: inline-block;
1925
- font-size: 14px;
1926
- max-width: 100%;
1927
- vertical-align: middle;
1928
- }
1929
- .perseus-sortable .perseus-sortable-draggable-unpadded img {
1930
- vertical-align: bottom;
1931
- }
1932
- .framework-perseus table.perseus-widget-table-of-values.non-markdown {
1933
- text-align: left;
1934
- margin: 20px auto;
1935
- border-collapse: collapse;
1936
- }
1937
- .framework-perseus table.perseus-widget-table-of-values.non-markdown tr {
1938
- height: 23px;
1939
- }
1940
- .framework-perseus table.perseus-widget-table-of-values.non-markdown th,
1941
- .framework-perseus table.perseus-widget-table-of-values.non-markdown td {
1942
- border: 2px solid black;
1943
- border-width: 0 2px;
1944
- }
1945
- .framework-perseus table.perseus-widget-table-of-values.non-markdown th:first-child,
1946
- .framework-perseus table.perseus-widget-table-of-values.non-markdown td:first-child {
1947
- border-left: 0;
1948
- }
1949
- .framework-perseus table.perseus-widget-table-of-values.non-markdown th:last-child,
1950
- .framework-perseus table.perseus-widget-table-of-values.non-markdown td:last-child {
1951
- border-right: 0;
1952
- }
1953
- .framework-perseus table.perseus-widget-table-of-values.non-markdown th {
1954
- font-weight: normal;
1955
- padding: 5px;
1956
- width: 80px;
1957
- text-align: left;
1958
- border-bottom: 2px solid black;
1959
- }
1960
- .framework-perseus table.perseus-widget-table-of-values.non-markdown th .paragraph {
1961
- margin: 0;
1962
- }
1963
- .framework-perseus table.perseus-widget-table-of-values.non-markdown td {
1964
- padding: 0px 5px;
1965
- }
1966
- .framework-perseus table.perseus-widget-table-of-values.non-markdown tbody tr:first-child td {
1967
- padding-top: 5px;
1968
- }
1969
- .framework-perseus table.perseus-widget-table-of-values input {
1970
- width: 80px;
1971
- }
1972
- body.mobile .framework-perseus table.perseus-widget-table-of-values.non-markdown td {
1973
- padding: 5px;
1974
- }
1975
- .perseus-widget-container.widget-nohighlight {
1976
- transition: all 0.15s;
1977
- }
1978
- .perseus-widget-container.widget-highlight {
1979
- box-shadow: 0px 0px 0px 2px #ffa500;
1980
- transition: all 0.15s;
1981
- }
1982
- .perseus-widget-container.widget-inline {
1983
- display: inline;
1984
- }
1985
- .perseus-widget-container.widget-inline-block {
1986
- display: inline-block;
1987
- vertical-align: bottom;
1988
- }
1989
- .bibliotron-exercise .perseus-hint-renderer {
1990
- border-left: 4px solid #f6f7f7;
1991
- padding-left: 16px;
1992
- position: relative;
1993
- }
1994
- .bibliotron-exercise .perseus-hint-renderer:focus {
1995
- border-left-color: #d6d8da;
1996
- outline: none;
1997
- }
1998
- .bibliotron-exercise .perseus-hint-renderer:before,
1999
- .bibliotron-exercise .perseus-hint-renderer:after {
2000
- content: "";
2001
- display: table;
2002
- clear: both;
2003
- }
2004
- .bibliotron-exercise .perseus-hint-renderer div.paragraph {
2005
- margin-top: 0px;
2006
- margin-bottom: 16px;
2007
- }
2008
- .bibliotron-exercise .perseus-hint-renderer.last-hint {
2009
- margin-bottom: 32px;
2010
- }
2011
- @media (max-width: 767px) {
2012
- .bibliotron-exercise .perseus-hint-renderer.last-hint {
2013
- margin-bottom: 0;
2014
- }
2015
- }
2016
- .perseus-hint-label {
2017
- color: #00457c;
2018
- display: none;
2019
- font-weight: 600;
2020
- margin-right: 13px;
2021
- position: absolute;
2022
- right: 100%;
2023
- white-space: nowrap;
2024
- }
2025
- .perseus-domain-science .perseus-hint-label {
2026
- color: #9e034e;
2027
- }
2028
- .perseus-domain-math .perseus-hint-label {
2029
- color: #007d96;
2030
- }
2031
- .perseus-domain-economics .perseus-hint-label {
2032
- color: #a75a05;
2033
- }
2034
- .perseus-domain-partner .perseus-hint-label {
2035
- color: #208170;
2036
- }
2037
- .perseus-domain-humanities .perseus-hint-label {
2038
- color: #be2612;
2039
- }
2040
- .perseus-domain-test-prep .perseus-hint-label {
2041
- color: #543b78;
2042
- }
2043
- .perseus-domain-cs .perseus-hint-label {
2044
- color: #0d923f;
2045
- }
2046
- .bibliotron-exercise .perseus-hint-renderer.last-rendered .perseus-hint-label {
2047
- display: block;
2048
- }
2049
- @media (max-width: 767px) {
2050
- .bibliotron-exercise .perseus-hint-renderer.last-rendered .perseus-hint-label {
2051
- display: none;
2052
- }
2053
- }
2054
- /*
2055
- Extra specificity needed to override other styles that are too broad.
2056
- Once we get a better framework in place (like CSS Modules), we can fix this selector.
2057
- */
2058
- .framework-perseus .perseus-formats-tooltip .paragraph,
2059
- .framework-perseus .tooltipContainer .perseus-formats-tooltip .paragraph ul {
2060
- margin: 0;
2061
- }
2062
- .perseus-math-input.mq-editable-field.mq-math-mode {
2063
- background-color: transparent;
2064
- font-size: 18px;
2065
- min-width: 100px;
2066
- border: unset;
2067
- }
2068
- .perseus-math-input.mq-editable-field.mq-math-mode.mq-focused {
2069
- box-shadow: unset;
2070
- }
2071
- .perseus-math-input.mq-editable-field.mq-math-mode > .mq-root-block {
2072
- padding: 4px;
2073
- }
2074
- .perseus-math-input.mq-editable-field.mq-math-mode .mq-cursor {
2075
- padding-left: 0;
2076
- }
2077
- .perseus-math-input.mq-editable-field.mq-math-mode .mq-paren.mq-ghost {
2078
- color: inherit;
2079
- }
2080
- .perseus-math-input.mq-editable-field.mq-math-mode .mq-paren + span {
2081
- margin: 0;
2082
- }
2083
- .perseus-math-input.mq-editable-field.mq-math-mode .mq-binary-operator {
2084
- font-family: KaTeX_Main !important;
2085
- }
2086
- .perseus-math-input.mq-editable-field.mq-math-mode sup {
2087
- line-height: normal;
2088
- }
2089
- .perseus-widget-editor .perseus-math-input.mq-editable-field.mq-math-mode > .mq-root-block {
2090
- border-radius: 0;
2091
- }
2092
- .math-input-buttons {
2093
- background-color: rgba(255, 255, 255, 0.7);
2094
- border-radius: 5px;
2095
- border: 1px solid #ddd;
2096
- box-sizing: border-box;
2097
- margin-top: 5px;
2098
- padding: 2px;
2099
- width: 201px;
2100
- }
2101
- .math-input-buttons.absolute {
2102
- left: -2px;
2103
- position: absolute;
2104
- top: -3px;
2105
- z-index: 5;
2106
- }
2107
- .tex-button {
2108
- display: block;
2109
- float: left;
2110
- width: 35px;
2111
- height: 35px;
2112
- margin: 2px;
2113
- border: 1px solid #1c758a;
2114
- background-color: white;
2115
- border-radius: 5px;
2116
- }
2117
- .tex-button:hover {
2118
- cursor: pointer;
2119
- background-color: #f0f0f0;
2120
- }
2121
- .tex-button:focus {
2122
- border: 2px solid #1c758a;
2123
- outline: none;
2124
- }
2125
- .tex-button-row {
2126
- margin: 5px 0;
2127
- }
2128
- .tex-button-row:first-child {
2129
- margin-top: 0;
2130
- }
2131
- .tex-button-row:last-child {
2132
- margin-bottom: 0;
2133
- }
2134
- .renderer-widget-error {
2135
- background-color: #fcc;
2136
- }
2137
- .perseus-error {
2138
- background: #ffbaba;
2139
- border: 2px solid red;
2140
- border-radius: 5px;
2141
- padding: 20px;
2142
- margin: 15px 0 10px;
2143
- }
2144
- @media (max-width: 767px) {
2145
- .perseus-renderer-responsive {
2146
- margin: 0 16px;
2147
- }
2148
- .perseus-renderer-responsive .perseus-renderer-responsive {
2149
- margin: 0;
2150
- }
2151
- }
2152
- @media (max-width: 767px) {
2153
- .perseus-mobile .perseus-block-math {
2154
- font-size: 18px;
2155
- }
2156
- }
2157
- .perseus-widget-editor-content .perseus-editor-accordion h2 {
2158
- padding-top: 0;
2159
- }
2160
- .keypad-input {
2161
- outline: none !important;
2162
- }
2163
- .keypad-input .mq-editable-field .mq-root-block {
2164
- overflow-x: auto;
2165
- }
2166
- .keypad-input .mq-editable-field .mq-cursor:not(:only-child),
2167
- .keypad-input .mq-editable-field .mq-root-block.mq-hasCursor > .mq-cursor:only-child {
2168
- /* HACK(charlie): Magic numbers to properly size and position the vertical
2169
- cursor, which is visible whenever the cursor is not alone in its parent,
2170
- with the exception that it's also visible when the entire input is
2171
- empty. */
2172
- height: 20px !important;
2173
- width: 2px;
2174
- margin-top: -5px !important;
2175
- vertical-align: middle !important;
2176
- border-radius: 1px !important;
2177
- }
2178
- .keypad-input .mq-editable-field .mq-cursor {
2179
- border-left: 2px solid #1865f2 !important;
2180
- margin-left: -1px !important;
2181
- margin-right: -1px !important;
2182
- opacity: 1 !important;
2183
- transition: opacity 300ms ease !important;
2184
- visibility: visible !important;
2185
- }
2186
- .keypad-input .mq-editable-field .mq-cursor.mq-blink {
2187
- opacity: 0 !important;
2188
- visibility: visible !important;
2189
- }
2190
- .keypad-input .mq-editable-field .mq-non-leaf .mq-cursor:only-child {
2191
- border: 2px solid !important;
2192
- border-color: #1865f2 !important;
2193
- border-radius: 1px;
2194
- opacity: 1 !important;
2195
- padding: 0 4px 0 4px;
2196
- transition: border-color 300ms ease !important;
2197
- }
2198
- .keypad-input .mq-editable-field .mq-non-leaf .mq-cursor:only-child.mq-blink {
2199
- border-color: #1865f2 !important;
2200
- opacity: 1 !important;
2201
- }
2202
- .keypad-input .mq-empty {
2203
- background: transparent !important;
2204
- }
2205
- .keypad-input .mq-empty:not(.mq-root-block):after,
2206
- .keypad-input .mq-hasCursor:empty:not(.mq-root-block):after {
2207
- border: 2px solid rgba(33, 36, 44, 0.16);
2208
- border-radius: 1px;
2209
- color: transparent;
2210
- display: inline-block;
2211
- margin-left: -1px;
2212
- margin-right: -1px;
2213
- padding: 0 4px 0 4px;
2214
- visibility: visible !important;
2215
- }
2216
- .keypad-input .mq-selection .mq-empty:not(.mq-root-block):after {
2217
- border-color: white;
2218
- }
2219
- .keypad-input .mq-hasCursor:empty:not(.mq-root-block):after {
2220
- content: "c";
2221
- }
2222
- .keypad-input .mq-math-mode .mq-selection .mq-non-leaf,
2223
- .keypad-input .mq-editable-field .mq-selection .mq-non-leaf {
2224
- background: #1865f2 !important;
2225
- border-color: white !important;
2226
- color: white !important;
2227
- }
2228
- .keypad-input .mq-math-mode .mq-selection .mq-scaled,
2229
- .keypad-input .mq-editable-field .mq-selection .mq-scaled {
2230
- background: transparent !important;
2231
- border-color: transparent !important;
2232
- color: white !important;
2233
- }
2234
- .keypad-input .mq-selection {
2235
- background: #1865f2 !important;
2236
- border-color: white !important;
2237
- color: white !important;
2238
- display: inline-block !important;
2239
- }
2240
- /**
2241
- * @license
2242
- * MathQuill v0.10.1, by Han, Jeanine, and Mary
2243
- * http://mathquill.com | maintainers@mathquill.com
2244
- *
2245
- * This Source Code Form is subject to the terms of the
2246
- * Mozilla Public License, v. 2.0. If a copy of the MPL
2247
- * was not distributed with this file, You can obtain
2248
- * one at http://mozilla.org/MPL/2.0/.
2249
- */
2250
-
2251
- .mq-aria-alert {
2252
- position: absolute;
2253
- left: -1000px;
2254
- top: -1000px;
2255
- width: 0px;
2256
- height: 0px;
2257
- text-align: left;
2258
- overflow: hidden;
2259
- }
2260
- .mq-mathspeak {
2261
- position: absolute;
2262
- left: -1000px;
2263
- top: -1000px;
2264
- width: 0px;
2265
- height: 0px;
2266
- text-align: left;
2267
- overflow: hidden;
2268
- }
2269
- @font-face {
2270
- font-family: Symbola;
2271
- src: url(/fonts/Symbola.eot);
2272
- src: local('Symbola Regular'), local('Symbola'), url(/fonts/Symbola.woff2) format('woff2'), url(/fonts/Symbola.woff) format('woff'), url(/fonts/Symbola.ttf) format('truetype'), url(/fonts/Symbola.otf) format('opentype'), url(/fonts/Symbola.svg#Symbola) format('svg');
2273
- }
2274
- .mq-editable-field {
2275
- display: -moz-inline-box;
2276
- display: inline-block;
2277
- }
2278
- .mq-editable-field .mq-cursor {
2279
- border-left: 1px solid currentColor;
2280
- margin-left: -1px;
2281
- position: relative;
2282
- z-index: 1;
2283
- padding: 0;
2284
- display: -moz-inline-box;
2285
- display: inline-block;
2286
- }
2287
- .mq-editable-field .mq-cursor.mq-blink {
2288
- visibility: hidden;
2289
- }
2290
- .mq-editable-field,
2291
- .mq-math-mode .mq-editable-field {
2292
- border: 1px solid gray;
2293
- }
2294
- .mq-editable-field.mq-focused,
2295
- .mq-math-mode .mq-editable-field.mq-focused {
2296
- -webkit-box-shadow: #8bd 0 0 1px 2px, inset #6ae 0 0 2px 0;
2297
- -moz-box-shadow: #8bd 0 0 1px 2px, inset #6ae 0 0 2px 0;
2298
- box-shadow: #8bd 0 0 1px 2px, inset #6ae 0 0 2px 0;
2299
- border-color: #709ac0;
2300
- }
2301
- .mq-math-mode .mq-editable-field {
2302
- margin: 1px;
2303
- }
2304
- .mq-editable-field .mq-latex-command-input {
2305
- color: inherit;
2306
- font-family: 'Courier New', monospace;
2307
- border: 1px solid gray;
2308
- padding-right: 1px;
2309
- margin-right: 1px;
2310
- margin-left: 2px;
2311
- }
2312
- .mq-editable-field .mq-latex-command-input.mq-empty {
2313
- background: transparent;
2314
- }
2315
- .mq-editable-field .mq-latex-command-input.mq-hasCursor {
2316
- border-color: ActiveBorder;
2317
- }
2318
- .mq-editable-field.mq-empty:after,
2319
- .mq-editable-field.mq-text-mode:after,
2320
- .mq-math-mode .mq-empty:after {
2321
- visibility: hidden;
2322
- content: 'c';
2323
- }
2324
- .mq-editable-field .mq-cursor:only-child:after,
2325
- .mq-editable-field .mq-textarea + .mq-cursor:last-child:after {
2326
- visibility: hidden;
2327
- content: 'c';
2328
- }
2329
- .mq-editable-field .mq-text-mode .mq-cursor:only-child:after {
2330
- content: '';
2331
- }
2332
- .mq-editable-field.mq-text-mode {
2333
- overflow-x: auto;
2334
- overflow-y: hidden;
2335
- }
2336
- .mq-root-block,
2337
- .mq-math-mode .mq-root-block {
2338
- display: -moz-inline-box;
2339
- display: inline-block;
2340
- width: 100%;
2341
- padding: 2px;
2342
- -webkit-box-sizing: border-box;
2343
- -moz-box-sizing: border-box;
2344
- box-sizing: border-box;
2345
- white-space: nowrap;
2346
- overflow: hidden;
2347
- vertical-align: middle;
2348
- }
2349
- .mq-root-block .mq-digit,
2350
- .mq-math-mode .mq-root-block .mq-digit {
2351
- margin-left: 0.009em;
2352
- margin-right: 0.009em;
2353
- }
2354
- .mq-root-block .mq-group-start,
2355
- .mq-math-mode .mq-root-block .mq-group-start {
2356
- margin-left: 0.11em;
2357
- margin-right: -0.01em;
2358
- }
2359
- .mq-root-block .mq-group-other,
2360
- .mq-math-mode .mq-root-block .mq-group-other {
2361
- margin-left: -0.01em;
2362
- margin-right: -0.01em;
2363
- }
2364
- .mq-root-block .mq-group-leading-1,
2365
- .mq-math-mode .mq-root-block .mq-group-leading-1,
2366
- .mq-root-block .mq-group-leading-2,
2367
- .mq-math-mode .mq-root-block .mq-group-leading-2 {
2368
- margin-left: 0;
2369
- margin-right: -0.01em;
2370
- }
2371
- .mq-root-block .mq-group-leading-3,
2372
- .mq-math-mode .mq-root-block .mq-group-leading-3 {
2373
- margin-left: 0.036em;
2374
- margin-right: -0.01em;
2375
- }
2376
- .mq-root-block.mq-suppress-grouping .mq-group-start,
2377
- .mq-math-mode .mq-root-block.mq-suppress-grouping .mq-group-start,
2378
- .mq-root-block.mq-suppress-grouping .mq-group-other,
2379
- .mq-math-mode .mq-root-block.mq-suppress-grouping .mq-group-other,
2380
- .mq-root-block.mq-suppress-grouping .mq-group-leading-1,
2381
- .mq-math-mode .mq-root-block.mq-suppress-grouping .mq-group-leading-1,
2382
- .mq-root-block.mq-suppress-grouping .mq-group-leading-2,
2383
- .mq-math-mode .mq-root-block.mq-suppress-grouping .mq-group-leading-2,
2384
- .mq-root-block.mq-suppress-grouping .mq-group-leading-3,
2385
- .mq-math-mode .mq-root-block.mq-suppress-grouping .mq-group-leading-3 {
2386
- margin-left: 0.009em;
2387
- margin-right: 0.009em;
2388
- }
2389
- .mq-math-mode {
2390
- font-variant: normal;
2391
- font-weight: normal;
2392
- font-style: normal;
2393
- font-size: 115%;
2394
- line-height: 1;
2395
- display: -moz-inline-box;
2396
- display: inline-block;
2397
- }
2398
- .mq-math-mode .mq-non-leaf,
2399
- .mq-math-mode .mq-scaled {
2400
- display: -moz-inline-box;
2401
- display: inline-block;
2402
- }
2403
- .mq-math-mode var,
2404
- .mq-math-mode .mq-text-mode,
2405
- .mq-math-mode .mq-nonSymbola {
2406
- font-family: 'Times New Roman', Symbola, serif;
2407
- line-height: 0.9;
2408
- }
2409
- .mq-math-mode svg {
2410
- fill: currentColor;
2411
- position: absolute;
2412
- top: 0;
2413
- left: 0;
2414
- width: 100%;
2415
- height: 100%;
2416
- }
2417
- .mq-math-mode * {
2418
- font-size: inherit;
2419
- line-height: inherit;
2420
- margin: 0;
2421
- padding: 0;
2422
- border-color: black;
2423
- -webkit-user-select: none;
2424
- -moz-user-select: none;
2425
- user-select: none;
2426
- box-sizing: border-box;
2427
- }
2428
- .mq-math-mode .mq-empty {
2429
- background: rgba(0, 0, 0, 0.2);
2430
- }
2431
- .mq-math-mode .mq-empty.mq-root-block {
2432
- background: transparent;
2433
- }
2434
- .mq-math-mode .mq-empty.mq-quiet-delimiter {
2435
- background: transparent;
2436
- }
2437
- .mq-math-mode.mq-empty {
2438
- background: transparent;
2439
- }
2440
- .mq-math-mode .mq-text-mode {
2441
- display: inline-block;
2442
- white-space: pre;
2443
- }
2444
- .mq-math-mode .mq-text-mode.mq-hasCursor {
2445
- box-shadow: inset darkgray 0 0.1em 0.2em;
2446
- padding: 0 0.1em;
2447
- margin: 0 -0.1em;
2448
- min-width: 1ex;
2449
- }
2450
- .mq-math-mode .mq-font {
2451
- font: 1em 'Times New Roman', Symbola, serif;
2452
- }
2453
- .mq-math-mode .mq-font * {
2454
- font-family: inherit;
2455
- font-style: inherit;
2456
- }
2457
- .mq-math-mode b,
2458
- .mq-math-mode b.mq-font {
2459
- font-weight: bolder;
2460
- }
2461
- .mq-math-mode var,
2462
- .mq-math-mode i,
2463
- .mq-math-mode i.mq-font {
2464
- font-style: italic;
2465
- }
2466
- .mq-math-mode var.mq-f {
2467
- margin-right: 0.2em;
2468
- margin-left: 0.1em;
2469
- }
2470
- .mq-math-mode .mq-roman var.mq-f {
2471
- margin: 0;
2472
- }
2473
- .mq-math-mode big {
2474
- font-size: 200%;
2475
- }
2476
- .mq-math-mode .mq-int > big {
2477
- display: inline-block;
2478
- -webkit-transform: scaleX(0.7);
2479
- -moz-transform: scaleX(0.7);
2480
- -ms-transform: scaleX(0.7);
2481
- -o-transform: scaleX(0.7);
2482
- transform: scaleX(0.7);
2483
- vertical-align: -0.16em;
2484
- }
2485
- .mq-math-mode .mq-int > .mq-supsub {
2486
- font-size: 80%;
2487
- vertical-align: -1.1em;
2488
- padding-right: 0.2em;
2489
- }
2490
- .mq-math-mode .mq-int > .mq-supsub > .mq-sup > .mq-sup-inner {
2491
- vertical-align: 1.3em;
2492
- }
2493
- .mq-math-mode .mq-int > .mq-supsub > .mq-sub {
2494
- margin-left: -0.35em;
2495
- }
2496
- .mq-math-mode .mq-roman {
2497
- font-style: normal;
2498
- }
2499
- .mq-math-mode .mq-sans-serif {
2500
- font-family: sans-serif, Symbola, serif;
2501
- }
2502
- .mq-math-mode .mq-monospace {
2503
- font-family: monospace, Symbola, serif;
2504
- }
2505
- .mq-math-mode .mq-overline {
2506
- border-top: 1px solid;
2507
- margin-top: 1px;
2508
- }
2509
- .mq-math-mode .mq-underline {
2510
- border-bottom: 1px solid;
2511
- margin-bottom: 1px;
2512
- }
2513
- .mq-math-mode .mq-binary-operator {
2514
- padding: 0 0.2em;
2515
- display: -moz-inline-box;
2516
- display: inline-block;
2517
- }
2518
- .mq-math-mode .mq-supsub {
2519
- text-align: left;
2520
- font-size: 90%;
2521
- vertical-align: -0.5em;
2522
- }
2523
- .mq-math-mode .mq-supsub.mq-sup-only {
2524
- vertical-align: 0.5em;
2525
- }
2526
- .mq-math-mode .mq-supsub.mq-sup-only > .mq-sup {
2527
- display: inline-block;
2528
- vertical-align: text-bottom;
2529
- }
2530
- .mq-math-mode .mq-supsub .mq-sup {
2531
- display: block;
2532
- }
2533
- .mq-math-mode .mq-supsub .mq-sub {
2534
- display: block;
2535
- float: left;
2536
- }
2537
- .mq-math-mode .mq-supsub .mq-binary-operator {
2538
- padding: 0 0.1em;
2539
- }
2540
- .mq-math-mode .mq-supsub .mq-fraction {
2541
- font-size: 70%;
2542
- }
2543
- .mq-math-mode sup.mq-nthroot {
2544
- font-size: 80%;
2545
- vertical-align: 0.8em;
2546
- margin-right: -0.6em;
2547
- margin-left: 0.2em;
2548
- min-width: 0.5em;
2549
- }
2550
- .mq-math-mode .mq-ghost svg {
2551
- opacity: 0.2;
2552
- }
2553
- .mq-math-mode .mq-bracket-middle {
2554
- margin-top: 0.1em;
2555
- margin-bottom: 0.1em;
2556
- }
2557
- .mq-math-mode .mq-bracket-l,
2558
- .mq-math-mode .mq-bracket-r {
2559
- position: absolute;
2560
- top: 0;
2561
- bottom: 2px;
2562
- }
2563
- .mq-math-mode .mq-bracket-l {
2564
- left: 0;
2565
- }
2566
- .mq-math-mode .mq-bracket-r {
2567
- right: 0;
2568
- }
2569
- .mq-math-mode .mq-bracket-container {
2570
- position: relative;
2571
- }
2572
- .mq-math-mode .mq-array {
2573
- vertical-align: middle;
2574
- text-align: center;
2575
- }
2576
- .mq-math-mode .mq-array > span {
2577
- display: block;
2578
- }
2579
- .mq-math-mode .mq-operator-name {
2580
- font-family: Symbola, 'Times New Roman', serif;
2581
- line-height: 0.9;
2582
- font-style: normal;
2583
- }
2584
- .mq-math-mode var.mq-operator-name.mq-first {
2585
- padding-left: 0.2em;
2586
- }
2587
- .mq-math-mode var.mq-operator-name.mq-last,
2588
- .mq-math-mode .mq-supsub.mq-after-operator-name {
2589
- padding-right: 0.2em;
2590
- }
2591
- .mq-math-mode .mq-fraction {
2592
- font-size: 90%;
2593
- text-align: center;
2594
- vertical-align: -0.4em;
2595
- padding: 0 0.2em;
2596
- }
2597
- .mq-math-mode .mq-fraction,
2598
- .mq-math-mode .mq-large-operator,
2599
- .mq-math-mode x:-moz-any-link {
2600
- display: -moz-groupbox;
2601
- }
2602
- .mq-math-mode .mq-fraction,
2603
- .mq-math-mode .mq-large-operator,
2604
- .mq-math-mode x:-moz-any-link,
2605
- .mq-math-mode x:default {
2606
- display: inline-block;
2607
- }
2608
- .mq-math-mode .mq-numerator,
2609
- .mq-math-mode .mq-denominator,
2610
- .mq-math-mode .mq-dot-recurring {
2611
- display: block;
2612
- }
2613
- .mq-math-mode .mq-numerator {
2614
- padding: 0 0.1em;
2615
- }
2616
- .mq-math-mode .mq-denominator {
2617
- border-top: 1px solid;
2618
- float: right;
2619
- width: 100%;
2620
- padding: 0.1em;
2621
- }
2622
- .mq-math-mode .mq-dot-recurring {
2623
- text-align: center;
2624
- height: 0.3em;
2625
- }
2626
- .mq-math-mode .mq-sqrt-prefix {
2627
- position: absolute;
2628
- top: 1px;
2629
- bottom: 0.15em;
2630
- width: 0.95em;
2631
- }
2632
- .mq-math-mode .mq-sqrt-container {
2633
- position: relative;
2634
- }
2635
- .mq-math-mode .mq-sqrt-stem {
2636
- border-top: 1px solid;
2637
- margin-top: 1px;
2638
- margin-left: 0.9em;
2639
- padding-left: 0.15em;
2640
- padding-right: 0.2em;
2641
- margin-right: 0.1em;
2642
- padding-top: 1px;
2643
- }
2644
- .mq-math-mode .mq-diacritic-above {
2645
- display: block;
2646
- text-align: center;
2647
- line-height: 0.4em;
2648
- }
2649
- .mq-math-mode .mq-diacritic-stem {
2650
- display: block;
2651
- text-align: center;
2652
- }
2653
- .mq-math-mode .mq-hat-prefix {
2654
- display: block;
2655
- text-align: center;
2656
- line-height: 0.95em;
2657
- margin-bottom: -0.7em;
2658
- transform: scaleX(1.5);
2659
- -moz-transform: scaleX(1.5);
2660
- -o-transform: scaleX(1.5);
2661
- -webkit-transform: scaleX(1.5);
2662
- }
2663
- .mq-math-mode .mq-hat-stem {
2664
- display: block;
2665
- }
2666
- .mq-math-mode .mq-large-operator {
2667
- vertical-align: -0.2em;
2668
- padding: 0.2em;
2669
- text-align: center;
2670
- }
2671
- .mq-math-mode .mq-large-operator .mq-from,
2672
- .mq-math-mode .mq-large-operator big,
2673
- .mq-math-mode .mq-large-operator .mq-to {
2674
- display: block;
2675
- }
2676
- .mq-math-mode .mq-large-operator .mq-from,
2677
- .mq-math-mode .mq-large-operator .mq-to {
2678
- font-size: 80%;
2679
- }
2680
- .mq-math-mode .mq-large-operator .mq-from {
2681
- float: right;
2682
- /* take out of normal flow to manipulate baseline */
2683
- width: 100%;
2684
- }
2685
- .mq-math-mode,
2686
- .mq-math-mode .mq-editable-field {
2687
- cursor: text;
2688
- font-family: Symbola, 'Times New Roman', serif;
2689
- }
2690
- .mq-math-mode .mq-overarc {
2691
- border-top: 1px solid black;
2692
- -webkit-border-top-right-radius: 50% 0.3em;
2693
- -moz-border-radius-topright: 50% 0.3em;
2694
- border-top-right-radius: 50% 0.3em;
2695
- -webkit-border-top-left-radius: 50% 0.3em;
2696
- -moz-border-radius-topleft: 50% 0.3em;
2697
- border-top-left-radius: 50% 0.3em;
2698
- margin-top: 1px;
2699
- padding-top: 0.15em;
2700
- }
2701
- .mq-math-mode .mq-overarrow {
2702
- min-width: 0.5em;
2703
- border-top: 1px solid black;
2704
- margin-top: 1px;
2705
- padding-top: 0.2em;
2706
- text-align: center;
2707
- position: relative;
2708
- }
2709
- .mq-math-mode .mq-overarrow:after {
2710
- position: absolute;
2711
- right: -0.1em;
2712
- top: -0.48em;
2713
- font-size: 0.5em;
2714
- content: '\27A4';
2715
- }
2716
- .mq-math-mode .mq-overarrow.mq-arrow-left:after {
2717
- content: '';
2718
- display: none;
2719
- }
2720
- .mq-math-mode .mq-overarrow.mq-arrow-left:before,
2721
- .mq-math-mode .mq-overarrow.mq-arrow-leftright:before {
2722
- position: absolute;
2723
- top: -0.48em;
2724
- left: -0.1em;
2725
- font-size: 0.5em;
2726
- content: '\27A4';
2727
- -moz-transform: scaleX(-1);
2728
- -o-transform: scaleX(-1);
2729
- -webkit-transform: scaleX(-1);
2730
- transform: scaleX(-1);
2731
- filter: FlipH;
2732
- -ms-filter: 'FlipH';
2733
- }
2734
- .mq-math-mode .mq-selection,
2735
- .mq-editable-field .mq-selection,
2736
- .mq-math-mode .mq-selection .mq-non-leaf,
2737
- .mq-editable-field .mq-selection .mq-non-leaf,
2738
- .mq-math-mode .mq-selection .mq-scaled,
2739
- .mq-editable-field .mq-selection .mq-scaled {
2740
- background: #b4d5fe !important;
2741
- }
2742
- .mq-math-mode .mq-selection.mq-blur,
2743
- .mq-editable-field .mq-selection.mq-blur,
2744
- .mq-math-mode .mq-selection.mq-blur .mq-non-leaf,
2745
- .mq-editable-field .mq-selection.mq-blur .mq-non-leaf,
2746
- .mq-math-mode .mq-selection.mq-blur .mq-scaled,
2747
- .mq-editable-field .mq-selection.mq-blur .mq-scaled {
2748
- background: #d4d4d4 !important;
2749
- color: black;
2750
- border-color: black;
2751
- }
2752
- html body .mq-math-mode .mq-selection .mq-nthroot-container *,
2753
- html body .mq-editable-field .mq-selection .mq-nthroot-container * {
2754
- background: transparent !important;
2755
- }
2756
- .mq-editable-field .mq-textarea,
2757
- .mq-math-mode .mq-textarea {
2758
- position: relative;
2759
- -webkit-user-select: text;
2760
- -moz-user-select: text;
2761
- user-select: text;
2762
- }
2763
- .mq-editable-field .mq-textarea *,
2764
- .mq-math-mode .mq-textarea * {
2765
- -webkit-user-select: text;
2766
- -moz-user-select: text;
2767
- user-select: text;
2768
- position: absolute;
2769
- clip: rect(1em 1em 1em 1em);
2770
- -webkit-transform: scale(0);
2771
- -moz-transform: scale(0);
2772
- -ms-transform: scale(0);
2773
- -o-transform: scale(0);
2774
- transform: scale(0);
2775
- resize: none;
2776
- width: 1px;
2777
- height: 1px;
2778
- box-sizing: content-box;
2779
- }
2780
-
2781
-
2782
- .MafsView .protractor-rotation-handle {
2783
- cursor: grab;
2784
- /* `pointer-events: all` is needed to make the hit target the size of the
2785
- * entire <g> element and not just its visible subelements */
2786
- pointer-events: all;
2787
- transition: transform 0.15s ease-out;
2788
- }
2789
-
2790
- .MafsView .protractor-rotation-handle:hover {
2791
- transform: scale(1.2);
2792
- }
2793
-
2794
- .MafsView .protractor-rotation-handle-arrow-arc {
2795
- fill: none;
2796
- stroke: var(--mafs-blue);
2797
- stroke-width: 8;
2798
- /* `strokeLinecap: square` prevents a hairline crack from appearing
2799
- * between the arc and the arrowheads, by making the arc extend a bit
2800
- * beyond its start and end coordinates.
2801
- */
2802
- stroke-linecap: square;
2803
- }
2804
-
2805
- .MafsView .protractor-rotation-handle-arrowhead {
2806
- fill: var(--mafs-blue);
2807
- stroke: none;
2808
- }
2809
-
2810
- .MafsView {
2811
- display: block;
2812
- background: var(--mafs-bg);
2813
- overflow: hidden;
2814
- -webkit-user-select: none;
2815
- user-select: none;
2816
- font-family: inherit;
2817
- font-variant-numeric: tabular-nums;
2818
- touch-action: none;
2819
- outline: 0;
2820
-
2821
- --mafs-bg: black;
2822
- --mafs-fg: white;
2823
-
2824
- --mafs-origin-color: var(--mafs-fg);
2825
- --mafs-line-color: #555;
2826
- --mafs-line-stroke-dash-style: 4, 3;
2827
- --mafs-axis-stroke-width: 1px;
2828
- --grid-line-subdivision-color: #222;
2829
-
2830
- --mafs-red: #f11d0e;
2831
- --mafs-orange: #f14e0e;
2832
- --mafs-yellow: #ffe44a;
2833
- --mafs-green: #15e272;
2834
- --mafs-blue: #58a6ff;
2835
- --mafs-indigo: #7c58ff;
2836
- --mafs-violet: #ae58ff;
2837
- --mafs-pink: #ee00ab;
2838
- }
2839
-
2840
- .MafsView text {
2841
- fill: var(--mafs-fg);
2842
- cursor: default;
2843
- }
2844
-
2845
- .MafsView path {
2846
- stroke: var(--mafs-fg);
2847
- }
2848
-
2849
- .MafsView:focus-visible {
2850
- border-radius: 5px;
2851
- outline: 3px solid #58a6ff;
2852
- }
2853
-
2854
- @supports not selector(:focus-visible) {
2855
- .MafsView:focus {
2856
- border-radius: 5px;
2857
- outline: 3px solid #58a6ff;
2858
- }
2859
- }
2860
-
2861
- .mafs-shadow {
2862
- paint-order: stroke;
2863
- stroke-width: 3px;
2864
- stroke: var(--mafs-bg);
2865
- stroke-opacity: 0.75;
2866
- stroke-linejoin: round;
2867
- }
2868
-
2869
- .mafs-movable-point {
2870
- cursor: grab;
2871
- touch-action: none;
2872
- }
2873
-
2874
- .mafs-movable-point-dragging {
2875
- cursor: grabbing;
2876
- }
2877
-
2878
- .mafs-movable-point:focus {
2879
- outline: 0;
2880
- }
2881
-
2882
- .mafs-movable-point * {
2883
- fill: none;
2884
- stroke: none;
2885
- }
2886
-
2887
- .mafs-movable-point-hitbox {
2888
- fill: transparent;
2889
- }
2890
-
2891
- .mafs-movable-point-focus {
2892
- stroke: var(--movable-point-color);
2893
- stroke-width: 2;
2894
- stroke-opacity: 0;
2895
- fill: none;
2896
- transition: stroke-opacity 0.2s ease;
2897
- }
2898
-
2899
- .mafs-movable-point-ring {
2900
- fill: var(--movable-point-color);
2901
- fill-opacity: 0.25;
2902
- stroke: none;
2903
- transition: r 0.2s ease;
2904
- }
2905
-
2906
- .mafs-movable-point-point {
2907
- fill: var(--movable-point-color);
2908
- transition: r 0.2s ease;
2909
- }
2910
-
2911
- /* Hover */
2912
-
2913
- .mafs-movable-point:hover .mafs-movable-point-point,
2914
- .mafs-movable-point:focus-visible .mafs-movable-point-point {
2915
- r: calc(var(--movable-point-ring-size) - 2px);
2916
- }
2917
-
2918
- .mafs-movable-point:hover .mafs-movable-point-ring,
2919
- .mafs-movable-point:focus-visible .mafs-movable-point-ring {
2920
- r: calc(var(--movable-point-ring-size) + 3px);
2921
- }
2922
-
2923
- .mafs-movable-point.mafs-movable-point-dragging .mafs-movable-point-ring {
2924
- r: var(--movable-point-ring-size);
2925
- }
2926
-
2927
- /* Focus */
2928
-
2929
- .mafs-movable-point:focus-visible .mafs-movable-point-focus {
2930
- stroke-opacity: 1;
2931
- }
2932
-
2933
- /**
2934
- * Overrides of mafs theme-- we will want to move this into JS land
2935
- * to take advantage of WB tokens
2936
- */
2937
- .MafsView {
2938
- --mafs-bg: transparent;
2939
- --mafs-fg: rgb(33, 36, 44); /* WB color.offBlack */
2940
-
2941
- /* Grid lines */
2942
- --mafs-line-color: rgba(33, 36, 44, 0.16); /* WB color.offBlack16*/
2943
-
2944
- /* Axis lines */
2945
- --mafs-axis-stroke-width: 2px;
2946
-
2947
- --mafs-blue: #1865f2; /* WB color.blue */
2948
- --mafs-red: #d92916; /* WB color.red */
2949
- --mafs-green: #00a60e; /* WB color.green */
2950
- --mafs-violet: #9059ff; /* WB color.purple */
2951
- --mafs-yellow: #ffb100; /* WB color.gold */
2952
- /* Note: offBlack50 is not the best for contrast. However, this color needs
2953
- to be distinguishable from our regular interactive blue so it is clear that
2954
- the element is not interactive, even though the visual elements (e.g.
2955
- outlines, shadows) may indicate otherwise. When using a darker gray, it
2956
- looks the same as our WB blue in grayscale. We had to make a call here, and
2957
- we decided to make it lighter and more distinguishable even if it sacrifices
2958
- color contrast. (Nisha 2025) */
2959
- --static-gray: #909296 /* WB color.offBlack50 */;
2960
-
2961
- /* overridden on a per-point basis */
2962
- --movable-point-color: var(--mafs-blue);
2963
- --movable-point-center-radius: 6px;
2964
- --movable-point-ring-radius: calc(2px + var(--movable-point-center-radius));
2965
- --movable-point-halo-radius: calc(3px + var(--movable-point-ring-radius));
2966
- --movable-point-hover-expansion: 2px;
2967
- --movable-point-focus-ring-offset: 2px;
2968
-
2969
- --movable-line-stroke-weight: 2px;
2970
- --movable-line-stroke-weight-active: 4px;
2971
- overflow: visible !important;
2972
- }
2973
-
2974
- .MafsView > svg {
2975
- /* Chrome/Safari bugfix for LEMS-1906 */
2976
- display: block;
2977
- overflow: visible; /* LEMS-2035: This ensures that Mafs doesn't clip the axis labels */
2978
- }
2979
-
2980
- .MafsView .movable-line:hover,
2981
- .movable-dragging {
2982
- --movable-line-stroke-weight: var(--movable-line-stroke-weight-active);
2983
- }
2984
-
2985
- .MafsView .movable-line:focus,
2986
- .movable-polygon:focus {
2987
- outline: none;
2988
- }
2989
-
2990
- .MafsView
2991
- .movable-line
2992
- :is(.movable-line-focus-outline, .movable-line-focus-outline-gap) {
2993
- stroke: transparent;
2994
- }
2995
-
2996
- .MafsView .movable-line:focus-visible .movable-line-focus-outline {
2997
- stroke: var(--mafs-blue);
2998
- stroke-width: 10px;
2999
- }
3000
-
3001
- .MafsView .movable-line:focus-visible .movable-line-focus-outline-gap {
3002
- stroke: white;
3003
- stroke-width: 6px;
3004
- }
3005
-
3006
- .MafsView .movable-point {
3007
- cursor: grab;
3008
- touch-action: none;
3009
- outline: none;
3010
- }
3011
-
3012
- .MafsView .movable-point.movable-point--dragging {
3013
- cursor: grabbing;
3014
- }
3015
-
3016
- .MafsView .movable-point.movable-point--dragging .movable-point-halo {
3017
- opacity: 0;
3018
- }
3019
-
3020
- .MafsView .movable-point-hitbox {
3021
- fill: transparent;
3022
- }
3023
-
3024
- .MafsView
3025
- :is(
3026
- .movable-point-center,
3027
- .movable-point-ring,
3028
- .movable-point-halo,
3029
- .movable-point-focus-outline
3030
- ) {
3031
- transition:
3032
- r 0.15s ease-out,
3033
- opacity 0.15s ease-out;
3034
- }
3035
-
3036
- .MafsView .movable-point-center {
3037
- r: var(--movable-point-center-radius);
3038
- }
3039
-
3040
- .MafsView .movable-point-halo {
3041
- r: var(--movable-point-halo-radius);
3042
- fill: var(--movable-point-color);
3043
- opacity: 0.25;
3044
- filter: drop-shadow(0 5px 5px #0008);
3045
- }
3046
-
3047
- .MafsView .movable-point-ring {
3048
- r: var(--movable-point-ring-radius);
3049
- fill: #fff;
3050
- }
3051
-
3052
- .MafsView .movable-point:hover .movable-point-center {
3053
- r: calc(
3054
- var(--movable-point-hover-expansion) +
3055
- var(--movable-point-center-radius)
3056
- );
3057
- }
3058
-
3059
- .MafsView .movable-point:hover .movable-point-ring {
3060
- r: calc(
3061
- var(--movable-point-hover-expansion) + var(--movable-point-ring-radius)
3062
- );
3063
- }
3064
-
3065
- .MafsView .movable-point:hover .movable-point-halo {
3066
- r: calc(
3067
- var(--movable-point-hover-expansion) + var(--movable-point-halo-radius)
3068
- );
3069
- }
3070
-
3071
- .MafsView .movable-point .movable-point-focus-outline {
3072
- visibility: hidden;
3073
- r: calc(
3074
- var(--movable-point-halo-radius) +
3075
- var(--movable-point-focus-ring-offset)
3076
- );
3077
- stroke-width: 2px;
3078
- fill: none;
3079
- stroke: var(--mafs-blue);
3080
- }
3081
-
3082
- .MafsView .movable-point:hover .movable-point-focus-outline {
3083
- r: calc(
3084
- var(--movable-point-hover-expansion) + var(--movable-point-halo-radius) +
3085
- var(--movable-point-focus-ring-offset)
3086
- );
3087
- }
3088
-
3089
- /**
3090
- * This is needed because empty elements with focus will still have the focus outline
3091
- * when navigating via keyboard, causing weird blue dots to appear in Firefox.
3092
- */
3093
- .MafsView .movable-point__focusable-handle:focus-visible {
3094
- outline: none;
3095
- }
3096
-
3097
- .MafsView
3098
- .movable-point:is(:focus, .movable-point--focus)
3099
- .movable-point-focus-outline {
3100
- visibility: visible;
3101
- }
3102
-
3103
- .MafsView .movable-circle {
3104
- cursor: grab;
3105
- }
3106
-
3107
- .MafsView .movable-circle .circle {
3108
- stroke-width: 2px;
3109
- fill: transparent;
3110
- }
3111
-
3112
- .MafsView .movable-circle:hover .circle {
3113
- fill: var(--mafs-blue);
3114
- fill-opacity: 0.16;
3115
- }
3116
-
3117
- .MafsView .movable-circle.movable-circle--dragging {
3118
- cursor: grabbing;
3119
- outline: none;
3120
- }
3121
-
3122
- .MafsView .movable-circle .focus-ring {
3123
- visibility: hidden; /* overridden when the circle is focused */
3124
- stroke: var(--mafs-blue);
3125
- stroke-width: 2px;
3126
- fill: transparent;
3127
- }
3128
-
3129
- .MafsView .movable-circle:focus {
3130
- outline: none;
3131
- }
3132
-
3133
- .MafsView .movable-circle:focus-visible .focus-ring {
3134
- visibility: visible;
3135
- }
3136
-
3137
- .MafsView .movable-circle .movable-circle-handle {
3138
- stroke: #fff;
3139
- stroke-width: 2px;
3140
- }
3141
-
3142
- .MafsView .movable-circle .movable-circle-handle-dot {
3143
- fill: #fff;
3144
- r: 1.25px;
3145
- }
3146
-
3147
- @font-face {
3148
- font-family: Mafs-MJXTEX;
3149
- src: url("https://cdn.kastatic.org/fonts/mathjax/MathJax_Main-Regular.woff")
3150
- format("woff");
3151
- }
3152
-
3153
- .MafsView pattern g {
3154
- stroke: rgba(33, 36, 44, 0.32);
3155
- }
3156
-
3157
- .MafsView .angle-arc-interactive {
3158
- stroke: var(--mafs-blue);
3159
- stroke-width: 0.1px;
3160
- }
3161
-
3162
- .MafsView .angle-arc-static {
3163
- stroke: var(--static-gray);
3164
- stroke-width: 0.1px;
3165
- }
3166
-
3167
- .MafsView .axis-tick-label {
3168
- /* There is a bug in the MathJax font for Safari, so we use KaTeX */
3169
- font-family: "KaTeX_Main", "Mafs-MJXTEX", sans-serif;
3170
- stroke: #fff;
3171
- stroke-width: 5px;
3172
- paint-order: stroke fill;
3173
- }
3174
-
3175
- .MafsView .axis-tick {
3176
- stroke: black;
3177
- stroke-width: 1px;
3178
- }
3179
-
3180
- .mafs-sr-only {
3181
- height: 0;
3182
- width: 0;
3183
- overflow: hidden;
3184
- }