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
/* course.less */
2
$rui-date-margin-left: 53px;
3
$activity-item-background: theme-color-level('primary', -12) !default;
4
$activity-item-border: theme-color-level('primary', -2) !default;
5
$activity-item-color: $body-color;
6
$activity-item-hover: theme-color-level('primary', -12) !default;
7
$activity-add-hover: theme-color-level('primary', -10) !default;
8
 
1441 ariadna 9
$category-box-padding: 20px !default;
10
$course-cover-height: 240px !default;
1 efrain 11
 
12
/* Cards */
13
.rui-course-card-img-top {
14
    margin: 0;
1441 ariadna 15
    position: relative;
1 efrain 16
 
17
    width: 100%;
1441 ariadna 18
    height: $course-cover-height;
1 efrain 19
 
20
    background-repeat: no-repeat;
21
    background-size: cover;
22
    background-position: center;
1441 ariadna 23
    border-radius: $btn-border-radius - 1px;
1 efrain 24
 
1441 ariadna 25
    .block-recentlyaccessedcourses &,
26
    .block_starredcourses & {
27
        height: 140px;
1 efrain 28
    }
29
 
1441 ariadna 30
    .rui-course-listitem--cat & {
31
        margin-bottom: -31px;
32
    }
1 efrain 33
}
34
 
1441 ariadna 35
.rui-course-card-img {
36
    margin: 0;
37
 
38
    width: 100%;
39
    height: $course-cover-height;
40
 
41
    background-repeat: no-repeat;
42
    background-size: cover;
43
    background-position: center;
44
    border-radius: $btn-border-radius;
45
 
46
    position: relative;
47
    overflow: hidden;
48
 
49
    img {
50
        width: auto;
51
        height: 100%;
52
        object-fit: cover;
53
        position: absolute;
54
    }
55
}
56
 
1 efrain 57
.rui-course-card-deck {
58
    display: flex;
59
    flex-direction: column;
60
    align-items: stretch;
1441 ariadna 61
    gap: 20px;
1 efrain 62
 
63
    .rui-course-card {
64
        width: 100%;
65
    }
66
 
67
    #blocks-dashboardrightblock & {
68
        display: block;
69
    }
70
 
71
    &:empty {
72
        display: none;
73
    }
74
}
75
 
76
.rui-course-desc {
1441 ariadna 77
    color: $body-color-secondary;
78
    font-size: 1.125rem;// 18px.
1 efrain 79
 
1441 ariadna 80
    .theme-dark & {
81
        color: $dm-body-color-secondary;
1 efrain 82
    }
83
 
1441 ariadna 84
    strong {
85
        color: $body-color;
1 efrain 86
 
1441 ariadna 87
        .theme-dark & {
88
            color: $dm-body-color;
89
        }
90
    }
91
 
92
    @include media-breakpoint-between(xs, sm) {
93
        font-size: $font-size-md;
94
    }
1 efrain 95
}
96
 
1441 ariadna 97
.rui-dashboard-bottom {
98
    .block:first-of-type {
99
        margin-top: 30px;
100
    }
1 efrain 101
}
102
 
1441 ariadna 103
#block-region-dmiddleblocks,
1 efrain 104
.page-mycourses,
105
.rui-dashboard-main,
106
.rui-dashboard-bottom,
107
.rui-dashboard-top {
1441 ariadna 108
    .block-myoverview {
1 efrain 109
        .rui-course-card-deck {
110
            display: grid;
111
            flex-direction: column;
112
            align-items: stretch;
113
 
1441 ariadna 114
            @include media-breakpoint-up(xl) {
115
                grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
116
                gap: 40px;
117
            }
118
 
119
            @include media-breakpoint-between(md, lg) {
120
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
121
                gap: 40px;
122
            }
123
 
124
            @include media-breakpoint-between(xs, sm) {
125
                grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
126
                gap: 10px;
127
            }
1 efrain 128
        }
129
    }
1441 ariadna 130
 
1 efrain 131
}
132
 
1441 ariadna 133
.block-recentlyaccessedcourses,
134
.block_starredcourses {
1 efrain 135
    position: relative;
136
 
137
    .rui-course-card-deck {
138
        display: grid;
139
        flex-direction: column;
140
        align-items: stretch;
141
 
1441 ariadna 142
        @include media-breakpoint-up(md) {
143
            grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
144
            gap: 20px;
145
        }
146
 
147
        @include media-breakpoint-between(xs, sm) {
148
            grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
149
            gap: 10px;
150
        }
1 efrain 151
    }
152
}
153
 
154
 
1441 ariadna 155
.courses,
156
.rui-category-browse {
157
    position: relative;
1 efrain 158
 
1441 ariadna 159
    .rui-course-card-deck {
160
        display: grid;
161
        flex-direction: column;
162
        align-items: stretch;
163
 
164
        @include media-breakpoint-up(lg) {
165
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
166
            gap: 40px;
167
 
168
            .rui-course-card-title {
169
                font-size: 1.25rem;
170
            }
1 efrain 171
        }
1441 ariadna 172
 
173
        @include media-breakpoint-only(lmd) {
174
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
175
            gap: 40px;
176
        }
177
 
178
        @include media-breakpoint-only(md) {
179
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
180
            gap: 40px;
181
        }
182
 
183
        @include media-breakpoint-between(xs, sm) {
184
            grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
185
            gap: 10px;
186
        }
1 efrain 187
    }
188
}
189
 
190
// Right or left column
191
#blocks-dashboardleftblock,
192
#blocks-dashboardrightblock {
193
    .block-myoverview {
194
        .paged-content-page-container {
195
            overflow-x: auto;
196
        }
197
 
198
        .dropdown-menu {
199
            width: 100%;
200
        }
201
 
202
        .rui-course-card-deck {
203
            display: grid;
204
            grid-auto-flow: column;
205
            grid-gap: 20px;
206
 
207
            .dropdown-menu {
208
                width: calc(100% - 8px);
209
            }
210
 
211
            .rui-course-card {
212
                width: 250px;
213
            }
214
        }
215
 
216
        .dropdown,
217
        .btn {
218
            width: 100%;
219
 
220
            span {
221
                @extend .text-truncate;
222
                max-width: 180px;
223
            }
224
        }
225
    }
226
}
227
 
228
.rui-course-card {
1441 ariadna 229
    padding: 0 0 10px;
230
    display: grid;
231
    align-content: flex-start;
1 efrain 232
 
1441 ariadna 233
    background-color: $container-bg;
234
    //border: 1px solid $border-color;
235
    border-radius: $btn-border-radius;
236
 
1 efrain 237
    position: relative;
238
 
1441 ariadna 239
    .block-myoverview & {
240
        display: grid;
241
    }
1 efrain 242
 
1441 ariadna 243
    .course_category_tree & {
244
        display: grid;
245
        overflow: hidden;
1 efrain 246
    }
247
 
1441 ariadna 248
    .theme-dark & {
249
        background-color: $dm-container-bg;
250
        border-color: $dm-border-color;
251
    }
252
 
1 efrain 253
    .customfield {
254
        font-size: $font-size-xs;
255
        color: $body-color-light;
256
 
1441 ariadna 257
        @include media-breakpoint-up(md) {
258
            padding: 0 20px;
259
            margin-top: 5px;
260
        }
261
 
262
        @include media-breakpoint-between(xs, sm) {
263
            padding: 0 10px;
264
            margin-top: 5px;
265
        }
266
 
1 efrain 267
        .theme-dark & {
268
            color: $body-color-light;
269
        }
270
 
1441 ariadna 271
        .rui-course--list & {
272
            padding: 0;
273
            margin: 10px 0 0;
274
 
275
            img {
276
                max-width: 20px;
277
                max-height: 20px;
278
            }
279
        }
280
 
1 efrain 281
        .customfieldname {
282
            font-weight: $font-weight-medium;
283
        }
284
 
1441 ariadna 285
        &.rui-cf-customcourselogo,
286
        &.rui-cf-customcoursedmlogo,
287
        &.rui-cf-customcoursefavicon,
288
        &.rui-customfield_customcoursefavicon,
289
        &.rui-customfield_picture,
1 efrain 290
        &.customfield_customcoursefavicon,
291
        &.customfield_picture {
292
            display: none;
293
        }
294
    }
295
 
296
    #blocks-dashboardleftblock &,
297
    #blocks-dashboardrightblock & {
298
        margin-bottom: 20px;
299
 
300
        &:last-of-type {
301
            margin-bottom: 0;
302
        }
303
    }
304
 
305
    .dropdown {
306
        position: absolute;
307
        top: 0;
308
        right: 0;
1441 ariadna 309
        z-index: 3;
1 efrain 310
    }
311
}
312
 
1441 ariadna 313
.rui-course-card-body {
314
    margin: 10px $category-box-padding 0;
315
    flex-wrap: wrap;
316
 
317
    .block-recentlyaccessedcourses &,
318
    .block_starredcourses & {
319
        @include media-breakpoint-up(md) {
320
            margin: 10px 20px 0;
321
        }
322
 
323
        @include media-breakpoint-between(xs, sm) {
324
            margin: 10px 10px 0;
325
        }
326
    }
327
 
328
    .summary {
329
        p {
330
            margin-bottom: 0;
331
        }
332
    }
1 efrain 333
}
334
 
1441 ariadna 335
.rui-course-card-wrapper {
336
    #page-enrol-index & {
337
        margin-bottom: $category-box-padding - 15px;
338
    }
339
}
340
 
1 efrain 341
.rui-course-card--dimmed {
342
    opacity: .5;
343
    transition: opacity 350ms ease;
344
 
345
    &:hover {
346
        opacity: 1;
347
 
348
        img {
349
            filter: grayscale(0%);
350
        }
351
    }
352
 
353
    img {
354
        filter: grayscale(100%);
355
    }
356
}
357
 
358
.rui-course-cat-badge {
1441 ariadna 359
    margin-bottom: 3px;
1 efrain 360
    display: grid;
361
 
1441 ariadna 362
    font-weight: $font-weight-bold;
363
    color: $body-color-light;
364
 
365
    @include media-breakpoint-up(md) {
366
        font-size: $font-size-sm;
367
    }
368
 
369
    @include media-breakpoint-between(xs, sm) {
370
        font-size: 11px;
371
 
372
        svg {
373
            width: 12px;
374
            height: 12px;
375
        }
376
    }
377
 
378
    .block-recentlyaccessedcourses &,
379
    .block_starredcourses & {
380
        font-size: 0.688rem; // 11px
381
    }
382
 
1 efrain 383
    .theme-dark & {
384
        color: $dm-body-color-light;
385
    }
386
}
387
 
388
a.rui-course-cat-badge:hover {
1441 ariadna 389
    background-color: $gray-200;
390
 
1 efrain 391
    color: $gray-500;
392
    text-decoration: none;
393
 
394
    .theme-dark & {
1441 ariadna 395
        background-color: $dm-gray-200;
396
        color: $dm-gray-800;
1 efrain 397
    }
398
}
399
 
400
.rui-course-hidden-badge {
1441 ariadna 401
    padding: .25rem .75rem;
1 efrain 402
    border-radius: $btn-border-radius;
403
 
404
    background-color: $red-100;
1441 ariadna 405
    font-size: $font-size-xs;
1 efrain 406
    font-weight: $font-weight-medium;
407
    color: $red-700;
408
}
409
 
1441 ariadna 410
.rui-course-card-progress-bar,
1 efrain 411
.rui-course-card-footer-progress {
412
    align-self: flex-end;
413
 
1441 ariadna 414
    position: relative;
415
    margin: 10px 0;
416
    line-height: 25px;
417
 
418
    .rui-mo-progress-text {
419
        background-color: $gray-900;
420
        color: $gray-100;
421
 
422
        position: absolute;
423
        top: 4px;
424
        padding: 1px 6px;
425
 
426
        font-size: 11px!important;
427
        line-height: 1.5;
428
        border-radius: $btn-border-radius;
429
    }
430
 
431
    @include media-breakpoint-between(xs, sm) {
432
        svg {
433
            display: none;
434
        }
435
    }
436
 
1 efrain 437
    .rui-course-listitem & {
438
        padding: 0 20px 10px;
439
        border-top: none;
1441 ariadna 440
 
441
        @include media-breakpoint-up(md) {
442
            padding: 0 20px 10px;
443
        }
444
 
445
        @include media-breakpoint-between(xs, sm) {
446
            padding: 0 10px 5px;
447
        }
1 efrain 448
    }
449
 
450
    .rui-progress-100 & {
451
        border-color: var(--primary-color-100);
452
    }
453
}
454
 
1441 ariadna 455
.rui-mo-progress-text {
456
    .rui-mo-progress-0 & {
457
        left: 0!important;
458
    }
459
    .rui-mo-progress-100 & {
460
        right: 0!important;
461
        left: auto!important;
462
    }
463
}
1 efrain 464
 
1441 ariadna 465
.rui-customfields-container {
466
    @include media-breakpoint-up(md) {
467
        margin: 15px $category-box-padding 0;
468
    }
1 efrain 469
 
1441 ariadna 470
    @include media-breakpoint-between(xs,sm) {
471
        margin: 15px 10px 0;
1 efrain 472
    }
473
}
474
 
1441 ariadna 475
.rui-course-card-wrapper + .rui-customfields-container {
476
    margin-top: 0;
477
}
478
 
479
@if variable-exists(courseprogressbar) {
480
    @if $courseprogressbar==0 {
481
        .rui-course-card-progress-bar {
482
            display: none;
483
        }
484
    }
485
}
486
 
1 efrain 487
.customfields-container,
488
.rui-customfields-container {
489
    font-size: $font-size-xs;
490
    color: $body-color-secondary;
491
 
492
    .customfieldname {
493
        font-weight: $font-weight-bold;
494
    }
495
}
496
 
497
.rui-course-card-icons {
498
    position: absolute;
499
    top: 10px;
500
    left: 10px;
1441 ariadna 501
    z-index: 2;
1 efrain 502
 
503
    display: inline-flex;
504
 
505
    //Container for SVG
506
    .icon {
507
        margin-right: .35rem;
508
        padding: 6px;
509
 
510
        width: 18px;
511
        height: 18px;
512
        color: $white;
513
 
514
        background-color: rgba($black, 0.2);
1441 ariadna 515
        backdrop-filter: blur(2rem);
516
        -webkit-backdrop-filter: blur(2rem);
1 efrain 517
 
1441 ariadna 518
        border-radius: $btn-border-radius-xl;
1 efrain 519
 
520
        .rui-course--list & {
521
            background-color: $gray-500;
522
 
523
            .theme-dark & {
524
                background-color: $dm-gray-100;
525
            }
526
        }
527
    }
528
 
529
    //Moodle 4.0
530
    .text-primary:not(.hidden) {
531
        margin-right: .35rem;
532
        padding: 6px;
533
 
534
        width: 18px;
535
        height: 18px;
536
        color: $white !important;
537
 
538
        display: flex;
539
        align-content: center;
540
        justify-content: center;
541
 
542
        background-color: rgba($black, 0.2);
1441 ariadna 543
        backdrop-filter: blur(2rem);
544
        -webkit-backdrop-filter: blur(2rem);
1 efrain 545
 
1441 ariadna 546
        border-radius: $btn-border-radius-xl;
1 efrain 547
        box-sizing: content-box;
548
 
549
        .theme-dark & {
550
            filter: invert(0);
551
        }
552
    }
553
 
554
    .icon:not(.hidden) {
555
        display: inline-grid;
556
    }
557
 
558
    .rui-course-card--noimg & {
559
        position: relative;
560
        top: 0;
561
        left: 0;
562
 
563
        &:empty {
564
            display: none;
565
        }
566
    }
567
}
568
 
569
.rui-course-card-icons--right {
570
    position: absolute;
571
    top: 10px;
1441 ariadna 572
    left: 10px;
573
    z-index: 3;
1 efrain 574
 
575
    display: inline-flex;
1441 ariadna 576
    font-size: 12px;
1 efrain 577
 
578
    .rui-icon-container {
579
        color: $white;
580
        font-weight: $font-weight-bold;
581
        text-transform: uppercase;
582
 
583
        padding: 6px;
584
 
585
        display: flex;
586
        align-items: center;
587
        justify-content: center;
588
 
1441 ariadna 589
        width: 32px;
590
        height: 32px;
1 efrain 591
        color: $white;
592
 
593
        background-color: rgba($black, 0.2);
1441 ariadna 594
        backdrop-filter: blur(2rem);
595
        -webkit-backdrop-filter: blur(2rem);
1 efrain 596
 
1441 ariadna 597
        border-radius: $btn-border-radius-xl;
1 efrain 598
 
599
        .theme-dark & {
600
            filter: invert(0);
601
        }
602
 
603
        .rui-course--list & {
604
            background-color: $gray-500;
605
 
606
            .theme-dark & {
607
                background-color: $dm-gray-100;
608
            }
609
        }
610
    }
611
}
612
 
1441 ariadna 613
.rui-myoverview-action-menu {
1 efrain 614
    position: absolute;
1441 ariadna 615
    top: 0;
616
    right: 0;
1 efrain 617
    z-index: 3;
1441 ariadna 618
}
1 efrain 619
 
