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
/* modules.less */
2
 
3
// The home for small tweaks to modules that don't require
4
// changes drastic enough to pull in the full module css
5
// and replace it completely
6
// Plus some misc. odds and ends
7
 
8
select {
9
    width: auto;
10
}
11
 
12
.path-mod {
13
    .activity-header:not(:empty) {
14
        background-color: $gray-100;
15
        margin-bottom: map-get($spacers, 3);
16
        padding-left: map-get($spacers, 3);
17
        padding-right: map-get($spacers, 3);
18
 
19
        @include border-radius();
20
 
21
        & > div:last-child > div:last-child {
22
            border-bottom: 0;
23
        }
24
    }
25
    .activity-information {
26
 
27
        .activity-dates {
28
            padding-top: map-get($spacers, 3);
29
            padding-bottom: map-get($spacers, 3);
30
            border-bottom: $border-width solid $border-color;
31
        }
32
        .completion-info {
33
            padding-top: map-get($spacers, 3);
34
            padding-bottom: map-get($spacers, 3);
35
            border-bottom: $border-width solid $border-color;
36
        }
37
    }
38
    .activity-description {
39
        padding-top: map-get($spacers, 3);
40
        padding-bottom: map-get($spacers, 3);
41
        & > .box.py-3 {
42
            padding-top: 0 !important; /* stylelint-disable-line declaration-no-important */
43
            padding-bottom: 0 !important; /* stylelint-disable-line declaration-no-important */
44
        }
45
        & > .box.py-3:empty {
46
            display: none;
47
        }
48
    }
49
    .automatic-completion-conditions .badge {
50
        font-size: 80%;
51
        padding: map-get($spacers, 2);
52
        margin-top: map-get($spacers, 1);
53
        mix-blend-mode: multiply;
54
        &.badge-light {
55
            background-color: $gray-200 !important; /* stylelint-disable-line declaration-no-important */
56
        }
57
 
58
        .icon {
59
            width: 0.7rem;
60
            height: 0.7rem;
61
            font-size: 0.7rem;
62
        }
63
 
64
        &:first-child {
65
            margin-top: 0;
66
        }
67
    }
68
    .activity-description .no-overflow p:last-child {
69
        padding-bottom: 0;
70
        margin-bottom: 0;
71
    }
72
}
73
 
74
// Choice module
75
 
76
.path-mod-choice {
77
    .horizontal .choices .option {
78
        display: inline-block;
79
    }
80
}
81
 
82
.path-mod-choice {
83
    .choices .option label {
84
        vertical-align: top;
85
    }
86
}
87
 
88
// Forum module
89
 
90
.path-mod-forum .forumsearch {
91
    input,
92
    .helptooltip {
93
        margin: 0 3px;
94
    }
95
}
96
 
97
.path-mod-forum .forumheaderlist,
98
.path-mod-forum .forumheaderlist td {
99
    border: none;
100
}
101
 
102
.path-mod-forum {
103
    .forumheaderlist {
104
        thead .header,
105
        tbody .discussion td {
106
            white-space: normal;
107
            vertical-align: top;
108
            padding-left: 0.5em;
109
            padding-right: 0.5em;
110
        }
111
 
112
        thead .header {
113
            white-space: normal;
114
            vertical-align: top;
115
        }
116
 
117
        thead .header.replies {
118
            text-align: center;
119
        }
120
 
121
        thead .header.lastpost {
122
            text-align: right;
123
        }
124
 
125
        thead .header th,
126
        tbody .discussion td {
127
            &.discussionsubscription {
128
                width: 16px;
129
                padding-left: 0.5em;
130
                padding-right: 0.5em;
131
            }
132
        }
133
 
134
        .discussion {
135
            .replies,
136
            .lastpost {
137
                white-space: normal;
138
            }
139
 
140
            .discussionsubscription,
141
            .replies {
142
                text-align: center;
143
            }
144
 
145
            .topic,
146
            .discussionsubscription,
147
            .topic.starter,
148
            .replies,
149
            .lastpost {
150
                vertical-align: top;
151
            }
152
        }
153
    }
154
 
155
    .discussion-list {
156
        .topic {
157
            // Do not use the default bold style for the table headings.
158
            font-weight: inherit;
159
        }
160
    }
161
}
162
 
163
.discussion-settings-container {
1441 ariadna 164
    .form-select {
1 efrain 165
        width: 100%;
166
    }
167
 
168
    input {
169
        max-width: 100%;
170
    }
171
}
172
 
173
.forumpost {
174
    border: $border-width solid $border-color;
175
    display: block;
176
    padding: 6px;
177
 
178
    .header {
179
        margin-bottom: 3px;
180
    }
181
 
182
    .picture img {
183
        margin: 3px;
184
 
185
        &.userpicture {
186
            margin-left: 3px;
187
            margin-right: 10px;
188
        }
189
    }
190
 
191
    .content {
192
        .posting.fullpost {
193
            margin-top: 8px;
194
        }
195
    }
196
 
197
    .row {
198
        display: block;
199
        .topic,
200
        .content-mask,
201
        .options {
202
            margin-left: 48px;
203
        }
204
 
205
        &.side {
206
            clear: both;
207
        }
208
    }
209
}
210
 
211
.forumpost .row .left {
212
    width: 48px;
213
}
214
 
215
.forumpost .options .commands {
216
    margin-left: 0;
217
}
218
 
219
.forumpost .subject {
220
    font-weight: bold;
221
}
222
 
223
// Override hardcoded forum modules styling
224
.forumsearch input[type=text] {
225
    margin-bottom: 0;
226
}
227
 
228
#page-mod-forum-view {
229
    table {
230
        .fit-content {
231
            width: 1px;
232
            white-space: nowrap;
233
        }
234
 
235
        .limit-width {
236
            max-width: 200px;
237
            white-space: nowrap;
238
            text-overflow: ellipsis;
239
            overflow: hidden;
240
 
241
            .author-info {
242
                max-width: calc(100% - 35px - .5rem);
243
            }
244
        }
245
    }
246
}
247
 
248
$author-image-width: 70px;
249
$author-image-margin: 24px;
250
$author-image-width-sm: 30px;
251
$author-image-margin-sm: 8px;
252
 
