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: var(--primary-color-700);
253
    }
254
 
255
  }
256
 
257
  .badge-special {
258
    background-color: var(--primary-color-700);
259
    color: var(--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: 10px;
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 var(--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: none;
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
        #block-region-sidecourseblocks &,
788
        #block-region-side-pre & {
789
          margin: 1px;
790
          padding: 1px;
791
          width: 7px;
792
          height: 14px;
793
          display: inline-flex;
794
          text-indent: -999px;
795
        }
796
 
797
        .small {
798
          color: $body-color-secondary;
799
        }
800
 
801
        >a {
802
          padding: 0;
803
          border-radius: $btn-border-radius;
804
          max-width: 100%;
805
          display: block;
806
          color: $body-color-secondary;
807
 
808
          #block-region-sidecourseblocks &,
809
          #block-region-side-pre & {
810
            width: 10px;
811
            height: 10px;
812
            padding: 0;
813
          }
814
 
815
          &:hover {
816
            text-decoration: none;
817
          }
818
 
819
          >div,
820
          span {
821
 
822
            #block-region-sidecourseblocks &,
823
            #block-region-side-pre & {
824
              display: none !important;
825
            }
826
          }
827
        }
828
 
829
        &:last-child {
830
          margin-bottom: 0;
831
        }
832
 
833
        img {
834
          max-width: 100%;
835
          width: 100%;
836
          margin: 0.25rem 0 0;
837
          border-radius: $btn-border-radius;
838
        }
839
 
840
        .icon {
841
          margin: 0 0.25rem 0 0;
842
          padding: 5px;
843
          display: inline-flex;
844
          width: 20px;
845
          height: 20px;
846
 
847
          background-color: $gray-100;
848
          border-radius: $btn-border-radius;
849
 
850
          color: $gray-800;
851
 
852
          .theme-dark & {
853
            background-color: $dm-gray-100;
854
            color: $dm-gray-800;
855
          }
856
 
857
        }
858
 
859
        span {
860
          display: block;
861
          margin-bottom: 0;
862
 
863
          font-weight: $font-weight-medium;
864
          color: $body-color;
865
        }
866
 
867
      }
868
    }
869
 
870
    td {
871
      padding: 5px;
872
      height: 40px;
873
      border: 1px solid $border-color;
874
      font-size: $font-size-md;
875
      transition: $transition-base;
876
 
877
      .theme-dark & {
878
        border: 1px solid $dm-border-color;
879
      }
880
 
881
      a.day:focus {
882
        display: inline-block;
883
        border-radius: $btn-border-radius-xl;
884
      }
885
 
886
      .day-number-circle {
887
        display: inline-block;
888
        line-height: 0;
889
        width: 30px;
890
        height: 30px;
891
 
892
        .day-number {
893
          display: inline-block;
894
          padding: 50% 4px;
895
          width: 100%;
896
          text-align: center;
897
 
898
          @include media-breakpoint-between(xs, md) {
899
            font-size: 11px;
900
          }
901
        }
902
      }
903
 
904
      &.today {
905
        .day-number-circle {
906
          border-radius: $btn-border-radius;
907
          color: $calendarCurrentDateColor;
908
          background-color: $calendarCurrentDateBackground;
909
        }
910
      }
911
 
912
    }
913
  }
914
 
915
  .calendarmonth {
916
    th.header {
917
      padding: 1rem 16px;
918
      font-size: $font-size-xs;
919
      font-weight: $font-weight-bold;
920
 
921
      text-align: right;
922
 
923
      border: 0;
924
      color: $gray-900;
925
 
926
      .theme-dark & {
927
        color: $dm-gray-900;
928
      }
929
 
930
      #block-region-dleftblocks &,
931
      #block-region-drightblocks &,
932
      #block-region-sidecourseblocks &,
933
      #block-region-side-pre & {
934
        padding: 5px 2px;
935
        font-size: $font-size-xs;
936
      }
937
 
938
      @include media-breakpoint-between(sm, md) {
939
        padding: 5px 0;
940
        font-size: $font-size-md;
941
      }
942
    }
943
 
944
    td,
945
    th {
946
      border-style: solid;
947
    }
948
  }
949
 
950
  .calendar-controls {
951
    .current {
952
      margin-bottom: 0;
953
      @include media-breakpoint-between(xs,sm) {
954
      font-size: $font-size-xs;
955
      }
956
    }
957
  }
958
 
959
  .controls {
960
    width: 100%;
961
    margin: 10px auto;
962
  }
963
 
964
  .calendar_event_category {
965
    background-color: $calendarEventCategoryColor;
966
  }
967
 
968
  .calendar_event_course {
969
    background-color: $calendarEventCourseColor;
970
  }
971
 
972
  .calendar_event_site {
973
    background-color: $calendarEventGlobalColor;
974
  }
975
 
976
  .calendar_event_group {
977
    background-color: $calendarEventGroupColor;
978
  }
979
 
980
  .calendar_event_user {
981
    background-color: $calendarEventUserColor;
982
  }
983
 
984
  .calendartable {
985
    li {
986
      text-align: left;
987
    }
988
  }
989
 
990
  .header {
991
    .buttons {
992
      float: right;
993
    }
994
  }
995
 
996
  .event .card-header img {
997
    vertical-align: baseline;
998
  }