1441 ariadna 620
.rui-coursemenu-btn {
621
    margin: 10px;
1 efrain 622
    width: 30px;
623
    height: 30px;
624
    display: inline-grid;
625
    align-content: center;
626
    justify-content: center;
627
 
628
    background-color: rgba($black, 0.2);
1441 ariadna 629
    backdrop-filter: blur(2rem);
630
    -webkit-backdrop-filter: blur(2rem);
1 efrain 631
    border: none;
632
 
633
    color: $white;
634
 
635
    border-radius: $btn-border-radius;
636
 
637
    .rui-course-listitem & {
1441 ariadna 638
        top: -20px;
639
        right: 14px;
1 efrain 640
    }
641
 
642
    .rui-course-list-body & {
1441 ariadna 643
        @include media-breakpoint-up(md) {
644
            color: $body-color;
645
 
646
            .theme-dark & {
647
                color: $dm-body-color;
648
            }
649
        }
1 efrain 650
    }
651
 
652
}
653
 
654
.rui-course-listitem {
1441 ariadna 655
    list-style: none;
1 efrain 656
    margin: 0 0 5px;
1441 ariadna 657
    border: 1px solid $border-color!important;
1 efrain 658
    border-radius: $btn-border-radius;
659
 
660
    .theme-dark & {
1441 ariadna 661
        border-color: $dm-border-color;
1 efrain 662
    }
663
 
664
    .rui-course-card-title .icon {
665
        margin-right: .35rem;
666
    }
667
}
668
 
1441 ariadna 669
.rui-card-course-contacts {
670
    width: 100%;
671
    display: inline-flex;
672
    flex-wrap: wrap;
673
    align-items: center;
1 efrain 674
 
1441 ariadna 675
    .rui-contant-name {
676
        font-size: $font-size-sm;
677
        font-weight: $font-weight-medium;
678
        color: $body-color;
1 efrain 679
 
1441 ariadna 680
        .theme-dark & {
681
            color: $dm-body-color;
1 efrain 682
        }
683
    }
684
 
1441 ariadna 685
    #page-enrol-index & {
1 efrain 686
        display: none;
1441 ariadna 687
        visibility: hidden;
1 efrain 688
    }
689
 
1441 ariadna 690
    .rui-card-avatar {
691
        width: 36px;
692
        height: 36px;
693
        margin: -3px;
694
        border: 3px solid $container-bg;
695
        border-radius: $btn-border-radius-lg;
696
        position: relative;
1 efrain 697
 
1441 ariadna 698
        .theme-dark & {
699
            border-color: $dm-container-bg;
700
        }
1 efrain 701
    }
702
 
1441 ariadna 703
    .rui-card-contact:hover {
704
        z-index: 3;
1 efrain 705
    }
706
}
707
 
708
.rui-course-card-link {
709
    display: flex;
1441 ariadna 710
    justify-content: space-between;
1 efrain 711
    align-content: center;
712
}
713
 
714
.rui-course-list-title {
715
    font-size: $font-size-base;
1441 ariadna 716
    font-weight: $font-weight-bold;
1 efrain 717
 
718
    a {
719
        color: $body-color;
720
 
721
        .theme-dark & {
722
            color: $dm-body-color;
723
        }
724
 
725
        &:hover {
726
            color: $link-color;
727
 
728
            .theme-dark & {
729
                color: $dm-link-color;
730
            }
731
        }
732
    }
733
}
734
 
735
.rui-course-card-title {
736
    font-weight: $font-weight-bold;
737
    line-height: 1.3;
738
 
1441 ariadna 739
    @include media-breakpoint-up(md) {
740
        font-size: 1.125rem; // 18px.
741
    }
742
 
743
    @include media-breakpoint-between(xs, sm) {
744
        font-size: 1rem;
745
    }
746
 
747
    .block-recentlyaccessedcourses &,
748
    .block_starredcourses & {
749
        font-size: $font-size-md;
750
    }
751
 
752
    .theme-primary.icon {
753
        .theme-dark {
754
            color: var(--primary-color-300);
755
        }
756
    }
757
 
1 efrain 758
    a {
1441 ariadna 759
        font-weight: $font-weight-bold;
1 efrain 760
        color: $body-color;
1441 ariadna 761
        text-decoration: none;
1 efrain 762
 
1441 ariadna 763
        &:before {
764
            display: none;
765
        }
766
 
767
        .block-recentlyaccessedcourses &,
768
        .block_starredcourses & {
769
            display: grid;
770
        }
771
 
1 efrain 772
        .theme-dark & {
773
            color: $dm-body-color;
774
        }
775
 
776
        &:hover {
777
            color: $link-color;
778
 
779
            .theme-dark & {
780
                color: $dm-link-color;
781
            }
782
        }
783
    }
784
}
785
 
786
.rui-course-card-text {
1441 ariadna 787
    margin-bottom: 16px;
788
    padding-right: 7px;
1 efrain 789
    max-height: $max-course-card-text-height;
790
    overflow-y: auto;
791
 
1441 ariadna 792
    color: $body-color-light;
1 efrain 793
 
1441 ariadna 794
    #page-enrol-index & {
795
        display: none;
796
        visibility: hidden;
797
    }
798
 
799
    @include media-breakpoint-up(md) {
800
        font-size: $font-size-sm;
801
    }
802
 
803
    @include media-breakpoint-between(xs, sm) {
804
        font-size: $font-size-xs;
805
    }
806
 
1 efrain 807
    .rui-course-card--noimg & {
808
        max-height: $max-course-card-text-height + 200px;
809
    }
810
 
1441 ariadna 811
    .theme-dark & {
812
        color: $dm-body-color-light;
813
    }
814
 
815
    .no-overflow {
816
        overflow: hidden;
817
    }
818
 
819
    img {
820
        max-width: 100%;
821
        height: auto;
822
        margin-left: 0;
823
        margin-right: 0;
824
    }
825
 
1 efrain 826
    h1 {
827
        font-size: 15px;
828
    }
829
 
830
    h2 {
831
        font-size: 14px;
832
    }
833
 
834
    h3 {
835
        font-size: 13px;
836
    }
837
 
838
    h4 {
839
        font-size: 12px;
840
    }
841
}
842
 
843
.rui-course-list-body {
1441 ariadna 844
    position: relative;
1 efrain 845
 
1441 ariadna 846
    [data-region="favourite-icon"] {
847
        line-height: 1;
848
    }
1 efrain 849
 
1441 ariadna 850
    @include media-breakpoint-up(md) {
851
        padding: 20px;
852
    }
1 efrain 853
 
1441 ariadna 854
    @include media-breakpoint-between(xs, sm) {
855
        padding: 10px;
1 efrain 856
    }
857
 
1441 ariadna 858
    .rui-course-card-title {
859
        .icon:not(.hidden) {
860
            display: inline;
1 efrain 861
        }
862
    }
863
 
864
}
865
 
866
//UI for Course Card - Finished
867
.rui-progress-100 {
868
 
869
    background: $green-100;
1441 ariadna 870
    background: linear-gradient(280deg, rgba($white, 0) 40%, rgba($green-100, 1) 100%);
1 efrain 871
 
872
    .theme-dark & {
873
        border-color: $green-800;
874
        background: $green-900;
1441 ariadna 875
        background: linear-gradient(280deg, rgba($dm-container-bg, 0) 40%, rgba($green-900, 1) 100%);
1 efrain 876
    }
877
}
878
 
879
 
880
/* COURSE CONTENT */
881
.rui-category-label .icon {
882
    .theme-dark & {
883
        filter: invert(1);
884
    }
885
}
886
 
1441 ariadna 887
.rui-category-label a {
888
    &::after {
889
        display: none;
890
    }
891
}
892
 
1 efrain 893
.section_add_menus {
894
    text-align: right;
895
    clear: both;
896
}
897
 
898
.section_add_menus .horizontal div,
899
.section_add_menus .horizontal form {
900
    display: inline;
901
}
902
 
903
.section_add_menus optgroup {
904
    font-weight: normal;
905
    font-style: italic;
906
}
907
 
908
/*rtl:ignore*/
909
.section_add_menus .urlselect {
910
    text-align: left;
911
    margin-left: .4em;
912
}
913
 
914
/*rtl:ignore*/
915
.section_add_menus .urlselect select {
916
    margin-left: .2em;
917
}
918
 
919
.sitetopic ul.section {
920
    margin: 0;
921
}
922
 
923
body:not(.editing) .sitetopic ul.section {
924
    padding-left: 0;
925
 
926
    .label .mod-indent-outer {
927
        padding-left: 0;
928
    }
929
}
930
 
931
.section {
932
    .side {
933
        &.left {
934
            float: left;
935
        }
936
 
937
        &.right {
938
            float: right;
939
            clear: right;
940
        }
941
    }
942
 
943
    .spinner {
944
        height: 30px;
945
        width: 30px;
946
    }
947
 
948
    .activity {
949
 
950
        .contentwithoutlink,
951
        .activityinstance {
952
            min-width: 40%;
953
            display: table-cell;
1441 ariadna 954
            padding-right: 4px;
1 efrain 955
            min-height: 2em;
956
 
957
            >a {
958
                display: inline-block;
959
                text-indent: 0;
960
                padding-left: 0;
961
 
962
                font-weight: $font-weight-bold;
963
                color: $body-color;
964
            }
965
 
966
            .dimmed {
967
                .activityicon {
968
                    opacity: .7;
969
                }
970
            }
971
        }
972
 
973
        .stealth {
974
            color: $text-muted;
975
        }
976
 
977
        a.stealth,
978
        a.stealth:hover {
979
            color: $link-color !important;
980
            /* stylelint-disable-line declaration-no-important */
981
        }
982
 
983
        &.indented {
984
            .activity-item {
1441 ariadna 985
                border: 0;
1 efrain 986
 
1441 ariadna 987
                @include media-breakpoint-up(md) {
988
                    margin-left: 63px;
989
                }
1 efrain 990
 
1441 ariadna 991
                @include media-breakpoint-between(xs, sm) {
992
                    margin-left: 20px;
1 efrain 993
                }
994
            }
995
        }
996
    }
997
 
998
    .label {
999
 
1000
        .contentwithoutlink,
1001
        .activityinstance {
1002
            display: block;
1003
            height: inherit;
1004
        }
1005
 
1006
        @include media-breakpoint-up(sm) {
1007
            .mod-indent-outer {
1008
                display: block;
1009
            }
1010
        }
1011
    }
1012
 
1013
    /*.filler {
1014
        // This must be sized like an icon to fill the space.
1015
        width: 16px;
1016
        height: 16px;
1017
        padding: 0;
1018
        margin: 0 ($spacer * 0.5);
1019
        display: inline-block;
1020
    }*/
1021
 
1022
    .activity.editor_displayed {
1023
 
1024
        a.editing_title,
1025
        .moodle-actionmenu {
1026
            display: none;
1027
        }
1028
 
1029
        div.activityinstance {
1030
            padding-right: initial;
1031
 
1032
            input {
1033
                margin-bottom: initial;
1034
                padding-top: initial;
1035
                padding-bottom: initial;
1036
                vertical-align: text-bottom;
1037
            }
1038
        }
1039
    }
1040
}
1041
 
1042
.section .activity .activityinstance,
1043
.section .activity .activityinstance div {
1044
    display: inline-block;
1045
}
1046
 
1047
.activityinstance {
1048
    font-size: $font-size-base;
1049
}
1050
 
1051
.editing_show+.editing_assign,
1052
.editing_hide+.editing_assign {
1053
    // if roles icon missing, add space
1054
    margin-left: 20px;
1055
}
1056
 
1057
.section .activity .commands {
1058
    white-space: nowrap;
1059
    display: inline-block;
1060
 
1061
    .menubar {
1062
        flex-wrap: wrap;
1063
    }
1064
}
1065
 
1066
.section .activity.modtype_label.label {
1067
    padding: 20px 0;
1068
    border: 0;
1069
}
1070
 
1071
// Moodle 4.
1072
.topics+.single-section {
1073
    margin-top: 30px;
1074
}
1075
 
1076
.section li.activity {
1441 ariadna 1077
    padding: 0;
1078
    margin: .25rem 0;
1 efrain 1079
    clear: both;
1080
 
1081
    position: relative;
1082
    transition: $transition-base;
1083
 
1084
    &:last-child {
1441 ariadna 1085
        padding: 0;
1086
        margin-bottom: 0;
1 efrain 1087
    }
1088
 
1089
    // &:before {
1090
    //     content: '';
1091
    //     background-color: $border-color;
1092
 
1093
    //     position: absolute;
1094
    //     left: 48px;
1095
    //     bottom: 0;
1096
 
1097
    //     width: calc(100% - 64px);
1098
    //     height: 1px;
1099
 
1100
    //     .theme-dark & {
1101
    //         background-color: $dm-border-color;
1102
    //     }
1103
    // }
1104
}
1105
 
1106
.section li.activity {
1107
    border-color: var(--primary-color-100);
1108
 
1109
    .theme-dark & {
1110
        border-color: $dm-gray-300;
1111
    }
1112
}
1113
 
1114
.section li.activity.drop-up {
1115
    border-top: 30px solid var(--primary-color-100);
1116
 
1117
    .theme-dark & {
1118
        border-color: $dm-gray-400;
1119
    }
1120
}
1121
 
1122
.editing .activity-item {
1123
    cursor: move
1124
}
1125
 
1126
 
1127
.section .activity .activityinstance .groupinglabel {
1128
    padding-left: 30px;
1129
}
1130
 
1131
.section .activity .contentafterlink {
1132
    font-size: $font-size-md;
1133
}
1134
 
1135
.section .activity .availabilityinfo {
1136
    font-size: $font-size-xs;
1137
}
1138
 
1139
.section .activity .contentafterlink p {
1140
    margin: 0 0 .25rem 0;
1141
    color: $body-color-secondary;
1142
    font-size: $font-size-md;
1143
 
1144
    .theme-dark & {
1145
        color: $dm-body-color-secondary;
1146
    }
1147
}
1148
 
1149
.course-content .current {
1150
    position: relative;
1151
    z-index: 1;
1152
    background-color: $container-bg;
1153
 
1154
    .theme-dark & {
1155
        background-color: $dm-container-bg;
1156
    }
1157
}
1158
 
1159
.course-content .current::before {
1160
    content: "";
1161
 
1441 ariadna 1162
    border-left: 3px solid var(--main-theme-color);
1 efrain 1163
    border-radius: 17px;
1164
    width: calc(100% + 12px);
1441 ariadna 1165
    height: calc(100% + 18px);
1 efrain 1166
 
1167
    position: absolute;
1168
    z-index: -1;
1441 ariadna 1169
    top: -9px;
1170
    left: -16px;
1 efrain 1171
 
1441 ariadna 1172
    // background-color: rgba(var(--primary-color-100), .5);
1 efrain 1173
    // border-radius: $btn-border-radius;
1174
    // width: calc(100% + 20px);
1175
    // height: calc(100% + 20px);
1176
 
1177
    // position: absolute;
1178
    // z-index: -1;
1179
    // top: -10px;
1180
    // left: -10px;
1181
}
1182
 
1183
.course-content .section-summary {
1184
    list-style: none;
1185
}
1186
 
1187
.course-content .section-summary .summary {
1188
    margin-top: 5px;
1189
}
1190
 
1191
.course-content .single-section {
1192
    position: relative;
1193
}
1194
 
1195
.course-content .single-section .section-navigation {
1196
    display: flex;
1197
    justify-content: space-between;
1198
    width: 100%;
1199
 
1200
    //eg. Onetopic course format
1201
    .mdl-left,
1202
    .mdl-right {
1203
        display: inline-block;
1204
        font-size: $font-size-md;
1205
        font-weight: $font-weight-medium;
1206
        max-width: 200px;
1207
 
1208
        a {
1209
            color: $body-color;
1210
 
1211
            .theme-dark & {
1212
                color: $dm-body-color;
1213
            }
1214
 
1215
            &:hover {
1216
                text-decoration: none;
1217
            }
1218
        }
1219
 
1220
    }
1221
 
1222
}
1223
 
1224
.mdl-right .rarrow {
1225
    margin-left: .5rem;
1226
}
1227
 
1228
.mdl-left .larrow {
1229
    margin-right: .5rem;
1230
}
1231
 
1232
.course-content .single-section .section-navigation .title {
1233
    font-weight: $font-weight-bold;
1234
}
1235
 
1236
.course-content ul li.section.hidden {
1237
 
1238
    .sectionname>span,
1239
    .content>div.summary,
1240
    .activity .activityinstance {
1241
        color: $text-muted;
1242
    }
1243
}
1244
 
