@khanacademy/perseus-editor 19.0.0 → 20.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.
@@ -0,0 +1,987 @@
1
+ code {
2
+ font-family: Courier, monospace;
3
+ }
4
+ .pod-title {
5
+ background-color: #eee;
6
+ border: 1px solid #ddd;
7
+ border-bottom: 0;
8
+ font-size: 1.25em;
9
+ padding: 4px 10px;
10
+ border-radius: 3px 3px 0 0;
11
+ }
12
+ .pod-title.closed {
13
+ border-radius: 3px;
14
+ }
15
+ .smiley {
16
+ position: absolute;
17
+ left: 0px;
18
+ top: 4px;
19
+ }
20
+ .perseus-single-editor {
21
+ box-sizing: border-box;
22
+ width: 100%;
23
+ }
24
+ .perseus-json-editor {
25
+ width: 100%;
26
+ font-family: monospace;
27
+ height: 500px;
28
+ }
29
+ .perseus-json-editor.invalid {
30
+ background-color: #ffe6e6;
31
+ }
32
+ .perseus-textarea-pair {
33
+ border: 1px solid #ddd;
34
+ font-size: 12px;
35
+ line-height: 1.6;
36
+ position: relative;
37
+ }
38
+ .perseus-textarea-pair > .perseus-textarea-underlay {
39
+ color: transparent;
40
+ margin-bottom: 12px;
41
+ padding: 10px;
42
+ white-space: pre-wrap;
43
+ word-wrap: break-word;
44
+ }
45
+ .perseus-textarea-pair > .perseus-textarea-underlay b {
46
+ font-weight: normal;
47
+ background-color: #dfd;
48
+ }
49
+ .perseus-textarea-pair > .perseus-textarea-underlay b.selected {
50
+ background-color: #ddf;
51
+ }
52
+ .perseus-textarea-pair > .perseus-textarea-underlay b.error {
53
+ background-color: #fcc;
54
+ }
55
+ .perseus-textarea-pair > textarea {
56
+ background: transparent;
57
+ border: 0;
58
+ box-sizing: border-box;
59
+ font: inherit;
60
+ height: 100%;
61
+ left: 0;
62
+ overflow: hidden;
63
+ padding: 10px;
64
+ position: absolute;
65
+ resize: none;
66
+ top: 0;
67
+ width: 100%;
68
+ }
69
+ .perseus-widget-row {
70
+ margin: 7px 0;
71
+ width: 100%;
72
+ }
73
+ .perseus-widget-row .perseus-widget-left-col,
74
+ .perseus-widget-row .perseus-widget-right-col {
75
+ display: inline-block;
76
+ width: 50%;
77
+ }
78
+ .perseus-widget-row .perseus-widget-left-col .range-input,
79
+ .perseus-widget-row .perseus-widget-right-col .range-input {
80
+ float: right;
81
+ margin-right: 5px;
82
+ }
83
+ .perseus-widget-row > .range-input {
84
+ margin-left: 10px;
85
+ }
86
+ .perseus-answer-options {
87
+ border: 1px solid #ddd;
88
+ padding: 10px;
89
+ }
90
+ .perseus-answer-options * {
91
+ margin-bottom: 4px;
92
+ }
93
+ .perseus-answer-widget {
94
+ border: 1px solid #ddd;
95
+ border-radius: 0 0 3px 3px;
96
+ padding: 10px;
97
+ }
98
+ .perseus-answer-none {
99
+ border-bottom: 1px solid #ddd;
100
+ }
101
+ .perseus-answer-none > div {
102
+ display: none;
103
+ }
104
+ .perseus-widget-editor {
105
+ border: 1px solid #ddd;
106
+ border-radius: 3px;
107
+ margin-top: 10px;
108
+ }
109
+ .perseus-widget-editor .perseus-widget-editor-title {
110
+ background-color: #eee;
111
+ border: 1px solid #ddd;
112
+ border-bottom: 0;
113
+ font-size: 1.25em;
114
+ padding: 4px 10px;
115
+ border-radius: 3px 3px 0 0;
116
+ border: 0;
117
+ display: flex;
118
+ align-items: center;
119
+ position: relative;
120
+ }
121
+ .perseus-widget-editor .perseus-widget-editor-title.closed {
122
+ border-radius: 3px;
123
+ }
124
+ .perseus-widget-editor .perseus-widget-editor-title :first-child {
125
+ flex-grow: 1;
126
+ }
127
+ .perseus-widget-editor .perseus-widget-editor-title > a {
128
+ color: inherit;
129
+ text-decoration: none;
130
+ }
131
+ .perseus-widget-editor .perseus-widget-editor-title .alignment {
132
+ margin-right: 5px;
133
+ }
134
+ .perseus-widget-editor .perseus-widget-editor-title .simple-button {
135
+ font-size: 13px;
136
+ padding: 0 10px;
137
+ }
138
+ .perseus-widget-editor .perseus-widget-editor-content {
139
+ border-radius: 0 0 3px 3px;
140
+ border-top: 1px solid #ddd;
141
+ padding: 10px;
142
+ transition: all 0s;
143
+ }
144
+ .perseus-widget-editor .perseus-widget-editor-content.leave {
145
+ display: none;
146
+ }
147
+ .perseus-widget-editor .perseus-widget-editor-content .inline-options {
148
+ float: inline-start;
149
+ /* flexbox and inline-block don't work on <legend> elements, so going old-school here */
150
+ line-height: 24px;
151
+ /* for alignment with items in same line (like pills or buttons) */
152
+ padding-inline-end: 0.5em;
153
+ }
154
+ .perseus-widget-editor .perseus-widget-editor-content .tooltip-for-legend {
155
+ display: inline-block;
156
+ line-height: 24px;
157
+ }
158
+ .perseus-widget-editor .categorizer-container {
159
+ overflow-x: scroll;
160
+ }
161
+ .perseus-widget-editor .section-accordion {
162
+ display: flex;
163
+ flex-direction: row;
164
+ }
165
+ .perseus-widget-editor .delete-item-button {
166
+ align-self: center;
167
+ padding-right: 0.5em;
168
+ }
169
+ .perseus-widget-editor-title-id > svg {
170
+ float: left;
171
+ font-size: 14px;
172
+ margin-right: 10px;
173
+ }
174
+ .perseus-editor-accordion-container {
175
+ display: inline-grid;
176
+ width: 100%;
177
+ }
178
+ .perseus-editor-accordion-container.collapsed {
179
+ grid-template-rows: 0fr;
180
+ min-height: 0;
181
+ visibility: hidden;
182
+ transition: all 0.25s step-end, grid-template-rows 0.25s;
183
+ }
184
+ .perseus-editor-accordion-container.expanded {
185
+ grid-template-rows: 1fr;
186
+ min-height: 100%;
187
+ visibility: visible;
188
+ transition: grid-template-rows 0.5s;
189
+ }
190
+ .perseus-editor-accordion-container .perseus-editor-accordion-content {
191
+ overflow: hidden;
192
+ margin: 0 -1px;
193
+ /* allows focus ring on accordion to show */
194
+ padding: 0 1px;
195
+ }
196
+ .perseus-editor-widgets-selectors {
197
+ background-color: #eee;
198
+ border: 1px solid #ddd;
199
+ border-top: 0;
200
+ border-radius: 0 0 3px 3px;
201
+ display: flex;
202
+ flex-wrap: wrap;
203
+ padding: 5px;
204
+ }
205
+ .perseus-editor-widgets-selectors select {
206
+ margin: 2px;
207
+ }
208
+ .perseus-editor-widgets > div.selected > strong {
209
+ background-color: #ddf;
210
+ }
211
+ .perseus-editor-widgets .warning {
212
+ background-color: #ffcccc;
213
+ padding: 4px;
214
+ margin: 4px;
215
+ }
216
+ .perseus-editor-word-count {
217
+ cursor: help;
218
+ flex: 1;
219
+ float: right;
220
+ margin-right: 3px;
221
+ margin-top: 2px;
222
+ text-align: right;
223
+ }
224
+ .MathJax .math {
225
+ color: inherit;
226
+ }
227
+ #perseus {
228
+ margin: 20px;
229
+ }
230
+ #perseus #problemarea #workarea {
231
+ margin: 0;
232
+ }
233
+ #perseus #problemarea #workarea .perseus-image-caption {
234
+ top: 0px !important;
235
+ }
236
+ #perseus .perseus-question-container > div,
237
+ #perseus .perseus-answer-container > div {
238
+ padding-bottom: 25px;
239
+ }
240
+ #perseus .add-choice-container,
241
+ #perseus .add-hint-container {
242
+ margin-bottom: 20px;
243
+ text-align: left;
244
+ }
245
+ #problemarea {
246
+ font-size: 14px;
247
+ position: relative;
248
+ float: left;
249
+ padding-bottom: 38px;
250
+ }
251
+ #problemarea a:link,
252
+ #problemarea input,
253
+ #problemarea label,
254
+ #problemarea select {
255
+ /* for dropdowns */
256
+ position: relative;
257
+ z-index: 3;
258
+ /* interactive-content */
259
+ }
260
+ .perseus-editor-table {
261
+ clear: both;
262
+ display: table;
263
+ table-layout: fixed;
264
+ }
265
+ .perseus-editor-row {
266
+ display: table-row;
267
+ }
268
+ .perseus-editor-left-cell {
269
+ display: table-cell;
270
+ padding-right: 30px;
271
+ vertical-align: top;
272
+ width: 360px;
273
+ max-width: 360px;
274
+ min-width: 360px;
275
+ }
276
+ .perseus-editor-right-cell {
277
+ box-sizing: border-box;
278
+ display: table-cell;
279
+ padding: 30px;
280
+ padding-top: 5px;
281
+ vertical-align: top;
282
+ }
283
+ .perseus-hint-editor {
284
+ padding-bottom: 20px;
285
+ }
286
+ .perseus-hint-editor .perseus-single-editor {
287
+ margin-bottom: 5px;
288
+ }
289
+ .perseus-hint-editor .reorder-hints button {
290
+ font-size: 16px;
291
+ }
292
+ .perseus-hint-editor .reorder-hints button:hover,
293
+ .perseus-hint-editor .reorder-hints button:active {
294
+ color: #000;
295
+ text-decoration: none;
296
+ }
297
+ .perseus-hint-editor .reorder-hints button.hidden {
298
+ visibility: hidden;
299
+ }
300
+ .perseus-hint-editor .remove-hint {
301
+ float: right;
302
+ font-size: 13px;
303
+ padding: 0 10px;
304
+ }
305
+ .perseus-hints-editor .add-hint {
306
+ font-size: 13px;
307
+ }
308
+ .perseus-hints-editor .perseus-editor-row:first-child .perseus-editor-right-cell {
309
+ border-top: 0;
310
+ }
311
+ .perseus-hint-editor + div .perseus-hint-renderer {
312
+ width: 100%;
313
+ }
314
+ .perseus-hint-editor + div .perseus-hint-renderer div.paragraph {
315
+ margin: 0px 0px 22px 0px;
316
+ }
317
+ .perseus-article-editor {
318
+ margin-bottom: 20px;
319
+ margin-top: 20px;
320
+ }
321
+ .perseus-article-editor .perseus-editor-table {
322
+ margin-left: auto;
323
+ margin-right: auto;
324
+ }
325
+ .perseus-article-editor .perseus-single-editor {
326
+ margin-bottom: 10px;
327
+ }
328
+ .perseus-article-editor .section-control-button,
329
+ .perseus-article-editor .step-control-button {
330
+ font-size: 13px;
331
+ padding: 2px 10px;
332
+ margin: 0 2px;
333
+ }
334
+ .perseus-article-editor .perseus-editor-left-cell {
335
+ min-width: 360px;
336
+ }
337
+ .perseus-article-editor .mobile-preview,
338
+ .perseus-article-editor .desktop-preview,
339
+ .perseus-article-editor .editor-preview,
340
+ .perseus-article-editor .standalone-preview {
341
+ box-sizing: border-box;
342
+ }
343
+ .perseus-article-editor .mobile-preview {
344
+ border: 1px solid rgba(0, 0, 0, 0.29);
345
+ max-width: 322px;
346
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.29);
347
+ padding: 32px 16px;
348
+ }
349
+ .perseus-article-editor .desktop-preview {
350
+ border: 1px solid transparent;
351
+ padding: 32px 20px;
352
+ }
353
+ .perseus-article-editor .editor-preview {
354
+ display: table-cell;
355
+ }
356
+ .perseus-article-editor .editor-preview.full-width {
357
+ width: 100%;
358
+ }
359
+ .perseus-article-editor .editor-preview .desktop-preview {
360
+ border: 1px solid rgba(0, 0, 0, 0.29);
361
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.29);
362
+ width: 100%;
363
+ }
364
+ .perseus-article-editor .standalone-preview .mobile-preview,
365
+ .perseus-article-editor .standalone-preview .desktop-preview {
366
+ margin-left: auto;
367
+ margin-right: auto;
368
+ }
369
+ .perseus-article-editor .json-editor {
370
+ margin: auto;
371
+ max-width: 688px;
372
+ }
373
+ .perseus-article-editor .perseus-json-editor {
374
+ display: block;
375
+ margin-left: auto;
376
+ margin-right: auto;
377
+ }
378
+ .perseus-article-editor .json-editor-warning {
379
+ margin-bottom: 10px;
380
+ text-align: center;
381
+ }
382
+ .perseus-article-editor .framework-perseus.perseus-article {
383
+ box-sizing: border-box;
384
+ }
385
+ .perseus-article-editor .framework-perseus.perseus-article * {
386
+ box-sizing: inherit;
387
+ }
388
+ .perseus-article-editor .perseus-editor-left-cell > .pod-title {
389
+ padding: 4px 9px;
390
+ }
391
+ .perseus-widget-dropdown input[type="text"] {
392
+ border: 1px solid #ccc;
393
+ border-radius: 5px;
394
+ padding: 5px;
395
+ }
396
+ .perseus-widget-dropdown input[type="text"].correct {
397
+ background: #aaffaa;
398
+ }
399
+ .perseus-widget-dropdown input[type="text"].incorrect {
400
+ background: #ffcccc;
401
+ }
402
+ .perseus-widget-dropdown .dropdown-choices {
403
+ margin: 20px 0;
404
+ }
405
+ .perseus-widget-dropdown .dropdown-choices input[type="text"] {
406
+ margin: 0 5px;
407
+ width: 70%;
408
+ }
409
+ .perseus-widget-dropdown .dropdown-info {
410
+ display: inline-flex;
411
+ margin-bottom: 16px;
412
+ }
413
+ .perseus-widget-dropdown .dropdown-field {
414
+ display: flex;
415
+ flex-direction: row;
416
+ align-items: center;
417
+ min-width: 0;
418
+ margin-bottom: 16px;
419
+ }
420
+ .perseus-widget-dropdown .remove-choice {
421
+ margin-bottom: 10px;
422
+ }
423
+ .perseus-input-number-editor {
424
+ font-family: Lato, "Noto Sans", sans-serif;
425
+ font-weight: 400;
426
+ font-size: 16px;
427
+ line-height: 20px;
428
+ }
429
+ .perseus-input-number-editor .answer-option .unsimplified-options {
430
+ min-height: 48px;
431
+ }
432
+ .perseus-input-number-editor .perseus-textarea-pair {
433
+ font-size: 16px;
434
+ }
435
+ .perseus-input-number-editor .perseus-textarea-pair .perseus-textarea-underlay {
436
+ margin-bottom: 26px;
437
+ }
438
+ .perseus-input-number-editor .perseus-textarea-pair textarea {
439
+ background-color: #ffffff;
440
+ border: 1px solid rgba(33, 36, 44, 0.5);
441
+ border-radius: 4px;
442
+ }
443
+ .perseus-input-number-editor .input-answer-editor-value,
444
+ .perseus-input-number-editor .input-answer-editor-message {
445
+ display: inline-block;
446
+ }
447
+ .perseus-input-number-editor .input-answer-editor-value-container {
448
+ display: block;
449
+ }
450
+ .perseus-input-number-editor .input-answer-editor-value-container input {
451
+ background: #ffffff;
452
+ border: 1px solid rgba(33, 36, 44, 0.5);
453
+ border-radius: 4px;
454
+ color: #21242c;
455
+ font-family: Lato, "Noto Sans", sans-serif;
456
+ font-weight: 400;
457
+ font-size: 16px;
458
+ line-height: 20px;
459
+ outline-offset: -2px;
460
+ }
461
+ .perseus-input-number-editor .input-answer-editor-value-container .numeric-input-value {
462
+ margin-left: 8px;
463
+ width: 6em;
464
+ }
465
+ .perseus-input-number-editor .input-answer-editor-value-container .max-error-input-value {
466
+ display: none;
467
+ width: 3em;
468
+ }
469
+ .perseus-input-number-editor .input-answer-editor-value-container .max-error-plusmn {
470
+ cursor: default;
471
+ display: none;
472
+ height: 32px;
473
+ padding-top: 4px;
474
+ text-align: center;
475
+ vertical-align: top;
476
+ width: 1em;
477
+ }
478
+ .perseus-input-number-editor .input-answer-editor-value-container.with-max-error .numeric-input-value,
479
+ .perseus-input-number-editor .input-answer-editor-value-container:focus-within .numeric-input-value {
480
+ border-right: none;
481
+ border-top-right-radius: 0;
482
+ border-bottom-right-radius: 0;
483
+ }
484
+ .perseus-input-number-editor .input-answer-editor-value-container.with-max-error .max-error-input-value,
485
+ .perseus-input-number-editor .input-answer-editor-value-container:focus-within .max-error-input-value {
486
+ border-left: none;
487
+ border-top-left-radius: 0;
488
+ border-bottom-left-radius: 0;
489
+ display: inline-block;
490
+ }
491
+ .perseus-input-number-editor .input-answer-editor-value-container.with-max-error .max-error-plusmn,
492
+ .perseus-input-number-editor .input-answer-editor-value-container:focus-within .max-error-plusmn {
493
+ border-top: 1px solid rgba(33, 36, 44, 0.5);
494
+ border-bottom: 1px solid rgba(33, 36, 44, 0.5);
495
+ display: inline-block;
496
+ }
497
+ .perseus-input-number-editor .options-toggle,
498
+ .perseus-input-number-editor .answer-trash,
499
+ .perseus-input-number-editor .answer-status {
500
+ height: 26px;
501
+ line-height: 26px;
502
+ outline-offset: -3px;
503
+ vertical-align: middle;
504
+ }
505
+ .perseus-input-number-editor .value-divider {
506
+ border-top: 1px solid #ccc;
507
+ }
508
+ .perseus-input-number-editor .options-toggle,
509
+ .perseus-input-number-editor .answer-trash {
510
+ border-left: 1px solid #ccc;
511
+ box-sizing: border-box;
512
+ cursor: pointer;
513
+ display: inline-block;
514
+ text-align: center;
515
+ text-decoration: none;
516
+ width: 20%;
517
+ }
518
+ .perseus-input-number-editor .options-toggle {
519
+ background-color: #eee;
520
+ color: #444;
521
+ }
522
+ .perseus-input-number-editor .options-toggle:hover {
523
+ background-color: #ccc;
524
+ }
525
+ .perseus-input-number-editor .answer-trash {
526
+ background-color: #c04f03;
527
+ background-image: linear-gradient(to bottom, #e35d04, #c04f03);
528
+ color: #fff;
529
+ }
530
+ .perseus-input-number-editor .answer-trash:hover {
531
+ color: #fff;
532
+ background-image: linear-gradient(to bottom, #f46e15, #d16014);
533
+ }
534
+ .perseus-input-number-editor .is-strict-indicator {
535
+ background-color: #d9edf7;
536
+ border-bottom: 1px solid #ccc;
537
+ border-right: 1px solid #ccc;
538
+ cursor: default;
539
+ font-size: 16px;
540
+ line-height: 12px;
541
+ height: 12px;
542
+ width: 12px;
543
+ text-align: center;
544
+ position: absolute;
545
+ top: 0;
546
+ right: auto;
547
+ bottom: auto;
548
+ left: 0;
549
+ -webkit-user-select: none;
550
+ user-select: none;
551
+ }
552
+ .perseus-input-number-editor .simplify-indicator {
553
+ border-top: 1px solid #ccc;
554
+ border-right: 1px solid #ccc;
555
+ cursor: default;
556
+ font-size: 10px;
557
+ line-height: 13px;
558
+ height: 13px;
559
+ width: 12px;
560
+ text-align: center;
561
+ position: absolute;
562
+ top: 12px;
563
+ right: auto;
564
+ bottom: auto;
565
+ left: 0;
566
+ -webkit-user-select: none;
567
+ user-select: none;
568
+ }
569
+ .perseus-input-number-editor .simplify-indicator.optional {
570
+ background-color: #aaffaa;
571
+ }
572
+ .perseus-input-number-editor .simplify-indicator.enforced {
573
+ background-color: #ffcccc;
574
+ }
575
+ .perseus-input-number-editor .answer-status {
576
+ color: inherit;
577
+ display: inline-block;
578
+ text-align: center;
579
+ text-decoration: none;
580
+ width: 60%;
581
+ -webkit-user-select: none;
582
+ user-select: none;
583
+ }
584
+ .perseus-input-number-editor .answer-status.wrong {
585
+ background-color: #ffcccc;
586
+ }
587
+ .perseus-input-number-editor .answer-status.correct {
588
+ background-color: #aaffaa;
589
+ }
590
+ .perseus-input-number-editor .answer-status.ungraded {
591
+ background-color: #d9edf7;
592
+ }
593
+ .perseus-input-number-editor .input-answer-editor-message {
594
+ margin-left: 5px;
595
+ }
596
+ .perseus-input-number-editor .input-answer-editor-message .perseus-single-editor {
597
+ font-family: "Lucida Grande";
598
+ width: 230px;
599
+ }
600
+ .perseus-input-number-editor .input-answer-editor-message .perseus-single-editor .perseus-textarea-pair > textarea,
601
+ .perseus-input-number-editor .input-answer-editor-message .perseus-single-editor .perseus-textarea-underlay {
602
+ padding: 5px;
603
+ }
604
+ .perseus-input-number-editor .input-answer-editor-message .perseus-single-editor .perseus-textarea-pair {
605
+ border-color: #ccc;
606
+ border-radius: 3px;
607
+ min-height: 53px;
608
+ }
609
+ .perseus-input-number-editor .input-answer-editor-message .perseus-single-editor .perseus-textarea-underlay {
610
+ margin-bottom: 0;
611
+ }
612
+ .perseus-widget-radio {
613
+ margin-bottom: 10px;
614
+ }
615
+ .perseus-widget-radio .choice-editor .perseus-single-editor {
616
+ margin-bottom: 0;
617
+ }
618
+ .perseus-widget-radio .choice-editor.correct textarea {
619
+ background: #aaffaa;
620
+ }
621
+ .perseus-widget-radio .choice-editor.incorrect textarea {
622
+ background: #ffcccc;
623
+ }
624
+ .perseus-widget-radio textarea::placeholder {
625
+ color: #777;
626
+ }
627
+ .perseus-widget-radio .clue-editor .perseus-textarea-pair {
628
+ border-top: 0;
629
+ }
630
+ .perseus-widget-radio .choice-clue-editors,
631
+ .perseus-widget-radio .choice-editor,
632
+ .perseus-widget-radio .clue-editor {
633
+ display: inline-block;
634
+ width: 100%;
635
+ }
636
+ .perseus-widget-radio .delete-choice {
637
+ margin-left: 5px;
638
+ padding: 5px;
639
+ }
640
+ .perseus-widget-radio .perseus-single-editor {
641
+ border: 0;
642
+ display: inline-block;
643
+ margin: 0 0 5px;
644
+ vertical-align: top;
645
+ }
646
+ .perseus-widget-radio .perseus-single-editor p {
647
+ margin: 0;
648
+ }
649
+ .perseus-widget-radio .perseus-textarea-pair,
650
+ .perseus-widget-radio .perseus-textarea-underlay {
651
+ display: block;
652
+ }
653
+ .perseus-widget-radio .perseus-textarea-pair > textarea,
654
+ .perseus-widget-radio .perseus-textarea-pair > .perseus-textarea-underlay {
655
+ padding: 5px;
656
+ }
657
+ .perseus-widget-editor-content .add-choice-container .simple-button {
658
+ margin-right: 10px;
659
+ }
660
+ .perseus-widget-editor-content .perseus-widget-radio {
661
+ position: static;
662
+ }
663
+ .perseus-widget-editor-content .perseus-widget-radio .checkbox,
664
+ .perseus-widget-editor-content .perseus-widget-radio .delete-choice {
665
+ position: relative;
666
+ top: -10px;
667
+ }
668
+ .perseus-widget-editor-content .perseus-radio-option.none-of-above:before {
669
+ content: "None of the above";
670
+ display: block;
671
+ font-style: italic;
672
+ font-weight: bold;
673
+ }
674
+ .perseus-widget-editor-content .perseus-radio-option.none-of-above .choice-editor.incorrect {
675
+ opacity: 0.5;
676
+ }
677
+ #solutionarea .perseus-widget-radio li {
678
+ padding: 7px 0;
679
+ }
680
+ .framework-perseus table.perseus-widget-table-of-values th .perseus-single-editor {
681
+ width: 80px;
682
+ margin-bottom: 6px;
683
+ }
684
+ .framework-perseus table.perseus-widget-table-of-values th .perseus-textarea-pair,
685
+ .framework-perseus table.perseus-widget-table-of-values th .perseus-single-editor {
686
+ height: 50px;
687
+ }
688
+ .categorization-container.categorization-container-editor {
689
+ width: 350px;
690
+ margin-bottom: 160px;
691
+ }
692
+ .categorization-container.categorization-container-editor .card input {
693
+ margin: 7px 3px 7px 13px;
694
+ font-size: 12px;
695
+ display: block;
696
+ width: 81%;
697
+ }
698
+ .categorization-container.categorization-container-editor .category {
699
+ float: left;
700
+ padding: 5px;
701
+ width: 160px;
702
+ }
703
+ .categorization-container.categorization-container-editor .categories {
704
+ width: 176px;
705
+ }
706
+ .categorization-container.categorization-container-editor .perseus-textarea-underlay {
707
+ margin-bottom: 0;
708
+ }
709
+ .categorization-container.categorization-container-editor .drag-bar {
710
+ float: left;
711
+ font-size: 10px;
712
+ padding: 2px 0;
713
+ height: 70%;
714
+ margin-top: 3px;
715
+ }
716
+ .categorization-container.categorization-container-editor .header {
717
+ margin-bottom: 8px;
718
+ }
719
+ .categorization-container.categorization-container-editor .header input {
720
+ display: block;
721
+ margin-right: 24px;
722
+ width: 76%;
723
+ }
724
+ .categorization-container.categorization-container-editor .header .remove {
725
+ position: relative;
726
+ top: -14px;
727
+ left: 12px;
728
+ float: right;
729
+ width: 20px;
730
+ height: 20px;
731
+ padding: 2px;
732
+ color: #666;
733
+ cursor: pointer;
734
+ }
735
+ .categorization-container.categorization-container-editor .header .remove:hover {
736
+ color: #333;
737
+ }
738
+ .categorization-container.categorization-container-editor .delete-item-area {
739
+ position: absolute;
740
+ width: 150px;
741
+ height: 60px;
742
+ padding-top: 40px;
743
+ bottom: -150px;
744
+ left: 10px;
745
+ border: dashed 2px #888;
746
+ color: #888;
747
+ text-align: center;
748
+ font-size: 20px;
749
+ }
750
+ .categorization-container.categorization-container-editor .delete-item-area.target {
751
+ border-color: black;
752
+ color: #333;
753
+ }
754
+ .categorization-container.categorization-container-editor .card {
755
+ width: 130px;
756
+ padding: 0;
757
+ }
758
+ .categorization-container.categorization-container-editor .card.dragging .drag-bar {
759
+ margin-left: 2px;
760
+ }
761
+ .categorization-editor-area {
762
+ height: 30px;
763
+ }
764
+ .categorization-editor-area .add-item {
765
+ float: left;
766
+ margin-left: 17px;
767
+ }
768
+ .categorization-editor-area .add-category {
769
+ margin-left: 173px;
770
+ }
771
+ .perseus-widget-interactive-graph {
772
+ display: block;
773
+ }
774
+ .perseus-widget-plotter-editor .plotter-categories,
775
+ .perseus-widget-plotter-editor .pic-url {
776
+ width: 70%;
777
+ }
778
+ .perseus-text-list-editor input[type="text"] {
779
+ padding: 3px;
780
+ margin-right: 5px;
781
+ min-width: 20px;
782
+ max-width: 340px;
783
+ }
784
+ .perseus-text-list-editor.layout-horizontal input[type="text"] {
785
+ float: left;
786
+ }
787
+ .perseus-matcher-editor .perseus-text-list-editor {
788
+ float: left;
789
+ max-width: 50%;
790
+ }
791
+ .perseus-matcher-editor .perseus-text-list-editor input[type="text"] {
792
+ max-width: 90%;
793
+ }
794
+ .perseus-matcher-editor input[type="text"] {
795
+ width: 46%;
796
+ }
797
+ .perseus-matcher-editor input[type="text"] + input[type="text"] {
798
+ margin-left: 2%;
799
+ }
800
+ .info-tip {
801
+ display: inline-block;
802
+ }
803
+ .info-tip-content-container p {
804
+ font-size: 12px;
805
+ line-height: 1.4;
806
+ margin: 0;
807
+ }
808
+ .info-tip-content-container p + p {
809
+ margin-top: 22px;
810
+ }
811
+ .perseus-widget-interaction-editor .perseus-widget-interaction-editor-select-element {
812
+ background-color: #eee;
813
+ border: 1px solid #ddd;
814
+ border-top: 0;
815
+ border-radius: 0 0 3px 3px;
816
+ padding: 5px 10px;
817
+ margin: 20px -11px -11px -11px;
818
+ }
819
+ .perseus-widget-interaction-editor .colorpicker-circle {
820
+ border-radius: 50%;
821
+ width: 14px;
822
+ height: 14px;
823
+ position: absolute;
824
+ left: 5px;
825
+ top: 5px;
826
+ }
827
+ .perseus-interaction-element {
828
+ border: 1px solid #ddd;
829
+ border-radius: 3px;
830
+ }
831
+ .perseus-interaction-element .perseus-interaction-element-title {
832
+ background-color: #eee;
833
+ border: 1px solid #ddd;
834
+ border-bottom: 0;
835
+ font-size: 1.25em;
836
+ padding: 4px 10px;
837
+ border-radius: 3px 3px 0 0;
838
+ border: 0;
839
+ color: inherit;
840
+ display: block;
841
+ text-decoration: none;
842
+ white-space: nowrap;
843
+ font-size: 1em;
844
+ overflow: hidden;
845
+ }
846
+ .perseus-interaction-element .perseus-interaction-element-title.closed {
847
+ border-radius: 3px;
848
+ }
849
+ .perseus-interaction-element .perseus-interaction-element-title > svg {
850
+ float: left;
851
+ font-size: 14px;
852
+ margin-right: 10px;
853
+ }
854
+ .perseus-interaction-element .perseus-interaction-element-content {
855
+ border-radius: 0 0 3px 3px;
856
+ border-top: 1px solid #ddd;
857
+ padding: 10px;
858
+ }
859
+ .perseus-interaction-element .perseus-interaction-element-content .edit-controls {
860
+ text-align: right;
861
+ margin-top: -30px;
862
+ }
863
+ .perseus-interaction-element .perseus-interaction-element-content .edit-controls > button {
864
+ background: #fff;
865
+ border: 0;
866
+ cursor: pointer;
867
+ padding: 0;
868
+ margin-left: 7px;
869
+ font-size: 18px;
870
+ color: #555;
871
+ }
872
+ .perseus-interaction-element .perseus-interaction-element-content.leave {
873
+ display: none;
874
+ }
875
+ .button-set-separator {
876
+ margin: 10px 0;
877
+ }
878
+ .perseus-widget-editor .unit-radio {
879
+ color: black;
880
+ text-decoration: none;
881
+ }
882
+ .unit-example-not-okay {
883
+ color: red;
884
+ }
885
+ .unit-example-okay {
886
+ color: green;
887
+ }
888
+ .pair-editor input {
889
+ width: 120px;
890
+ }
891
+ .marvel-device.iphone6.silver:after {
892
+ z-index: 1;
893
+ }
894
+ .perseus-diff {
895
+ margin: 0 10px;
896
+ }
897
+ .perseus-diff .diff-header {
898
+ font-size: 18px;
899
+ padding: 10px 0;
900
+ width: 50%;
901
+ display: inline-block;
902
+ }
903
+ .perseus-diff .diff-header.collapsed {
904
+ font-size: 14px;
905
+ padding: 0px;
906
+ }
907
+ .perseus-diff .diff-body {
908
+ border-top: 1px solid #e4e4e4;
909
+ border-bottom: 1px solid #e4e4e4;
910
+ }
911
+ .perseus-diff .diff-row {
912
+ width: 50%;
913
+ white-space: pre-wrap;
914
+ box-sizing: border-box;
915
+ font-size: 14px;
916
+ padding-right: 20px;
917
+ padding-left: 10px;
918
+ overflow: hidden;
919
+ }
920
+ .perseus-diff .diff-row.collapsed {
921
+ color: #888;
922
+ cursor: pointer;
923
+ }
924
+ .perseus-diff .diff-row.collapsed:hover {
925
+ color: #666;
926
+ }
927
+ .perseus-diff .diff-row.collapsed:active {
928
+ color: #444;
929
+ }
930
+ .perseus-diff .diff-row .diff-line {
931
+ margin-bottom: 20px;
932
+ }
933
+ .perseus-diff .before {
934
+ float: left;
935
+ border-left: 1px solid #e4e4e4;
936
+ }
937
+ .perseus-diff .after {
938
+ float: right;
939
+ border-right: 1px solid #e4e4e4;
940
+ border-left: 1px solid #e4e4e4;
941
+ }
942
+ .perseus-diff .inner-value {
943
+ height: 100%;
944
+ padding: 3px;
945
+ }
946
+ .perseus-diff .not-present {
947
+ display: none;
948
+ }
949
+ .perseus-diff .blank-space {
950
+ visibility: hidden;
951
+ }
952
+ .perseus-diff .added {
953
+ background-color: #eeffee;
954
+ }
955
+ .perseus-diff .added.dark {
956
+ background-color: #aaffaa;
957
+ }
958
+ .perseus-diff .removed {
959
+ background-color: #ffeeee;
960
+ }
961
+ .perseus-diff .removed.dark {
962
+ background-color: #ffaaaa;
963
+ }
964
+ .perseus-diff .image {
965
+ display: inline-block;
966
+ margin-left: 20px;
967
+ margin-bottom: 10px;
968
+ }
969
+ .perseus-diff .image,
970
+ .perseus-diff .image > div,
971
+ .perseus-diff .image > img {
972
+ max-height: 300px;
973
+ max-width: 100%;
974
+ }
975
+ .perseus-diff .image-unchanged {
976
+ border: 1px solid #aaaaaa;
977
+ }
978
+ .perseus-diff .image-added {
979
+ border: 2px solid #aaffaa;
980
+ }
981
+ .perseus-diff .image-removed {
982
+ border: 2px solid #ffaaaa;
983
+ }
984
+ .perseus-diff .diff-separator {
985
+ border-bottom: 1px dashed #444;
986
+ margin: 30px 0 10px 0;
987
+ }