Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1
//---- Question
2
//---- Module Activity
3
 
4
.questionbank h2 {
5
    margin-top: 0;
6
}
7
 
8
.questioncategories h3 {
9
    margin-top: 0;
10
}
11
 
12
#chooseqtypebox {
13
    margin-top: 1em;
14
}
15
 
16
#chooseqtype h3 {
17
    margin: 0 0 0.3em;
18
}
19
 
20
#chooseqtype .instruction {
21
    display: none;
22
}
23
 
24
#chooseqtype .fakeqtypes {
25
    border-top: 1px solid $border-color;
26
 
27
    .theme-dark & {
28
        border-color: $dm-border-color;
29
    }
30
}
31
 
32
#chooseqtype .qtypeoption {
33
    margin-bottom: 0.5em;
34
}
35
 
36
#chooseqtype label {
37
    display: block;
38
}
39
 
40
#chooseqtype .qtypename img {
41
    padding: 0 0.3em;
42
}
43
 
44
#chooseqtype .qtypename {
45
    display: inline-table;
46
    width: 16em;
47
}
48
 
49
#chooseqtype .qtypesummary {
50
    display: block;
51
    margin: 0 2em;
52
}
53
 
54
#chooseqtype .submitbuttons {
55
    margin: 0.7em 0;
56
    text-align: center;
57
}
58
 
59
#qtypechoicecontainer {
60
    display: none;
61
}
62
 
63
#qtypechoicecontainer_c.yui-panel-container.shadow .underlay {
64
    background: none;
65
}
66
 
67
#qtypechoicecontainer.yui-panel .hd {
68
    color: #333;
69
    letter-spacing: 1px;
70
    text-shadow: 1px 1px 1px #fff;
71
 
72
    @include border-top-radius(10px);
73
    border: 1px solid #ccc;
74
    border-bottom: 1px solid #bbb;
75
 
76
    @include gradient-y(#fff, #ccc);
77
}
78
 
79
#qtypechoicecontainer {
80
    font-size: 12px;
81
    color: #333;
82
    background: #f2f2f2;
83
 
84
    @include border-radius(10px);
85
    border: 1px solid #ccc;
86
    border-top: 0 none;
87
 
88
    @include box-shadow(5px 5px 20px 0 #666);
89
}
90
 
91
#qtypechoicecontainer #chooseqtype {
92
    width: 40em;
93
}
94
 
95
#chooseqtypehead h3 {
96
    margin: 0;
97
    font-weight: normal;
98
}
99
 
100
#chooseqtype .qtypes {
101
    position: relative;
102
    border-bottom: 1px solid $border-color;
103
    padding: 0.24em 0;
104
 
105
    .theme-dark & {
106
        border-color: $dm-border-color;
107
    }
108
}
109
 
110
#chooseqtype .alloptions {
111
    overflow-x: hidden;
112
    overflow-y: auto;
113
    max-height: calc(100vh - 15em);
114
    width: 60%;
115
}
116
 
117
#chooseqtype .qtypeoption {
118
    margin-bottom: 0;
119
    padding: 0.3em 0.3em 0.3em 1.6em;
120
}
121
 
122
#chooseqtype .qtypeoption img {
123
    vertical-align: text-bottom;
124
    padding-left: 1em;
125
    padding-right: 0.5em;
126
}
127
 
128
#chooseqtype .selected {
129
    background-color: #fff;
130
 
131
    @include box-shadow(0 0 10px 0 #ccc);
132
 
133
    .theme-dark & {
134
        filter: invert(1);
135
    }
136
}
137
 
138
#chooseqtype .instruction,
139
#chooseqtype .qtypesummary {
140
    display: none;
141
    position: absolute;
142
    top: 0;
143
    right: 0;
144
    bottom: 0;
145
    left: 60%;
146
    margin: 0;
147
    overflow-x: hidden;
148
    overflow-y: auto;
149
    padding: 1.5em 1.6em;
150
    background-color: $white;
151
 
152
    .theme-dark & {
153
        border-color: $dm-gray-100;
154
    }
155
}
156
 
157
#chooseqtype .instruction,
158
#chooseqtype .selected .qtypesummary {
159
    display: block;
160
}
161
 
162
#categoryquestions {
163
    margin: 0;
164
 
165
    td,
166
    th {
167
        padding: 0 0.2em;
168
        color: $body-color;
169
 
170
        .theme-dark & {
171
            color: $dm-body-color;
172
        }
173
 
174
        div {
175
            align-items: center;
176
            flex-wrap: wrap;
177
        }
178
    }
179
 
180
    th {
181
        text-align: left;
182
        font-weight: normal;
183
    }
184
 
185
    .checkbox {
186
        padding-left: 5px;
187
    }
188
 
189
    .checkbox input[type="checkbox"] {
190
        margin-left: 0;
191
        float: none;
192
    }
193
 
194
    .iconcol {
195
        width: 60px;
196
        padding: 3px;
197
        box-sizing: content-box;
198
 
199
        .icon {
200
            padding: 0;
201
            margin: 0;
202
            width: 24px;
203
            height: 24px;
204
        }
205
    }
206
 
207
    label {
208
        margin: 0;
209
        display: block;
210
    }
211
 
212
    .header {
213
        text-align: left;
214
    }
215
}
216
 
217
 
218
.questionbank .singleselect {
219
    margin: 0;
220
}
221
 
222
/* Question editing form */
223
#combinedfeedbackhdr div.fhtmleditor {
224
    padding: 0;
225
}
226
 
227
#combinedfeedbackhdr div.fcheckbox {
228
    margin-bottom: 1em;
229
}
230
 
231
#multitriesheader div.fitem_feditor {
232
    margin-top: 1em;
233
}
234
 
235
#multitriesheader div.fitem_fgroup {
236
    margin-bottom: 1em;
237
}
238
 
239
#multitriesheader div.fitem_fgroup fieldset.felement label {
240
    margin-left: 0.3em;
241
    margin-right: 0.3em;
242
}
243
 
244
body.path-question-type {
245
 
246
    /* Hacks to display the labels within a form group. */
247
    .form-group .sr-only:not(legend) {
248
        position: static;
249
        width: auto;
250
        height: auto;
251
        padding: 0;
252
        margin: 0 0.5rem 0 0;
253
        overflow: visible;
254
        clip: auto;
255
        clip-path: none;
256
        border: 0;
257
    }
258
}
259
 
260
//TODO dodać tutaj pozostałe style ze spodu
261
.que .info .questionflag.editable {
262
    cursor: pointer;
263
}
264
 
265
//remove icon - there is a bug, different icons on user view and different on admin view
266
.que .info .editquestion img,
267
.que .info .questionflag img,
268
.que .info .questionflag input {
269
    display: none;
270
}
271
 
272
.que {
273
 
274
    .r0,
275
    .r1 {
276
        border-radius: $btn-border-radius;
277
        display: flex;
278
        align-items: center;
279
    }
280
}
281
 
282
.que.multichoice .answer div.r0 .icon.fa-check,
283
.que.multichoice .answer div.r1 .icon.fa-check,
284
.que.multichoice .answer div.r0 .icon.fa-remove,
285
.que.multichoice .answer div.r1 .icon.fa-remove {
286
    text-indent: 0;
287
}
288
 
289
.que.multichoice .answer div.r0,
290
.que.multichoice .answer div.r1 {
291
    padding: 10px;
292
    border-radius: $btn-border-radius;
293
 
294
    align-items: center;
295
 
296
    .icon {
297
        margin-right: 10px;
298
    }
299
 
300
    input {
301
        margin: 6px 20px 6px 10px;
302
    }
303
}
304
 
305
.que.multichoice .answer .answernumber {
306
    min-width: 1.5em;
307
    display: inline-flex;
308
    align-items: center;
309
 
310
    font-size: .8rem;
311
}
312
 
313
.formulation input[type="text"],
314
.formulation select {
315
    +.icon {
316
        margin-left: .35rem;
317
    }
318
}
319
 
320
.que.multianswer .formulation .yui3-widget-positioned {
321
    box-sizing: content-box;
322
 
323
    .feedbackspan {
324
        width: inherit;
325
        max-width: inherit;
326
    }
327
}
328
 
329
.path-mod-quiz input[size] {
330
    margin: 0;
331
    min-width: 70px;
332
    width: auto;
333
    max-width: 100%;
334
}
335
 
336
.que .ablock {
337
    margin: 0 0 $page-padding-global 0;
338
    overflow: inherit;
339
}
340
 
341
.que .ablock .prompt {
342
    margin-bottom: 10px;
343
}
344
 
345
.que .im-controls {
346
    margin-top: 0.5em;
347
    text-align: left;
348
}
349
 
350
.que .generalfeedback,
351
.que .numpartscorrect .que .rightanswer,
352
.que .im-feedback,
353
.que p {
354
    margin: .25em 0;
355
    color: $body-color;
356
 
357
    .theme-dark & {
358
        color: $dm-body-color;
359
    }
360
}
361
 
362
.rightanswer {
363
    display: inline-flex;
364
    flex-wrap: wrap;
365
    align-items: center;
366
 
367
    p {
368
        font-weight: $font-weight-bold;
369
    }
370
}
371
 
372
.que .correctness {
373
    &.correct {
374
        background-color: $success;
375
    }
376
 
377
    &.partiallycorrect {
378
        background-color: $warning;
379
    }
380
 
381
    &.notanswered,
382
    &.incorrect {
383
        background-color: $danger;
384
    }
385
}
386
 
387
.que .validationerror {
388
    color: map-get($theme-colors, 'danger');
389
}
390
 
391
// copied from .formFieldState in mixin.less
392
// and made more specific
393
 
394
.que .grading,
395
.que .comment,
396
.que .commentlink {
397
    margin-top: 0.5rem;
398
}
399
 
400
.que .history {
401
    border: none !important;
402
    margin: $page-padding-global 0;
403
    padding: 0 !important;
404
}
405
 
406
.que .history h3 {
407
    font-size: 1rem;
408
}
409
 
410
.que .history table {
411
    width: 100%;
412
    margin: 0;
413
}
414
 
415
.que .history .current {
416
    font-weight: $font-weight-bold;
417
}
418
 
419
.que .questioncorrectnessicon {
420
    vertical-align: text-bottom;
421
}
422
 
423
body.jsenabled .questionflag input[type=checkbox] {
424
    display: none;
425
}
426
 