1245
.course-content ul.topics,
1246
.course-content ul.weeks {
1247
    padding: 0;
1248
    margin: 0;
1249
    list-style: none;
1250
 
1251
    li.section {
1252
        margin-bottom: 10px;
1253
 
1254
        .content {
1255
            .rui-section {
1256
                margin: 10px 0 30px;
1257
            }
1258
        }
1259
 
1260
        @include media-breakpoint-up(sm) {
1261
            .content>.availabilityinfo {
1262
                margin-left: 25px;
1263
            }
1264
        }
1265
 
1266
        .left,
1267
        .right {
1268
            padding: 0;
1269
            text-align: right;
1270
            width: auto;
1271
        }
1272
    }
1273
}
1274
 
1275
ul.weeks {
1276
    .section {
1277
        margin: 3px 0;
1278
    }
1279
}
1280
 
1281
@include media-breakpoint-between(xs, sm) {
1282
    body:not(.editing) {
1283
 
1284
        .course-content ul.topics,
1285
        .course-content ul.weeks {
1286
            li.section {
1287
 
1288
                .left,
1289
                .right {
1290
                    display: none;
1291
                }
1292
            }
1293
        }
1294
    }
1295
}
1296
 
1297
.course-content {
1298
    margin-top: 0;
1299
    //margin-bottom: 60px;
1300
}
1301
 
1302
.course-content .hidden {
1303
    display: none;
1304
}
1305
 
1306
.course-content li {
1307
    &.section {
1308
        ul {
1441 ariadna 1309
            flex-wrap: wrap;
1 efrain 1310
            list-style: disc;
1311
 
1312
            ul {
1313
                list-style: circle;
1314
 
1315
                ul {
1316
                    list-style: square;
1317
                }
1318
            }
1319
        }
1320
 
1321
        li {
1322
            &.activity {
1323
                ul {
1324
                    list-style: disc;
1325
 
1326
                    ul {
1327
                        list-style: circle;
1328
 
1329
                        ul {
1330
                            list-style: square;
1331
                        }
1332
                    }
1333
                }
1334
            }
1335
        }
1336
 
1337
        .right {
1338
            >.icon:first-child {
1339
                /* Remove the spacer icon. */
1340
                display: none;
1341
            }
1342
        }
1343
    }
1344
}
1345
 
1346
.path-course-view.editing #region-main>.card-block {
1347
    padding-bottom: 13rem;
1348
}
1349
 
1350
.jumpmenu .form-inline {
1351
    display: block;
1352
}
1353
 
1354
.jumpmenu {
1355
    float: none;
1441 ariadna 1356
    max-width: 160px;
1 efrain 1357
}
1358
 
1359
.completionprogress {
1360
    display: inline-flex;
1361
    align-items: center;
1362
 
1363
    padding: $badge-padding-y $badge-padding-x;
1364
    margin-bottom: 1rem;
1365
 
1366
    @include font-size($badge-font-size);
1367
    font-weight: $badge-font-weight;
1368
    @include border-radius($badge-border-radius);
1369
 
1370
    background-color: $gray-100;
1371
    color: $gray-600;
1372
 
1373
    .theme-dark & {
1374
        background-color: $dm-gray-100;
1375
        color: $dm-gray-200;
1376
    }
1377
 
1378
    .icon {
1379
        margin: 0;
1380
    }
1381
}
1382
 
1383
#page-site-index .subscribelink {
1384
    text-align: right;
1385
}
1386
 
1441 ariadna 1387
#frontpage-available-course-list h2,
1 efrain 1388
#site-news-forum h2,
1389
#frontpage-course-list h2,
1390
#frontpage-category-names h2,
1391
#frontpage-category-combo h2 {
1441 ariadna 1392
    margin: 0 0 30px;
1 efrain 1393
 
1441 ariadna 1394
    display: block;
1395
 
1396
    font-size: 3rem;
1397
    font-weight: $font-weight-bold;
1398
    text-align: center;
1399
    color: $body-color;
1400
 
1401
    .theme-dark & {
1402
        color: $dm-body-color;
1403
    }
1404
 
1405
    @include media-breakpoint-only(md) {
1406
        font-size: 2.5rem; // 40px
1407
    }
1408
 
1 efrain 1409
    @include media-breakpoint-between(xs, sm) {
1441 ariadna 1410
        font-size: 1.5rem; // 24px
1 efrain 1411
    }
1412
}
1413
 
1414
.path-course-view a.reduce-sections {
1415
    padding-left: 0.2em;
1416
}
1417
 
1418
.path-course-view .subscribelink {
1419
    text-align: right;
1420
}
1421
 
1422
.path-course-view .unread {
1423
    margin-left: 30px;
1424
}
1425
 
1426
.path-course-view .block.drag .header {
1427
    cursor: move;
1428
}
1429
 
1430
.path-course-view .completionprogress {
1441 ariadna 1431
    font-size: $font-size-sm;
1 efrain 1432
    color: $body-color-secondary;
1433
 
1434
    text-align: right;
1435
 
1436
    .btn-link {
1437
        margin-left: .35rem;
1438
    }
1439
}
1440
 
1441
.path-site li.activity>div,
1442
.path-course-view li.activity>div {
1443
    position: relative;
1444
}
1445
 
1446
.path-course-view li.activity span.autocompletion img {
1447
    vertical-align: text-bottom;
1448
    margin-left: 0;
1449
    width: auto;
1450
    height: auto;
1451
}
1452
 
1453
.path-course-view li.activity form.togglecompletion .btn {
1454
    padding: 0;
1455
    background-color: transparent;
1456
 
1457
    .icon {
1458
        margin: 0;
1459
    }
1460
}
1461
 
1462
.path-course-view li.activity form.togglecompletion img {
1463
    max-width: none;
1464
    /* The width is 0 so ensure we don't end up with a relative max-width */
1465
}
1466
 
1467
.path-course-view {
1468
    &.editing {
1469
        li.activity span.autocompletion img {
1470
            /* Use the same spacing as the filler. */
1471
            margin-right: $spacer * 0.5;
1472
            margin-left: $spacer * 0.5;
1473
        }
1474
    }
1475
}
1476
 
1477
.path-course-view li.activity form.togglecompletion .ajaxworking {
1478
    width: 16px;
1479
    height: 16px;
1480
    position: absolute;
1481
    right: 22px;
1482
    top: 3px;
1483
    background: url([[pix:i/ajaxloader]]) no-repeat;
1484
}
1485
 
1486
li.section.hidden span.commands a.editing_hide,
1487
li.section.hidden span.commands a.editing_show {
1488
    cursor: default;
1489
}
1490
 
1491
.sectionname {
1492
    margin: 0;
1493
 
1494
    a {
1495
        color: $headings-color;
1496
 
1497
        &:hover {
1498
            opacity: .7;
1499
        }
1500
 
1501
        .theme-dark & {
1502
            color: $dm-headings-color;
1503
        }
1504
    }
1505
}
1506
 
1507
// Remove margin top for rist element
1508
.li.section:first-of-type {
1509
    .sectionname {
1510
        margin-top: 0;
1511
    }
1512
}
1513
 
1514
input.titleeditor {
1515
    width: 330px;
1516
    vertical-align: text-bottom;
1517
}
1518
 
1519
span.editinstructions {
1520
    position: absolute;
1521
    top: -15px;
1522
 
1441 ariadna 1523
    font-size: $font-size-sm;
1 efrain 1524
    padding: .25rem .5rem;
1525
    text-decoration: none;
1526
    z-index: $zindex-tooltip;
1527
    border-radius: $btn-border-radius;
1528
    border: none;
1529
 
1530
    @include alert-variant(theme-color-level('info', $alert-bg-level),
1531
        theme-color-level('info', $alert-border-level),
1532
        theme-color-level('info', $alert-color-level));
1533
}
1534
 
1535
.createstep {
1536
    margin-top: 1rem;
1537
}
1538
 
1539
/* Course drag and drop upload styles */
1540
#dndupload-status {
1541
    position: fixed;
1542
    left: 0;
1543
    width: 60%;
1544
    margin: 0 20%;
1545
    padding: .5rem;
1546
 
1441 ariadna 1547
    font-size: $font-size-sm;
1 efrain 1548
    text-align: center;
1549
    z-index: 1; // Required in order to have this above relatively positioned course content@mixin
1550
    border: none;
1551
    border-radius: $btn-border-radius;
1552
 
1553
    @include alert-variant(theme-color-level('info', $alert-bg-level),
1554
        theme-color-level('info', $alert-border-level),
1555
        theme-color-level('info', $alert-color-level));
1556
}
1557
 
1558
.dndupload-preview {
1559
    list-style: none;
1560
    margin-top: 1rem;
1561
    margin-bottom: 1rem;
1441 ariadna 1562
    padding: 1rem;
1 efrain 1563
 
1564
    display: inline-flex;
1565
    align-items: center;
1566
    width: 100%;
1567
 
1568
    background-color: $gray-100;
1569
    border: 2px dashed $gray-300;
1570
    border-radius: $btn-border-radius;
1571
 
1572
    color: $gray-800;
1573
    font-weight: $font-weight-medium;
1574
 
1575
    .theme-dark & {
1576
        background-color: $dm-gray-100;
1577
        border: 2px dashed $dm-gray-300;
1578
        color: $dm-gray-800;
1579
    }
1580
 
1581
    img,
1582
    .icon {
1583
        width: 20px;
1584
        height: 20px;
1585
        margin-right: 10px;
1586
    }
1587
 
1588
    .mod-indent {
1589
        display: inline-flex;
1590
        align-items: center;
1591
    }
1592
}
1593
 
1594
.dndupload-hidden {
1595
    display: none;
1596
}
1597
 
1598
/* COURSES LISTINGS AND COURSE SUMMARY */
1599
#page-course-pending .singlebutton,
1600
#page-course-index .singlebutton,
1601
#page-course-index-category .singlebutton,
1602
#page-course-editsection .singlebutton {
1603
    text-align: center;
1604
}
1605
 
1606
#page-admin-course-manage #movecourses td img {
1607
    margin: 0 .22em;
1608
    vertical-align: text-bottom;
1609
}
1610
 
1611
#coursesearch {
1612
    margin-top: 1em;
1613
    text-align: left;
1614
}
1615
 
1616
#page-course-pending .pendingcourserequests {
1617
    margin-bottom: 1em;
1618
}
1619
 
1620
#page-course-pending .pendingcourserequests .singlebutton {
1621
    display: inline;
1622
}
1623
 
1624
#page-course-pending .pendingcourserequests .cell {
1625
    padding: 0 5px;
1626
}
1627
 
1628
#page-course-pending .pendingcourserequests .cell.c6 {
1629
    white-space: nowrap;
1630
}
1631
 
1632
.coursebox {
1633
    padding: $spacer * 0.5;
1634
}
1635
 
1636
.coursebox>.info>.coursename a {
1637
    display: block;
1638
    background-image: url([[pix:moodle|i/course]]);
1639
    background-repeat: no-repeat;
1640
    padding-left: 21px;
1641
    background-position: left 0.2em;
1642
}
1643
 
1644
.coursebox>.info>.coursename,
1645
.coursebox .content .teachers,
1646
.coursebox .content .courseimage,
1647
.coursebox .content .coursefile,
1648
.coursebox .content .customfields-container {
1649
    float: left;
1650
    clear: left;
1651
}
1652
 
1653
.coursebox .content .teachers,
1654
.coursebox .content .courseimage,
1655
.coursebox .content .coursefile,
1656
.coursebox .content .customfields-container {
1657
    width: 40%;
1658
}
1659
 
1660
.coursebox>.info>h3.coursename {
1661
    margin: 5px;
1662
}
1663
 
1664
.coursebox>.info>.coursename {
1665
    margin: 5px;
1666
    padding: 0;
1667
}
1668
 
1669
.coursebox .content .teachers li {
1670
    list-style-type: none;
1671
    padding: 0;
1672
    margin: 0;
1673
}
1674
 
1675
.coursebox .moreinfo,
1676
.coursebox .enrolmenticons {
1677
    padding: 3px 0;
1678
    float: right;
1679
}
1680
 
1681
.coursebox .moreinfo img {
1682
    margin: 0 .2em;
1683
}
1684
 
1685
.coursebox .content {
1686
    clear: both;
1687
}
1688
 
1689
.coursebox .content .summary,
1690
.coursebox .content .coursecat {
1691
    float: right;
1692
    width: 55%;
1693
}
1694
 
1695
.coursebox .content .coursecat {
1696
    text-align: right;
1697
    clear: right;
1698
}
1699
 
1700
.coursebox.remotecoursebox .remotecourseinfo {
1701
    float: left;
1702
    width: 40%;
1703
}
1704
 
1705
.coursebox .content .courseimage img {
1706
    max-width: 100px;
1707
    max-height: 100px;
1708
}
1709
 
1710
.coursebox .content .coursecat,
1711
.coursebox .content .summary,
1712
.coursebox .content .courseimage,
1713
.coursebox .content .coursefile,
1714
.coursebox .content .teachers,
1715
.coursebox.remotecoursebox .remotecourseinfo,
1716
.coursebox .content .customfields-container {
1717
    margin: 15px 5px 5px;
1718
    padding: 0;
1719
}
1720
 
1721
.coursebox.remotehost>.info>.categoryname a {
1722
    background-image: url([[pix:moodle|i/mnethost]]);
1723
}
1724
 
1725
.coursebox.collapsed {
1726
    margin-bottom: 0;
1727
}
1728
 
1729
.coursebox.collapsed>.content {
1730
    display: none;
1731
}
1732
 
1733
.courses .coursebox {
1734
    &.collapsed {
1735
        padding-top: $spacer * 0.5;
1736
        padding-bottom: $spacer * 0.5;
1737
    }
1738
 
1739
    &.even {
1740
        background-color: $table-accent-bg;
1741
    }
1742
}
1743
 
1441 ariadna 1744
.subcategories {
1745
    padding-bottom: 30px;
1746
    margin-bottom: 30px;
1 efrain 1747
 
1441 ariadna 1748
    border-bottom: 1px solid $border-color;
1 efrain 1749
 
1750
    .theme-dark & {
1441 ariadna 1751
        border-color: $dm-border-color;
1 efrain 1752
    }
1753
 
1441 ariadna 1754
    @include media-breakpoint-up(xl) {
1755
        display: grid;
1756
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
1757
        gap: 30px;
1 efrain 1758
 
1441 ariadna 1759
        #page-site-index &,
1760
        .category-browse-0 & {
1761
            grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
1762
        }
1 efrain 1763
    }
1764
 
1441 ariadna 1765
    @include media-breakpoint-between(lmd,lg) {
1766
        display: grid;
1767
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
1768
        gap: 30px;
1 efrain 1769
 
1441 ariadna 1770
        #page-site-index &,
1771
        .category-browse-0 & {
1772
            grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
1773
        }
1 efrain 1774
    }
1775
 
1441 ariadna 1776
    @include media-breakpoint-only(md) {
1777
        display: grid;
1778
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
1779
        gap: 30px;
1 efrain 1780
    }
1781
 
1441 ariadna 1782
    @include media-breakpoint-between(xs, sm) {
1783
        display: grid;
1784
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
1785
        gap: 30px;
1 efrain 1786
    }
1787
 
1441 ariadna 1788
    .category {
1789
        border-radius: $btn-border-radius;
1790
        border: 1px solid $border-color;
1 efrain 1791
 
1441 ariadna 1792
        .theme-dark & {
1793
            border-color: $dm-border-color;
1794
        }
1 efrain 1795
    }
1796
}
1797
 
1441 ariadna 1798
.courses>.paging.paging-morelink {
1799
    text-align: right;
1800
    padding: 0 0 $spacer 0;
1 efrain 1801
}
1802
 
1803
.rui-category-link {
1441 ariadna 1804
    font-size: 2rem;
1805
    font-weight: $font-weight-bold;
1 efrain 1806
 
1441 ariadna 1807
    &:after {
1808
        display: none;
1 efrain 1809
    }
1810
 
1811
}
1812
 
1813
.rui-number-of-courses {
1814
    font-size: $font-size-xs;
1815
    font-weight: $font-weight-bold;
1816
    opacity: .7;
1441 ariadna 1817
 
1818
    @include media-breakpoint-between(xs, sm) {
1819
        width: 100%;
1820
    }
1 efrain 1821
}
1822
 
1823
.rui-course-cat-desc {
1824
    img {
1825
        margin: $page-padding-global 0 0;
1826
        padding: 0;
1827
 
1828
        width: 100%;
1829
        height: auto;
1830
 
1831
        border-radius: $btn-border-radius;
1832
    }
1833
}
1834
 
1835
 
1836
/**
1837
 * Course management page
1838
 * Palette
1839
 *
1840
 * Background (reg)         #F5F5F5
1841
 * Background (light        #fafafa
1842
 * Background (highlight)   #ddffaa
1843
 * Borders                  #e1e1e8
1844
 */
1845
#course-category-listings {
1846
    margin-bottom: 0;
1847
 
1848
    /** Two column layout */
1849
    &.columns-2 {
1850
        >#course-listing>div {
1851
            position: relative;
1852
            left: -1px;
1853
        }
1854
    }
1855
 
1856
    /** Three column layout */
1857
    &.columns-3>#course-listing>div {
1858
        height: 100%;
1859
    }
1860
 
