Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1
#sidepreopen-control,
2
[data-region="blocks-column"] {
3
    .dropdown-menu {
4
        min-width: 245px;
5
 
6
        .dropdown-item {
7
            white-space: initial;
8
        }
9
    }
10
 
11
    .card-block .content {
12
        h3 {
13
            font-size: 1.143rem;
14
            font-weight: 600;
15
            text-transform: uppercase;
16
            border-top: 1px dashed $headings-color;
17
            padding-top: 4px;
18
            margin-top: 10px;
19
        }
20
    }
21
}
22
 
23
#sidepreopen-control,
24
#sidepreclose-control {
25
    cursor: pointer;
26
}
27
 
28
#sidepreopen-control {
29
    position: fixed;
30
    z-index: $zindex-fixed;
31
 
32
    @include media-breakpoint-up(md) {
33
        top: 100px;
34
        right: 40px;
35
    }
36
 
37
    @include media-breakpoint-between(xs,sm) {
38
        top: 75px;
39
        right: 16px;
40
    }
41
 
42
    display: flex;
43
    align-items: center;
44
    justify-content: center;
45
 
46
    padding: 0;
47
    width: 40px;
48
    height: 40px;
49
 
50
    border: 1px solid $topbar-btn;
51
    background-color: $topbar-btn;
52
    color: $topbar-btn-text;
53
 
54
    border-radius: 40px;
55
 
56
    transition: all ease 250ms;
57
 
58
    &:hover {
59
        background-color: var(--main-theme-color);
60
        border-color: var(--main-theme-color);
61
        color: $white;
62
 
63
        .theme-dark & {
64
            background-color: var(--main-theme-color);
65
            border-color: var(--main-theme-color);
66
            color: $dm-body-color;
67
        }
68
    }
69
 
70
    .theme-dark & {
71
        background-color: $dm-gray-100;
72
        border-color: $dm-gray-100;
73
        color: $dm-body-color;
74
    }
75
 
76
    svg {
77
        .dir-rtl & {
78
            transform: rotate(180deg);
79
        }
80
    }
81
}
82
 
83
#sidepre-blocks {
84
 
85
    .rui-sidepre-blocks-header {
86
        margin-bottom: 32px;
87
        position: sticky;
88
        z-index: 3;
89
    }
90
 
91
    @include media-breakpoint-up(lg) {
92
        padding: 83px 40px 40px 40px;
93
    }
94
 
95
    @include media-breakpoint-down(md) {
96
        padding: 83px 30px 30px 30px;
97
    }
98
 
99
    height: 100%;
100
    width: 420px;
101
    right: 0;
102
    overflow-y: auto;
103
 
104
    position: fixed;
105
 
106
    display: none;
107
    opacity: 0;
108
    z-index: -1;
109
 
110
    transition: $transition-base;
111
 
112
    position: fixed;
113
    right: 0;
114
    top: 61px;
115
    height: calc(100vh - 61px);
116
 
117
    background-color: $container-bg;
118
 
119
    .pagelayout-secure & {
120
        top: 0;
121
        height: 100vh;
122
    }
123
 
124
    @include media-breakpoint-down(md) {
125
        border-left: 1px solid $border-color;
126
 
127
        .theme-dark & {
128
            border-color: $dm-border-color;
129
        }
130
    }
131
 
132
 
133
    .theme-dark & {
134
        background-color: $dm-body-bg;
135
        border-color: $dm-border-color;
136
        @include thin-scrolls($dm-drawer-scroll-bg-track);
137
    }
138
 
139
 
140
    @include thin-scrolls($scroll-bg-track);
141
 
142
    .card:only-of-type {
143
        margin-bottom: 0;
144
    }
145
}
146
 
147
body.drawer-open-right {
148
    #sidepreopen-control {
149
        position: fixed;
150
        z-index: $zindex-fixed + 90;
151
    }
152
 
153
    #sidepre-blocks {
154
        display: block;
155
        z-index: $zindex-fixed + 30;
156
        opacity: 1;
157
 
158
        aside.block {
159
            border: none;
160
            border-radius: 0;
161
            box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
162
        }
163
    }
164
 
165
    #sidepre-blocks {
166
        aside.block {
167
            border: none;
168
            border-radius: 0;
169
            box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
170
        }
171
    }
172
 
173
}
174
 
175
body.drawer-open-right.dir-rtl {
176
    #sidepreopen-control svg {
177
        transform: rotate(0deg);
178
    }
179
}
180
 
181
 
182
.blockmovetarget {
183
    display: block;
184
    padding: 5px 10px;
185
    background-color: var(--main-theme-color);
186
    border-radius: $btn-border-radius;
187
 
188
    font-size: $font-size-xs;
189
    color: var(--primary-color-100);
190
 
191
    .accesshide {
192
        position: relative;
193
        left: initial;
194
        word-break: break-all;
195
    }
196
}
197
 
198
.block_calendar_upcoming {
199
    .calendarwrapper {
200
        margin-top: 2rem;
201
    }
202
}
203
 
204
.block_calendar_month {
205
    .bottom {
206
        margin-top: 1rem;
207
        display: flex;
208
        flex-wrap: wrap;
209
        justify-content: center;
210
 
211
        #sidepre-blocks & {
212
            justify-content: start;
213
            margin-left: 0;
214
        }
215
 
216
        .footer-link {
217
            margin: .25rem;
218
        }
219
    }
220
}
221
 
222
 
223
.block:target {
224
    padding-top: 0 !important;
225
    /* stylelint-disable declaration-no-important */
226
    margin-top: 0 !important;
227
}
228
 
229
.block_search_forums .searchform {
230
    /* Override plugin's default. */
231
    text-align: left;
232
}
233
 