253
/** Gently highlight the selected post by changing it's background to blue and then fading it out. */
254
@keyframes background-highlight {
255
    from {
256
        background-color: $modules-highlight-bg;
257
    }
258
    to {
259
        background-color: inherit;
260
    }
261
}
262
 
263
.path-mod-forum .nested-v2-display-mode,
264
.path-mod-forum.nested-v2-display-mode {
265
    .discussionsubscription {
266
        margin-top: 0;
267
        text-align: inherit;
268
        margin-bottom: 0;
269
    }
270
 
271
    .preload-subscribe,
272
    .preload-unsubscribe {
273
        display: none;
274
    }
275
 
276
    .post-message {
277
        line-height: 1.6;
278
    }
279
 
280
    .indent {
281
        margin-left: 0;
282
    }
283
 
284
    /** Reset the badge styling back to pill style. */
285
    .badge {
286
        font-size: inherit;
287
        font-weight: inherit;
288
        padding-left: .5rem;
289
        padding-right: .5rem;
290
        border-radius: 10rem;
291
    }
292
 
293
    .badge-light {
294
        background-color: $modules-badge-bg;
295
        color: $modules-badge-color;
296
    }
297
 
298
    /** Style the ratings like a badge. */
299
    .rating-aggregate-container {
300
        background-color: $modules-rating-aggregate-bg;
301
        color: $modules-rating-aggregate-color;
302
        padding: .25em .5em;
303
        line-height: 1;
304
        margin-right: .5rem;
305
        vertical-align: middle;
306
        border-radius: 10rem;
307
        text-align: center;
308
    }
309
 
310
    .ratinginput {
311
        padding: .25em 1.75rem 0.25em .75em;
312
        line-height: 1;
313
        height: auto;
314
        border-radius: 10rem;
315
 
1441 ariadna 316
        @include media-breakpoint-down(md) {
1 efrain 317
            margin-top: .5rem;
318
        }
319
    }
320
 
321
    .group-image {
322
        width: 35px;
323
        height: 35px;
324
        margin-right: 0;
325
        float: none;
326
        display: inline-block;
327
    }
328
 
329
    /** Don't show the discussion locked alert in this mode because it's already indicated with a badge. */
330
    .alert.discussionlocked {
1441 ariadna 331
        @include visually-hidden();
1 efrain 332
    }
333
 
334
    /** Fix muted text contrast ratios for accessibility. */
335
    .text-muted,
336
    .dimmed_text {
337
        color: $modules-forum-muted-color !important; /* stylelint-disable-line declaration-no-important */
338
    }
339
 
340
    .author-header {
341
        font-style: italic;
342
 
343
        .author-name {
344
            font-style: normal;
345
        }
346
    }
347
 
348
    /** Make the tag list text screen reader visible only */
349
    .tag_list > b {
1441 ariadna 350
        @include visually-hidden();
1 efrain 351
    }
352
 
353
    :target > .focus-target {
354
        animation-name: background-highlight;
355
        animation-duration: 1s;
356
        animation-timing-function: ease-in-out;
357
        animation-iteration-count: 1;
358
    }
359
 
360
    .forum-post-container {
361
        .replies-container {
362
            .forum-post-container {
363
                border-top: 1px solid $modules-forum-post-border-color;
364
                padding-top: 1.5rem;
365
 
366
                .replies-container .forum-post-container {
367
                    border-top: none;
368
                    padding-top: 0;
369
                }
370
            }
371
 
372
            .inline-reply-container .reply-author {
373
                display: none;
374
            }
375
        }
376
 
377
        .post-message p:last-of-type {
378
            margin-bottom: 0;
379
        }
380
 
381
        .author-image-container {
382
            width: $author-image-width;
383
            margin-right: $author-image-margin;
384
            flex-shrink: 0;
385
        }
386
 
387
        .inline-reply-container textarea {
388
            border: 0;
389
            resize: none;
390
        }
391
 
392
        .indent {
393
            /**
394
             * The first post and first set of replies have a larger author image so offset the 2nd
395
             * set of replies by the image width + margin to ensure they align.
396
             */
397
            .indent {
398
                padding-left: $author-image-width + $author-image-margin;
399
 
400
                /**
401
                 * Reduce the size of the the author image for all second level replies (and below).
402
                 */
403
                .author-image-container {
404
                    width: $author-image-width-sm;
405
                    margin-right: $author-image-margin-sm;
406
                    padding-top: (36px - $author-image-width-sm) * 0.5;
407
                }
408
 
409
                /**
410
                 * Adjust the indentation offset for all 3rd level replies and below for the smaller author image.
411
                 */
412
                .indent {
413
                    padding-left: $author-image-width-sm + $author-image-margin-sm;
414
 
415
                    /**
416
                     * Stop indenting the replies after the 5th reply.
417
                     */
418
                    .indent .indent .indent {
419
                        padding-left: 0;
420
                    }
421
                }
422
            }
423
        }
424
    }
425
}
426
 
427
/** Extra small devices (portrait phones, less than 576px). */
1441 ariadna 428
@include media-breakpoint-down(md) {
1 efrain 429
    #page-mod-forum-discuss.nested-v2-display-mode {
430
        .forum-post-container {
431
            .author-image-container {
432
                width: $author-image-width-sm;
433
                margin-right: $author-image-margin-sm;
434
            }
435
 
436
            .indent {
437
                .indent {
438
                    padding-left: $author-image-width-sm + $author-image-margin-sm;
439
 
440
                    .indent .indent {
441
                        padding-left: 0;
442
                    }
443
                }
444
            }
445
        }
446
 
447
        .group-image {
448
            width: 30px;
449
            height: 30px;
450
        }
451
    }
452
}
453
 
454
// Make filter popover content scrollable if needed.
455
.filter-scrollable {
456
    overflow-y: auto;
457
    max-height: 25em;
458
    margin-bottom: 1em;
459
}
460
 
461
// Required to fit a date mform into a filter popover.
462
.filter-dates-popover {
463
    width: 100%;
464
    max-width: 41.5em;
465
}
466
 