1861
    >div>div {
1862
        min-height: 300px;
1863
 
1864
        >ul.ml>li:first-child>div {
1865
            border-top: 0;
1866
        }
1867
    }
1868
 
1869
    h3 {
1870
        margin: 0;
1871
        padding-left: 7px;
1872
        padding-right: 7px;
1873
        font-size: $font-size-base;
1874
    }
1875
 
1876
    h4 {
1877
        margin: 1rem 0 0;
1878
    }
1879
 
1880
    .moodle-actionmenu {
1881
        white-space: nowrap;
1882
    }
1883
 
1884
    .listing-actions {
1885
        text-align: right;
1886
 
1887
        .btn {
1888
            width: 100%;
1889
        }
1890
 
1891
        &.course-detail-listing-actions {
1892
            .btn {
1893
                width: auto;
1894
            }
1895
        }
1896
 
1897
        >.moodle-actionmenu {
1898
            display: inline-block;
1899
        }
1900
 
1901
        .action-menu {
1902
            margin: 5px 0 3px;
1903
            display: inline-flex !important;
1904
        }
1905
    }
1906
 
1907
    ul.ml {
1908
        list-style: none;
1909
        padding: 0 !important;
1910
        margin: 1rem 0 1rem 0;
1911
 
1912
        ul.ml {
1913
            margin: 0;
1914
        }
1915
    }
1916
 
1917
    .course-list {
1918
        div {
1919
            align-items: center;
1920
 
1921
            .coursename {
1922
                margin: 0 !important;
1923
            }
1924
        }
1925
    }
1926
 
1927
    .listitem {
1928
 
1929
        &[data-selected='1'] {
1930
            border-left: calc(#{$list-group-border-width} + 5px) solid map-get($theme-colors, 'primary');
1931
            padding-left: calc(#{$list-group-item-padding-x} - 5px);
1932
        }
1933
    }
1934
 
1935
    .item-actions {
1936
        margin-right: 1em;
1937
        display: inline-block;
1938
 
1939
        &.show .menu {
1940
 
1941
            img {
1942
                width: 12px;
1943
                max-width: none;
1944
            }
1945
        }
1946
 
1947
        .menu-action-text {
1948
            vertical-align: inherit;
1949
        }
1950
    }
1951
 
1952
    .listitem {
1953
        >div {
1954
            >.float-left {
1955
                float: left;
1956
            }
1957
 
1958
            >.float-right {
1959
                float: right;
1960
                text-align: right;
1961
                margin-left: auto;
1962
            }
1963
 
1964
            .item-actions {
1965
                .action-show {
1966
                    display: none;
1967
                }
1968
 
1969
                .action-hide {
1970
                    display: inline;
1971
                }
1972
            }
1973
 
1974
            .without-actions {
1975
                color: $body-color;
1976
 
1977
                .theme-dark & {
1978
                    color: $dm-body-color;
1979
                }
1980
            }
1981
 
1982
            .idnumber {
1983
                max-width: 200px;
1984
                text-align: right;
1985
                line-height: 1.2;
1986
 
1987
                &:before {
1988
                    content: '# ';
1989
                }
1990
 
1991
                display: flex;
1992
                align-items: center;
1993
 
1994
                font-size: $font-size-sm;
1995
                font-weight: $font-weight-medium;
1996
 
1997
                margin-right: 10px;
1998
            }
1999
        }
2000
 
2001
        // The category or course is hidden.
2002
        &[data-visible="0"] {
2003
            opacity: .6;
2004
 
2005
            >div {
2006
                >a {
2007
                    opacity: .6;
2008
                }
2009
 
2010
                .item-actions {
2011
                    .action-show {
2012
                        display: inline;
2013
                    }
2014
 
2015
                    .action-hide {
2016
                        display: none;
2017
                    }
2018
                }
2019
            }
2020
        }
2021
 
2022
        &[data-visible="0"],
2023
        &[data-visible="1"] {
2024
            margin: 0 0 4px 0;
2025
            color: $body-color;
2026
            border: 1px solid $border-color;
2027
            border-radius: $btn-border-radius;
2028
 
2029
            .custom-control-label::after,
2030
            .custom-control-label::before {
2031
                top: 0;
2032
                left: 0;
2033
            }
2034
 
2035
            .clearfix {
2036
                width: 100%;
2037
                display: flex;
2038
                align-items: center;
2039
                align-self: center;
2040
                flex-wrap: wrap;
2041
            }
2042
 
2043
            .theme-dark & {
2044
                color: $dm-body-color;
2045
                border-color: $dm-border-color;
2046
            }
2047
 
2048
            a.float-left {
2049
                &::after {
2050
                    display: none;
2051
                }
2052
            }
2053
 
2054
            .tree-icon {
2055
                width: 18px;
2056
                height: 18px;
2057
                border-radius: 18px;
2058
 
2059
                display: flex;
2060
                align-items: center;
2061
                justify-content: center;
2062
                background-color: $gray-100;
2063
 
2064
                .theme-dark & {
2065
                    filter: invert(1);
2066
                }
2067
 
2068
                &[aria-hidden="true"] {
2069
                    display: none;
2070
                }
2071
            }
2072
 
2073
            >div {
2074
                >a {
2075
                    font-size: $font-size-xs;
2076
                    font-weight: $font-weight-medium;
2077
                    color: $body-color;
2078
 
2079
                    .theme-dark & {
2080
                        color: $dm-body-color;
2081
                    }
2082
                }
2083
            }
2084
        }
2085
 
2086
        &.highlight {
2087
            background-color: $body-bg;
2088
 
1441 ariadna 2089
            .theme-dark & {
2090
                background-color: $dm-body-bg;
2091
            }
2092
 
1 efrain 2093
            >div,
2094
            >div:hover,
2095
            &[data-selected='1']>div {
2096
                background-color: $table-hover-bg;
2097
            }
2098
        }
2099
    }
2100
 
2101
    #course-listing {
2102
        .listitem {
2103
            .categoryname {
2104
                display: inline-block;
2105
                margin-left: 1em;
2106
                color: $dm-body-color-secondary;
2107
 
2108
                .theme-dark & {
2109
                    color: $dm-body-color-secondary;
2110
                }
2111
            }
2112
 
2113
            .coursename {
2114
                font-size: $font-size-sm;
2115
                font-weight: $font-weight-medium;
2116
                color: $body-color;
2117
 
2118
                display: inline-flex;
2119
                align-self: center;
2120
                flex-basis: 10rem;
2121
 
2122
                .theme-dark & {
2123
                    color: $dm-body-color;
2124
                }
2125
            }
2126
        }
2127
 
2128
        >.firstpage .listitem:first-child>div .item-actions .action-moveup,
2129
        >.lastpage .listitem:last-child>div .item-actions .action-movedown {
2130
            display: none;
2131
        }
2132
 
2133
        .bulk-action-checkbox {
2134
            margin: -2px 6px 0 0;
2135
        }
2136
    }
2137
 
2138
    #category-listing {
2139
        .listitem.collapsed>ul.ml {
2140
            display: none;
2141
        }
2142
 
2143
        .listitem {
2144
 
2145
            &:first-child>div .item-actions .action-moveup,
2146
            &:last-child>div .item-actions .action-movedown {
2147
                display: none;
2148
            }
2149
        }
2150
 
2151
        .course-count {
2152
            padding: 3px 8px;
2153
            background-color: var(--primary-color-100);
2154
            border-radius: $btn-border-radius;
2155
 
2156
            font-size: $font-size-xs;
2157
            font-weight: $font-weight-medium;
2158
            color: $body-color-secondary;
2159
 
2160
            .theme-dark & {
2161
                background-color: $dm-gray-100;
2162
                color: $dm-body-color-secondary;
2163
            }
2164
 
2165
            display: inline-flex;
2166
            flex-direction: row-reverse;
2167
            align-self: center;
2168
            align-items: center;
2169
 
2170
            .icon {
2171
                margin: 0 6px 0 0;
2172
                width: 16px;
2173
                height: 16px;
2174
                line-height: 15px;
2175
            }
2176
        }
2177
 
2178
        .bulk-action-checkbox {
2179
            margin-right: -3px;
2180
        }
2181
 
2182
        .category-listing>ul>.listitem:first-child {
2183
            position: relative;
2184
        }
2185
 
2186
        .category-bulk-actions {
2187
            margin: 0 0.5em 0.5em;
2188
            position: relative;
2189
        }
2190
    }
2191
 
2192
    .detail-pair {
2193
 
2194
        >* {
2195
            display: inline-block;
2196
        }
2197
 
2198
        .pair-key {
2199
            font-weight: $font-weight-bold;
2200
            vertical-align: top;
2201
 
2202
            span {
2203
                margin-right: 0;
2204
                display: block;
2205
                font-size: $font-size-xs;
2206
                text-align: right;
2207
                line-height: 1.4;
2208
                font-weight: $font-weight-medium;
2209
            }
2210
        }
2211
 
2212
        .pair-value select {
2213
            max-width: 100%;
2214
        }
2215
    }
2216
 
2217
    .bulk-actions .detail-pair {
2218
        >* {
2219
            display: block;
2220
            width: 100%;
2221
        }
2222
    }
2223
 
2224
    .listing-pagination {
2225
        text-align: center;
2226
 
2227
        .yui3-button {
2228
            @include button-variant($info, $info);
2229
            border: 0;
2230
            margin: 0.4rem 0.2rem 0.45rem;
2231
            font-size: 10.4px;
2232
 
2233
            &.active-page {
2234
                @include button-variant($primary, $primary);
2235
            }
2236
        }
2237
    }
2238
 
2239
    .listing-pagination-totals {
2240
        margin: 5px 10px 10px;
2241
        font-size: $font-size-xs;
2242
        text-align: right;
2243
        opacity: .7;
2244
 
2245
        &.dimmed {
2246
            margin: 0.4rem 1rem 0.45rem;
2247
        }
2248
    }
2249
 
2250
    .select-a-category .notifymessage,
2251
    .select-a-category .alert {
2252
        margin: 1em;
2253
    }
2254
}
2255
 
2256
#course-category-listings #course-listing .listitem .drag-handle {
2257
    display: none;
2258
}
2259
 
2260
.jsenabled #course-category-listings #course-listing .listitem .drag-handle {
2261
    display: flex;
2262
    margin: 0 10px 0 0;
2263
    cursor: pointer;
2264
}
2265
 
2266
/** Management header styling **/
2267
.coursecat-management-header {
2268
    vertical-align: middle;
2269
 
2270
    h2 {
2271
        display: inline-block;
2272
        text-align: left;
2273
    }
2274
 
2275
    >div {
2276
        float: right;
2277
 
2278
        >div {
2279
            margin: 10px 0 10px 1em;
2280
            display: inline-block;
2281
        }
2282
    }
2283
 
2284
    select {
2285
        max-width: 300px;
2286
        cursor: pointer;
2287
        padding: 0.4em 0.5em 0.45em 1em;
2288
        vertical-align: baseline;
2289
        white-space: nowrap;
2290
    }
2291
 
2292
    .view-mode-selector {
2293
        .moodle-actionmenu {
2294
            white-space: nowrap;
2295
            display: inline-block;
2296
        }
2297
 
2298
        .moodle-actionmenu[data-enhanced].show .menu a {
2299
            padding-left: 1em;
2300
        }
2301
    }
2302
}
2303
 
2304
.course-being-dragged-proxy {
2305
    border: 0;
2306
    color: $link-color;
2307
    vertical-align: middle;
2308
    padding: 0 0 0 4em;
2309
}
2310
 
2311
.course-being-dragged {
2312
    opacity: 0.5;
2313
}
2314
 
2315
/**
2316
 * Display sizes:
2317
 * Large displays                   1200        +
2318
 * Default displays                  980     1199
2319
 * Tablets                           768      979
2320
 * Small tablets and large phones    481      767
2321
 * Phones                              0      480
2322
 */
2323
 
2324
@media (min-width: 1200px) and (max-width: 1600px) {
2325
    #course-category-listings.columns-3 {
2326
        background-color: $body-bg;
2327
        border: 0;
2328
 
2329
        #category-listing,
2330
        #course-listing {
2331
            width: 50%;
2332
        }
2333
 
2334
        #category-listing>div,
2335
        #course-listing>div,
2336
        #course-detail>div {
2337
            background-color: $body-bg;
2338
        }
2339
 
2340
        #course-detail {
2341
            width: 100%;
2342
            margin-top: 1em;
2343
        }
2344
    }
2345
}
2346
 
2347
@media (max-width: 1199px) {
2348
 
2349
    #course-category-listings.columns-2,
2350
    #course-category-listings.columns-3 {
2351
        border: 0;
2352
 
2353
        #category-listing,
2354
        #course-listing,
2355
        #course-detail {
2356
            width: 100%;
2357
            margin: 0 0 1em;
2358
        }
2359
    }
2360
}
2361
 
2362
.page-settings-menu .menubar>a>.icon {
2363
    width: auto;
2364
    height: 32px;
2365
    font-size: 32px;
2366
}
2367
 
2368
.activity-navigation {
2369
    background-color: $gray-100;
1441 ariadna 2370
    border-radius: $btn-border-radius + 6px;
1 efrain 2371
 
2372
    .theme-dark & {
2373
        background-color: $dm-gray-100;
2374
    }
2375
 
2376
    .row {
2377
        align-items: center;
2378
    }
2379
 
1441 ariadna 2380
    #prev-activity-link,
2381
    #next-activity-link {
2382
        white-space: pre-wrap;
1 efrain 2383
    }
1441 ariadna 2384
}
1 efrain 2385
 
1441 ariadna 2386
.automatic-completion-conditions {
2387
    .badge {
2388
        font-size: 100%;
1 efrain 2389
    }
1441 ariadna 2390
}
1 efrain 2391
 
1441 ariadna 2392
.action-menu-item,
2393
.course-item-actions {
1 efrain 2394
 
1441 ariadna 2395
    .action-hide,
2396
    .action-show {
2397
        margin: 0 .5rem;
1 efrain 2398
    }
2399
 
1441 ariadna 2400
    .action-delete {
2401
        float: right;
2402
        margin-left: .5rem;
2403
    }
1 efrain 2404
 
1441 ariadna 2405
    a {
2406
        margin: 1px;
1 efrain 2407
 
1441 ariadna 2408
        .fa-fw {
2409
            padding: 9px;
1 efrain 2410
 
1441 ariadna 2411
            display: inline-flex;
2412
            align-items: center;
2413
            justify-content: center;
1 efrain 2414
 
1441 ariadna 2415
            border-radius: $btn-border-radius;
1 efrain 2416
 
1441 ariadna 2417
            background-color: $gray-200;
2418
            color: $gray-800;
1 efrain 2419
 
1441 ariadna 2420
            transition: $transition-base;
1 efrain 2421
 
1441 ariadna 2422
            .theme-dark & {
2423
                filter: invert(1);
2424
            }
1 efrain 2425
        }
2426
 
1441 ariadna 2427
        &:hover .fa-fw {
2428
            background-color: $gray-300;
1 efrain 2429
 
1441 ariadna 2430
            .theme-dark & {
2431
                background-color: $dm-gray-300;
2432
            }
1 efrain 2433
        }
2434
 
1441 ariadna 2435
        &.action-delete .fa-fw {
2436
            background-color: $red-100;
2437
            color: $red-700;
2438
            border-radius: $btn-border-radius;
1 efrain 2439
 
1441 ariadna 2440
            &:hover {
2441
                background-color: $red-200;
2442
            }
2443
        }
1 efrain 2444
 
1441 ariadna 2445
        &:hover {
2446
            text-decoration: none;
2447
        }
1 efrain 2448
    }
2449
}
2450
 
2451
 
2452
 
2453
// ---- URL:   course/editbulkcompletion.php
2454
.activityinstance-title {
2455
    font-weight: $font-weight-medium;
2456
    color: $body-color;
2457
 
2458
    .theme-dark & {
2459
        color: $dm-body-color;
2460
    }
2461
 
2462
    &:hover {
2463
        text-decoration: none;
2464
        color: $link-hover-color;
2465
    }
2466
}
2467
 
2468
.rui-section {
2469
    margin: 0 0 $page-padding-global;
2470
    padding: 0;
2471
 
2472
    list-style: none;
2473
 
2474
    &:last-of-type {
2475
        margin-bottom: 0;
2476
    }
2477
}
2478
 
2479
.summary+.rui-section {
2480
    margin-top: $page-padding-global;
2481
}
2482
 
2483
.rui-single-section--with-nav {
2484
    padding: 30px 30px 20px;
2485
    border: 1px solid $border-color;
2486
    border-radius: $btn-border-radius;
2487
 
2488
    @include media-breakpoint-between(xs, md) {
2489
        padding: 10px;
2490
    }
2491
 
2492
    .theme-dark & {
2493
        border: 1px solid $dm-border-color;
2494
    }
2495
 
2496
    .sectionname {
2497
        margin-top: 0;
2498
        margin-bottom: 1rem;
2499
    }
2500
}
2501
 
2502
 
2503
.rui-course-nav-btn {
2504
    display: inline-flex;
2505
    align-items: center;
2506
}
2507
 
