Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1
/* calendar.less */
2
 
3
// Calendar colour variables defined.
4
$calendarEventCategoryColor: $purple-400 !default; // Pale purple.
5
$calendarEventCourseColor: $primary-color-100 !default; // Pale red.
6
$calendarEventGlobalColor: $green-200 !default; // Pale green.
7
$calendarEventGroupColor: $yellow-300 !default; // Pale yellow.
8
$calendarEventUserColor: $orange-200 !default; // Pale blue.
9
$calendarEventOtherColor: $gray-200 !default; // Pale gray.
10
 
11
// This will be the colour of mini-calendar links, hide/show filter icons, edit/delete icon buttons.
12
$calendarEventColor: #0d5ca1 !default;
13
 
14
$calendarCurrentDateColor: $white;
15
$calendarCurrentDateBackground: $primary;
16
 
17
// Calendar event background colours defined.
18
.calendar_event_category {
19
  background-color: $calendarEventCategoryColor;
20
 
21
  .commands a {
22
    color: $calendarEventColor;
23
  }
24
}
25
 
26
[data-event-component^="mod_"],
27
.calendar_event_course {
28
  background-color: $calendarEventCourseColor;
29
 
30
  .commands a {
31
    color: $calendarEventColor;
32
  }
33
}
34
 
35
.calendar_event_site {
36
  background-color: $calendarEventGlobalColor;
37
 
38
  .commands a {
39
    color: $calendarEventColor;
40
  }
41
}
42
 
43
.calendar_event_group {
44
  background-color: $calendarEventGroupColor;
45
 
46
  .commands a {
47
    color: $calendarEventColor;
48
  }
49
}
50
 
51
.calendar_event_user {
52
  background-color: $calendarEventUserColor;
53
 
54
  .commands a {
55
    color: $calendarEventColor;
56
  }
57
}
58
 
59
.calendar_event_other {
60
  background-color: $calendarEventOtherColor;
61
 
62
  .commands a {
63
    color: $calendarEventColor;
64
  }
65
}
66
 
67
// Calendar event background colours defined.
68
[data-action=filter-event-type] {
69
  display: flex;
70
  align-items: center;
71
 
72
  &:focus {
73
    border-radius: $btn-border-radius;
74
  }
75
}
76
 
77
[data-eventtype-hidden="true"] {
78
  opacity: .4;
79
}
80
 
81
.popover {
82
  .event-icon {
83
    display: inline-flex !important;
84
    align-items: center;
85
    justify-content: center;
86
 
87
    padding: 0;
88
    margin-right: .5rem;
89
    border-radius: $btn-border-radius;
90
    background-color: $container-bg;
91
 
92
    font-weight: $font-weight-medium;
93
 
94
    .icon {
95
      width: 30px;
96
      height: 30px;
97
    }
98
  }
99
}
100
 
101
 
102
.calendarmonth {
103
  .day {
104
 
105
    .calendar_event_,
106
    .calendar_event_category,
107
    .calendar_event_course,
108
    .calendar_event_site,
109
    .calendar_event_group,
110
    .calendar_event_user,
111
    .calendar_event_close,
112
    .calendar_event_due {
113
      border: 0;
114
    }
115
 
116
    .calendar_event_due,
117
    .calendar_event_other {
118
      background-color: $calendarEventOtherColor;
119
    }
120
 
121
    .calendar_event_open {
122
      margin-top: 22px;
123
      position: relative;
124
 
125
      &::after {
126
        content: '';
127
        background-color: $green-200;
128
        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($green-800)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.75 11.75C5.75 11.1977 6.19772 10.75 6.75 10.75H17.25C17.8023 10.75 18.25 11.1977 18.25 11.75V17.25C18.25 18.3546 17.3546 19.25 16.25 19.25H7.75C6.64543 19.25 5.75 18.3546 5.75 17.25V11.75Z'%3E%3C/path%3E%3Cpath stroke='#{url-friendly-colour($green-800)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7.75 10.5V9.84343C7.75 8.61493 7.70093 7.29883 8.42416 6.30578C8.99862 5.51699 10.0568 4.75 12 4.75C14 4.75 15.25 6.25 15.25 6.25'%3E%3C/path%3E%3C/svg%3E%0A");
129
        background-position: center;
130
        background-repeat: no-repeat;
131
        background-size: 16px;
132
        position: absolute;
133
        top: -12px;
134
        left: 0;
135
        z-index: 1;
136
        width: 22px;
137
        height: 22px;
138
        border-radius: $btn-border-radius;
139
      }
140
    }
141
 
142
    [data-event-eventtype*="due"],
143
    .calendar_event_gradingdue {
144
      margin-top: 22px;
145
      position: relative;
146
 
147
      &::after {
148
        content: '';
149
        background-color: $green-200;
150
        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%3Ccircle cx='12' cy='12' r='7.25' stroke='#{url-friendly-colour($green-800)}' stroke-width='1.5'%3E%3C/circle%3E%3Cpath stroke='#{url-friendly-colour($green-800)}' stroke-width='1.5' d='M12 8V12L14 14'%3E%3C/path%3E%3C/svg%3E%0A");
151
        background-position: center;
152
        background-repeat: no-repeat;
153
        background-size: 16px;
154
        position: absolute;
155
        top: -12px;
156
        left: 0;
157
        z-index: 1;
158
        width: 22px;
159
        height: 22px;
160
        border-radius: $btn-border-radius;
161
      }
162
    }
163
 
164
    .calendar_event_close {
165
      margin-top: 22px;
166
      background-color: $calendarEventCourseColor;
167
 
168
      position: relative;
169
 
170
      &::after {
171
        content: '';
172
        background-color: $red-200;
173
        background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='24' height='24' stroke-width='2' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' color='#{url-friendly-colour($red-700)}'%3E%3Cpath d='M16 12h1.4a.6.6 0 01.6.6v6.8a.6.6 0 01-.6.6H6.6a.6.6 0 01-.6-.6v-6.8a.6.6 0 01.6-.6H8m8 0V8c0-1.333-.8-4-4-4S8 6.667 8 8v4m8 0H8' stroke='#{url-friendly-colour($red-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
174
        background-position: center;
175
        background-repeat: no-repeat;
176
        background-size: 16px;
177
        position: absolute;
178
        top: -12px;
179
        left: 0;
180
        z-index: 1;
181
        width: 22px;
182
        height: 22px;
183
        border-radius: $btn-border-radius;
184
      }
185
    }
186
 
187
    .calendar_event_category {
188
      background-color: $calendarEventCategoryColor;
189
    }
190
 
191
    .calendar_event_gradingdue,
192
    .calendar_event_due,
193
    [data-event-eventtype*="due"],
194
    .calendar-event-box[data-event-component^="mod_"],
195
    .calendar_event_open,
196
    .calendar_event_course {
197
      background-color: $calendarEventCourseColor;
198
    }
199
 
200
    .calendar_event_site {
201
      background-color: $calendarEventGlobalColor;
202
    }
203
 
204
    .calendar_event_group {
205
      background-color: $calendarEventGroupColor;
206
    }
207
 
208
    .calendar_event_user,
209
    .calendar_event_ {
210
      background-color: $calendarEventUserColor;
211
    }
212
 
213
    .description-content {
214
      margin-top: 5px;
215
      font-weight: $font-weight-base;
216
 
217
      img {
218
        width: 100%;
219
        max-width: 100%;
220
      }
221
    }
222
  }
223
}
224
 
225
 
226
.description-content {
227
  padding-right: 30px;
228
  width: 100%;
229
  max-height: 204px;
230
  overflow-y: auto;
231
}
232
 
233
 