234
.block .block-controls {
235
    padding: 3px;
236
 
237
    position: absolute;
238
    top: 5px;
239
    right: 5px;
240
    z-index: 1;
241
 
242
    border-radius: $btn-border-radius;
243
    background-color: rgba($black, .1);
244
    backdrop-filter: blur(10px);
245
    -webkit-backdrop-filter: blur(10px);
246
 
247
    .page-mycourses & {
248
        margin-top: -35px;
249
        right: 0;
250
    }
251
 
252
    .moodle-core-dragdrop-draghandle,
253
    .dropdown-btn {
254
        margin: 2px;
255
    }
256
 
257
    .dropdown-toggle {
258
        /* So that the caret takes the colour of the icon. */
259
        color: $body-color;
260
    }
261
 
262
    .dropdown-btn {
263
        padding: 8px;
264
        width: 36px;
265
        height: 36px;
266
        display: flex;
267
        align-items: center;
268
    }
269
}
270
 
271
$blocks-column-width: 360px !default;
272
 
273
$blocks-plus-gutter: $blocks-column-width+($grid-gutter-width * 0.5)+60px;
274
 
275
/* We put an absolutely positioned div in a relatively positioned div so it takes up no universe */
276
@include media-breakpoint-up(md) {
277
    #region-main-settings-menu {
278
        position: relative;
279
        float: left;
280
        width: 100%;
281
    }
282
 
283
    #region-main-settings-menu>div {
284
        position: fixed;
285
        top: $topbar-fixed-btn;
286
        right: 10px;
287
        z-index: $zindex-fixed + 90;
288
    }
289
}
290
 
291
@include media-breakpoint-down(sm) {
292
    #region-main-settings-menu .menubar {
293
        justify-content: flex-end;
294
    }
295
}
296
 
297
.header-action {
298
    #region-main-settings-menu {
299
        position: unset;
300
        float: none;
301
        width: auto;
302
 
303
        &>div {
304
            position: unset;
305
            right: auto;
306
            margin: 0;
307
        }
308
    }
309
}
310
 
311
$card-gutter : $card-deck-margin * 2;
312
 
313
.block .empty-placeholder-image-lg {
314
    height: 5rem;
315
}
316
 
317
.block .block-cards {
318
    .course-info-container {
319
        padding: 0.8rem;
320
    }
321
 
322
    .course-summaryitem {
323
        border: $border-width solid $border-color;
324
        background-color: $body-bg;
325
 
326
        .theme-dark & {
327
            border: $border-width solid $dm-border-color;
328
            background-color: $dm-body-bg;
329
        }
330
    }
331
 
332
    .icon {
333
        margin-right: 0;
334
    }
335
 
336
    .card .coursemenubtn {
337
        margin-top: -0.5rem;
338
    }
339
 
340
    a.coursename,
341
    span.categoryname,
342
    .btn-link {
343
        font-weight: $font-weight-bold;
344
        color: inherit;
345
    }
346
 
347
    .multiline {
348
        white-space: normal;
349
    }
350
 
351
    .btn.btn-link.btn-icon {
352
        height: 36px;
353
        width: 36px;
354
        padding: 0;
355
        border-radius: 50%;
356
 
357
        @include hover-focus {
358
            background-color: $gray-200;
359
 
360
            .theme-dark & {
361
                background-color: $dm-gray-200;
362
            }
363
        }
364
    }
365
}
366
 
367
.dashboard-card-deck.one-row {
368
    padding-bottom: 1rem;
369
 
370
    flex-flow: nowrap;
371
    overflow-x: scroll;
372
}
373
 
374
.summaryimage {
375
    height: 5rem;
376
    width: 5rem;
377
    background-position: center;
378
    background-size: cover;
379
}
380
 
381
.dashboard-card-deck {
382
    .dashboard-card {
383
        margin-bottom: $card-gutter;
384
        flex-basis: auto;
385
        width: 100%;
386
        flex-grow: 0;
387
        flex-shrink: 0;
388
 
389
        .dashboard-card-img {
390
            height: 150px;
391
            background-position: center;
392
            background-size: cover;
393
        }
394
 
395
        .dashboard-card-footer {
396
            padding: 0.8rem;
397
        }
398
    }
399
 
400
    @include media-breakpoint-up(sm) {
401
        &.fixed-width-cards {
402
            .dashboard-card {
403
                width: 300px;
404
                max-width: 100%;
405
            }
406
        }
407
    }
408
}
409
 