427
.que .questionflagimage {
428
    padding-right: 3px;
429
    height: 16px;
430
    width: 16px;
431
}
432
 
433
.importerror {
434
    margin-top: 10px;
435
    border-bottom: 1px solid $border-color;
436
 
437
    .theme-dark & {
438
        border-color: $dm-border-color;
439
    }
440
}
441
 
442
.mform .que.comment .fitemtitle {
443
    width: 20%;
444
}
445
 
446
#page-question-preview #techinfo {
447
    margin: 1em 0;
448
}
449
 
450
 
451
//----      imported from quiz.css
452
//----
453
//-----     UI for Question Edit Questions - Table
454
// ----
455
 
456
#page-mod-quiz-edit {
457
    div.questionbankwindow div.header {
458
        margin: 0;
459
    }
460
 
461
    div.questionbankwindow.block {
462
        padding: 0;
463
    }
464
}
465
 
466
#page-mod-quiz-edit .add-menu-outer {
467
    position: relative;
468
    top: 0;
469
    right: 0;
470
}
471
 
472
#page-mod-quiz-edit .section-heading {
473
    margin: 1rem 0;
474
    height: auto;
475
 
476
    .editing_section {
477
        display: flex;
478
        align-items: center;
479
        justify-content: center;
480
        width: 40px;
481
        height: 40px;
482
 
483
        .icon {
484
            padding: 10px;
485
            background-color: $gray-100;
486
            border-radius: $btn-border-radius-lg;
487
        }
488
    }
489
}
490
 
491
.editing_section {
492
    .icon {
493
        padding: 10px;
494
        background-color: $gray-100;
495
        border-radius: $btn-border-radius-lg;
496
 
497
        .theme-dark & {
498
            filter: invert(1);
499
        }
500
    }
501
}
502
 
503
#page-mod-quiz-edit .section-heading .instancesectioncontainer {
504
    display: inline-flex;
505
}
506
 
507
#page-mod-quiz-edit .section-heading .instancesectioncontainer h3 {
508
    display: flex;
509
    color: inherit;
510
}
511
 
512
#page-mod-quiz-edit .last-add-menu {
513
    margin: 20px 10px 0;
514
    height: auto;
515
 
516
    display: flex;
517
    justify-content: flex-end;
518
}
519
 
520
#page-mod-quiz-edit ul.slots li.section .content {
521
    background-color: transparent;
522
}
523
 
524
#page-mod-quiz-edit li.activity>div,
525
#page-mod-quiz-edit li.pagenumber {
526
    margin-bottom: 0;
527
}
528
 
529
#page-mod-quiz-edit ul.slots li.section li.activity {
530
    background-color: transparent;
531
    padding: 1rem;
532
    min-width: 40px;
533
    border-radius: $btn-border-radius;
534
    border: 1px solid $border-color;
535
 
536
    &.page {
537
        h4 {
538
            margin: 0;
539
            font-family: $font-family-base;
540
            font-weight: $font-weight-bold;
541
        }
542
 
543
        .add-menu-outer {
544
            position: absolute;
545
            top: 3px;
546
            right: 3px;
547
 
548
            margin: 0;
549
            padding: 2px;
550
            background-color: $container-bg;
551
            border-radius: $btn-border-radius;
552
 
553
            &:empty {
554
                display: none;
555
            }
556
        }
557
    }
558
}
559
 
560
.theme-dark#page-mod-quiz-edit ul.slots li.section li.activity.pagenumber {
561
    border: none;
562
}
563
 
564
.theme-dark#page-mod-quiz-edit ul.slots li.section li.activity {
565
    border: 1px solid $dm-border-color;
566
 
567
    &.page {
568
        .add-menu-outer {
569
            background-color: $dm-container-bg;
570
        }
571
    }
572
}
573
 
574
#page-mod-quiz-edit {
575
    .section li.activity {
576
        &:before {
577
            display: none;
578
        }
579
    }
580
}
581
 
582
#page-mod-quiz-edit .inplaceeditable {
583
    margin: 0;
584
    padding: 0;
585
    background-color: transparent;
586
}
587
 
588
#page-mod-quiz-edit .inplaceeditable-text {
589
    color: $body-color;
590
}
591
 
592
.theme-dark#page-mod-quiz-edit .inplaceeditable-text {
593
    color: $dm-body-color;
594
}
595
 
596
#page-mod-quiz-edit .inplaceeditable .quickeditlink {
597
    padding: 3px 6px;
598
    background-color: $gray-100;
599
    color: $body-color;
600
 
601
    border-radius: $btn-border-radius;
602
    display: inline-flex;
603
    align-items: center;
604
 
605
    height: 30px;
606
}
607
 
608
.theme-dark#page-mod-quiz-edit .inplaceeditable .quickeditlink {
609
    background-color: $dm-gray-100;
610
    color: $dm-body-color;
611
}
612
 
613
#page-mod-quiz-edit .section {
614
    position: relative;
615
}
616
 
617
#page-mod-quiz-edit .section .activity .editing_move {
618
    position: absolute;
619
    top: 0;
620
    left: 0;
621
    height: 100%;
622
}
623
 
624
#page-mod-quiz-edit.select-multiple#page-mod-quiz-edit ul.slots li.section li.activity .mod-indent-outer,
625
#page-mod-quiz-edit ul.slots li.section li.activity .mod-indent-outer {
626
    display: flex;
627
    flex-wrap: wrap;
628
 
629
    @include media-breakpoint-up(md) {
630
        padding-left: 60px;
631
    }
632
 
633
    @include media-breakpoint-between(xs, sm) {
634
        padding-left: 0;
635
    }
636
}
637
 
638
#page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmark {
639
    font-weight: $font-weight-medium;
640
}
641
 
642
#page-mod-quiz-edit ul.slots li.section li.activity .activityinstance {
643
    margin: 0;
644
    display: flex;
645
    flex-wrap: wrap;
646
    position: relative !important;
647
    top: 0;
648
    left: 0;
649
}
650
 
651
// Questin name and desc
652
#page-mod-quiz-edit #categoryquestions .questionname,
653
#page-mod-quiz-edit ul.slots li.activity div.activityinstance .questionname {
654
    font-size: $font-size-md;
655
    font-weight: $font-weight-bold;
656
    color: $link-color;
657
}
658
 
659
.theme-dark#page-mod-quiz-edit #categoryquestions .questionname,
660
.theme-dark#page-mod-quiz-edit ul.slots li.activity div.activityinstance .questionname {
661
    color: $dm-link-color;
662
}
663
 
664
#page-mod-quiz-edit ul.slots li.activity div.activityinstance .questiontext {
665
    display: block;
666
    padding-left: 50px;
667
    margin-top: 0;
668
    margin-bottom: 0;
669
 
670
    max-width: 600px;
671
 
672
    font-size: $font-size-xs;
673
    font-weight: $font-weight-normal;
674
    color: $body-color-secondary;
675
}
676
 
677
.theme-dark#page-mod-quiz-edit ul.slots li.activity div.activityinstance .questiontext {
678
    color: $dm-body-color-secondary;
679
}
680
 
681
#page-mod-quiz-edit ul.section {
682
    padding: 0;
683
}
684
 
685
#page-mod-quiz-edit {
686
    .moodle-core-dragdrop-draghandle {
687
        margin: 0 !important;
688
        padding: 0;
689
    }
690
}
691
 
692
 
693
.page_split_join {
694
    margin-top: 20px;
695
    width: 100%;
696
 
697
    .theme-dark & {
698
        .icon {
699
            filter: invert(1);
700
        }
701
    }
702
}
703
 
704
#page-mod-quiz-edit ul.slots li.section li.activity .page_split_join_wrapper {
705
    display: block;
706
    position: relative;
707
    left: auto;
708
    bottom: auto;
709
 
710
    text-align: center;
711
 
712
    .btn {
713
        width: 300px;
714
 
715
        .img {
716
            margin: 0;
717
        }
718
    }
719
}
720
 
721
.mod_quiz-edit-top-controls {
722
    position: relative;
723
    margin-top: 20px;
724
    padding-bottom: 10px;
725
 
726
    border-bottom: 1px solid $border-color;
727
 
728
    .theme-dark & {
729
        border-color: $dm-border-color;
730
    }
731
 
732
    .numberofquestions {
733
        margin-right: 10px;
734
 
735
        display: inline-flex;
736
        align-items: center;
737
        flex-wrap: wrap;
738
 
739
        font-size: $font-size-md;
740
    }
741
 
742
    .quizopeningstatus {
743
        display: inline-flex;
744
        align-items: center;
745
        flex-wrap: wrap;
746
 
747
        padding: $badge-padding-y $badge-padding-x;
748
        @include font-size($badge-font-size);
749
        font-weight: $badge-font-weight;
750
        vertical-align: baseline;
751
        @include border-radius($badge-border-radius);
752
 
753
        background-color: $blue-100;
754
        color: $blue-600;
755
 
756
        .theme-dark & {
757
            background-color: #525ea9;
758
            color: $blue-100;
759
        }
760
    }
761
}
762
 
763
.mod_quiz-edit-top-controls {
764
    .statusbar {
765
        .theme-dark & {
766
            color: $dm-body-color-light;
767
        }
768
    }
769
}
770
 
771
 
772
.instanceshufflequestions [type="checkbox"] {
773
    margin: 10px;
774
}
775
 
776
#page-mod-quiz-edit .section-heading .instanceshufflequestions {
777
    margin: 0;
778
    display: inline-flex;
779
    align-items: center;
780
 
781
    label {
782
        margin: 0;
783
    }
784
}
785
 
786
.path-mod-quiz .mod-quiz-edit-content {
787
    margin-bottom: 0 !important;
788
}
789
 
790
// End. Questin name and desc
791
 
792
#page-mod-quiz-edit .slotnumber {
793
    margin: 0 10px 0 0;
794
    font-weight: $font-weight-bold;
795
    font-size: $font-size-xs;
796
 
797
    min-width: 30px;
798
    height: 30px;
799
    line-height: 30px;
800
    color: $gray-800;
801
    border-radius: $btn-border-radius-lg;
802
}
803
 
804
.theme-dark#page-mod-quiz-edit .slotnumber {
805
    filter: invert(1);
806
}
807
 
808
#page-mod-quiz-edit div.editq div.question div.content {
809
    background-color: $body-bg;
810
    border: 1px solid $border-color;
811
 
812
    @include border-radius(2px);