999
 
1000
}
1001
 
1002
 
1003
#page-calendar-view .maincalendar .calendarmonth td {
1004
  height: 5rem;
1005
 
1006
  @include media-breakpoint-between(xs, sm) {
1007
    height: 60px;
1008
  }
1009
}
1010
 
1011
 
1012
// Dark mode.
1013
.theme-dark .maincalendar .calendarmonth th.header {
1014
  border-color: $dm-border-color;
1015
  color: $dm-body-color;
1016
 
1017
}
1018
 
1019
.dir-rtl.theme-dark .calendar-controls .next,
1020
.theme-dark .calendar-controls .previous {
1021
  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");
1022
}
1023
 
1024
.dir-rtl.theme-dark .calendar-controls .previous,
1025
.theme-dark .calendar-controls .next {
1026
  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");
1027
}
1028
 
1029
// End.
1030
 
1031
.eventlist {
1032
  position: relative;
1033
  grid-template-columns: repeat(auto-fill, minmax(49%, 1fr));
1034
  gap: 20px;
1035
  display: grid;
1036
  align-items: stretch;
1037
 
1038
  .calendar-event-box {
1039
    background-color: $container-bg;
1040
 
1041
    @include media-breakpoint-up(md) {
1042
      padding: 20px 20px 20px 70px;
1043
    }
1044
 
1045
    @include media-breakpoint-between(xs, sm) {
1046
      padding: 60px 16px 16px 16px;
1047
    }
1048
 
1049
    .rui-blocks-area & {
1050
      padding: 10px;
1051
    }
1052
 
1053
    .theme-dark & {
1054
      background-color: $dm-gray-100;
1055
    }
1056
  }
1057
 
1058
  .calendar_event_category,
1059
  .calendar_event_course,
1060
  .calendar_event_expectcompletionon,
1061
  .calendar_event_open,
1062
  .calendar-event-box[data-event-component^="mod_"],
1063
  .calendar_event_close,
1064
  .calendar_event_due,
1065
  .calendar_event_site,
1066
  .calendar_event_group,
1067
  .calendar_event_user {
1068
    &:before {
1069
      content: '';
1070
      position: absolute;
1071
      @include media-breakpoint-up(md) {
1072
        top: 24px;
1073
      }
1074
 
1075
      @include media-breakpoint-between(xs,sm) {
1076
        top: 14px;
1077
      }
1078
      left: 16px;
1079
 
1080
      width: 40px;
1081
      height: 20px;
1082
      border-radius: $btn-border-radius-lg;
1083
 
1084
    }
1085
  }
1086
 
1087
  .calendar_event_category {
1088
    &:before {
1089
      background-color: $calendarEventCategoryColor;
1090
    }
1091
  }
1092
 
1093
  [data-event-component^="mod_"],
1094
  .calendar_event_course {
1095
    &:before {
1096
      background-color: $calendarEventCourseColor;
1097
    }
1098
  }
1099
 
1100
 
1101
  .calendar_event_site {
1102
    &:before {
1103
      background-color: $calendarEventGlobalColor;
1104
    }
1105
  }
1106
 
1107
  .calendar_event_group {
1108
    &:before {
1109
      background-color: $calendarEventGroupColor;
1110
    }
1111
  }
1112
 
1113
  .calendar_event_user {
1114
    &:before {
1115
      background-color: $calendarEventUserColor;
1116
    }
1117
  }
1118
 
1119
  .calendar_event_other {
1120
    &:before {
1121
      background-color: $calendarEventOtherColor;
1122
    }
1123
  }
1124
}
1125
 
1126
 
1127
.maincalendar {
1128
 
1129
  .calendarmonth {
1130
    a[data-action="view-event"]::after {
1131
      display: none;
1132
    }
1133
 
1134
    td {
1135
      position: relative;
1136
 
1137
      [data-action="view-day-link"] {
1138
        font-weight: $font-weight-bold;
1139
        text-align: center;
1140
        line-height: 190%;
1141
 
1142
        position: relative;
1143
      }
1144
 
1145
      &.today {
1146
 
1147
        .calendar-day-label {
1148
          padding: 0;
1149
          display: block;
1150
 
1151
          background: $red-600;
1152
          border-radius: $btn-border-radius;
1153
          color: $red-200;
1154
          width: 30px;
1155
          height: 30px;
1156
 
1157
 
1158
          font-weight: $font-weight-bold;
1159
          text-align: center;
1160
          line-height: 190%;
1161
 
1162
          position: relative;
1163
          top: -2px;
1164
        }
1165
 
1166
      }
1167
 
1168
    }
1169
  }
1170
}
1171
 
1172
 
1173
.calendar-day-label {
1174
  padding: 20px 20px 20px 0;
1175
  font-size: 1rem;
1176
  font-weight: $font-weight-base;
1177
  color: $gray-700;
1178
 
1179
  .theme-dark & {
1180
    color: $dm-gray-700;
1181
  }
1182
}
1183
 
1184
.calendar-event-description {
1185
  color: $body-color-secondary;
1186
 
1187
  @include media-breakpoint-up(md) {
1188
    font-size: $font-size-md;
1189
  }
1190
 
1191
  @include media-breakpoint-between(xs,sm) {
1192
    font-size: $font-size-xs;
1193
  }
1194
 
1195
  .theme-dark & {
1196
    color: $dm-body-color-secondary;
1197
  }
1198
}
1199
 