410
.dashboard-card-deck:not(.fixed-width-cards) {
411
    @media (min-width: 576px) {
412
        .dashboard-card {
413
            width: calc(33.333% - #{$card-gutter});
414
            margin-bottom: 0;
415
        }
416
    }
417
}
418
 
419
.block-region-dtopblocks .block-recentlyaccesseditems {
420
    @media (min-width: 576px) {
421
        .rui-dashboard-card {
422
            margin-right: 2rem;
423
            width: calc(20% - #{$card-gutter});
424
 
425
 
426
            &:last-child {
427
                margin-right: 0;
428
            }
429
        }
430
    }
431
}
432
 
433
 
434
 
435
.block_recentlyaccessedcourses {
436
 
437
    @include media-breakpoint-between(xs, sm) {
438
        padding-bottom: 60px;
439
    }
440
 
441
    .paging-bar-container {
442
        position: absolute;
443
        z-index: 3;
444
 
445
        left: calc(50% - 40px);
446
        bottom: -35px;
447
 
448
        .pagination {
449
            padding: 3px;
450
            background-color: rgba($black, .8);
451
            border-radius: $btn-border-radius-lg;
452
 
453
            backdrop-filter: blur(10px);
454
            -webkit-backdrop-filter: blur(10px);
455
 
456
            .page-item.disabled .page-link {
457
                background-color: rgba($white, .1);
458
            }
459
 
460
            .page-link {
461
                padding: 5px;
462
                border-radius: $btn-border-radius-lg;
463
 
464
                &:hover {
465
                    background-color: var(--main-theme-color)
466
                }
467
            }
468
 
469
            .icon {
470
                filter: invert(1);
471
            }
472
        }
473
    }
474
}
475
 
476
#block-region-side-pre {
477
    width: 100%;
478
 
479
    .block_recentlyaccessedcourses {
480
        .paging-bar-container {
481
            margin-top: 0;
482
        }
483
    }
484
}
485
 
486
.block_recentlyaccesseditems {
487
    .activityiconcontainer .icon {
488
        height: 20px;
489
        width: 20px;
490
        margin-right: 0;
491
    }
492
}
493
 
494
// Show expand collapse with font-awesome.
495
.block_settings .block_tree [aria-expanded="true"],
496
.block_settings .block_tree [aria-expanded="true"].emptybranch,
497
.block_settings .block_tree [aria-expanded="false"],
498
.block_settings .block_tree li[aria-selected="false"] p,
499
.block_navigation .block_tree [aria-expanded="true"],
500
.block_navigation .block_tree [aria-expanded="true"].emptybranch,
501
.block_navigation .block_tree [aria-expanded="false"] {
502
    background-image: none;
503
}
504
 
505
.block_settings .block_tree [aria-expanded="true"]:before,
506
.block_navigation .block_tree [aria-expanded="true"] a:before,
507
.block_navigation .block_tree [aria-expanded="true"] p:before {
508
    content: '';
509
    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 ");
510
    background-size: 14px;
511
    background-repeat: no-repeat;
512
    background-position: left;
513
 
514
    width: 20px;
515
    height: 20px;
516
 
517
    position: absolute;
518
    left: 4px;
519
    top: 6px;
520
    color: $body-color-light;
521
 
522
    .theme-dark & {
523
        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($dm-body-color)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E ");
524
        color: $dm-body-color-light;
525
    }
526
}
527
 
528
.block_settings .block_tree [aria-expanded="false"] a:before,
529
.block_navigation .block_tree [aria-expanded="false"] a:before,
530
.block_settings .block_tree [aria-expanded="false"] p:before,
531
.block_navigation .block_tree [aria-expanded="false"] p:before {
532
    content: '';
533
    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");
534
    background-size: 14px;
535
    background-repeat: no-repeat;
536
    background-position: left;
537
 
538
    width: 20px;
539
    height: 20px;
540
 
541
    position: absolute;
542
    left: 4px;
543
    top: calc(50% - 10px);
544
    color: $body-color-light;
545
 
546
    .theme-dark & {
547
        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($dm-body-color)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
548
        color: $dm-body-color-light;
549
    }
550
}
551
 
552
//TODO: zmienic na odwrocona ikonke
553
.dir-rtl {
554
 
555
    .block_settings .block_tree [aria-expanded="false"]:before,
556
    .block_navigation .block_tree [aria-expanded="false"]:before {
557
        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");
558
 
559
        .theme-dark & {
560
            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($dm-body-color)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
561
        }
562
    }
563
}
564
 
565
.block_navigation .block_tree p.hasicon,
566
.block_settings .block_tree p.hasicon {
567
    text-indent: -3px;
568
 
569
    .icon {
570
        display: inline-flex;
571
        margin-right: 10px;
572
        font-size: 12px;
573
        line-height: 16px;
574
        opacity: .7;
575
    }
576
 
577
    .item-content-wrap {
578
        display: inline-flex;
579
    }
580
}
581
 
582
.block.invisibleblock .card-title {
583
    color: $text-muted;
584
 
585
    .theme-dark & {
586
        color: $dm-text-muted;
587
    }
588
}
589
 
590
.block_social_activities li a.movehere,
591
.block_site_main_menu li a.movehere {
592
    display: block;
593
    width: 100%;
594
    height: 2rem;
595
    border: 2px dashed $gray-800;
596
    margin: 4px 0;
597
 
598
    .theme-dark & {
599
        border: 2px dashed $dm-gray-800;
600
    }
601
}
602
 
603
 
604
/* Blocks Mods */
605
.block_admin_bookmarks {
606
    .list {
607
        li {
608
            a {
609
                display: block;
610
                font-weight: $font-weight-medium;
611
            }
612
        }
613
    }
614
 
615
    .footer:not(:empty) {
616
        margin-top: 1rem;
617
    }
618
}
619
 
620
/* Editing UI */
621
.rui-edit-areas.editing .block-region.yui3-dd-drop {
622
    padding: 40px 5px 5px 5px;
623
    min-height: 120px;
624
 
625
    background-color: $gray-100;
626
    border: 2px dashed $gray-300;
627
    border-radius: $btn-border-radius;
628
 
629
    .theme-dark & {
630
        background-color: transparent;
631
        border-color: $dm-gray-600;
632
    }
633
 
634
    .page-mycourses & {
635
        padding: 0;
636
        border: 0;
637
        background-color: transparent;
638
    }
639
 
640
    .pagelayout-maintenance {
641
        display: none;
642
    }
643
 
644
    .card {
645
        border-color: $gray-300;
646
 
647
        .theme-dark & {
648
            border-color: $dm-border-color;
649
        }
650
    }
651
}
652
 
653
.page-mycourses.rui-edit-areas.editing .block-region.yui3-dd-drop {
654
    background-color: transparent;
655
    border: none;
656
    min-height: auto;
657
    padding: 0;
658
}
659
 
660
.rui-edit-areas.editing {
661
 
662
    #block-region-dtopblocks,
663
    #block-region-dbottomblocks,
664
    #block-region-content,
665
    #block-region-ctopbl,
666
    #block-region-cbottombl,
667
    #block-region-cstopbl,
668
    #block-region-csbottombl,
669
    #block-region-side-pre,
670
    #block-region-sidebartopblocks,
671
    #block-region-sidebarbottomblocks,
672
    #block-region-fpblocks-t,
673
    #block-region-fpblocks-b,
674
    #block-region-coursetab-a,
675
    #block-region-coursetab-b,
676
    #block-region-coursetab-c,
677
    #block-region-coursetab-d,
678
    #block-region-coursetab-e {
679
        position: relative;
680
 
681
        &:before {
682
            padding: 5px 10px;
683
 
684
            position: absolute;
685
            top: 0;
686
            left: 0;
687
 
688
            background-color: $gray-300;
689
            border-radius: $btn-border-radius;
690
 
691
            font-size: $font-size-xs;
692
            font-weight: $font-weight-medium;
693
            color: $gray-800;
694
 
695
            .theme-dark & {
696
                background-color: $dm-gray-300;
697
                color: $dm-gray-800;
698
            }
699
 
700
        }
701
    }
702
 
703
    #block-region-content:before {
704
        content: 'Blocks: Main Moodle Area';
705
    }