2508
.rui-course-nav-btn-icon {
2509
    width: 40px;
2510
    height: 40px;
2511
 
2512
    background-color: $container-bg;
2513
    border-radius: $btn-border-radius;
2514
 
2515
    color: $body-color;
2516
 
2517
    display: flex;
2518
    justify-content: center;
2519
    align-items: center;
2520
 
2521
    .theme-dark & {
2522
        background-color: $dm-container-bg;
2523
        color: $dm-body-color;
2524
    }
2525
}
2526
 
2527
.rui-course-nav-btn-label {
2528
    display: inline-block;
2529
    font-size: $font-size-md;
2530
    font-weight: $font-weight-medium;
2531
    color: inherit;
2532
    max-width: 200px;
2533
 
2534
    @include media-breakpoint-between(xs, md) {
2535
        display: none;
2536
    }
2537
}
2538
 
2539
 
2540
.rui-availabilityinfo {
2541
    padding: 5px 10px;
2542
 
2543
    display: inline-flex;
2544
    align-items: center;
2545
 
2546
    background-color: $blue-100;
2547
    border-radius: $btn-border-radius;
2548
 
2549
    font-size: $font-size-md;
2550
    font-weight: $font-weight-medium;
2551
    color: $body-color;
2552
 
2553
    .description & {
2554
        margin-left: 53px;
2555
    }
2556
 
2557
    &.course-description-item {
2558
        margin: 0 !important;
2559
    }
2560
 
2561
    &.ishidden {
2562
        background-color: $yellow-100;
2563
        display: flex;
2564
 
2565
        .theme-dark & {
2566
            color: $yellow-800;
2567
            background-color: $dm-gray-200;
2568
        }
2569
    }
2570
 
2571
    a {
2572
        color: $blue-600;
2573
 
2574
        &:hover {
2575
            color: $blue-700;
2576
        }
2577
    }
2578
 
2579
    &.isrestricted {
2580
        background-color: $yellow-100;
2581
        margin-top: 10px;
2582
        margin-bottom: 10px;
2583
 
2584
        a {
2585
            color: $yellow-800;
2586
 
2587
            &:hover {
2588
                color: $yellow-900;
2589
            }
2590
        }
2591
    }
2592
 
2593
    .rui-availabilityinfo-text {
2594
        margin-top: 1px;
2595
    }
2596
 
2597
    ul {
2598
        margin: 10px 10px 10px 20px;
2599
        line-height: 1.8;
2600
    }
2601
 
2602
    div {
2603
        display: inline-flex;
2604
        align-items: center;
2605
    }
2606
}
2607
 
2608
 
2609
/* Activity Item Section */
2610
.rui-activity-information {
2611
    font-size: $font-size-xs;
2612
 
2613
    .path-course & {
2614
 
2615
        margin: 0 0 0 $rui-date-margin-left;
2616
    }
2617
 
2618
    @include media-breakpoint-down(sm) {
2619
        overflow-x: auto;
2620
    }
2621
}
2622
 
2623
 
2624
.rui-activity--hascompletion {
2625
    @include media-breakpoint-between(xs, sm) {
2626
        width: 100% !important;
2627
    }
2628
}
2629
 
2630
.rui-activityinstance {
2631
    @include media-breakpoint-between(xs, sm) {
2632
        .rui--activity-is-manual & {
2633
            margin-left: 55px;
2634
        }
2635
    }
2636
 
2637
    a {
2638
        display: flex;
2639
        align-items: center;
2640
        justify-content: flex-start;
2641
        color: $body-color;
2642
 
2643
        .theme-dark & {
2644
            color: $dm-body-color;
2645
        }
2646
 
2647
        &:hover {
2648
            text-decoration: none;
2649
            color: $link-hover-color;
2650
        }
2651
    }
2652
}
2653
 
2654
$activityiconsize: 40px;
2655
 
2656
.rui-activityicon {
2657
    width: $activityiconsize;
2658
    height: $activityiconsize;
2659
 
2660
    margin-right: 20px;
2661
}
2662
 
2663
.instancename,
2664
.rui-instancename {
2665
    font-size: 0.938rem; // 15px
2666
    font-weight: $font-weight-bold;
2667
    color: $body-color;
2668
 
2669
    .theme-dark & {
2670
        color: $dm-body-color;
2671
    }
2672
 
2673
    @include media-breakpoint-between(xs, sm) {
2674
        display: block;
2675
        font-size: $font-size-sm;
2676
    }
2677
}
2678
 
2679
.rui-pluginname {
2680
    font-size: $font-size-xs;
2681
    font-weight: $font-weight-normal;
2682
    color: $body-color-light;
2683
 
2684
    .theme-dark & {
2685
        color: $dm-body-color-light;
2686
    }
2687
}
2688
 
2689
.resourcelinkdetails {
2690
    display: block;
2691
    margin-top: 10px;
2692
 
2693
    font-size: $font-size-xs;
2694
    color: $body-color-light;
2695
}
2696
 
2697
.rui-contentafterlink {
2698
    font-size: .875rem;
2699
    color: $body-color-secondary;
2700
 
2701
    &:empty {
2702
        display: none;
2703
    }
2704
 
2705
    @include media-breakpoint-up(md) {
2706
        margin: 0 $rui-date-margin-left;
1441 ariadna 2707
 
2708
        .modtype_subsection & {
2709
            margin-right: 0;
2710
        }
1 efrain 2711
    }
2712
 
2713
    @include media-breakpoint-between(xs, sm) {
2714
        margin: 10px 0 0;
2715
    }
2716
 
2717
    .theme-dark & {
2718
        color: $dm-body-color-secondary;
2719
    }
2720
 
2721
    .label & {
2722
        margin: 0;
2723
    }
2724
 
2725
    img {
2726
        max-width: 100%;
2727
        height: auto;
2728
        border-radius: $btn-border-radius;
2729
    }
2730
}
2731
 
2732
.rui-contentwithoutlink {
2733
    font-size: 1.125rem;
2734
}
2735
 
2736
 
2737
$rui-date-margin: $rui-date-margin-left + 10px !default;
2738
 
2739
.rui-activity-dates {
2740
    margin-left: 0;
2741
    margin-top: 0;
2742
    margin-bottom: 0;
2743
 
2744
    display: inline-flex;
2745
    flex-wrap: wrap;
2746
    align-items: center;
2747
    font-size: $font-size-xs;
2748
    color: $body-color-light;
2749
 
2750
    .rui-section & {
2751
        padding: 0 $rui-date-margin 12px;
2752
        width: calc(100% + 24px);
2753
        border-bottom: 1px dashed $border-color;
2754
        margin: 0 -12px 10px;
2755
 
2756
        .theme-dark & {
2757
            border-color: $dm-border-color;
2758
        }
2759
    }
2760
 
2761
    .theme-dark & {
2762
        color: $dm-body-color-light;
2763
    }
2764
 
2765
    @include media-breakpoint-between(xs, md) {
2766
        margin-left: 0;
2767
    }
2768
 
2769
    .rui-activity--hasnotcompletion &,
2770
    .rui--activity-is-automatic & {
2771
        left: $rui-date-margin-left * 0.5;
2772
 
2773
        @include media-breakpoint-between(xs, md) {
2774
            left: 0;
2775
        }
2776
 
2777
        @include media-breakpoint-between(xs, sm) {
2778
            position: relative;
2779
        }
2780
    }
2781
 
2782
    div {
2783
        color: $body-color-secondary;
2784
 
2785
        .theme-dark & {
2786
            color: $dm-body-color-secondary;
2787
        }
2788
 
2789
        strong {
2790
            color: $body-color;
2791
 
2792
            .theme-dark & {
2793
                color: $dm-body-color;
2794
            }
2795
        }
2796
 
2797
        &:last-of-type {
2798
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='#{url-friendly-colour($body-color)}' d='M13 12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12Z'%3E%3C/path%3E%3Cpath fill='#{url-friendly-colour($body-color)}' d='M9 12C9 12.5523 8.55228 13 8 13C7.44772 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11C8.55228 11 9 11.4477 9 12Z'%3E%3C/path%3E%3Cpath fill='#{url-friendly-colour($body-color)}' d='M17 12C17 12.5523 16.5523 13 16 13C15.4477 13 15 12.5523 15 12C15 11.4477 15.4477 11 16 11C16.5523 11 17 11.4477 17 12Z'%3E%3C/path%3E%3C/svg%3E%0A");
2799
            background-repeat: no-repeat;
2800
            background-position: 10px;
2801
            padding-left: 45px;
2802
 
2803
            .theme-dark & {
2804
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='#{url-friendly-colour($dm-body-color)}' d='M13 12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12Z'%3E%3C/path%3E%3Cpath fill='#{url-friendly-colour($dm-body-color)}' d='M9 12C9 12.5523 8.55228 13 8 13C7.44772 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11C8.55228 11 9 11.4477 9 12Z'%3E%3C/path%3E%3Cpath fill='#{url-friendly-colour($dm-body-color)}' d='M17 12C17 12.5523 16.5523 13 16 13C15.4477 13 15 12.5523 15 12C15 11.4477 15.4477 11 16 11C16.5523 11 17 11.4477 17 12Z'%3E%3C/path%3E%3C/svg%3E%0A");
2805
            }
2806
 
2807
 
2808
            @include media-breakpoint-between(xs, sm) {
2809
                background: none;
2810
                margin-top: 10px;
2811
                padding-left: 0;
2812
            }
2813
        }
2814
    }
2815
}
2816
 
2817
.rui-conditionalhidden {
2818
    position: relative;
2819
 
2820
    background-color: $gray-100;
2821
 
2822
    opacity: .5;
2823
    transition: $transition-base;
2824
 
2825
    .theme-dark & {
2826
        background-color: $dm-gray-100;
2827
    }
2828
 
2829
    &:hover {
2830
        background-color: transparent;
2831
        opacity: 1;
2832
    }
2833
 
2834
    &:before {
2835
        content: '';
2836
 
2837
        background-image: url("data:image/svg+xml,%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($body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M18.6247 10C19.0646 10.8986 19.25 11.6745 19.25 12C19.25 13 17.5 18.25 12 18.25C11.2686 18.25 10.6035 18.1572 10 17.9938M7 16.2686C5.36209 14.6693 4.75 12.5914 4.75 12C4.75 11 6.5 5.75 12 5.75C13.7947 5.75 15.1901 6.30902 16.2558 7.09698'%3E%3C/path%3E%3Cpath stroke='#{url-friendly-colour($body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19.25 4.75L4.75 19.25'%3E%3C/path%3E%3Cpath stroke='#{url-friendly-colour($body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M10.409 13.591C9.53033 12.7123 9.53033 11.2877 10.409 10.409C11.2877 9.5303 12.7123 9.5303 13.591 10.409'%3E%3C/path%3E%3C/svg%3E%0A");
2838
        background-size: 16px;
2839
        background-color: $gray-300;
2840
        background-position: center;
2841
        background-repeat: no-repeat;
2842
 
2843
        position: absolute;
2844
        top: 1px;
2845
        left: 1px;
2846
 
2847
        border-radius: $btn-border-radius;
2848
 
2849
        width: 20px;
2850
        height: 20px;
2851
 
2852
        .theme-dark & {
2853
            background-image: url("data:image/svg+xml,%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($dm-body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M18.6247 10C19.0646 10.8986 19.25 11.6745 19.25 12C19.25 13 17.5 18.25 12 18.25C11.2686 18.25 10.6035 18.1572 10 17.9938M7 16.2686C5.36209 14.6693 4.75 12.5914 4.75 12C4.75 11 6.5 5.75 12 5.75C13.7947 5.75 15.1901 6.30902 16.2558 7.09698'%3E%3C/path%3E%3Cpath stroke='#{url-friendly-colour($dm-body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19.25 4.75L4.75 19.25'%3E%3C/path%3E%3Cpath stroke='#{url-friendly-colour($dm-body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M10.409 13.591C9.53033 12.7123 9.53033 11.2877 10.409 10.409C11.2877 9.5303 12.7123 9.5303 13.591 10.409'%3E%3C/path%3E%3C/svg%3E%0A");
2854
        }
2855
 
2856
    }
2857
 
2858
}
2859
 
2860
.rui-course-summary:not(:empty) {
2861
    margin: 10px 0;
2862
    font-size: $font-size-md;
2863
 
2864
    @include media-breakpoint-between(xs, sm) {
2865
        font-size: $font-size-sm;
2866
    }
2867
}
2868
 
2869
.rui--activity-is-manual {
2870
    position: relative;
2871
}
2872
 
2873
// Mods
2874
.rui--activity-hasdates {
2875
    padding-top: 40px;
2876
 
2877
    @include media-breakpoint-between(xs, sm) {
2878
        padding-top: 0;
2879
    }
2880
}
2881
 
2882
// End.
2883
 
2884
 
2885
.btn--activity-manual {
2886
    padding: 0;
2887
    background-color: transparent;
2888
    border: none;
2889
 
2890
    color: $body-color-light;
2891
 
2892
    .theme-dark & {
2893
        color: $dm-body-color-light;
2894
    }
2895
 
2896
    .loading-icon {
2897
        position: relative;
2898
        width: 30px;
2899
        height: 30px;
2900
        display: flex;
2901
        align-items: center;
2902
        justify-items: center;
2903
    }
2904
}
2905
 
2906
.path-grade,
2907
.path-mod {
2908
    .rui-activity-wrapper {
2909
        display: flex;
2910
        flex-wrap: wrap;
2911
 
2912
        border: 1px solid $border-color;
1441 ariadna 2913
        border-radius: $btn-border-radius + 5px;
1 efrain 2914
        padding: 5px;
2915
 
2916
        .theme-dark & {
2917
            border-color: $dm-border-color;
2918
        }
2919
 
2920
        margin-top: 0;
2921
        margin-bottom: $page-padding-global;
2922
 
2923
        overflow: hidden;
2924
 
2925
        &:empty {
2926
            display: none;
2927
        }
2928
 
2929
        &.rui-activity--hasnotcompletion {
2930
            padding-bottom: 0;
2931
            border: none;
2932
        }
2933
 
2934
        .automatic-completion-conditions {
1441 ariadna 2935
            margin-left: 5px;
1 efrain 2936
            width: 100%;
2937
            display: inline-flex;
2938
            justify-content: flex-start;
2939
            flex-flow: wrap;
2940
        }
2941
 
2942
        .rui-activity-information {
2943
            display: flex;
2944
            flex-wrap: wrap;
2945
 
2946
            @include media-breakpoint-between(xs, md) {
2947
                overflow-x: auto;
2948
            }
2949
        }
2950
 
2951
        &.rui-activity--hasnotcompletion {
2952
            .rui-activity-information {
2953
                margin-bottom: 0;
2954
                border-bottom: none;
2955
            }
2956
        }
2957
 
2958
        .rui-activity-dates,
2959
        .rui-completion-info--manual {
2960
            position: relative;
2961
        }
2962
 
2963
        .rui-completion-info--manual {
2964
            .btn {
2965
                height: 42px;
2966
            }
2967
        }
2968
 
2969
        .rui-activity-dates {
2970
            left: auto;
2971
        }
2972
 
2973
    }
2974
}
2975
 
2976
.rui--activity-notautomatic,
2977
.rui--activity-is-manual {
2978
    .activity-badges {
2979
        padding-left: $rui-date-margin-left;
2980
        margin-bottom: 15px !important;
2981
    }
2982
}
2983
 
2984
.modtype_label .activity-badges {
2985
    padding: 0;
2986
}
2987
 
2988
// Dark mode.
2989
.theme-dark.path-mod {
2990
    .rui-activity-wrapper {
2991
        border-color: $dm-border-color;
2992
    }
2993
}
2994
 
2995
.rui-activity-information .rui-completion-info-wrapper {
2996
    .btn {
2997
        height: 42px;
2998
    }
2999
}
3000
 
3001
/* end of Activity Item Section */
3002
 
3003
 
3004
// * Formats - Topics
3005
.rui-activity-content {
3006
    position: relative;
3007
    display: inherit;
3008
 
3009
    .inplaceeditable-text {
3010
        display: flex;
3011
        align-items: center;
3012
        flex-wrap: wrap;
3013
 
3014
        .quickeditlink {
3015
            margin-left: .35rem;
3016
        }
3017
    }
3018
}
3019
 
3020
.rui-course-sectionname {
3021
    font-size: 1.125rem; //18px
3022
    color: $headings-color;
3023
 
3024
    a {
3025
        color: $headings-color;
3026
 
3027
        .theme-dark & {
3028
            color: $dm-headings-color;
3029
        }
3030
 
3031
        &:hover {
3032
            color: $link-color;
3033
 
3034
            .theme-dark & {
3035
                color: $dm-link-color;
3036
            }
3037
        }
3038
    }
3039
}
3040
 