1200
// Calendar export.
1201
#page-calendar-export {
1202
  .indent {
1203
    padding-left: 20px;
1204
  }
1205
}
1206
 
1207
// Block minicalendar.
1208
.block {
1209
 
1210
  .calendarwrapper {
1211
    margin: 1rem 0;
1212
 
1213
    &:last-child {
1214
      margin-bottom: 0;
1215
    }
1216
  }
1217
 
1218
  .minicalendar {
1219
    width: 100%;
1220
 
1221
    h3,
1222
    .current {
1223
      margin: 0;
1224
      font-family: $font-family-base;
1225
      font-size: $font-size-md;
1226
      color: $body-color-secondary;
1227
      text-align: left;
1228
 
1229
      .theme-dark & {
1230
        color: $dm-body-color-secondary;
1231
      }
1232
 
1233
      a {
1234
        display: block;
1235
        text-decoration: none;
1236
        color: inherit;
1237
 
1238
        &:hover {
1239
          text-decoration: none;
1240
        }
1241
      }
1242
    }
1243
 
1244
    h4.current {
1245
      @include media-breakpoint-up(md) {
1246
        font-size: $font-size-md;
1247
      }
1248
 
1249
      @include media-breakpoint-between(xs, sm) {
1250
        font-size: $font-size-xs;
1251
      }
1252
    }
1253
 
1254
    .arrow_link {
1255
      color: $body-color-secondary;
1256
      text-decoration: none;
1257
 
1258
      .theme-dark & {
1259
        color: $dm-body-color-secondary;
1260
      }
1261
 
1262
      &:hover {
1263
        text-decoration: none;
1264
      }
1265
    }
1266
 
1267
    td {
1268
      padding: 0 !important;
1269
      height: 27px;
1270
      width: 28px;
1271
      border-radius: $btn-border-radius;
1272
 
1273
      font-weight: $font-weight-medium;
1274
      line-height: 2.5;
1275
 
1276
      a {
1277
        padding: 8px;
1278
        text-decoration: none;
1279
 
1280
        &:hover {
1281
          text-decoration: none;
1282
        }
1283
      }
1284
    }
1285
 
1286
    .today {
1287
      background: $red-600;
1288
      color: $red-200;
1289
 
1290
      a {
1291
        color: $red-200 !important;
1292
      }
1293
    }
1294
 
1295
    th {
1296
      color: $body-color;
1297
      font-size: $font-size-xs;
1298
      font-weight: $font-weight-medium;
1299
 
1300
      .theme-dark & {
1301
        color: $dm-body-color;
1302
      }
1303
 
1304
      abbr[title],
1305
      abbr[data-original-title] {
1306
        white-space: nowrap;
1307
        text-decoration: none;
1308
      }
1309
 
1310
    }
1311
 
1312
    th,
1313
    td {
1314
      font-size: $font-size-xs;
1315
      text-align: center;
1316
    }
1317
 
1318
    td {
1319
      &.weekend {
1320
        @extend .text-muted;
1321
      }
1322
 
1323
      &.duration_global {
1324
        border-top: 1px solid $calendarEventGlobalColor;
1325
        border-bottom: 1px solid $calendarEventGlobalColor;
1326
 
1327
        &.duration_finish {
1328
          background-color: $calendarEventGlobalColor;
1329
        }
1330
      }
1331
 
1332
      &.duration_category {
1333
        border-top: 1px solid $calendarEventCategoryColor;
1334
        border-bottom: 1px solid $calendarEventCategoryColor;
1335
 
1336
        &.duration_finish {
1337
          background-color: $calendarEventCategoryColor;
1338
        }
1339
      }
1340
 
1341
      &.duration_course {
1342
        border-top: 1px solid $calendarEventCourseColor;
1343
        border-bottom: 1px solid $calendarEventCourseColor;
1344
 
1345
        &.duration_finish {
1346
          background-color: $calendarEventCourseColor;
1347
        }
1348
      }
1349
 
1350
      &.duration_group {
1351
        border-top: 1px solid $calendarEventGroupColor;
1352
        border-bottom: 1px solid $calendarEventGroupColor;
1353
 
1354
        &.duration_finish {
1355
          background-color: $calendarEventGroupColor;
1356
        }
1357
      }
1358
 
1359
      &.duration_user {
1360
        border-top: 1px solid $calendarEventUserColor;
1361
        border-bottom: 1px solid $calendarEventUserColor;
1362
 
1363
        &.duration_finish {
1364
          background-color: $calendarEventUserColor;
1365
        }
1366
      }
1367
    }
1368
 
1369
    caption {
1370
      padding: 10px 0;
1371
      margin-bottom: 10px;
1372
      display: table-caption;
1373
      font-size: inherit;
1374
      font-weight: inherit;
1375
      line-height: inherit;
1376
 
1377
      font-family: $font-family-base;
1378
      color: $body-color-secondary;
1379
      text-align: left;
1380
 
1381
      position: relative;
1382
 
1383
      .theme-dark & {
1384
        color: $dm-body-color-secondary;
1385
      }
1386
    }
1387
  }
1388
 
1389
  .calendar-controls {
1390
 
1391
    .previous,
1392
    .next {
1393
      .arrow {
1394
        color: transparent;
1395
      }
1396
    }
1397
 
1398
    .previous {
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($body-color)}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E%0A");
1400
      background-repeat: no-repeat;
1401
      background-position: center;
1402
      left: 0;
1403
 
1404
      .theme-dark & {
1405
        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");
1406
      }
1407
    }
1408
 
1409
    .current {
1410
      display: block;
1411
      text-align: left;
1412
      width: auto;
1413
      margin: 5px 0;
1414
 
1415
      .block.block_calendar_month & {
1416
        font-size: $font-size-sm;
1417
      }
1418
    }
1419
 
1420
    .next {
1421
      right: 0;
1422
      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");
1423
      background-repeat: no-repeat;
1424
      background-position: center;
1425
 
1426
      .theme-dark & {
1427
        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");
1428
      }
1429
    }
1430
  }