706
 
707
    #block-region-dtopblocks:before {
708
        content: 'Blocks: Dashboard (Top)';
709
    }
710
 
711
    #block-region-dbottomblocks:before {
712
        content: 'Blocks: Dashboard (Bottom)';
713
    }
714
 
715
    #block-region-ctopbl:before {
716
        content: 'Blocks: Course Page (Top)';
717
    }
718
 
719
    #block-region-cbottombl:before {
720
        content: 'Blocks: Course Page (Bottom)';
721
    }
722
 
723
    #block-region-cstopbl:before {
724
        content: 'Blocks: Course Page - Sections (Top)';
725
    }
726
 
727
    #block-region-csbottombl:before {
728
        content: 'Blocks: Course Page - Sections (Bottom)';
729
    }
730
 
731
    #block-region-side-pre:before {
732
        content: 'Blocks: Hidden Sidebar';
733
    }
734
 
735
    #block-region-sidebartopblocks:before {
736
        content: 'Blocks: Sidebar Top Blocks';
737
    }
738
 
739
    #block-region-sidebarbottomblocks:before {
740
        content: 'Blocks: Sidebar Bottom Blocks';
741
    }
742
 
743
    #block-region-fpblocks-t:before {
744
        content: 'Blocks: Frontpage #1 (Top)';
745
    }
746
 
747
    #block-region-fpblocks-b:before {
748
        content: 'Blocks: Frontpage #2 (Bottom)';
749
    }
750
 
751
    #block-region-coursetab-a:before {
752
        content: 'Course Tab #1';
753
    }
754
 
755
    #block-region-coursetab-b:before {
756
        content: 'Course Tab #2';
757
    }
758
 
759
    #block-region-coursetab-c:before {
760
        content: 'Course Tab #3';
761
    }
762
 
763
    #block-region-coursetab-d:before {
764
        content: 'Course Tab #4';
765
    }
766
 
767
    #block-region-coursetab-e:before {
768
        content: 'Course Tab #5';
769
    }
770
 
771
}
772
 
773
.page-mycourses.editing .block-region.yui3-dd-drop:before
774
{
775
    display: none;
776
}
777
 
778
#block-region-sidecourseblocks:empty {
779
    display: none;
780
}
781
 
782
/* Block Customization */
783
.block_course_list,
784
.block_community,
785
.block_admin_bookmarks,
786
.block_quickmail {
787
    li a {
788
        .icon {
789
            .theme-dark & {
790
                filter: invert(1);
791
            }
792
        }
793
    }
794
}
795
 
796
.block_course_list,
797
.block_community,
798
.block_admin_bookmarks,
799
.block_activity_modules,
800
.block_quickmail {
801
    li {
802
 
803
        a {
804
            display: flex;
805
            align-items: center;
806
            padding: .35rem 0;
807
 
808
            position: relative;
809
 
810
            font-size: $font-size-xs;
811
            font-weight: $font-weight-medium;
812
            color: $body-color-secondary;
813
 
814
            .theme-dark & {
815
                color: $dm-body-color-secondary;
816
            }
817
 
818
            &:hover {
819
                color: $link-hover-color;
820
                text-decoration: none;
821
 
822
                .theme-dark & {
823
                    color: $dm-link-hover-color;
824
                }
825
 
826
                &:before {
827
                    background-color: $link-hover-color;
828
 
829
                    .theme-dark & {
830
                        background-color: $dm-link-hover-color;
831
                    }
832
                }
833
            }
834
 
835
            .icon {
836
                margin-right: .5rem;
837
                width: auto;
838
                height: 20px;
839
            }
840
        }
841
 
842
        &:last-child {
843
            a {
844
                padding-bottom: 0;
845
 
846
                &:before {
847
                    display: none;
848
                }
849
            }
850
        }
851
 
852
    }
853
 
854
    .footer {
855
        margin-top: 20px;
856
    }
857
}
858
 
859
 
860
.block_rss_client {
861
    .list li {
862
        padding-top: 6px;
863
        padding-left: 0;
864
        padding-right: 0;
865
        padding-bottom: 6px;
866
        border-color: $border-color;
867
 
868
        .theme-dark & {
869
            border-color: $dm-border-color;
870
        }
871
 
872
        .link {
873
            a {
874
                display: inline-flex;
875
                padding-left: 30px;
876
 
877
                background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#{url-friendly-colour($body-color)}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>');
878
                background-repeat: no-repeat;
879
                background-position: left;
880
                background-size: 16px;
881
 
882
                font-size: $font-size-md;
883
                font-weight: $font-weight-medium;
884
                color: $body-color-secondary;
885
 
886
                .theme-dark & {
887
                    color: $dm-body-color-secondary;
888
                }
889
            }
890
        }
891
 
892
    }
893
}
894
 
895
 