234
.calendar_event_ {
235
  .modal-sm & {
236
    background-color: transparent;
237
    padding-left: 50px !important;
238
    border-radius: 0;
239
 
240
    position: relative;
241
 
242
    &:before {
243
      content: '';
244
      position: absolute;
245
      top: 0;
246
      left: 0;
247
 
248
      width: 30px;
249
      height: 30px;
250
      border-radius: $btn-border-radius-lg;
251
 
252
      background-color: $primary-color-700;
253
    }
254
 
255
  }
256
 
257
  .badge-special {
258
    background-color: $primary-color-700;
259
    color: $primary-color-300;
260
  }
261
 
262
}
263
 
264
.calendar_event_other {
265
  .modal-sm & {
266
    background-color: transparent;
267
    padding-left: 50px !important;
268
    border-radius: 0;
269
 
270
    position: relative;
271
 
272
    &:before {
273
      content: '';
274
      position: absolute;
275
      top: 0;
276
      left: 0;
277
 
278
      width: 30px;
279
      height: 30px;
280
      border-radius: $btn-border-radius-lg;
281
 
282
      background-color: $gray-500;
283
 
284
      .theme-dark & {
285
        background-color: $dm-gray-500;
286
      }
287
    }
288
 
289
  }
290
 
291
  .badge-special {
292
    background-color: $gray-500;
293
    color: $gray-900;
294
 
295
    .theme-dark & {
296
      background-color: $dm-gray-500;
297
      color: $dm-gray-900;
298
    }
299
  }
300
 
301
}
302
 
303
.calendar_event_category {
304
  .modal-sm & {
305
    background-color: transparent;
306
    padding-left: 50px !important;
307
    border-radius: 0;
308
 
309
    position: relative;
310
 
311
    &:before {
312
      content: '';
313
      position: absolute;
314
      top: calc(50% - 9px);
315
      left: 20px;
316
 
317
      width: 18px;
318
      height: 18px;
319
      border-radius: 18px;
320
 
321
      background-color: $calendarEventCategoryColor;
322
    }
323
 
324
  }
325
 
326
  .badge-special {
327
    background-color: $calendarEventCategoryColor;
328
    color: lighten($calendarEventCategoryColor, 80%);
329
  }
330
 
331
  .modal-title {
332
    color: darken($calendarEventCategoryColor, 80%);
333
  }
334
}
335
 
336
[data-event-component^="mod_"],
337
.calendar_event_course {
338
  .modal-sm & {
339
    background-color: transparent;
340
    padding-left: 50px !important;
341
    border-radius: 0;
342
 
343
    position: relative;
344
 
345
    &:before {
346
      content: '';
347
      position: absolute;
348
      top: calc(50% - 9px);
349
      left: 20px;
350
 
351
      width: 18px;
352
      height: 18px;
353
      border-radius: 18px;
354
 
355
      background-color: $calendarEventCourseColor;
356
    }
357
 
358
  }
359
 
360
  .badge-special {
361
    background-color: $calendarEventCourseColor;
362
    color: lighten($calendarEventCourseColor, 80%);
363
  }
364
 
365
  .modal-title {
366
    color: $body-color;
367
 
368
    .theme-dark & {
369
      color: $dm-body-color-light;
370
    }
371
  }
372
}
373
 
374
.calendar_event_site {
375
  .modal-sm & {
376
    background-color: transparent;
377
    padding-left: 50px !important;
378
    border-radius: 0;
379
 
380
    position: relative;
381
 
382
    &:before {
383
      content: '';
384
      position: absolute;
385
      top: calc(50% - 9px);
386
      left: 20px;
387
 
388
      width: 18px;
389
      height: 18px;
390
      border-radius: 18px;
391
 
392
      background-color: $calendarEventGlobalColor;
393
    }
394
 
395
  }
396
 
397
  .badge-special {
398
    background-color: $calendarEventGlobalColor;
399
    color: lighten($calendarEventGlobalColor, 80%);
400
  }
401
 
402
  .modal-title {
403
    color: darken($calendarEventGlobalColor, 80%);
404
  }
405
 
406
}
407
 
408
.calendar_event_group {
409
  .modal-sm & {
410
    background-color: transparent;
411
    padding-left: 50px !important;
412
    border-radius: 0;
413
 
414
    position: relative;
415
 
416
    &:before {
417
      content: '';
418
      position: absolute;
419
      top: calc(50% - 9px);
420
      left: 20px;
421
 
422
      width: 18px;
423
      height: 18px;
424
      border-radius: 18px;
425
      background-color: $calendarEventGroupColor;
426
    }
427
 
428
  }
429
 
430
  .badge-special {
431
    background-color: $calendarEventGroupColor;
432
    color: lighten($calendarEventGroupColor, 80%);
433
  }
434
 
435
  .modal-title {
436
    color: darken($calendarEventGroupColor, 80%);
437
  }
438
}
439
 
440
.calendar_event_user,
441
.calendar_event_ {
442
  .modal-sm & {
443
    background-color: transparent;
444
    padding-left: 50px !important;
445
    border-radius: 0;
446
 
447
    position: relative;
448
 
449
    &:before {
450
      content: '';
451
      position: absolute;
452
      top: calc(50% - 9px);
453
      left: 20px;
454
 
455
      width: 18px;
456
      height: 18px;
457
      border-radius: 18px;
458
      background-color: $calendarEventUserColor;
459
    }
460
 
461
  }
462
 
463
  .badge-special {
464
    background-color: $calendarEventUserColor;
465
    color: lighten($calendarEventUserColor, 80%);
466
  }
467
 
468
  .modal-title {
469
    color: darken($calendarEventUserColor, 80%);
470
 
471
    .theme-dark & {
472
      color: lighten($calendarEventUserColor, 80%);
473
    }
474
  }
475
}
476
 
477
 
478
.minicalendar.calendartable {
479
 
480
  [data-event-component^="mod_"],
481
  .calendar_event_category,
482
  .calendar_event_course,
483
  .calendar_event_site,
484
  .calendar_event_group,
485
  .calendar_event_other,
486
  .calendar_event_user,
487
  .calendar_event_ {
488
    position: relative;
489
    background-color: transparent !important;
490
 
491
    &:before {
492
      content: '';
493
      width: 6px;
494
      height: 6px;
495
      border-radius: 6px;
496
 
497
      position: absolute;
498
      top: 1px;
499
      left: calc(50% - 3px);
500
    }
501
  }
502
 
503
  .calendar_event_category {
504
    &:before {
505
      background-color: $calendarEventCategoryColor;
506
    }
507
  }
508
 
509
  [data-event-component^="mod_"],
510
  .calendar_event_course {
511
    &:before {
512
      background-color: $calendarEventCourseColor;
513
    }
514
  }
515
 
516
  .calendar_event_site {
517
    &:before {
518
      background-color: $calendarEventGlobalColor;
519
    }
520
  }
521
 
522
  .calendar_event_group {
523
    &:before {
524
      background-color: $calendarEventGroupColor;
525
    }
526
  }
527
 
528
  .calendar_event_other {
529
    &:before {
530
      background-color: $gray-300;
531
 
532
      .theme-dark & {
533
        background-color: $dm-gray-300;
534
      }
535
    }
536
  }
537
 
538
  .calendar_event_user,
539
  .calendar_event_ {
540
    &:before {
541
      background-color: $calendarEventUserColor;
542
    }
543
  }
544
 
545
}
546
 
547
.calendarmonth {
548
  .calendar-event-box {
549
    position: relative;
550
 
551
    .eventlist & {
552
      background-color: $container-bg;
553
    }
554
 
555
    &.calendar_event_category {
556
      border: 2px solid $calendarEventCategoryColor;
557
 
558
      .badge-special {
559
        background-color: $calendarEventCategoryColor;
560
        color: darken($calendarEventCategoryColor, 80%);
561
      }
562
    }
563
 
564
    &.calendar_event_other {
565
      border: 2px solid $gray-400;
566
 
567
      .theme-dark & {
568
        border: 2px solid $dm-gray-400;
569
      }
570
    }
571
 
572
    &.calendar_event_close {
573
      border: 2px solid $red-600;
574
    }
575
 
576
    &[data-event-component^="mod_"],
577
    &.calendar_event_course {
578
      border: 2px solid $calendarEventCourseColor;
579
    }
580
 
581
    &.calendar_event_site {
582
      border: 2px solid $calendarEventGlobalColor;
583
    }
584
 
585
    &.calendar_event_group {
586
      border: 2px solid $calendarEventGroupColor;
587
    }
588
 
589
    &.calendar_event_user {
590
      border: 2px solid $calendarEventUserColor;
591
 
592
      .badge-special {
593
        background-color: $calendarEventUserColor;
594
        color: darken($calendarEventUserColor, 80%);
595
      }
596
    }
597
  }
598
}
599
 
