@khanacademy/perseus-editor 0.1.0 → 0.1.1

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