896
.block_online_users {
897
    .info {
898
        margin-bottom: 1rem;
899
    }
900
 
901
    .list {
902
        .listentry {
903
            width: 100%;
904
            position: relative;
905
            display: inline-flex;
906
            align-items: center;
907
            justify-content: space-between;
908
 
909
            margin-bottom: .35rem;
910
 
911
            &:last-child {
912
                margin-bottom: 0;
913
            }
914
 
915
            .userinitials,
916
            img.userpicture {
917
                margin-right: .5rem;
918
                width: 30px;
919
                height: 30px;
920
                border-radius: $btn-border-radius-lg;
921
            }
922
 
923
 
924
            .user a {
925
                width: 170px;
926
                display: inline-flex;
927
                align-items: center;
928
 
929
                font-weight: $font-weight-medium;
930
                color: $body-color;
931
 
932
                .theme-dark & {
933
                    color: $dm-body-color;
934
                }
935
            }
936
 
937
            .uservisibility {
938
                a {
939
                    display: flex;
940
                    align-items: center;
941
                    justify-content: center;
942
 
943
                    width: 30px;
944
                    height: 30px;
945
 
946
                    position: absolute;
947
                    top: calc(50% - 15px);
948
                    right: 0;
949
 
950
                    border-radius: $btn-border-radius-xl;
951
 
952
                    &:hover {
953
                        text-decoration: none;
954
                    }
955
 
956
                    &[data-action="hide"] {
957
                        background-color: $green-100;
958
 
959
                        .icon {
960
                            color: $green-600;
961
                        }
962
 
963
                        &:hover {
964
                            background-color: $green-200;
965
                        }
966
                    }
967
 
968
                    &[data-action="show"] {
969
                        background-color: $red-100;
970
 
971
                        .icon {
972
                            color: $red-700;
973
                        }
974
 
975
                        &:hover {
976
                            background-color: $red-200;
977
                        }
978
                    }
979
 
980
                    .icon {
981
                        display: flex;
982
                        align-items: center;
983
                        justify-content: center;
984
 
985
                        font-size: 13px;
986
                        margin: 0;
987
                    }
988
                }
989
            }
990
 
991
 
992
            .message {
993
                a {
994
                    background-color: var(--primary-color-100);
995
                    display: flex;
996
                    align-items: center;
997
                    justify-content: center;
998
 
999
                    width: 30px;
1000
                    height: 30px;
1001
 
1002
                    position: absolute;
1003
                    top: calc(50% - 15px);
1004
                    right: 0;
1005
 
1006
                    border-radius: $btn-border-radius-xl;
1007
 
1008
                    &:hover {
1009
                        background-color: var(--primary-color-200);
1010
                        text-decoration: none;
1011
                    }
1012
 
1013
                    &:before {
1014
                        display: none;
1015
                    }
1016
 
1017
                    .icon {
1018
                        color: $white;
1019
                        font-size: 12px;
1020
                        margin: 0;
1021
                    }
1022
                }
1023
 
1024
            }
1025
        }
1026
    }
1027
}
1028
 
1029
 
1030
.block_news_items {
1031
 
1032
    .newlink a {
1033
        font-weight: $font-weight-medium;
1034
    }
1035
 
1036
    .post {
1037
        margin: 1rem 0 0;
1038
        padding: 1rem 0;
1039
        border-top: 1px dashed $border-color;
1040
 
1041
        .theme-dark & {
1042
            border-top: 2px dashed $dm-border-color;
1043
        }
1044
 
1045
        .head {
1046
            .date {
1047
                font-size: $font-size-xs;
1048
            }
1049
 
1050
            .date,
1051
            .name {
1052
                font-weight: $font-weight-normal;
1053
                color: $body-color-light;
1054
 
1055
                .theme-dark & {
1056
                    color: $dm-body-color-light;
1057
                }
1058
            }
1059
 
1060
            .name {
1061
                font-size: $font-size-xs;
1062
            }
1063
        }
1064
 
1065
        .info {
1066
            margin-top: .5rem;
1067
            font-size: $font-size-md;
1068
            font-weight: $font-weight-medium;
1069
 
1070
            a {
1071
                display: block;
1072
                color: $body-color;
1073
                line-height: 1.4;
1074
 
1075
                .theme-dark & {
1076
                    color: $dm-body-color;
1077
                }
1078
            }
1079
        }
1080
    }
1081
}
1082
 
1083
.block_private_files {
1084
    [id*="private_files_tree"] {
1085
        padding: 1rem;
1086
        border-radius: $btn-border-radius;
1087
        background-color: $gray-100;
1088
        max-height: 200px;
1089
        overflow-y: auto;
1090
 
1091
        .theme-dark & {
1092
            background-color: $dm-gray-100;
1093
        }
1094
 
1095
        .ygtvitem {
1096
            max-height: 300px;
1097
            overflow-y: auto;
1098
        }
1099
    }
1100
 
1101
    td.ygtvcell {
1102
        .icon {
1103
            margin: 0 4px;
1104
            padding: .25rem !important;
1105
            display: inline-flex;
1106
            align-content: center;
1107
            justify-content: center;
1108
 
1109
            border-radius: $btn-border-radius;
1110
        }
1111
    }
1112
 
1113
    .ygtvcontent {
1114
        div {
1115
            @extend .text-truncate;
1116
            max-width: 170px;
1117
        }
1118
    }
1119
 
1120
    [id^="private_files_tree"] a {
1121
        display: inline-block;
1122
 
1123
        font-size: $font-size-xs;
1124
        color: $body-color-secondary;
1125
 
1126
        .theme-dark & {
1127
            color: $dm-body-color-secondary;
1128
        }
1129
 
1130
        @extend .text-truncate;
1131
        max-width: 190px;
1132
 
1133
        .icon {
1134
            margin: 4px;
1135
            padding: .25rem !important;
1136
            display: inline-flex;
1137
            align-content: center;
1138
            justify-content: center;
1139
 
1140
            border-radius: $btn-border-radius;
1141
        }
1142
    }
1143
}
1144
 