600
a.day {
601
  color: $body-color;
602
  text-decoration: none;
603
 
604
  .theme-dark & {
605
    color: $dm-body-color;
606
  }
607
 
608
  &:hover {
609
    color: $link-color;
610
    text-decoration: none;
611
 
612
    .theme-dark & {
613
      color: $dm-link-color;
614
    }
615
  }
616
}
617
 
618
td.day.bg-primary {
619
  background-color: $gray-200 !important;
620
  color: $gray-900 !important;
621
 
622
  .theme-dark & {
623
    background-color: $dm-gray-200 !important;
624
    color: $dm-gray-900 !important;
625
  }
626
}
627
 
628
.dayblank {
629
  background-image: url([[pix:theme|diagonal-lines]]);
630
  background-repeat: repeat;
631
  background-color: transparent;
632
  background-size: 4px;
633
 
634
  .theme-dark & {
635
    filter: invert(.9);
636
 
637
  }
638
}
639
 
640
 
641
td.day {
642
  [data-toggle=popover] {
643
    font-weight: $font-weight-bold;
644
    color: $body-color;
645
  }
646
}
647
 
648
// Calendar restyling.
649
.calendartable {
650
  width: 100%;
651
  table-layout: fixed;
652
 
653
  th,
654
  td {
655
    width: 14%;
656
    vertical-align: top;
657
    text-align: center;
658
    border: 0;
659
  }
660
}
661
 
662
.calendar-controls {
663
  position: relative;
664
  display: inline-flex;
665
  align-items: center;
666
  justify-content: space-between;
667
  gap: 2px;
668
 
669
  width: 100%;
670
 
671
  @include media-breakpoint-between(xs, sm) {
672
    .arrow_link {
673
      width: 40px;
674
      height: 40px;
675
 
676
      padding: 0;
677
      background-position: center !important;
678
    }
679
 
680
    .arrow_text {
681
      display: none;
682
    }
683
  }
684
 
685
  .previous {
686
    position: relative;
687
 
688
    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='M8.75 12L14.25 7.75V16.25L8.75 12Z' stroke='#{url-friendly-colour($body-color)}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E%0A");
689
    background-repeat: no-repeat;
690
    background-position: center;
691
    background-size: 20px;
692
  }
693
 
694
  // .current {
695
  //     padding: 0 20px;
696
  //     line-height: 1.5;
697
  //     text-align: center;
698
  //     font-size: $font-size-xs;
699
  // }
700
 
701
  .next {
702
    position: relative;
703
 
704
    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='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E%0A");
705
    background-repeat: no-repeat;
706
    background-position: center;
707
    background-size: 20px;
708
  }
709
 
710
  .drop-target {
711
    box-sizing: border-box;
712
    border: 1px dashed $primary-color-300;
713
  }
714
}
715
 
716
 
717
.filters {
718
  table {
719
    border-collapse: separate;
720
    border-spacing: 2px;
721
    width: 100%;
722
  }
723
}
724
 
725
#region-main {
726
  .maincalendar {
727
    .calendarwrapper {
728
      td {
729
        &>div {
730
          overflow: hidden;
731
        }
732
      }
733
    }
734
  }
735
}
736
 
737
.maincalendar {
738
  vertical-align: top;
739
  padding: 0;
740
 
741
  .bottom {
742
    display: inline-flex;
743
    margin-top: 2 * $spacer;
744
    text-align: center;
745
 
746
    @include media-breakpoint-only(sm) {
747
      width: 100%;
748
 
749
      .btn {
750
        width: 100%;
751
      }
752
    }
753
 
754
    .footer-link {
755
      margin-right: 5px;
756
    }
757
  }
758
 
759
  .heightcontainer {
760
    height: 100%;
761
    position: relative;
762
  }
763
 
764
  .calendarmonth {
765
    width: 100%;
766
    margin: $spacer auto;
767
 
768
    ul {
769
      margin: 0.5rem 0 0 0;
770
      padding: 0;
771
 
772
      li[data-event-folded="true"] {
773
        display: block!important;
774
      }
775
 
776
      #block-region-sidecourseblocks &,
777
      #block-region-side-pre & {
778
        margin-top: 0;
779
      }
780
 
781
      li {
782
        padding: 7px;
783
        margin-bottom: 7px;
784
        list-style-type: none;
785
        border-radius: $btn-border-radius;
786
 
787
        .small {
788
          color: $body-color-secondary;
789
        }
790
 
791
        >a {
792
          padding: 0;
793
          border-radius: $btn-border-radius;
794
          max-width: 100%;
795
          display: block;
796
          color: $body-color-secondary;
797
 
798
          #block-region-sidecourseblocks &,
799
          #block-region-side-pre & {
800
            width: 10px;
801
            height: 10px;
802
            padding: 0;
803
          }
804
 
805
          &:hover {
806
            text-decoration: none;
807
          }
808
 
809
          >div,
810
          span {
811
 
812
            #block-region-sidecourseblocks &,
813
            #block-region-side-pre & {
814
              display: none !important;
815
            }
816
          }
817
        }
818
 
819
        &:last-child {
820
          margin-bottom: 0;
821
        }
822
 
823
        img {
824
          max-width: 100%;
825
          width: 100%;
826
          margin: 0.25rem 0 0;
827
          border-radius: $btn-border-radius;
828
        }
829
 
830
        .icon {
831
          margin: 0 0.25rem 0 0;
832
          padding: 5px;
833
          display: inline-flex;
834
          width: 20px;
835
          height: 20px;
836
 
837
          background-color: $gray-100;
838
          border-radius: $btn-border-radius;
839
 
840
          color: $gray-800;
841
 
842
          .theme-dark & {
843
            background-color: $dm-gray-100;
844
            color: $dm-gray-800;
845
          }
846
 
847
        }
848
 
849
        span {
850
          display: block;
851
          margin-bottom: 0;
852
 
853
          font-weight: $font-weight-medium;
854
          color: $body-color;
855
        }
856
 
857
      }
858
    }
859
 
860
    td {
861
      padding: 5px;
862
      height: 40px;
863
      border: 1px solid $border-color;
864
      font-size: $font-size-md;
865
      transition: $transition-base;
866
 
867
      .theme-dark & {
868
        border: 1px solid $dm-border-color;
869
      }
870
 
871
      a.day:focus {
872
        display: inline-block;
873
        border-radius: $btn-border-radius-xl;
874
      }
875
 
876
      .day-number-circle {
877
        display: inline-block;
878
        line-height: 0;
879
        width: 30px;
880
        height: 30px;
881
 
882
        .day-number {
883
          display: inline-block;
884
          padding: 50% 4px;
885
          width: 100%;
886
          text-align: center;
887
 
888
          @include media-breakpoint-between(xs, md) {
889
            font-size: 11px;
890
          }
891
        }
892
      }
893
 
894
      &.today {
895
        .day-number-circle {
896
          border-radius: $btn-border-radius;
897
          color: $calendarCurrentDateColor;
898
          background-color: $calendarCurrentDateBackground;
899
        }
900
      }
901
 
902
    }
903
  }
904
 