3041
.rui-activity-edit-wrapper {
3042
    padding: 10px;
3043
    margin-bottom: 15px;
3044
 
3045
    display: flex;
3046
    flex-wrap: wrap;
3047
    justify-content: space-between;
3048
 
3049
    background-color: $gray-100;
3050
    border-radius: $btn-border-radius;
3051
 
3052
    .theme-dark & {
3053
        background-color: $dm-gray-100;
3054
    }
3055
 
3056
    .activity:hover & {
3057
        background-color: $gray-300;
3058
 
3059
        .theme-dark & {
3060
            background-color: $dm-gray-300;
3061
        }
3062
    }
3063
 
3064
    .dropdown-btn {
3065
        align-items: center;
3066
 
3067
        padding: 10px 18px;
3068
        background-color: $white;
3069
        border-radius: $btn-border-radius;
3070
 
3071
        font-size: 13px;
3072
        color: $gray-900;
3073
 
3074
        .theme-dark & {
3075
            background-color: $dm-white;
3076
            color: $dm-gray-900;
3077
        }
3078
    }
3079
 
3080
    .aabtn.menu-action .icon {
3081
        padding: 0;
3082
        background-color: transparent;
3083
    }
3084
 
3085
    .moodle-core-dragdrop-draghandle {
3086
        margin-left: 0;
3087
 
3088
        @include media-breakpoint-down(md) {
3089
            margin-bottom: 10px;
3090
        }
3091
    }
3092
}
3093
 
3094
/* Activity Chooser */
3095
.rui-activitychooser-bg {
3096
    background-color: $gray-100;
3097
    border-radius: $btn-border-radius;
3098
 
3099
    .theme-dark & {
3100
        background-color: $dm-gray-100;
3101
    }
3102
}
3103
 
3104
.rui-optionicon {
3105
    display: inline-flex;
3106
    align-content: center;
3107
 
3108
    img {
3109
        width: 20px;
3110
        height: 20px;
3111
        margin-right: 10px;
3112
        margin-left: 3px;
3113
    }
3114
}
3115
 
3116
.rui-optionname {
3117
    font-size: $font-size-md;
3118
    font-weight: $font-weight-medium;
3119
    line-height: 1.2;
3120
    color: $body-color;
3121
 
3122
    .theme-dark & {
3123
        color: $dm-body-color;
3124
    }
3125
}
3126
 
3127
/* Course Format - Topics */
3128
.course-card-link {
3129
    &:hover {
3130
        text-decoration: none;
3131
 
3132
        .rui-course-format-card {
3133
            width: 100%;
3134
            background-color: var(--primary-color-100);
3135
            border-color: var(--primary-color-100);
3136
 
3137
            .theme-dark & {
1441 ariadna 3138
                background-color: var(--primary-color-700);
1 efrain 3139
                border-color: var(--primary-color-100);
3140
            }
3141
        }
3142
 
3143
        .course-progressbar-wrapper {
3144
            background-color: $container-bg;
3145
 
3146
            .theme-dark & {
3147
                background-color: $dm-gray-100;
3148
            }
3149
        }
3150
    }
3151
}
3152
 
3153
.rui-section-summary-activities {
3154
    margin: 15px -20px 0;
3155
    padding: 15px 20px 0;
3156
    border-top: 2px dashed $border-color;
3157
 
3158
    font-size: $font-size-xs;
3159
    color: $body-color-light;
3160
 
3161
    .theme-dark & {
3162
        color: $dm-body-color-light;
3163
        border-color: $dm-border-color;
3164
    }
3165
 
3166
    .activity-count {
3167
        margin-right: .5rem;
3168
        padding-right: .5rem;
3169
        border-right: 1px solid $border-color;
3170
 
3171
        .theme-dark & {
3172
            border-color: $dm-border-color;
3173
        }
3174
 
3175
        &:last-of-type {
3176
            margin-right: 0;
3177
            padding-right: 0;
3178
            border-right: none;
3179
        }
3180
    }
3181
}
3182
 
3183
.rui-progress--complete {
3184
    padding: 3px;
3185
    font-weight: $font-weight-bold;
3186
}
3187
 
3188
.rui-progress--total {
3189
    padding: 3px;
3190
    font-weight: $font-weight-bold;
3191
    opacity: .7;
3192
}
3193
 
3194
 
3195
// Format Course Multitopic
3196
ul.sections {
3197
    padding: 0;
3198
}
3199
 
3200
.format-multitopic {
3201
 
3202
    .completionprogress {
3203
        margin: 10px 0;
3204
    }
3205
 
3206
    .sections {
3207
        .section_subtitle {
3208
            display: block;
3209
            margin-top: 10px;
3210
            font-family: $font-family-base;
3211
            font-weight: $font-weight-normal;
3212
            font-size: $font-size-xs;
3213
            color: $body-color-light;
3214
        }
3215
    }
3216
 
3217
 
3218
    .section-topic-timed {
3219
        margin: 10px 0;
3220
        padding: 10px;
3221
        border: 1px solid $border-color;
3222
        border-radius: $btn-border-radius;
3223
 
3224
        .theme-dark & {
3225
            border-color: $dm-border-color;
3226
        }
3227
 
3228
        .summary,
3229
        .comntent .rui-section {
3230
            padding: 10px 25px;
3231
        }
3232
 
3233
        &.section-expanded {
3234
            border: 2px solid var(--primary-color-100);
3235
        }
3236
 
3237
        .rui-main-content-title {
3238
            margin: 10px 40px 10px 25px;
3239
        }
3240
 
3241
        .rui-section {
3242
            margin-bottom: 0;
3243
        }
3244
 
3245
        .rui-title-container {
3246
            position: relative;
3247
            margin-bottom: 0;
3248
 
3249
            .icon {
3250
                position: absolute;
3251
                top: 5px;
3252
                right: 5px;
3253
 
3254
                display: flex;
3255
                align-items: center;
3256
                justify-content: center;
3257
 
3258
                width: 30px;
3259
                height: 30px;
3260
                background-color: $gray-100;
3261
                border-radius: 30px;
3262
 
3263
                .theme-dark & {
3264
                    background-color: $dm-gray-100;
3265
                }
3266
            }
3267
        }
3268
 
3269
        .rui-activity-dates {
3270
            left: $rui-date-margin-left;
3271
        }
3272
    }
3273
}
3274
 
3275
// Format CourseCollapsible Weeks
3276
.editing .weeks .rui-title-container {
3277
    margin: $page-padding-global 0 10px;
3278
    padding: 10px;
3279
}
3280
 
3281
.rui-course-content-intro {
3282
    padding: 0;
3283
    margin-bottom: $page-padding-global;
3284
 
3285
    .rui-section {
3286
        margin-top: 15px;
3287
    }
3288
 
3289
    .rui-title-container {
3290
        margin-bottom: 10px;
3291
    }
3292
 
3293
    .rui-section-summary-activities {
3294
        margin: 15px 0 0;
3295
        padding: 5px 8px;
3296
        width: 100%;
3297
 
3298
        background-color: $gray-100;
3299
        border: none;
3300
        border-radius: $btn-border-radius;
3301
 
3302
        .theme-dark & {
3303
            background-color: $dm-gray-100;
3304
        }
3305
    }
3306
 
3307
    .rui-main-content-title--h4 {
3308
        font-size: 2.5rem; //40px
3309
    }
3310
 
3311
    .summarytext {
3312
        font-size: $font-size-base;
3313
    }
3314
}
3315
 
3316
.format-collapsibleweeks {
3317
    .collapsibleweeks {
3318
        .rui-activity-dates {
3319
            left: 77px;
3320
        }
3321
    }
3322
}
3323
 
3324
.course-content ul.collapsibleweeks .content .summarytext {
3325
    margin: 10px 0;
3326
}
3327
 
3328
body.editing ul.collapsibleweeks .content .summarytext {
3329
    margin-left: 0;
3330
}
3331
 
3332
.course-content ul.collapsibleweeks li.section .content {
3333
    margin: 0 0 10px;
3334
    padding: 15px 20px;
3335
 
3336
    body:not(.editing) & {
3337
        &:hover {
3338
            transform: translateY(-3px);
3339
        }
3340
    }
3341
 
3342
}
3343
 
3344
.course-content ul.collapsibleweeks li.section .right {
3345
    padding: 0;
3346
}
3347
 
3348
.course-content ul.collapsibleweeks a.sectiontoggle {
3349
    margin: 0;
3350
}
3351
 
3352
body.editing .course-content ul.collapsibleweeks li.section .left.side {
3353
    margin-left: 10px;
3354
 
3355
    .moodle-core-dragdrop-draghandle {
3356
        margin-right: 20px;
3357
    }
3358
}
3359
 
3360
.course-content ul.collapsibleweeks li.section .sectionname:empty {
3361
    display: none;
3362
}
3363
 
3364
.collapsibleweeks .progress {
3365
    display: none;
3366
}
3367
 
3368
.rui-sectiontoggle {
3369
    display: block;
3370
 
3371
    padding: 0 !important;
3372
 
3373
    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'%3E%3Cpath d='M12 9.75L16.25 15.25H7.75L12 9.75Z' stroke='#{url-friendly-colour($body-color)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E ") !important;
3374
    background-position: right !important;
3375
    background-repeat: no-repeat;
3376
    background-size: 16px !important;
3377
    background-color: transparent;
3378
 
3379
    &.collapsed {
3380
        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'%3E%3Cpath d='M14.25 12L8.75 7.75V16.25L14.25 12Z' stroke='#{url-friendly-colour($body-color)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E") !important;
3381
    }
3382
 
3383
    &:hover {
3384
        text-decoration: none;
3385
    }
3386
}
3387
 
3388
.rui-sectiontoggle,
3389
.course-content .collapsible-actions a.collapseall {
3390
    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'%3E%3Cpath d='M12 9.75L16.25 15.25H7.75L12 9.75Z' stroke='#{url-friendly-colour($body-color)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E ") !important;
3391
}
3392
 
3393
.course-content .collapsible-actions a.collapseall {
3394
    background-position: 0 !important;
3395
    background-size: 18px !important;
3396
}
3397
 
3398
.catlevel1 {
3399
    li {
3400
        padding: .35rem 0;
3401
        margin: .35rem;
3402
 
3403
        .itemicon {
3404
            margin-right: .35rem;
3405
            width: 30px;
3406
            height: 30px;
3407
        }
3408
    }
3409
}
3410
 
3411
 
3412
// Mods
3413
.rui-category-actions {
3414
    margin-top: 10px;
3415
    margin-left: 115px;
3416
    width: 100%;
3417
    position: relative;
3418
 
3419
    .course-item-actions {
3420
        width: 100%;
3421
 
3422
        .action-delete {
3423
            position: absolute;
3424
            right: 10px;
3425
        }
3426
    }
3427
}
3428
 
3429
.course-item-actions {
3430
    display: inline-flex;
3431
}
3432
 
3433
.errorbox {
3434
    padding: $alert-padding-y $alert-padding-x;
3435
    margin-top: $page-padding-global;
3436
 
3437
    background-color: $red-100;
3438
    position: relative;
3439
 
3440
    border: $alert-border-width solid transparent;
3441
    @include border-radius($alert-border-radius);
3442
 
3443
    font-size: $font-size-md;
3444
    font-weight: $font-weight-medium;
3445
 
3446
    color: $red-900;
3447
 
3448
    .theme-dark & {
3449
        background-color: $red-900;
3450
        color: $red-100;
3451
    }
3452
}
3453
 
3454
 
3455
// Recent activities
3456
#page-course-recent {
3457
    .list-unstyled {
3458
        li {
3459
            padding: .5rem 0;
3460
            font-size: $font-size-md;
3461
            font-weight: $font-weight-medium;
3462
 
3463
            .rui-icon-container {
3464
                margin-right: .25rem;
3465
            }
3466
        }
3467
    }
3468
}
3469
 
3470
//Moodle 4.0
3471
.block-add {
3472
    width: 100%;
3473
    margin: .35rem 0;
3474
    border-radius: $btn-border-radius;
3475
    background-color: var(--primary-color-100);
1441 ariadna 3476
    color: var(--main-theme-color);
1 efrain 3477
    border-width: $border-width;
3478
 
3479
    .theme-dark & {
3480
        background-color: var(--primary-color-100);
1441 ariadna 3481
        color: var(--main-theme-color);
1 efrain 3482
    }
3483
 
3484
    .pluscontainer {
3485
        border: 1px solid var(--primary-color-100);
3486
    }
3487
 
3488
    &:hover {
3489
        cursor: pointer;
3490
        background-color: var(--primary-color-100);
1441 ariadna 3491
        color: var(--main-theme-color);
1 efrain 3492
 
3493
        .theme-dark & {
3494
            background-color: var(--primary-color-100);
1441 ariadna 3495
            color: var(--main-theme-color);
1 efrain 3496
        }
3497
 
3498
        .activity-add-text {
3499
            text-decoration: underline;
3500
        }
3501
    }
3502
}
3503
 
3504
.section-collapsemenu {
3505
    .collapseall {
3506
        display: block;
3507
    }
3508
 
3509
    .expandall {
3510
        display: none;
3511
    }
3512
 
3513
    &.collapsed {
3514
        .collapseall {
3515
            display: none;
3516
        }
3517
 
3518
        .expandall {
3519
            display: block;
3520
        }
3521
    }
3522
}
3523
 
3524
.rui-course-header--color {
3525
    padding: 40px 60px;
3526
    background-color: var(--primary-color-100);
3527
    border-radius: $btn-border-radius;
3528
}
3529
 
3530
.rui-course-header-btn {
3531
    .sectionname {
3532
        font-size: 1.125rem; // 18px.
3533
        font-weight: $font-weight-medium;
3534
    }
3535
}
3536
 
3537
.rui-course-header-btn-icon {
3538
    width: $activity-iconcontainer-width;
3539
    height: $activity-iconcontainer-height;
3540
    display: inline-flex;
3541
    justify-content: center;
3542
    align-items: center;
3543
    background-color: $gray-100;
3544
    border-radius: $activity-iconcontainer-width;
3545
    padding: 0.7rem;
1441 ariadna 3546
    margin: 0 12px;
1 efrain 3547
    color: $gray-600;
1441 ariadna 3548
    text-decoration: none;
1 efrain 3549
 
3550
    .theme-dark & {
1441 ariadna 3551
        background-color: $dm-gray-400;
3552
        color: $dm-gray-900;
1 efrain 3553
    }
3554
 
3555
    &:hover {
3556
        background-color: var(--primary-color-100);
1441 ariadna 3557
        color: var(--main-theme-color);
1 efrain 3558
 
3559
        .theme-dark & {
1441 ariadna 3560
            background-color: $dm-gray-400;
3561
            color: $dm-gray-900;
1 efrain 3562
        }
3563
    }
3564
}
3565
 
3566
.rui-course-header-btn-link {
3567
    margin: 0;
3568
    padding: 12px 0;
3569
 
3570
    width: 100%;
3571
    justify-content: space-between;
3572
 
3573
    color: $body-color;
3574
    border-bottom: 1px solid $border-color;
1441 ariadna 3575
    text-decoration: none;
1 efrain 3576
 
3577
    .theme-dark & {
3578
        color: $dm-body-color;
3579
        border-color: $dm-border-color;
3580
    }
3581
 
3582
    .sectionname {
3583
        font-family: $font-family-base;
3584
        font-weight: $font-weight-medium;
3585
        font-size: 1rem;
3586
    }
3587
 
3588
    &[aria-expanded="true"],
3589
    &:hover {
1441 ariadna 3590
        border-color: var(--main-theme-color);
1 efrain 3591
        text-decoration: none;
3592
    }
3593
 
3594
    .icon {
3595
        color: $body-color-light;
3596
 
3597
        .theme-dark & {
3598
            color: $dm-body-color-light;
3599
        }
3600
    }
3601
 
3602
    &[aria-expanded="true"] {
3603
        margin-bottom: 1rem;
3604
    }
3605
}
3606
 
3607
// Moodle 4.
3608
.editing {
3609
    .a {
3610
        cursor: pointer;
3611
    }
3612
}
3613
 
3614
.section .draggable .activity-item .dragicon {
3615
    display: none;
3616
}
3617
 
3618
.draggable {
3619
    cursor: move;
3620
}
3621
 
3622
.activity-item.hiddenactivity {
3623
    .activityname {
3624
        opacity: .7;
3625
    }
3626
}
3627
 
3628
.section-modchooser {
3629
    font-weight: $font-weight-medium;
3630
    color: $body-color-secondary;
3631
 
3632
    .theme-dark & {
3633
        color: $dm-body-color-secondary;
3634
    }
3635
 
3636
    &:hover {
1441 ariadna 3637
        color: var(--main-theme-color);
1 efrain 3638
 
3639
        .theme-dark & {
3640
            color: var(--primary-color-100);
3641
        }
3642
    }
3643
 
3644
    .pluscontainer {
3645
        background-color: $white;
3646
        box-shadow: $box-shadow-md;
3647
        width: 40px;
3648
        height: 40px;
3649
        border-radius: 40px;
3650
 
3651
        display: flex;
3652
        align-items: center;
3653
        justify-content: center;
3654
 
3655
        .theme-dark & {
3656
            background-color: $black;
3657
        }
3658
    }
3659
}
3660
 
3661
 