1431
 
1432
  .calendar_filters {
1433
    ul {
1434
      list-style: none;
1435
      margin: 0;
1436
      padding: 0;
1437
    }
1438
 
1439
    li {
1440
      margin-bottom: 0.5rem;
1441
 
1442
      &:last-of-type {
1443
        margin-bottom: 0;
1444
      }
1445
 
1446
      >a {
1447
        &:hover {
1448
          text-decoration: none;
1449
        }
1450
      }
1451
    }
1452
  }
1453
 
1454
  .content {
1455
    h3 {
1456
      &.eventskey {
1457
        margin-top: 0.5em;
1458
      }
1459
    }
1460
  }
1461
}
1462
 
1463
 
1464
.dir-rtl {
1465
  .block .calendar-controls .previous .block .calendar-controls .next {
1466
    transform: rotate(180deg);
1467
  }
1468
}
1469
 
1470
.maincalendar .calendar_event_course a:after {
1471
  display: none;
1472
}
1473
 
1474
.calendar_filters [data-action=filter-event-type] {
1475
 
1476
  [data-event-component^="mod_"],
1477
  .calendar_event_other,
1478
  .calendar_event_category,
1479
  .calendar_event_course,
1480
  .calendar_event_site,
1481
  .calendar_event_group,
1482
  .calendar_event_user {
1483
    display: flex;
1484
    align-items: center;
1485
    justify-content: center;
1486
 
1487
    padding: 2px;
1488
    width: 36px;
1489
    height: 36px;
1490
    border-radius: $btn-border-radius-lg;
1491
    margin-right: 10px;
1492
 
1493
    color: $body-color;
1494
 
1495
    .icon {
1496
      opacity: .6;
1497
    }
1498
  }
1499
 
1500
  .event-icon {
1501
    .rui-icon-container {
1502
      display: inline-flex;
1503
      align-items: center;
1504
      margin-right: .5rem;
1505
 
1506
      .icon {
1507
        .theme-dark & {
1508
          filter: invert(1);
1509
        }
1510
      }
1511
    }
1512
  }
1513
 
1514
  .eventname,
1515
  .event-icon {
1516
    display: inline-flex;
1517
 
1518
    #nav-drawer & {
1519
      margin: 0 6px;
1520
    }
1521
  }
1522
 
1523
  .eventname {
1524
    width: calc(100% - 80px);
1525
    color: $body-color;
1526
    font-size: $font-size-xs;
1527
    font-weight: $font-weight-medium;
1528
 
1529
    .theme-dark & {
1530
      color: $dm-body-color;
1531
    }
1532
  }
1533
 
1534
}
1535
 
1536
.maincalendar .calendarmonth ul li .event-time {
1537
  display: inline-flex;
1538
  flex-wrap: wrap;
1539
  gap: 3px;
1540
 
1541
  padding: 3px 8px;
1542
  border-radius: $btn-border-radius-sm;
1543
 
1544
  background-color: $container-bg;
1545
  color: $body-color-secondary;
1546
 
1547
  .theme-dark & {
1548
    background-color: $dm-container-bg;
1549
    color: $dm-body-color-secondary;
1550
  }
1551
 
1552
  a.dimmed:link {
1553
    color: inherit!important;
1554
    line-height: 1.1;
1555
 
1556
    &:hover {
1557
      color: $link-hover-color!important;
1558
    }
1559
  }
1560
}
1561
 
1562
.maincalendar .calendarmonth ul li .event-time,
1563
.maincalendar .calendarmonth ul li .event-time span {
1564
  font-size: $font-size-xs;
1565
  font-weight: $font-weight-medium;
1566
  color: inherit;
1567
}
1568
 
1569
.event-title {
1570
  font-size: $font-size-sm;
1571
  font-weight: $font-weight-medium;
1572
  line-height: 1.3;
1573
  margin-top: 5px;
1574
  margin-bottom: 5px;
1575
}
1576
 
1577
/* Display month name above the calendar */
1578
table.calendartable caption {
1579
  caption-side: top;
1580
}
1581
 
1582
@media (min-width: 768px) {
1583
  #page-calender-view {
1584
    .container-fluid {
1585
      min-width: 1024px;
1586
    }
1587
  }
1588
}
1589
 
1590
.calendarwrapper {
1591
  position: relative;
1592
 
1593
  label {
1594
    margin: 0 !important;
1595
  }
1596
}
1597
 