467
$grading-drawer-width: 430px !default;
468
$grading-animation-duration: .3s !default;
469
$grading-icon-button-size: 36px !default;
470
$grading-search-button-padding-left: calc(#{map-get($spacers, 2)} + 8px) !default;
1441 ariadna 471
$grading-search-input-padding-left: calc(#{map-get($spacers, 2)} + #{map-get($spacers, 2)} + #{$grading-icon-button-size} - calc(#{$input-border-width} * 2)) !default; /* stylelint-disable-line max-line-length */
1 efrain 472
$grading-search-input-padding-right: calc(#{map-get($spacers, 2)} + #{$grading-icon-button-size}) !default;
473
$grading-nav-bar-active-drawer-button-bottom: calc(#{map-get($spacers, 2) * -1} - 1px) !default;
474
$grading-content-show-content-button-padding-left: calc(#{map-get($spacers, 2) * 2} + 45px) !default;
475
 
1441 ariadna 476
$input-line-height-lg:  1.5 !default;
477
 
1 efrain 478
@keyframes expandSearchButton {
479
    from {
480
        height: $grading-icon-button-size;
481
        width: $grading-icon-button-size;
482
        border-radius: $grading-icon-button-size * 0.5;
483
        background-color: $gray-200;
484
    }
485
    to {
486
        width: 100%;
487
        height: $input-height-lg;
488
        border-radius: 0;
489
        background-color: $input-bg;
490
        border-color: $input-border-color;
491
        padding-left: $grading-search-button-padding-left;
492
        padding-top: $input-padding-y-lg;
493
        padding-bottom: $input-padding-y-lg;
494
        @include font-size($input-font-size-lg);
495
        line-height: $input-line-height-lg;
496
        right: 0;
497
    }
498
}
499
 
500
@keyframes collapseSearchButton {
501
    from {
502
        width: 100%;
503
        height: $input-height-lg;
504
        border-radius: 0;
505
        background-color: $input-bg;
506
        border-color: $input-border-color;
507
        padding-left: $grading-search-button-padding-left;
508
        padding-top: $input-padding-y-lg;
509
        padding-bottom: $input-padding-y-lg;
510
        @include font-size($input-font-size-lg);
511
        line-height: $input-line-height-lg;
512
        right: 0;
513
    }
514
    to {
515
        height: $grading-icon-button-size;
516
        width: $grading-icon-button-size;
517
        border-radius: $grading-icon-button-size * 0.5;
518
        background-color: $gray-200;
519
    }
520
}
521
 
522
.path-mod-forum .unified-grader {
523
    @include media-breakpoint-up(xs) {
524
        .navbar {
525
            max-height: none;
526
            z-index: 1;
527
        }
528
    }
529
 
530
    .body-container {
531
        overflow: auto;
532
        &.hidden {
533
            display: none !important; /* stylelint-disable-line declaration-no-important */
534
        }
535
    }
536
 
537
    .userpicture {
538
        height: 60px;
539
        width: 60px;
540
    }
541
 
542
    .grader-grading-panel {
543
        top: 0;
544
        position: absolute;
545
        height: 100%;
546
        z-index: 0;
547
        width: $grading-drawer-width;
548
 
549
        &.hidden {
550
            right: ($grading-drawer-width * -1);
551
        }
552
 
553
        .grading-icon {
554
            width: $grading-icon-button-size;
555
        }
556
 
557
        .user-picker-container {
558
            .user-full-name {
559
                max-width: 240px;
560
            }
561
 
562
            .page-link {
563
                width: $grading-icon-button-size;
564
                height: $grading-icon-button-size;
565
                display: flex;
566
                text-align: center;
567
                align-items: center;
568
                justify-content: center;
569
            }
570
        }
571
 
572
        .header-container {
573
            height: 65px;
574
            position: relative;
575
            overflow: hidden;
576
 
577
            .info-container {
578
                position: absolute;
579
                top: 50%;
580
                left: 0;
581
                transform: translateY(-50%);
582
                width: 100%;
583
                height: 100%;
584
                padding: map-get($spacers, 2);
585
                padding-right: calc(#{$grading-icon-button-size} + #{map-get($spacers, 2)});
586
                opacity: 1;
587
                visibility: visible;
588
                transition: left $grading-animation-duration ease-in-out;
589
                z-index: 1;
590
            }
591
 
592
            .toggle-search-button {
593
                &.expand {
594
                    animation-name: expandSearchButton;
595
                    animation-duration: $grading-animation-duration;
596
                    animation-timing-function: ease-in-out;
597
                }
598
 
599
                &.collapse {
600
                    display: block;
601
                    animation-name: collapseSearchButton;
602
                    animation-duration: $grading-animation-duration;
603
                }
604
            }
605
 
606
            .user-search-container {
607
                overflow: hidden;
608
                position: absolute;
609
                top: 50%;
610
                right: 0;
611
                transform: translateY(-50%);
612
                z-index: 2;
613
                width: 100%;
614
                height: 100% !important; /* stylelint-disable-line declaration-no-important */
615
                padding: map-get($spacers, 2);
616
 
617
                .search-input-container {
618
                    position: relative;
619
                    overflow: visible;
620
                    flex-wrap: nowrap;
621
 
622
                    input {
623
                        padding-left: $grading-search-input-padding-left;
624
                        padding-right: $grading-search-input-padding-right;
625
                        opacity: 1;
626
                        visibility: visible;
627
                        transition:
628
                            opacity 0s linear $grading-animation-duration,
629
                            visibility 0s linear;
630
                    }
631
 
632
                    .search-icon {
633
                        position: absolute;
634
                        top: 50%;
635
                        left: map-get($spacers, 2);
636
                        transform: translateY(-50%);
637
                        color: $input-color;
638
                        height: $grading-icon-button-size;
1441 ariadna 639
                        width: calc(#{$grading-icon-button-size} - calc(#{$input-border-width} * 2));
1 efrain 640
                        background-color: $input-bg;
641
                        opacity: 1;
642
                        visibility: visible;
643
                        transition:
644
                            opacity 0s linear $grading-animation-duration,
645
                            visibility 0s linear $grading-animation-duration;
646
                    }
647
 
648
                    .toggle-search-button {
649
                        position: absolute;
650
                        top: 50%;
651
                        right: map-get($spacers, 2);
652
                        transform: translateY(-50%);
653
                        z-index: 1;
654
                        color: inherit;
655
                        text-align: left;
656
                        padding-left: 9px;
657
                        transition: right 0s linear $grading-animation-duration;
658
 
659
                        .expanded-icon {
660
                            opacity: 1;
661
                            visibility: visible;
662
                            max-width: 50px;
663
                            max-height: 50px;
664
                            transition:
665
                                opacity 0s linear $grading-animation-duration,
666
                                max-height 0s linear $grading-animation-duration,
667
                                max-width 0s linear $grading-animation-duration,
668
                                visibility 0s linear $grading-animation-duration;
669
                        }
670
 
671
                        .collapsed-icon {
672
                            opacity: 0;
673
                            visibility: hidden;
674
                            max-height: 0;
675
                            max-width: 0;
676
                            overflow: hidden;
677
                            transition:
678
                                opacity 0s linear $grading-animation-duration,
679
                                max-height 0s linear $grading-animation-duration,
680
                                max-width 0s linear $grading-animation-duration,
681
                                visibility 0s linear $grading-animation-duration;
682
                        }
683
                    }
684
                }
685
 
686
                &.collapsed {
687
                    width: calc(#{$grading-icon-button-size} + #{map-get($spacers, 2)} + #{map-get($spacers, 2)});
688
                    transition: width $grading-animation-duration ease-in-out;
689
 
690
                    .search-input-container {
691
                        flex-wrap: nowrap;
692
 
693
                        input,
694
                        .search-icon {
695
                            opacity: 0;
696
                            visibility: hidden;
697
                            transition:
698
                                opacity 0s linear,
699
                                visibility 0s linear;
700
                        }
701
 
702
                        input {
703
                            padding-left: 0;
704
                            padding-right: 0;
705
                        }
706
 
707
                        .toggle-search-button {
708
                            .expanded-icon {
709
                                opacity: 0;
710
                                visibility: hidden;
711
                                max-height: 0;
712
                                max-width: 0;
713
                                overflow: hidden;
714
                                transition:
715
                                    opacity 0s linear,
716
                                    max-height 0s linear,
717
                                    max-width 0s linear,
718
                                    visibility 0s linear;
719
                            }
720
 
721
                            .collapsed-icon {
722
                                opacity: 1;
723
                                visibility: visible;
724
                                max-width: 50px;
725
                                max-height: 50px;
726
                                transition:
727
                                    opacity 0s linear,
728
                                    max-height 0s linear,
729
                                    max-width 0s linear,
730
                                    visibility 0s linear;
731
                            }
732
                        }
733
                    }
734
                }
735
            }
736
 
737
            .user-search-container:not(.collapsed) + .info-container {
738
                opacity: 0;
739
                visibility: hidden;
740
                left: calc(100% * -1);
741
                transition:
742
                    left $grading-animation-duration ease-in-out,
743
                    opacity 0s linear $grading-animation-duration,
744
                    visibility 0s linear $grading-animation-duration,
745
                    padding 0s linear $grading-animation-duration;
746
            }
747
        }
748
    }
749
 
750
    .grader-module-content {
751
        overflow-y: auto;
752
        margin-right: $grading-drawer-width;
753
        @include transition(margin-right .2s ease-in-out);
754
    }
755
 
756
    .drawer-button {
757
        position: relative;
758
 
759
        &.active::after {
760
            content: "";
761
            position: absolute;
762
            bottom: $grading-nav-bar-active-drawer-button-bottom;
763
            left: 0;
764
            width: 100%;
765
            height: 3px;
766
            background-color: map-get($theme-colors, 'primary');
767
        }
768
 
769
        .icon {
770
            font-size: 20px;
771
            height: 20px;
772
            width: 20px;
773
        }
774
    }
775
 
776
    .grader-module-content-display {
777
        .discussion-container {
778
            &:last-of-type {
779
                > hr {
780
                    display: none;
781
                }
782
            }
783
 
784
            .posts-container {
785
                &:last-of-type {
786
                    > hr {
787
                        display: none;
788
                    }
789
                }
790
 
791
                .parent-container {
792
                    position: relative;
793
 
794
                    .show-content-button {
795
                        position: absolute;
796
                        height: 100%;
797
                        width: 100%;
798
                        left: 0;
799
                        top: 0;
800
                        padding-left: $grading-content-show-content-button-padding-left;
801
                        text-align: left;
802
                        z-index: 1;
803
 
804
                        &:not(.collapsed) {
805
                            display: none;
806
                        }
807
                    }
808
 
809
                    .content {
810
                        display: block;
811
                        height: auto !important; /* stylelint-disable-line declaration-no-important */
812
 
813
                        .header {
814
                            transition: margin-bottom $grading-animation-duration ease-in-out;
815
 
816
                            div + div {
817
                                opacity: 1;
818
                                visibility: visible;
819
                                max-height: none;
820
                                transition:
821
                                    opacity $grading-animation-duration linear,
822
                                    visibility 0s linear;
823
                            }
824
                        }
825
 
826
                        .body-content-container {
827
                            opacity: 1;
828
                            visibility: visible;
829
                            max-height: none;
830
                            transition:
831
                                opacity $grading-animation-duration linear,
832
                                visibility 0s linear;
833
                        }
834
 
835
                        .forum-post-core {
836
                            opacity: 1;
837
                            visibility: visible;
838
                            max-height: none;
839
                            transition:
840
                                opacity $grading-animation-duration linear,
841
                                visibility 0s linear;
842
                        }
843
                    }
844
 
845
                    .show-content-button.collapsed + .content {
846
                        opacity: .3;
847
 
848
                        .header {
849
                            margin-bottom: 0 !important; /* stylelint-disable-line declaration-no-important */
850
 
851
                            div + div {
852
                                opacity: 0;
853
                                visibility: hidden;
854
                                max-height: 0;
855
                            }
856
                        }
857
 
858
                        .body-content-container {
859
                            opacity: 0;
860
                            visibility: hidden;
861
                            max-height: 0;
862
                        }
863
 
864
                        .forum-post-core {
865
                            opacity: 0;
866
                            visibility: hidden;
867
                            max-height: 0;
868
                        }
869
                    }
870
 
871
                    .show-content-button.collapsed:hover + .content,
872
                    .show-content-button.collapsed:focus + .content {
873
                        opacity: 1;
874
                    }
875
                }
876
            }
877
        }
878
 
879
        .no-post-container {
880
            .icon {
881
                height: 250px;
882
                width: 250px;
883
                margin-right: 0;
884
            }
885
        }
886
 
887
        .nested-v2-display-mode {
888
            .discussion-container {
889
                .posts-container {
890
                    .parent-container {
891
                        .show-content-button {
892
                            padding-left: $author-image-width + $author-image-margin;
893
                        }
894
                    }
895
                }
896
            }
897
        }
898
    }
899
 
900
    .no-search-results-container {
901
        .icon {
902
            height: 250px;
903
            width: 250px;
904
            margin-right: 0;
905
        }
906
    }
907
 
908
    .nested-v2-display-mode {
909
        .view-context-button {
910
            margin-left: $author-image-width + $author-image-margin;
911
            border-radius: $border-radius-lg;
912
        }
913
 
914
        .parent-container {
915
            .author-image-container {
916
                position: relative;
917
 
918
                &:after {
919
                    position: absolute;
920
                    top: calc(#{$author-image-width} + #{map-get($spacers, 2)});
921
                    content: "";
922
                    background-color: $gray-200;
923
                    width: 2px;
924
                    height: calc(100% - #{$author-image-width} + #{map-get($spacers, 2)});
925
                }
926
            }
927
        }
928
 
929
        .parent-container + .post-container {
930
            .author-image-container {
931
                img {
932
                    width: $author-image-width-sm !important; /* stylelint-disable-line declaration-no-important */
933
                }
934
            }
935
        }
936
    }
937
}
938
 
939
.path-mod-forum .unified-grader .nested-v2-display-mode,
940
.path-mod-forum .modal .nested-v2-display-mode {
941
    .post-subject {
942
        display: none;
943
    }
944
}
945
 
1441 ariadna 946
@include media-breakpoint-down(sm) {
1 efrain 947
    .path-mod-forum .unified-grader {
948
        .grader-grading-panel {
949
            width: 100%;
950
            position: fixed;
951
            height: calc(100vh - 50px);
952
            overflow: scroll;
953
            top: 50px;
954
        }
955
        .body-container {
956
            overflow: visible;
957
        }
958
    }
959
}
960
 
961
// End styling for mod_forum.
962
 
963
.maincalendar .calendarmonth td,
964
.maincalendar .calendarmonth th {
965
    border: 1px dotted $table-border-color;
966
}
967
 
968
.path-grade-report-grader h1 {
969
    text-align: inherit;
970
}
971
 
972
#page-mod-data-view #singleimage {
973
    width: auto;
974
}
975
 
976
.template_heading {
977
    margin-top: 10px;
978
}
979
 
980
.breadcrumb-button {
981
    margin-top: 4px;
982
}
983
 
984
.breadcrumb-button .singlebutton {
985
    float: left;
986
    margin-left: 4px;
987
}
988
 
989
.langmenu form {
990
    margin: 0;
991
}
992
// contributed by Paul Hibbitts, see http://msdn.microsoft@mixin com/en-us/library/ie/jj583807(v=vs.85).aspx
993
canvas {
994
    -ms-touch-action: auto;
995
}
996
 
997
div#dock {
998
    display: none;
999
}
1000
 
1001
// Choice module
1002
 
1003
// Lesson module
1004
 
1005
/** General styles (scope: all of lesson) **/
1006
.path-mod-lesson .invisiblefieldset.fieldsetfix {
1007
    display: block;
1008
}
1009
.path-mod-lesson .answeroption .checkbox label p {
1010
    display: inline;
1011
}
1012
.path-mod-lesson .slideshow {
1013
    overflow: auto;
1014
    padding: 15px;
1015
}
1016
#page-mod-lesson-view .branchbuttoncontainer .singlebutton button[type="submit"] {
1017
    white-space: normal;
1018
}
1019
#page-mod-lesson-view {
1020
    .vertical .singlebutton {
1021
        display: block;
1022
        + .singlebutton {
1023
            margin-left: 0;
1024
            margin-top: 1rem;
1025
        }
1026
    }
1441 ariadna 1027
    .fitem .felement .form-select {
1 efrain 1028
        align-self: flex-start;
1029
    }
1030
}
1031
.path-mod-lesson .generaltable td {
1032
    vertical-align: middle;
1033
    label {
1034
        margin-bottom: 0;
1035
    }
1036
    .highlight {
1037
        display: inline-block;
1038
        margin-left: 0.25rem;
1039
    }
1040
    input[type="checkbox"] {
1041
        display: block;
1042
    }
1043
}
1044
 
1045
.path-mod-wiki .wiki_headingtitle,
1046
.path-mod-wiki .midpad,
1047
.path-mod-wiki .wiki_headingtime {
1048
    text-align: inherit;
1049
}
1050
 
1051
.path-mod-wiki .wiki_contentbox {
1052
    width: 100%;
1053
}
1054
 
1055
.nav .caret {
1056
    margin-left: 4px;
1057
}
1058
 
1059
// Dividers
1060
.nav {
1061
    .divider {
1062
        overflow: hidden;
1063
        width: 0;
1064
    }
1065
}
1066
 
1067
// Usermenu
1068
.userloggedinas,
1069
.userswitchedrole,
1070
.loginfailures {
1071
    .usermenu {
1072
        .usertext {
1073
            float: left;
1074
            text-align: right;
1075
            margin-right: $spacer * 0.5;
1076
            height: 35px;
1077
            .meta {
1078
                font-size: $font-size-sm;
1079
                align-items: center;
1080
            }
1081
        }
1082
        .avatar {
1083
            img {
1084
                margin: 0;
1085
            }
1086
        }
1087
    }
1088
}
1089
 
1090
.userloggedinas .usermenu {
1091
    .userbutton .avatars {
1092
        position: relative;
1093
        display: inline-block;
1094
        .avatar {
1095
            &.current {
1096
                display: inline-block;
1097
                position: absolute;
1098
                bottom: 0;
1099
                right: 0;
1100
                width: 20px;
1101
                height: 20px;
1102
                border-radius: 50%;
1103
                img {
1104
                    vertical-align: baseline;
1105
                }
1106
                .userinitials.size-35 {
1107
                    width: 20px;
1108
                    height: 20px;
1109
                    border: $border-width solid $border-color;
1110
                    background-color: $white;
1111
                    font-size: $font-size-base * .6;
1112
                }
1113
            }
1114
            img {
1115
                width: inherit;
1116
                height: inherit;
1117
            }
1118
        }
1119
        .realuser {
1120
            width: 35px;
1121
            height: 35px;
1122
            display: inline-block;
1123
        }
1124
    }
1125
}
1126
 
1127
.userinitials {
1128
    background-color: $gray-200;
1129
    vertical-align: middle;
1130
    display: inline-flex;
1131
    align-items: center;
1132
    justify-content: center;
1133
    border-radius: 50%;
1134
    color: $gray-800;
1135
    font-weight: normal;
1136
    margin-right: $spacer * 0.25;
1137
    &.size-16,
1138
    &.size-30 {
1139
        font-size: 0.7rem;
1140
        width: 30px;
1141
        height: 30px;
1142
    }
1143
    &.size-35 {
1144
        width: 35px;
1145
        height: 35px;
1146
    }
1147
    &.size-50 {
1148
        width: 50px;
1149
        height: 50px;
1150
    }
1151
    &.size-64 {
1152
        width: 64px;
1153
        height: 64px;
1154
    }
1155
    &.size-100 {
1156
        width: 100px;
1157
        height: 100px;
1158
        font-size: $h2-font-size;
1159
    }
1160
}
1161
 
1162
img.userpicture {
1163
    margin-right: $spacer * 0.25;
1164
}
1165
 
1441 ariadna 1166
@include media-breakpoint-down(md) {
1 efrain 1167
    .usertext {
1168
        display: none;
1169
    }
1170
}
1171
 
1172
// Quiz module
1173
#page-mod-quiz-mod #id_reviewoptionshdr .col-md-3,
1174
#page-mod-quiz-mod #id_reviewoptionshdr .col-md-9 {
1175
    width: auto;
1176
    max-width: none;
1177
}
1178
 
1179
#page-mod-quiz-mod #id_reviewoptionshdr .fcontainer > .fitem {
1180
    float: left;
1181
    width: 20rem;
1182
    display: inline-block;
1183
    min-height: 12rem;
1184
}
1185
 
1186
#page-mod-quiz-mod #id_reviewoptionshdr .btn-link {
1187
    line-height: 1.5;
1188
    vertical-align: bottom;
1189
}
1190
#page-mod-quiz-mod #id_reviewoptionshdr .form-check {
1191
    width: auto;
1192
    height: 22px;
1193
    justify-content: flex-start;
1194
}
1195
 
1196
#page-mod-quiz-mod #id_reviewoptionshdr .review_option_item {
1197
    width: 90%;
1198
    height: 22px;
1199
}
1200
 
1201
// Question navigation block.
1202
.path-mod-quiz #mod_quiz_navblock {
1203
    .qnbutton {
1204
        text-decoration: none;
1205
        font-size: 14px;
1206
        line-height: 20px;
1207
        font-weight: normal;
1208
        background-color: $card-bg;
1209
        background-image: none;
1210
        height: 40px;
1211
        width: 30px;
1212
        border-radius: 3px;
1213
        border: 0;
1214
        overflow: hidden;
1215
        white-space: nowrap;
1216
        margin: 0 6px 6px 0;
1217
    }
1218
 
1219
    span.qnbutton {
1220
        cursor: default;
1221
        background-color: $input-disabled-bg;
1222
        color: $gray-700;
1223
    }
1224
 
1225
    a.qnbutton:hover,
1226
    a.qnbutton:active,
1227
    a.qnbutton:focus {
1228
        text-decoration: underline;
1229
    }
1230
 
1231
    .qnbutton .thispageholder {
1232
        border: 1px solid;
1233
        border-radius: 3px;
1234
        z-index: 1;
1235
    }
1236
 
1237
    .qnbutton.thispage .thispageholder {
1238
        border-width: 3px;
1239
    }
1240
 
1241
    .allquestionsononepage .qnbutton.thispage .thispageholder {
1242
        border-width: 1px;
1243
    }
1244
 
1245
    .qnbutton .trafficlight {
1246
        border: 0;
1247
        background: $card-bg none center / 10px no-repeat scroll;
1248
        height: 20px;
1249
        margin-top: 20px;
1250
        border-radius: 0 0 3px 3px;
1251
    }
1252
 
1441 ariadna 1253
    .qnbutton.correct .thispageholder {
1254
        border-color: shift-color($success, 10%);
1255
    }
1256
 
1257
    .qnbutton.incorrect .thispageholder {
1258
        border-color: shift-color($danger, 10%);
1259
    }
1260
 
1261
    .qnbutton.partiallycorrect .thispageholder {
1262
        border-color: shift-color($warning, 40%);
1263
    }
1264
 
1265
    .qnbutton.correct,
1266
    .qnbutton.correct .trafficlight {
1267
        background-color: #dff4d8; /* light green */
1268
    }
1269
 
1270
    .qnbutton.incorrect,
1271
    .qnbutton.incorrect .trafficlight {
1272
        background-color: #fdd; /* light red */
1273
    }
1274
 
1275
    .qnbutton.partiallycorrect,
1276
    .qnbutton.partiallycorrect .trafficlight {
1277
        background-color: #fcefdc; /* light yellow */
1278
    }
1279
 
1280
    .qnbutton.blocked,
1281
    .qnbutton.blocked .trafficlight,
1282
    .qnbutton.complete,
1283
    .qnbutton.complete .trafficlight,
1284
    .qnbutton.answersaved,
1285
    .qnbutton.answersaved .trafficlight,
1286
    .qnbutton.requiresgrading,
1287
    .qnbutton.requiresgrading .trafficlight {
1288
        background-color: $gray-300;
1289
    }
1290
 
1 efrain 1291
    .qnbutton.notyetanswered .trafficlight,
1292
    .qnbutton.invalidanswer .trafficlight {
1293
        background-color: $card-bg;
1294
    }
1295
 
1296
    .qnbutton.correct .trafficlight {
1441 ariadna 1297
        background-image: url([[pix:core|i/grade_correct]]);
1298
        color: $success;
1299
        background-size: 14px;
1 efrain 1300
    }
1301
 
1302
    .qnbutton.blocked .trafficlight {
1303
        background-image: url([[pix:core|t/locked]]);
1304
    }
1305
 
1306
    .qnbutton.notanswered .trafficlight,
1307
    .qnbutton.incorrect .trafficlight {
1441 ariadna 1308
        background-image: url([[pix:core|i/grade_incorrect]]);
1309
        color: $danger;
1310
        background-size: 14px;
1 efrain 1311
    }
1312
 
1313
    .qnbutton.partiallycorrect .trafficlight {
1441 ariadna 1314
        background-image: url([[pix:core|i/grade_partiallycorrect]]);
1315
        color: $warning;
1316
        background-size: 14px;
1 efrain 1317
    }
1318
 
1319
    .qnbutton.complete .trafficlight,
1320
    .qnbutton.answersaved .trafficlight,
1321
    .qnbutton.requiresgrading .trafficlight {
1441 ariadna 1322
        background-color: $gray-300;
1 efrain 1323
    }
1324
}
1325
 