1145
.block-timeline {
1146
 
1147
    .rui-event-name-link {
1148
        &:hover {
1149
            .rui-event-name {
1150
                color: $link-hover-color;
1151
            }
1152
        }
1153
    }
1154
 
1155
    .rui-timeline-list-group-item {
1156
        &:last-of-type {
1157
            margin-bottom: 0;
1158
            padding-bottom: 0;
1159
        }
1160
    }
1161
 
1162
    .rui-timeline-list-group {
1163
        margin-bottom: 30px;
1164
    }
1165
 
1166
    .rui-timeline-date {
1167
        padding-left: 3px;
1168
        display: inline-flex;
1169
        align-content: center;
1170
 
1171
        font-size: $font-size-xs;
1172
        font-weight: $font-weight-medium;
1173
        line-height: 1.6;
1174
    }
1175
 
1176
    .rui-timeline-activity-title {
1177
        display: flex;
1178
 
1179
        .rui-blocks-column & {
1180
            flex-wrap: wrap;
1181
        }
1182
 
1183
        @include media-breakpoint-down(md) {
1184
            flex-wrap: wrap;
1185
        }
1186
 
1187
        #sidepre-blocks & {
1188
            flex-wrap: wrap;
1189
        }
1190
    }
1191
 
1192
    @include media-breakpoint-down(md) {
1193
        .event-name-container {
1194
            margin: 0 40px 10px;
1195
        }
1196
    }
1197
 
1198
    .rui-event-date {
1199
        padding-top: 23px;
1200
        padding-left: 26px;
1201
        display: inline-flex;
1202
        align-content: center;
1203
 
1204
        background-image: url("data:image/svg+xml,%3Csvg height='123' viewBox='0 0 20 123' width='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd' stroke='#{url-friendly-colour($gray-700)}' stroke-width='1.5'%3E%3Cpath d='m10.5-36.5v91' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='m10.5 64.5v68' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='10.5' cy='59.5' r='2.75'/%3E%3C/g%3E%3C/svg%3E");
1205
        background-repeat: no-repeat;
1206
        background-position-x: 2px;
1207
        background-position-y: -22px;
1208
        background-size: 18px;
1209
 
1210
        font-size: $font-size-xs;
1211
        font-weight: $font-weight-medium;
1212
        color: $body-color-secondary;
1213
 
1214
        .theme-dark & {
1215
            background-image: url("data:image/svg+xml,%3Csvg height='123' viewBox='0 0 20 123' width='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd' stroke='#{url-friendly-colour($dm-gray-700)}' stroke-width='1.5'%3E%3Cpath d='m10.5-36.5v91' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='m10.5 64.5v68' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='10.5' cy='59.5' r='2.75'/%3E%3C/g%3E%3C/svg%3E");
1216
            color: $dm-body-color-secondary;
1217
        }
1218
 
1219
        .rui-event-user-date {
1220
            margin: 2px 0 0 4px;
1221
        }
1222
    }
1223
 
1224
    .rui-timeline-date-txt {
1225
        margin: 0 7px;
1226
        font-size: $font-size-xs;
1227
        font-weight: $font-weight-medium;
1228
        color: $body-color-light;
1229
        align-self: center;
1230
 
1231
        .theme-dark & {
1232
            color: $dm-body-color-light;
1233
        }
1234
    }
1235
 
1236
    .rui-event-name {
1237
        font-size: .9rem;
1238
        font-weight: $font-weight-bold;
1239
        color: $body-color;
1240
 
1241
        .theme-dark & {
1242
            color: $dm-body-color;
1243
        }
1244
    }
1245
 
1246
    .rui-event-icon {
1247
        margin: 16px 10px 0;
1248
        border-radius: $activity-iconcontainer-width;
1249
        padding: 0.7rem;
1250
 
1251
        .icon {
1252
            width: 20px;
1253
            height: 20px;
1254
            box-sizing: border-box;
1255
        }
1256
    }
1257
 
1258
    .pagination {
1259
        margin: 0;
1260
    }
1261
}
1262
 
1263
 
1264
/* Block Navigation */
1265
#settingsnav {
1266
    padding: 0 !important;
1267
}
1268
 
1269
.block_settings .block_tree .depth_1>.tree_item.branch,
1270
.block_navigation .block_tree .depth_1>.tree_item.branch {
1271
    a {
1272
        padding: .35rem 0 .35rem 30px;
1273
        font-weight: $font-weight-medium;
1274
        color: $body-color;
1275
 
1276
        .theme-dark & {
1277
            color: $dm-body-color;
1278
        }
1279
 
1280
        &:hover {
1281
            text-decoration: none;
1282
        }
1283
    }
1284
}
1285
 
1286
.block_settings .block_tree ul,
1287
.block_navigation .block_tree ul {
1288
    margin-left: 0;
1289
 
1290
    a {
1291
        width: 100%;
1292
        display: flex;
1293
        align-items: center;
1294
 
1295
        font-weight: $font-weight-medium;
1296
        color: $body-color;
1297
 
1298
        .theme-dark & {
1299
            color: $dm-body-color;
1300
        }
1301
 
1302
        &:hover {
1303
            color: var(--main-theme-color);
1304
            text-decoration: none;
1305
        }
1306
    }
1307
 
1308
    .item_with_icon {
1309
        color: $body-color-secondary;
1310
        border-radius: $btn-border-radius;
1311
 
1312
        .theme-dark & {
1313
            color: $dm-body-color-secondary;
1314
        }
1315
 
1316
        &:hover {
1317
            background-color: var(--primary-color-100);
1318
        }
1319
    }
1320
}
1321
 