1598
.day-popover-content {
1599
  &:empty+.day-popover-alternate {
1600
    display: block;
1601
  }
1602
}
1603
 
1604
.summary-modal-container {
1605
  .description-content {
1606
    >p {
1607
      margin: 0;
1608
    }
1609
  }
1610
}
1611
 
1612
 
1613
/* Custom YUI CSS for the theme */
1614
.yui3-skin-sam {
1615
  .yui3-calendar-header {
1616
    display: block;
1617
    width: 300px;
1618
 
1619
    padding-bottom: 1rem;
1620
    margin-bottom: 1rem;
1621
    margin-left: -1.5rem;
1622
    margin-right: -1.5rem;
1623
 
1624
    border-bottom: 1px solid $border-color;
1625
 
1626
    .theme-dark & {
1627
      border-bottom: 1px solid $dm-border-color;
1628
    }
1629
  }
1630
 
1631
 
1632
  .dateselector-calendar-panel {
1633
    top: 30px;
1634
  }
1635
 
1636
  .yui3-calendar-day,
1637
  .yui3-calendar-prevmonth-day,
1638
  .yui3-calendar-nextmonth-day {
1639
    background: transparent;
1640
    border: none;
1641
    font-size: $font-size-md;
1642
  }
1643
 
1644
  .yui3-calendar-day {
1645
    width: 35px;
1646
    height: 35px;
1647
    font-weight: $font-weight-medium;
1648
    font-size: $font-size-md;
1649
 
1650
    &:hover {
1651
      border-radius: $btn-border-radius-lg;
1652
      color: var(--main-theme-color);
1653
      background: var(--primary-color-100);
1654
    }
1655
  }
1656
 
1657
  .yui3-calendar-day-selected {
1658
    color: $red-100;
1659
    background: $red-600;
1660
 
1661
    font-weight: $font-weight-bold;
1662
    border-radius: $btn-border-radius-lg;
1663
  }
1664
 
1665
  .yui3-calendar-header-label {
1666
    font-size: $font-size-md;
1667
  }
1668
 
1669
  .yui3-calendar-content {
1670
    padding: 1.5rem;
1671
    background: $container-bg;
1672
    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%);
1673
 
1674
    border: 0;
1675
    color: $body-color;
1676
    border-radius: $btn-border-radius;
1677
  }
1678
 
1679
  .yui3-calendarnav-prevmonth {
1680
    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");
1681
    background-repeat: no-repeat;
1682
    background-position: center;
1683
    border: none;
1684
    width: 40px;
1685
    height: 40px;
1686
 
1687
    top: -10px;
1688
 
1689
    margin-left: 10px;
1690
  }
1691
 
1692
  .yui3-calendarnav-nextmonth {
1693
    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");
1694
    background-repeat: no-repeat;
1695
    background-position: center;
1696
    border: none;
1697
    width: 40px;
1698
    height: 40px;
1699
 
1700
    top: -10px;
1701
    margin-right: 10px;
1702
  }
1703
 
1704
  .yui3-button.closebutton {
1705
    @extend .close;
1706
 
1707
    background-image: none;
1708
    box-shadow: none;
1709
 
1710
    [aria-hidden="true"] {
1711
      display: none;
1712
    }
1713
  }
1714
 
1715
}
1716
 
1717
/* blocks */
1718
.block_calendar_upcoming {
1719
  .event {
1720
    .activityiconcontainer {
1721
      display: inline-flex;
1722
      justify-content: center;
1723
      align-items: center;
1724
    }
1725
  }
1726
 
1727
  [data-type="event"] {
1728
    font-size: $font-size-sm;
1729
    font-weight: $font-weight-medium;
1730
    line-height: 1.4;
1731
    color: $body-color;
1732
 
1733
    margin-top: 0;
1734
 
1735
    .theme-dark & {
1736
      color: $dm-body-color;
1737
    }
1738
 
1739
    &:hover {
1740
      color: $link-color;
1741
 
1742
      .theme-dark & {
1743
        color: $dm-link-color;
1744
      }
1745
    }
1746
  }
1747
 
1748
  .date {
1749
    color: $gray-700;
1750
    font-size: $font-size-xs;
1751
    padding: 0;
1752
 
1753
    .theme-dark & {
1754
      color: $dm-gray-700;
1755
    }
1756
 
1757
    span {
1758
      width: 100%;
1759
      background-color: transparent;
1760
    }
1761
 
1762
    a {
1763
      color: $gray-700;
1764
 
1765
      .theme-dark & {
1766
        color: $dm-gray-700;
1767
      }
1768
    }
1769
  }
1770
 
1771
}
1772
 
1773
.maincalendar {
1774
  .event {
1775
    background-color: $gray-100;
1776
    padding: 2 * $spacer;
1777
    margin-bottom: 2 * $spacer;
1778
 
1779
    border-radius: $btn-border-radius;
1780
 
1781
    .theme-dark & {
1782
      background-color: $dm-gray-100;
1783
    }
1784
  }
1785
}
1786
 