813
    overflow: hidden;
814
}
815
 
816
.theme-dark {
817
    #page-mod-quiz-edit div.editq div.question div.content {
818
        filter: invert(1);
819
    }
820
}
821
 
822
#page-mod-quiz-edit ul.slots .activityinstance span.instancename .icon {
823
    margin: 0 10px;
824
    opacity: 1;
825
}
826
 
827
#page-mod-quiz-edit ul.slots .activityinstance .rui-icon {
828
    padding: 5px;
829
    width: 20px;
830
    height: 20px;
831
    margin: 0 10px;
832
    display: inline-flex;
833
    align-items: center;
834
    justify-content: center;
835
    background-color: $gray-100;
836
    border-radius: $btn-border-radius-lg;
837
}
838
 
839
.theme-dark {
840
    #page-mod-quiz-edit ul.slots .activityinstance .rui-icon {
841
        filter: invert(1);
842
    }
843
}
844
 
845
 
846
#page-mod-quiz-edit ul.slots .activityinstance {
847
    >a {
848
        display: flex;
849
        max-width: 100%;
850
        align-items: center;
851
        text-indent: 0;
852
        padding-left: 0;
853
    }
854
 
855
    img.activityicon {
856
        margin: 0 0 10px 0;
857
        padding: 5px;
858
    }
859
}
860
 
861
#page-mod-quiz-edit .activity {
862
    img.activityicon {
863
        vertical-align: text-top;
864
    }
865
}
866
 
867
#page-mod-quiz-edit .box.generalbox.questionbank {
868
    padding: 0.5em;
869
}
870
 
871
#page-mod-quiz-edit .questionbank .categorypagingbarcontainer,
872
#page-mod-quiz-edit .questionbank .categoryquestionscontainer,
873
#page-mod-quiz-edit .questionbank .choosecategory {
874
    padding: 0;
875
}
876
 
877
#page-mod-quiz-edit .questionbank .choosecategory select {
878
    width: 100%;
879
}
880
 
881
#page-mod-quiz-edit div.questionbank .categoryquestionscontainer {
882
    background: transparent;
883
}
884
 
885
#page-mod-quiz-edit #categoryquestions>thead {
886
    background: $container-bg;
887
}
888
 
889
.theme-dark {
890
    #page-mod-quiz-edit #categoryquestions>thead {
891
        background: $dm-container-bg;
892
    }
893
}
894
 
895
#page-mod-quiz-edit #categoryquestions>tbody>tr:nth-of-type(even) {
896
    background: $gray-100;
897
}
898
 
899
.theme-dark {
900
    #page-mod-quiz-edit #categoryquestions>tbody>tr:nth-of-type(even) {
901
        background-color: $dm-gray-100;
902
    }
903
}
904
 
905
#page-mod-quiz-edit .questionbankwindow div.header {
906
    color: $body-color-secondary;
907
    text-shadow: none;
908
 
909
    @include border-top-radius(4px);
910
    margin: 0 -10px 0 -10px;
911
    padding: 2px 10px 2px 10px;
912
    background: transparent;
913
    /* Old browsers */
914
}
915
 
916
.theme-dark {
917
    #page-mod-quiz-edit .questionbankwindow div.header {
918
        color: $dm-body-color-secondary;
919
    }
920
}
921
 
922
#page-mod-quiz-edit .questionbankwindow div.header a:link,
923
#page-mod-quiz-edit .questionbankwindow div.header a:visited {
924
    color: $link-color;
925
}
926
 
927
.theme-dark#page-mod-quiz-edit .questionbankwindow div.header a:link,
928
.theme-dark#page-mod-quiz-edit .questionbankwindow div.header a:visited {
929
    color: $dm-link-color;
930
}
931
 
932
#page-mod-quiz-edit .questionbankwindow div.header a:hover {
933
    color: $link-hover-color;
934
}
935
 
936
.theme-dark#page-mod-quiz-edit .questionbankwindow div.header a:hover {
937
    color: $dm-link-hover-color;
938
}
939
 
940
#page-mod-quiz-edit .createnewquestion {
941
    padding: 0.3em 0;
942
 
943
    div,
944
    input {
945
        margin: 0;
946
    }
947
}
948
 
949
#page-mod-quiz-edit .questionbankwindow div.header .title {
950
    color: $body-color;
951
}
952
 
953
.theme-dark {
954
    #page-mod-quiz-edit .questionbankwindow div.header .title {
955
        color: $dm-body-color;
956
    }
957
}
958
 
959
#page-mod-quiz-edit div.container div.generalbox {
960
    background-color: transparent;
961
    padding: 1.5em;
962
}
963
 
964
#page-mod-quiz-edit .categoryinfo {
965
    background-color: transparent;
966
    border-bottom: none;
967
}
968
 
969
#page-mod-quiz-edit .createnewquestion .singlebutton input {
970
    margin-bottom: 0;
971
}
972
 
973
#page-mod-quiz-edit div.questionbank .categorysortopotionscontainer,
974
#page-mod-quiz-edit div.questionbank .categoryselectallcontainer {
975
    padding: 0 0 1.5em 0;
976
}
977
 
978
#page-mod-quiz-edit div.questionbank .categorypagingbarcontainer {
979
    background-color: transparent;
980
    margin: 0;
981
    border-top: 0;
982
    border-bottom: 0;
983
 
984
    .paging {
985
        padding: 0 0.3em;
986
    }
987
}
988
 
989
#page-mod-quiz-edit div.question div.content div.questioncontrols {
990
    background-color: $body-bg;
991
}
992
 
993
#page-mod-quiz-edit div.question div.content div.points {
994
    margin-top: -0.5em;
995
    padding-bottom: 0;
996
    border: none;
997
    background-color: $body-bg;
998
    position: static;
999
    width: 12.1em;
1000
    float: right;
1001
    margin-right: 60px;
1002
}
1003
 
1004
.theme-dark {
1005
 
1006
    #page-mod-quiz-edit div.quizpage .pagecontent .pagestatus,
1007
    #page-mod-quiz-edit div.question div.content div.questioncontrols,
1008
    #page-mod-quiz-edit div.question div.content div.points {
1009
        color: $dm-body-bg;
1010
    }
1011
}
1012
 
1013
#page-mod-quiz-edit div.question div.content div.points br {
1014
    display: none;
1015
}
1016
 
1017
#page-mod-quiz-edit div.question div.content div.points label {
1018
    display: inline-block;
1019
}
1020
 
1021
#page-mod-quiz-edit div.quizpage .pagecontent .pagestatus {
1022
    background-color: $body-bg;
1023
}
1024
 
1025
#page-mod-quiz-edit .quizpagedelete,
1026
#page-mod-quiz-edit .quizpagedelete img {
1027
    background-color: transparent;
1028
}
1029
 
1030
#page-mod-quiz-edit div.quizpage .pagecontent {
1031
    border: 1px solid $border-color;
1032
 
1033
    @include border-radius(2px);
1034
    overflow: hidden;
1035
}
1036
 
1037
.theme-dark {
1038
    #page-mod-quiz-edit div.quizpage .pagecontent {
1039
        border-color: $dm-border-color;
1040
    }
1041
}
1042
 
1043
#page-mod-quiz-edit div.questionbank .categoryinfo {
1044
    padding: 0.3em 0;
1045
}
1046
 
1047
#page-mod-quiz-edit div.questionbank .modulespecificbuttonscontainer {
1048
    padding: 0;
1049
 
1050
    strong {
1051
        display: block;
1052
    }
1053
 
1054
    hr,
1055
    br {
1056
        display: none;
1057
    }
1058
 
1059
    strong {
1060
        margin-left: -0.3em;
1061
    }
1062
 
1063
    strong label {
1064
        margin-left: 0.3em;
1065
    }
1066
 
1067
    input {
1068
        margin-left: 0;
1069
    }
1070
 
1071
    input+input {
1072
        margin-left: 5px;
1073
    }
1074
}
1075
 
1076
#page-mod-quiz-edit ul.slots .activityinstance>a {
1077
    display: inline-flex;
1078
    align-items: flex-start;
1079
 
1080
    &:hover {
1081
        text-decoration: none;
1082
    }
1083
}
1084
 
1085
#page-mod-quiz-edit.select-multiple input.select-multiple-checkbox[type="checkbox"] {
1086
    margin: 20px;
1087
    display: flex;
1088
    align-items: center;
1089
    justify-content: center;
1090
}
1091
 
1092
#page-mod-quiz-edit ul.slots .activityinstance span.instancename {
1093
    overflow: auto;
1094
    text-overflow: initial;
1095
    display: block;
1096
    height: auto;
1097
}
1098
 
1099
#page-mod-quiz-edit .section .activity .actions {
1100
    background-color: transparent;
1101
    padding: 0;
1102
 
1103
    width: max-content;
1104
 
1105
    display: inline-flex;
1106
    justify-content: flex-end;
1107
    align-items: center;
1108
    flex-wrap: wrap;
1109
 
1110
    .icon {
1111
        @extend .btn-special-icon;
1112
 
1113
        &.fa-trash {
1114
            background-color: $red-100;
1115
            color: $red-800;
1116
        }
1117
    }
1118
 
1119
    &:hover {
1120
        text-decoration: none;
1121
    }
1122
}
1123
 
1124
#page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer {
1125
    margin-right: 0 !important;
1126
    background-color: transparent;
1127
}
1128
 
1129
#page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmark.decimalplaces_2 {
1130
    margin-right: .35rem;
1131
}
1132
 
1133
.questionbankwindow .module {
1134
    width: auto;
1135
}
1136
 
1137
.questionbankwindow .form-autocomplete-selection {
1138
    margin-left: 0;
1139
    max-width: initial;
1140
}
1141
 
1142
.path-mod-quiz .statedetails {
1143
    display: block;
1144
    font-size: $font-size-xs;
1145
    opacity: 0.7;
1146
}
1147
 
1148
a#hidebankcmd {
1149
    color: $link-color;
1150
 
1151
    .theme-dark & {
1152
        color: $dm-link-color;
1153
    }
1154
}
1155
 
1156
// override question plugins
1157
 
1158
// qtype_shortanswer
1159
.que.numerical .answer,
1160
.que.shortanswer .answer {
1161
    width: 100%;
1162
    padding: 0;
1163
    margin-top: .35rem;
1164
 
1165
    display: inline-flex;
1166
    align-items: center;
1167
}
1168
 