1322
.block_settings .block_tree,
1323
.block_navigation .block_tree {
1324
 
1325
    [role="group"] {
1326
        position: relative;
1327
 
1328
        a {
1329
            padding: .35rem 0;
1330
        }
1331
    }
1332
 
1333
    [role="group"]:before {
1334
        content: '';
1335
        background-color: $border-color;
1336
 
1337
        position: absolute;
1338
 
1339
        width: 2px;
1340
        height: 100%;
1341
 
1342
        border-radius: 2px;
1343
        top: 2px;
1344
        left: 10px;
1345
 
1346
        .theme-dark & {
1347
            background-color: $dm-border-color;
1348
        }
1349
    }
1350
 
1351
}
1352
 
1353
.block_settings .block_tree ul {
1354
    margin-left: 0;
1355
 
1356
    a {
1357
        width: 100%;
1358
        display: flex;
1359
        align-items: center;
1360
 
1361
        font-weight: $font-weight-medium;
1362
        color: $body-color;
1363
 
1364
        .theme-dark & {
1365
            color: $dm-body-color;
1366
        }
1367
 
1368
        &:hover {
1369
            color: var(--main-theme-color);
1370
            text-decoration: none;
1371
        }
1372
    }
1373
 
1374
    .item_with_icon {
1375
        padding: 0;
1376
        color: $body-color-secondary;
1377
        border-radius: $btn-border-radius;
1378
 
1379
        .theme-dark & {
1380
            color: $dm-body-color-secondary;
1381
        }
1382
 
1383
        &:hover {
1384
            background-color: var(--primary-color-100);
1385
        }
1386
    }
1387
}
1388
 
1389
.block_navigation .block_tree .tree_item.branch,
1390
.block_settings .block_tree .tree_item.branch {
1391
    width: 100%;
1392
    display: inline-flex;
1393
 
1394
    position: relative;
1395
    font-weight: $font-weight-medium;
1396
    color: $body-color;
1397
 
1398
    border-radius: $btn-border-radius;
1399
 
1400
    .theme-dark & {
1401
        color: $dm-body-color;
1402
    }
1403
 
1404
    span {
1405
        padding: .45rem 0;
1406
    }
1407
 
1408
    &:hover {
1409
        background-color: var(--primary-color-100);
1410
 
1411
        .theme-dark & {
1412
            color: var(--primary-color-800);
1413
        }
1414
    }
1415
}
1416
 
1417
.block_navigation .block_tree .tree_item,
1418
.block_settings .block_tree .tree_item {
1419
    margin: 0;
1420
}
1421
 
1422
.block_navigation .block_tree .active_tree_node,
1423
.block_settings .block_tree .active_tree_node {
1424
    font-weight: $font-weight-medium;
1425
}
1426
 
1427
.block_navigation .block_tree [aria-expanded="false"].loading,
1428
.block_settings .block_tree [aria-expanded="false"].loading {
1429
    background-image: url('[[pix:i/loading_small]]');
1430
    background-position: right;
1431
    background-size: 18px;
1432
}
1433
 
1434
.block_settings .block_tree p.loading {
1435
    background-size: 18px;
1436
    background-position: right;
1437
}
1438
 
1439
/*TODO:poprawic ikonki*/
1440
.block_settings {
1441
    .simplesearchform {
1442
        margin-top: 20px;
1443
    }
1444
}
1445
 
1446
.block_settings .block_tree li {
1447
    position: relative;
1448
}
1449
 
1450
 
1451
/* ---- Block My Profile */
1452
.block_myoverview {
1453
    .content {
1454
        min-height: 19.35rem;
1455
    }
1456
 
1457
    .rui-bmo-nav-sort-selector {
1458
 
1459
        #block-region-dleftblocks &,
1460
        #blocks-dashboardrightblock & {
1461
            width: 100%;
1462
            margin-right: 0 !important;
1463
        }
1464
    }
1465
 
1466
    //.paged-content-page-container {
1467
    //    min-height: 13rem;
1468
    //}
1469
    .btn--title {
1470
        #sidepre-blocks & {
1471
            display: none !important;
1472
        }
1473
    }
1474
}
1475
 
1476
.block_myprofile .myprofileitem.picture img {
1477
    margin-bottom: .5rem;
1478
    width: auto;
1479
    height: auto;
1480
}
1481
 
1482
.block_myprofile .myprofileitem.fullname {
1483
    font-size: $font-size-md;
1484
    color: $body-color;
1485
 
1486
    .theme-dark & {
1487
        color: $dm-body-color;
1488
    }
1489
}
1490
 
1491
// .rui-myprofile-card-title {
1492
//     font-size: $font-size-xs;
1493
//     font-weight: $font-weight-medium;
1494
//     color: $body-color-light;
1495
 
1496
//     .theme-dark & {
1497
//         color: $dm-body-color-light;
1498
//     }
1499
// }
1500
 
1501
.rui-mo-progress-text {
1502
    margin-bottom: 5px;
1503
    font-size: $font-size-xs;
1504
    font-weight: $font-weight-medium;
1505
    color: $body-color-light;
1506
 
1507
    .theme-dark & {
1508
        color: $dm-body-color-light;
1509
    }
1510
}
1511
 
1512
.rui-mo-progress-icon--progress {
1513
    color: $body-color;
1514
 
1515
    .theme-dark & {
1516
        color: $dm-body-color;
1517
    }
1518
 
1519
    .rui-mo-progress-100 & {
1520
        display: none;
1521
    }
1522
}
1523
 
1524
.rui-mo-progress-icon--done {
1525
    display: none;
1526
    color: $green-600;
1527
 
1528
    .rui-mo-progress-100 & {
1529
        display: inline-flex;
1530
    }
1531
}
1532
 
1533
.rui-mo-progress-100 {
1534
    .small {
1535
        color: $green-500;
1536
    }
1537
}
1538
 
1539
.rui-course-card-shortname {
1540
    margin-bottom: .25rem;
1541
 
1542
    font-size: $font-size-xs;
1543
    font-weight: $font-weight-normal;
1544
}
1545
 