1787
/* day view */
1788
.calendar-event-box {
1789
  padding: 20px;
1790
  position: relative;
1791
 
1792
  border: 1px solid $border-color;
1793
  border-radius: $btn-border-radius;
1794
 
1795
  .theme-dark & {
1796
    border: 1px solid $dm-border-color;
1797
  }
1798
 
1799
  .calendar-event-settings {
1800
    position: absolute;
1801
 
1802
    @include media-breakpoint-up(md) {
1803
      top: 20px;
1804
      left: auto;
1805
      right: 20px;
1806
    }
1807
 
1808
    @include media-breakpoint-between(xs,sm) {
1809
      top: 10px;
1810
      left: auto;
1811
      right: 10px;
1812
    }
1813
  }
1814
 
1815
  &:last-child {
1816
    margin-bottom: 0;
1817
  }
1818
 
1819
  .calendar-event-date {
1820
 
1821
    font-weight: $font-weight-bold;
1822
    color: $body-color-secondary;
1823
 
1824
    display: inline-flex;
1825
    align-items: center;
1826
 
1827
    position: relative;
1828
 
1829
    @include media-breakpoint-up(md) {
1830
      margin-bottom: 1rem;
1831
      font-size: $font-size-xs;
1832
    }
1833
 
1834
    @include media-breakpoint-between(xs, sm) {
1835
      margin-bottom: 5px;
1836
      font-size: 11px;
1837
    }
1838
 
1839
    .theme-dark & {
1840
      color: $dm-body-color-secondary;
1841
    }
1842
 
1843
    a {
1844
      display: inline-block;
1845
      padding: .35rem .5rem;
1846
      margin: 0 0.5rem 0 0;
1847
      line-height: 1.2;
1848
      color: $gray-900;
1849
      text-align: center;
1850
      vertical-align: baseline;
1851
      @include border-radius();
1852
 
1853
      background-color: $gray-100;
1854
 
1855
      transition: $transition-base;
1856
 
1857
      .theme-dark & {
1858
        color: $dm-gray-900;
1859
        background-color: $dm-gray-100;
1860
      }
1861
 
1862
      &:hover {
1863
        color: $gray-800;
1864
        background-color: $gray-200;
1865
 
1866
        .theme-dark & {
1867
          background-color: $dm-gray-200;
1868
          color: $dm-gray-800;
1869
        }
1870
      }
1871
    }
1872
 
1873
    a,
1874
    strong {
1875
      font-weight: $font-weight-medium;
1876
      color: $body-color !important;
1877
 
1878
      .theme-dark & {
1879
        color: $dm-body-color !important;
1880
      }
1881
    }
1882
 
1883
    .dimmed_text {
1884
      color: $body-color !important;
1885
 
1886
      .theme-dark & {
1887
        color: $dm-body-color !important;
1888
      }
1889
 
1890
      strong {
1891
        font-weight: $font-weight-medium;
1892
      }
1893
 
1894
      a.dimmed {
1895
        font-weight: $font-weight-medium;
1896
        color: $body-color !important;
1897
 
1898
        .theme-dark & {
1899
          color: $dm-body-color !important;
1900
        }
1901
      }
1902
    }
1903
  }
1904
 
1905
  .calendar-event-icon {
1906
    margin-top: 1rem;
1907
 
1908
    display: flex;
1909
    justify-content: center;
1910
    align-content: center;
1911
    border-radius: $btn-border-radius-xl;
1912
  }
1913
 
1914
  .calendar-event-heading {
1915
    font-family: $font-family-base;
1916
    font-weight: $font-weight-bold;
1917
    vertical-align: middle;
1918
    margin: 1rem 0 .5rem;
1919
 
1920
    @include media-breakpoint-up(md) {
1921
      font-size: 1.5rem;
1922
    }
1923
 
1924
    @include media-breakpoint-between(xs, sm) {
1925
      font-size: $font-size-sm;
1926
    }
1927
 
1928
    .block.block_calendar_month & {
1929
      margin-top: 0;
1930
      font-size: $font-size-md;
1931
    }
1932
  }
1933
 
1934
}
1935
 
1936
.calendar-event-icon {
1937
  .calendar-event-row & {
1938
    width: 50px;
1939
    height: 50px;
1940
 
1941
    background-color: var(--primary-color-100);
1942
    color: var(--primary-color-800);
1943
    border-radius: $btn-border-radius;
1944
 
1945
    align-items: center;
1946
    justify-content: center;
1947
  }
1948
}
1949
 
1950
.calendar-event-content {
1951
 
1952
  .block.block_calendar_month & {
1953
    padding: 0;
1954
  }
1955
 
1956
  .calendar-event-icon {
1957
    .icon {
1958
      font-size: 1rem;
1959
    }
1960
  }
1961
}
1962
 
1963
.rui-calendar-footer {
1964
  margin-top: 10px;
1965
}
1966
 