1326
#page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer form input {
1327
    height: 1.4em;
1328
    vertical-align: middle;
1329
}
1330
 
1331
#page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer {
1332
    padding: 0.5em 0 0.5em 0.1em;
1333
    margin: 2px;
1334
}
1335
 
1441 ariadna 1336
/* Override the color of the quiz attempt icons for accessibility. */
1337
#attemptsform,
1338
.formulation .answer {
1339
    .icon.text-success {
1340
        color: shift-color($success, 10%) !important; /* stylelint-disable-line declaration-no-important */
1341
    }
1342
    .icon.text-danger {
1343
        color: shift-color($danger, 10%) !important; /* stylelint-disable-line declaration-no-important */
1344
    }
1345
    .icon.text-warning {
1346
        color: shift-color($warning, 40%) !important; /* stylelint-disable-line declaration-no-important */
1347
    }
1348
}
1349
 
1 efrain 1350
/* Countdown timer. */
1351
#page-mod-quiz-attempt #region-main {
1352
    overflow-x: inherit;
1353
}
1354
 
1355
#quiz-timer-wrapper {
1356
    display: none;
1357
    position: sticky;
1358
    justify-content: end;
1359
    top: $navbar-height + 5px;
1360
    z-index: $zindex-sticky;
1361
    #quiz-timer {