1169
.que label {
1170
    margin: 0;
1171
    font-size: $font-size-sm;
1172
 
1173
    @include media-breakpoint-up(md) {
1174
        display: inline-flex;
1175
        flex-wrap: wrap;
1176
    }
1177
 
1178
    @include media-breakpoint-between(xs, sm) {
1179
        display: block;
1180
    }
1181
}
1182
 
1183
body.path-question-type .mform fieldset.hidden {
1184
    padding: 0;
1185
    margin: 0.7em 0 0;
1186
}
1187
 
1188
// Fix for accurate positioning of ddwtos drag and drop question types.
1189
.tag-condition-container {
1190
    position: relative;
1191
}
1192
 
1193
 
1194
.questioncategories {
1195
    padding: 1rem 1.5rem;
1196
    margin: 2rem 0 0;
1197
 
1198
    border: 1px solid $border-color;
1199
    border-radius: $btn-border-radius;
1200
 
1201
    position: relative;
1202
 
1203
    .theme-dark & {
1204
        border-color: $dm-border-color;
1205
    }
1206
 
1207
    .rui-title-container {
1208
        margin-bottom: 0;
1209
        width: auto;
1210
 
1211
        font-size: $font-size-sm;
1212
        font-weight: $font-weight-medium;
1213
        color: $body-color-light;
1214
 
1215
        .theme-dark & {
1216
            color: $dm-body-color-light;
1217
        }
1218
    }
1219
 
1220
    a {
1221
        .icon {
1222
            @extend .btn-special-icon;
1223
        }
1224
 
1225
        &:hover {
1226
            text-decoration: none;
1227
 
1228
            .icon {
1229
                @extend .btn-special-icon--hover;
1230
            }
1231
        }
1232
 
1233
        &:after {
1234
            display: none;
1235
        }
1236
    }
1237
 
1238
    .rui-main-content-title {
1239
        width: 100% !important;
1240
 
1241
        padding: 0 0 1rem 0;
1242
        margin: 0 0 1rem !important;
1243
 
1244
        font-family: $font-family-base;
1245
        font-size: $font-size-md;
1246
        color: $body-color-secondary;
1247
        border-bottom: 1px solid $border-color;
1248
 
1249
        .theme-dark & {
1250
            color: $dm-body-color-secondary;
1251
            border-color: $dm-border-color;
1252
        }
1253
 
1254
    }
1255
 
1256
    ul {
1257
 
1258
        li {
1259
            padding: 10px 0;
1260
            margin: 15px 0;
1261
            position: relative;
1262
 
1263
            &:last-child {
1264
                padding-bottom: 0;
1265
            }
1266
 
1267
            b,
1268
            .text_to_html {
1269
                margin-left: 0;
1270
            }
1271
 
1272
            .text_to_html {
1273
                margin-top: .35rem;
1274
                margin-bottom: .5rem;
1275
                color: $body-color-secondary;
1276
 
1277
                .theme-dark & {
1278
                    color: $dm-body-color-secondary;
1279
                }
1280
            }
1281
 
1282
        }
1283
    }
1284
}
1285
 
1286
.questionbankwindow {
1287
    .createnewquestion {
1288
        margin: 1rem 0 2rem;
1289
    }
1290
 
1291
    .choosecategory {
1292
        margin-bottom: 1rem;
1293
    }
1294
 
1295
    #displayoptions {
1296
        padding: 1rem 2rem;
1297
 
1298
        margin-top: 1rem;
1299
        margin-bottom: 1rem;
1300
 
1301
        font-size: $font-size-md !important;
1302
 
1303
        border-radius: $btn-border-radius;
1304
        border: 2px solid $primary-color-300;
1305
 
1306
        .tag-condition-container {
1307
            margin: 1rem 0;
1308
            padding: 1rem 0;
1309
 
1310
            border-top: 1px solid $border-color;
1311
            border-bottom: 1px solid $border-color;
1312
 
1313
            .theme-dark & {
1314
                border-color: $dm-border-color;
1315
            }
1316
 
1317
            .form-group {
1318
                margin: 0;
1319
            }
1320
        }
1321
    }
1322
}
1323
 
1324
@include media-breakpoint-up(md) {
1325
    #categoryquestions td.editmenu .action-menu {
1326
        position: absolute;
1327
        margin: -13px 0 0;
1328
    }
1329
}
1330
 
1331
.question_table {
1332
    overflow: auto;
1333
}
1334
 
1335
table#categoryquestions {
1336
    width: max-content;
1337
 
1338
    td.modifiername,
1339
    td.creatorname {
1340
        .date {
1341
            display: block;
1342
            margin-top: .35rem;
1343
            font-size: $font-size-xs;
1344
            color: $body-color-secondary;
1345
 
1346
            .theme-dark & {
1347
                color: $dm-body-color-secondary;
1348
            }
1349
        }
1350
    }
1351
 
1352
    th,
1353
    td {
1354
        padding: .75rem !important;
1355
    }
1356
 
1357
    th {
1358
        color: $body-color;
1359
 
1360
        .theme-dark & {
1361
            color: $dm-body-color;
1362
        }
1363
    }
1364
 
1365
    .editmenu {
1366
        width: 100px;
1367
    }
1368
 
1369
    .iconcol .icon {
1370
        width: 18px;
1371
        height: 18px;
1372
 
1373
        padding: 6px;
1374
        border-radius: $btn-border-radius;
1375
    }
1376
 
1377
    .addtoquizaction .icon {
1378
        background-color: $gray-300;
1379
 
1380
        .theme-dark & {
1381
            background-color: $dm-gray-300;
1382
        }
1383
    }
1384
}
1385
 
1386
#categoryquestions .questiontext {
1387
    max-width: 500px;
1388
 
1389
    //reset default sytles for clarity
1390
    h1,
1391
    h2,
1392
    h3,
1393
    h4,
1394
    h5,
1395
    h6,
1396
    p,
1397
    strong,
1398
    span,
1399
    b,
1400
    em {
1401
        max-width: 600px;
1402
        display: block !important;
1403
 
1404
        font-size: $font-size-md !important;
1405
        font-weight: $font-weight-normal !important;
1406
        text-align: left !important;
1407
    }
1408
 
1409
    img {
1410
        margin: 10px 0 !important;
1411
        float: none !important;
1412
        max-width: 100% !important;
1413
        height: auto !important;
1414
    }
1415
 
1416
}
1417
 
1418
#categoryquestions .checkbox {
1419
    width: 40px;
1420
}
1421
 
1422
#categoryquestions .header {
1423
    font-weight: $font-weight-medium;
1424
    color: $body-color-secondary;
1425
 
1426
    .theme-dark & {
1427
        background-color: transparent;
1428
        color: $dm-body-color-secondary;
1429
    }
1430
 
1431
    &:hover {
1432
        background-color: $gray-100;
1433
 
1434
        .theme-dark & {
1435
            background-color: $dm-gray-100;
1436
        }
1437
    }
1438
}
1439
 
1440
.qbank_columnsortorder-action-handle.move {
1441
    margin-left: -31px;
1442
}
1443
 
1444
#categoryquestions .qtype {
1445
    width: 60px;
1446
}
1447
 
1448
#categoryquestions label {
1449
    width: max-content;
1450
    max-width: 300px;
1451
    color: $body-color;
1452
 
1453
    .theme-dark & {
1454
        color: $dm-body-color;
1455
    }
1456
}
1457
 
1458
 
1459
// Modal
1460
.jschooser .choosercontainer #chooseform .alloptions .option .typename {
1461
    width: auto;
1462
    max-width: 150px;
1463
}
1464
 
1465
.choosercontainer #chooseform .submitbuttons {
1466
    padding-bottom: 0;
1467
}
1468
 
1469
.choosercontainer #chooseform .moduletypetitle,
1470
.choosercontainer #chooseform .option,
1471
.choosercontainer #chooseform .nonoption {
1472
    padding: 0;
1473
}
1474
 
1475
.choosercontainer #chooseform .option .icon {
1476
    padding: .25rem;
1477
    background-color: $gray-100;
1478
    border-radius: $btn-border-radius;
1479
 
1480
    .theme-dark & {
1481
        filter: invert(1);
1482
    }
1483
}
1484
 
1485
.choosercontainer #chooseform .moduletypetitle {
1486
    padding-top: 0.85rem;
1487
    font-size: $font-size-md;
1488
}
1489
 
1490
#page-mod-quiz-report .toggleincludeauto {
1491
    margin: 2rem 0;
1492
    text-align: left;
1493
}
1494
 
1495
#techinfo_inner {
1496
    background-color: $gray-100;
1497
    padding: 1rem;
1498
 
1499
    border-radius: $btn-border-radius;
1500
 
1501
    p {
1502
        margin: .15rem 0;
1503
    }
1504
 
1505
    .theme-dark & {
1506
        background-color: $dm-gray-100;
1507
    }
1508
}
1509
 
1510
 
1511
// Question Pop-up tmpl
1512
#previewcontrols {
1513
    text-align: right;
1514
}
1515
 
1516
// Layout
1517
.rui-quizreviewsummary {
1518
    margin: 0 auto 2rem;
1519
 
1520
    &.rui-info-container {
1521
        display: inline-flex;
1522
        grid-template-columns: 1fr;
1523
    }
1524
 
1525
    .rui-infobox {
1526
        padding: 10px 20px 10px 45px;
1527
        background-position: 13px 33px;
1528
        background-color: transparent;
1529
        background-size: 24px;
1530
        border: 1px solid $border-color;
1531
 
1532
        .theme-dark & {
1533
            filter: invert(1);
1534
            border-color: #6f7071;
1535
        }
1536
 
1537
        &.rui-infobox--feedback {
1538
            width: 100%;
1539
        }
1540
    }
1541
}
1542
 
1543
.rui-quizinfo {
1544
    display: block;
1545
    width: auto;
1546
    padding-left: 20px;
1547
    padding-right: 20px;
1548
 
1549
    border-radius: $btn-border-radius;
1550
    font-size: $font-size-sm;
1551
 
1552
    background-color: $gray-100;
1553
 
1554
    .btn {
1555
        padding: 0.6rem 1rem;
1556
        font-size: .8125rem;
1557
    }
1558
 
1559
    .theme-dark & {
1560
        background-color: $dm-gray-100;
1561
    }
1562
 
1563
    .singlebutton {
1564
        margin: 10px 0;
1565
    }
1566
 
1567
    p {
1568
        margin: .25rem 0;
1569
    }
1570
}
1571
 