905
  .calendarmonth {
906
    th.header {
907
      padding: 1rem 16px;
908
      font-size: $font-size-xs;
909
      font-weight: $font-weight-bold;
910
 
911
      text-align: right;
912
 
913
      border: 0;
914
      color: $gray-900;
915
 
916
      .theme-dark & {
917
        color: $dm-gray-900;
918
      }
919
 
920
      #block-region-dleftblocks &,
921
      #block-region-drightblocks &,
922
      #block-region-sidecourseblocks &,
923
      #block-region-side-pre & {
924
        padding: 5px 2px;
925
        font-size: $font-size-xs;
926
      }
927
 
928
      @include media-breakpoint-between(sm, md) {
929
        padding: 5px 0;
930
        font-size: $font-size-md;
931
      }
932
    }
933
 
934
    td,
935
    th {
936
      border-style: solid;
937
    }
938
  }
939
 
940
  .calendar-controls {
941
    .current {
942
      margin-bottom: 0;
943
      @include media-breakpoint-between(xs,sm) {
944
      font-size: $font-size-xs;
945
      }
946
    }
947
  }
948
 
949
  .controls {
950
    width: 100%;
951
    margin: 10px auto;
952
  }
953
 
954
  .calendar_event_category {
955
    background-color: $calendarEventCategoryColor;
956
  }
957
 
958
  .calendar_event_course {
959
    background-color: $calendarEventCourseColor;
960
  }
961
 
962
  .calendar_event_site {
963
    background-color: $calendarEventGlobalColor;
964
  }
965
 
966
  .calendar_event_group {
967
    background-color: $calendarEventGroupColor;
968
  }
969
 
970
  .calendar_event_user {
971
    background-color: $calendarEventUserColor;
972
  }
973
 
974
  .calendartable {
975
    li {
976
      text-align: left;
977
    }
978
  }
979
 
980
  .header {
981
    .buttons {
982
      float: right;
983
    }
984
  }
985
 
986
  .event .card-header img {
987
    vertical-align: baseline;
988
  }
989
 
990
}
991
 
992
 
993
#page-calendar-view .maincalendar .calendarmonth td {
994
  height: 5rem;
995
 
996
  @include media-breakpoint-between(xs, sm) {
997
    height: 60px;
998
  }
999
}
1000
 
1001
 
1002
// Dark mode.
1003
.theme-dark .maincalendar .calendarmonth th.header {
1004
  border-color: $dm-border-color;
1005
  color: $dm-body-color;
1006
 
1007
}
1008
 
1009
.dir-rtl.theme-dark .calendar-controls .next,
1010
.theme-dark .calendar-controls .previous {
1011
  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='M8.75 12L14.25 7.75V16.25L8.75 12Z' stroke='#{url-friendly-colour($dm-body-color)}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E%0A");
1012
}
1013
 
1014
.dir-rtl.theme-dark .calendar-controls .previous,
1015
.theme-dark .calendar-controls .next {
1016
  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='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E%0A");
1017
}
1018
 
1019
// End.
1020
 
1021
.eventlist {
1022
  position: relative;
1023
  grid-template-columns: repeat(auto-fill, minmax(49%, 1fr));
1024
  gap: 20px;
1025
  display: grid;
1026
  align-items: stretch;
1027
 
1028
  .calendar-event-box {
1029
    background-color: $container-bg;
1030
 
1031
    @include media-breakpoint-up(md) {
1032
      padding: 20px 20px 20px 70px;
1033
    }
1034
 
1035
    @include media-breakpoint-between(xs, sm) {
1036
      padding: 60px 16px 16px 16px;
1037
    }
1038
 
1039
    .rui-blocks-area & {
1040
      padding: 10px;
1041
    }
1042
 
1043
    .theme-dark & {
1044
      background-color: $dm-gray-100;
1045
    }
1046
  }
1047
 
1048
  .calendar_event_category,
1049
  .calendar_event_course,
1050
  .calendar_event_expectcompletionon,
1051
  .calendar_event_open,
1052
  .calendar-event-box[data-event-component^="mod_"],
1053
  .calendar_event_close,
1054
  .calendar_event_due,
1055
  .calendar_event_site,
1056
  .calendar_event_group,
1057
  .calendar_event_user {
1058
    &:before {
1059
      content: '';
1060
      position: absolute;
1061
      @include media-breakpoint-up(md) {
1062
        top: 24px;
1063
      }
1064
 
1065
      @include media-breakpoint-between(xs,sm) {
1066
        top: 14px;
1067
      }
1068
      left: 16px;
1069
 
1070
      width: 40px;
1071
      height: 20px;
1072
      border-radius: $btn-border-radius-lg;
1073
 
1074
    }
1075
  }
1076
 
1077
  .calendar_event_category {
1078
    &:before {
1079
      background-color: $calendarEventCategoryColor;
1080
    }
1081
  }
1082
 
1083
  [data-event-component^="mod_"],
1084
  .calendar_event_course {
1085
    &:before {
1086
      background-color: $calendarEventCourseColor;
1087
    }
1088
  }
1089
 
1090
 
1091
  .calendar_event_site {
1092
    &:before {
1093
      background-color: $calendarEventGlobalColor;
1094
    }
1095
  }
1096
 
1097
  .calendar_event_group {
1098
    &:before {
1099
      background-color: $calendarEventGroupColor;
1100
    }
1101
  }
1102
 
1103
  .calendar_event_user {
1104
    &:before {
1105
      background-color: $calendarEventUserColor;
1106
    }
1107
  }
1108
 
1109
  .calendar_event_other {
1110
    &:before {
1111
      background-color: $calendarEventOtherColor;
1112
    }
1113
  }
1114
}
1115
 
1116
 
1117
.maincalendar {
1118
 
1119
  .calendarmonth {
1120
    a[data-action="view-event"]::after {
1121
      display: none;
1122
    }
1123
 
1124
    td {
1125
      position: relative;
1126
 
1127
      [data-action="view-day-link"] {
1128
        font-weight: $font-weight-bold;
1129
        text-align: center;
1130
        line-height: 190%;
1131
 
1132
        position: relative;
1133
      }
1134
 
1135
      &.today {
1136
 
1137
        .calendar-day-label {
1138
          padding: 0;
1139
          display: block;
1140
 
1141
          background: $red-600;
1142
          border-radius: $btn-border-radius;
1143
          color: $red-200;
1144
          width: 30px;
1145
          height: 30px;
1146
 
1147
 
1148
          font-weight: $font-weight-bold;
1149
          text-align: center;
1150
          line-height: 190%;
1151
 
1152
          position: relative;
1153
          top: -2px;
1154
        }
1155
 
1156
      }
1157
 
1158
    }
1159
  }
1160
}
1161
 
1162
 
1163
.calendar-day-label {
1164
  padding: 20px 20px 20px 0;
1165
  font-size: 1rem;
1166
  font-weight: $font-weight-base;
1167
  color: $gray-700;
1168
 
1169
  .theme-dark & {
1170
    color: $dm-gray-700;
1171
  }
1172
}
1173
 
1174
.calendar-event-description {
1175
  color: $body-color-secondary;
1176
 
1177
  @include media-breakpoint-up(md) {
1178
    font-size: $font-size-md;
1179
  }
1180
 
1181
  @include media-breakpoint-between(xs,sm) {
1182
    font-size: $font-size-xs;
1183
  }
1184
 
1185
  .theme-dark & {
1186
    color: $dm-body-color-secondary;
1187
  }
1188
}
1189
 
1190
// Calendar export.
1191
#page-calendar-export {
1192
  .indent {
1193
    padding-left: 20px;
1194
  }
1195
}
1196
 