1362
        border: $border-width solid $red;
1363
        background-color: $white;
1364
    }
1365
}
1366
.pagelayout-embedded #quiz-timer-wrapper {
1367
    top: 5px;
1368
}
1369
 
1370
@for $i from 0 through 16 {
1371
    #quiz-timer-wrapper #quiz-timer.timeleft#{$i} {
1372
        $bg: lighten($red, ($i * 3%));
1373
        background-color: $bg;
1441 ariadna 1374
        color: color-contrast($bg);
1 efrain 1375
    }
1376
}
1377
 
1378
// Assign.
1379
.path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
1380
    top: auto;
1381
}
1382
 
1383
// This section removes the responsiveness from the form in the grading panel
1384
$popout-header-font-size: 1.5 * $font-size-base;
1385
// This can't be calculated from modal-title-padding because we are mixing px and rem units.
1386
$popout-header-height: 4rem;
1387
 
1388
.path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.popout .felement {
1389
    height: calc(100% - #{$popout-header-height});
1390
}
1391
 
1392
.path-mod-assign [data-region="grade-panel"] {
1393
    padding-top: $spacer;
1394
}
1395
.path-mod-assign [data-region="grade-panel"] .fitem > .col-md-3,
1396
.path-mod-assign [data-region="grade-panel"] .fitem > .col-md-9 {
1397
    width: 100%;
1398
    padding: 0;
1399
    max-width: 100%;
1400
    flex: none;
1401
}
1402
.path-mod-assign [data-region="grade-panel"] fieldset,
1403
.path-mod-assign [data-region="grade-panel"] .fitem.row {
1404
    margin: 0;
1405
}
1406
 
1407
.path-mod-assign [data-region="grade-panel"] .mform .fitem.has-popout .felement {
1408
    width: 100%;
1409
    overflow: auto;
1410
    height: calc(100% - 4rem);
1411
}
1412
 
1413
.path-mod-assign [data-region="grade-panel"] .mform .fitem .felement {
1414
    width: auto;
1415
}
1416
 
1417
// Now styles for the popout sections.
1418
 
1419
.path-mod-assign [data-region="grade-panel"] .popout {
1420
    background-color: $modal-content-bg;
1421
}
1422
 
1423
.path-mod-assign [data-region="grade-panel"] .fitem.has-popout {
1424
    background-color: $card-bg;
1425
    @include border-radius($card-border-radius);
1426
    border: $card-border-width solid $card-border-color;
1427
    padding: $card-spacer-x;
1428
    margin-bottom: $spacer;
1429
}
1430
.path-mod-assign [data-region="grade-panel"] .has-popout .col-md-3 {
1431
    border-bottom: $hr-border-width solid $hr-border-color;
1432
    margin-bottom: $spacer;
1433
}
1434
 
1435
 
1436
.path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 {
1437
    display: flex;
1438
    align-items: flex-start;
1439
    justify-content: space-between;
1440
    font-size: $popout-header-font-size;
1441
}
1442
 
1443
.path-mod-assign [data-region="grade-panel"] .popout [data-region="popout-button"] {
1444
    margin-top: 0;
1445
}
1446
 
1447
// Now style the fixed header elements.
1448
 
1449
.path-mod-assign [data-region="assignment-info"] {
1450
    overflow-y: hidden;
1451
}
1452
 
1453
.path-mod-assign [data-region="grading-navigation"] {
1454
    padding: 6px;
1455
}
1456
 
1457
.path-mod-assign [data-region="grade-actions"] {
1458
    padding: 10px;
1459
}
1460
 
1461
.path-mod-assign [data-region="user-info"] .img-rounded {
1462
    margin-top: 0;
1463
}
1464
 
1465
.path-mod-assign [data-region="grading-navigation-panel"] {
1466
    height: 85px;
1467
}
1468
 
1469
@media (max-width: 767px) {
1470
    .path-mod-assign [data-region="grading-navigation-panel"] {
1471
        height: auto;
1472
    }
1473
    .path-mod-assign [data-region="user-info"] {
1474
        margin-top: 1rem;
1475
    }
1476
}
1477
 
1478
.path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
1479
    width: auto;
1480
    display: inline-block;
1481
}
1482
 