1572
.rui-quizinfo+.rui-title-container {
1573
    margin-top: 20px !important;
1574
}
1575
 
1576
#mod_quiz_preflight_form,
1577
.mod_quiz_preflight_popup {
1578
    .col-md-3 {
1579
        display: none;
1580
    }
1581
 
1582
    .col-md-9 {
1583
        padding: 0 !important;
1584
        flex: 0 0 90% !important;
1585
        max-width: 90% !important;
1586
    }
1587
 
1588
    #fitem_id_honestycheckmessage {
1589
        margin-top: 0;
1590
        margin-bottom: 0;
1591
    }
1592
}
1593
 
1594
.mod_quiz_preflight_popup {
1595
    max-width: 100%;
1596
}
1597
 
1598
 
1599
//----
1600
//---- Quiz Layout
1601
//----
1602
 
1603
#page-mod-quiz-review .rui-info-container {
1604
    margin-bottom: 30px;
1605
}
1606
 
1607
.que {
1608
    margin-top: 6rem;
1609
    position: relative;
1610
 
1611
    &:before {
1612
        content: '';
1613
        background-color: $border-color;
1614
        width: 60px;
1615
        height: 1px;
1616
 
1617
        position: absolute;
1618
        top: -3rem;
1619
        left: calc(50% - 30px);
1620
 
1621
        .theme-dark & {
1622
            background-color: $dm-border-color;
1623
        }
1624
    }
1625
 
1626
    &:first-of-type {
1627
        margin-top: 0;
1628
 
1629
        &:before {
1630
            display: none;
1631
        }
1632
    }
1633
}
1634
 
1635
.que .info {
1636
    width: 100%;
1637
 
1638
    padding: 0 0 10px;
1639
    margin-bottom: 1rem;
1640
    border-bottom: 1px solid $border-color;
1641
 
1642
    font-size: $font-size-md;
1643
 
1644
    display: inline-flex;
1645
    align-items: baseline;
1646
    justify-content: space-between;
1647
    flex-wrap: wrap;
1648
 
1649
    .theme-dark & {
1650
        border-color: $dm-border-color;
1651
    }
1652
}
1653
 
1654
.que .grade,
1655
.que .state {
1656
    margin: 0;
1657
    padding: .35rem 1rem;
1658
 
1659
    background-color: $green-100;
1660
    border-radius: $btn-border-radius;
1661
 
1662
    font-size: $font-size-xs;
1663
 
1664
    .theme-dark & {
1665
        background-color: $green-800;
1666
    }
1667
 
1668
    &:empty {
1669
        display: none;
1670
    }
1671
}
1672
 
1673
.rui-question-no {
1674
    color: $body-color;
1675
    font-family: $font-family-base;
1676
    font-size: $font-size-sm;
1677
 
1678
    @include media-breakpoint-between(xs, sm) {
1679
        width: 100%;
1680
        display: block;
1681
        margin-bottom: 1rem;
1682
        margin-right: 0;
1683
        text-align: center;
1684
    }
1685
 
1686
    .theme-dark & {
1687
        color: $dm-body-color;
1688
    }
1689
}
1690
 
1691
.que .grade {
1692
    background-color: $gray-100;
1693
    color: $gray-600;
1694
 
1695
    .theme-dark & {
1696
        background-color: $dm-gray-300;
1697
        color: $dm-gray-800;
1698
    }
1699
}
1700
 
1701
.que .info>div {
1702
    display: flex;
1703
    margin: 0;
1704
    font-weight: $font-weight-medium;
1705
}
1706
 
1707
.que .qtext {
1708
    margin-bottom: .5rem;
1709
}
1710
 
1711
.que .content {
1712
    margin: 0;
1713
}
1714
 
1715
.que .content .feedback {
1716
    max-width: 100%;
1717
    width: max-content;
1718
    margin-top: 0;
1719
    padding: 8px 14px 8px 40px;
1720
 
1721
    background-size: 24px;
1722
 
1723
    background-repeat: no-repeat;
1724
    background-position: 12px 9px;
1725
 
1726
    border-radius: $btn-border-radius;
1727
 
1728
    .generalfeedback,
1729
    .numpartscorrect,
1730
    .rightanswer {
1731
        margin-left: 10px;
1732
        font-size: $font-size-xs;
1733
 
1734
        p {
1735
            font-size: $font-size-base;
1736
        }
1737
    }
1738
}
1739
 
1740
//TODO: Maybe icons with badges will look better then only label
1741
.feedback,
1742
.state {
1743
 
1744
    .notyetanswered &,
1745
    .notanswered &,
1746
    .partiallycorrect & {
1747
        background-color: $yellow-200;
1748
        color: $body-color;
1749
 
1750
        .theme-dark & {
1751
            background-color: #6f644a;
1752
            color: $yellow-100;
1753
        }
1754
    }
1755
 
1756
    .invalidanswer &,
1757
    .incorrect & {
1758
        background-color: $red-100;
1759
        color: $red-800;
1760
 
1761
        .theme-dark & {
1762
            background-color: #4e1c1c;
1763
            color: $red-100;
1764
        }
1765
    }
1766
 
1767
    .correct & {
1768
        background-color: $green-100;
1769
        color: $green-600;
1770
 
1771
        .theme-dark & {
1772
            background-color: #0a6457;
1773
            color: $green-100;
1774
        }
1775
    }
1776
 
1777
    .answersaved & {
1778
        background-color: $primary-color-100;
1779
        color: $primary-color-700;
1780
 
1781
        .theme-dark & {
1782
            background-color: $primary-color-600;
1783
            color: $primary-color-100;
1784
        }
1785
    }
1786
}
1787
 
1788
.content .feedback {
1789
 
1790
    .partiallycorrect &,
1791
    .notanswered & {
1792
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.75 4.75H15.25C17.4591 4.75 19.25 6.54086 19.25 8.75V15.25C19.25 17.4591 17.4591 19.25 15.25 19.25H8.75C6.54086 19.25 4.75 17.4591 4.75 15.25V8.75C4.75 6.54086 6.54086 4.75 8.75 4.75Z' stroke='#{url-friendly-colour($yellow-800)}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.5 10C14.5 10.2761 14.2761 10.5 14 10.5C13.7239 10.5 13.5 10.2761 13.5 10C13.5 9.72386 13.7239 9.5 14 9.5C14.2761 9.5 14.5 9.72386 14.5 10Z' stroke='#{url-friendly-colour($yellow-900)}' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.5 10C10.5 10.2761 10.2761 10.5 10 10.5C9.72386 10.5 9.5 10.2761 9.5 10C9.5 9.72386 9.72386 9.5 10 9.5C10.2761 9.5 10.5 9.72386 10.5 10Z' stroke='#{url-friendly-colour($yellow-900)}' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.75 14.25H15.25' stroke='#{url-friendly-colour($yellow-900)}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
1793
        //border-bottom: 2px solid $yellow-300;
1794
 
1795
        .theme-dark & {
1796
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.75 4.75H15.25C17.4591 4.75 19.25 6.54086 19.25 8.75V15.25C19.25 17.4591 17.4591 19.25 15.25 19.25H8.75C6.54086 19.25 4.75 17.4591 4.75 15.25V8.75C4.75 6.54086 6.54086 4.75 8.75 4.75Z' stroke='#{url-friendly-colour($yellow-100)}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.5 10C14.5 10.2761 14.2761 10.5 14 10.5C13.7239 10.5 13.5 10.2761 13.5 10C13.5 9.72386 13.7239 9.5 14 9.5C14.2761 9.5 14.5 9.72386 14.5 10Z' stroke='#{url-friendly-colour($yellow-100)}' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.5 10C10.5 10.2761 10.2761 10.5 10 10.5C9.72386 10.5 9.5 10.2761 9.5 10C9.5 9.72386 9.72386 9.5 10 9.5C10.2761 9.5 10.5 9.72386 10.5 10Z' stroke='#{url-friendly-colour($yellow-100)}' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.75 14.25H15.25' stroke='#{url-friendly-colour($yellow-100)}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
1797
        }
1798
    }
1799
 
1800
    .incorrect & {
1801
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='#{url-friendly-colour($red-800)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M8.75 4.75H15.25C17.4591 4.75 19.25 6.54086 19.25 8.75V15.25C19.25 17.4591 17.4591 19.25 15.25 19.25H8.75C6.54086 19.25 4.75 17.4591 4.75 15.25V8.75C4.75 6.54086 6.54086 4.75 8.75 4.75Z'/%3E%3Cpath stroke='#{url-friendly-colour($red-800)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M7.75 15.25C7.75 15.25 9 12.75 12 12.75C15 12.75 16.25 15.25 16.25 15.25'/%3E%3Ccircle cx='14' cy='10' r='1' fill='#{url-friendly-colour($red-800)}'/%3E%3Ccircle cx='10' cy='10' r='1' fill='#{url-friendly-colour($red-800)}'/%3E%3C/svg%3E");
1802
        //border-bottom: 2px solid $red-300;
1803
 
1804
        .theme-dark & {
1805
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='#{url-friendly-colour($red-100)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M8.75 4.75H15.25C17.4591 4.75 19.25 6.54086 19.25 8.75V15.25C19.25 17.4591 17.4591 19.25 15.25 19.25H8.75C6.54086 19.25 4.75 17.4591 4.75 15.25V8.75C4.75 6.54086 6.54086 4.75 8.75 4.75Z'/%3E%3Cpath stroke='#{url-friendly-colour($red-100)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M7.75 15.25C7.75 15.25 9 12.75 12 12.75C15 12.75 16.25 15.25 16.25 15.25'/%3E%3Ccircle cx='14' cy='10' r='1' fill='#{url-friendly-colour($red-100)}'/%3E%3Ccircle cx='10' cy='10' r='1' fill='#{url-friendly-colour($red-100)}'/%3E%3C/svg%3E");
1806
        }
1807
    }
1808
 
1809
    .correct & {
1810
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='#{url-friendly-colour($green-800)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M8.75 4.75H15.25C17.4591 4.75 19.25 6.54086 19.25 8.75V15.25C19.25 17.4591 17.4591 19.25 15.25 19.25H8.75C6.54086 19.25 4.75 17.4591 4.75 15.25V8.75C4.75 6.54086 6.54086 4.75 8.75 4.75Z'/%3E%3Cpath stroke='#{url-friendly-colour($green-800)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M7.75 12.75C7.75 12.75 9 15.25 12 15.25C15 15.25 16.25 12.75 16.25 12.75'/%3E%3Ccircle cx='14' cy='10' r='1' fill='#{url-friendly-colour($green-800)}'/%3E%3Ccircle cx='10' cy='10' r='1' fill='#{url-friendly-colour($green-800)}'/%3E%3C/svg%3E");
1811
        //border-bottom: 2px solid $green-300;
1812
 
1813
        .theme-dark & {
1814
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='#{url-friendly-colour($green-100)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M8.75 4.75H15.25C17.4591 4.75 19.25 6.54086 19.25 8.75V15.25C19.25 17.4591 17.4591 19.25 15.25 19.25H8.75C6.54086 19.25 4.75 17.4591 4.75 15.25V8.75C4.75 6.54086 6.54086 4.75 8.75 4.75Z'/%3E%3Cpath stroke='#{url-friendly-colour($green-100)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M7.75 12.75C7.75 12.75 9 15.25 12 15.25C15 15.25 16.25 12.75 16.25 12.75'/%3E%3Ccircle cx='14' cy='10' r='1' fill='#{url-friendly-colour($green-100)}'/%3E%3Ccircle cx='10' cy='10' r='1' fill='#{url-friendly-colour($green-100)}'/%3E%3C/svg%3E");
1815
        }
1816
    }
1817
}
1818
 