1197
// Block minicalendar.
1198
.block {
1199
 
1200
  .calendarwrapper {
1201
    margin: 1rem 0;
1202
 
1203
    &:last-child {
1204
      margin-bottom: 0;
1205
    }
1206
  }
1207
 
1208
  .minicalendar {
1209
    width: 100%;
1210
 
1211
    h3,
1212
    .current {
1213
      margin: 0;
1214
      font-family: $font-family-base;
1215
      font-size: $font-size-md;
1216
      color: $body-color-secondary;
1217
      text-align: left;
1218
 
1219
      .theme-dark & {
1220
        color: $dm-body-color-secondary;
1221
      }
1222
 
1223
      a {
1224
        display: block;
1225
        text-decoration: none;
1226
        color: inherit;
1227
 
1228
        &:hover {
1229
          text-decoration: none;
1230
        }
1231
      }
1232
    }
1233
 
1234
    h4.current {
1235
      @include media-breakpoint-up(md) {
1236
        font-size: $font-size-md;
1237
      }
1238
 
1239
      @include media-breakpoint-between(xs, sm) {
1240
        font-size: $font-size-xs;
1241
      }
1242
    }
1243
 
1244
    .arrow_link {
1245
      color: $body-color-secondary;
1246
      text-decoration: none;
1247
 
1248
      .theme-dark & {
1249
        color: $dm-body-color-secondary;
1250
      }
1251
 
1252
      &:hover {
1253
        text-decoration: none;
1254
      }
1255
    }
1256
 
1257
    td {
1258
      padding: 0 !important;
1259
      height: 27px;
1260
      width: 28px;
1261
      border-radius: $btn-border-radius;
1262
 
1263
      font-weight: $font-weight-medium;
1264
      line-height: 2.5;
1265
 
1266
      a {
1267
        padding: 8px;
1268
        text-decoration: none;
1269
 
1270
        &:hover {
1271
          text-decoration: none;
1272
        }
1273
      }
1274
    }
1275
 
1276
    .today {
1277
      background: $red-600;
1278
      color: $red-200;
1279
 
1280
      a {
1281
        color: $red-200 !important;
1282
      }
1283
    }
1284
 
1285
    th {
1286
      color: $body-color;
1287
      font-size: $font-size-xs;
1288
      font-weight: $font-weight-medium;
1289
 
1290
      .theme-dark & {
1291
        color: $dm-body-color;
1292
      }
1293
 
1294
      abbr[title],
1295
      abbr[data-original-title] {
1296
        white-space: nowrap;
1297
        text-decoration: none;
1298
      }
1299
 
1300
    }
1301
 
1302
    th,
1303
    td {
1304
      font-size: $font-size-xs;
1305
      text-align: center;
1306
    }
1307
 
1308
    td {
1309
      &.weekend {
1310
        @extend .text-muted;
1311
      }
1312
 
1313
      &.duration_global {
1314
        border-top: 1px solid $calendarEventGlobalColor;
1315
        border-bottom: 1px solid $calendarEventGlobalColor;
1316
 
1317
        &.duration_finish {
1318
          background-color: $calendarEventGlobalColor;
1319
        }
1320
      }
1321
 
1322
      &.duration_category {
1323
        border-top: 1px solid $calendarEventCategoryColor;
1324
        border-bottom: 1px solid $calendarEventCategoryColor;
1325
 
1326
        &.duration_finish {
1327
          background-color: $calendarEventCategoryColor;
1328
        }
1329
      }
1330
 
1331
      &.duration_course {
1332
        border-top: 1px solid $calendarEventCourseColor;
1333
        border-bottom: 1px solid $calendarEventCourseColor;
1334
 
1335
        &.duration_finish {
1336
          background-color: $calendarEventCourseColor;
1337
        }
1338
      }
1339
 
1340
      &.duration_group {
1341
        border-top: 1px solid $calendarEventGroupColor;
1342
        border-bottom: 1px solid $calendarEventGroupColor;
1343
 
1344
        &.duration_finish {
1345
          background-color: $calendarEventGroupColor;
1346
        }
1347
      }
1348
 
1349
      &.duration_user {
1350
        border-top: 1px solid $calendarEventUserColor;
1351
        border-bottom: 1px solid $calendarEventUserColor;
1352
 
1353
        &.duration_finish {
1354
          background-color: $calendarEventUserColor;
1355
        }
1356
      }
1357
    }
1358
 
1359
    caption {
1360
      padding: 10px 0;
1361
      margin-bottom: 10px;
1362
      display: table-caption;
1363
      font-size: inherit;
1364
      font-weight: inherit;
1365
      line-height: inherit;
1366
 
1367
      font-family: $font-family-base;
1368
      color: $body-color-secondary;
1369
      text-align: left;
1370
 
1371
      position: relative;
1372
 
1373
      .theme-dark & {
1374
        color: $dm-body-color-secondary;
1375
      }
1376
    }
1377
  }
1378
 
1379
  .calendar-controls {
1380
 
1381
    .previous,
1382
    .next {
1383
      min-width: 32px;
1384
      width: 32px;
1385
      height: 32px!important;
1386
 
1387
      .arrow {
1388
        color: transparent;
1389
      }
1390
    }
1391
 
1392
    .previous {
1393
      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='M8.75 12L14.25 7.75V16.25L8.75 12Z' stroke='#{url-friendly-colour($body-color)}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E%0A");
1394
      background-repeat: no-repeat;
1395
      background-position: center;
1396
      left: 0;
1397
 
1398
      .theme-dark & {
1399
        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='M8.75 12L14.25 7.75V16.25L8.75 12Z' stroke='#{url-friendly-colour($dm-body-color)}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E%0A");
1400
      }
1401
    }
1402
 
1403
    .current {
1404
      display: block;
1405
      text-align: left;
1406
      width: auto;
1407
      margin: 5px 0;
1408
 
1409
      .main-content & {
1410
        font-size: 2rem;
1411
      }
1412
 
1413
      .block.block_calendar_month & {
1414
        font-size: $font-size-sm;
1415
      }
1416
    }
1417
 
1418
    .next {
1419
      right: 0;
1420
      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='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E%0A");
1421
      background-repeat: no-repeat;
1422
      background-position: center;
1423
 
1424
      .theme-dark & {
1425
        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='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E%0A");
1426
      }
1427
    }
1428
  }
1429
 
1430
  .calendar_filters {
1431
    ul {
1432
      list-style: none;
1433
      margin: 0;
1434
      padding: 0;
1435
    }
1436
 
1437
    li {
1438
      margin-bottom: 0.5rem;
1439
 
1440
      &:last-of-type {
1441
        margin-bottom: 0;
1442
      }
1443
 
1444
      >a {
1445
        &:hover {
1446
          text-decoration: none;
1447
        }
1448
      }
1449
    }
1450
  }
1451
 
1452
  .content {
1453
    h3 {
1454
      &.eventskey {
1455
        margin-top: 0.5em;
1456
      }
1457
    }
1458
  }
1459
}
1460
 
1461
 
1462
.dir-rtl {
1463
  .block .calendar-controls .previous,
1464
  .block .calendar-controls .next {
1465
    transform: rotate(180deg);
1466
  }
1467
}
1468
 
1469
.maincalendar .calendar_event_course a:after {
1470
  display: none;
1471
}
1472
 
1473
.calendar_filters [data-action=filter-event-type] {
1474
 
1475
  [data-event-component^="mod_"],
1476
  .calendar_event_other,
1477
  .calendar_event_category,
1478
  .calendar_event_course,
1479
  .calendar_event_site,
1480
  .calendar_event_group,
1481
  .calendar_event_user {
1482
    display: flex;
1483
    align-items: center;
1484
    justify-content: center;
1485
 
1486
    padding: 2px;
1487
    width: 36px;
1488
    height: 36px;
1489
    border-radius: $btn-border-radius-lg;
1490
    margin-right: 10px;
1491
 
1492
    .icon {
1493
      opacity: .6;
1494
    }
1495
  }
1496
 
1497
  .event-icon {
1498
    .rui-icon-container {
1499
      display: inline-flex;
1500
      align-items: center;
1501
      margin-right: .5rem;
1502
 
1503
      .icon {
1504
        .theme-dark & {
1505
          filter: invert(1);
1506
        }
1507
      }
1508
    }
1509
  }
1510
 
1511
  .eventname,
1512
  .event-icon {
1513
    display: inline-flex;
1514
 
1515
    #nav-drawer & {
1516
      margin: 0 6px;
1517
    }
1518
  }