1483
/**
1484
 * Assign feedback.
1485
 */
1486
.assignfeedback_editpdf_widget * {
1487
    box-sizing: content-box;
1488
}
1489
 
1490
.assignfeedback_editpdf_widget button {
1491
    box-sizing: border-box;
1492
}
1493
 
1494
.assignfeedback_editpdf_widget .commentcolourbutton img {
1495
    border-width: 0;
1496
}
1497
 
1498
.assignfeedback_editpdf_widget .label {
1499
    position: relative;
1500
    padding: $alert-padding-y $alert-padding-x;
1501
    margin-bottom: $alert-margin-bottom;
1502
    border: $alert-border-width solid transparent;
1441 ariadna 1503
    color: shift-color($info, $alert-color-scale);
1504
    border-color: shift-color($info, $alert-border-scale);
1 efrain 1505
    @include border-radius($alert-border-radius);
1441 ariadna 1506
    @include gradient-bg(shift-color($info, $alert-bg-scale));
1 efrain 1507
}
1508
 
1509
.assignfeedback_editpdf_menu {
1510
    padding: 0;
1511
}
1512
 
1513
.path-mod-assign [data-region="grade-panel"] .gradingform_guide .remark .commentchooser {
1514
    float: none;
1515
}
1516
.path-mod-assign [data-region="grade-panel"] .gradingform_guide .markingguideremark {
1517
    width: 100%;
1518
}
1519
.path-mod-assign [data-region="grade-panel"] .mform .fitem .felement[data-fieldtype="grading"] {
1520
    padding-left: $spacer;
1521
    padding-right: $spacer;
1522
}
1523
.path-mod-assign [data-region="grade-panel"] .showmarkerdesc,
1524
.path-mod-assign [data-region="grade-panel"] .showstudentdesc {
1525
    background-color: $card-bg;
1526
}
1527
 