1967
.rui-calendar-list {
1968
  margin: 0;
1969
  overflow: hidden;
1970
 
1971
  li {
1972
    width: 100%;
1973
    display: inline-flex;
1974
    align-items: center;
1975
    justify-content: flex-start;
1976
 
1977
    list-style: none;
1978
    font-size: $font-size-xs;
1979
    color: $body-color-secondary;
1980
 
1981
    .theme-dark & {
1982
      color: $dm-body-color-secondary;
1983
    }
1984
 
1985
    .rui-calendar-list-content {
1986
      padding: 5px 0;
1987
 
1988
      .block.block_calendar_month & {
1989
        padding: 8px;
1990
        font-size: $font-size-xs;
1991
      }
1992
 
1993
      &:last-of-type {
1994
        border-bottom: none;
1995
      }
1996
    }
1997
 
1998
    a {
1999
      font-weight: $font-weight-medium;
2000
 
2001
      &:hover {
2002
        color: var(--main-theme-color);
2003
        text-decoration: none;
2004
 
2005
        .theme-dark & {
2006
          color: var(--primary-color-200);
2007
        }
2008
      }
2009
    }
2010
 
2011
    .icon {
2012
      color: $body-color-light;
2013
 
2014
      .theme-dark & {
2015
        color: $dm-body-color-light;
2016
      }
2017
    }
2018
  }
2019
}
2020
 
2021
.rui-calendar-list--inline {
2022
  li {
2023
    display: inline-flex;
2024
    align-items: center;
2025
  }
2026
}
2027
 
2028
/* modal */
2029
.modal-cal-desc {
2030
  width: 100%;
2031
}
2032
 
2033
.modal-cal-time {
2034
  font-size: $font-size-xs;
2035
 
2036
  a {
2037
    position: relative;
2038
    display: inline-block;
2039
    padding: 0.35rem 0.85rem;
2040
    margin: 0 .5rem .25rem 0;
2041
    font-size: $font-size-xs;
2042
    color: $gray-900 !important;
2043
    text-align: center;
2044
    vertical-align: baseline;
2045
    @include border-radius();
2046
 
2047
    background-color: $gray-100;
2048
 
2049
    transition: $transition-base;
2050
 
2051
    .theme-dark & {
2052
      color: $dm-gray-900 !important;
2053
      background-color: $dm-gray-100;
2054
    }
2055
 
2056
    &:hover {
2057
      background-color: $gray-200;
2058
      text-decoration: none;
2059
 
2060
      .theme-dark & {
2061
        background-color: $dm-gray-200;
2062
      }
2063
    }
2064
  }
2065
}
2066
 
2067
/* mobile */
2068
@include media-breakpoint-only(sm) {
2069
  .calendarwrapper {
2070
 
2071
    .custom-select {
2072
      width: 100%;
2073
      margin: 0;
2074
    }
2075
 
2076
  }
2077
}
2078
 
2079
/* other */
2080
[data-groupname=timedurationuntil] {
2081
  margin-bottom: 0.25rem !important;
2082
}
2083
 
2084
#page-calendar-view {
2085
  .calendar-event-box .calendar-event-icon {
2086
    img {
2087
      width: auto;
2088
      height: auto;
2089
    }
2090
  }
2091
}
2092
 
2093
.yui3-skin-sam .yui3-calendar-weekday {
2094
  font-size: $font-size-xs;
2095
  font-weight: normal;
2096
  color: $body-color-light;
2097
 
2098
  text-align: center;
2099
 
2100
  .theme-dark & {
2101
    color: $dm-body-color-light;
2102
  }
2103
}
2104
 
2105
@include media-breakpoint-between(xs, sm) {
2106
 
2107
  .rui-cal-header,
2108
  .bottom {
2109
 
2110
    div,
2111
    .btn,
2112
    select {
2113
      width: 100%;
2114
      margin: 0 !important;
2115
    }
2116
 
2117
    .btn,
2118
    select {
2119
      margin: 0 0 .5rem 0 !important;
2120
 
2121
      &:last-of-type {
2122
        margin-bottom: 0;
2123
      }
2124
    }
2125
  }
2126
}
2127
 
2128
.tmpl-course-blocks,
2129
#block-region-dleftblocks,
2130
#block-region-drightblocks,
2131
#block-region-sidecourseblocks,
2132
#block-region-sidebartb,
2133
#block-region-sidebarbb,
2134
#block-region-side-pre {
2135
  .rui-cal-header {
2136
    gap: 10px;
2137
 
2138
    .custom-select,
2139
    .btn {
2140
      width: 100%;
2141
      max-width: 100%;
2142
      margin: 0 0 10px 0 !important;
2143
    }
2144
  }
2145
}
2146
 
2147
 
2148
/* Display month name above the calendar */
2149
table.calendartable caption {
2150
  caption-side: top;
2151
}
2152
 
2153
@mixin day-number-has-event {
2154
  .day-number {
2155
    display: inline-block;
2156
    position: relative;
2157
 
2158
    &:before {
2159
      content: '.';
2160
      display: inline-block;
2161
      position: absolute;
2162
      bottom: 0.4em;
2163
      left: 0;
2164
      text-align: center;
2165
      width: 100%;
2166
      font-size: 3em;
2167
      color: inherit;
2168
    }
2169
  }
2170
}
2171
 
2172
@media (min-width: 768px) {
2173
  #page-calender-view {
2174
    .container-fluid {
2175
      min-width: 1024px;
2176
    }
2177
  }
2178
}
2179
 