1519
 
1520
  .eventname {
1521
    width: calc(100% - 80px);
1522
    color: $body-color;
1523
    font-size: $font-size-xs;
1524
    font-weight: $font-weight-medium;
1525
 
1526
    .theme-dark & {
1527
      color: $dm-body-color;
1528
    }
1529
  }
1530
 
1531
}
1532
 
1533
.maincalendar .calendarmonth ul li .event-time {
1534
  display: inline-flex;
1535
  flex-wrap: wrap;
1536
  gap: 3px;
1537
 
1538
  padding: 3px 8px;
1539
  border-radius: $btn-border-radius;
1540
 
1541
  background-color: $container-bg;
1542
  color: $body-color-secondary;
1543
 
1544
  .theme-dark & {
1545
    background-color: $dm-container-bg;
1546
    color: $dm-body-color-secondary;
1547
  }
1548
 
1549
  a.dimmed:link {
1550
    color: inherit !important;
1551
    line-height: 1.1;
1552
 
1553
    &:hover {
1554
      color: $link-hover-color !important;
1555
    }
1556
  }
1557
}
1558
 
1559
.maincalendar .calendarmonth ul li .event-time,
1560
.maincalendar .calendarmonth ul li .event-time span {
1561
  font-size: $font-size-xs;
1562
  font-weight: $font-weight-medium;
1563
  color: inherit;
1564
}
1565
 
1566
.event-title {
1567
  font-size: $font-size-sm;
1568
  font-weight: $font-weight-medium;
1569
  line-height: 1.3;
1570
  margin-top: 5px;
1571
  margin-bottom: 5px;
1572
}
1573
 
1574
/* Display month name above the calendar */
1575
table.calendartable caption {
1576
  caption-side: top;
1577
}
1578
 
1579
@media (min-width: 768px) {
1580
  #page-calender-view {
1581
    .container-fluid {
1582
      min-width: 1024px;
1583
    }
1584
  }
1585
}
1586
 
1587
.calendarwrapper {
1588
  position: relative;
1589
 
1590
  label {
1591
    margin: 0 !important;
1592
  }
1593
}
1594
 
1595
.day-popover-content {
1596
  &:empty+.day-popover-alternate {
1597
    display: block;
1598
  }
1599
}
1600
 
1601
.summary-modal-container {
1602
  .description-content {
1603
    >p {
1604
      margin: 0;
1605
    }
1606
  }
1607
}
1608
 
1609
 
1610
/* Custom YUI CSS for the theme */
1611
.yui3-skin-sam {
1612
  .yui3-calendar-header {
1613
    display: block;
1614
    width: 300px;
1615
 
1616
    padding-bottom: 1rem;
1617
    margin-bottom: 1rem;
1618
    margin-left: -1.5rem;
1619
    margin-right: -1.5rem;
1620
 
1621
    border-bottom: 1px solid $border-color;
1622
 
1623
    .theme-dark & {
1624
      border-bottom: 1px solid $dm-border-color;
1625
    }
1626
  }
1627
 
1628
 
1629
  .dateselector-calendar-panel {
1630
    top: 30px;
1631
  }
1632
 
1633
  .yui3-calendar-day,
1634
  .yui3-calendar-prevmonth-day,
1635
  .yui3-calendar-nextmonth-day {
1636
    background: transparent;
1637
    border: none;
1638
    font-size: $font-size-md;
1639
  }
1640
 
1641
  .yui3-calendar-day {
1642
    width: 35px;
1643
    height: 35px;
1644
    font-weight: $font-weight-medium;
1645
    font-size: $font-size-md;
1646
 
1647
    &:hover {
1648
      border-radius: $btn-border-radius-lg;
1649
      color: $primary-color-600;
1650
      background: $primary-color-100;
1651
    }
1652
  }
1653
 
1654
  .yui3-calendar-day-selected {
1655
    color: $red-100;
1656
    background: $red-600;
1657
 
1658
    font-weight: $font-weight-bold;
1659
    border-radius: $btn-border-radius-lg;
1660
  }
1661
 
1662
  .yui3-calendar-header-label {
1663
    font-size: $font-size-md;
1664
  }
1665
 
1666
  .yui3-calendar-content {
1667
    padding: 1.5rem;
1668
    background: $container-bg;
1669
    box-shadow: 0 2px 1px rgb(0 0 0 / 9%), 0 4px 2px rgb(0 0 0 / 9%), 0 8px 4px rgb(0 0 0 / 9%), 0 16px 8px rgb(0 0 0 / 9%), 0 32px 16px rgb(0 0 0 / 9%);
1670
 
1671
    border: 0;
1672
    color: $body-color;
1673
    border-radius: $btn-border-radius;
1674
  }
1675
 
1676
  .yui3-calendarnav-prevmonth {
1677
    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='M8.75 12L14.25 7.75V16.25L8.75 12Z' stroke='#{url-friendly-colour($body-color)}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E%0A");
1678
    background-repeat: no-repeat;
1679
    background-position: center;
1680
    border: none;
1681
    width: 40px;
1682
    height: 40px;
1683
 
1684
    top: -10px;
1685
 
1686
    margin-left: 10px;
1687
  }
1688
 
1689
  .yui3-calendarnav-nextmonth {
1690
    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='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E%0A");
1691
    background-repeat: no-repeat;
1692
    background-position: center;
1693
    border: none;
1694
    width: 40px;
1695
    height: 40px;
1696
 
1697
    top: -10px;
1698
    margin-right: 10px;
1699
  }
1700
 
1701
  .yui3-button.closebutton {
1702
    @extend .close;
1703
 
1704
    background-image: none;
1705
    box-shadow: none;
1706
 
1707
    [aria-hidden="true"] {
1708
      display: none;
1709
    }
1710
  }
1711
 
1712
}
1713
 
1714
/* blocks */
1715
.block_calendar_upcoming {
1716
  .event {
1717
    .activityiconcontainer {
1718
      display: inline-flex;
1719
      justify-content: center;
1720
      align-items: center;
1721
    }
1722
  }
1723
 
1724
  [data-type="event"] {
1725
    font-size: $font-size-sm;
1726
    font-weight: $font-weight-medium;
1727
    line-height: 1.4;
1728
    color: $body-color;
1729
 
1730
    margin-top: 0;
1731
 
1732
    .theme-dark & {
1733
      color: $dm-body-color;
1734
    }
1735
 
1736
    &:hover {
1737
      color: $link-color;
1738
 
1739
      .theme-dark & {
1740
        color: $dm-link-color;
1741
      }
1742
    }
1743
  }
1744
 
1745
  .date {
1746
    color: $gray-700;
1747
    font-size: $font-size-xs;
1748
    padding: 0;
1749
 
1750
    .theme-dark & {
1751
      color: $dm-gray-700;
1752
    }
1753
 
1754
    span {
1755
      width: 100%;
1756
      background-color: transparent;
1757
    }
1758
 
1759
    a {
1760
      color: $gray-700;
1761
 
1762
      .theme-dark & {
1763
        color: $dm-gray-700;
1764
      }
1765
    }
1766
  }
1767
 
1768
}
1769
 
1770
.maincalendar {
1771
  .event {
1772
    background-color: $gray-100;
1773
    padding: 2 * $spacer;
1774
    margin-bottom: 2 * $spacer;
1775
 
1776
    border-radius: $btn-border-radius;
1777
 
1778
    .theme-dark & {
1779
      background-color: $dm-gray-100;
1780
    }
1781
  }
1782
}
1783
 