1819
.state {
1820
 
1821
    .partiallycorrect &,
1822
    .notyetanswered &,
1823
    .notanswered & {
1824
        background-color: $yellow-100;
1825
    }
1826
 
1827
    .invalidanswer &,
1828
    .incorrect & {
1829
        background-color: $red-100;
1830
 
1831
        .theme-dark & {
1832
            background-color: #d03434;
1833
        }
1834
    }
1835
 
1836
    .correct & {
1837
        background-color: $green-100;
1838
 
1839
        .theme-dark & {
1840
            background-color: #0a6457;
1841
        }
1842
    }
1843
 
1844
    .answersaved & {
1845
        background-color: $primary-color-100;
1846
 
1847
        .theme-dark & {
1848
            background-color: $primary-color-600;
1849
        }
1850
    }
1851
}
1852
 
1853
.que .answer {
1854
    .notanswered {
1855
        background-color: $yellow-100;
1856
        color: 1;
1857
        border-color: $yellow-300;
1858
 
1859
        .theme-dark & {
1860
            background-color: #2b2619;
1861
            color: #FDF6EA !important;
1862
            border-color: #6f644a;
1863
        }
1864
    }
1865
 
1866
    .incorrect {
1867
        background-color: $red-100;
1868
        color: $red-700;
1869
        border-color: $red-300;
1870
 
1871
        .theme-dark & {
1872
            background-color: #472424;
1873
            color: #ffcfcf !important;
1874
            border-color: #d03434;
1875
        }
1876
    }
1877
 
1878
    .partiallycorrect {
1879
        background-color: $yellow-100;
1880
        color: $yellow-600;
1881
        border-color: $yellow-300;
1882
 
1883
        .theme-dark & {
1884
            background-color: #86702e;
1885
            color: $yellow-100;
1886
        }
1887
    }
1888
 
1889
    .correct {
1890
        background-color: $green-100;
1891
        color: $green-600;
1892
        border-color: $green-300;
1893
 
1894
        .theme-dark & {
1895
            background-color: #0a6457;
1896
            color: $green-100;
1897
        }
1898
    }
1899
}
1900
 
1901
.que .specificfeedback {
1902
    margin: 0;
1903
    padding: 0 10px;
1904
 
1905
    border-radius: $btn-border-radius;
1906
 
1907
    background-color: transparent;
1908
 
1909
    font-size: $font-size-md;
1910
    font-weight: $font-weight-medium;
1911
 
1912
    p {
1913
        margin: 0;
1914
    }
1915
}
1916
 
1917
.que .feedback {
1918
    @include media-breakpoint-between(xs, sm) {
1919
        iframe {
1920
            max-width: 100%;
1921
            height: auto;
1922
        }
1923
    }
1924
}
1925
 
1926
.que.multichoice .answer .specificfeedback {
1927
    margin: 3px 0;
1928
    padding: 0;
1929
 
1930
    background-color: transparent;
1931
}
1932
 
1933
.incorrect:after,
1934
.notanswered:after {
1935
    background-color: $gray-100;
1936
    background-image: url([[pix:theme|monocolor/icon-message-square]]);
1937
    background-size: 20px;
1938
 
1939
    border-radius: $btn-border-radius;
1940
 
1941
    font-size: 30px;
1942
    color: $red-800;
1943
 
1944
    width: 60px;
1945
    height: 60px;
1946
 
1947
    position: absolute;
1948
    top: 60px;
1949
    left: -60px;
1950
}
1951
 
1952
.rui-submitbtns {
1953
    margin-top: 1rem !important;
1954
    margin-bottom: 1rem;
1955
 
1956
    width: 100%;
1957
    display: inline-flex;
1958
    flex-wrap: wrap;
1959
    justify-content: space-between;
1960
 
1961
    font-size: $font-size-md;
1962
 
1963
    @include media-breakpoint-between(xs, sm) {
1964
        .btn {
1965
            display: block;
1966
            width: 100%;
1967
            margin-top: .25rem;
1968
        }
1969
    }
1970
 
1971
    .rui-controls {
1972
        width: 100%;
1973
 
1974
        @include media-breakpoint-between(xs, sm) {
1975
            .singlebutton {
1976
                width: 100%;
1977
            }
1978
        }
1979
    }
1980
}
1981
 
1982
#page-mod-quiz-attempt .submitbtns .mod_quiz-next-nav,
1983
#page-mod-quiz-review .submitbtns .mod_quiz-next-nav,
1984
.rui-submitbtns .mod_quiz-next-nav {
1985
    float: none;
1986
 
1987
    @include media-breakpoint-between(xs, sm) {
1988
        flex-wrap: wrap;
1989
 
1990
        .btn {
1991
            width: 100%;
1992
            margin-top: .25rem;
1993
        }
1994
    }
1995
}
1996
 
1997
#page-mod-quiz-attempt .submitbtns,
1998
#page-mod-quiz-review .submitbtns {
1999
    padding-top: 0;
2000
    display: inline-flex;
2001
    width: 100%;
2002
    justify-content: space-between;
2003
}
2004
 
2005
#page-mod-quiz-summary .submitbtns {
2006
    display: flex;
2007
    flex-direction: column;
2008
    gap: 20px;
2009
 
2010
    text-align: left;
2011
    font-size: $font-size-sm;
2012
}
2013
 
2014
.mod_quiz-prev-nav,
2015
.mod_quiz-next-nav {
2016
    .arrow {
2017
        display: none;
2018
    }
2019
}
2020
 
2021
#page-mod-quiz-attempt #page .controls,
2022
#page-mod-quiz-summary #page .controls,
2023
#page-mod-quiz-review #page .controls {
2024
    margin: 0;
2025
    text-align: left;
2026
}
2027
 
2028
.rui-quizattemptsummary {
2029
    min-width: max-content;
2030
 
2031
    p:only-child {
2032
        margin: 0;
2033
        font-size: $font-size-md;
2034
    }
2035
 
2036
    .c3 a {
2037
        position: relative;
2038
        padding-left: 40px;
2039
        width: max-content;
2040
 
2041
        &:after {
2042
            content: '';
2043
            background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.2635 2.29289C20.873 1.90237 20.2398 1.90237 19.8493 2.29289L18.9769 3.16525C17.8618 2.63254 16.4857 2.82801 15.5621 3.75165L4.95549 14.3582L10.6123 20.0151L21.2189 9.4085C22.1426 8.48486 22.338 7.1088 21.8053 5.99367L22.6777 5.12132C23.0682 4.7308 23.0682 4.09763 22.6777 3.70711L21.2635 2.29289ZM16.9955 10.8035L10.6123 17.1867L7.78392 14.3582L14.1671 7.9751L16.9955 10.8035ZM18.8138 8.98525L19.8047 7.99429C20.1953 7.60376 20.1953 6.9706 19.8047 6.58007L18.3905 5.16586C18 4.77534 17.3668 4.77534 16.9763 5.16586L15.9853 6.15683L18.8138 8.98525Z' fill='#{url-friendly-colour($primary-color-300)}' /%3E%3Cpath d='M2 22.9502L4.12171 15.1717L9.77817 20.8289L2 22.9502Z' fill='#{url-friendly-colour($primary-color-300)}' /%3E%3C/svg%3E");
2044
            background-size: 16px;
2045
            background-repeat: no-repeat;
2046
            background-position: left;
2047
 
2048
            width: 24px;
2049
            height: 24px;
2050
 
2051
            position: absolute;
2052
            top: calc(50% - 12px);
2053
            left: 14px;
2054
        }
2055
    }
2056
}
2057
 
2058
.rui-quizattempt {
2059
    .continuebutton {
2060
        margin-top: 1rem;
2061
        text-align: left;
2062
    }
2063
 
2064
    &:empty {
2065
        display: none;
2066
    }
2067
 
2068
    @include media-breakpoint-between(xs, sm) {
2069
        width: 100%;
2070
 
2071
        .singlebutton,
2072
        .btn {
2073
            width: 100%;
2074
        }
2075
    }
2076
}
2077
 
2078
 
2079
// Started on
2080
.rui-infobox--avatar {
2081
    padding: 1rem 1.25rem 1rem 1.25rem !important;
2082
    background-color: $gray-100;
2083
    position: relative;
2084
 
2085
    img {
2086
        margin-right: 10px;
2087
        border-radius: $btn-border-radius;
2088
    }
2089
 
2090
    .rui-infobox-content--small {
2091
        a {
2092
            color: inherit;
2093
        }
2094
    }
2095
}
2096
 
2097
.rui-infobox--quiz,
2098
.rui-infobox--question {
2099
    background-color: $purple-100;
2100
}
2101
 
2102
.rui-infobox--startedon {
2103
    background-image: url([[pix:theme|monocolor/icon-calendar]]);
2104
 
2105
    background-color: $purple-100;
2106
}
2107
 