1441 ariadna 1528
.path-mod-assign .gradingtable thead tr {
1529
    position: sticky;
1530
    top: $navbar-height;
1531
    z-index: 1;
1532
}
1533
 
1 efrain 1534
/**
1535
 * Mod LTI.
1536
 */
1537
.path-admin-mod-lti {
1538
    .btn .loader img,
1539
    #tool-list-loader-container .loader img {
1540
        height: auto;
1541
    }
1542
}
1441 ariadna 1543
 
1544
/**
1545
 * Mod Feedback.
1546
 */
1547
 
1548
.path-mod-feedback {
1549
    span.feedback_info {
1550
        font-weight: bold;
1551
    }
1552
    div.feedback_is_dependent {
1553
        background: $gray-600;
1554
    }
1555
    span.feedback_depend {
1556
        color: $danger;
1557
    }
1558
    hr.feedback_pagebreak {
1559
        height: 4px;
1560
        color: $gray-600;
1561
        background-color: $gray-600;
1562
        border: 0;
1563
        margin: 0;
1564
    }
1565
    .feedback_bar_image {
1566
        height: 10px;
1567
    }
1568
    #analysis-form {
1569
        label {
1570
            display: inline;
1571
        }
1572
    }
1573
    .templateslist {
1574
        td.cell.action {
1575
            width: 10%;
1576
        }
1577
        th.header.action {
1578
            width: 10%;
1579
        }
1580
    }