1784
/* day view */
1785
.calendar-event-box {
1786
  padding: 20px;
1787
  position: relative;
1788
 
1789
  border: 1px solid $border-color;
1790
  border-radius: $btn-border-radius;
1791
 
1792
  .theme-dark & {
1793
    border: 1px solid $dm-border-color;
1794
  }
1795
 
1796
  .calendar-event-settings {
1797
    position: absolute;
1798
 
1799
    @include media-breakpoint-up(md) {
1800
      top: 20px;
1801
      left: auto;
1802
      right: 20px;
1803
    }
1804
 
1805
    @include media-breakpoint-between(xs,sm) {
1806
      top: 10px;
1807
      left: auto;
1808
      right: 10px;
1809
    }
1810
  }
1811
 
1812
  &:last-child {
1813
    margin-bottom: 0;
1814
  }
1815
 
1816
  .calendar-event-date {
1817
 
1818
    font-weight: $font-weight-bold;
1819
    color: $body-color-secondary;
1820
 
1821
    display: inline-flex;
1822
    align-items: center;
1823
 
1824
    position: relative;
1825
 
1826
    @include media-breakpoint-up(md) {
1827
      margin-bottom: 1rem;
1828
      font-size: $font-size-xs;
1829
    }
1830
 
1831
    @include media-breakpoint-between(xs, sm) {
1832
      margin-bottom: 5px;
1833
      font-size: 11px;
1834
    }
1835
 
1836
    .theme-dark & {
1837
      color: $dm-body-color-secondary;
1838
    }
1839
 
1840
    a {
1841
      display: inline-block;
1842
      padding: .35rem .5rem;
1843
      margin: 0 0.5rem 0 0;
1844
      line-height: 1.2;
1845
      color: $gray-900;
1846
      text-align: center;
1847
      vertical-align: baseline;
1848
      @include border-radius();
1849
 
1850
      background-color: $gray-100;
1851
 
1852
      transition: $transition-base;
1853
 
1854
      .theme-dark & {
1855
        color: $dm-gray-900;
1856
        background-color: $dm-gray-100;
1857
      }
1858
 
1859
      &:hover {
1860
        color: $gray-800;
1861
        background-color: $gray-200;
1862
 
1863
        .theme-dark & {
1864
          background-color: $dm-gray-200;
1865
          color: $dm-gray-800;
1866
        }
1867
      }
1868
    }
1869
 
1870
    a,
1871
    strong {
1872
      font-weight: $font-weight-medium;
1873
      color: $body-color !important;
1874
 
1875
      .theme-dark & {
1876
        color: $dm-body-color !important;
1877
      }
1878
    }
1879
 
1880
    .dimmed_text {
1881
      color: $body-color !important;
1882
 
1883
      .theme-dark & {
1884
        color: $dm-body-color !important;
1885
      }
1886
 
1887
      strong {
1888
        font-weight: $font-weight-medium;
1889
      }
1890
 
1891
      a.dimmed {
1892
        font-weight: $font-weight-medium;
1893
        color: $body-color !important;
1894
 
1895
        .theme-dark & {
1896
          color: $dm-body-color !important;
1897
        }
1898
      }
1899
    }
1900
  }
1901
 
1902
  .calendar-event-icon {
1903
    margin-top: 1rem;
1904
 
1905
    display: flex;
1906
    justify-content: center;
1907
    align-content: center;
1908
    border-radius: $btn-border-radius-xl;
1909
  }
1910
 
1911
  .calendar-event-heading {
1912
    font-family: $font-family-base;
1913
    font-weight: $font-weight-bold;
1914
    vertical-align: middle;
1915
    margin: 1rem 0 .5rem;
1916
 
1917
    @include media-breakpoint-up(md) {
1918
      font-size: 1.5rem;
1919
    }
1920
 
1921
    @include media-breakpoint-between(xs, sm) {
1922
      font-size: $font-size-sm;
1923
    }
1924
 
1925
    .block.block_calendar_month & {
1926
      margin-top: 0;
1927
      font-size: $font-size-md;
1928
    }
1929
  }
1930
 
1931
}
1932
 
1933
.calendar-event-icon {
1934
  .calendar-event-row & {
1935
    width: 50px;
1936
    height: 50px;
1937
 
1938
    background-color: $primary-color-100;
1939
    color: $primary-color-800;
1940
    border-radius: $btn-border-radius;
1941
 
1942
    align-items: center;
1943
    justify-content: center;
1944
  }
1945
}
1946
 
1947
.calendar-event-content {
1948
 
1949
  .block.block_calendar_month & {
1950
    padding: 0;
1951
  }
1952
 
1953
  .calendar-event-icon {
1954
    .icon {
1955
      font-size: 1rem;
1956
    }
1957
  }
1958
}
1959
 
1960
.rui-calendar-footer {
1961
  margin-top: 10px;
1962
}
1963
 
1964
.rui-calendar-list {
1965
  margin: 0;
1966
  overflow: hidden;
1967
 
1968
  li {
1969
    width: 100%;
1970
    display: inline-flex;
1971
    align-items: center;
1972
    justify-content: flex-start;
1973
 
1974
    list-style: none;
1975
    font-size: $font-size-xs;
1976
    color: $body-color-secondary;
1977
 
1978
    .theme-dark & {
1979
      color: $dm-body-color-secondary;
1980
    }
1981
 
1982
    .rui-calendar-list-content {
1983
      padding: 5px 0;
1984
 
1985
      .block.block_calendar_month & {
1986
        padding: 8px;
1987
        font-size: $font-size-xs;
1988
      }
1989
 
1990
      &:last-of-type {
1991
        border-bottom: none;
1992
      }
1993
    }
1994
 
1995
    a {
1996
      font-weight: $font-weight-medium;
1997
 
1998
      &:hover {
1999
        color: $primary-color-600;
2000
        text-decoration: none;
2001
 
2002
        .theme-dark & {
2003
          color: $primary-color-200;
2004
        }
2005
      }
2006
    }
2007
 
2008
    .icon {
2009
      color: $body-color-light;
2010
 
2011
      .theme-dark & {
2012
        color: $dm-body-color-light;
2013
      }
2014
    }
2015
  }
2016
}
2017
 
2018
.rui-calendar-list--inline {
2019
  li {
2020
    display: inline-flex;
2021
    align-items: center;
2022
  }
2023
}
2024
 
2025
/* modal */
2026
.modal-cal-desc {
2027
  width: 100%;
2028
}
2029
 
2030
.modal-cal-time {
2031
  font-size: $font-size-xs;
2032
 
2033
  a {
2034
    position: relative;
2035
    display: inline-block;
2036
    padding: 0.35rem 0.85rem;
2037
    margin: 0 .5rem .25rem 0;
2038
    font-size: $font-size-xs;
2039
    color: $gray-900 !important;
2040
    text-align: center;
2041
    vertical-align: baseline;
2042
    @include border-radius();
2043
 
2044
    background-color: $gray-100;
2045
 
2046
    transition: $transition-base;
2047
 
2048
    .theme-dark & {
2049
      color: $dm-gray-900 !important;
2050
      background-color: $dm-gray-100;
2051
    }
2052
 
2053
    &:hover {
2054
      background-color: $gray-200;
2055
      text-decoration: none;
2056
 
2057
      .theme-dark & {
2058
        background-color: $dm-gray-200;
2059
      }
2060
    }
2061
  }
2062
}
2063
 
2064
/* mobile */
2065
@include media-breakpoint-only(sm) {
2066
  .calendarwrapper {
2067
 
2068
    .custom-select {
2069
      width: 100%;
2070
      margin: 0;
2071
    }
2072
 
2073
  }
2074
}
2075
 
2076
/* other */
2077
[data-groupname=timedurationuntil] {
2078
  margin-bottom: 0.25rem !important;
2079
}
2080
 
2081
#page-calendar-view {
2082
  .calendar-event-box .calendar-event-icon {
2083
    img {
2084
      width: auto;
2085
      height: auto;
2086
    }
2087
  }
2088
}
2089
 