2108
// Attempts
2109
.rui-infobox--attemptlist,
2110
.rui-infobox--attempts {
2111
    background-image: url([[pix:theme|monocolor/icon-rewind]]);
2112
 
2113
    background-color: $gray-100;
2114
}
2115
 
2116
// State
2117
.rui-infobox--state {
2118
    background-image: url([[pix:theme|monocolor/icon-git-commit]]);
2119
 
2120
    background-color: $orange-100;
2121
}
2122
 
2123
// Completed on
2124
.rui-infobox--completedon {
2125
    background-image: url([[pix:theme|monocolor/icon-award]]);
2126
 
2127
    background-color: $green-100;
2128
}
2129
 
2130
// Time taken
2131
.rui-infobox--timetaken {
2132
    background-image: url([[pix:theme|monocolor/icon-clock]]);
2133
 
2134
    background-color: $yellow-100;
2135
}
2136
 
2137
// Grade
2138
.rui-infobox--grade {
2139
    background-image: url([[pix:theme|monocolor/icon-edit]]);
2140
 
2141
    background-color: $blue-100;
2142
}
2143
 
2144
// Feedback
2145
.rui-infobox--feedback {
2146
    background-image: url([[pix:theme|monocolor/icon-message-square]]);
2147
 
2148
    background-color: $gray-100;
2149
}
2150
 
2151
// Overdue
2152
.rui-infobox--overdue {
2153
    background-image: url([[pix:theme|monocolor/icon-alert-triangle]]);
2154
 
2155
    background-color: $red-200;
2156
}
2157
 
2158
//Marks
2159
.rui-infobox--marks {
2160
    background-image: url([[pix:theme|monocolor/icon-check-square]]);
2161
 
2162
    background-color: $gray-100;
2163
}
2164
 
2165
 
2166
// ----
2167
//-----     Modal windows mod
2168
// ----
2169
.moodle-dialogue-base .moodle-dialogue.mod_quiz_preflight_popup .moodle-dialogue-bd #mod_quiz_preflight_form legend {
2170
    padding: 0;
2171
}
2172
 
2173
.moodle-dialogue-base .moodle-dialogue.mod_quiz_preflight_popup .moodle-dialogue-bd #mod_quiz_preflight_form .fitem {
2174
    margin-left: 0;
2175
}
2176
 
2177
.mod_quiz_preflight_popup {
2178
    .fcontainer {
2179
        padding: 0;
2180
    }
2181
 
2182
    #fitem_id_passwordmessage {
2183
        margin-top: .25rem;
2184
    }
2185
}
2186
 
2187
// ----
2188
//-----     UI for Report Page
2189
// ----
2190
#page-mod-quiz-report {
2191
 
2192
    // .resettable {
2193
    //     width: max-content;
2194
    //     margin: 1rem 0 1rem auto;
2195
    //     padding: 5px;
2196
    //     border: 2px dashed $border-color;
2197
    //     border-radius: $btn-border-radius;
2198
    // }
2199
 
2200
    h2+.quizattemptcounts {
2201
        margin: 0 1rem;
2202
    }
2203
 
2204
    .main-content {
2205
        .mdl-align {
2206
            text-align: right;
2207
            margin-bottom: 20px;
2208
        }
2209
    }
2210
}
2211
 
2212
#page-mod-quiz-report .main-content {
2213
    #tablecontainer {
2214
        margin: $page-padding-global 0;
2215
    }
2216
}
2217
 
2218
.quizattemptcounts {
2219
    display: inline-flex;
2220
    align-items: center;
2221
    text-align: left;
2222
 
2223
    margin: 10px 0;
2224
    @include font-size($badge-font-size);
2225
    font-weight: $badge-font-weight;
2226
 
2227
    a:before {
2228
        display: none;
2229
    }
2230
}
2231
 
2232
#page-mod-quiz-report table#attempts {
2233
    width: max-content;
2234
 
2235
    .header,
2236
    .cell {
2237
        padding: .75rem;
2238
    }
2239
 
2240
    td {
2241
        border-left: 0;
2242
        border-right: 0;
2243
    }
2244
 
2245
    td.c2 {
2246
        a:first-of-type {
2247
            display: inline-flex;
2248
            margin-top: .25rem;
2249
            margin-bottom: .25rem;
2250
        }
2251
    }
2252
 
2253
    td.c5,
2254
    td.c6,
2255
    td.c7 {
2256
        font-size: $font-size-xs;
2257
        color: $body-color-light;
2258
    }
2259
 
2260
    .correct {
2261
        color: $green-600;
2262
    }
2263
 
2264
    .partiallycorrect {
2265
        color: $yellow-700;
2266
    }
2267
 
2268
    .incorrect {
2269
        color: $red-500;
2270
    }
2271
 
2272
    a {
2273
        &:hover {
2274
            text-decoration: none;
2275
            opacity: .8;
2276
        }
2277
    }
2278
}
2279
 
2280
#page-mod-quiz-report table#attempts .questionflag {
2281
    padding: 5px;
2282
 
2283
    display: inline-flex;
2284
    align-items: center;
2285
    justify-content: center;
2286
 
2287
    border-radius: $btn-border-radius;
2288
    background-color: $green-100;
2289
}
2290
 
2291
#page-mod-quiz-report table#attempts.grades span.que,
2292
#page-mod-quiz-report table#attempts span.avgcell {
2293
    span {
2294
        padding: .25rem .25rem .25rem .45rem;
2295
    }
2296
}
2297
 
2298
#page-mod-quiz-report table#attempts.grades span.que,
2299
#page-mod-quiz-report table#attempts span.avgcell {
2300
    display: flex;
2301
    align-items: center;
2302
}
2303
 
2304
// ----
2305
//-----     UI for Question Edit Pages
2306
// ----
2307
 
2308
 
2309
div[id^=fgroup_id_][id*=answeroptions_],
2310
div[id^=fitem_id_][id*=feedback_],
2311
div[id^=fitem_id_][id*=subquestions_],
2312
div[id^=fitem_id_][id*=subanswers_],
2313
div[id^=fitem_id_][id*=answer_] {
2314
    margin: 0 !important;
2315
}
2316
 
2317
div[id^=fgroup_id_][id*=answeroptions_],
2318
div[id^=fitem_id_][id*=feedback_],
2319
div[id^=fitem_id_][id*=subquestions_],
2320
div[id^=fitem_id_][id*=subanswers_],
2321
div[id^=fitem_id_][id*=answer_],
2322
div[id^=fitem_id_][id*=fraction_] {
2323
    margin: 0 !important;
2324
    padding: 11px 10px 13px !important;
2325
    border-color: $border-color !important;
2326
    background-color: $gray-100 !important;
2327
 
2328
    .theme-dark & {
2329
        background-color: $dm-gray-100 !important;
2330
        border-color: $dm-border-color !important;
2331
    }
2332
}
2333
 
2334
div[id^=fgroup_id_][id*=answeroptions_],
2335
div[id^=fitem_id_][id*=subquestions_],
2336
div[id^=fitem_id_][id*=answer_] {
2337
    border-radius: $btn-border-radius $btn-border-radius 0 0 !important;
2338
    margin-bottom: 0 !important;
2339
}
2340
 
2341
div[id^=fitem_id_][id*=feedback_],
2342
div[id^=fitem_id_][id*=subanswers_] {
2343
    border-radius: 0 0 $btn-border-radius $btn-border-radius !important;
2344
    margin-bottom: 10px !important;
2345
}
2346
 
2347
 
2348
.path-question.theme-dark {
2349
 
2350
    div[id^=fgroup_id_][id*=answeroptions_],
2351
    div[id^=fitem_id_][id*=feedback_],
2352
    div[id^=fitem_id_][id*=subquestions_],
2353
    div[id^=fitem_id_][id*=subanswers_],
2354
    div[id^=fitem_id_][id*=answer_],
2355
    div[id^=fitem_id_][id*=fraction_] {
2356
        border: 1px solid $dm-border-color !important;
2357
    }
2358
}
2359
 
2360
// End. UI for Question Edit Pages
2361
 
2362
.content {
2363
    .attachments {
2364
        margin-top: 2rem;
2365
        position: relative;
2366
    }
2367
}
2368
 
2369
.que .validationerror {
2370
    margin-top: 1rem;
2371
}
2372
 
2373
.que.multianswer .feedbackspan {
2374
    padding: 1rem;
2375
    background-color: $yellow-100;
2376
    border-radius: $btn-border-radius;
2377
 
2378
    font-size: $font-size-md;
2379
    box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%), 0 16px 32px rgb(0 0 0 / 7%), 0 32px 64px rgb(0 0 0 / 7%);
2380
}
2381
 
2382
//Pagination on Quiz Questions Page
2383
.categorypagingbarcontainer {
2384
    .pagination {
2385
        margin-bottom: .5rem;
2386
    }
2387
 
2388
    .paging {
2389
        text-align: center;
2390
    }
2391
}
2392
 
2393
#page-mod-quiz-edit .statusdisplay {
2394
    padding: .75rem 1rem .75rem 3.5rem !important;
2395
    margin-top: $page-padding-global;
2396
    margin-bottom: $page-padding-global;
2397
 
2398
    background-color: $yellow-100;
2399
    background-image: url([[pix:theme|monocolor/icon-alert-circle]]);
2400
    background-size: 18px;
2401
    background-position: 20px;
2402
    background-repeat: no-repeat;
2403
 
2404
 
2405
    border-radius: $btn-border-radius;
2406
    font-size: $font-size-sm;
2407
    font-weight: $font-weight-medium;
2408
    color: $body-color;
2409
 
2410
    p {
2411
        margin: 0;
2412
    }
2413
}
2414
 
2415
.theme-dark#page-mod-quiz-edit .statusdisplay {
2416
    filter: invert(1);
2417
}
2418
 
2419
.questionflagsavebutton {
2420
    margin: 10px 0;
2421
}
2422
 
2423
.qtype_multichoice_clearchoice {
2424
    margin-top: 10px;
2425
}
2426
 
2427
.rui-infobox--attemptlist,
2428
.rui-infobox--attempts {
2429
    //padding: 1rem 1.25rem 1rem 1.25rem!important;
2430
    //border: 2px dashed $border-color;
2431
 
2432
    .rui-infobox-content--small {
2433
        max-height: 70px;
2434
        overflow-y: auto;
2435
    }
2436
 
2437
    a,
2438
    strong {
2439
        margin: 2px;
2440
 
2441
        width: 40px;
2442
        height: 30px;
2443
 
2444
        display: inline-flex;
2445
        align-items: center;
2446
        justify-content: center;
2447
 
2448
        background-color: $gray-100;
2449
        border-radius: $btn-border-radius;
2450
 
2451
        color: $gray-800;
2452
 
2453
        &:hover {
2454
            background-color: $primary-color-100;
2455
            color: $primary-color-600;
2456
        }
2457
    }
2458
 
2459
    strong {
2460
        opacity: .4;
2461
    }
2462
}
2463
 