1581
    .feedback-item-label {
1582
        width: 100%;
1583
    }
1584
    // Feedback edit form.
1585
    #feedback_edit_form {
1586
        [id*=_feedback_item_].feedback_itemlist,
1587
        .feedback_itemlist.sortable-list-is-dragged {
1588
            padding: map-get($spacers, 3);
1589
            border: $border-width solid $border-color;
1590
            background-color: $white;
1591
            position: relative;
1592
            @include border-radius();
1593
            .itemname {
1594
                margin-right: map-get($spacers, 5);
1595
            }
1596
            .itemactions {
1597
                position: absolute;
1598
                top: map-get($spacers, 3);
1599
                right: map-get($spacers, 3);
1600
            }
1601
            &.sortable-list-current-position {
1602
                background-color: $light;
1603
            }
1604
        }
1605
        .sortable-list-is-dragged {
1606
            opacity: .75;
1607
            max-width: $course-content-maxwidth;
1608
        }
1609
        .loading-icon {
1610
            position: absolute;
1611
            left: 50%;
1612
            top: calc(50% - .5rem);
1613
        }
1614
    }
1615
 
1616
    // Templates page.
1617
    &#page-mod-feedback-manage_templates {
1618
        .coursetemplates,
1619
        .publictemplates {
1620
            .no-overflow {
1621
                overflow: visible;
1622
            }
1623
            .action-menu .menubar {
1624
                justify-content: end;
1625
            }
1626
        }
1627
    }
1628
 
1629
    // Analysis page.
1630
    table.analysis {
1631
        width: 100%;
1632
        border-top: $border-width solid $border-color;
1633
        margin-top: 10px;
1634
        &.itemtype_textarea td {
1635
            padding: 4px 0;
1636
        }
1637
        tr:first-child th {
1638
            padding-top: 10px;
1639
        }
1640
        tr:hover {
1641
            background: $gray-300;
1642
        }
1643
        td.singlevalue:before,
1644
        td.optionname:before {
1645
            content: '- ';
1646
        }
1647
        tr.isempty {
1648
            display: none;
1649
        }
1650
    }
1651
 
1652
    // Responses list.
1653
    #showentrytable td.cell.completed_timemodified,
1654
    #showentryanontable td.cell.random_response {
1655
        font-weight: bold;
1656
    }
1657
 
1658
    #showentrytable td.cell.userpic,
1659
    #showentrytable td.cell.deleteentry,
1660
    #showentryanontable td.cell.deleteentry {
1661
        width: 10px;
1662
    }
1663
 
1664
    // Responses navigation.
1665
    .response_navigation {
1666
        margin: map-get($spacers, 2) 0;
1667
        a {
1668
            display: block;
1669
            &.back_to_list {
1670
                text-align: center;
1671
            }
1672
        }
1673
        .prev_response {
1674
            text-align: left;
1675
            &:before {
1676
                /*rtl:raw:
1677
                content: ' â–º ';
1678
                */
1679
                /*rtl:remove*/
1680
                content: ' â—„ ';
1681
            }
1682
        }
1683
        .next_response {
1684
            text-align: right;
1685
            &:after {
1686
                /*rtl:raw:
1687
                content: ' â—„ ';
1688
                */
1689
                /*rtl:remove*/
1690
                content: ' â–º ';
1691
            }
1692
        }
1693
    }
1694
}