3662
.rui--activity-is-manual {
3663
    display: flex;
3664
    justify-content: space-between;
3665
}
3666
 
3667
.rui-hidden-badge {
3668
    position: relative;
3669
    margin: 0 $rui-date-margin-left;
3670
}
3671
 
1441 ariadna 3672
.path-section-view,
1 efrain 3673
.path-course-view {
3674
    .activity-item {
3675
        position: relative;
3676
        background-color: $container-bg;
3677
        border-radius: $btn-border-radius;
3678
 
3679
        &:not(.activityinline) {
3680
            border: $border-width solid $border-color;
3681
            padding: 12px;
3682
        }
3683
 
3684
        &.activityinline {
3685
            padding: 0;
3686
 
3687
            &.label {
3688
                padding: 0;
3689
            }
3690
        }
3691
 
3692
        .activity-actions {
3693
            .actions {
3694
                position: relative;
3695
 
3696
                .btn {
3697
                    min-height: 35px;
3698
                }
3699
            }
3700
 
3701
            .dropdown-toggle::after {
3702
                display: none;
3703
            }
3704
        }
3705
 
3706
        .inplaceeditable {
3707
            display: flex;
3708
            flex: 0 1 auto;
3709
            max-width: 100%;
3710
        }
3711
 
3712
        /* Prevent bootstrap strech-link from covering the inplace editable button using z-index. */
3713
        .activityname {
3714
            .afterlink {
3715
                margin-left: 0.5rem;
3716
            }
3717
 
3718
            .inplaceeditable .quickeditlink {
3719
                z-index: 2;
3720
                margin-left: 0.5rem;
3721
            }
3722
        }
3723
 
3724
        .no-overflow {
3725
            width: 100%;
3726
        }
3727
 
3728
        @include media-breakpoint-down(sm) {
3729
            .badge {
3730
                white-space: normal;
3731
                text-align: left;
3732
            }
3733
        }
3734
 
3735
        @include media-breakpoint-up(sm) {
3736
            .automatic-completion-conditions {
3737
                margin: 10px 32px 0;
3738
                display: flex;
3739
                //flex-direction: column;
3740
                align-items: flex-start;
3741
            }
3742
 
3743
            &:not(.activityinline) {
3744
                padding: 12px !important;
3745
            }
3746
 
3747
            .activity-info,
3748
            .activity-actions {
3749
                padding-left: map-get($spacers, 2);
3750
                align-self: start;
3751
                display: flex;
3752
                flex-direction: column;
3753
                justify-content: center;
3754
            }
3755
        }
3756
    }
3757
}
3758
 
1441 ariadna 3759
.theme-dark.path-section-view,
1 efrain 3760
.theme-dark.path-course-view {
3761
    .activity-item {
3762
        background-color: $dm-container-bg;
3763
 
3764
        &:not(.activityinline) {
3765
            border-color: $dm-border-color;
3766
        }
3767
    }
3768
}
3769
 
3770
.editing .activity-item {
3771
    cursor: move;
3772
 
3773
    .a {
3774
        cursor: pointer;
3775
    }
3776
}
3777
 
3778
.theme-dark.editing .activity-item:hover {
3779
    background-color: $dm-black;
3780
}
3781
 
3782
.automatic-completion-conditions .badge {
3783
    font-size: 80%;
3784
 
3785
    .icon {
3786
        width: 0.7rem;
3787
        height: 0.7rem;
3788
        font-size: 0.7rem;
3789
    }
3790
 
3791
    &:first-child {
3792
        margin-top: 0;
3793
    }
3794
}
3795
 
3796
.activity-dates {
3797
    font-size: $font-size-xs;
3798
    color: $body-color-light;
3799
 
3800
    .theme-dark & {
3801
        color: $dm-body-color-light;
3802
    }
3803
}
3804
 
1441 ariadna 3805
.subcategories {
3806
    padding-bottom: 30px;
3807
    margin-bottom: 30px;
1 efrain 3808
 
1441 ariadna 3809
    border-bottom: 1px solid $border-color;
3810
 
3811
    .theme-dark & {
3812
        border-color: $dm-border-color;
1 efrain 3813
    }
1441 ariadna 3814
 
3815
    @include media-breakpoint-up(xl) {
3816
        display: grid;
3817
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
3818
        gap: 30px;
3819
 
3820
        #page-site-index &,
3821
        .category-browse-0 & {
3822
            grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
3823
        }
3824
    }
3825
 
3826
    @include media-breakpoint-between(lmd,lg) {
3827
        display: grid;
3828
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
3829
        gap: 30px;
3830
 
3831
        #page-site-index &,
3832
        .category-browse-0 & {
3833
            grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
3834
        }
3835
    }
3836
 
3837
    @include media-breakpoint-only(md) {
3838
        display: grid;
3839
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
3840
        gap: 30px;
3841
    }
3842
 
3843
    @include media-breakpoint-between(xs, sm) {
3844
        display: grid;
3845
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
3846
        gap: 30px;
3847
    }
3848
 
3849
    .category {
3850
        border-radius: $btn-border-radius;
3851
        border: 1px solid $border-color;
3852
 
3853
        .theme-dark & {
3854
            border-color: $dm-border-color;
3855
        }
3856
    }
1 efrain 3857
}
3858
 
1441 ariadna 3859
// Custom Fields on Course Box
3860
.rui-course-card {
3861
    .rui-custom-field-contaner {
3862
        margin-top: 10px;
3863
    }
3864
 
3865
    .rui-custom-field-contaner + .rui-custom-field-contaner {
3866
        margin-top: 0;
3867
    }
3868
 
3869
    .rui-custom-field-box {
3870
        display: flex;
3871
        flex-wrap: wrap;
3872
        font-size: $font-size-sm;
3873
        color: $body-color-secondary;
3874
 
3875
        margin: 0 0 6px;
3876
 
3877
        .theme-dark & {
3878
            color: $dm-body-color-secondary;
3879
        }
3880
 
3881
        .rui-custom-field-name {
3882
            margin-right: .5rem;
3883
            font-weight: $font-weight-bold;
3884
        }
3885
 
3886
        .rui-custom-field-price {
3887
            display: none;
3888
 
3889
            + .rui-custom-field-value {
3890
                font-size: 20px;
3891
                font-weight: $font-weight-bold;
3892
                color: var(--main-theme-color);
3893
            }
3894
        }
3895
 
3896
        #page-enrol-index & {
3897
            display: none;
3898
            visibility: hidden;
3899
        }
3900
    }
3901
 
3902
    // Reset margin for ratings.
3903
    .rui-cf-tool_courserating {
3904
        margin: 0!important;
3905
    }
3906
 
3907
    .rui-cf-price {
3908
        margin-top: 20px;
3909
    }
3910
 
3911
    .rui-cf-price + .rui-custom-field-box {
3912
        margin-top: 20px;
3913
    }
3914
}
3915
 
3916
.rui-course-header-custom-f .rui-cf-tool_courserating {
3917
    display: none!important;
3918
    visibility: hidden;
3919
}
3920
 
3921
.rui-categorybox-wrapper {
3922
    p, div.rui-cat-content, ul, ol  {
3923
        padding: 0 $category-box-padding;
3924
        font-size: $font-size-sm;
3925
        color: $body-color-secondary;
3926
 
3927
        word-break: break-word;
3928
 
3929
        .theme-dark & {
3930
            color: $dm-body-color-secondary;
3931
        }
3932
 
3933
        &:empty {
3934
            display: none;
3935
        }
3936
    }
3937
 
3938
    img,
3939
    .vjs-poster {
3940
        width: 100%;
3941
        border-radius: $btn-border-radius;
3942
        overflow: hidden;
3943
    }
3944
}
3945
 
3946
.rui-category-box-subcat {
3947
    margin: 20px $category-box-padding;
3948
    display: flex;
3949
    flex-wrap: wrap;
3950
    gap: 10px;
3951
}
3952
 
3953
.rui-categoryname {
3954
    padding: 20px $category-box-padding;
3955
    margin-bottom: 0;
3956
 
3957
    a {
3958
        display: flex;
3959
        font-size: 1.5rem;
3960
        color: $headings-color;
3961
        font-weight: $font-weight-bold;
3962
 
3963
        .subcategories & {
3964
            font-size: $font-size-base;
3965
 
3966
            #page-site-index &,
3967
            .category-browse-0 & {
3968
                font-size: 1.5rem;
3969
            }
3970
        }
3971
 
3972
        &:hover {
3973
            color: $link-hover-color;
3974
 
3975
            .theme-dark & {
3976
                color: $dm-link-hover-color;
3977
            }
3978
        }
3979
 
3980
        .theme-dark & {
3981
            color: $dm-headings-color;
3982
        }
3983
    }
3984
}
3985
 
3986
.rui-no-courses-title {
3987
    margin: -15px 20px 20px;
3988
    font-size: 1rem;
3989
    color: $body-color-light;
3990
    font-weight: $font-weight-medium;
3991
 
3992
    .subcategories & {
3993
        font-size: $font-size-sm;
3994
 
3995
        #page-site-index &,
3996
        .category-browse-0 & {
3997
            font-size: 1rem;
3998
        }
3999
    }
4000
 
4001
    .theme-dark & {
4002
        color: $dm-body-color-light;
4003
    }
4004
}
4005
 
4006
.rui-subcat-badge {
4007
    padding: 4px 10px;
4008
    background-color: $gray-100;
4009
    border-radius: $btn-border-radius;
4010
 
4011
    font-size: .85rem;
4012
    color: $body-color;
4013
    font-weight: $font-weight-medium;
4014
    text-decoration: none;
4015
 
4016
    &:hover {
4017
        text-decoration: none;
4018
    }
4019
 
4020
    .theme-dark & {
4021
        background-color: $dm-gray-100;
4022
        color: $dm-body-color;
4023
    }
4024
}
4025
 
1 efrain 4026
.action-menu-item,
4027
.course-item-actions {
4028
 
4029
    .action-hide,
4030
    .action-show {
4031
        margin: 0 2px;
4032
    }
4033
 
4034
    .action-delete {
4035
        float: right;
4036
        margin-left: .5rem;
4037
    }
4038
 
4039
    a {
4040
        .icon {
4041
            margin: 1px;
4042
            padding: 6px;
4043
 
4044
            display: inline-flex;
4045
            align-items: center;
4046
            justify-content: center;
4047
 
4048
            border-radius: $btn-border-radius;
4049
 
4050
            background-color: $gray-200;
4051
            font-size: $font-size-xs;
4052
            color: $gray-800;
4053
 
4054
            transition: $transition-base;
4055
 
4056
            .theme-dark & {
4057
                background-color: $dm-gray-200;
4058
                color: $dm-gray-900;
4059
            }
4060
 
4061
            &:hover {
4062
                background-color: $gray-300;
4063
 
4064
                .theme-dark & {
4065
                    background-color: $dm-gray-300;
4066
                }
4067
            }
4068
        }
4069
 
4070
        &:hover {
4071
            text-decoration: none;
4072
        }
4073
 
4074
        &.action-delete .icon {
4075
            background-color: $red-100;
4076
            color: $red-800;
4077
            border-radius: $btn-border-radius;
4078
 
4079
            &:hover {
4080
                background-color: $red-200;
4081
            }
4082
        }
4083
    }
4084
}
4085
 
4086
@include media-breakpoint-between(xs, sm) {
4087
    .activity-info {
4088
        padding-left: 40px;
4089
    }
4090
}
4091
 
4092
.rui-course-details {
4093
    display: flex;
4094
    align-items: center;
4095
    flex-wrap: wrap;
4096
    gap: 30px;
4097
}
4098
 
4099
#csbottombl:not(:empty) {
4100
    margin-top: 30px;
4101
}
4102
 
4103
//$course-cover-height: 500px !default;
4104
 
4105
.rui-course-cover {
4106
    background-repeat: no-repeat;
4107
    background-size: cover;
4108
    width: 100%;
4109
 
4110
    border-radius: $btn-border-radius-lg;
4111
    aspect-ratio: 16 / 6;
4112
 
4113
}
1441 ariadna 4114
 
4115
.rui-course-cover--style-2 {
4116
    background-attachment: fixed;
4117
    background-size: contain;
4118
}
4119
 
1 efrain 4120
.rui-course-cover--fw {
4121
    .show-drawer-left.show-drawer-right & {
4122
        margin-left: -40px;
4123
        width: calc(100% + 80px);
4124
    }
4125
 
4126
    @include media-breakpoint-up(md) {
1441 ariadna 4127
        margin-left: -100px;
4128
        width: calc(100% + 200px);
1 efrain 4129
    }
4130
}
4131
 
4132
// Moodle 4.2
4133
 
4134
.activity:focus-within+.activity div.divider button,
4135
.course-section-header:focus-within+.content .section .activity:first-child div.divider button,
4136
.content .section .activity:focus-within div.divider button {
4137
    visibility: visible;
4138
}
4139
 
4140
.bulkenabled .bulk-hidden {
4141
    display: none !important; // stylelint-disable-line declaration-no-important
4142
}
4143
 
4144
.activity-item .bulkselect {
4145
    position: absolute;
4146
    left: -2rem;
4147
 
4148
    input[type="radio"],
4149
    input[type="checkbox"] {
4150
        width: 20px;
4151
        height: 20px;
4152
    }
4153
}
4154
 
4155
.course-section-header .bulkselect {
4156
    left: -2rem;
4157
    position: relative;
4158
    width: 0;
4159
}
4160
 
4161
@include media-breakpoint-down(sm) {
4162
    .bulkenabled .course-content {
4163
        margin-left: 2rem;
4164
    }
4165
}
4166
 
4167
.rui-forum-nav-btns {
4168
    white-space: pre-wrap;
4169
    position: relative;
4170
}
4171
 
4172
 
4173
// Moodle 4.3
4174
.btn--dialog {
4175
    height: 30px;
4176
    width: 30px;
4177
    padding: 5px 2px 5px 2px;
4178
    border: 0;
4179
 
4180
    @include caret();
4181
 
4182
    svg {
4183
        width: 16px;
4184
        height: 16px;
4185
    }
4186
 
4187
    &:after {
4188
        margin-left: 0;
4189
    }
4190
}
4191
 
4192
.badge.dropdown-toggle {
4193
    padding-left: 5px;
4194
    @include caret();
4195
 
4196
    .icon {
4197
        margin-right: 10px;
4198
        background-color: $container-bg;
4199
        width: 16px;
4200
        height: 16px;
4201
        border-radius: 20px;
4202
        padding: 5px;
4203
    }
4204
}
4205
 
4206
.activity-completion {
4207
    @include media-breakpoint-between(xs, sm) {
4208
        width: 100%;
4209
        margin-bottom: 20px;
4210
    }
4211
 
4212
    .btn {
4213
        height: 36px;
4214
        min-width: 36px;
4215
    }
4216
}
4217
 
4218
// Availability styles for both section and activities.
4219
.availabilityinfo {
4220
    margin-top: 10px;
4221
    padding: 6px 6px 6px 16px;
4222
    background-color: $gray-200;
4223
    font-size: $font-size-xs;
4224
    border-radius: $btn-border-radius;
4225
 
4226
    .theme-dark & {
4227
        background-color: $dm-gray-100;
4228
    }
4229
 
4230
    .section_availability & {
4231
        background-color: transparent;
4232
        padding: 0;
4233
        margin: 0;
4234
    }
4235
 
4236
    .editavailability {
4237
        a {
4238
            @include border-radius();
4239
            font-weight: bold;
4240
 
4241
            &:hover {
4242
                background-color: $gray-400;
4243
            }
4244
 
4245
            .icon {
4246
                font-size: inherit;
4247
                margin-right: .5rem;
4248
            }
4249
        }
4250
    }
4251
}
4252
 
4253
&.section-summary {
1441 ariadna 4254
    padding: 7px 14px 7px 24px;
1 efrain 4255
    border-radius: $btn-border-radius;
1441 ariadna 4256
    border: 1px solid $border-color;
4257
 
4258
    .theme-dark & {
4259
        border-color: $dm-border-color;
4260
    }
4261
 
4262
    .section-summary-activities {
4263
        font-size: $font-size-xs;
4264
        .icon {
4265
            font-size: $font-size-xs;
4266
            margin-right: 3px;
4267
        }
4268
    }
4269
 
4270
    .theme-dark & {
4271
        background-color: $dm-gray-100;
4272
    }
1 efrain 4273
}
4274
 
4275
.section-summary-activities .activity-count {
4276
    color: $text-muted;
4277
    font-size: $font-size-sm;
4278
    margin: 3px;
4279
    white-space: nowrap;
4280
    display: inline-block;
4281
 
4282
    .theme-dark & {
4283
        color: $dm-text-muted;
4284
    }
4285
}
4286
 
4287
.activity-completion {
4288
    .btn.dropdown-toggle {
4289
        border: 0;
4290
    }
4291
}
4292
 
4293
[data-region="availability-multiple"] {
4294
    margin-top: 10px;
4295
    margin-left: 20px;
4296
}
4297
 