2464
#page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer .editicon {
2465
    min-width: 20px;
2466
}
2467
 
2468
#page-mod-quiz-edit ul.slots li.section li.activity .question_dependency_wrapper .cm-edit-action {
2469
    @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
2470
}
2471
 
2472
 
2473
 
2474
// Radio and checkbox quick mods
2475
.que.multichoice .answer div.r0,
2476
.que.multichoice .answer div.r1,
2477
.que .answer {
2478
 
2479
    [type="radio"],
2480
    [type="checkbox"] {
2481
        border: 0;
2482
        width: 20px;
2483
        height: 20px;
2484
    }
2485
}
2486
 
2487
 
2488
.path-mod-quiz #user-picture {
2489
    margin: 0 0 20px;
2490
    display: inline-flex;
2491
    align-items: center;
2492
 
2493
    font-weight: $font-weight-medium;
2494
 
2495
    .userpicture {
2496
        width: 40px;
2497
        height: 40px;
2498
        margin-right: 10px;
2499
    }
2500
}
2501
 
2502
 
2503
@include media-breakpoint-between(xs, sm) {
2504
 
2505
    .quizstartbuttondiv,
2506
    .quizstartbuttondiv .btn {
2507
        width: 100%;
2508
    }
2509
}
2510
 
2511
.quizsummaryheading th:empty {
2512
    padding: 0;
2513
}
2514
 
2515
.camera {
2516
    video {
2517
        margin-top: 10px;
2518
        width: 100%;
2519
    }
2520
}
2521
 
2522
.path-mod-quiz .othernav {
2523
    .singlebutton {
2524
        margin-top: 24px;
2525
        width: 100%;
2526
    }
2527
 
2528
    .btn {
2529
        width: 100%;
2530
    }
2531
}
2532
 
2533
.categoryquestionscontainer {
2534
    .table-responsive {
2535
        overflow: visible;
2536
    }
2537
}
2538
 
2539
#page-mod-quiz-edit .section .activity .actions .version-selection {
2540
    padding: 7px 30px 7px 14px;
2541
    width: max-content;
2542
    max-width: 200px;
2543
    font-size: 12px;
2544
    height: 40px !important;
2545
 
2546
    display: inline-block;
2547
    font-family: $custom-select-font-family;
2548
    font-weight: $custom-select-font-weight;
2549
    line-height: $custom-select-line-height;
2550
    color: $custom-select-color;
2551
    vertical-align: middle;
2552
    background: $custom-select-bg $custom-select-background;
2553
    border: $custom-select-border-width solid $custom-select-border-color;
2554
    @include border-radius($custom-select-border-radius, 0);
2555
    @include box-shadow($custom-select-box-shadow);
2556
    appearance: none;
2557
}
2558
 
2559
.que.formulas .formulas_number {
2560
    width: auto !important;
2561
}
2562
 
2563
 
2564
#page-question-bank-previewquestion-preview {
2565
    .que {
2566
        margin-top: 10px;
2567
 
2568
        &::before {
2569
            display: none;
2570
        }
2571
    }
2572
 
2573
    #techinfo {
2574
        margin-bottom: 20px;
2575
    }
2576
 
2577
    #commentcollapse+form {
2578
        margin-top: 1rem;
2579
    }
2580
 
2581
    #responseform {
2582
        padding: 20px;
2583
        border: 1px solid $border-color;
2584
        border-radius: $btn-border-radius;
2585
 
2586
        .theme-dark & {
2587
            border-color: $dm-body-color;
2588
        }
2589
    }
2590
}
2591
 
2592
table {
2593
    .highlight:before {
2594
        display: none;
2595
    }
2596
 
2597
    tr.highlight {
2598
        border: 2px solid $primary-color-400 !important;
2599
    }
2600
}
2601
 
2602
.path-question div[id^=fgroup_id_][id*=answeroptions_] {
2603
    .form-control-feedback {
2604
        padding: 6px 16px !important;
2605
        font-size: $font-size-sm !important;
2606
        font-weight: $font-weight-medium !important;
2607
        border: none !important;
2608
        border-radius: $btn-border-radius !important;
2609
    }
2610
 
2611
    .invalid-feedback {
2612
        background-color: $red-100 !important;
2613
        color: $red-800;
2614
 
2615
        .theme-dark & {
2616
            background-color: #d03434;
2617
            color: $red-100;
2618
        }
2619
    }
2620
}
2621
 
2622
body.path-mod-quiz .gradedattempt,
2623
body.path-mod-quiz table tbody tr.gradedattempt>td,
2624
body.path-mod-quiz table tbody tr.gradedattempt>td {
2625
    background-color: $gray-100;
2626
    border-color: $gray-300;
2627
}
2628
 
2629
body.path-mod-quiz.theme-dark .gradedattempt,
2630
body.path-mod-quiz.theme-dark table tbody tr.gradedattempt>td,
2631
body.path-mod-quiz.theme-dark table tbody tr.gradedattempt>td {
2632
    background-color: $dm-gray-100;
2633
    border-color: $dm-gray-300;
2634
}
2635
 
2636
.theme-dark .que.ddimageortext .draghome,
2637
.que.ddimageortext .drag,
2638
.theme-dark form.mform fieldset#id_previewareaheader .droppreview {
2639
    border-color: $dm-border-color;
2640
    background-color: $dm-gray-100;
2641
}
2642
 
2643
#page-mod-quiz-attempt.pagelayout-secure .submitbtns,
2644
#page-mod-quiz-review.pagelayout-secure .submitbtns {
2645
    margin-bottom: 30px;
2646
}
2647
 
2648
#page-mod-quiz-edit span.editinstructions {
2649
    right: auto;
2650
}
2651
 
2652
.mod-indent-outer span.editinstructions {
2653
    right: 0 !important;
2654
    top: -21px;
2655
    font-size: 11px;
2656
}
2657
 
2658
#page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer {
2659
    overflow: hidden;
2660
}
2661
 
2662
#page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer form input {
2663
    height: auto !important;
2664
}
2665
 
2666
.totalpoints {
2667
    font-size: $font-size-sm;
2668
}
2669
 
2670
#page-mod-quiz-view .generalbox#feedback {
2671
    width: 100%;
2672
}
2673
 
2674
#page-mod-quiz-view .quizinfo {
2675
    text-align: left;
2676
}
2677
 
2678
.modal {
2679
    table#categoryquestions {
2680
        width: 100%;
2681
    }
2682
 
2683
    table#categoryquestions th,
2684
    table#categoryquestions td {
2685
        padding: 5px 0 !important;
2686
    }
2687
}
2688
 
2689
 
2690
#page-mod-quiz-edit #categoryquestions span.questionname,
2691
#page-mod-quiz-edit ul.slots li.activity div.activityinstance span.questionname {
2692
    font-size: 13px;
2693
    color: $body-color;
2694
}
2695
 
2696
.theme-dark#page-mod-quiz-edit #categoryquestions span.questionname,
2697
.theme-dark#page-mod-quiz-edit ul.slots li.activity div.activityinstance span.questionname {
2698
    color: $dm-body-color;
2699
}
2700
 
2701
#page-mod-quiz-edit .question-bank-table .iconcol {
2702
    max-width: 20px;
2703
}
2704
 
2705
#categoryquestions th div {
2706
    align-items: center;
2707
    flex-wrap: wrap;
2708
    margin: 0;
2709
    padding: 1px;
2710
 
2711
    &.form-check {
2712
        width: auto;
2713
    }
2714
}
2715
 
2716
#categoryquestions .checkbox input[type="checkbox"] {
2717
    width: 20px;
2718
    height: 20px;
2719
}
2720
 
2721
#page-mod-quiz-edit .question-bank-table .header.checkbox {
2722
    .header-container {
2723
        display: flex;
2724
        justify-content: center;
2725
 
2726
        .header-text .mr-1 {
2727
            margin: 0 !important;
2728
        }
2729
    }
2730
}
2731
 
2732
#page-mod-quiz-edit .question-bank-table {
2733
    .header-container {
2734
        padding: 0;
2735
 
2736
        .header-text:empty {
2737
            display: none;
2738
        }
2739
    }
2740
 
2741
    th .sorters {
2742
        font-size: $font-size-sm;
2743
        text-align: left;
2744
    }
2745
}
2746
 
2747
#page-mod-quiz-edit .question-bank-table .questionnametext {
2748
    padding: 0 !important;
2749
    vertical-align: middle !important;
2750
}
2751
 
2752
#page-mod-quiz-edit .question-bank-table .qtype {
2753
    padding: 5px !important;
2754
    text-align: left;
2755
    vertical-align: middle !important;
2756
}
2757
 
2758
.qbank-column-list {
2759
    th {
2760
        border-bottom: 2px solid $border-color;
2761
 
2762
        .theme-dark & {
2763
            border-color: $dm-border-color;
2764
        }
2765
    }
2766
}
2767
 
2768
.questionbankwindow {
2769
 
2770
    .input-group-text,
2771
    .form-control {
2772
        padding: 3px 11px;
2773
        height: 41px;
2774
        font-size: $font-size-xs;
2775
    }
2776
 
2777
    .custom-select {
2778
        padding: 3px 31px 3px 11px;
2779
        height: 41px;
2780
        font-size: $font-size-xs;
2781
    }
2782
 
2783
    .form-autocomplete-downarrow {
2784
        right: 6px;
2785
    }
2786
}
2787
 
2788
#page-question-edit {
2789
    #categoryquestions {
2790
        .r0 {
2791
            border-bottom: 0;
2792
        }
2793
 
2794
        .r0+.r0 {
2795
            border-bottom: 1px solid $border-color;
2796
 
2797
            .theme-dark & {
2798
                border-color: $dm-border-color;
2799
            }
2800
        }
2801
 
2802
        .questiontext p {
2803
            padding: 0 0 0 62px !important;
2804
            font-size: $font-size-xs !important;
2805
        }
2806
    }
2807
}