2090
.yui3-skin-sam .yui3-calendar-weekday {
2091
  font-size: $font-size-xs;
2092
  font-weight: normal;
2093
  color: $body-color-light;
2094
 
2095
  text-align: center;
2096
 
2097
  .theme-dark & {
2098
    color: $dm-body-color-light;
2099
  }
2100
}
2101
 
2102
@include media-breakpoint-between(xs, sm) {
2103
 
2104
  .rui-cal-header,
2105
  .bottom {
2106
 
2107
    div,
2108
    .btn,
2109
    select {
2110
      width: 100%;
2111
      margin: 0 !important;
2112
    }
2113
 
2114
    .btn,
2115
    select {
2116
      margin: 0 0 .5rem 0 !important;
2117
 
2118
      &:last-of-type {
2119
        margin-bottom: 0;
2120
      }
2121
    }
2122
  }
2123
}
2124
 
2125
.tmpl-course-blocks,
2126
#block-region-dleftblocks,
2127
#block-region-drightblocks,
2128
#block-region-sidecourseblocks,
2129
#block-region-sidebartb,
2130
#block-region-sidebarbb,
2131
#block-region-side-pre {
2132
  .rui-cal-header {
2133
    gap: 10px;
2134
 
2135
    .custom-select,
2136
    .btn {
2137
      width: 100%;
2138
      max-width: 100%;
2139
      margin: 0 0 10px 0 !important;
2140
    }
2141
  }
2142
}
2143
 
2144
 
2145
/* Display month name above the calendar */
2146
table.calendartable caption {
2147
  caption-side: top;
2148
}
2149
 
2150
@mixin day-number-has-event {
2151
  .day-number {
2152
    display: inline-block;
2153
    position: relative;
2154
 
2155
    &:before {
2156
      content: '.';
2157
      display: inline-block;
2158
      position: absolute;
2159
      bottom: 0.4em;
2160
      left: 0;
2161
      text-align: center;
2162
      width: 100%;
2163
      font-size: 3em;
2164
      color: inherit;
2165
    }
2166
  }
2167
}
2168
 
2169
@media (min-width: 768px) {
2170
  #page-calender-view {
2171
    .container-fluid {
2172
      min-width: 1024px;
2173
    }
2174
  }
2175
}
2176
 
2177
@media (min-width: 768px) {
2178
 
2179
  #sidepre-blocks,
2180
  #block-region-sidebartb,
2181
  #block-region-sidebarbb,
2182
  #blocks-dashboardrightblock,
2183
  #blocks-dashboardleftblock,
2184
  #theme-drawers-blocks,
2185
  section:not(#region-main) {
2186
    .block {
2187
      &.block_calendar_month {
2188
        .maincalendar {
2189
          .calendartable {
2190
            &.calendarmonth {
2191
 
2192
              th,
2193
              td {
2194
                border: none;
2195
                text-align: center !important; // stylelint-disable-line declaration-no-important
2196
                padding: 0;
2197
              }
2198
 
2199
              td {
2200
                height: auto !important;
2201
                font-size: 0.8em;
2202
 
2203
                &.hasevent {
2204
                  [data-region="day-content"] {
2205
                    display: none;
2206
                  }
2207
 
2208
                  @include day-number-has-event;
2209
                }
2210
 
2211
                &:after {
2212
                  content: '';
2213
                  display: block;
2214
                  margin-top: calc(100% - 26px);
2215
                }
2216
 
2217
                &.clickable:hover {
2218
                  background-color: inherit;
2219
                }
2220
 
2221
                &.clickable:not(.today):hover {
2222
                  .day-number-circle {
2223
                    border-radius: $btn-border-radius-xl;
2224
                    background-color: $primary-color-100;
2225
 
2226
                    .theme-dark & {
2227
                      background-color: $dm-gray-300;
2228
                    }
2229
                  }
2230
                }
2231
              }
2232
            }
2233
          }
2234
        }
2235
 
2236
        .bottom {
2237
          // This adds a border on the top side of the footer container.
2238
          // So we won't have to add a <hr> element in the footer_options template.
2239
          border-top: $border-width solid $card-border-color;
2240
          padding-top: map-get($spacers, 2);
2241
 
2242
          .theme-dark & {
2243
            border-color: $dm-border-color;
2244
          }
2245
        }
2246
      }
2247
    }
2248
  }
2249
}
2250
 
2251
@media (max-width: 768px) {
2252
  .maincalendar {
2253
    .calendartable {
2254
      &.calendarmonth {
2255
 
2256
        th,
2257
        td {
2258
          border: none;
2259
          text-align: center !important; // stylelint-disable-line declaration-no-important
2260
          padding: 0;
2261
        }
2262
 
2263
        td {
2264
          height: auto;
2265
          font-size: inherit;
2266
          padding: 0;
2267
 
2268
          &.hasevent {
2269
            [data-region="day-content"] {
2270
              display: none;
2271
            }
2272
 
2273
            @include day-number-has-event;
2274
          }
2275
 
2276
          &:after {
2277
            content: '';
2278
            display: block;
2279
            margin-top: calc(100% - 26px);
2280
          }
2281
 
2282
          &>div {
2283
            height: auto !important; // stylelint-disable-line declaration-no-important
2284
          }
2285
        }
2286
      }
2287
    }
2288
  }
2289
}
2290
 
2291
 
2292
@include media-breakpoint-between(xs, md) {
2293
  .maincalendar .calendartable.calendarmonth th {
2294
    font-size: 11px;
2295
  }
2296
}
2297
 
2298
.calendarwrapper {
2299
  position: relative;
2300
}
2301
 
2302
.day-popover-content {
2303
  &:empty+.day-popover-alternate {
2304
    display: block;
2305
  }
2306
}
2307
 
2308
.location-content {
2309
  overflow-wrap: break-word;
2310
}
2311
 
2312
.description-content {
2313
  overflow-wrap: break-word;
2314
  font-size: $font-size-sm;
2315
 
2316
  >p {
2317
    margin: 0;
2318
  }
2319
}
2320
 
2321
.maincalendar .calendar_event_user a:after {
2322
  display: none;
2323
}
2324
 
2325
// Minicalendar event key
2326
.minicalendar-event-type {
2327
  display: flex;
2328
  justify-content: center;
2329
  align-items: stretch;
2330
  flex-wrap: wrap;
2331
  gap: 10px;
2332
 
2333
  #nav-drawer &,
2334
  #blocks-dashboardrightblock &,
2335
  #blocks-dashboardleftblock &,
2336
  #theme-drawers-blocks & {
2337
    display: none;
2338
  }
2339
 
2340
  li {
2341
    font-size: $font-size-xs;
2342
    color: #212121;
2343
    padding: 3px 7px !important;
2344
    margin: 0 !important;
2345
  }
2346
 
2347
  span:first-letter {
2348
    text-transform: uppercase
2349
  }
2350
}
2351
 
2352
.footer .bottom {
2353
  justify-content: center;
2354
  align-items: stretch;
2355
  grid-template-columns: repeat(auto-fill, minmax(49%, 1fr));
2356
  display: grid;
2357
  gap: 10px;
2358
}
2359
 
2360
#sidepre-blocks,
2361
#block-region-sidebartb,
2362
#block-region-sidebarbb,
2363
#blocks-dashboardrightblock,
2364
#blocks-dashboardleftblock,
2365
#theme-drawers-blocks {
2366
  .maincalendar .calendartable.calendarmonth th {
2367
    font-size: 11px;
2368
    font-weight: $font-weight-medium;
2369
  }
2370
 
2371
  .block .calendar-controls .current {
2372
    font-size: $font-size-md;
2373
  }
2374
 
2375
  .minicalendar-event-type {
2376
    justify-content: flex-start;
2377
    gap: 4px;
2378
  }
2379
 
2380
  .block_calendar_month {
2381
    .card-body .footer a {
2382
      margin: 2px 0;
2383
    }
2384
  }
2385
}