1546
.pagelayout-embedded {
1547
    .has-fake-blocks {
1548
        padding: 1rem;
1549
        display: flex;
1550
    }
1551
 
1552
    .has-fake-blocks .embedded-main {
1553
        order: 0;
1554
        width: calc(100% - #{$blocks-column-width});
1555
        margin-right: 1rem;
1556
    }
1557
 
1558
    .embedded-blocks {
1559
        order: 1;
1560
        width: $blocks-column-width;
1561
    }
1562
 
1563
    @media (max-width: 767.98px) {
1564
        .has-fake-blocks {
1565
            display: block;
1566
        }
1567
 
1568
        .has-fake-blocks .embedded-main {
1569
            width: 100%;
1570
        }
1571
 
1572
        .embedded-blocks {
1573
            width: 100%;
1574
        }
1575
    }
1576
}
1577
 
1578
 
1579
 
1580
 
1581
.block_adminblock {
1582
    background-color: $container-bg;
1583
    border: 1px solid $border-color;
1584
    border-radius: $btn-border-radius;
1585
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .05), 0 14px 44px 0 rgba(0, 0, 0, .15);
1586
 
1587
    position: fixed;
1588
    right: 10px;
1589
    bottom: 60px;
1590
    z-index: $zindex-tooltip;
1591
 
1592
    .drawer-open-right & {
1593
        @include media-breakpoint-down(md) {
1594
            right: 7px;
1595
        }
1596
    }
1597
 
1598
    .card-body {
1599
        padding: 6px;
1600
        display: inline-flex;
1601
        align-items: center;
1602
    }
1603
 
1604
    .card-title {
1605
        margin-bottom: 0;
1606
        font-size: 12px;
1607
        font-weight: $font-weight-medium;
1608
        margin-right: 16px;
1609
        margin-left: 12px;
1610
    }
1611
 
1612
    .custom-select {
1613
        margin-right: 0 !important;
1614
        padding: 7px 14px;
1615
        width: 140px;
1616
        height: auto;
1617
        font-size: 12px;
1618
    }
1619
 
1620
    .theme-dark & {
1621
        background-color: $dm-container-bg;
1622
    }
1623
}
1624
 
1625
/* Dashboard Blocks */
1626
.wrapper-dashboard #region-main-wrapper {
1627
    .alert {
1628
        margin: 30px 0 0;
1629
    }
1630
}
1631
 
1632
// TODO: Blocks UI
1633
/*
1634
    Course contents block
1635
    https://github.com/mudrd8mz/moodle-block_course_contents
1636
*/
1637
.block_course_contents {
1638
    .list-group-item {
1639
        padding: 3px 0;
1640
    }
1641
}
1642
 
1643
/* Block recent activities */
1644
.block_recent_activity {
1645
    .activityhead {
1646
        font-size: $font-size-xs;
1647
        color: $body-color-secondary;
1648
 
1649
        .theme-dark & {
1650
            color: $dm-body-color-secondary;
1651
        }
1652
    }
1653
 
1654
    .activityhead a {
1655
        font-size: $font-size-sm;
1656
        color: $body-color;
1657
        font-weight: $font-weight-bold;
1658
 
1659
        .theme-dark & {
1660
            color: $dm-body-color;
1661
        }
1662
    }
1663
}
1664
 
1665
 
1666
/* Block Section links */
1667
.block_section_links {
1668
    .unlist {
1669
        li {
1670
            margin-bottom: .35rem;
1671
 
1672
            &:last-child {
1673
                margin-bottom: 0;
1674
            }
1675
 
1676
            a {
1677
                padding: .25rem;
1678
                width: 100%;
1679
                display: flex;
1680
                align-items: center;
1681
                font-weight: $font-weight-medium;
1682
            }
1683
        }
1684
    }
1685
 
1686
}
1687
 
1688
/* Block - Recently accessed items */
1689
.rui-block-title--sm {
1690
    margin-bottom: .35rem;
1691
 
1692
    font-size: $font-size-md;
1693
    font-weight: $font-weight-medium;
1694
    line-height: 1.4;
1695
    word-break: break-word;
1696
}
1697
 
1698
 
1699
.block_completionstatus {
1700
    td {
1701
        padding: 4px 2px !important;
1702
        font-size: $font-size-xs !important;
1703
    }
1704
}
1705
 
1706
.block-recentlyaccesseditems .card-deck {
1707
    margin: 0;
1708
    padding: 7px;
1709
    max-height: 220px;
1710
    overflow-y: auto;
1711
 
1712
    border: 1px solid $border-color;
1713
    border-radius: $btn-border-radius;
1714
 
1715
    .theme-dark & {
1716
        border-color: $dm-border-color;
1717
    }
1718
 
1719
    .rui-dashboard-card:last-of-type {
1720
        margin-bottom: 0 !important;
1721
    }
1722
 
1723
    .rui-dashboard-card {
1724
        transition: $transition-base;
1725
 
1726
        &:hover {
1727
            opacity: .7;
1728
        }
1729
    }
1730
}
1731
 
1732
.block_fake {
1733
    li a {
1734
        &:after {
1735
            display: none;
1736
        }
1737
    }
1738
}
1739
 
1740
.block {
1741
    .list li {
1742
        line-height: 2;
1743
    }
1744
}
1745
 
1746
.block_myprogress {
1747
    p {
1748
        font-size: $font-size-xs;
1749
    }
1750
    .progress {
1751
        margin-top: 10px;
1752
        margin-bottom: 0!important;
1753
    }
1754
}
1755
 
1756
.block_lp {
1757
    h3 {
1758
        font-size: $font-size-sm;
1759
    }
1760
 
1761
    .sub-content {
1762
        padding: 0;
1763
 
1764
        ul {
1765
            margin: 10px 0;
1766
            padding: 0;
1767
 
1768
            li {
1769
                padding: 3px 0;
1770
            }
1771
        }
1772
    }
1773
 
1774
}