Proyectos de Subversion Moodle

Rev

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