4298
.completion-dropdown .btn-success {
4299
    padding-left: 7px;
4300
 
4301
    img {
4302
        margin-right: 5px;
4303
 
4304
        filter: invert(1);
4305
    }
4306
}
4307
 
4308
.dragicon .icon {
4309
    width: 19px;
4310
    height: 19px;
4311
    border-radius: $btn-border-radius - 1px;
4312
    padding: 4px;
4313
 
4314
    display: flex;
4315
    justify-content: center;
4316
    align-items: center;
4317
    background-color: $container-bg;
4318
    box-shadow: $box-shadow-md;
4319
 
4320
    .theme-dark & {
4321
        filter: invert(1);
4322
        box-shadow: none;
4323
    }
4324
}
4325
 
4326
.courseindex .courseindex-item {
4327
    .dragicon {
4328
        position: absolute;
1441 ariadna 4329
        z-index: 3;
1 efrain 4330
        top: 0;
1441 ariadna 4331
        right: -3px;
4332
 
4333
        .icon {
4334
            color: $body-color;
4335
        }
1 efrain 4336
    }
4337
 
4338
    &.dimmed {
4339
        opacity: 1 !important;
4340
 
4341
        .courseindex-chevron,
4342
        .courseindex-link {
4343
            opacity: 1 !important;
4344
 
4345
            color: $body-color-light;
4346
 
4347
            .theme-dark & {
4348
                color: $dm-body-color-light;
4349
            }
4350
        }
4351
 
4352
        .courseindex-name {
4353
            color: $body-color-light;
4354
 
4355
            .theme-dark & {
4356
                color: $dm-body-color-light;
4357
            }
4358
        }
4359
    }
4360
 
1441 ariadna 4361
    &.dimmed:not(.restrictions)::after {
1 efrain 4362
        content: '';
4363
        position: absolute;
1441 ariadna 4364
        top: 3px;
4365
        right: -20px;
4366
        width: 20px;
4367
        height: 20px;
4368
        border-radius: 20px;
1 efrain 4369
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='#{url-friendly-colour($body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M18.6247 10C19.0646 10.8986 19.25 11.6745 19.25 12C19.25 13 17.5 18.25 12 18.25C11.2686 18.25 10.6035 18.1572 10 17.9938M7 16.2686C5.36209 14.6693 4.75 12.5914 4.75 12C4.75 11 6.5 5.75 12 5.75C13.7947 5.75 15.1901 6.30902 16.2558 7.09698'%3E%3C/path%3E%3Cpath stroke='#{url-friendly-colour($body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19.25 4.75L4.75 19.25'%3E%3C/path%3E%3Cpath stroke='#{url-friendly-colour($body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M10.409 13.591C9.53033 12.7123 9.53033 11.2877 10.409 10.409C11.2877 9.5303 12.7123 9.5303 13.591 10.409'%3E%3C/path%3E%3C/svg%3E");
4370
        background-repeat: no-repeat;
4371
        background-position: center;
1441 ariadna 4372
        background-size: 12px;
1 efrain 4373
        background-color: $yellow-300;
4374
        z-index: 1;
4375
 
4376
        .courseindex-name {
4377
            color: $body-color-light;
4378
 
4379
            .theme-dark & {
4380
                color: $dm-body-color-light;
4381
            }
4382
        }
4383
    }
4384
}
4385
 
4386
.activity-basis {
4387
    gap: 10px;
4388
}
4389
 
4390
.section-summary {
4391
    hr {
4392
        margin-bottom: 0;
4393
    }
4394
}
4395
 
4396
// Course additional informations.
4397
.rui-course-card {
4398
 
4399
    .rui-course-card-text+.rui-custom-field-box {
4400
        margin-top: 20px;
4401
    }
4402
 
4403
    .rui-custom-field-box {
4404
        width: 100%;
4405
        display: flex;
4406
        margin-bottom: 5px;
4407
        font-size: $font-size-xs;
4408
 
4409
        .rui-custom-field-name {
4410
            margin-right: 5px;
4411
        }
4412
    }
4413
 
4414
    .rui-custom-field-value {
1441 ariadna 4415
        font-weight: $font-weight-medium;
1 efrain 4416
    }
4417
}
4418
 
4419
 
4420
.rui-course-details,
4421
.rui-course-header-custom-f {
4422
    display: flex;
4423
    flex-wrap: wrap;
4424
    align-items: center;
4425
 
4426
    .rui-custom-field-name {
4427
        display: block;
4428
        font-size: $font-size-sm;
4429
        font-weight: $font-weight-medium;
4430
        color: $body-color-light;
4431
 
4432
        @include media-breakpoint-up(xl) {
4433
            font-size: 1rem;
4434
        }
4435
 
4436
        @include media-breakpoint-down(lg) {
4437
            font-size: $font-size-md;
4438
        }
4439
 
4440
        .theme-dark & {
4441
            color: $dm-body-color-light;
4442
        }
4443
    }
4444
 
4445
    .rui-custom-field-value {
4446
        font-size: 16px;
4447
        font-weight: $font-weight-bold;
4448
        color: $body-color;
4449
 
4450
        @include media-breakpoint-up(xxl) {
4451
            font-size: 24px;
4452
        }
4453
 
4454
        @include media-breakpoint-down(lg) {
4455
            font-size: 18px;
4456
        }
4457
 
4458
        .theme-dark & {
4459
            color: $dm-body-color;
4460
        }
4461
    }
4462
}
4463
 
4464
.rui-course-info-box {
4465
    margin: 30px 0 0;
4466
    display: flex;
4467
    flex-wrap: wrap;
4468
    align-items: center;
4469
 
4470
    overflow-x: auto;
4471
    gap: 0;
4472
 
1441 ariadna 4473
    .path-enrol & {
4474
        margin: 7px 0 0 0;
4475
    }
4476
 
1 efrain 4477
    .rui-custom-field-box {
4478
        margin-right: 32px;
4479
        margin-bottom: 20px;
4480
        display: flex;
4481
        flex-wrap: wrap;
4482
        flex-direction: column;
4483
    }
4484
}
4485
 
4486
.rui-course-header-custom-f .rui-cf-tool_courserating {
4487
    display: none !important;
4488
    visibility: hidden;
4489
}
4490
 
4491
.tool_courserating-cfield {
4492
    border: 1px solid $border-color;
4493
    padding: 13px;
4494
    box-sizing: content-box;
4495
    border-radius: $btn-border-radius;
4496
 
1441 ariadna 4497
    .tool_courserating-ratingcolor,
4498
    .tool_courserating-ratings {
4499
        text-decoration: none;
1 efrain 4500
 
1441 ariadna 4501
        .rui-course-card & {
4502
            color: $white;
1 efrain 4503
        }
4504
    }
4505
 
1441 ariadna 4506
    .rui-course-card & {
4507
        position: absolute;
4508
        top: calc(#{$course-cover-height} - 47px);
4509
        left: 10px;
4510
        padding: 7px;
4511
        background-color: rgba($black, .5);
4512
        backdrop-filter: blur(2rem);
4513
        -webkit-backdrop-filter: blur(2rem);
4514
        border: 0;
4515
    }
4516
 
1 efrain 4517
    .theme-dark & {
4518
        border-color: $dm-border-color;
4519
    }
4520
 
4521
    .rui-course-info-box & {
4522
        margin: 0;
4523
        display: none;
4524
        visibility: hidden;
4525
    }
1441 ariadna 4526
 
1 efrain 4527
    a:before {
4528
        display: none;
4529
    }
4530
 
4531
    .fa-star {
4532
        color: $yellow-700;
4533
    }
4534
 
4535
    .tool_courserating-ratingcolor,
4536
    .tool_courserating-ratings {
4537
        color: $body-color-light;
4538
 
4539
        .theme-dark & {
4540
            color: $dm-body-color-light;
4541
        }
4542
    }
4543
}
4544
 
1441 ariadna 4545
.tool_courserating-widget {
4546
    .add-rating-link {
4547
        margin: 20px 3px;
4548
    }
4549
}
4550
 
4551
.rui-course-card {
4552
    .rui-custom-field-box.rui-cf-difficulty,
4553
    .rui-custom-field-box.rui-cf-duration {
4554
        margin: 0;
4555
        background-color: rgba($black, .7);
4556
        border-radius: $btn-border-radius;
4557
        padding: 4px 10px;
4558
        font-size: $font-size-sm;
4559
        font-weight: $font-weight-medium;
4560
        color: $white;
4561
 
4562
        .rui-custom-field-name {
4563
            display: none;
4564
        }
4565
    }
4566
 
4567
    .rui-custom-field-box.rui-cf-difficulty {
4568
        position: absolute;
4569
        top: 10px;
4570
        right: 10px;
4571
        width: auto;
4572
    }
4573
 
4574
    .rui-custom-field-box.rui-cf-duration {
4575
        position: absolute;
4576
        top: 10px;
4577
        right: 10px;
4578
        width: auto;
4579
    }
4580
}
4581
 
1 efrain 4582
#course-category-listings .listitem>div .item-actions .aabtn.menu-action {
4583
    background-color: transparent;
4584
}
4585
 
4586
#course-category-listings .listing-actions .action-menu {
4587
    .dropdown-toggle {
4588
        padding: 5px 10px;
4589
    }
4590
}
4591
 
4592
#course-category-listings {
4593
 
4594
    .list-group-item {
4595
        .flex-shrink-0 {
4596
            display: flex;
4597
        }
4598
    }
1441 ariadna 4599
}
4600
 
4601
/* Moodle 4.4 *
4602
/
4603
/* Variables definition*/
4604
 
4605
$activity-border-radius: 1rem !default;
4606
$activity-border-width: 1px !default;
4607
$activity-hover-border-color: $primary !default;
4608
$divider-color: $gray-300 !default;
4609
$divider-width: 2px !default;
4610
$divider-hover-color: $primary !default;
4611
 
4612
/* Functions/Mixins definition */
4613
 
4614
// Activity completion button custom styling mixin.
4615
@mixin completion-button() {
4616
    &.btn {
4617
        @include button-variant($white, $gray-400, $gray-600);
4618
        min-height: map-get($iconsizes, 5);
4619
        font-weight: bold;
4620
        @include border-radius();
4621
        .icon {
4622
            font-size: inherit;
4623
        }
4624
    }
4625
    @each $color, $value in $theme-colors {
4626
        &.btn-#{$color} {
4627
            $bg-color: theme-color-level($color, $alert-bg-level);
4628
            @include button-variant($bg-color, $bg-color, $value);
4629
            color: theme-color-level($color, $alert-color-level);
4630
            &:hover {
4631
                color: color-yiq($value);
4632
            }
4633
        }
4634
    }
4635
}
4636
 
4637
.editing .activity-item {
4638
    cursor: move;
4639
    border: $activity-border-width solid transparent;
4640
    @include border-radius($activity-border-radius);
4641
    .a {
4642
        cursor: pointer;
4643
    }
4644
    &:hover,
4645
    &.selected {
4646
        border: $activity-border-width solid $activity-hover-border-color;
4647
        box-shadow: $box-shadow-sm;
4648
    }
4649
}
4650
 
4651
 
4652
/* Dividers */
4653
.divider {
4654
    position: relative;
4655
    hr {
4656
        width: 100%;
4657
        margin: 20px;
4658
        border-top: $divider-width dashed $divider-color;
4659
    }
4660
    .divider-content {
4661
        opacity: 0;
4662
        visibility: hidden;
4663
        transition: visibility 0.1s;
4664
        position: absolute;
4665
        background: linear-gradient(transparent 40%, $container-bg 40%, $container-bg 60%, transparent 60%);
4666
        .section.hidden & {
4667
            background: linear-gradient(transparent 40%, $container-bg 40%, $container-bg 60%, transparent 60%);
4668
 
4669
            .theme-dark & {
4670
                background: linear-gradient(transparent 40%, $dm-container-bg 40%, $dm-container-bg 60%, transparent 60%);
4671
            }
4672
        }
4673
 
4674
        .theme-dark & {
4675
            background: linear-gradient(transparent 40%, $dm-container-bg 40%, $dm-container-bg 60%, transparent 60%);
4676
        }
4677
    }
4678
    &.always-visible {
4679
        .divider-content {
4680
            opacity: 1;
4681
            visibility: visible;
4682
        }
4683
    }
4684
    &.always-hidden {
4685
        hr {
4686
            opacity: 0;
4687
            visibility: hidden;
4688
        }
4689
    }
4690
    &:hover,
4691
    &:focus,
4692
    &:focus-within {
4693
        .divider-content {
4694
            opacity: 1;
4695
            visibility: visible;
4696
        }
4697
        hr {
4698
            opacity: 1;
4699
            visibility: visible;
4700
        }
4701
    }
4702
    // Style the hr divider when the "Add content" button is hovered.
4703
    &:has(.btn.add-content:hover) {
4704
        hr {
4705
            border-color: $divider-hover-color;
4706
        }
4707
    }
4708
}
4709
 
4710
// These styles will make the activity and section dividers buttons visible (but still without opacity) so
4711
// buttons can be keyboard focusable.
4712
.activity:focus-within + .activity .divider .divider-content,
4713
.course-section-header:focus-within + .content .section .activity:first-child .divider .divider-content,
4714
.content .section .activity:focus-within .divider .divider-content,
4715
.course-content:focus-within .changenumsections .divider .divider-content {
4716
    visibility: visible;
4717
}
4718
 
4719
// Hide last section "Add section". It will rely on the course format general "Add section" button.
4720
.course-content ul.topics > li:last-child .changenumsections {
4721
    display: none;
4722
}
4723
 
4724
// Custom buttons for dividers.
4725
.btn.add-content {
4726
    position: relative;
4727
    z-index: 1;
4728
    @include border-radius($rounded-pill);
4729
    font-size: $font-size-sm;
4730
    font-weight: bold;
4731
    color: theme-color-level("primary", $alert-color-level);
4732
    background-color: theme-color-level("primary", $alert-bg-level);
4733
    border: 0;
4734
    &:hover,
4735
    &:focus {
4736
        color: color-yiq($primary);
4737
        background-color: $primary;
4738
    }
4739
    .icon {
4740
        font-size: 16px;
4741
    }
4742
}
4743
 
4744
/* Course section */
4745
 
4746
.course-section {
4747
    list-style: none;
4748
    //margin-top: map-get($spacers, 3);
4749
    // Custom styles for course sections while editing.
4750
    .editing & {
4751
        margin-top: map-get($spacers, 2);
4752
    }
4753
 
4754
    .section-item {
4755
        width: 100%;
4756
        display: inline-flex;
4757
        justify-content: space-between;
4758
        align-items: center;
4759
    }
4760
 
4761
    &.hidden {
4762
        .section-item {
4763
            background-color: $gray-100;
4764
        }
4765
    }
4766
 
4767
    .sectionname > a {
4768
        &:before {
4769
            background-color: $dm-body-color;
4770
 
4771
            .theme-dark & {
4772
                background-color: $dm-body-color;
4773
            }
4774
        }
4775
 
4776
        .theme-dark & {
4777
            color: $dm-body-color;
4778
        }
4779
 
4780
        &:hover {
4781
            text-decoration: none;
4782
            text-decoration-color: $body-color;
4783
 
4784
            .theme-dark & {
4785
                text-decoration-color: $dm-body-color;
4786
            }
4787
        }
4788
    }
4789
 
4790
    .sectionbadges .badge {
4791
        margin-left: map-get($spacers, 2);
4792
        font-weight: normal;
4793
        .icon {
4794
            font-size: 12px;
4795
            width: 12px;
4796
            height: 12px;
4797
        }
4798
    }
4799
 
4800
    .course-section-header.draggable {
4801
        cursor: move;
4802
    }
4803
 
4804
    .section_action_menu {
4805
        .dropdown-toggle::after {
4806
            display: none;
4807
        }
4808
    }
4809
 
4810
    .summarytext {
4811
        // Add rounded borders to images.
4812
        img {
4813
            @include border-radius($activity-border-radius);
4814
        }
4815
    }
4816
}
4817
 
4818
.rui-course-header {
4819
    .single-section-page & {
4820
        display: none;
4821
        visibility: hidden;
4822
    }
4823
}
4824
 
4825
.course-section.main.section-summary {
4826
    position: relative;
4827
 
4828
    h3.sectionname {
4829
        font-size: $font-size-lg;
4830
        font-weight: $font-weight-medium;
4831
    }
4832
}
4833
 
4834
.section-summary-activities {
4835
    &:empty {
4836
        display: none;
4837
    }
4838
 
4839
    font-size: $font-size-sm;
4840
}
4841
 
4842
.course-content li.section li.activity ul {
4843
    margin: 0 0 10px!important;
4844
}
4845
 
4846
.modtype_subsection {
4847
    h3.sectionname {
4848
        font-size: $font-size-md!important;
4849
    }
4850
 
4851
    .section-summary {
4852
        margin-bottom: 0!important;
4853
        background-color: $gray-100;
4854
        border: 0;
4855
 
4856
        .theme-dark & {
4857
            background-color: $dm-gray-100;
4858
            border: 0;
4859
        }
4860
    }
1 efrain 4861
}