2180
@media (min-width: 768px) {
2181
 
2182
  #sidepre-blocks,
2183
  #block-region-sidebartb,
2184
  #block-region-sidebarbb,
2185
  #blocks-dashboardrightblock,
2186
  #blocks-dashboardleftblock,
2187
  #theme_universe-drawers-blocks,
2188
  section:not(#region-main) {
2189
    .block {
2190
      &.block_calendar_month {
2191
        .maincalendar {
2192
          .calendartable {
2193
            &.calendarmonth {
2194
 
2195
              th,
2196
              td {
2197
                border: none;
2198
                text-align: center !important; // stylelint-disable-line declaration-no-important
2199
                padding: 0;
2200
              }
2201
 
2202
              td {
2203
                height: auto !important;
2204
                font-size: 0.8em;
2205
 
2206
                &.hasevent {
2207
                  [data-region="day-content"] {
2208
                    display: none;
2209
                  }
2210
 
2211
                  @include day-number-has-event;
2212
                }
2213
 
2214
                &:after {
2215
                  content: '';
2216
                  display: block;
2217
                  margin-top: calc(100% - 26px);
2218
                }
2219
 
2220
                &.clickable:hover {
2221
                  background-color: inherit;
2222
                }
2223
 
2224
                &.clickable:not(.today):hover {
2225
                  .day-number-circle {
2226
                    border-radius: $btn-border-radius-xl;
2227
                    background-color: var(--primary-color-100);
2228
 
2229
                    .theme-dark & {
2230
                      background-color: $dm-gray-300;
2231
                    }
2232
                  }
2233
                }
2234
              }
2235
            }
2236
          }
2237
        }
2238
 
2239
        .bottom {
2240
          // This adds a border on the top side of the footer container.
2241
          // So we won't have to add a <hr> element in the footer_options template.
2242
          border-top: $border-width solid $card-border-color;
2243
          padding-top: map-get($spacers, 2);
2244
 
2245
          .theme-dark & {
2246
            border-color: $dm-border-color;
2247
          }
2248
        }
2249
      }
2250
    }
2251
  }
2252
}
2253
 
2254
@media (max-width: 768px) {
2255
  .maincalendar {
2256
    .calendartable {
2257
      &.calendarmonth {
2258
 
2259
        th,
2260
        td {
2261
          border: none;
2262
          text-align: center !important; // stylelint-disable-line declaration-no-important
2263
          padding: 0;
2264
        }
2265
 
2266
        td {
2267
          height: auto;
2268
          font-size: inherit;
2269
          padding: 0;
2270
 
2271
          &.hasevent {
2272
            [data-region="day-content"] {
2273
              display: none;
2274
            }
2275
 
2276
            @include day-number-has-event;
2277
          }
2278
 
2279
          &:after {
2280
            content: '';
2281
            display: block;
2282
            margin-top: calc(100% - 26px);
2283
          }
2284
 
2285
          &>div {
2286
            height: auto !important; // stylelint-disable-line declaration-no-important
2287
          }
2288
        }
2289
      }
2290
    }
2291
  }
2292
}
2293
 
2294
 
2295
@include media-breakpoint-between(xs, md) {
2296
  .maincalendar .calendartable.calendarmonth th {
2297
    font-size: 11px;
2298
  }
2299
}
2300
 
2301
.calendarwrapper {
2302
  position: relative;
2303
}
2304
 
2305
.day-popover-content {
2306
  &:empty+.day-popover-alternate {
2307
    display: block;
2308
  }
2309
}
2310
 
2311
.location-content {
2312
  overflow-wrap: break-word;
2313
}
2314
 
2315
.description-content {
2316
  overflow-wrap: break-word;
2317
 
2318
  >p {
2319
    margin: 0;
2320
  }
2321
}
2322
 
2323
.maincalendar .calendar_event_user a:after {
2324
  display: none;
2325
}
2326
 
2327
// Minicalendar event key
2328
.minicalendar-event-type {
2329
  display: flex;
2330
  justify-content: center;
2331
  align-items: stretch;
2332
  flex-wrap: wrap;
2333
  gap: 10px;
2334
 
2335
  #nav-drawer &,
2336
  #blocks-dashboardrightblock &,
2337
  #blocks-dashboardleftblock &,
2338
  #theme_universe-drawers-blocks & {
2339
    display: none;
2340
  }
2341
 
2342
  li {
2343
    font-size: $font-size-xs;
2344
    color: #212121;
2345
    padding: 3px 7px !important;
2346
    margin: 0 !important;
2347
  }
2348
 
2349
  span:first-letter {
2350
    text-transform: uppercase
2351
  }
2352
}
2353
 
2354
.footer .bottom {
2355
  justify-content: center;
2356
  align-items: stretch;
2357
  grid-template-columns: repeat(auto-fill, minmax(49%, 1fr));
2358
  display: grid;
2359
  gap: 10px;
2360
}
2361
 
2362
#sidepre-blocks,
2363
#block-region-sidebartb,
2364
#block-region-sidebarbb,
2365
#blocks-dashboardrightblock,
2366
#blocks-dashboardleftblock,
2367
#theme_universe-drawers-blocks {
2368
  .maincalendar .calendartable.calendarmonth th {
2369
    font-size: 11px;
2370
    font-weight: $font-weight-medium;
2371
  }
2372
 
2373
  .block .calendar-controls .current {
2374
    font-size: $font-size-md;
2375
  }
2376
 
2377
  .minicalendar-event-type {
2378
    justify-content: flex-start;
2379
    gap: 4px;
2380
  }
2381
 
2382
  .block_calendar_month {
2383
    .card-body .footer a {
2384
      margin: 2px 0;
2385
    }
2386
  }
2387
}